123

src/components/imgModal/index.vue

@@ -0,0 +1,63 @@
+<template>
+  <teleport to="body">
+    <div v-if="show" class="modal-overlay flex flex-col">
+      <div>
+        <img class="w-525px h-87px" src="@/assets/image/cddfdf.png" alt="">
+      </div>
+      <div class="bg-[url('@/assets/image/zu3327@2x.png')] w-1173px h-1489px bg-cover mt-90px flex flex-col items-center pt-75px">
+        <img src="@/assets/image/sdfasdfx.png" class="w-1030px h-1210px" alt="">
+        <div class="bg-[url('@/assets/image/z3255@2x.png')] w-600px h-98px bg-cover text-#fff text-40px flex justify-center items-center mt-48px">关闭</div>
+      </div>
+    </div>
+  </teleport>
+</template>
+
+<script setup>
+import { ref, defineEmits ,watch} from 'vue';
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['update:modelValue']);
+
+const show = ref(props.modelValue);
+
+watch(() => props.modelValue, (newVal) => {
+  show.value = newVal;
+});
+
+const handleClose = () => {
+  emit('update:modelValue', false);
+};
+</script>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  padding-top: 303px;
+  align-items: center;
+  z-index: 1000;
+}
+
+
+
+.modal-close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  border: none;
+  background: none;
+  font-size: 24px;
+  cursor: pointer;
+}
+</style>

src/views/details/size375/index.vue

@@ -11,8 +11,6 @@ const openMask=(src)=>{
   })
 }
 </script>
-
-
 <template>
   <div class="box-border relative w-[1920px] h-screen bg-no-repeat bg-cover bg-[url('@/assets/image/zu3237.png')] flex items-center flex-col">
     <div class="mt-[143px] w-[1074px] h-[178px] bg-[url('@/assets/image/zu3316@2x.png')] bg-cover bg-no-repeat"></div>

src/views/details/size768/index.vue

@@ -1,14 +1,17 @@
 <script setup>
+import {ref} from 'vue'
 import {useAuth} from "@/store/auth/index.js";
 const {detailData} =useAuth()
 import "vant/es/image-preview/style";
 import { showImagePreview } from 'vant';
+import imgModal from '@/components/imgModal/index.vue'
 const openMask=(src)=>{
   showImagePreview({
     images:[src],
     closeable: true,
   })
 }
+const showModal=ref(true)
 </script>
 <template>
   <div class="box-border relative w-[1920px] h-screen bg-no-repeat bg-cover bg-[url('@/assets/image/gdz53@2x.png')] flex items-center flex-col">
@@ -70,5 +73,7 @@ const openMask=(src)=>{
     <div>
       <img class="w-1170px h-557px fixed bottom-0 right-0" src="@/assets/image/gdz54@2x.png" alt="">
     </div>
+    <imgModal v-model:modelValue="showModal">
+    </imgModal>
   </div>
 </template>