提交

src/view/SilkRoadSpringFestivalGala/pages/fourth.vue

@@ -2,16 +2,16 @@
   <div class="fourth">
     <div class="main animate__animated">
       <!-- <img src="../../../assets/img/top4.png" /> -->
+      <label for="file" :class="{ camere: true }">
+        <!-- <label for="file" :class="{ camere: true, shakeSlow: dou === 2 }"> -->
+        <img src="../../../assets/img/camere.png" style="width: 100%" />
+      </label>
       <div class="top4">
         <p>现在</p>
         <p>请你点击相机</p>
         <p>拍摄属于你的光</p>
         <p>得到你的2023开运色</p>
       </div>
-      <label for="file" :class="{ camere: true }">
-        <!-- <label for="file" :class="{ camere: true, shakeSlow: dou === 2 }"> -->
-        <img src="../../../assets/img/camere.png" style="width: 100%" />
-      </label>
       <!-- <img
         :class="{ doudong: dou === 1 }"
         src="../../../assets/img/bottom4.png"
@@ -67,7 +67,7 @@ function toNext() {
 }
 
 function inputFile() {
-//   dou.value = 1;
+  //   dou.value = 1;
   emits("changePage", "five");
   //   if (isAndroid || isIphone) return;
   //   let t = setTimeout(() => {
@@ -78,7 +78,7 @@ function inputFile() {
 </script>
 <style lang="scss" scoped>
 .fourth {
-  background-image: url("../../../assets/img/bg3.jpg");
+  background-image: url("../../../assets/img/bg4.png");
   background-size: 100% 100%;
   position: relative;
   .main {
@@ -89,7 +89,7 @@ function inputFile() {
     .top4 {
       text-align: center;
       color: #ffffff;
-      line-height: 2em;
+      line-height: 3em;
       font-family: OPPOSans;
       font-size: 16px;
     }
@@ -101,7 +101,9 @@ function inputFile() {
     .camere {
       display: block;
       width: 5em;
-      margin: 4em auto;
+      margin: 1em auto 4em auto;
+      border-radius: 50%;
+      animation: camere 1s infinite alternate ease-in-out;
     }
   }
 
@@ -303,6 +305,26 @@ function inputFile() {
       transform: translateX(3px) rotate(2deg);
     }
   }
+  @keyframes camere {
+    0% {
+      box-shadow: 0 0 3px 0px #ddd;
+    }
+    20% {
+      box-shadow: 0 0 6px 0px #ddd;
+    }
+    40% {
+      box-shadow: 0 0 9px 0px #ddd;
+    }
+    60% {
+      box-shadow: 0 0 12px 0px #ddd;
+    }
+    80% {
+      box-shadow: 0 0 15px 0px #ddd;
+    }
+    100% {
+      box-shadow: 0 0 18px 0px #ddd;
+    }
+  }
 
   .doudong {
     animation: buzz-out 2s 1 ease-in-out;