From 4eeaec1eddd5ef2be4b79423154fa2dce81d5566 Mon Sep 17 00:00:00 2001 From: 黄何裕 <1053952480@qq.com> Date: 星期五, 26 七月 2024 15:28:09 +0800 Subject: [PATCH] 大屏重构 --- src/views/screen/components/screen-table/index.vue | 95 +++++++++++++++++++++++++---------------------- 1 files changed, 51 insertions(+), 44 deletions(-) diff --git a/src/views/screen/components/screen-table/index.vue b/src/views/screen/components/screen-table/index.vue index 01e715d..2cf0b6d 100644 --- a/src/views/screen/components/screen-table/index.vue +++ b/src/views/screen/components/screen-table/index.vue @@ -1,13 +1,22 @@ <template> <div class="table-container"> - <wrapper-title :title="'鍖哄煙璁惧鏁版嵁'" :path="'/monitorServe/recovery'"></wrapper-title> + <!-- <wrapper-title + :title="'鍖哄煙璁惧鏁版嵁'" + :path="'/monitorServe/recovery'" + ></wrapper-title> --> <div class="table-content" ref="tabContent"> <div class="table-wrapper"> - <el-table :data="tableData" border :height="tableHeight" :max-height="tableHeight" class="rank-table"> + <el-table + :data="tableData" + border + :height="tableHeight" + :max-height="tableHeight" + class="rank-table" + > <el-table-column prop="name" label="鍦板尯" align="center" width="100"> </el-table-column> - <el-table-column label="浜鸿劯璁惧姝e父鐜�" align="center"> + <el-table-column label="浜鸿劯璁惧" align="center"> <template slot-scope="scope"> <el-tooltip placement="top"> <div slot="content"> @@ -25,7 +34,7 @@ </template> </el-table-column> - <el-table-column label="杞﹁締璁惧姝e父鐜�" align="center"> + <el-table-column label="杞﹁締璁惧" align="center"> <template slot-scope="scope"> <el-tooltip placement="top"> <div slot="content"> @@ -43,7 +52,7 @@ </template> </el-table-column> - <el-table-column label="瑙嗛璁惧姝e父鐜�" align="center"> + <el-table-column label="瑙嗛璁惧" align="center"> <template slot-scope="scope"> <el-tooltip placement="top"> <div slot="content"> @@ -63,67 +72,66 @@ </el-table> </div> </div> - </div> </template> <script> -import WrapperTitle from '../wrapper-title/index'; +import WrapperTitle from "../wrapper-title/index"; export default { - name: 'ScreenTable', + name: "ScreenTable", components: { - WrapperTitle + WrapperTitle, }, data() { return { tableHeight: 40, tableData: [ { - name: '瀵岄『鍘�', + name: "瀵岄『鍘�", data1: 1123, data2: 1123, - data3: 1123 + data3: 1123, }, { - name: '鑽e幙', + name: "鑽e幙", data1: 1123, data2: 1123, - data3: 1123 + data3: 1123, }, { - name: '楂樻柊鍖�', + name: "楂樻柊鍖�", data1: 1123, data2: 1123, - data3: 1123 + data3: 1123, }, { - name: '鑷祦浜曞尯', + name: "鑷祦浜曞尯", data1: 1123, data2: 1123, - data3: 1123 + data3: 1123, }, { - name: '璐′簳鍖�', + name: "璐′簳鍖�", data1: 1123, data2: 1123, - data3: 1123 + data3: 1123, }, { - name: '澶у畨鍖�', + name: "澶у畨鍖�", data1: 1123, data2: 1123, - data3: 1123 + data3: 1123, }, { - name: '娌挎哗鍖�', + name: "娌挎哗鍖�", data1: 1123, data2: 1123, - data3: 1123 + data3: 1123, }, - ] - } + ], + }; }, methods: { computedHeight() { @@ -131,21 +139,21 @@ setTimeout(() => { const content = this.$refs.tabContent; this.tableHeight = content.offsetHeight; - }) - }) - } + }); + }); + }, }, mounted() { this.computedHeight(); - } -} + }, +}; </script> <style lang="scss" scoped> .table-container { width: 100%; // flex: 1; - height: 350px; + height: 240px; position: relative; display: flex; @@ -153,16 +161,12 @@ .table-content { flex: 1; - background: rgba(67, 102, 155, 0.3); - border: 1px solid rgba(47, 91, 157, 0.8); - // position: absolute; - // width: 100%; - // top: 0; - // bottom: 0; + // background: url("../../../../assets/images/screen/cardBg.png"); + // background-size: cover !important; + // background-repeat: no-repeat !important; + // background-position: center center !important; } } - - .rank-table { background-color: transparent !important; @@ -181,7 +185,6 @@ ::v-deep .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th { background-color: transparent !important; - } ::v-deep .el-table--group, @@ -198,8 +201,8 @@ border-color: #56739e99 !important; } -::v-deep .el-table th.el-table__cell>.cell { - color: #447ED6; +::v-deep .el-table th.el-table__cell > .cell { + color: #447ed6; } ::v-deep .el-scrollbar__bar.is-vertical { @@ -212,7 +215,11 @@ background-color: transparent !important; } -::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell { +::v-deep + .el-table--enable-row-hover + .el-table__body + tr:hover + > td.el-table__cell { background-color: #447ed648; } @@ -239,4 +246,4 @@ color: #e20c0c; } } -</style> \ No newline at end of file +</style> -- Gitblit v1.8.0