提交

src/view/SilkRoadSpringFestivalGala/index.vue

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

src/view/SilkRoadSpringFestivalGala/pages/sex.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="sex" :style="'background-image: url(' + bgimg + ')'">
-    {{ step }}
     <img
       :src="kuangimg"
       :style="
@@ -15,9 +14,13 @@
     <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>
-      <div class="btn">生成海报</div>
+    <div class="btns" v-if="step === 3">
+      <div class="btn" @click="showDown" style="margin-left: 0">下载壁纸</div>
+      <div class="btn" @click="showDown">生成海报</div>
+    </div>
+
+    <div class="model" v-if="model">
+        <van-image class="modelImg" :src="modelimg" />
     </div>
   </div>
 </template>
@@ -31,6 +34,8 @@ import { ref } from "vue";
  * window.$originData.urlParames url参数
  */
 const step = ref(0);
+const model = ref(false);
+const modelimg = ref(undefined);
 let t = setTimeout(() => {
   clearTimeout(t);
   step.value += 1;
@@ -45,6 +50,12 @@ function autoStep() {
   }, 3000);
 }
 
+function showDown() {
+  console.log(url.bg);
+  modelimg.value = url.bg;
+  model.value = true;
+}
+
 const type = Math.floor(Math.random() * 13 + 1);
 const url = {
   bg: require("@/assets/img/12/" + type + "-1.png"),
@@ -105,5 +116,21 @@ const text2img = ref(url.text2);
       margin-left: 2em;
     }
   }
+
+  .model{
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-color: #00000040;
+
+    .modelImg{
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+  }
 }
 </style>