fix

src/components/map.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="viewmap">
     <img src="../assets/images/map.png"/>
-    <svg class="lines" width="628" height="445">
-      <line v-for="(item, index) in links" :key="index" :x2="item[0]" :y2="item[1]" x1="445" y1="200" stroke="rgba(185, 208, 231, 0.7)"/>
+    <svg class="lines" width="895" height="632">
+      <line v-for="(item, index) in links" :key="index" :x2="item[0]" :y2="item[1]" x1="630" y1="288" stroke="rgba(185, 208, 231, 0.7)"/>
     </svg>
     <div class="icon">
       <div class="dot"></div>
@@ -13,26 +13,26 @@
 </template>
 <script>
 const links = [
-  [150, 180],
-  [300, 200],
-  [150, 300],
-  [240, 245],
-  [500, 180],
-  [550, 150],
-  [560, 100],
-  [400, 350],
-  [400, 240],
-  [400, 280],
-  [400, 320],
-  [400, 400],
-  [360, 400],
-  [340, 360],
-  [280, 380],
-  [300, 330],
-  [450, 250],
-  [450, 310],
-  [430, 360],
-  [460, 370],
+  [170, 268],
+  [500, 300],
+  [750, 200],
+  [780, 80],
+  [700, 260],
+  [520, 580],
+  [680, 500],
+  [380, 350],
+  [420, 440],
+  [400, 580],
+  [600, 520],
+  [300, 460],
+  [480, 520],
+  // [360, 460],
+  // [580, 380],
+  // [300, 330],
+  // [450, 260],
+  // [450, 310],
+  // [430, 360],
+  // [460, 370],
 ]
 export default {
   name: 'viewmap',
@@ -46,9 +46,9 @@ export default {
 </script>
 <style lang="less" scoped>
   .viewmap{
-    width: 628px;
+    width: 895px;
     margin: auto;
-    margin-top: 100px;
+    margin-top: 20px;
     position: relative;
     img{
       max-width: 100%;
@@ -68,8 +68,8 @@ export default {
       z-index: 999;
       width: 26px;
       height: 26px;
-      top: 188px;
-      left: 430px;
+      top: 275px;
+      left: 615px;
       .dot{
         position: absolute;
         width: 8px;

src/components/safe/index.vue

@@ -6,7 +6,13 @@
         :class="{animate__fadeInDown: inited ? item[2] : true}"
         v-for="(item, index) in items"
         :key="index"
-        :style="{width: item[3] + 'px', top: item[0] + 'px', left: item[1] + 'px', 'animation-delay': (!inited ? (index * 0.3) + 's' : '0s')}"
+        :style="{
+          width: item[3] + 'px',
+          top: item[0] + 'px',
+          left: item[1] + 'px',
+          'animation-delay': (!inited ? (index * 0.3) + 's' : '0s'),
+          'z-index': 6 - index
+        }"
         :src="require(`./images/${index + 1}.png`)"
       />
     </div>
@@ -14,11 +20,11 @@
 </template>
 <script>
 const items = [
-  [50, 50, false, 421],
+  [60, 50, false, 421],
   [120, 220, false, 466],
   [180, -100, false, 581],
-  [260, -15, false, 520],
-  [340, 190, false, 519],
+  [240 , -25, false, 520],
+  [305, 178, false, 519],
 ]
 export default {
   name: 'safe',

src/components/video/index.vue

@@ -2,7 +2,7 @@
   <div>
     <video ref='plyr'
            class='c-plyr'
-           :style="{'width':width+'px','height':height+'px'}"
+           :style="!isFull ? {'width': width+'px','height': height+'px'} : {}"
            controls
            autoplay
            :src="src"
@@ -17,7 +17,7 @@ export default {
   props: ['width', 'height', 'src'],
   data () {
     return {
-
+      isFull: false
     }
   },
   mounted () {
@@ -25,13 +25,22 @@ export default {
       autoplay: true,
       muted: true,
     })
-    console.log(plyr)
+    plyr.on('enterfullscreen', this.enterfullscreen)
+    plyr.on('exitfullscreen', this.exitfullscreen)
   },
   watch: {
     src (val) {
       console.log(val)
       console.log(this.width, this.height)
     }
+  },
+  methods: {
+    enterfullscreen() {
+      this.isFull = true
+    },
+    exitfullscreen() {
+      this.isFull = false
+    },
   }
 }
 </script>

src/components/zero/index.vue

@@ -1,78 +1,78 @@
 <template>
   <div class="zero" ref="zero">
-    <div data-depth="2.2">
+    <div data-depth="0.2">
       <p
         class="animate__animated animate__zoomIn"
-        style="padding-top: 50px;padding-left: 620px;opacity: .6;font-size: 20px;"
-      >直播考试</p>
+        style="padding-top: 0px;padding-left: 520px;opacity: .8;font-size: 22px;"
+      >视频线路使用</p>
     </div>
-    <div data-depth="4.3">
+    <div data-depth="0.2">
       <p
         class="animate__animated animate__zoomIn"
-        style="padding-top: 50px;margin-left: -620px;opacity: .5;font-size: 20px;"
+        style="padding-top: 50px;margin-left: -600px;opacity: .8;font-size: 20px;"
       >录播考试</p>
     </div>
-    <div data-depth="1.5">
+    <div data-depth="0.5">
       <p
         class="animate__animated animate__zoomIn"
-        style="margin-top: -50px;margin-left: 500px;opacity: .9;font-size: 22px;"
-      >考生管理</p>
+        style="margin-top: -50px;margin-left: 280px;opacity: .6;font-size: 22px;"
+      >考试结果查询</p>
     </div>
-    <div data-depth="1.8">
+    <div data-depth="0.8">
       <p
         class="animate__animated animate__zoomIn"
-        style="margin-top: -80px;margin-left: 100px;opacity: .8;font-size: 24px;"
-      >考试结果查询</p>
+        style="margin-top: -100px;margin-left: 100px;opacity: .9;font-size: 24px;"
+      >考生管理</p>
     </div>
-    <div data-depth="2">
+    <div data-depth="0.4">
       <p
         class="animate__animated animate__zoomIn"
-        style="margin-top: -50px;margin-left: -300px;opacity: .6;font-size: 20px;"
+        style="margin-top: -30px;margin-left: -400px;opacity: .6;font-size: 20px;"
       >文件视频存储</p>
     </div>
-    <div data-depth="3">
+    <div data-depth="0.6">
       <p
         class="animate__animated animate__zoomIn"
-        style="margin-top: 260px;margin-left: -400px;"
+        style="margin-top: 240px;margin-left: -360px;"
       >功能迭代</p>
     </div>
-    <div data-depth="2.5">
+    <div data-depth="0.5">
       <p
         class="animate__animated animate__zoomIn"
         style="margin-top: 150px;margin-left: 600px;opacity: .9;font-size: 24px;"
       >运营维护</p>
     </div>
-    <div data-depth="2.8">
+    <div data-depth="0.8">
       <p
         class="animate__animated animate__zoomIn"
-        style="margin-top: 180px;margin-left: -600px;font-size: 22px;"
+        style="margin-top: 180px;margin-left: -520px;font-size: 22px;"
       >服务器租赁</p>
     </div>
-    <div data-depth="1.3">
+    <div data-depth="0.3">
       <p
         class="animate__animated animate__zoomIn"
-        style="margin-top: 300px;margin-left: 100px;"
+        style="margin-top: 300px;margin-left: 80px;font-size: 22px;"
       >考试评审</p>
     </div>
-    <div data-depth="3.3">
+    <div data-depth="0.5">
       <p
         class="animate__animated animate__zoomIn"
-        style="margin-top: 350px;margin-left: 500px;opacity: .7;font-size: 24px;"
+        style="margin-top: 290px;margin-left: -200px;opacity: .7;font-size: 24px;"
       >系统研发</p>
     </div>
-    <div data-depth="2.3">
+    <div data-depth="0.3">
       <p
         class="animate__animated animate__zoomIn"
-        style="margin-top: 350px;margin-left: -380px;opacity: .7;font-size: 24px;"
-      >视频线路使用</p>
+        style="margin-top: -80px;margin-left: -200px;opacity: .9;font-size: 24px;"
+      >直播考试</p>
     </div>
-    <div data-depth="4.3">
+    <div data-depth="0.7">
       <p
         class="animate__animated animate__zoomIn"
-        style="margin-top: 270px;margin-left: 450px;"
+        style="margin-top: 240px;margin-left: 450px;"
       >合作单位管理</p>
     </div>
-    <div data-depth="1.5">
+    <div data-depth="1">
       <img class="img animate__animated animate__zoomIn" src="./images/bg.png"/>
     </div>
   </div>