ytj

src/App.vue

@@ -13,15 +13,12 @@ export default {
   name: 'App',
   data () {
     return {
-      showPage: false,
+      showPage: true,
       code: ''
     }
   },
   created () {
-    this.init()
-    this.getAppId().then(() => {
-      console.log(this.appid)
-    })
+    // this.init()
   },
   computed: {
     ...mapUserState({

src/pages/home/page.scss

@@ -1,3 +1,43 @@
+@keyframes cir {
+  0% {
+    transform: rotateX(80deg) rotateY(-10deg) rotateZ(0deg);
+  }
+  100% {
+    transform: rotateX(80deg) rotateY(-10deg) rotateZ(-360deg);
+  }
+}
+@keyframes cir2 {
+  0% {
+    transform: rotateX(80deg) rotateY(10deg) rotateZ(180deg);
+  }
+  100% {
+    transform: rotateX(80deg) rotateY(10deg) rotateZ(-180deg);
+  }
+}
+@keyframes cir_p {
+  0% {
+    transform: rotateZ(0deg);
+  }
+  100% {
+    transform: rotateZ(-360deg);
+  }
+}
+@-webkit-keyframes cir {
+  0% {
+    -webkit-transform: rotateX(80deg) rotateY(-10deg) rotateZ(0deg);
+  }
+  100% {
+    -webkit-transform: rotateX(80deg) rotateY(-10deg) rotateZ(-360deg);
+  }
+}
+@-webkit-keyframes cir_p {
+  0% {
+    -webkit-transform: rotateZ(0deg);
+  }
+  100% {
+    -webkit-transform: rotateZ(-360deg);
+  }
+}
 
 .mainPage {
   width: 100vw;
@@ -29,10 +69,17 @@
           width: 80vw;
           height: 80vw;
           border-radius: 80vw;
-          border: 2px solid #fff;
+          // border: 2px solid #fff;
           transition: opacity .1s ease-out 2s;
           -webkit-transition: opacity .1s ease-out 2s;
           opacity: 0;
+          position: absolute;
+          top: -0.35rem;
+          left: -0.2rem;
+          background-image: url("../../assets/c.png");
+          background-size: 100% 100%;
+          -webkit-animation: cir_p 5s linear 0s infinite;
+          animation: cir_p 5s linear 0s infinite;
           &.active{
             opacity: 1;
           }
@@ -40,10 +87,12 @@
         .circle1{
           -webkit-transform: translate(-50%, -50%) rotateX(80deg) rotateY(-10deg);
           transform: translate(-50%, -50%) rotateX(80deg) rotateY(-10deg);
+          animation: cir 3s linear 0s infinite;
         }
         .circle2{
           -webkit-transform: translate(-50%, -50%) rotateX(80deg) rotateY(20deg);
           transform: translate(-50%, -50%) rotateX(80deg) rotateY(20deg);
+          animation: cir2 3s linear 0s infinite;
         }
         span{
           width: 100%;