From cc47aa597188a3d907b1ffd8bbd1f6a5cf2f5a5b Mon Sep 17 00:00:00 2001 From: ZhangXianQiang <1135831638@qq.com> Date: 星期三, 10 四月 2024 15:22:45 +0800 Subject: [PATCH] style:修改样式 --- src/permission.js | 2 src/views/screen/components/wrapper-title/index.vue | 27 ++++-- src/assets/icons/setting.png | 0 src/views/screen/components/screen-wrapper/index.vue | 30 ++++--- src/views/screen/components/select-item/index.vue | 2 src/views/screen/components/screen-table/index.vue | 130 ++++++++++++++++++-------------- 6 files changed, 111 insertions(+), 80 deletions(-) diff --git a/src/assets/icons/setting.png b/src/assets/icons/setting.png new file mode 100644 index 0000000..4ff2803 --- /dev/null +++ b/src/assets/icons/setting.png Binary files differ diff --git a/src/permission.js b/src/permission.js index 45c6285..462668d 100644 --- a/src/permission.js +++ b/src/permission.js @@ -8,7 +8,7 @@ NProgress.configure({ showSpinner: false }) -const whiteList = ['/login', '/register'] +const whiteList = ['/login', '/register', '/screen'] router.beforeEach((to, from, next) => { NProgress.start() diff --git a/src/views/screen/components/screen-table/index.vue b/src/views/screen/components/screen-table/index.vue index bb24e4c..0629df0 100644 --- a/src/views/screen/components/screen-table/index.vue +++ b/src/views/screen/components/screen-table/index.vue @@ -1,71 +1,81 @@ <template> <div class="table-container"> + <wrapper-title :title="'鍖哄煙璁惧鏁版嵁'" :path="'/monitorServe/face'"></wrapper-title> <div class="table-content" ref="tabContent"> - <el-table :data="tableData" border :height="tableHeight" :max-height="tableHeight" class="rank-table"> - <el-table-column prop="name" label="鍦板尯" align="center" width="100"> - </el-table-column> + <div class="table-wrapper"> + <el-table :data="tableData" border :height="tableHeight" :max-height="tableHeight" class="rank-table"> + <el-table-column prop="name" label="鍦板尯" align="center" width="100"> + </el-table-column> - <el-table-column label="浜鸿劯璁惧姝e父鐜�" align="center"> - <template slot-scope="scope"> - <el-tooltip placement="top"> - <div slot="content"> - <div class="tip-item"> - <div class="tip-label">璁惧姝e父鏁�:</div> - <div class="tip-info tip-success">12</div> + <el-table-column label="浜鸿劯璁惧姝e父鐜�" align="center"> + <template slot-scope="scope"> + <el-tooltip placement="top"> + <div slot="content"> + <div class="tip-item"> + <div class="tip-label">璁惧姝e父鏁�:</div> + <div class="tip-info tip-success">12</div> + </div> + <div class="tip-item"> + <div class="tip-label">璁惧寮傚父鏁�:</div> + <div class="tip-info tip-danger">4</div> + </div> </div> - <div class="tip-item"> - <div class="tip-label">璁惧寮傚父鏁�:</div> - <div class="tip-info tip-danger">4</div> - </div> - </div> - <div class="tip-num">75%</div> - </el-tooltip> - </template> - </el-table-column> + <div class="tip-num">75%</div> + </el-tooltip> + </template> + </el-table-column> - <el-table-column label="杞﹁締璁惧姝e父鐜�" align="center"> - <template slot-scope="scope"> - <el-tooltip placement="top"> - <div slot="content"> - <div class="tip-item"> - <div class="tip-label">璁惧姝e父鏁�:</div> - <div class="tip-info tip-success">12</div> + <el-table-column label="杞﹁締璁惧姝e父鐜�" align="center"> + <template slot-scope="scope"> + <el-tooltip placement="top"> + <div slot="content"> + <div class="tip-item"> + <div class="tip-label">璁惧姝e父鏁�:</div> + <div class="tip-info tip-success">12</div> + </div> + <div class="tip-item"> + <div class="tip-label">璁惧寮傚父鏁�:</div> + <div class="tip-info tip-danger">4</div> + </div> </div> - <div class="tip-item"> - <div class="tip-label">璁惧寮傚父鏁�:</div> - <div class="tip-info tip-danger">4</div> - </div> - </div> - <div class="tip-num">75%</div> - </el-tooltip> - </template> - </el-table-column> + <div class="tip-num">75%</div> + </el-tooltip> + </template> + </el-table-column> - <el-table-column label="瑙嗛璁惧姝e父鐜�" align="center"> - <template slot-scope="scope"> - <el-tooltip placement="top"> - <div slot="content"> - <div class="tip-item"> - <div class="tip-label">璁惧姝e父鏁�:</div> - <div class="tip-info tip-success">12</div> + <el-table-column label="瑙嗛璁惧姝e父鐜�" align="center"> + <template slot-scope="scope"> + <el-tooltip placement="top"> + <div slot="content"> + <div class="tip-item"> + <div class="tip-label">璁惧姝e父鏁�:</div> + <div class="tip-info tip-success">12</div> + </div> + <div class="tip-item"> + <div class="tip-label">璁惧寮傚父鏁�:</div> + <div class="tip-info tip-danger">4</div> + </div> </div> - <div class="tip-item"> - <div class="tip-label">璁惧寮傚父鏁�:</div> - <div class="tip-info tip-danger">4</div> - </div> - </div> - <div class="tip-num">75%</div> - </el-tooltip> - </template> - </el-table-column> - </el-table> + <div class="tip-num">75%</div> + </el-tooltip> + </template> + </el-table-column> + </el-table> + </div> </div> </div> </template> <script> +import WrapperTitle from '../wrapper-title/index'; + export default { + name: 'ScreenTable', + + components: { + WrapperTitle + }, data() { return { tableHeight: 40, @@ -137,14 +147,18 @@ // flex: 1; height: 350px; position: relative; - background: rgba(67, 102, 155, 0.3); - border: 1px solid rgba(47, 91, 157, 0.8); + + display: flex; + flex-direction: column; .table-content { - position: absolute; - width: 100%; - top: 0; - bottom: 0; + flex: 1; + background: rgba(67, 102, 155, 0.3); + border: 1px solid rgba(47, 91, 157, 0.8); + // position: absolute; + // width: 100%; + // top: 0; + // bottom: 0; } } diff --git a/src/views/screen/components/screen-wrapper/index.vue b/src/views/screen/components/screen-wrapper/index.vue index d375a26..adb161a 100644 --- a/src/views/screen/components/screen-wrapper/index.vue +++ b/src/views/screen/components/screen-wrapper/index.vue @@ -1,8 +1,8 @@ <template> <div class="wrapper-container"> <select-item></select-item> - <div class="return-button"> - <el-button type="primary" @click="returnPath">绠$悊绯荤粺</el-button> + <div class="return-button" @click="returnPath"> + 杩斿洖 </div> <div class="wrapper-content"> <div class="left-container wrapper"> @@ -25,8 +25,8 @@ <script> import SelectItem from '../select-item/index'; -import ScreenFace from '../screen-face/index'; import ScreenExamine from '../screen-examine/index'; +import ScreenFace from '../screen-face/index'; import ScreenVideo from '../screen-video/index'; import ScreenCar from '../screen-car/index'; import ScreenMap from '../screen-map/index'; @@ -35,12 +35,12 @@ name: 'ScreenWrapper', components: { SelectItem, - ScreenFace, ScreenExamine, - ScreenVideo, - ScreenCar, ScreenMap, - ScreenTable + ScreenTable, + ScreenFace, + ScreenVideo, + ScreenCar }, methods: { returnPath() { @@ -54,7 +54,13 @@ .return-button { position: absolute; right: 20px; - top: 40px; + top: 10px; + border-radius: 4px; + border: 1px solid #4481DD; + background-color: rgba(67, 102, 155, 0.4); + color: #4481DD; + padding: 5px 20px; + cursor: pointer; } .wrapper-container { @@ -67,8 +73,8 @@ .wrapper-content { width: 100%; - height: calc(100% - 100px); - margin-top: 100px; + height: calc(100% - 60px); + margin-top: 60px; position: relative; box-sizing: border-box; padding: 20px; @@ -79,7 +85,7 @@ } .wrapper { - width: 20%; + width: 23%; height: 100%; box-sizing: border-box; padding: 0 10px; @@ -97,7 +103,7 @@ } .center-wrapper { - width: 60%; + width: 54%; height: 100%; box-sizing: border-box; padding: 0 10px; diff --git a/src/views/screen/components/select-item/index.vue b/src/views/screen/components/select-item/index.vue index 53a40cd..75ee4bb 100644 --- a/src/views/screen/components/select-item/index.vue +++ b/src/views/screen/components/select-item/index.vue @@ -87,7 +87,7 @@ <style lang="scss" scoped> .select-container { position: absolute; - top: 40px; + top: 10px; left: 20px; display: flex; align-items: center; diff --git a/src/views/screen/components/wrapper-title/index.vue b/src/views/screen/components/wrapper-title/index.vue index 6351d2b..265b777 100644 --- a/src/views/screen/components/wrapper-title/index.vue +++ b/src/views/screen/components/wrapper-title/index.vue @@ -3,11 +3,12 @@ <span class="title">{{ title }}</span> <div class="more-button" v-if="path" @click="toPath"> - <dv-border-box-12> - <div class="button-text"> - 璇︽儏 - </div> - </dv-border-box-12> + <div class="icon"> + <img src="@/assets/icons/setting.png" alt=""> + </div> + <div class="button-text"> + 鏌ョ湅鏇村 + </div> </div> </div> </template> @@ -26,7 +27,7 @@ } }, methods: { - toPath () { + toPath() { this.$router.push(this.path); } } @@ -56,9 +57,19 @@ } .more-button { - width: 100px; height: 40px; cursor: pointer; + display: flex; + align-items: center; + .icon { + width: 20px; + margin-top: 4px; + margin-right: 2px; + img { + width: 100%; + display: block; + } + } .button-text { width: 100%; @@ -67,7 +78,7 @@ justify-content: center; align-items: center; color: #ffffff81; - font-size: 20px; + font-size: 16px; } } } -- Gitblit v1.8.0