From 4783886d2dd9ca05bca014f2aad2a409e4ae33b5 Mon Sep 17 00:00:00 2001 From: chenzeping <ChenZeping02609@163.com> Date: 星期三, 31 三月 2021 16:20:30 +0800 Subject: [PATCH] 公共弹框表格修改 --- src/components/BaseNav/PublicBounced/GasComponents/PublicTable.vue | 127 ++++++++++++++++++++++++++++++++---------- 1 files changed, 96 insertions(+), 31 deletions(-) diff --git a/src/components/BaseNav/PublicBounced/GasComponents/PublicTable.vue b/src/components/BaseNav/PublicBounced/GasComponents/PublicTable.vue index 12f1a91..2a6d685 100644 --- a/src/components/BaseNav/PublicBounced/GasComponents/PublicTable.vue +++ b/src/components/BaseNav/PublicBounced/GasComponents/PublicTable.vue @@ -1,53 +1,118 @@ <template> - <div class="public-table"> - <el-table - :data="tableData" - style="width: 100%"> - <el-table-column - prop="date" - label="鏃ユ湡" - width="180"> - </el-table-column> - <el-table-column - prop="name" - label="濮撳悕" - width="180"> - </el-table-column> - <el-table-column - prop="address" - label="鍦板潃"> - </el-table-column> - </el-table> + <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"> + <el-col class="main-video"> + <el-table + border + tooltip-effect="dark" + :data="data" + > + <el-table-column prop="name" label="搴忓彿"></el-table-column> + <el-table-column prop="name" label="绫诲埆"></el-table-column> + <el-table-column prop="date" label="鍥哄簾鍚嶇О"></el-table-column> + <el-table-column prop="address" label="浠g爜"></el-table-column> + <el-table-column prop="address" label="浜х敓閲�"></el-table-column> + <el-table-column prop="name" label="鍌ㄥ瓨閲�"></el-table-column> + <el-table-column prop="date" label="浜х敓瑁呯疆"></el-table-column> + </el-table> + </el-col> + </div> </div> </template> <script> export default { name: 'PublicTable', + props: ['requestSolidWasteData'], data () { return { - tableData: [{ - date: '2016-05-02', + data: [{ + date: '2016-05-03', name: '鐜嬪皬铏�', address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�' }, { - date: '2016-05-04', + date: '2016-05-02', name: '鐜嬪皬铏�', - address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1517 寮�' - }, { - date: '2016-05-01', - name: '鐜嬪皬铏�', - address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1519 寮�' - }, { - date: '2016-05-03', - name: '鐜嬪皬铏�', - address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1516 寮�' + address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�' }] + } + }, + mounted () { + this.$nextTick(() => { + this.getSolidWasteData() + }) + }, + methods: { + getSolidWasteData () { + // const data = requestSolidWasteData + // console.log(data) } } } </script> <style lang="less" scoped> +.win { + position: relative; + background-color: rgba(33, 41, 69, 0.9); +} +.main { + width: 100%; + height: 100%; + + .main-video { + //border: 1px solid #396d83; + width: 100%; + height: 100%; + + video { + width: 100%; + height: 100%; + outline: none; + } + } +} + +.border_corner { + z-index: 999; + position: absolute; + width: 14px; + height: 14px; + background: rgba(0, 0, 0, 0); + border: 1.5px solid #47d5ea; +} + +.border_corner_left_top { + top: 0; + left: 0; + border-right: none; + border-bottom: none; +} + +.border_corner_right_top { + top: 0; + right: 0; + border-left: none; + border-bottom: none; +} + +.border_corner_left_bottom { + bottom: 0; + left: 0; + border-right: none; + border-top: none; +} + +.border_corner_right_bottom { + bottom: 0; + right: 0; + border-left: none; + border-top: none; +} </style> -- Gitblit v1.8.0