From ce9312be0865e2ec49cf86606489ad87bafcebfc Mon Sep 17 00:00:00 2001 From: chenzeping <ChenZeping02609@163.com> Date: 星期三, 07 四月 2021 10:30:48 +0800 Subject: [PATCH] 固废弹框信息及数据修改 --- src/components/BaseNav/PublicBounced/GasComponents/PublicTable.vue | 163 ++++++++++++++++++++++++++++++++++++++++++------------ 1 files changed, 127 insertions(+), 36 deletions(-) diff --git a/src/components/BaseNav/PublicBounced/GasComponents/PublicTable.vue b/src/components/BaseNav/PublicBounced/GasComponents/PublicTable.vue index 2c878b8..dd6eada 100644 --- a/src/components/BaseNav/PublicBounced/GasComponents/PublicTable.vue +++ b/src/components/BaseNav/PublicBounced/GasComponents/PublicTable.vue @@ -1,48 +1,80 @@ <template> - <div class="public-table"> - <table border="1"> - <tr> - <th>111</th> - <th>111</th> - <th>111</th> - <th>111</th> - <th>111</th> - <th>111</th> - </tr> - <tr> - <td>4444444444</td> - <td>4444444444</td> - <td>4444444444</td> - <td>4444444444</td> - <td>4444444444</td> - <td>4444444444</td> - </tr> - </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"> + <div class="main-table"> + <el-table :data="listData" style="width: 100%" stripe='stripe' + :height="300" + tooltip-effect="dark" :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> </div> </template> <script> export default { name: 'PublicTable', + props: ['displayContentTable'], data () { return { - tableData: [{ - date: '2016-05-02', - name: '鐜嬪皬铏�', - address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�' - }, { - date: '2016-05-04', - name: '鐜嬪皬铏�', - address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1517 寮�' - }, { - date: '2016-05-01', - name: '鐜嬪皬铏�', - address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1519 寮�' - }, { - date: '2016-05-03', - name: '鐜嬪皬铏�', - address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1516 寮�' - }] + listData: [], + listLabel: [ + { + label: '搴忓彿', + prop: 'StoragePlaceId' + }, + { + label: '绫诲埆', + prop: 'StoragePlaceTypeName' + }, + { + label: '鍥哄簾鍚嶇О', + prop: 'StoragePlaceName' + }, + { + label: '浠g爜', + prop: 'StorageZDMJ' + }, + { + label: '浜х敓閲�(t)', + prop: 'StorageZCL' + }, + { + label: '璐瓨閲�(t)', + prop: 'StorageZCNL' + }, + { + label: '浜х敓瑁呯疆', + prop: 'StorageType' + } + ] + } + }, + mounted () { + this.$nextTick(() => { + this.displayContentTable.forEach(item => { + this.listData = item + }) + }) + }, + methods: { + tableRowClassName ({ + row, + rowIndex + }) { + if (rowIndex % 2 === 0) { + return 'warning-row' + } else if (rowIndex % 2 === 1) { + return 'success-row' + } + return '' } } } @@ -50,4 +82,63 @@ <style lang="less" scoped> +.win { + position: relative; + background-color: rgba(33, 41, 69, 0.9); + min-height: 300px; +} + +.main { + width: 100%; + height: 100%; + + .main-table { + width: 100%; + min-height: 195px; + //border: 1px @color solid; + + 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: 1px 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