提交

src/view/SilkRoadSpringFestivalGala/pages/sex.vue

@@ -1,29 +1,42 @@
 <template>
-  <div class="sex" :style="'background-image: url(' + bgimg + ')'">
-    <img
-      :src="kuangimg"
-      :style="
-        step === 2
-          ? 'opacity: 1'
-          : step === 3
-          ? 'width: 25%;transform: translate(0, 0);opacity: 1; top: 1em; left: 1em'
-          : 'opacity: 0'
-      "
-      class="firstImg"
-    />
-    <img :src="textimg" :style="step === 1 ? 'opacity: 1' : ''" class="sImg" />
-    <img :src="text2img" :style="step === 3 ? 'opacity: 1' : ''" class="tImg" />
+  <div>
+    <div class="sex" :style="'background-image: url(' + bgimg + ')'">
+      <img
+        :src="kuangimg"
+        :style="
+          step === 2
+            ? 'opacity: 1'
+            : step === 3
+            ? 'width: 25%;transform: translate(0, 0);opacity: 1; top: 1em; left: 1em'
+            : 'opacity: 0'
+        "
+        class="firstImg"
+      />
+      <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="btns" v-if="step === 3"> -->
-      <div class="btn" @click="showDown" style="margin-left: 0">下载壁纸</div>
-      <div class="btn" @click="showDown">生成海报</div>
+      <div class="btns">
+        <!-- <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>
+    <div class="model" v-show="showImg !== undefined" @click="close">
+        <van-icon color="#fff" size="26" name="close" class="close" @click="close" />
+      <img :src="showImg" class="modelImg" alt="" />
     </div>
   </div>
 </template>
 <script setup>
 import { ref } from "vue";
-import { ImagePreview } from "vant";
 // import { onMounted, reactive } from "vue";
 // import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
 /**
@@ -31,8 +44,8 @@ import { ImagePreview } from "vant";
  * window.$originData.orginParames.parameters 固定参数值
  * window.$originData.urlParames url参数
  */
-
-const type = Math.floor(Math.random() * 13 + 1);
+const showImg = ref(undefined);
+const type = Math.floor(Math.random() * 12 + 1);
 const url = {
   bg: require("@/assets/img/12/" + type + "-1.png"),
   kuang: require("@/assets/img/12/" + type + ".kuang.png"),
@@ -59,8 +72,10 @@ function autoStep() {
 }
 
 function showDown() {
-  console.log(url.bg, ImagePreview);
-  ImagePreview({ images: [url.bg], closeable: true });
+  showImg.value = url.bg;
+}
+function close() {
+  showImg.value = undefined;
 }
 </script>
 <style lang="scss" scoped>
@@ -111,21 +126,27 @@ function showDown() {
       margin-left: 2em;
     }
   }
+}
+.model {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 10;
+  background-color: #00000040;
 
-  .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%);
-    }
+  .modelImg {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 80%;
+  }
+  .close{
+    position: absolute;
+    top: 1em;
+    right: 1em;
   }
 }
 </style>