mt-fe-group/11-mes-new
12
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update 设备管理的techytable样式

Browse Source
This commit is contained in:
lb 2022-11-09 17:03:20 +08:00
parent 472ac0a19f
commit 3567838049
2 changed files with 77 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/views/EquipmentManager/HomePage.vue
View File

@ -354,15 +354,12 @@ export default {
flex-direction: column;
gap: calc(16px * var(--beilv));
width: 70%;
background-color: #aaaa;
}
.tech-body__col-2 {
width: 25%;
flex: 0;
/* height: calc(100% - 28px); */
height: 100%;
background-color: #cccc;
}
.techy-container__inner {
@ -386,7 +383,7 @@ export default {
.row-1 {
flex: 1;
display: flex;
gap: calc(100vw / 1920 * 16);
gap: calc(16px * var(--beilv));
}
.row-2 {
@ -410,7 +407,6 @@ export default {
.table-wrapper {
height: calc(100% - 3vh);
overflow: scroll;
background-color: #f003;
}
.grid {

147
src/views/EquipmentManager/components/TechyTable.vue
View File

@ -6,28 +6,8 @@
* @Description:
-->
<template>
<div class="visual-base-table-container">
<el-table
v-loading="isLoading"
:header-cell-style="{
background: 'rgba(79,114,136,0.29)',
color: '#fff',
height: 'calc(100vh / 1920 * 48)',
lineHeight: 'calc(100vh / 1920 * 48)',
padding: 0,
fontSize: 'calc(100vh / 1920 * 20)'
}"
:row-style="setRowStyle"
:data="renderData"
border
style="width: 100%; background: transparent"
:cell-style="{
height: 'calc(100vh / 1920 * 48)',
lineHeight: 'calc(100vh / 1920 * 48)',
padding: 0,
fontSize: 'calc(100vh / 1920 * 20)'
}"
>
<div class="visual-base-table-container el-table-wrapper">
<el-table class="techy-el-table" v-loading="isLoading" :data="renderData" border>
<el-table-column
v-if="page && limit && showIndex"
prop="_pageIndex"
@ -136,78 +116,103 @@ export default {
return {
background: 'rgba(76,97,123,0.2)',
color: 'rgba(255,255,255,0.5)',
height: 26 * this.beilv + 'px',
lineHeight: 26 * this.beilv + 'px',
height: 'calc(16px * var(--beilv))',
lineHeight: 'calc(16px * var(--beilv))',
padding: 0,
fontSize: 12 * this.beilv + 'px'
fontSize: 'calc(16px * var(--beilv))'
}
} else {
return {
background: 'rgba(79,114,136,0.29)',
color: 'rgba(255,255,255,0.5)',
height: 26 * this.beilv + 'px',
lineHeight: 26 * this.beilv + 'px',
height: 'calc(16px * var(--beilv))',
lineHeight: 'calc(16px * var(--beilv))',
padding: 0,
fontSize: 12 * this.beilv + 'px'
fontSize: 'calc(14px * var(--beilv))'
}
}
},
setCellStyle(v) {
return {
lineHeight: 23 * this.beilv + 'px'
lineHeight: 'calc(16px * var(--beilv))'
}
}
}
}
</script>
<style lang="scss">
@import '~@/styles/index.scss';
.visual-base-table-container {
.el-table {
border: 0;
}
.el-table::before,
.el-table--border::after {
background-color: transparent;
}
.el-table th,
td {
border-color: #0d1728 !important;
padding: 0;
}
.el-table tr {
background: transparent;
}
.el-table__row:hover > td {
background-color: rgba(79, 114, 136, 0.29) !important;
}
.el-table__row--striped:hover > td {
background-color: rgba(79, 114, 136, 0.29) !important;
}
}
.setting {
text-align: right;
padding: 15px;
.setting-box {
width: 100px;
}
i {
color: #aaa;
@extend .pointer;
}
}
.p-0 {
padding: 0;
<style>
.fix-table >>> .el-table td .cell {
width: 60% !important;
margin: auto;
text-align: left;
}
.p-0 >>> .cell {
.left-content-equipment-check {
height: calc(100% - 32px);
display: flex;
gap: calc(100vmin / 1920 * 36);
overflow: hidden;
}
.el-table-wrapper {
flex: 1;
}
.left-content-equipment-check > div {
overflow: hidden;
/* overflow-x: scroll; */
}
.el-table-wrapper >>> * {
background: transparent;
}
.el-table-wrapper >>> .el-table::before,
.el-table-wrapper >>> .el-table--group::after,
.el-table-wrapper >>> .el-table--border::after {
background: transparent;
}
.el-table-wrapper >>> .el-table {
font-size: 8px;
background-color: transparent;
color: #fff9;
border: 0;
height: 100%;
margin: 0;
overflow-y: auto;
}
.el-table-wrapper >>> .el-table th.is-leaf,
.el-table-wrapper >>> .el-table td {
border-color: #0d1728;
padding: 0;
}
.font-and-height {
font-size: calc(100vh / 1920 * 32);
.el-table__row--striped:hover > td,
.el-table-wrapper >>> .el-table__row:hover > td {
background-color: rgba(79, 114, 136, 0.29) !important;
}
.el-table-wrapper >>> table {
border: unset;
}
.el-table-wrapper >>> thead {
color: #fff;
}
.el-table-wrapper >>> tr {
background: unset;
}
.el-table-wrapper >>> tbody td > div,
.el-table-wrapper >>> thead th > div {
white-space: nowrap;
}
.el-table-wrapper >>> th,
.el-table-wrapper >>> td {
padding: 0;
}
.el-table-wrapper >>> tbody > tr:nth-child(even) {
background: rgba(76, 97, 123, 0.2);
}
</style>