Browse Source

调整界面UI

yhluo 6 months ago
parent
commit
4e2564940b

+ 4 - 1
src/views/testShop/barLeft.vue

@@ -106,8 +106,11 @@ export default {
     border-radius: 10px;
     height: 100%;
     width: 100%;
+    :first-child{
+      height: 5%;
+    }
     >div+div{
-      height: 80%;
+      height: 95%;
     }
   }
   .text {

+ 4 - 1
src/views/testShop/barRight.vue

@@ -113,8 +113,11 @@ export default {
     border-radius: 10px;
     height: 100%;
     width: 100%;
+    :first-child{
+      height: 5%;
+    }
     >div+div{
-      height: 80%;
+      height: 95%;
     }
   }
   .text {

+ 1 - 1
src/views/testShop/center.vue

@@ -103,7 +103,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$box-height: 420px;
+$box-height: 470px;
 #center {
   width: 100%;
   padding: 5px;

+ 1 - 1
src/views/testShop/center1.vue

@@ -103,7 +103,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$box-height: 420px;
+$box-height: 470px;
 #center {
   width: 100%;
   padding: 5px;

+ 26 - 58
src/views/testShop/index.vue

@@ -9,17 +9,9 @@
             <dv-decoration-8 class="dv-dec-8" :color="decorationColor" />
             <div class="title">
               <span class="title-text">UAS-MES可视化平台</span>
-              <dv-decoration-6
-                class="dv-dec-6"
-                :reverse="true"
-                :color="['#50e3c2', '#67a1e5']"
-              />
+              <dv-decoration-6 class="dv-dec-6" :reverse="true" :color="['#50e3c2', '#67a1e5']" />
             </div>
-            <dv-decoration-8
-              class="dv-dec-8"
-              :reverse="true"
-              :color="decorationColor"
-            />
+            <dv-decoration-8 class="dv-dec-8" :reverse="true" :color="decorationColor" />
           </div>
           <dv-decoration-10 class="dv-dec-10-s" />
         </div>
@@ -29,9 +21,7 @@
           <div class="d-flex aside-width">
             <div class="react-left ml-4 react-l-s bg-color-blue">
               <span class="react-left"></span>
-              <span class="text fw-b" style="font-size: 24px"
-                >普耐尔MES数据看板</span
-              >
+              <span class="text fw-b" style="font-size: 24px">普耐尔MES数据看板</span>
             </div>
             <div class="react-left ml-3">
               <span class="text">生产实况分析</span>
@@ -39,25 +29,10 @@
           </div>
           <div class="d-flex aside-width">
             <div class="react-right bg-color-r mr-3">
-              <span
-                class="text"
-                @click="fullScreen"
-                ref="fullScreen"
-                v-show="!isFullScreen"
-                >全屏</span
-              >
-              <span
-                class="text"
-                @click="exitFullScreen"
-                ref="exitFullScreen"
-                v-show="isFullScreen"
-                >退出全屏</span
-              >
+              <span class="text" @click="fullScreen" ref="fullScreen" v-show="!isFullScreen">全屏</span>
+              <span class="text" @click="exitFullScreen" ref="exitFullScreen" v-show="isFullScreen">退出全屏</span>
             </div>
-            <div
-              class="react-right mr-4 react-l-s right_titile"
-              style="width: 900px"
-            >
+            <div class="react-right mr-4 react-l-s right_titile" style="width: 900px">
               <el-dropdown class="dropdown">
                 <span class="el-dropdown-link" ref="echarType">
                   测试车间
@@ -65,35 +40,20 @@
                   &nbsp;&nbsp;&nbsp;&nbsp;
                 </span>
                 <el-dropdown-menu slot="dropdown">
-                  <el-dropdown-item
-                    ><router-link to="assembly">
+                  <el-dropdown-item><router-link to="assembly">
                       组装车间
-                    </router-link></el-dropdown-item
-                  >
-                  <el-dropdown-item
-                    ><router-link to="package">
+                    </router-link></el-dropdown-item>
+                  <el-dropdown-item><router-link to="package">
                       包装车间
-                    </router-link></el-dropdown-item
-                  >
+                    </router-link></el-dropdown-item>
                 </el-dropdown-menu>
               </el-dropdown>
-              <el-select
-                v-model="linecode"
-                class="dropdown"
-                @change="handleBlur"
-                style="width: 150px"
-              >
-                <el-option
-                  v-for="item in linedata"
-                  :key="item.LI_CODE"
-                  :label="item.LI_CODE"
-                  :value="item.LI_CODE"
-                ></el-option>
+              <el-select v-model="linecode" class="dropdown" @change="handleBlur" style="width: 150px" v-show="false">
+                <el-option v-for="item in linedata" :key="item.LI_CODE" :label="item.LI_CODE"
+                  :value="item.LI_CODE"></el-option>
               </el-select>
               <span class="text">&nbsp;&nbsp;&nbsp;&nbsp;</span>
-              <span class="text"
-                >{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span
-              >
+              <span class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span>
             </div>
           </div>
         </div>
@@ -241,22 +201,30 @@ export default {
 .host-body {
   .body-box {
     width: 100%;
-    height: 900px;
+    height: 980px;
     overflow: hidden;
 
-    > div {
+    >div {
       width: 100%;
-      height: 440px;
+      height: 470px;
       margin-bottom: 10px;
       overflow: hidden;
 
-      > div {
+      >div {
         width: 50%;
         height: 100%;
         float: left;
       }
     }
   }
+
+  > :first-child {
+    height: 50px;
+  }
+
+  > :nth-child(2) {
+    height: 50px;
+  }
 }
 
 .dropdown {