From 9a7d9b9b6058a0a601cb1e8c9ba4565ce2d3c985 Mon Sep 17 00:00:00 2001 From: wangqi <magical1908@outlook.com> Date: 星期二, 30 三月 2021 11:26:57 +0800 Subject: [PATCH] 废气公共样式 废气公共样式 --- src/components/BaseNav/PublicBounced/GasComponents/GasTable.vue | 129 ++++++++++++++++++++++++++++++++++-------- 1 files changed, 104 insertions(+), 25 deletions(-) diff --git a/src/components/BaseNav/PublicBounced/GasComponents/GasTable.vue b/src/components/BaseNav/PublicBounced/GasComponents/GasTable.vue index cfddb19..e05f59f 100644 --- a/src/components/BaseNav/PublicBounced/GasComponents/GasTable.vue +++ b/src/components/BaseNav/PublicBounced/GasComponents/GasTable.vue @@ -1,15 +1,25 @@ <template> - <div class="gas-tab"> - <el-row type="flex" class="row-bg" justify="space-around"> - <el-col :span="12">鐩戞祴鐐瑰悕绉�:{{ displayContent.Name }}</el-col> - <el-col :span="12">鐢熶骇鍗曚綅:{{ displayContent.DeptSname }}</el-col> - <el-col :span="12">鎺掓斁绫诲瀷鍔犺浇:{{ displayContent.EmissTypeName }}</el-col> - </el-row> - <el-row type="flex" class="row-bg" justify="space-around"> - <el-col :span="12">鎺掓斁鍘诲悜:{{ displayContent.EmissTypeDirectName }}</el-col> - <el-col :span="12">鎺у埗绾у埆鍚嶇О:{{ displayContent.ContrLevelShowName }}</el-col> - <el-col :span="12">鍐�/澶栨帓鍙�:{{ displayContent.OrOutPortName }}</el-col> - </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"> + <div class="main-matter"> + <el-row type="flex" class="row-bg row-item-one" justify="space-around"> + <el-col :span="12">鐩戞祴鐐瑰悕绉�:{{ displayContent.Name }}</el-col> + <el-col :span="12">鐢熶骇鍗曚綅:{{ displayContent.DeptSname }}</el-col> + <el-col :span="12">鎺掓斁绫诲瀷鍔犺浇:{{ displayContent.EmissTypeName }}</el-col> + </el-row> + <el-row type="flex" class="row-bg" justify="space-around"> + <el-col :span="12">鎺掓斁鍘诲悜:{{ displayContent.EmissTypeDirectName }}</el-col> + <el-col :span="12">鎺у埗绾у埆鍚嶇О:{{ displayContent.ContrLevelShowName }}</el-col> + <el-col :span="12">鍐�/澶栨帓鍙�:{{ displayContent.OrOutPortName }}</el-col> + </el-row> + </div> + </div> </div> </template> @@ -24,21 +34,90 @@ </script> <style scoped lang="less"> -.gas-tab { - border: 1px #4c667d solid; + +.win { + position: relative; + //display: inline-block; + margin-bottom: 13px; + background-color: rgba(33, 41, 69,0.9); } - -.el-row { - color: #00d0f9; - - .el-col { - width: 200px; - height: 28px; - background-color: #243a55; - border-radius: 0.05rem; - margin: 5px 0; - text-align: center; - line-height: 28px; +.main { + width: 100%; + height: 100%; + .main-matter{ + font-size: 13px; + padding: 9px 7px; + font-weight: normal; + border: 1px solid #396d83; + .row-item-one{ + margin-bottom: 7px; + } + .el-row { + width: 100%; + color: #00d0f9; + display: flex; + font-size: 12px!important; + .el-col{ + flex: 1; + width: 100%; + background-color: #243a55;; + text-align: center; + line-height: 28px; + margin-left: 6px; + border-radius: 4px; + &:nth-child(1){ + margin-left:0; + } + } + } } } +.border_corner{ + z-index: 2500; + position: absolute; + width: 10px; + height: 10px; + 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; +} +//.el-row { +// width: 100%; +// color: #00d0f9; +// .el-col{ +// width: 180px; +// height: 28px; +// background-color: #243a55;; +// text-align: center; +// line-height: 28px; +// margin-left: 6px; +// border-radius: 4px; +// &:nth-child(1){ +// margin-left:0; +// } +// } +//} </style> -- Gitblit v1.8.0