From 2f8115201b8ad56af9d9f247be34cc971e50511f Mon Sep 17 00:00:00 2001
From: dai <851733175@qq.com>
Date: Wed, 4 Jan 2023 16:29:15 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/scss/pages/yantai-index.scss | 156 ++++++++++++++++++++++++
 src/views/pages/yantai-index.vue        |  16 ++-
 2 files changed, 171 insertions(+), 1 deletion(-)

diff --git a/src/assets/scss/pages/yantai-index.scss b/src/assets/scss/pages/yantai-index.scss
index 08569134d..33ee2cc58 100644
--- a/src/assets/scss/pages/yantai-index.scss
+++ b/src/assets/scss/pages/yantai-index.scss
@@ -512,3 +512,159 @@
     }
   }
 }
+
+.m-arc {
+  position: absolute;
+  z-index: 60;
+  left: 0;
+  right: 0;
+  top: 650px;
+  margin: 0 auto;
+  width: 160px;
+  height: 160px;
+  -webkit-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+  -webkit-perspective: 400px;
+  perspective: 400px;
+  pointer-events: none;
+  margin-bottom: 40px;
+
+  .line {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    border-bottom: 1.5px solid rgba(#83fbfe, 0.7);
+  }
+
+  .line:first-child {
+    -webkit-animation: rotate1 1.15s linear infinite;
+    animation: rotate1 1.15s linear infinite;
+  }
+
+  .line:nth-child(2) {
+    -webkit-animation: rotate2 1.15s linear infinite;
+    animation: rotate2 1.15s linear infinite;
+  }
+
+  .line:nth-child(3) {
+    -webkit-animation: rotate3 1.15s linear infinite;
+    animation: rotate3 1.15s linear infinite;
+  }
+
+  .line:first-child {
+    -webkit-animation-delay: -0.8s;
+    animation-delay: -0.8s;
+  }
+
+  .line:nth-child(2) {
+    -webkit-animation-delay: -0.4s;
+    animation-delay: -0.4s;
+  }
+
+  .line:nth-child(3) {
+    -webkit-animation-delay: 0s;
+    animation-delay: 0s;
+  }
+
+  @keyframes rotate1 {
+    0% {
+      -webkit-transform: rotateX(35deg) rotateY(-45deg) rotate(0);
+      transform: rotateX(35deg) rotateY(-45deg) rotate(0);
+    }
+
+    to {
+      -webkit-transform: rotateX(35deg) rotateY(-45deg) rotate(1turn);
+      transform: rotateX(35deg) rotateY(-45deg) rotate(1turn);
+    }
+  }
+
+  @keyframes rotate2 {
+    0% {
+      -webkit-transform: rotateX(50deg) rotateY(10deg) rotate(0);
+      transform: rotateX(50deg) rotateY(10deg) rotate(0);
+    }
+
+    to {
+      -webkit-transform: rotateX(50deg) rotateY(10deg) rotate(1turn);
+      transform: rotateX(50deg) rotateY(10deg) rotate(1turn);
+    }
+  }
+
+  @keyframes rotate3 {
+    0% {
+      -webkit-transform: rotateX(35deg) rotateY(55deg) rotate(0);
+      transform: rotateX(35deg) rotateY(55deg) rotate(0);
+    }
+
+    to {
+      -webkit-transform: rotateX(35deg) rotateY(55deg) rotate(1turn);
+      transform: rotateX(35deg) rotateY(55deg) rotate(1turn);
+    }
+  }
+}
+
+.m-arc2 {
+  position: absolute;
+  z-index: 60;
+  left: 0;
+  right: 0;
+  top: 210px;
+  margin: 0 auto;
+  width: 120px;
+  height: 120px;
+  -webkit-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+  -webkit-perspective: 400px;
+  perspective: 400px;
+  pointer-events: none;
+  margin-bottom: 40px;
+
+  /* 第二个 */
+  .line {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    border-bottom: 1px solid rgba(#83fbfe, 0.5);
+    border-top: 1px solid rgba(#83fbfe, 0.5);
+  }
+
+  .line:first-child {
+    -webkit-animation: rotate4 1.15s linear infinite;
+    animation: rotate4 1.15s linear infinite;
+  }
+
+  .line:nth-child(2) {
+    -webkit-animation: rotate5 1.15s linear infinite;
+    animation: rotate5 1.15s linear infinite;
+  }
+
+  @keyframes rotate4 {
+    0% {
+      -webkit-transform: rotateX(55deg) rotateY(-30deg) rotate(0);
+      transform: rotateX(55deg) rotateY(-30deg) rotate(0);
+    }
+
+    to {
+      -webkit-transform: rotateX(55deg) rotateY(-30deg) rotate(1turn);
+      transform: rotateX(55deg) rotateY(-30deg) rotate(1turn);
+    }
+  }
+
+  @keyframes rotate5 {
+    0% {
+      -webkit-transform: rotateX(55deg) rotateY(30deg) rotate(0);
+      transform: rotateX(55deg) rotateY(30deg) rotate(0);
+    }
+
+    to {
+      -webkit-transform: rotateX(55deg) rotateY(30deg) rotate(1turn);
+      transform: rotateX(55deg) rotateY(30deg) rotate(1turn);
+    }
+  }
+}
diff --git a/src/views/pages/yantai-index.vue b/src/views/pages/yantai-index.vue
index 70498aa7c..57316a0ef 100644
--- a/src/views/pages/yantai-index.vue
+++ b/src/views/pages/yantai-index.vue
@@ -146,7 +146,10 @@
               src="@/assets/img/yantai/index2/platform/right-1.png"
             />
           </div>
-          <div class="plate" @click="toPage('/main-shuju/visual-basicinfo-peopleSearch')">
+          <div
+            class="plate"
+            @click="toPage('/main-shuju/visual-basicinfo-peopleSearch')"
+          >
             <img
               class="plate-bg"
               src="@/assets/img/yantai/index2/platform/right-2.png"
@@ -229,6 +232,17 @@
           <div class="anime"></div>
           <div class="anime"></div>
         </div>
+
+        <div class="m-arc">
+          <div class="line"></div>
+          <div class="line"></div>
+          <div class="line"></div>
+        </div>
+
+        <div class="m-arc2">
+          <div class="line"></div>
+          <div class="line"></div>
+        </div>
       </div>
     </div>
   </fixed1920>