动效修改、沙盘页面上传、沙盘页面BUG修复

src/views/SandTable/SandTable.vue

@@ -3,7 +3,7 @@
     <img :src="require('@assets/png/3dback.png')" class="i3dback" />
     <!-- <img :src="require('@assets/png/3dcloud.png')" class="i3dcloud" /> -->
     <StBack></StBack>
-    <ThreeModel1 class="three-model-layer" @when="when"></ThreeModel1>
+    <ThreeModel1 class="three-model-layer" :data="mapSource" @when="when"></ThreeModel1>
     <div class="sand-table-left" v-if="showPanel">
       <PanelSand
         class="left-panel"
@@ -88,11 +88,161 @@
       </PanelSandToolbar>
     </div>
     <div class="sand-table-bottom" v-if="showPanel">
-      <Ppanel title="利用小时"></Ppanel>
-      <Ppanel title="设备可利用率" class="stb-p"></Ppanel>
-      <Ppanel title="MTBF" class="stb-p"></Ppanel>
-      <Ppanel title="MTTR" class="stb-p"></Ppanel>
-      <Ppanel title="MTTF" class="stb-p"></Ppanel>
+      <!-- <Ppanel
+        title="利用小时"
+        :data="riseNumber(gxkmap.bg_dxkyss)"
+        :dataColor="gxkmap.bg_dxkyss < 0 ? '#f25656' : '#05BB4C'"
+        :days="gxkmap.ydxkyss"
+        :data1Icon="gxkmap.tb_dxkyss < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
+        :data1IconClass="gxkmap.tb_dxkyss < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
+        :data2Icon="gxkmap.hb_dxkyss < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
+        :data2IconClass="gxkmap.hb_dxkyss < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
+      ></Ppanel>
+      <Ppanel title="设备可利用率"
+        class="stb-p"
+        :data="riseNumber(gxkmap.bg_sbklyl)"
+        :dataColor="gxkmap.bg_sbklyl < 0 ? '#f25656' : '#05BB4C'"
+        :days="gxkmap.ysbklyl"
+        :data1Icon="gxkmap.hb_sbklyl < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
+        :data1IconClass="gxkmap.hb_sbklyl < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
+        :data2Icon="gxkmap.tb_sbklyl < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
+        :data2IconClass="gxkmap.tb_sbklyl < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
+      ></Ppanel>
+      <Ppanel
+        title="MTBF"
+        class="stb-p"
+        :data="riseNumber(gxkmap.bg_mtbf)"
+        :dataColor="gxkmap.bg_mtbf < 0 ? '#f25656' : '#05BB4C'"
+        :days="gxkmap.mtbf"
+        :data1Icon="gxkmap.hb_mtbf < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
+        :data1IconClass="gxkmap.hb_mtbf < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
+        :data2Icon="gxkmap.tb_mtbf < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
+        :data2IconClass="gxkmap.tb_mtbf < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
+      ></Ppanel>
+      <Ppanel
+        title="MTTR"
+        class="stb-p"
+        :data="riseNumber(gxkmap.bg_mttr)"
+        :dataColor="gxkmap.bg_mttr < 0 ? '#f25656' : '#05BB4C'"
+        :days="gxkmap.mttr"
+        :data1Icon="gxkmap.hb_mttr < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
+        :data1IconClass="gxkmap.hb_mttr < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
+        :data2Icon="gxkmap.tb_mttr < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
+        :data2IconClass="gxkmap.tb_mttr < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
+      ></Ppanel>
+      <Ppanel
+        title="MTTF"
+        class="stb-p"
+        :data="riseNumber(gxkmap.bg_mttf)"
+        :dataColor="gxkmap.bg_mttf < 0 ? '#f25656' : '#05BB4C'"
+        :days="gxkmap.mttf"
+        :data1Icon="gxkmap.hb_mttf < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
+        :data1IconClass="gxkmap.hb_mttf < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
+        :data2Icon="gxkmap.tb_mttf < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
+        :data2IconClass="gxkmap.tb_mttf < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
+      ></Ppanel> -->
+      <Ppanel
+        title="利用小时"
+        :data="riseNumber(gxkmap.bg_dxkyss)"
+        :dataColor="gxkmap.bg_dxkyss < 0 ? '#f25656' : '#05BB4C'"
+        :days="gxkmap.ydxkyss"
+        :data1Icon="
+          gxkmap.tb_dxkyss < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'
+        "
+        :data1IconClass="
+          gxkmap.tb_dxkyss < 0
+            ? 'svg-icon-sm svg-icon-yellow'
+            : 'svg-icon-sm svg-icon-green'
+        "
+        :data2Icon="
+          gxkmap.hb_dxkyss < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'
+        "
+        :data2IconClass="
+          gxkmap.hb_dxkyss < 0
+            ? 'svg-icon-sm svg-icon-yellow'
+            : 'svg-icon-sm svg-icon-green'
+        "
+      ></Ppanel>
+      <Ppanel
+        title="设备可利用率"
+        class="stb-p"
+        :data="riseNumber(gxkmap.bg_sbklyl)"
+        :dataColor="gxkmap.bg_sbklyl < 0 ? '#f25656' : '#05BB4C'"
+        :days="gxkmap.ysbklyl"
+        :data1Icon="
+          gxkmap.hb_sbklyl < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'
+        "
+        :data1IconClass="
+          gxkmap.hb_sbklyl < 0
+            ? 'svg-icon-sm svg-icon-yellow'
+            : 'svg-icon-sm svg-icon-green'
+        "
+        :data2Icon="
+          gxkmap.tb_sbklyl < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'
+        "
+        :data2IconClass="
+          gxkmap.tb_sbklyl < 0
+            ? 'svg-icon-sm svg-icon-yellow'
+            : 'svg-icon-sm svg-icon-green'
+        "
+      ></Ppanel>
+      <Ppanel
+        title="MTBF"
+        class="stb-p"
+        :data="riseNumber(gxkmap.bg_mtbf)"
+        :dataColor="gxkmap.bg_mtbf < 0 ? '#f25656' : '#05BB4C'"
+        :days="gxkmap.mtbf"
+        :data1Icon="gxkmap.hb_mtbf < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
+        :data1IconClass="
+          gxkmap.hb_mtbf < 0
+            ? 'svg-icon-sm svg-icon-yellow'
+            : 'svg-icon-sm svg-icon-green'
+        "
+        :data2Icon="gxkmap.tb_mtbf < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
+        :data2IconClass="
+          gxkmap.tb_mtbf < 0
+            ? 'svg-icon-sm svg-icon-yellow'
+            : 'svg-icon-sm svg-icon-green'
+        "
+      ></Ppanel>
+      <Ppanel
+        title="MTTR"
+        class="stb-p"
+        :data="riseNumber(gxkmap.bg_mttr)"
+        :dataColor="gxkmap.bg_mttr < 0 ? '#f25656' : '#05BB4C'"
+        :days="gxkmap.mttr"
+        :data1Icon="gxkmap.hb_mttr < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
+        :data1IconClass="
+          gxkmap.hb_mttr < 0
+            ? 'svg-icon-sm svg-icon-yellow'
+            : 'svg-icon-sm svg-icon-green'
+        "
+        :data2Icon="gxkmap.tb_mttr < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
+        :data2IconClass="
+          gxkmap.tb_mttr < 0
+            ? 'svg-icon-sm svg-icon-yellow'
+            : 'svg-icon-sm svg-icon-green'
+        "
+      ></Ppanel>
+      <Ppanel
+        title="MTTF"
+        class="stb-p"
+        :data="riseNumber(gxkmap.bg_mttf)"
+        :dataColor="gxkmap.bg_mttf < 0 ? '#f25656' : '#05BB4C'"
+        :days="gxkmap.mttf"
+        :data1Icon="gxkmap.hb_mttf < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
+        :data1IconClass="
+          gxkmap.hb_mttf < 0
+            ? 'svg-icon-sm svg-icon-yellow'
+            : 'svg-icon-sm svg-icon-green'
+        "
+        :data2Icon="gxkmap.tb_mttf < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
+        :data2IconClass="
+          gxkmap.tb_mttf < 0
+            ? 'svg-icon-sm svg-icon-yellow'
+            : 'svg-icon-sm svg-icon-green'
+        "
+      ></Ppanel>
     </div>
     <el-dialog
       top="50px"
@@ -103,13 +253,13 @@
       :destroy-on-close="true"
       :before-close="
         (done) => {
-          videoDialogClass = 'modal animated bounceOut';
-          delaylyFn(650, done);
+          videoDialogClass = 'modal animated a1 bounceOut';
+          delaylyFn(450, done);
         }
       "
       @closed="
         dialogVideoUrl = '';
-        videoDialogClass = 'modal animated bounceIn';
+        videoDialogClass = 'modal animated a1 bounceIn';
       "
     >
       <iframe
@@ -121,10 +271,20 @@
     </el-dialog>
     <el-dialog
       title="停机详情"
-      custom-class="modal modal1 animated slideInLeft"
+      :custom-class="tableDialogClass"
       v-model="showTableDialog"
       width="80%"
       :destroy-on-close="true"
+      :before-close="
+        (done) => {
+          tableDialogClass = 'modal animated a1 fadeOutLeftBig';
+          delaylyFn(450, done);
+        }
+      "
+      @closed="
+        dialogVideoUrl = '';
+        tableDialogClass = 'modal animated a1 fadeInLeftBig';
+      "
     >
       <el-form style="margin: 30px 0" label-width="120px" inline>
         <el-form-item label="风机ID" style="width: 45%; margin-bottom: 25px">
@@ -188,11 +348,14 @@ export default {
       exchangeBtn1: false,
       timmer1: null,
       showTableDialog: false,
-      videoDialogClass: "modal animated bounceIn",
+      videoDialogClass: "modal animated a1 bounceIn",
+      tableDialogClass: "modal animated a1 fadeInLeftBig",
       timeStr: "",
       wpId: "0",
       tqmap1: {},
+      gxkmap: {},
       tableItem: {},
+      mapSource:{},
       videoArray: [
         [
           {
@@ -382,7 +545,7 @@ export default {
           wpId: that.wpId,
         },
         success(res) {
-          console.log(123123, res);
+          console.log(11111, res);
 
           that.tqmap1 = res.data.tqmap1;
 
@@ -396,12 +559,28 @@ export default {
           });
 
           that.sels.data = res.data.sels;
+          that.gxkmap = res.data.gxkmap;
+        },
+      });
+    },
+
+    // 获取中部地图数据
+    getWpHealthInfo() {
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "sandtable/judgeWpHealth",
+        data: {
+          wpId: that.wpId,
+        },
+        success(res) {
+          console.log(222222, res);
+          that.mapSource = res.data;
         },
       });
     },
 
     clickRow(row) {
-      console.log(111, row);
       this.tableItem = row;
       this.showTableDialog = true;
     },
@@ -412,6 +591,14 @@ export default {
       }, time);
     },
 
+    riseNumber(number) {
+      if (number < 0) {
+        return (number - number * 2) / 100;
+      } else {
+        return number / 100;
+      }
+    },
+
     when: function () {
       this.showPanel = true;
     },
@@ -430,6 +617,7 @@ export default {
   },
   created() {
     this.getWtInfo();
+    this.getWpHealthInfo();
     this.timeStr = new Date().formatDate("MM-dd hh:mm");
     this.timmer1 = setInterval(() => {
       this.timeStr = new Date().formatDate("MM-dd hh:mm");
@@ -574,8 +762,12 @@ export default {
     }
   }
 
-  .animated {
-    // animation-duration: 0.5s;
+  .animated.a0 {
+    animation-duration: 0.35s;
+  }
+
+  .animated.a1 {
+    animation-duration: 0.5s;
   }
 
   .el-overlay {
@@ -619,8 +811,4 @@ export default {
     }
   }
 }
-
-.modal1 {
-  animation-duration: 0.5s;
-}
 </style>

src/views/SandTable/component/p-panel.vue

@@ -1,207 +1,231 @@
 <template>
-    <div class="p-panel">
-        <div class="p-panel-title font-sm">{{ title }}</div>
-        <div class="p-panel-body">
-            <div class="pp-info">
-                <div class="pp-info-days mg-r-16">
-                    <span class="font-num green font-lg pp-info-days-num">{{ days }}</span>
-                    <span class="gray font-sm">{{ daysUnit }}</span>
-                </div>
-                <div class="pp-info-data mg-l-16">
-                    <span class="gray-l font-sm">{{ data1Str }}</span>
-                    <span class="pp-icon-l svg-icon" :class="data1IconClass">
-                        <svg-icon :svgid="data1Icon" />
-                    </span>
-                    <span class="gray-l font-sm">{{ data2Str }}</span>
-                    <span class="pp-icon-r svg-icon" :class="data2IconClass">
-                        <svg-icon :svgid="data2Icon" />
-                    </span>
-                </div>
-            </div>
-            <div class="pp-data">
-                <div class="pp-tip" :style="'margin-left: ' + (data*100) + '%'">
-                    <div class="pp-tip-data font-sm">{{ flip ? ((1 - data) * 100).toFixed(2) + "%" : (data * 100).toFixed(2) + "%" }}</div>
-                    <div class="pp-tip-icon"><i class="el-icon-caret-bottom font-sm" :style="'color: ' + dataColor"></i></div>
-                </div>
-                <div class="pp-data-box" :style="'border-color: ' + dataColor + '4d; background: ' + backColor + ';'">
-                    <div class="pp-data-split" v-for="index of 20" :key="index"></div>
-                    <div class="pp-data-num" :style="'width: ' + (data*100) + '%; background: ' + dataColor + ';'"></div>
-                </div>
-            </div>
+  <div class="p-panel">
+    <div class="p-panel-title font-sm">{{ title }}</div>
+    <div class="p-panel-body">
+      <div class="pp-info">
+        <div class="pp-info-days mg-r-16">
+          <span class="font-num green font-lg pp-info-days-num">{{
+            days
+          }}</span>
+          <span class="gray font-sm">{{ daysUnit }}</span>
         </div>
+        <div class="pp-info-data mg-l-16">
+          <span class="gray-l font-sm">{{ data1Str }}</span>
+          <span class="pp-icon-l svg-icon" :class="data1IconClass">
+            <svg-icon :svgid="data1Icon" />
+          </span>
+          <span class="gray-l font-sm">{{ data2Str }}</span>
+          <span class="pp-icon-r svg-icon" :class="data2IconClass">
+            <svg-icon :svgid="data2Icon" />
+          </span>
+        </div>
+      </div>
+      <div class="pp-data">
+        <div class="pp-tip" :style="'margin-left: ' + data * 100 + '%'">
+          <div class="pp-tip-data font-sm">
+            {{
+              flip
+                ? ((1 - data) * 100).toFixed(2) + "%"
+                : (data * 100).toFixed(2) + "%"
+            }}
+          </div>
+          <div class="pp-tip-icon">
+            <i
+              class="el-icon-caret-bottom font-sm"
+              :style="'color: ' + dataColor"
+            ></i>
+          </div>
+        </div>
+        <div
+          class="pp-data-box"
+          :style="
+            'border-color: ' + dataColor + '4d; background: ' + backColor + ';'
+          "
+        >
+          <div class="pp-data-split" v-for="index of 20" :key="index"></div>
+          <div
+            class="pp-data-num"
+            :style="
+              'width: ' + data * 100 + '%; background: ' + dataColor + ';'
+            "
+          ></div>
+        </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
 import SvgIcon from "@com/coms/icon/svg-icon.vue";
 export default {
-    // 名称
-    name: "Ppanel",
-    // 使用组件
-    components: {
-        SvgIcon,
+  // 名称
+  name: "Ppanel",
+  // 使用组件
+  components: {
+    SvgIcon,
+  },
+  // 传入参数
+  props: {
+    title: {
+      type: String,
+      default: "利用小时",
+    },
+    days: {
+      type: Number,
+      default: 88.5,
+    },
+    daysUnit: {
+      type: String,
+      default: "小时",
     },
-    // 传入参数
-    props: {
-        title: {
-            type: String,
-            default: "利用小时",
-        },
-        days: {
-            type: Number,
-            default: 88.5,
-        },
-        daysUnit: {
-            type: String,
-            default: "天",
-        },
-        data1Str: {
-            type: String,
-            default: "环",
-        },
-        data1IconClass: {
-            type: String,
-            default: "svg-icon-sm svg-icon-green",
-        },
-        data1Icon: {
-            type: String,
-            default: "svg-arrow-up-1",
-        },
-        data2Str: {
-            type: String,
-            default: "同",
-        },
-        data2Icon: {
-            type: String,
-            default: "svg-arrow-dpwn-1",
-        },
-        data2IconClass: {
-            type: String,
-            default: "svg-icon-sm svg-icon-yellow",
-        },
-        data: {
-            type: Number,
-            default: 0.75,
-        },
-        flip: {
-            type: Boolean,
-            default: false,
-        },
-        dataColor: {
-            type: String,
-            default: "#05BB4C",
-        },
-        backColor: {
-            type: String,
-            default: "#4B55AE",
-        },
+    data1Str: {
+      type: String,
+      default: "环",
     },
-    emits: {},
-    // 数据
-    data() {
-        return {};
+    data1IconClass: {
+      type: String,
+      default: "svg-icon-sm svg-icon-green",
     },
-    // 函数
-    methods: {},
-    // 生命周期钩子
-    beforeCreate() {
-        // 创建前
+    data1Icon: {
+      type: String,
+      default: "svg-arrow-up-1",
     },
-    created() {
-        // 创建后
+    data2Str: {
+      type: String,
+      default: "同",
     },
-    beforeMount() {
-        // 渲染前
+    data2Icon: {
+      type: String,
+      default: "svg-arrow-dpwn-1",
     },
-    mounted() {
-        // 渲染后
+    data2IconClass: {
+      type: String,
+      default: "svg-icon-sm svg-icon-yellow",
     },
-    beforeUpdate() {},
-    updated() {},
+    data: {
+      type: Number,
+      default: 0.75,
+    },
+    flip: {
+      type: Boolean,
+      default: false,
+    },
+    dataColor: {
+      type: String,
+      default: "#05BB4C",
+    },
+    backColor: {
+      type: String,
+      default: "#4B55AE",
+    },
+  },
+  emits: {},
+  // 数据
+  data() {
+    return {};
+  },
+  // 函数
+  methods: {},
+  // 生命周期钩子
+  beforeCreate() {
+    // 创建前
+  },
+  created() {
+    // 创建后
+  },
+  beforeMount() {
+    // 渲染前
+  },
+  mounted() {
+    // 渲染后
+  },
+  beforeUpdate() {},
+  updated() {},
 };
 </script>
 
 <style lang="less">
 .p-panel {
-    background: #1a1f2fCC;
+  background: #1a1f2fcc;
 
-    .font-sm {
-        font-size: 12px;
-    }
+  .font-sm {
+    font-size: 12px;
+  }
 
-    .p-panel-title {
-        height: 2.778vh;
-        line-height: 2.778vh;
-        text-align: center;
-        color: #ffffff;
-        border-bottom: 1px solid #ffffff66;
+  .p-panel-title {
+    height: 2.778vh;
+    line-height: 2.778vh;
+    text-align: center;
+    color: #ffffff;
+    border-bottom: 1px solid #ffffff66;
+  }
+
+  .p-panel-body {
+    .pp-info {
+      padding-top: 1.111vh;
+      display: flex;
+
+      .pp-info-days-num {
+        padding: 1.204vh 0.926vh 0 1.944vh;
+      }
+
+      .pp-info-data {
+        margin-left: auto;
+
+        .pp-icon-l {
+          padding: 1.111vh 2.037vh 0 0.556vh;
+        }
+
+        .pp-icon-r {
+          padding: 1.111vh 0.833vh 0 0.556vh;
+        }
+      }
     }
 
-    .p-panel-body {
-        .pp-info {
-            padding-top: 1.111vh;
-            display: flex;
+    .pp-data {
+      padding: 0.741vh 0.556vh 1.389vh 0.556vh;
+      .pp-tip {
+        display: inline-block;
 
-            .pp-info-days-num {
-                padding: 1.204vh 0.926vh 0 1.944vh;
-            }
+        .pp-tip-data,
+        .pp-tip-icon {
+          margin-left: -100%;
+          text-align: center;
+        }
+
+        .pp-tip-icon {
+          margin-top: -0.37vh;
+        }
+      }
 
-            .pp-info-data {
-                margin-left: auto;
+      .pp-data-box {
+        height: 0.741vh;
+        width: 200px;
+        border: 1px solid;
+        position: relative;
+        display: flex;
+        transform: skewX(-25deg);
 
-                .pp-icon-l {
-                    padding: 1.111vh 2.037vh 0 0.556vh;
-                }
+        .pp-data-split {
+          width: 10px;
+          height: 100%;
+          z-index: 2;
+          transition: 0.2s;
 
-                .pp-icon-r {
-                    padding: 1.111vh 0.833vh 0 0.556vh;
-                }
-            }
+          + .pp-data-split {
+            border-left: 1px solid #172f2e;
+          }
         }
 
-        .pp-data {
-            padding: 0.741vh 0.556vh 1.389vh 0.556vh;
-            .pp-tip {
-                display: inline-block;
-
-                .pp-tip-data,
-                .pp-tip-icon {
-                    margin-left: -100%;
-                    text-align: center;
-                }
-
-                .pp-tip-icon {
-                    margin-top: -0.37vh;
-                }
-            }
-
-            .pp-data-box {
-                height: 0.741vh;
-                width: 200px;
-                border: 1px solid;
-                position: relative;
-                display: flex;
-                transform: skewX(-25deg);
-
-                .pp-data-split {
-                    width: 10px;
-                    height: 100%;
-                    z-index: 2;
-                    
-                    +.pp-data-split {
-                        border-left: 1px solid #172F2E;
-                    }
-                }
-
-                .pp-data-num {
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    height: 100%;
-                    z-index: 1;
-                }
-            }
+        .pp-data-num {
+          position: absolute;
+          top: 0;
+          left: 0;
+          height: 100%;
+          z-index: 1;
         }
+      }
     }
+  }
 }
 </style>