路线图icon增加旋转动画

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{
+      .icon-bg{
-        background-image: url('../../assets/202202/roadmap/icon-circle.png');
+        position: absolute;
-        background-repeat: repeat;
+        left: 0;
-        background-color: white;
+        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;
     }
   }