From fad052d0879be9d0bf85794ad686d4badaedd864 Mon Sep 17 00:00:00 2001
From: dcc <dcc@163.com>
Date: Thu, 13 Jun 2024 17:36:03 +0800
Subject: [PATCH] 机器臂

---
 src/views/market/components/pageDetail.vue |  391 ++++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 files changed, 364 insertions(+), 27 deletions(-)

diff --git a/src/views/market/components/pageDetail.vue b/src/views/market/components/pageDetail.vue
index d631e80..623ae65 100644
--- a/src/views/market/components/pageDetail.vue
+++ b/src/views/market/components/pageDetail.vue
@@ -1,31 +1,125 @@
 <template>
   <div class="welcome">
     <div class="welcome-content">
-      <div class="title-1">{{$t('message.home["歡迎來到 COLLOTI"]')}}</div>
-      <div class="title-2">{{$t('message.home["即刻開啟您的數字貨幣之旅。"]')}}</div>
-      <div class="action-btns">
-        <el-button class="jy" @click="$router.push(`coin/constract/btc?timestamp=${Date.now()}&RouterName=delivery`)"> {{$t('message.home.jiaoyi')}}</el-button>
-        <el-button class="cz" @click="$router.push('/recharge')"> {{$t('message.user.chongzhi')}}</el-button>
+      <div class="title-1">{{ $t('message.home["歡迎來到 COLLOTI"]') }}</div>
+      <div class="title-2">{{ $t('message.home["即刻開啟您的數字貨幣之旅。"]') }}</div>
+      <div class="action-btns" v-if="userStore.userInfo.token">
+        <el-button class="jy" @click="$router.push(`coin/constract/btc?timestamp=${Date.now()}&RouterName=delivery`)">
+          {{ $t('message.home.jiaoyi') }}
+        </el-button>
+        <el-button class="cz" @click="$router.push('/recharge')"> {{ $t('message.user.chongzhi') }}</el-button>
       </div>
-      <div class="tip"> {{$t('message.home["揭開驚喜,解鎖獎勵 – 你的精彩之旅從這裡開始!"]')}} <img
+      <el-button v-if="!userStore.userInfo.token" class="register-btn" type="primary" @click="$router.push('/login')">
+        <img
+          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAlCAMAAADyQNAxAAAAAXNSR0IArs4c6QAAAGxQTFRFAAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////Pk/gVgAAACN0Uk5TAAgQGCAoMDc4QEhPWF9gZ2hveICHj5efp6+3v8fP3t/n7/fpv/78AAAA20lEQVQYGcXB4U6DMBgF0EspuA7mLKUgY7h93Pd/RxMzmzJbfhk9B/9OHa1z50Zhz4u/CnlfvEGeufBhNsipZwZzhYyRkQFpWhgRjaSWGy2SOm50SOq40SGp5UaLJC2MiEbawMiIjGpmMNfIMTMfLgZ5xi93Uq7+gD2qOTtnjwp/pyi1Lgvs0Y3th3EcettUyKjtuAi/yPJuaySo0ySMyGQVnpX9jU/EldhSfuUP4hU23MqE1RWIGGGSHBGZmHEpEFTCjLVC8MasVwSeWR5Bf3v28c0hOJyyavyyT6RgPCG9KV4nAAAAAElFTkSuQmCC">
+        {{ $t('message.home["透過電子郵件/手機號碼註冊"]') }}
+      </el-button>
+      <div v-if="!userStore.userInfo.token" class="or"><span>or</span></div>
+      <div v-if="!userStore.userInfo.token" class="btns">
+        <a class="google-play">
+          <img
+            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAjCAMAAABbyCHdAAAAAXNSR0IArs4c6QAAAKtQTFRFAAAAAAAAQEBAAAAAODhAAAAANTpAAAAAODxEAAAAAAAAAAAAAAAAAAAAOTtEAAAAHB4iODxEAAAAOTxDAAAAOjtDODtDAAAAAAAABQUFODxECAgJCAgKOTtDOT1DCwwNCwwODxASOTxEBwcJCgsNDg8REhMWFhcZFhcaGRodGRoeHB4iHR4iICImIyUrJCUqJykvKi0zKy0zLjE4MjQ7MjQ8MjU7NThAOTxEpF/e/AAAACN0Uk5TABAQICAwMEBAT19gb3Bwf4CAkJCfn6Cvv7+/39/f3+/v7++6JeDFAAABDElEQVQ4y7WTXVuCMBiGB2paZGRfDqJMEmdGI6vR8/9/WQeA7tngsJ3e93U979eEECKIopEYfpfr6nN3N2hEbwBgXuIBvvwCAKDKLnq5LOpGQLnsC5HmKJi+MiROAr79EAlbQJWde5wEs+cQCUeA2cWBw1nQW6sMCVfQCiiTEfOToBX1KsFCgwGYLCbeCEcMoJwThylqGwPrgDjM69bGeJ8y18puE9hPiGvFc/h5pHyteA6H1cTmbWmd8NvuQTLuhI9kSvOzGjNFfVjNef7Ut9ncBLwfHks6dvZP+Gnm3o+N8yvv/mx8G3r3aeH0zL//RA0Et++6C16Evf8rfAYA3IdDH3j8kOfpTPzP+wNccXgk9byhTQAAAABJRU5ErkJggg=="
+            class="icon">
+          <div class="p1">Google Play</div>
+          <div class="mask">
+            <div class="mask-title">Scan to download</div>
+            <img src="https://colloti.com/er-code.png" class="icon">
+            <button>More</button>
+          </div>
+        </a>
+        <a class="apple-store">
+          <img
+            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAxCAMAAACrgNoQAAAAAXNSR0IArs4c6QAAAHhQTFRFAAAAICAwICAwICgwJSUwJCQwJCgwICctIyMtIyMwIyYwIyYuIyYwIyUtIyUwIicwIicuJCcwIiYuIiYuJCYwIiUuJCUuIiUuIyUwIyUvIyYwIyYvIyYuIyYvIyUvISUvIiUvIiYvIiYvIyYvIyYvIyYvIyYvIyYvSSHmhgAAACd0Uk5TABAgIDBAQE9QUFBfX2Bgb3Bwf4CAj4+QkJ+gr7C+v87P3t/f7u/+VHK92QAAAPpJREFUGBntwdFSgzAQBdC7hGCppVVRK6IpguH+/x+aOh2dkV0mvvccXP0l+xr/IA+RHfKVI8kW2Vxk4pFtZDIhW8OzHbIFJi/Ix+QV+Rw57JBDnEMivgDgtttKsKYJTMKtAKiOkWd9BUs58CL2x8AfTwJVGWkYoHGRJg9FoCV6KCqaamh6WjqoIi0FNCUtb1BtaGmhamhpoGpoaaFqaOmg2tASoXI0eagiLZNA09M0CBR3tE0FliRyxQ2Weq4osORpC9AEmjw0npYOumfqYgGdnKi6h8V9UtHB5md+m/lrEKwoP2bO83stQPk4MukF6/btQXDh24PHFb4AtqpwymP1xEcAAAAASUVORK5CYII="
+            class="icon">
+          <div class="p1">App Store</div>
+          <div class="mask">
+            <div class="mask-title">Scan to download</div>
+            <img src="https://colloti.com/er-code.png" class="icon">
+            <button>More</button>
+          </div>
+        </a>
+      </div>
+      <div class="tip"> {{ $t('message.home["揭開驚喜,解鎖獎勵 – 你的精彩之旅從這裡開始!"]') }} <img
           src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAMAAACOLiwjAAAAAXNSR0IArs4c6QAAADNQTFRFAAAAICAwICAwJSUwIiYuIiYuJCYwIiUuIyUuIyUvIyYvIyYuIyYvIyUvIyYvIyYvIyYvbgd1ZQAAABB0Uk5TABAgMH+AgI+Qn5+gr7/f76mIx4UAAABBSURBVBjTfc45DgAgCERR3Hfl/qe1c8ZCqf4LCUHEWTnjdUJBSaazpP213EP5Urw0VAsewYY7Udd3T26LO/gyUG8DewQfiCCoRgAAAABJRU5ErkJggg==">
       </div>
     </div>
     <div class="bg-img">
+      <div class="jq">
+        <svg xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 1000" width="1000" height="1000"
+          preserveAspectRatio="xMidYMid meet"
+          style="width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px); content-visibility: visible;">
+          <defs>
+            <clipPath id="__lottie_element_48">
+              <rect width="1000" height="1000" x="0" y="0"></rect>
+            </clipPath>
+            <image xlink:href="@/assets/images/img_0.png"></image>
+            <image xlink:href="@/assets/images/img_1.png"></image>
+            <image xlink:href="@/assets/images/img_2.png"></image>
+            <image xlink:href="@/assets/images/img_3.png"></image>
+            <image xlink:href="@/assets/images/img_4.png"></image>
+            <image xlink:href="@/assets/images/img_5.png"></image>
+            <image xlink:href="@/assets/images/img_6.png"></image>
+          </defs>
+          <g clip-path="url(#__lottie_element_48)">
+            <g class="png" style="display: block;" transform="matrix(1,0,0,1,270,662.5)" opacity="1">
+              <image width="376px" height="339px" preserveAspectRatio="xMidYMid slice"
+                xlink:href="@/assets/images/img_6.png"></image>
+            </g>
+            <g class="png" style="display: block;" transform="matrix(1,0,0,1,520.5,110.54200744628906)" opacity="1">
+              <image class="img_5" width="323px" height="252px" preserveAspectRatio="xMidYMid slice"
+                xlink:href="@/assets/images/img_5.png"></image>
+            </g>
+            <g class="png" style="display: block;" transform="matrix(1,0,0,1,670.3294067382812,283.9642028808594)"
+              opacity="1">
+              <image class="img_4" width="355px" height="365px" preserveAspectRatio="xMidYMid slice"
+                xlink:href="@/assets/images/img_4.png"></image>
+            </g>
+            <g class="png" style="display: block;"
+              transform="matrix(0.9999943375587463,0.003364115720614791,-0.003364115720614791,0.9999943375587463,508.53765869140625,565.6394653320312)"
+              opacity="1">
+              <image class="img_3" width="376px" height="319px" preserveAspectRatio="xMidYMid slice"
+                xlink:href="@/assets/images/img_3.png"></image>
+            </g>
+            <g class="png" style="display: block;"
+              transform="matrix(0.9967423677444458,0.08065123856067657,-0.08065123856067657,0.9967423677444458,736.8223876953125,519.9822387695312)"
+              opacity="1">
+              <image class="img_2" width="247px" height="246px" preserveAspectRatio="xMidYMid slice"
+                xlink:href="@/assets/images/img_2.png"></image>
+            </g>
+            <g class="png" style="display: block;"
+              transform="matrix(0.14042603969573975,0.9900911450386047,-0.9900911450386047,0.14042603969573975,583.931884765625,641.3410034179688)"
+              opacity="1">
+              <image class="img_1" width="287px" height="286px" preserveAspectRatio="xMidYMid slice"
+                xlink:href="@/assets/images/img_1.png"></image>
+            </g>
+            <g class="png" style="display: block;"
+              transform="matrix(0.9967423677444458,0.08065123856067657,-0.08065123856067657,0.9967423677444458,780.9017333984375,260.44317626953125)"
+              opacity="1">
+              <image class="img_0" width="93px" height="93px" preserveAspectRatio="xMidYMid slice"
+                xlink:href="@/assets/images/img_0.png"></image>
+            </g>
+          </g>
+        </svg>
+      </div>
       <div class="suspension">
-        <div class="title">{{$t('message.home["立刻下載COLLOTI手機 App!"]')}}</div>
-        <div class="btns"><a class="apple-store" style="margin-right: 10px;">
-          <img
-            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAxCAMAAACrgNoQAAAAAXNSR0IArs4c6QAAAHhQTFRFAAAAICAwICAwICgwJSUwJCQwJCgwICctIyMtIyMwIyYwIyYuIyYwIyUtIyUwIicwIicuJCcwIiYuIiYuJCYwIiUuJCUuIiUuIyUwIyUvIyYwIyYvIyYuIyYvIyUvISUvIiUvIiYvIiYvIyYvIyYvIyYvIyYvIyYvSSHmhgAAACd0Uk5TABAgIDBAQE9QUFBfX2Bgb3Bwf4CAj4+QkJ+gr7C+v87P3t/f7u/+VHK92QAAAPpJREFUGBntwdFSgzAQBdC7hGCppVVRK6IpguH+/x+aOh2dkV0mvvccXP0l+xr/IA+RHfKVI8kW2Vxk4pFtZDIhW8OzHbIFJi/Ix+QV+Rw57JBDnEMivgDgtttKsKYJTMKtAKiOkWd9BUs58CL2x8AfTwJVGWkYoHGRJg9FoCV6KCqaamh6WjqoIi0FNCUtb1BtaGmhamhpoGpoaaFqaOmg2tASoXI0eagiLZNA09M0CBR3tE0FliRyxQ2Weq4osORpC9AEmjw0npYOumfqYgGdnKi6h8V9UtHB5md+m/lrEKwoP2bO83stQPk4MukF6/btQXDh24PHFb4AtqpwymP1xEcAAAAASUVORK5CYII="
-            class="icon">
-          <div class="p1">IOS</div>
-          <div class="p2">Download</div>
-        </a><a class="google-play"><img
-            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAjCAMAAABbyCHdAAAAAXNSR0IArs4c6QAAAKtQTFRFAAAAAAAAQEBAAAAAODhAAAAANTpAAAAAODxEAAAAAAAAAAAAAAAAAAAAOTtEAAAAHB4iODxEAAAAOTxDAAAAOjtDODtDAAAAAAAABQUFODxECAgJCAgKOTtDOT1DCwwNCwwODxASOTxEBwcJCgsNDg8REhMWFhcZFhcaGRodGRoeHB4iHR4iICImIyUrJCUqJykvKi0zKy0zLjE4MjQ7MjQ8MjU7NThAOTxEpF/e/AAAACN0Uk5TABAQICAwMEBAT19gb3Bwf4CAkJCfn6Cvv7+/39/f3+/v7++6JeDFAAABDElEQVQ4y7WTXVuCMBiGB2paZGRfDqJMEmdGI6vR8/9/WQeA7tngsJ3e93U979eEECKIopEYfpfr6nN3N2hEbwBgXuIBvvwCAKDKLnq5LOpGQLnsC5HmKJi+MiROAr79EAlbQJWde5wEs+cQCUeA2cWBw1nQW6sMCVfQCiiTEfOToBX1KsFCgwGYLCbeCEcMoJwThylqGwPrgDjM69bGeJ8y18puE9hPiGvFc/h5pHyteA6H1cTmbWmd8NvuQTLuhI9kSvOzGjNFfVjNef7Ut9ncBLwfHks6dvZP+Gnm3o+N8yvv/mx8G3r3aeH0zL//RA0Et++6C16Evf8rfAYA3IdDH3j8kOfpTPzP+wNccXgk9byhTQAAAABJRU5ErkJggg=="
-            class="icon">
-          <div class="p1">Android</div>
-          <div class="p2">Download</div>
-        </a></div>
+        <div class="title">{{ $t('message.home["立刻下載COLLOTI手機 App!"]') }}</div>
+        <div class="btns">
+          <a class="apple-store" style="margin-right: 10px;">
+            <img
+              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAxCAMAAACrgNoQAAAAAXNSR0IArs4c6QAAAHhQTFRFAAAAICAwICAwICgwJSUwJCQwJCgwICctIyMtIyMwIyYwIyYuIyYwIyUtIyUwIicwIicuJCcwIiYuIiYuJCYwIiUuJCUuIiUuIyUwIyUvIyYwIyYvIyYuIyYvIyUvISUvIiUvIiYvIiYvIyYvIyYvIyYvIyYvIyYvSSHmhgAAACd0Uk5TABAgIDBAQE9QUFBfX2Bgb3Bwf4CAj4+QkJ+gr7C+v87P3t/f7u/+VHK92QAAAPpJREFUGBntwdFSgzAQBdC7hGCppVVRK6IpguH+/x+aOh2dkV0mvvccXP0l+xr/IA+RHfKVI8kW2Vxk4pFtZDIhW8OzHbIFJi/Ix+QV+Rw57JBDnEMivgDgtttKsKYJTMKtAKiOkWd9BUs58CL2x8AfTwJVGWkYoHGRJg9FoCV6KCqaamh6WjqoIi0FNCUtb1BtaGmhamhpoGpoaaFqaOmg2tASoXI0eagiLZNA09M0CBR3tE0FliRyxQ2Weq4osORpC9AEmjw0npYOumfqYgGdnKi6h8V9UtHB5md+m/lrEKwoP2bO83stQPk4MukF6/btQXDh24PHFb4AtqpwymP1xEcAAAAASUVORK5CYII="
+              class="icon">
+            <div class="p1">IOS</div>
+            <div class="p2">Download</div>
+          </a>
+          <a class="google-play">
+            <img
+              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAjCAMAAABbyCHdAAAAAXNSR0IArs4c6QAAAKtQTFRFAAAAAAAAQEBAAAAAODhAAAAANTpAAAAAODxEAAAAAAAAAAAAAAAAAAAAOTtEAAAAHB4iODxEAAAAOTxDAAAAOjtDODtDAAAAAAAABQUFODxECAgJCAgKOTtDOT1DCwwNCwwODxASOTxEBwcJCgsNDg8REhMWFhcZFhcaGRodGRoeHB4iHR4iICImIyUrJCUqJykvKi0zKy0zLjE4MjQ7MjQ8MjU7NThAOTxEpF/e/AAAACN0Uk5TABAQICAwMEBAT19gb3Bwf4CAkJCfn6Cvv7+/39/f3+/v7++6JeDFAAABDElEQVQ4y7WTXVuCMBiGB2paZGRfDqJMEmdGI6vR8/9/WQeA7tngsJ3e93U979eEECKIopEYfpfr6nN3N2hEbwBgXuIBvvwCAKDKLnq5LOpGQLnsC5HmKJi+MiROAr79EAlbQJWde5wEs+cQCUeA2cWBw1nQW6sMCVfQCiiTEfOToBX1KsFCgwGYLCbeCEcMoJwThylqGwPrgDjM69bGeJ8y18puE9hPiGvFc/h5pHyteA6H1cTmbWmd8NvuQTLuhI9kSvOzGjNFfVjNef7Ut9ncBLwfHks6dvZP+Gnm3o+N8yvv/mx8G3r3aeH0zL//RA0Et++6C16Evf8rfAYA3IdDH3j8kOfpTPzP+wNccXgk9byhTQAAAABJRU5ErkJggg=="
+              class="icon">
+            <div class="p1">Android</div>
+            <div class="p2">Download</div>
+          </a>
+        </div>
       </div>
     </div>
   </div>
@@ -98,14 +192,21 @@
 </template>
 
 <script>
+import { useUserStore } from '@/store/user.js'
+
+const userStore = useUserStore()
 export default {
-  name: "pageDetail"
+  name: "pageDetail",
+  data() {
+    return {
+      userStore
+    }
+  }
 }
 </script>
 
 
 <style scoped lang="css">
-
 .welcome {
   height: 510px;
   width: 100%;
@@ -117,6 +218,164 @@
     width: 1200px;
     margin-top: 122px;
     position: relative;
+
+    .register-btn {
+      width: 408px;
+      height: 52px;
+      font-size: 17px;
+      font-family: Noto Sans SC;
+      font-weight: 700;
+      color: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: #2a64fb;
+      border-radius: 6px;
+      outline: none;
+      border: none;
+      margin-top: 20px;
+      cursor: pointer;
+
+      img {
+        width: 18px;
+        height: 18px;
+        margin-right: 8px
+      }
+    }
+
+    .or {
+      position: relative;
+      width: 408px;
+      margin-top: 17px;
+      height: 1px;
+      background: #afb1bb;
+      text-align: center;
+
+      span {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 34px;
+        height: 17px;
+        line-height: 17px;
+        font-size: 14px;
+        font-family: Noto Sans SC;
+        font-weight: 500;
+        color: #8b95a3;
+        background: #edf1ff;
+      }
+    }
+
+    .btns {
+      display: flex;
+      margin-top: 16px;
+
+      a {
+        cursor: pointer;
+        width: 196px;
+        height: 52px;
+        flex: 0 0 196px;
+        margin-left: 16px;
+        display: flex;
+        align-items: center;
+        box-sizing: border-box;
+        padding-left: 38px;
+        position: relative;
+        border-radius: 90px;
+        border: 1px solid #afb1bb;
+
+        &:first-child {
+          margin-left: 0
+        }
+
+        img {
+          flex: 0 0 24px;
+          width: 24px;
+          height: 24px;
+        }
+
+        .p1 {
+          font-size: 17px;
+          font-family: Noto Sans SC;
+          font-weight: 500;
+          color: #23262f;
+          line-height: 24px;
+          margin-left: 8px;
+        }
+
+        .mask {
+          display: none;
+          position: absolute;
+          z-index: 10;
+          top: 61px;
+          left: -6px;
+          width: 182px;
+          height: 220px;
+          background: #fff;
+          border-radius: 6px;
+          box-sizing: border-box;
+          padding-top: 6px;
+          box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
+
+          &:before {
+            content: "";
+            position: absolute;
+            top: -4px;
+            left: 45px;
+            width: 12px;
+            height: 12px;
+            border-radius: 3px;
+            transform-origin: center center;
+            transform: rotate(45deg);
+            background: #fff
+          }
+
+          .mask-title {
+            font-size: 12px;
+            font-family: Noto Sans SC;
+            font-weight: 700;
+            color: #000;
+            line-height: 35px;
+            text-align: center;
+          }
+
+          img {
+            display: block;
+            width: 110px;
+            height: 110px;
+            margin: 0 auto;
+            margin-top: 7px;
+          }
+
+          button {
+            width: 137px;
+            height: 26px;
+            background: #2b64fb;
+            border-radius: 3px 3px 3px 3px;
+            border: none;
+            outline: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 20px;
+            font-size: 10px;
+            font-family: Noto Sans SC;
+            font-weight: 700;
+            color: #fff;
+          }
+        }
+      }
+
+      a.google-play img {
+        flex: 0 0 18px;
+        width: 18px;
+        height: 18px;
+      }
+
+      a:hover .mask {
+        display: block;
+      }
+    }
   }
 }
 
@@ -188,7 +447,14 @@
   top: -70px;
   width: 866px;
   height: 640px;
-  background: url(https://colloti.com/img/right-bg-1.c9ac5e41.svg) 166px 0px no-repeat
+  background: url(https://colloti.com/img/right-bg-1.c9ac5e41.svg) 166px 0px no-repeat;
+  .jq {
+        position: absolute;
+        top: 152px;
+        left: 149px;
+        width: 504.339px;
+        height: 510.84px
+    }
 }
 
 .welcome .bg-img .suspension {
@@ -199,8 +465,75 @@
   height: 139px;
   border-radius: 18px;
   background: hsla(0, 0%, 100%, .8);
-  animation: move-21751b44 4s linear 0s infinite
+  animation: move-21751b44 4s linear 0s infinite;
 }
+
+@keyframes move-21751b44 {
+  0% {
+    transform: translateY(0);
+  }
+
+  49% {
+    transform: translateY(20px);
+  }
+
+  98% {
+    transform: translateY(0);
+  }
+}
+
+.img_1{
+  transform-origin: 14.5% 14.5%;
+  animation: img_1_move 4s linear infinite;
+}
+.img_2{
+  transform-origin: 12.5% 12.5%;
+  animation: img_1_move 4s linear infinite;
+}
+
+.img_0{
+  transform-origin: 5% 5%;
+  animation: img_1_move 4s linear infinite;
+}
+
+
+.img_3{
+  transform-origin: 12.5% 12.5%;
+  animation: img_3_move 4s linear infinite;
+}
+
+.img_4{
+  animation: move-21751b44 4s linear 0s infinite;
+}
+
+.img_5{
+  animation: move-21751b44 4s linear 0s infinite;
+}
+@keyframes img_3_move {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  98% {
+    transform: rotate(-5deg);
+  }
+}
+
+
+@keyframes img_1_move {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  /* 49% {
+    transform: rotate(180deg) translateY(10px);
+  } */
+
+  98% {
+    transform: rotate(90deg) translateX(10px);
+  }
+}
+
 
 .welcome .bg-img .suspension .title {
   line-height: 20px;
@@ -217,7 +550,7 @@
   justify-content: center
 }
 
-.welcome .bg-img .suspension .btns > a {
+.welcome .bg-img .suspension .btns>a {
   cursor: pointer;
   box-sizing: border-box;
   width: 79px;
@@ -231,18 +564,18 @@
   position: relative
 }
 
-.welcome .bg-img .suspension .btns > a:first-child img {
+.welcome .bg-img .suspension .btns>a:first-child img {
   width: 22px;
   height: 24px;
   top: 8px
 }
 
-.welcome .bg-img .suspension .btns > a:nth-child(2) img {
+.welcome .bg-img .suspension .btns>a:nth-child(2) img {
   width: 15px;
   height: 17px
 }
 
-.welcome .bg-img .suspension .btns > a div {
+.welcome .bg-img .suspension .btns>a div {
   font-size: 9px;
   font-family: Noto Sans SC;
   font-weight: 700;
@@ -391,4 +724,8 @@
     }
   }
 }
+
+a {
+  text-decoration: none;
+}
 </style>
\ No newline at end of file

--
Gitblit v1.9.3