From 29316d6f9366057244e8a17ea9af5400a4f58591 Mon Sep 17 00:00:00 2001 From: wangqi <magical1908@outlook.com> Date: 星期一, 29 三月 2021 17:59:17 +0800 Subject: [PATCH] 添加弹窗模块边框角高亮 --- src/components/BaseNav/PublicBounced/GasComponents/GasTable.vue | 81 +++++++++++++++++++++++++++++++++------- 1 files changed, 66 insertions(+), 15 deletions(-) diff --git a/src/components/BaseNav/PublicBounced/GasComponents/GasTable.vue b/src/components/BaseNav/PublicBounced/GasComponents/GasTable.vue index 0b927c9..76515a1 100644 --- a/src/components/BaseNav/PublicBounced/GasComponents/GasTable.vue +++ b/src/components/BaseNav/PublicBounced/GasComponents/GasTable.vue @@ -1,16 +1,26 @@ <template> - <el-row> - <el-row> - <el-col :span="8">鐩戞祴鐐瑰悕绉�:{{name}}</el-col> - <el-col :span="8">鐢熶骇鍗曚綅:{{ DeptSname }}</el-col> - <el-col :span="8">鎺掓斁绫诲瀷鍔犺浇:{{EmissTypeName}}</el-col> - </el-row> - <el-row> - <el-col :span="8">鎺掓斁鍘诲悜:{{EmissTypeDirectName}}</el-col> - <el-col :span="8">鎺у埗绾у埆鍚嶇О:{{ContrLevelShowName}}</el-col> - <el-col :span="8">鍐�/澶栨帓鍙�:{{OrOutPortName}}</el-col> - </el-row> - </el-row> + <!-- 妗� --> + <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-row> + <el-row> + <el-col :span="8">鐩戞祴鐐瑰悕绉�:{{name}}</el-col> + <el-col :span="8">鐢熶骇鍗曚綅:{{ DeptSname }}</el-col> + <el-col :span="8">鎺掓斁绫诲瀷鍔犺浇:{{EmissTypeName}}</el-col> + </el-row> + <el-row> + <el-col :span="8">鎺掓斁鍘诲悜:{{EmissTypeDirectName}}</el-col> + <el-col :span="8">鎺у埗绾у埆鍚嶇О:{{ContrLevelShowName}}</el-col> + <el-col :span="8">鍐�/澶栨帓鍙�:{{OrOutPortName}}</el-col> + </el-row> + </el-row> + </div> + </div> </template> <script> @@ -31,14 +41,55 @@ </script> <style scoped lang="less"> + +.win { + position: relative; + display: inline-block; + //border: 1px solid #396d83; +} +.main { + width: 100%; + height: 100%; +} +.border_corner{ + z-index: 2500; + position: absolute; + width: 14px; + height: 14px; + background: rgba(0,0,0,0); + border: 2px 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-bottom-left-radius: 4px; +} +.border_corner_right_bottom{ + bottom: 0; + right: 0; + border-left: none; + border-top: none; +} .el-row { color: #00d0f9; .el-col{ width: 200px; height: 28px; - background-color: #243a55; - border-radius: 0.05rem; - //margin: 5px; + background-color: #243a55;; text-align: center; line-height: 28px; } -- Gitblit v1.8.0