视频监控100%

src/views/Alarm/Alarm.vue

@@ -2,13 +2,13 @@
   <div class="alarm">
     <div class="alarm-top">
       <div class="alarm-top-left">
-        <div class="alarm-divide line">
+        <div class="alarm-divide line" style="z-index: 999;">
           <div class="alarm-title">
             <div class="alarm-title-left"></div>
             <div class="alarm-title-center">今日报警</div>
             <div class="alarm-title-right"></div>
           </div>
-          <div class="alarm-content">
+          <div class="alarm-content" style="background: #0F152B">
             <chart-pie></chart-pie>
           </div>
         </div>
@@ -271,6 +271,7 @@ export default {
   }
   .line:hover {
     transform-origin: 0 0;
+    z-index: 999;
     transform: scale(1.5);
   }
   .alarm-bottom {

src/views/Monit/Monit.vue

@@ -1,13 +1,169 @@
 <template>
-  <div>视频监控</div>
+  <div class="monit">
+    <div class="monit-left">
+      <div class="monit-title" @click="isShow = !isShow">
+        <div>
+          <span>配怀舍过道东&emsp;</span>
+        </div>
+        <div>
+          <i class="icon"></i>
+        </div>
+      </div>
+      <div v-show="isShow" class="monit-content">
+        <div class="content-flex">
+          <select-block :title="'一栋'">
+            <template v-slot:left>
+              <select-column :list="simulatedData"></select-column>
+            </template>
+            <template v-slot:right>
+              <select-column :list="simulatedData" :floor="false" :type="1"></select-column>
+            </template>
+          </select-block>
+        </div>
+        <div class="content-flex">
+          <select-block :title="'一栋'">
+            <template v-slot:left>
+              <select-column :list="simulatedData"></select-column>
+            </template>
+            <template v-slot:right>
+              <select-column :list="simulatedData" :type="1"></select-column>
+            </template>
+          </select-block>
+        </div>
+        <div class="content-flex">
+          <select-block :title="'一栋'">
+            <template v-slot:left>
+              <select-column :list="simulatedData"></select-column>
+            </template>
+            <template v-slot:right>
+              <select-column :list="simulatedData" :type="1"></select-column>
+            </template>
+          </select-block>
+        </div>
+      </div>
+    </div>
+    <div class="monit-right">
+      <swiper style="height: 100%;  margin-top: auto; margin-bottom: auto;" class="swiper" :options="swiperOption">
+        <swiper-slide v-for="item in 10" :key="item">
+          <div class="case"></div>
+        </swiper-slide>
+      </swiper>
+    </div>
+  </div>
 </template>
 
 <script>
+import { swiper, swiperSlide } from 'vue-awesome-swiper'
+import 'swiper/css/swiper.css'
+import SelectBlock from "@/views/Zoology/leftTop/SelectBlock";
+import SelectColumn from "@/views/Zoology/leftTop/SelectColumn";
 export default {
- name: "Monit"
+  name: "Monit",
+  components: {
+    swiper,
+    swiperSlide,
+    SelectBlock,
+    SelectColumn
+  },
+  data() {
+    return {
+      swiperOption: {
+        direction: 'vertical',
+        slidesPerView: 3,
+        slidesPerColumn: 1,
+        slidesPerGroup: 3,
+        // spaceBetween: 30,
+        autoplay: {
+          delay: 3000,
+          disableOnInteraction: false
+        },
+      },
+      isShow: false,
+      simulatedData: [ // 左上 —— 模拟的数据
+        { id: 1, name: '1' },
+        { id: 2, name: '11' },
+        { id: 3, name: '111' },
+        { id: 4, name: '1111' },
+        { id: 5, name: '1111' },
+        { id: 6, name: '11111' },
+        { id: 7, name: '111111' },
+        { id: 8, name: '1111111' },
+        { id: 9, name: '1111111' },
+        { id: 10, name: '1111111' },
+        { id: 11, name: '1111111' },
+        { id: 12, name: '1111111' },
+      ],
+    }
+  }
 }
 </script>
 
 <style scoped>
-
+  .monit {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    padding: 20px 0 0 0;
+    display: flex;
+    justify-content: space-between;
+  }
+  .monit-left {
+    flex: 1;
+    height: 100%;
+    background: url("../../assets/BioSafety/kuang.png") no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+  }
+  .monit-right {
+    width: 450px;
+    margin-left: 20px;
+  }
+  .case {
+    width: 100%;
+    height: 100%;
+    background: url("../../assets/BioSafety/kuang.png") no-repeat;
+    background-size: 100% 100%;
+  }
+  .monit-title {
+    width: 300px;
+    height: 40px;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    line-height: 40px;
+    transform: translate(-50% , 0);
+    background-color: #031032;
+    text-align: center;
+    color: white;
+    font-size: 18px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+  }
+  .icon {
+    width: 18px;
+    height: 18px;
+    display: inline-block;
+    background: url("../../assets/Zoology/u5069.svg") no-repeat;
+    background-size: 100% 100%;
+    margin-top: 10px;
+  }
+  .monit-content {
+    /*width: 1180px;*/
+    /*height: 300px;*/
+    position: absolute;
+    top: 45px;
+    left: 50%;
+    transform: translate(-50% , 0);
+    border: 5px solid #00FFFF;
+    border-radius: 10px;
+    background-color: #323232;
+    display: flex;
+    box-sizing: border-box;
+    padding: 60px 20px;
+  }
+  .content-flex {
+    flex: 1;
+  }
 </style>