From 1eb80fdad911df1049595db407469786514a7f23 Mon Sep 17 00:00:00 2001
From: cebgcontract <99630598+cebgcontract@users.noreply.github.com>
Date: Fri, 25 Feb 2022 14:34:55 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B7=AF=E7=BA=BF=E5=9B=BEicon=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E6=97=8B=E8=BD=AC=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/roadmap/OneIcon.vue | 52 ++++++++++++++++++++++--------
 1 file changed, 39 insertions(+), 13 deletions(-)

diff --git a/src/components/roadmap/OneIcon.vue b/src/components/roadmap/OneIcon.vue
index 3b92d73..6181edf 100644
--- a/src/components/roadmap/OneIcon.vue
+++ b/src/components/roadmap/OneIcon.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="one-icon" @click="iconClicked" :class="{'mobile': mobile, 'active': selected}">
     <div class="top-icon" :class="{'active': selected}">
+      <img v-if="selected" class="icon-bg an" src="@/assets/202202/roadmap/icon-circle.png" alt="circle">
       <img v-if="selected" :src="iconActive" alt="icon">
       <img v-if="!selected" :src="iconNormal" alt="icon">
     </div>
@@ -63,20 +64,27 @@ export default class OneIcon extends Vue {
       width: 60px;
       height: 60px;
       top: 0;
-      left: 15px;
+      left: 0;
+      right: 0;
+      margin-right: auto;
+      margin-left: auto;
       position: absolute;
-      display: flex;
-      justify-content: center;
-      align-items: center;
       img{
         width: 34px;
         height: 34px;
         margin: auto;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        position: absolute;
       }
-      &.active{
-        background-image: url('../../assets/202202/roadmap/icon-circle.png');
-        background-repeat: repeat;
-        background-color: white;
+      .icon-bg{
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
       }
     }
     .name{
@@ -96,14 +104,31 @@ export default class OneIcon extends Vue {
       width: 8px;
       height: 8px;
       bottom: -4px;
-      left: 41px
+      left: 0;
+      right: 0;
+      margin-right: auto;
+      margin-left: auto;
     }
     .icon-b-s {
       position: absolute;
       width: 14px;
       height: 30px;
       bottom: -7px;
-      left: 38px
+      left: 0;
+      right: 0;
+      margin-right: auto;
+      margin-left: auto;
+    }
+    @-webkit-keyframes rotation{
+      from {-webkit-transform: rotate(0deg);}
+      to {-webkit-transform: rotate(360deg);}
+    }
+    .an{
+      -webkit-transform: rotate(360deg);
+      animation: rotation 3s linear infinite;
+      -moz-animation: rotation 3s linear infinite;
+      -webkit-animation: rotation 3s linear infinite;
+      -o-animation: rotation 3s linear infinite;
     }
   }
   .one-icon.mobile{
@@ -112,11 +137,14 @@ export default class OneIcon extends Vue {
     .top-icon{
       width: 8vw;
       height: 8vw;
-      background-size: 100% 100%;
       img{
         width: 4.8vw;
         height: 4.8vw;
       }
+      .icon-bg{
+        width: 100%;
+        height: 100%;
+      }
     }
     .name {
       font-size: 3.2vw;
@@ -126,12 +154,10 @@ export default class OneIcon extends Vue {
       width: 1.6vw;
       height: 1.6vw;
       bottom: -0.8vw;
-      left: 7.2vw;
     }
     .icon-b-s {
       width: 2.7vw;
       height: 5.3vw;
-      left: 6.65vw;
       bottom: -1.3vw;
     }
   }