From 28aeecb7d9d78b67407ae2b9855b1f2b1a02261d Mon Sep 17 00:00:00 2001 From: wangqi <magical1908@outlook.com> Date: 星期五, 02 四月 2021 10:21:08 +0800 Subject: [PATCH] 修改样式 --- src/components/BaseNav/PublicBounced/GasComponents/PublicTable.vue | 128 ++++++++++++++++++++++++++++++------------ 1 files changed, 92 insertions(+), 36 deletions(-) diff --git a/src/components/BaseNav/PublicBounced/GasComponents/PublicTable.vue b/src/components/BaseNav/PublicBounced/GasComponents/PublicTable.vue index 2c878b8..a35207d 100644 --- a/src/components/BaseNav/PublicBounced/GasComponents/PublicTable.vue +++ b/src/components/BaseNav/PublicBounced/GasComponents/PublicTable.vue @@ -1,53 +1,109 @@ <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-video"> + <el-table + tooltip-effect="dark" + :data="displayContentTable2" + > + <el-table-column prop="StoragePlaceId" label="搴忓彿"></el-table-column> + <el-table-column prop="StoragePlaceTypeName" label="绫诲埆"></el-table-column> + <el-table-column prop="StoragePlaceName" label="鍥哄簾鍚嶇О"></el-table-column> + <el-table-column prop="StorageZDMJ" label="浠g爜"></el-table-column> + <el-table-column prop="StorageZCNL" label="浜х敓閲�"></el-table-column> + <el-table-column prop="StorageZCL" label="鍌ㄥ瓨閲�"></el-table-column> + <el-table-column prop="StorageType" 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 寮�' - }] + displayContentTable2: [ + { + CompanyName: '涓煩鐭冲寲', + StoragePlaceId: 3, + StoragePlaceName: '鐏版福鍦�', + StoragePlaceTypeName: '涓�鑸浐搴熷~鍩嬪満', + StorageType: '绮夌叅鐏般�佺伆娓�', + StorageZCL: '38', + StorageZCNL: '40.7', + StorageZDMJ: '10.60798' + } + ], + displayContentTable3: [] } } } </script> <style lang="less" scoped> +.win { + position: relative; + background-color: rgba(33, 41, 69, 0.9); +} +.main { + width: 100%; + height: 100%; + + .main-video { + width: 100%; + min-height: 164px; + + 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