chenlei 3 месяцев назад
Родитель
Сommit
2fc1c63b77

BIN
src/index/views/cover/images/pointer.png


+ 51 - 0
src/index/views/cover/index.scss

@@ -38,6 +38,22 @@
     width: utils.vw-calc(324);
     height: utils.vw-calc(57);
     cursor: pointer;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+    &::after {
+      content: '';
+      position: absolute;
+      left: 50%;
+      bottom: utils.vw-calc(-63);
+      width: utils.vw-calc(54);
+      height: utils.vw-calc(84);
+      transform: translateX(-50%);
+      background: url('./images/pointer.png') no-repeat center / contain;
+      animation: breath-opacity 4s ease-in-out infinite, breath-scale 4s ease-in-out infinite;
+    }
   }
 }
 
@@ -71,5 +87,40 @@
     height: utils.vw-calc(57);
     transform: translateX(-50%);
     cursor: pointer;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+    &::after {
+      content: '';
+      position: absolute;
+      left: utils.vw-calc(144);
+      bottom: utils.vw-calc(-61);
+      width: utils.vw-calc(54);
+      height: utils.vw-calc(84);
+      background: url('./images/pointer.png') no-repeat center / contain;
+      animation: breath-opacity 4s ease-in-out infinite, breath-scale 4s ease-in-out infinite;
+    }
+  }
+}
+
+@keyframes breath-opacity {
+  0%,
+  100% {
+    opacity: 0.5;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+@keyframes breath-scale {
+  0%,
+  100% {
+    transform: scale(0.9);
+  }
+  50% {
+    transform: scale(1.1);
   }
 }

+ 8 - 12
src/index/views/cover/index.vue

@@ -3,23 +3,19 @@
     <template v-if="!isMobile">
       <img class="cover__logo" src="./images/logo-min.png" draggable="false" />
       <img class="cover__title" src="./images/title-min.png" draggable="false" />
-      <img
-        class="cover__btn"
-        src="./images/btn-min.png"
-        draggable="false"
-        @click="$router.push({ name: 'home' })"
-      />
+
+      <div class="cover__btn">
+        <img src="./images/btn-min.png" draggable="false" @click="$router.push({ name: 'home' })" />
+      </div>
     </template>
 
     <template v-else>
       <img class="m-cover__logo" src="./images/logo-min.png" draggable="false" />
       <img class="m-cover__title" src="./images/m-title-min.png" draggable="false" />
-      <img
-        class="m-cover__btn"
-        src="./images/btn-min.png"
-        draggable="false"
-        @click="$router.push({ name: 'home' })"
-      />
+
+      <div class="m-cover__btn">
+        <img src="./images/btn-min.png" draggable="false" @click="$router.push({ name: 'home' })" />
+      </div>
     </template>
   </div>
 </template>