bigwindow页面的样式调整完毕

gassafetyprogress-web/src/views/bigWindow/index.vue

 <!--
  * @Author: your name
  * @Date: 2022-01-11 13:44:17
- * @LastEditTime: 2022-08-23 17:04:59
+ * @LastEditTime: 2022-08-24 11:23:42
  * @LastEditors: 纪泽龙 jizelong@qq.com
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /test/hello-world/src/views/Home.vue
@@ -54,7 +54,12 @@
     </div>
 
     <!-- 设备按钮 -->
-    <div class="typelist-div">
+    <div
+      :class="{
+        'typelist-div': windowInnerWidth > 1100,
+        'typelist-divZ': windowInnerWidth < 1100,
+      }"
+    >
       <div
         class="list"
         v-for="(item, index) in arr"
@@ -79,20 +84,26 @@
     </div>
 
     <!-- 头部 -->
-    <div class="banner-test">
+    <div class="banner-test" :style="{height:windowInnerWidth>1100?'85px':'70px'}">
       <!-- <dv-decoration-5 style="width:100%;height:100%;" /> -->
       <img src="@/assets/mapinages/tb.png" alt="" />
     </div>
 
     <!-- 左边 -->
-    <div class="leftbar" :style="{width:windowInnerWidth>1024?'470px':'300px'}">
-      <leftBar v-if="windowInnerWidth>1024" ref="mychild2"></leftBar>
+    <div
+      class="leftbar"
+      :style="{ width: windowInnerWidth > 1024 ? '470px' : '300px' }"
+    >
+      <leftBar v-if="windowInnerWidth > 1024" ref="mychild2"></leftBar>
       <leftBarZ v-else ref="mychild2"></leftBarZ>
-
     </div>
     <!-- 右边 -->
-    <div class="rightbar">
-      <rightBar ref="mychild"></rightBar>
+    <div
+      class="rightbar"
+      :style="{ width: windowInnerWidth > 1024 ? '470px' : '300px' }"
+    >
+      <rightBar v-if="windowInnerWidth > 1024" ref="mychild"></rightBar>
+      <rightBarZ v-else ref="mychild"></rightBarZ>
     </div>
 
     <!-- 左上角天气 -->
@@ -183,12 +194,14 @@ import PipeColor from "@/components/bigWindow/PipeColor.vue";
 import leftBar from "@/components/bigWindow/leftBar.vue";
 import leftBarZ from "@/components/bigWindow/leftBarZ.vue";
 import rightBar from "@/components/bigWindow/rightBar.vue";
+import rightBarZ from "@/components/bigWindow/rightBarZ.vue";
 export default {
   name: "Home",
   components: {
     leftBar,
     leftBarZ,
     rightBar,
+    rightBarZ,
     // Center,
     UserCenter,
     OtherCenter,
@@ -272,7 +285,7 @@ export default {
 
       // 报警轮询timer
       alarmTimer: null,
-      windowInnerWidth:0,
+      windowInnerWidth: 0,
     };
   },
 
@@ -598,15 +611,17 @@ export default {
   overflow: hidden;
   height: calc(100vh - 85px);
   position: fixed;
-  top: 10%;
+  top: 85px;
   left: 0;
   background: #112238;
 }
 .rightbar {
   width: 470px;
-  height: 90%;
+  height: calc(100vh - 85px);
+
   position: fixed;
-  top: 10%;
+  top: 85px;
+
   right: 0;
   background: #112238;
 }
@@ -698,28 +713,59 @@ export default {
   top: 0;
   margin-top: 120px;
   right: 470px;
+  .list {
+    z-index: 9999;
+    float: left;
+    margin-left: 15px;
+    color: #fff;
+    line-height: auto;
+    text-align: center;
+    background: linear-gradient(86deg, #112238 0%, #086187 62%, #112238 100%);
+    box-shadow: inset 0px 1px 2px 1px #125c9b;
+    font-size: 15px;
+    padding: 5px 7px;
+    cursor: pointer;
+    line-height: 26px;
+  }
+  .list.active {
+    background: linear-gradient(86deg, #112238 0%, #32a3d3 62%, #112238 100%);
+    box-shadow: inset 0px 1px 2px 1px #125c9b;
+    font-size: 14px;
+  }
+  .list img {
+    width: 22px;
+  }
 }
-.list {
+.typelist-divZ {
+  width: 400px;
+  // height: 30px;
   z-index: 9999;
-  float: left;
-  margin-left: 15px;
-  color: #fff;
-  line-height: auto;
-  text-align: center;
-  background: linear-gradient(86deg, #112238 0%, #086187 62%, #112238 100%);
-  box-shadow: inset 0px 1px 2px 1px #125c9b;
-  font-size: 15px;
-  padding: 5px 7px;
-  cursor: pointer;
-  line-height: 26px;
-}
-
-.list.active {
-  background: linear-gradient(86deg, #112238 0%, #32a3d3 62%, #112238 100%);
-  box-shadow: inset 0px 1px 2px 1px #125c9b;
-  font-size: 14px;
-}
-.list img {
-  width: 22px;
+  position: fixed;
+  top: 85px;
+  left: 50%;
+  margin-left: -200px;
+  .list {
+    z-index: 9999;
+    float: left;
+    margin-left: 15px;
+    color: #fff;
+    line-height: auto;
+    text-align: center;
+    background: linear-gradient(86deg, #112238 0%, #086187 62%, #112238 100%);
+    box-shadow: inset 0px 1px 2px 1px #125c9b;
+    font-size: 10px;
+    padding: 5px 7px;
+    cursor: pointer;
+    margin-bottom: 5px;
+    // line-height: 30px;
+  }
+  .list.active {
+    background: linear-gradient(86deg, #112238 0%, #32a3d3 62%, #112238 100%);
+    box-shadow: inset 0px 1px 2px 1px #125c9b;
+    font-size: 10px;
+  }
+  .list img {
+    width: 15px;
+  }
 }
 </style>