fix bug

src/views/quality/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>
@@ -37,25 +29,26 @@
           </div>
           <div class="d-flex aside-width">
             <div class="react-right bg-color-r mr-3">
-             <!-- <span class="text ">设备运行分析</span>-->
-<!--              <span class="text" @click="fullScreen" ref="fullScreen">全屏</span>
+              <!-- <span class="text ">设备运行分析</span>-->
+              <!--              <span class="text" @click="fullScreen" ref="fullScreen">全屏</span>
               <span class="text" @click="exitFullScreen" ref="exitFullScreen"  style="display: none">退出全屏</span>-->
-              <el-button type="text" class="text" style="width:50% ;font-size: 21px;" @click="fullScreen" ref="fullScreen"
-                         v-show=!isFullScreen >全屏</el-button>
-              <el-button type="text" class="text" style="width:50% ;font-size: 21px;" @click="exitFullScreen" ref="exitFullScreen" v-show=isFullScreen>退出全屏</el-button>
+              <el-button type="text" class="text" style="width:50% ;font-size: 21px;" @click="fullScreen"
+                ref="fullScreen" v-show=!isFullScreen>全屏</el-button>
+              <el-button type="text" class="text" style="width:50% ;font-size: 21px;" @click="exitFullScreen"
+                ref="exitFullScreen" v-show=isFullScreen>退出全屏</el-button>
             </div>
             <div class="react-right mr-4 react-l-s" style="width: 900px">
               <span class="react-after"></span>
-               <el-dropdown class="dropdown">
+              <el-dropdown class="dropdown">
                 <span class="el-dropdown-link" ref="echarType">
                   品质IQC<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>&nbsp;&nbsp;&nbsp;&nbsp;
                 </span>
-                  <el-dropdown-menu slot="dropdown">
-                    <el-dropdown-item ><router-link to="assembly"> 组装车间 </router-link></el-dropdown-item>
-                    <el-dropdown-item ><router-link to="dpl"> 测试车间 </router-link></el-dropdown-item>
-                    <el-dropdown-item ><router-link to="package"> 包装车间 </router-link></el-dropdown-item>
-                  </el-dropdown-menu>
-            </el-dropdown>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item><router-link to="assembly"> 组装车间 </router-link></el-dropdown-item>
+                  <el-dropdown-item><router-link to="dpl"> 测试车间 </router-link></el-dropdown-item>
+                  <el-dropdown-item><router-link to="package"> 包装车间 </router-link></el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
               <span class="text">&nbsp;&nbsp;&nbsp;&nbsp;</span>
               <span class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span>
             </div>
@@ -70,23 +63,27 @@
                 <up1 />
               </dv-border-box-12>
             </div>
-          <!-- 第四行数据 -->
-          <div class="bottom-box">
-            <dv-border-box-12>
-              <bottom1 />
-            </dv-border-box-12>
-            <div>
-              <dv-border-box-12>
-                <bottom2 />
-              </dv-border-box-12>
+            <!-- 第四行数据 -->
+            <div class="bottom-box">
               <dv-border-box-12>
-                <bottom3 />
+                <bottom1 />
               </dv-border-box-12>
+              <div>
+                <div>
+                  <dv-border-box-12>
+                    <bottom2 />
+                  </dv-border-box-12>
+                </div>
+                <div>
+                  <dv-border-box-12>
+                    <bottom3 />
+                  </dv-border-box-12>
+                </div>
+              </div>
             </div>
           </div>
         </div>
       </div>
-      </div>
     </div>
   </div>
 </template>
@@ -100,7 +97,7 @@ import bottom2 from './bottom2'
 import bottom3 from './bottom3'
 
 export default {
-  mixins: [ drawMixin ],
+  mixins: [drawMixin],
   data() {
     return {
       timing: null,
@@ -110,14 +107,14 @@ export default {
       dateWeek: null,
       weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
       decorationColor: ['#568aea', '#000000'],
-      isShow:false
+      isShow: false
     }
   },
   components: {
-   up1,
-   bottom1,
-   bottom2,
-   bottom3,
+    up1,
+    bottom1,
+    bottom2,
+    bottom3,
   },
   created() {
 
@@ -126,7 +123,7 @@ export default {
     this.timeFn()
     this.cancelLoading()
   },
-  beforeDestroy () {
+  beforeDestroy() {
     clearInterval(this.timing)
     clearInterval(this.intervalId)
   },
@@ -152,10 +149,11 @@ export default {
 <style lang="scss" scoped>
 @import '../../assets/scss/indexquality.scss';
 
-.dropdown{
+.dropdown {
   font-size: 18px;
   color: #568aea;
   transform: skewX(45deg);
+
   ::v-deep .el-select-dropdown {
     /* // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；
     // 因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示； */
@@ -173,20 +171,25 @@ export default {
     color: #fff;
     background-color: #0f1325;
   }
+
   ::v-deep .el-select-dropdown {
     background-color: transparent;
     border: 1px solid #0f1325;
   }
+
   ::v-deep.el-select-dropdown__list {
     padding: 0;
   }
+
   ::v-deep.el-popper[x-placement^="bottom"] {
     margin-top: 0px;
   }
+
   ::v-deep.el-popper .popper__arrow,
   ::v-deep.el-popper .popper__arrow::after {
     display: none;
   }
+
   .el-select-dropdown__item:hover {
     background-color: rgba(0, 225, 219, 0.690196078431373);
   }