生态节点

src/views/mine/index.vue

@@ -11,6 +11,9 @@
           <span class="text_1">{{ userinfo.heading }}</span>
           <div class="flex-row">
             <span class="text_2">Uid：{{ userinfo.nickname }}</span>
+            <span class="coin" v-if="userinfo.is_ecology == 1">
+              <img src="@/assets/images/coin.png" alt="" />
+            </span>
             <img src="@/assets/images/trade/copy.png" alt="" class="copys" @click="copy" :data-clipboard-text="this.userinfo.nickname" />
           </div>
           <div class="flex-row">
@@ -603,6 +606,59 @@ export default {
       border-radius: 6px;
       margin: 6px;
     }
+
+    .coin {
+      width: 18px;
+      height: 18px;
+      border-radius: 50%;
+      margin-left: 4px;
+      position: relative;
+      overflow: hidden;
+      display: inline-block;
+      img {
+        width: 100%;
+      }
+      transform-style: preserve-3d;
+      perspective: 400px; /* 视距，数值越小透视感越强 */
+      animation: rotateY-wiggle 5s infinite ease-in-out;
+    }
+    .coin::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: -100%;
+      width: 50%;
+      height: 100%;
+      border-radius: 0;
+      background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.5), transparent);
+      transform: skewX(-30deg);
+      animation: mirrorSlide 1.2s infinite linear;
+    }
+    @keyframes rotateY-wiggle {
+      0% {
+        transform: rotateY(0deg);
+      }
+      25% {
+        transform: rotateY(30deg);
+      }
+      50% {
+        transform: rotateY(0deg);
+      }
+      75% {
+        transform: rotateY(-30deg);
+      }
+      100% {
+        transform: rotateY(0deg);
+      }
+    }
+    @keyframes mirrorSlide {
+      0% {
+        left: -100%;
+      }
+      100% {
+        left: 100%;
+      }
+    }
   }
   .flex-col {
     display: flex;