提交

public/index.html

@@ -13,7 +13,6 @@
         });
     </script>
     <% } %>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
     <script src="https://cxzx.smcic.net/topic/highSpeed/index.min.js"></script>
     <script src="https://cxzx.smcic.net/topic/tool/js/shareWinxin.js"></script>
 </head>

src/view/SilkRoadSpringFestivalGala/index.vue

@@ -44,7 +44,7 @@ import { ref } from "vue";
  * window.$originData.urlParames url参数
  */
 console.log(window.$originData);
-const page = ref("second");
+const page = ref("sex");
 // let first_text = ['"大美中国·多彩丝路"', "2023丝路春晚 联名限定"];
 // for (let i = 0; i < first_text.length; i++) {
 //   first_text[i] = first_text[i].split("");

src/view/SilkRoadSpringFestivalGala/pages/fourth.vue

@@ -16,7 +16,7 @@
       accept="image/*"
       style="display: none;"
       id="file"
-      capture="user"
+      capture="environment"
       @change="inputFile"
     />
   </div>

src/view/SilkRoadSpringFestivalGala/pages/sex.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="sex" :style="'background-image: url(' + bgimg + ')'">
+    {{ step }}
     <img
       :src="kuangimg"
       :style="
@@ -11,14 +12,8 @@
       "
       class="firstImg"
     />
-    <transition name="sex_step_1">
-      <img :src="textimg" v-if="step === 1" class="sImg" />
-    </transition>
-    <img
-      :src="text2img"
-      :style="step === 3 ? 'opacity: 1' : 'opacity: 0'"
-      class="tImg"
-    />
+    <img :src="textimg" :style="step === 1 ? 'opacity: 1' : ''" class="sImg" />
+    <img :src="text2img" :style="step === 3 ? 'opacity: 1' : ''" class="tImg" />
 
     <div class="btns">
       <div class="btn" style="margin-left: 0">下载壁纸</div>
@@ -35,11 +30,20 @@ import { ref } from "vue";
  * window.$originData.orginParames.parameters 固定参数值
  * window.$originData.urlParames url参数
  */
-const step = ref(1);
-let t = setInterval(() => {
+const step = ref(0);
+let t = setTimeout(() => {
+  clearTimeout(t);
   step.value += 1;
-  if (step.value === 3) clearInterval(t);
-}, 2000);
+  console.log("---");
+  return autoStep();
+}, 200);
+
+function autoStep() {
+  t = setInterval(() => {
+    step.value += 1;
+    if (step.value === 3) clearInterval(t);
+  }, 3000);
+}
 
 const type = Math.floor(Math.random() * 13 + 1);
 const url = {
@@ -61,27 +65,29 @@ const text2img = ref(url.text2);
   position: relative;
   img {
     width: 50%;
-    transition: all 4s;
-  }
-  .firstImg {
+    transition-property: all;
+    transition-duration: 2s;
+    opacity: 0;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
   }
+  .firstImg {
+    transition-delay: 1s;
+    -moz-transition-delay: 1s; /* Firefox 4 */
+    -webkit-transition-delay: 1s; /* Safari 和 Chrome */
+    -o-transition-delay: 1s; /* Opera */
+  }
   .sImg {
-    position: absolute;
-    top: 50%;
-    left: 50%;
     width: 70%;
-    transform: translate(-50%, -50%);
   }
   .tImg {
-    position: absolute;
-    top: 50%;
     width: 90%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+    transition-delay: 1s;
+    -moz-transition-delay: 1s; /* Firefox 4 */
+    -webkit-transition-delay: 1s; /* Safari 和 Chrome */
+    -o-transition-delay: 1s; /* Opera */
   }
 
   .btns {
@@ -99,18 +105,5 @@ const text2img = ref(url.text2);
       margin-left: 2em;
     }
   }
-
-  .sex_step_1-enter-from,
-  .sex_step_1-leave-to {
-    opacity: 0;
-  }
-  .sex_step_1-enter-active,
-  .sex_step_1-leave-active {
-    transition: opacity 1s ease;
-  }
-  .sex_step_1-enter-to,
-  .sex_step_1-leave-from {
-    opacity: 1;
-  }
 }
 </style>