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="浜鸿劯璁惧姝ｅ父鐜�" 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="杞﹁締璁惧姝ｅ父鐜�" 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="瑙嗛璁惧姝ｅ父鐜�" 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: '鑽ｅ幙',
+ 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,
},
{
- 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