提交

src/view/SilkRoadSpringFestivalGala/pages/sex.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    <img v-if="step === 4" src="../../../assets/img/next.png" class="next" />
     <div class="sex" :style="'background-image: url(' + bgimg + ')'">
       <img
         :src="kuangimg"
@@ -37,11 +38,22 @@
         class="tImg"
       />
       <div class="btns" v-if="step === 4">
-        <div class="btn" @click="showDown" style="margin-left: 0" :stype="'border-color:' + text.color + ';color:' + text.color" >下载壁纸</div>
-        <div class="btn" @click="showDown" :stype="'border-color:' + text.color + ';color:' + text.color">生成海报</div>
+        <div
+          class="btn"
+          @click="showDown"
+          style="margin-left: 0"
+          :stype="'border-color:' + text.color + ';color:' + text.color"
+        >
+          下载壁纸
+        </div>
+        <div
+          class="btn"
+          @click="showDown"
+          :stype="'border-color:' + text.color + ';color:' + text.color"
+        >
+          生成海报
+        </div>
       </div>
-
-      <img src="../../../assets/img/next.png" alt="" class="next">
     </div>
     <div class="model" v-show="showImg !== undefined" @click="close">
       <van-icon
@@ -105,10 +117,10 @@ function autoStep() {
   t = setInterval(() => {
     step.value += 1;
     if (step.value === 4) {
-        clearInterval(t);
-        t = setTimeout(() => {
-            // 跳转下一页
-        }, 2000);
+      clearInterval(t);
+      t = setTimeout(() => {
+        // 跳转下一页
+      }, 2000);
     }
   }, 3000);
 }
@@ -186,13 +198,6 @@ function close() {
     }
   }
 
-  .next{
-    bottom: 5vh;
-    top: inherit;
-    width: 2em;
-    z-index: 1;
-  }
-
   .fade-enter-from,
   .fade-leave-to {
     opacity: 0;
@@ -206,6 +211,31 @@ function close() {
     opacity: 1;
   }
 }
+
+.next {
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  top: inherit;
+  width: 2em;
+  z-index: 1;
+  position: fixed;
+  animation-name: an;
+  animation-duration: 1s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+@keyframes an {
+  from {
+    bottom: 10px;
+  }
+  to {
+    bottom: 15px;
+  }
+}
+
 .model {
   position: fixed;
   top: 0;