From d0391dba3708d3f32bcd94e1881d1b598a0d9ef0 Mon Sep 17 00:00:00 2001 From: zhangshuaibao <15731629597@163.com> Date: 星期四, 15 四月 2021 17:21:10 +0800 Subject: [PATCH] 修改图表问题 --- src/components/BaseNav/PublicBounced/common/PublicTable.vue | 134 ++++++++++++++++++++++++++++---------------- 1 files changed, 85 insertions(+), 49 deletions(-) diff --git a/src/components/BaseNav/PublicBounced/common/PublicTable.vue b/src/components/BaseNav/PublicBounced/common/PublicTable.vue index 65558af..1515187 100644 --- a/src/components/BaseNav/PublicBounced/common/PublicTable.vue +++ b/src/components/BaseNav/PublicBounced/common/PublicTable.vue @@ -1,17 +1,22 @@ <template> - <div class="win"> - <!-- 鍥涗釜瑙掔殑杈规鏁堟灉 --> - <div class="border_corner border_corner_left_top"></div> - <div class="border_corner border_corner_right_top"></div> - <div class="border_corner border_corner_left_bottom"></div> - <div class="border_corner border_corner_right_bottom"></div> - <div class="main"> - <div class="main-table"> - <el-table :data="listData" style="width: 100%" height="200px" :row-class-name="tableRowClassName"> - <el-table-column v-for="(item, index) in listLabel" :key="index" :prop="item.prop" - :label="item.label"></el-table-column> - </el-table> - </div> + <!-- <div class="react">--> + <!-- <div class="main-table">--> + <!-- <el-table :data="listData" style="width: 100%" height="255px" :row-class-name="tableRowClassName">--> + <!-- <el-table-column v-for="(item, index) in listLabel" :key="index" :prop="item.prop"--> + <!-- :label="item.label" :show-overflow-tooltip="true"></el-table-column>--> + <!-- </el-table>--> + <!-- </div>--> + <!-- </div>--> + <div class="main"> + <span></span> + <span></span> + <span></span> + <span></span> + <div class="main-table"> + <el-table :data="listData" style="width: 100%" height="325px" :row-class-name="tableRowClassName"> + <el-table-column v-for="(item, index) in listLabel" :key="index" :prop="item.prop" + :label="item.label" :show-overflow-tooltip="true"></el-table-column> + </el-table> </div> </div> </template> @@ -57,12 +62,11 @@ }, mounted () { this.$nextTick(() => { - this.displayContentTable.forEach(item => { - this.listData = item - }) + this.listData.push(this.displayContentTable[0], {}, {}, {}, {}, {}, {}) }) }, methods: { + // 闅旇棰滆壊璁剧疆 tableRowClassName ({ row, rowIndex @@ -79,52 +83,84 @@ </script> <style lang="less" scoped> +//.react { +// position: relative; +// background: rgba(33, 41, 69, 0.9); +// background: linear-gradient(to left, #02a6b5, #02a6b5) left top no-repeat, +// linear-gradient(to bottom, #02a6b5, #02a6b5) left top no-repeat, +// linear-gradient(to left, #02a6b5, #02a6b5) right top no-repeat, +// linear-gradient(to bottom, #02a6b5, #02a6b5) right top no-repeat, +// linear-gradient(to left, #02a6b5, #02a6b5) left bottom no-repeat, +// linear-gradient(to bottom, #02a6b5, #02a6b5) left bottom no-repeat, +// linear-gradient(to left, #02a6b5, #02a6b5) right bottom no-repeat, +// linear-gradient(to left, #02a6b5, #02a6b5) right bottom no-repeat; +// background-size: 2px 20px, 20px 2px, 2px 20px, 20px 2px; +// +// .main-table { +// //border: 1px red solid; +// } +//} +/deep/ .el-table td { + border-bottom: none !important; +} -.win { - position: relative; - background-color: rgba(33, 41, 69, 0.9); +/deep/ .el-table th.is-leaf { + border-bottom: none !important; +} + +/deep/ .el-table td { + height: 45px !important; + line-height: 45px !important; +} + +/deep/ .el-table tbody tr:hover > td { + background: none !important } .main { - .main-table { - width: 100%; - } + position: relative; + background: rgba(33, 41, 69, 0.9); + //border: 1px solid red; } -.border_corner { - z-index: 999; +.main span:nth-child(1) { position: absolute; - width: 14px; - height: 14px; - background: rgba(0, 0, 0, 0); - border: 1px solid #47d5ea; + left: -1px; + top: -1px; + padding: 10px; + border-style: solid; + border-color: #02a6b5; + border-width: 1px 0 0 1px; } -.border_corner_left_top { - top: 0; - left: 0; - border-right: none; - border-bottom: none; +.main span:nth-child(2) { + position: absolute; + right: -1px; + top: -1px; + padding: 10px; + border-style: solid; + border-color: #02a6b5; + border-width: 1px 1px 0 0; } -.border_corner_right_top { - top: 0; - right: 0; - border-left: none; - border-bottom: none; +.main span:nth-child(3) { + position: absolute; + right: -1px; + bottom: -1px; + padding: 10px; + border-style: solid; + border-color: #02a6b5; + border-width: 0 1px 1px 0; } -.border_corner_left_bottom { - bottom: 0; - left: 0; - border-right: none; - border-top: none; +.main span:nth-child(4) { + position: absolute; + left: -1px; + bottom: -1px; + padding: 10px; + border-style: solid; + border-color: #02a6b5; + border-width: 0 0 1px 1px; } -.border_corner_right_bottom { - bottom: 0; - right: 0; - border-left: none; - border-top: none; -} </style> -- Gitblit v1.8.0