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