From 7d29049bcc0583fedf136b7f1621863862f1862a Mon Sep 17 00:00:00 2001
From: xingyy <373639591@qq.com>
Date: Fri, 9 Aug 2024 14:44:02 +0800
Subject: [PATCH] 123

---
 src/views/details/size768/index.vue | 91 +++++++++++++++++++----------
 1 file changed, 59 insertions(+), 32 deletions(-)

diff --git a/src/views/details/size768/index.vue b/src/views/details/size768/index.vue
index 0f5f9f8..d780847 100644
--- a/src/views/details/size768/index.vue
+++ b/src/views/details/size768/index.vue
@@ -1,45 +1,72 @@
 <script setup>
-
+import {useAuth} from "@/store/auth/index.js";
+const {detailData} =useAuth()
+import "vant/es/image-preview/style";
+import { showImagePreview } from 'vant';
+console.log(detailData,'detailData')
+const openMask=(src)=>{
+  showImagePreview({
+    images:[src],
+    closeable: true,
+  })
+}
 </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="mb-[90px]">
-      <img class="w-[525px] h-[87px] mt-[303px]" src="@/assets/image/zu3314@2x.png" alt="">
-    </div>
-    <div class="absolute top-0 left-[70px]">
-      <img class="w-[610px] h-[668px]" src="@/assets/image/gdz47@2x.png" alt="">
-    </div>
-    <div class="bg-[url('@/assets/image/z3327@2x1.png')] w-[1173px] h-[1489px] bg-no-repeat bg-cover pt-[98px] pr-[54px] pl-[54px]">
-      <div class="flex">
-        <div class="text-primary text-[35px] w-[200px] font-bold">姓名</div>
-        <div class="text-primary text-[35px]">王小五</div>
+    <div class="mt-[303px] w-[525px] h-[87px] bg-[url('@/assets/image/zu3316@2x.png')] bg-cover bg-no-repeat"></div>
+    <div class="mt-[90px] w-[1173px] h-[1489px] bg-[url('@/assets/image/zu3327@2x.png')] bg-cover bg-no-repeat flex flex-col items-center px-[82px] pt-[200px] pt-[98px] pb-45px">
+      <div class="flex w-full items-center">
+        <div class="pl-30px w-[200px] text-[35px] font-bold text-[#2B69A1]">姓名</div>
+        <div class="text-[35px] text-[#2B69A1]">{{ detailData.name }}</div>
       </div>
-      <div class="flex mt-[26.74px]">
-        <div class="text-primary text-[35px] w-[200px] font-bold">*年龄</div>
-        <div class="text-primary text-[35px]">10 岁</div>
+      <div class="flex w-full items-center mt-[28px]">
+        <div class="pl-30px w-[200px] text-[35px] font-bold text-[#2B69A1]">年龄</div>
+        <div class="text-[35px] text-[#2B69A1]">{{ detailData.age }} 岁</div>
       </div>
-      <div class="flex  mt-[26.74px]">
-        <div class="text-primary text-[35px] w-[200px] font-bold">*性别</div>
-        <div class="text-primary text-[35px]">女</div>
+      <div class="flex w-full items-center mt-[28px]">
+        <div class="pl-30px w-[200px] text-[35px] font-bold text-[#2B69A1]">性别</div>
+        <div class="text-[35px] text-[#2B69A1]">{{ detailData.gender }}</div>
       </div>
-      <div class="w-[1065px] h-[980px] bg-#F5F5F5 mt-[8.26px] flex pt-[21.74px]">
-        <div class="flex">
-          <div class="text-primary font-bold shrink-0 w-[200px]">*作品1</div>
-          <div>
-            <img class="w-[738px] h-[353px]" src="@/assets/image/dfbackground@2.png" alt="">
-            <div class="flex text-primary text-[30px] font-bold">
-              <div>作品名称</div>
-              <div>盛夏光年</div>
+      <div class="mt-[46px] w-full bg-[#F5F5F5] flex flex-col items-center overflow-y-auto pt-23px pl-30px">
+        <div class="w-full flex flex-col">
+          <div class="w-full flex flex-col">
+            <div v-for="(item, index) in detailData?.worksInfo" :key="index" class="mb-[45px] flex  items-start w-full">
+              <div class="text-[35px] w-[200px] font-bold text-[#2B69A1] pt-18px">作品{{ index + 1 }}</div>
+              <div class="relative w-[1147px]">
+                <img class="w-738px h-353px" @click="openMask(item.picUrl.replace('https', 'http'))" :src="item.picUrl.replace('https', 'http')" alt="" />
+                <!--  未入围  -->
+                <img v-if="item.status === 3" src="@/assets/image/zu3222@2x.png" class="w-[404px] h-[404px] absolute top-0 right-0" alt="" />
+                <!--  待定 -->
+                <img v-if="item.status === 1" src="@/assets/image/zu3220@2x.png" class="w-[404px] h-[404px] absolute top-0 right-0" alt="" />
+                <!--  入围  -->
+                <img v-if="item.status === 2" src="@/assets/image/zdw221@2x.png" class="w-[404px] h-[404px] absolute top-0 right-0" alt="" />
+                <div class="flex flex-col mt-[20px]">
+                  <div class="flex items-center">
+                    <div class="mr-[65px] text-[30px] font-bold text-[#2B69A1] w-122px">作品名称</div>
+                    <div class="text-[30px] text-[#2B69A1]">{{ item.workName }}</div>
+                  </div>
+                  <div class="mt-[20px] flex">
+                    <div class="flex items-center mr-148px">
+                      <div class="mr-[51px] text-[30px] font-bold text-[#2B69A1] w-122px">长度</div>
+                      <div class="text-[30px] text-[#2B69A1]">{{ item.length }} cm</div>
+                    </div>
+                    <div class="flex items-center">
+                      <div class="mr-[51px] text-[30px] font-bold text-[#2B69A1]">宽度</div>
+                      <div class="text-[30px] text-[#2B69A1]">{{ item.wide }} cm</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>
-
       </div>
     </div>
-</div>
+    <div class="absolute top-0 left-0 w-[610px] h-[668px] bg-cover">
+      <img src="@/assets/image/gdz47@2x.png" alt="" />
+    </div>
+    <div class="absolute bottom-[200px] w-[620px] h-[71px]">
+      <img src="@/assets/image/zu733@2x.png" alt="" />
+    </div>
+  </div>
 </template>
-
-<style scoped lang="scss">
-
-</style>