From a8e6ba7cdde59f76c4ca0c8f10cfbb5d966b880d Mon Sep 17 00:00:00 2001
From: kenny <879464294@qq.com>
Date: Fri, 19 Dec 2025 19:06:18 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=A0=B7=E5=BC=8F=E5=85=BC=E5=AE=B9ppt?=
 =?UTF-8?q?r?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../FirstStyleType/FacialColorLatitude.vue    |  92 ++++++++-----
 .../component/FirstStyleType/ProgressBar.vue  |  20 ++-
 .../component/FirstStyleType/geneticStyle.vue |  19 +--
 pages/report/index.vue                        | 130 +++++++++---------
 4 files changed, 153 insertions(+), 108 deletions(-)

diff --git a/pages/report/component/FirstStyleType/FacialColorLatitude.vue b/pages/report/component/FirstStyleType/FacialColorLatitude.vue
index 3f39623..c962ff7 100644
--- a/pages/report/component/FirstStyleType/FacialColorLatitude.vue
+++ b/pages/report/component/FirstStyleType/FacialColorLatitude.vue
@@ -27,53 +27,67 @@ const props = defineProps({
     <view>
       <view class="title">色相</view>
       <view class="text-en">HUE</view>
-      <ProgressBar :step="Number(hue)"/>
-      <view class="desc">
-        <view class="flex">
-          <view>冷色</view>
-          <view>暖色</view>
+
+      <div class="surface-temp">
+        <ProgressBar :step="Number(hue)"/>
+
+        <view class="desc">
+          <view class="flex">
+            <view>冷色</view>
+            <view>暖色</view>
+          </view>
+
+
+          <view class="flex flex-en">
+            <view>Cool</view>
+            <view>Warn</view>
+          </view>
         </view>
-        <view class="flex flex-en">
-          <view>Cool</view>
-          <view>Warn</view>
-        </view>
-      </view>
+      </div>
     </view>
     <view>
       <view class="title">亮度</view>
       <view class="text-en">VALUE</view>
-      <ProgressBar :step="Number(chroma)"/>
-      <view class="desc">
-        <view class="flex">
-          <view>暗沉</view>
-          <view>白皙</view>
+
+
+      <div class="surface-temp">
+        <ProgressBar :step="Number(chroma)"/>
+        <view class="desc">
+          <view class="flex">
+            <view>暗沉</view>
+            <view>白皙</view>
+          </view>
+          <view class="flex flex-en">
+            <view>Dark</view>
+            <view>White</view>
+          </view>
         </view>
-        <view class="flex flex-en">
-          <view>Dark</view>
-          <view>White</view>
-        </view>
-      </view>
+      </div>
+
     </view>
     <view>
       <view class="title">色度</view>
       <view class="text-en">CHROMA</view>
-      <ProgressBar :step="Number(luminance)"/>
-      <view class="desc">
-        <view class="flex">
-          <view>柔和</view>
-          <view>鲜艳</view>
+
+      <div class="surface-temp">
+        <ProgressBar :step="Number(luminance)"/>
+        <view class="desc">
+          <view class="flex">
+            <view>柔和</view>
+            <view>鲜艳</view>
+          </view>
+          <view class="flex flex-en">
+            <view>Soft</view>
+            <view>Bright</view>
+          </view>
         </view>
-        <view class="flex flex-en">
-          <view>Soft</view>
-          <view>Bright</view>
-        </view>
-      </view>
+      </div>
     </view>
     <!--    <ProgressBar :step="1" />-->
   </view>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .container {
   padding: 20px;
   text-align: center;
@@ -110,8 +124,20 @@ const props = defineProps({
   margin-top: 6px;
 }
 
-.desc {
-  margin-top: 4px;
+.surface-temp {
+  // background-color: yellowgreen;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+
+  .desc {
+    // background-color: blue;
+    margin-top: 4px;
+    width: 700rpx;
+    // margin: 0 auto;
+  }
 }
 
+
 </style>
diff --git a/pages/report/component/FirstStyleType/ProgressBar.vue b/pages/report/component/FirstStyleType/ProgressBar.vue
index df2406f..d113709 100644
--- a/pages/report/component/FirstStyleType/ProgressBar.vue
+++ b/pages/report/component/FirstStyleType/ProgressBar.vue
@@ -33,7 +33,11 @@ watch(
 
 <template>
   <view class="progress">
-    <image
+    <!-- <image
+      :src="'https://llyz.oss-cn-beijing.aliyuncs.com/diagnostic-report-h5/progress.svg'"
+      class="selectBox"
+    /> -->
+    <img
       :src="'https://llyz.oss-cn-beijing.aliyuncs.com/diagnostic-report-h5/progress.svg'"
       class="selectBox"
     />
@@ -43,14 +47,17 @@ watch(
 
 <style scoped>
 .progress {
-  width: 100%;
-  height: 14px;
+  width: 700rpx;
+  /* height: 14px; */
+  /* width: 780rpx; */
+  /* width: 100%; */
   position: relative;
 }
 
 .selectBox {
   width: 100%;
-  height: 14px;
+  /* height: 14px; */
+  display: block;
 }
 
 .bolus {
@@ -58,9 +65,12 @@ watch(
   height: 12px;
   border-radius: 50%;
   position: absolute;
-  top: 2px;
+  /* top: 6px; */
+  top: 50%;
   left: 0;
   background: #000;
+  /* display: none; */
+  transform: translateY(-50%);
 }
 
 .p0 {
diff --git a/pages/report/component/FirstStyleType/geneticStyle.vue b/pages/report/component/FirstStyleType/geneticStyle.vue
index 78326da..b996773 100644
--- a/pages/report/component/FirstStyleType/geneticStyle.vue
+++ b/pages/report/component/FirstStyleType/geneticStyle.vue
@@ -64,22 +64,22 @@
     </view>
   </view>
   <view class="pic-container">
-    <image
+    <!-- <image
       v-for="(pic, index) in picList"
       :key="index"
       :src="pic"
       class="pic"
       mode="widthFix"
       @click="previewImage(pic)"
-    ></image>
+    ></image> -->
 
-    <!-- <img
+    <img
       v-for="(pic, index) in picList"
       :key="index"
       :src="pic"
       @click="previewImage(pic)"
       class="pic"
-    /> -->
+    />
   </view>
 
   <!-- 图片预览遮罩层 -->
@@ -117,12 +117,15 @@
     padding: 20px 18px;
   }
 
-  /* .pic {
-  width: 100px;
+  .pic {
+  /* width: 100px;
   height: 100px;
   background-color: #eee;
-  border-radius: 4px;
-} */
+  border-radius: 4px; */
+  /* width: 80px; */
+  flex: 1;
+  width: 30%;
+}
 
   /* 预览遮罩层样式 */
   .preview-mask {
diff --git a/pages/report/index.vue b/pages/report/index.vue
index edccdfb..924aecb 100644
--- a/pages/report/index.vue
+++ b/pages/report/index.vue
@@ -1,11 +1,12 @@
 <template>
-  <view style="overflow-x: hidden; font-size: 0" :style="{
-    paddingBottom: isInPptr ? '250px' : 0
-  }">
-
+  <view
+    style="overflow-x: hidden; font-size: 0"
+    :style="{
+      paddingBottom: isInPptr ? '250px' : 0,
+    }"
+  >
     <Custom-Header :userFaceInfo="collect" v-if="isInPptr" />
 
-
     <!-- <img
       v-if="isInPptr"
       src="/static/header.png"
@@ -140,20 +141,19 @@
                 <img :src="pngImgUrl + 'rightRe.png'" alt="" srcset="" />
               </view>
             </view>
+
             <swiper :current="current" class="swiper" @change="chageSwiper">
               <swiper-item v-for="(item, index) in newColorTypeList" :key="index">
                 <view class="swiper-item">
                   <view class="img-box">
-                    <view style="width: 235px; height: 235px; position: absolute; z-index: 99">
-                      <img
-                        :src="item.avatarFrameImgUrl"
-                        alt=""
-                        srcset=""
-                        style="width: 235px; height: 235px"
-                      />
-                    </view>
+                    <!-- <view>
+
+                    </view> -->
+
+                    <img :src="item.avatarFrameImgUrl" class="bg-image" />
+
                     <view class="avatar">
-                      <img :src="collect?.avatar_img_url" alt="" srcset="" />
+                      <img :src="collect?.avatar_img_url" />
                     </view>
                   </view>
                 </view>
@@ -167,6 +167,7 @@
               {{ colorTypeInfo.typeName + '型' === collect.sj_color_type ? '最佳颜色' : '不匹配' }}
             </view>
           </view>
+
           <view class="content-box">
             <view class="padding-top20">
               <rich-text :nodes="colorTypeText.characteristic"></rich-text>
@@ -232,7 +233,10 @@
               :key="index"
               :class="index === 1 ? 'avatar-main' : 'avatar-side'"
             >
-              <img :src="item.url.includes('1720084773937.png') ? '/static/imgs/site.png' : item.url" @click="previewImage(item.url)" />
+              <img
+                :src="item.url.includes('1720084773937.png') ? '/static/imgs/site.png' : item.url"
+                @click="previewImage(item.url)"
+              />
             </view>
           </view>
           <view class="rich-text-content">
@@ -243,14 +247,8 @@
                 height: userFaceInfo?.gender === '男' ? '150px' : '328px',
               }"
             > -->
-            <view
-              :style="{
-                height: collect?.gender === '男' ? '150px' : '328px',
-              }"
-              class="face-img-box"
-              style="margin: 0 auto;"
-            >
-              <img :src="faceImgUrl" style="object-fit: cover;" />
+            <view class="face-img-box" style="margin: 0 auto">
+              <img :src="faceImgUrl" style="object-fit: cover" />
             </view>
             <rich-text :nodes="praiseTextList[1]"></rich-text>
             <view class="more-hairstyle">
@@ -280,7 +278,7 @@
       <view v-if="isInPptr ? true : activeTab === 3">
         <view class="style-type" style="overflow-y: hidden">
           <view class="lucky-color-box" style="overflow-y: hidden">
-            <view class="shengxiao" >
+            <view class="shengxiao">
               <img
                 :src="
                   `https://llyz.oss-cn-beijing.aliyuncs.com/diagnostic-report-h5/chineseZodiac/` +
@@ -306,12 +304,14 @@
                 style="background-color: rgba(62, 166, 123, 1); top: 4.5%; left: 39%"
                 >{{ numToChinese(shengxiaoNumList[1]) }}</view
               >
-              <view class="numblock" style="background-color: rgba(61, 146, 168, 1); top: 21%;left:0%">{{
-                numToChinese(shengxiaoNumList[2])
-              }}</view>
               <view
                 class="numblock"
-                style="background-color: rgba(195, 52, 55, 1); top: 23%;right: 3%"
+                style="background-color: rgba(61, 146, 168, 1); top: 21%; left: 0%"
+                >{{ numToChinese(shengxiaoNumList[2]) }}</view
+              >
+              <view
+                class="numblock"
+                style="background-color: rgba(195, 52, 55, 1); top: 23%; right: 3%"
                 >{{ numToChinese(shengxiaoNumList[3]) }}</view
               >
               <view
@@ -320,10 +320,9 @@
                 >{{ numToChinese(shengxiaoNumList[4]) }}</view
               >
 
-
               <view class="five-attribute">
                 <view class="avatorLogo">
-                  <img :src="userFaceInfo?.avatar_img_url" >
+                  <img :src="userFaceInfo?.avatar_img_url" />
                 </view>
                 <view>
                   <img
@@ -348,11 +347,7 @@
   <!-- 图片预览遮罩层 -->
   <view v-if="showPreview" class="preview-mask" @click="closePreview">
     <view class="preview-container" @click.stop>
-      <img
-        :src="currentPreviewImage"
-        class="preview-image"
-        @click="closePreview"
-      >
+      <img :src="currentPreviewImage" class="preview-image" @click="closePreview" />
     </view>
   </view>
 
@@ -903,14 +898,12 @@
         ress = await getHair();
       } else {
         try {
-
           const uuuress = await pollExchangeHairHistory(taskInfo.requestId);
           console.log('uuuress: xxxxxxxxxxxx', uuuress);
           // await addHair(ress);
           avatarList.value = uuuress.result;
         } catch (error) {
           console.log('error: ', error);
-
         }
       }
     });
@@ -1016,7 +1009,7 @@
   };
 </script>
 
-<style>
+<style scoped lang="scss">
   .report {
     padding: 20px 20px 0;
   }
@@ -1073,31 +1066,53 @@
     display: flex;
     position: absolute;
     width: 100%;
-    height: 235px;
+    // height: 235px;
+    height: 470rpx;
+    // background-color: blue;
   }
 
   .avatar {
     position: absolute;
-    width: 235px;
-    height: 235px;
+    width: 470rpx;
+    // height: 235px;
     z-index: 9;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
   }
 
   .avatar img {
     /* width: 235px; */
-    height: 235px;
+    // height: 235px;
+    height: 370rpx;
+    // width: 100%;
     transform: scale(1.2);
   }
 
   .swiper {
     width: 100%;
-    height: 235px;
-    margin-top: 20px;
-  }
+    /* height: 235px; */
+    height: 470rpx;
+    margin-top: 20rpx;
 
-  .img-box {
-    width: 235px;
-    position: relative;
+    .swiper-item {
+      // height: 235px;
+      // line-height: 28px !important;
+      text-align: center;
+      display: flex;
+      justify-content: center;
+    }
+
+    .img-box {
+      /* width: 235px; */
+      position: relative;
+
+      .bg-image {
+        z-index: 10;
+        position: relative;
+        height: 470rpx;
+      }
+    }
   }
 
   .btn {
@@ -1124,16 +1139,6 @@
     right: 0;
   }
 
-  .swiper-item {
-    /* display: block; */
-    height: 235px;
-    line-height: 28px !important;
-    text-align: center;
-    display: flex;
-    justify-content: center;
-    /* background-color: red; */
-  }
-
   .swiper-instructions {
     display: flex;
     flex-direction: column;
@@ -1278,8 +1283,8 @@
   }
 
   .face-img-box img {
-    /* width: 100%; */
-    height: 100%;
+    width: 100%;
+    /* height: 100%; */
     /* border-radius: 8px; */
   }
 
@@ -1345,8 +1350,9 @@
     left: 50%;
     transform: translateX(-50%);
     top: 25%;
-    width: 66.5px;
-    height: 66.5px;
+    width: 133rpx;
+    height: 133rpx;
+    /* height: 66.5px; */
     border-radius: 50%;
     overflow: hidden;
     border: 3.22px solid rgba(167, 178, 179, 1);