css

src/components/map.vue

@@ -2,7 +2,16 @@
   <div class="viewmap">
     <img src="../assets/images/map.png"/>
     <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)"/>
+      <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)"
+        stroke-width="2"
+      />
     </svg>
     <div class="icon">
       <div class="dot"></div>
@@ -16,7 +25,7 @@ const links = [
   [170, 268],
   [500, 300],
   [750, 200],
-  [780, 80],
+  [780, 120],
   [700, 260],
   [520, 580],
   [680, 500],

src/components/safe/index.vue

@@ -23,8 +23,8 @@ const items = [
   [60, 50, false, 421],
   [120, 220, false, 466],
   [180, -100, false, 581],
-  [240 , -25, false, 520],
-  [305, 178, false, 519],
+  [240 , -15, false, 520],
+  [305, 188, false, 519],
 ]
 export default {
   name: 'safe',
@@ -66,6 +66,7 @@ export default {
     .content{
       width: 581px;
       margin: 50px auto;
+      margin-left: 280px;
       position: relative;
       >img{
         display: block;

src/components/zero/index.vue

@@ -3,25 +3,25 @@
     <div data-depth="0.2">
       <p
         class="animate__animated animate__zoomIn"
-        style="padding-top: 0px;padding-left: 520px;opacity: .8;font-size: 22px;"
+        style="padding-top: 0px;padding-left: 560px;opacity: .8;font-size: 22px;"
       >视频线路使用</p>
     </div>
     <div data-depth="0.2">
       <p
         class="animate__animated animate__zoomIn"
-        style="padding-top: 50px;margin-left: -600px;opacity: .8;font-size: 20px;"
+        style="padding-top: 50px;margin-left: -640px;opacity: .8;font-size: 20px;"
       >录播考试</p>
     </div>
     <div data-depth="0.5">
       <p
         class="animate__animated animate__zoomIn"
-        style="margin-top: -50px;margin-left: 280px;opacity: .6;font-size: 22px;"
+        style="margin-top: -70px;margin-left: 280px;opacity: .6;font-size: 22px;"
       >考试结果查询</p>
     </div>
     <div data-depth="0.8">
       <p
         class="animate__animated animate__zoomIn"
-        style="margin-top: -100px;margin-left: 100px;opacity: .9;font-size: 24px;"
+        style="margin-top: -130px;margin-left: 100px;opacity: .9;font-size: 24px;"
       >考生管理</p>
     </div>
     <div data-depth="0.4">
@@ -33,7 +33,7 @@
     <div data-depth="0.6">
       <p
         class="animate__animated animate__zoomIn"
-        style="margin-top: 240px;margin-left: -360px;"
+        style="margin-top: 240px;margin-left: -420px;"
       >功能迭代</p>
     </div>
     <div data-depth="0.5">
@@ -45,25 +45,25 @@
     <div data-depth="0.8">
       <p
         class="animate__animated animate__zoomIn"
-        style="margin-top: 180px;margin-left: -520px;font-size: 22px;"
+        style="margin-top: 180px;margin-left: -600px;font-size: 22px;"
       >服务器租赁</p>
     </div>
     <div data-depth="0.3">
       <p
         class="animate__animated animate__zoomIn"
-        style="margin-top: 300px;margin-left: 80px;font-size: 22px;"
+        style="margin-top: 330px;margin-left: 80px;font-size: 22px;"
       >考试评审</p>
     </div>
     <div data-depth="0.5">
       <p
         class="animate__animated animate__zoomIn"
-        style="margin-top: 290px;margin-left: -200px;opacity: .7;font-size: 24px;"
+        style="margin-top: 310px;margin-left: -200px;opacity: .7;font-size: 24px;"
       >系统研发</p>
     </div>
     <div data-depth="0.3">
       <p
         class="animate__animated animate__zoomIn"
-        style="margin-top: -80px;margin-left: -200px;opacity: .9;font-size: 24px;"
+        style="margin-top: -100px;margin-left: -200px;opacity: .9;font-size: 24px;"
       >直播考试</p>
     </div>
     <div data-depth="0.7">