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

---
 src/views/details/size375/index.vue | 350 ++++------------------------
 1 file changed, 46 insertions(+), 304 deletions(-)

diff --git a/src/views/details/size375/index.vue b/src/views/details/size375/index.vue
index 7379bb2..4afcbfb 100644
--- a/src/views/details/size375/index.vue
+++ b/src/views/details/size375/index.vue
@@ -12,321 +12,63 @@ 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 container">
-    <div class="content1"></div>
-    <div class="content2">
-      <div class="wrap1" style="margin-top: 0">
-        <div class="wrap1_1">姓名</div>
-        <div class="wrap1_2">
-         {{detailData.name}}
-        </div>
+  <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>
+    <div class="mt-[123px] w-[1654px] h-[2729px] bg-[url('@/assets/image/zu3186@2x.png')] bg-cover bg-no-repeat flex flex-col items-center px-[82px] pt-[200px] pb-[92px]">
+      <div class="flex w-full items-center mt-[80px]">
+        <div class="pl-30px w-[256px] text-[72px] font-bold text-[#2B69A1]">姓名</div>
+        <div class="text-[72px] text-[#2B69A1]">{{ detailData.name }}</div>
       </div>
-      <div class="wrap1">
-        <div class="wrap1_1">年龄</div>
-        <div class="wrap1_2">
-      {{detailData.age}} 岁
-        </div>
+      <div class="flex w-full items-center mt-[80px]">
+        <div class="pl-30px w-[256px] text-[72px] font-bold text-[#2B69A1]">年龄</div>
+        <div class="text-[72px] text-[#2B69A1]">{{ detailData.age }} 岁</div>
       </div>
-      <div class="wrap1">
-        <div class="wrap1_1">性别</div>
-        <div class="wrap1_2">
-          {{detailData.gender}}
-        </div>
+      <div class="flex w-full items-center mt-[80px]">
+        <div class="pl-30px w-[256px] text-[72px] font-bold text-[#2B69A1]">性别</div>
+        <div class="text-[72px] text-[#2B69A1]">{{ detailData.gender }}</div>
       </div>
-      <div class="package1">
-        <div class="package1_1" v-for="(item,index) of detailData?.worksInfo">
-          <div class="package1_1_1">作品{{index+1}}</div>
-          <div class="package1_1_2 relative">
-            <img class="package1_1_2_1"  @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="package1_1_2_2">
-              <div class="package1_1_2_2_1">作品名称</div>
-              <div class="package1_1_2_2_2">{{item.workName}}</div>
-            </div>
-            <div class="package1_1_2_3">
-              <div class="package1_1_2_3_1">
-                <div class="package1_1_2_3_1_1">长度</div>
-                <div class="package1_1_2_3_1_2">{{item.length}} cm</div>
-              </div>
-              <div class="package1_1_2_3_2">
-                <div class="package1_1_2_3_2_1">宽度</div>
-                <div class="package1_1_2_3_2_2">{{item.wide}} cm</div>
+      <div class="mt-[46px] w-full bg-[#F5F5F5] flex flex-col items-center overflow-y-auto pt-50px 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-[92px] flex  items-start w-full">
+              <div class="text-[72px] w-[256px] font-bold text-[#2B69A1]">作品{{ index + 1 }}</div>
+              <div class="relative w-[1147px]">
+                <img class="w-1147px h-691px" @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-[56px] ml-[61px]">
+                  <div class="flex items-center">
+                    <div class="mr-[51px] text-[61px] font-bold text-[#2B69A1]">作品名称</div>
+                    <div class="text-[61px] text-[#2B69A1]">{{ item.workName }}</div>
+                  </div>
+                  <div class="mt-[41px] flex justify-between">
+                    <div class="flex items-center">
+                      <div class="mr-[51px] text-[61px] font-bold text-[#2B69A1]">长度</div>
+                      <div class="text-[61px] text-[#2B69A1]">{{ item.length }} cm</div>
+                    </div>
+                    <div class="flex items-center">
+                      <div class="mr-[51px] text-[61px] font-bold text-[#2B69A1]">宽度</div>
+                      <div class="text-[61px] text-[#2B69A1]">{{ item.wide }} cm</div>
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-    <div class="content3">
-      <img src="@/assets/image/gdz27.png" alt="">
+    <div class="absolute top-0 left-0 w-[671px] h-[728px] bg-cover">
+      <img src="@/assets/image/gdz27.png" alt="" />
     </div>
-    <div class="content4">
-      <img src="@/assets/image/zu733@2x.png" alt="">
+    <div class="absolute bottom-[200px] w-[1270px] h-[145px]">
+      <img src="@/assets/image/zu733@2x.png" alt="" />
     </div>
   </div>
 </template>
-
-<style scoped lang="scss">
-.container {
-
-  .content4 {
-    position: absolute;
-    bottom: 200px;
-
-    img {
-      width: 1270px;
-      height: 145px;
-
-    }
-  }
-  .content3 {
-    position: absolute;
-    top: 0;
-    left: 0;
-    background-size: cover;
-
-    img {
-      width: 671px;
-      height: 728px;
-    }
-  }
-  .content1 {
-    margin-top: 143px;
-    background-size: cover;
-    width: 1074px;
-    height: 178px;
-    background-repeat: no-repeat;
-    background-image: url("@/assets/image/zu3316@2x.png");
-  }
-  .content2 {
-    margin-top: 123px;
-    background-size: cover;
-    width: 1654px;
-    height: 2729px;
-    background-repeat: no-repeat;
-    background-image: url("@/assets/image/zu3186@2x.png");
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 200px 82px 92px;
-
-    .package2{
-      width: 100%;
-      display: flex;
-      margin-top: 60px;
-      justify-content: space-between;
-      .package2_1{
-          background-color:#fff;
-        width: 512px;
-        height: 200px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        border-radius: 100px;
-        box-shadow: 0 16px 16px rgba(0, 0, 0, 0.1); /* X轴偏移, Y轴偏移, 模糊半径, 阴影颜色 */
-
-      }
-      .package2_2{
-        background-size: contain;
-        background-repeat: no-repeat;
-        width: 866px;
-        height: 200px;
-        background-image: url("@/assets/image/zu3189@2x1.png");
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        color: #fff;
-        font-size: 82px;
-      }
-
-
-    }
-    .package1{
-      overflow-y: auto;
-
-      padding-top: 46px;
-      padding-left: 31px;
-      width: 1490px;
-
-      background-color: #F5F5F5;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-
-      .package1_2 {
-        margin-bottom: 46px;
-        margin-top: 51px;
-        width: 184px; /* 按照图片的实际尺寸调整 */
-        height: 184px; /* 按照图片的实际尺寸调整 */
-        background-color: #336699; /* 蓝色背景颜色 */
-        border-radius: 50%; /* 圆形 */
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 可选的阴影效果 */
-      }
-      .package1_2::before,
-      .package1_2::after {
-        content: '';
-        position: absolute;
-        background-color: white; /* 加号的颜色 */
-      }
-
-      .package1_2::before {
-        width: 88px; /* 加号横线的宽度 */
-        height: 6px; /* 加号横线的高度 */
-      }
-
-      .package1_2::after {
-        width: 6px; /* 加号竖线的宽度 */
-        height: 88px; /* 加号竖线的高度 */
-      }
-      .package1_1{
-        margin-bottom: 92px;
-        width: 100%;
-        display: flex;
-        .package1_1_2{
-          .x_c2{
-            margin-top: 20px;
-            width: 1174px;
-            padding-left: 61px;
-            height: 174px;
-            background-color: #DCE5E9;
-            border: none;
-            &:focus{
-              outline: none;
-            }
-            &::placeholder {
-              font-size: 72px;
-              color: #2B69A1;
-            }
-          }
-          .x_c3{
-            margin-top: 41px;
-            display: flex;
-            justify-content: space-between;
-            .x_c3_1{
-              display: flex;
-flex-direction: column;
-              .x_c3_1_2{
-                display: flex;
-                align-items: center;
-                .x_c3_1_2_2{
-                  color: #2B69A1;
-                  font-size: 72px;
-                }
-                .x_c3_1_2_1{
-                  margin-right: 51px;
-                  padding-left: 61px;
-                  width: 379px;
-                  height: 174px;
-                  background-color: #DCE5E9;
-                  border: none;
-                  &:focus{
-                    outline: none;
-                  }
-                  &::placeholder {
-                    font-size: 72px;
-                    color: #2B69A1;
-                  }
-                }
-              }
-              .x_c3_1_1{
-
-                color: #2B69A1;
-                font-size: 61px;
-              }
-            }
-          }
-          .x_c1{
-            margin-top: 41px;
-            color: #2B69A1;
-            font-size: 61px;
-          }
-          .package1_1_2_3{
-            display: flex;
-            .package1_1_2_3_2{
-              display: flex;
-              .package1_1_2_3_2_1{
-                margin-right: 51px;
-                font-weight:bold;
-                color: #2B69A1;
-                font-size: 61px;
-              }
-              .package1_1_2_3_2_2{
-                color: #2B69A1;
-                font-size: 61px;
-              }
-            }
-            .package1_1_2_3_1{
-              display: flex;
-              .package1_1_2_3_1_1{
-                margin-right: 51px;
-                font-weight:bold;
-                color: #2B69A1;
-                font-size: 61px;
-              }
-              .package1_1_2_3_1_2{
-                margin-right: 251px;
-                color: #2B69A1;
-                font-size: 61px;
-              }
-            }
-          }
-          .package1_1_2_2{
-            margin-top:56px;
-            display: flex;
-            .package1_1_2_2_2{
-              color: #2B69A1;
-              font-size:61px;
-            }
-            .package1_1_2_2_1{
-              margin-right:51px;
-              font-weight:bold;
-              color: #2B69A1;
-              font-size:61px;
-            }
-          }
-          .package1_1_2_1{
-         width: 1147px;
-            height: 691px;
-          }
-        }
-
-        .package1_1_1{
-          width: 256px;
-          color: #2B69A1;
-          font-weight: bold;
-
-        }
-      }
-    }
-
-    .wrap1 {
-      padding-left: 31px;
-      margin-top: 80px;
-      display: flex;
-      align-items: center;
-      width: 100%;
-      .wrap1_2 {
-color: #2B69A1;
-        font-size: 72px;
-      }
-
-      .wrap1_1 {
-      width: 256px;
-        font-weight: bold;
-        color: #2B69A1;
-        font-size: 72px;
-      }
-    }
-  }
-}
-
-</style>