feat: 样式兼容pptr

constant/aiText.js

@@ -171,7 +171,10 @@ export const shengxiaoSystem_prompt = `五行八卦中年柱、月柱、日柱
 
 	•	注意闰年：需要注意的是，如果出生年份是闰年，2月有29天，在计算天数序号时要相应调整。闰年的判断方法是：能被4整除但不能被100整除的年份为闰年，此外能被400整除的年份也是闰年 。例如，2024年是闰年，计算当年天数序号时，2月按29天计算。
 
-年柱、月柱和日柱的计算规则虽然复杂，但它们蕴含着古人对时间和命运的深刻理解，是五行八卦命理学的重要基础 。`;
+年柱、月柱和日柱的计算规则虽然复杂，但它们蕴含着古人对时间和命运的深刻理解，是五行八卦命理学的重要基础 。
+
+特别注意：不需要多余的换行符，比如额外多余的\n，请直接返回文本内容
+`;
 
 export const statureText = (
   customKey,

pages/report/component/FirstStyleType/BodyType.vue

@@ -98,7 +98,7 @@ watch(
     <template v-for="item of json">
       <CheckBox :checked="item.checked">{{ item.type }}</CheckBox>
     </template>
-    <image class="figure" :src="imageUrl" mode="widthFix"></image>
+    <img class="figure" :src="imageUrl" mode="widthFix"></img>
   </view>
 </template>
 
@@ -109,5 +109,6 @@ watch(
 .figure {
   margin-top: 26px;
   margin-bottom: 12px;
+  width: 100%;
 }
 </style>

pages/report/component/FirstStyleType/BottomPic.vue

@@ -49,38 +49,36 @@ watch(
     <template
       v-if="styleImage === psychologicalStyleImage && props.gender == '女'"
     >
-      <image class="bottomMap" :src="styleImage" mode="widthFix"></image>
+      <img class="bottomMap" :src="styleImage" >
     </template>
     <template v-else>
       <template v-if="props.gender == '女'">
-        <image class="bottomMap" :src="styleImage" mode="widthFix"></image>
+        <img class="bottomMap" :src="styleImage" >
+
         <view>
           <view class="psychologicalStyle">心理风格</view>
-          <image
+          <img
             class="bottomMap"
             :src="psychologicalStyleImage"
-            mode="widthFix"
+          >
-          ></image>
         </view>
       </template>
     </template>
   </view>
   <view class="">
-    <image
+    <img
       class="bottomMap"
       :src="'https://llyz.oss-cn-beijing.aliyuncs.com/diagnostic-report-h5/bottomMap.png'"
-      mode="widthFix"
+    >
-    ></image>
   </view>
   <view style="padding-left: 20px; margin-top: 56px">
     注：人工智能大模型在计算中可能存在0.5%的误差。
   </view>
   <view class="reportCompleted">
-    <image
+    <img
       class="bottomMap"
       :src="'/static/reportCompleted.png'"
-      mode="widthFix"
+    >
-    ></image>
   </view>
 </template>
 

pages/report/component/FirstStyleType/geneticStyle.vue

@@ -1,12 +1,12 @@
 <script setup>
-import { defineProps, ref, watch } from "vue";
+  import { defineProps, ref, watch } from 'vue';
-import CheckBox from "./Checkbox.vue";
+  import CheckBox from './Checkbox.vue';
-import { styleJson, manStyleJson } from "./json/style";
+  import { styleJson, manStyleJson } from './json/style';
 
-const props = defineProps({
+  const props = defineProps({
     styleType: {
       type: String,
-    default: "",
+      default: '',
     },
     picList: {
       type: Array,
@@ -14,44 +14,43 @@ const props = defineProps({
     },
     gender: {
       type: String,
-    default: "",
+      default: '',
     },
-});
+  });
 
-console.log('geneticStyle  -------------------------------------', props.gender)
+  console.log('geneticStyle  -------------------------------------', props.gender);
 
-const styleTypeDesc = ref("");
+  const styleTypeDesc = ref('');
-const styleTypeJson = ref();
+  const styleTypeJson = ref();
-const showPreview = ref(false);
+  const showPreview = ref(false);
-const currentPreviewImage = ref("");
+  const currentPreviewImage = ref('');
 
-watch(
+  watch(
     () => props.styleType,
     (newVal) => {
-    const json = props.gender === "男" ? manStyleJson : styleJson;
+      const json = props.gender === '男' ? manStyleJson : styleJson;
       styleTypeJson.value = json.map((item) => ({
         ...item,
         checked: item.type === newVal,
       }));
       styleTypeDesc.value = styleTypeJson.value.find(
-      (item) => item.type === props.styleType
+        (item) => item.type === props.styleType,
       )?.value;
     },
-  { deep: true, immediate: true }
+    { deep: true, immediate: true },
-);
+  );
-
-const previewImage = (imageUrl) => {
 
+  const previewImage = (imageUrl) => {
     currentPreviewImage.value = imageUrl;
     showPreview.value = true;
-};
+  };
 
-const closePreview = (e) => {
+  const closePreview = (e) => {
     // 阻止事件冒泡
     e.stopPropagation();
     showPreview.value = false;
-  currentPreviewImage.value = "";
+    currentPreviewImage.value = '';
-};
+  };
 </script>
 
 <template v-if="styleTypeJson">
@@ -70,9 +69,17 @@ const closePreview = (e) => {
       :key="index"
       :src="pic"
       class="pic"
-      mode="aspectFill"
+      mode="widthFix"
       @click="previewImage(pic)"
     ></image>
+
+    <!-- <img
+      v-for="(pic, index) in picList"
+      :key="index"
+      :src="pic"
+      @click="previewImage(pic)"
+      class="pic"
+    /> -->
   </view>
 
   <!-- 图片预览遮罩层 -->
@@ -89,36 +96,36 @@ const closePreview = (e) => {
 </template>
 
 <style scoped>
-.title {
+  .title {
     padding-left: 20px;
     line-height: 21px;
     margin-bottom: 12px;
-}
+  }
 
-.container {
+  .container {
     padding: 0 26px;
     text-align: justify;
-}
+  }
 
-.desc {
+  .desc {
     color: #4e4e4e;
     margin-top: 10px;
-}
+  }
 
-.pic-container {
+  .pic-container {
     display: flex;
     padding: 20px 18px;
-}
+  }
 
-/* .pic {
+  /* .pic {
   width: 100px;
   height: 100px;
   background-color: #eee;
   border-radius: 4px;
 } */
 
-/* 预览遮罩层样式 */
+  /* 预览遮罩层样式 */
-.preview-mask {
+  .preview-mask {
     position: fixed;
     top: 0;
     left: 0;
@@ -129,19 +136,19 @@ const closePreview = (e) => {
     justify-content: center;
     align-items: center;
     z-index: 999;
-}
+  }
 
-.preview-container {
+  .preview-container {
     width: 90%;
     height: 90%;
     display: flex;
     justify-content: center;
     align-items: center;
-}
+  }
 
-.preview-image {
+  .preview-image {
     max-width: 100%;
     max-height: 100%;
     border-radius: 4px;
-}
+  }
 </style>

pages/report/index.vue

@@ -1,5 +1,7 @@
 <template>
-  <view style="overflow-x: hidden; font-size: 0">
+  <view style="overflow-x: hidden; font-size: 0" :style="{
+    paddingBottom: isInPptr ? '250px' : 0
+  }">
 
     <Custom-Header :userFaceInfo="collect" v-if="isInPptr" />
 
@@ -117,11 +119,11 @@
             <!--          个人分格描述报告-->
             <StyleDiagnosticReport :html="customerStyle" />
 
-            <!-- <BottomPic
+            <BottomPic
               :style-type="collect?.type"
               :psychological-style="collect?.psychological_style"
               :gender="collect.sex"
-            /> -->
+            />
           </template>
         </view>
       </view>
@@ -230,7 +232,7 @@
               :key="index"
               :class="index === 1 ? 'avatar-main' : 'avatar-side'"
             >
-              <img :src="item.url" alt="" srcset="" @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">
@@ -246,8 +248,9 @@
                 height: collect?.gender === '男' ? '150px' : '328px',
               }"
               class="face-img-box"
+              style="margin: 0 auto;"
             >
-              <img :src="faceImgUrl" alt="" srcset="" style="object-fit: cover" />
+              <img :src="faceImgUrl" style="object-fit: cover;" />
             </view>
             <rich-text :nodes="praiseTextList[1]"></rich-text>
             <view class="more-hairstyle">
@@ -277,14 +280,12 @@
       <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/` +
                   shegnxiaoImgUrl
                 "
-                alt=""
-                srcset=""
                 @click="
                   previewImage(
                     `https://llyz.oss-cn-beijing.aliyuncs.com/diagnostic-report-h5/chineseZodiac/` +
@@ -297,30 +298,32 @@
             <view class="five-attribute-box">
               <view
                 class="numblock"
-                style="background-color: rgba(193, 156, 45, 1); top: 286px; left: 40px"
+                style="background-color: rgba(193, 156, 45, 1); top: 45.5%; left: 14%"
                 >{{ numToChinese(shengxiaoNumList[0]) }}</view
               >
               <view
                 class="numblock"
-                style="background-color: rgba(62, 166, 123, 1); top: 32px; left: 119px"
+                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: 136px">{{
+              <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: 150px; right: 10px"
+                style="background-color: rgba(195, 52, 55, 1); top: 23%;right: 3%"
                 >{{ numToChinese(shengxiaoNumList[3]) }}</view
               >
               <view
                 class="numblock"
-                style="background-color: rgba(253, 231, 73, 1); top: 293px; right: 70px"
+                style="background-color: rgba(253, 231, 73, 1); top: 45.5%; right: 22%"
                 >{{ numToChinese(shengxiaoNumList[4]) }}</view
               >
+
+
               <view class="five-attribute">
                 <view class="avatorLogo">
-                  <img :src="userFaceInfo?.avatar_img_url" alt="" srcset="" />
+                  <img :src="userFaceInfo?.avatar_img_url" >
                 </view>
                 <view>
                   <img
@@ -345,12 +348,11 @@
   <!-- 图片预览遮罩层 -->
   <view v-if="showPreview" class="preview-mask" @click="closePreview">
     <view class="preview-container" @click.stop>
-      <image
+      <img
         :src="currentPreviewImage"
         class="preview-image"
-        mode="widthFix"
         @click="closePreview"
-      ></image>
+      >
     </view>
   </view>
 
@@ -1191,7 +1193,7 @@
   }
 
   .reference-img-box {
-    height: 195.5px;
+    /* height: 195.5px; */
     margin-top: 20px;
     display: flex;
     justify-content: space-between;
@@ -1200,7 +1202,8 @@
 
   .reference-img-box .reference-img1 {
     width: 100%;
-    height: 195.5px;
+    /* height: 195.5px; */
+    object-fit: scale-down;
   }
 
   .reference-img-box .reference-img2 {
@@ -1226,17 +1229,19 @@
 
   .avatar-warp {
     width: 100%;
-    height: 192px;
+    /* height: 192px; */
+    height: 50vw;
     display: flex;
     align-items: center;
     justify-content: center;
   }
 
   .avatar-main {
-    width: 116px;
+    /* width: 116px; */
-    height: 160px;
+    /* height: 160px; */
-    margin: 0 10px;
+    height: 100%;
-    border-radius: 40px;
+    margin: 0 10rpx;
+    border-radius: 40rpx;
     overflow: hidden;
   }
 
@@ -1247,10 +1252,11 @@
   }
 
   .avatar-side {
-    width: 80px;
+    /* width: 80px;
-    height: 120px;
+    height: 120px; */
+    height: 80%;
     /* background-color: yellow; */
-    border-radius: 40px;
+    border-radius: 40rpx;
     overflow: hidden;
   }
 
@@ -1265,12 +1271,14 @@
   }
 
   .face-img-box {
-    width: 336px;
+    /* width: 336px;
-    height: 338px;
+    width: 50vw; */
+    text-align: center;
+    /* height: 338px; */
   }
 
   .face-img-box img {
-    width: 100%;
+    /* width: 100%; */
     height: 100%;
     /* border-radius: 8px; */
   }
@@ -1294,7 +1302,7 @@
 
   .shengxiao {
     width: 100%;
-    height: 283px;
+    /* height: 283px; */
   }
 
   .shengxiao img {
@@ -1308,8 +1316,8 @@
   }
 
   .numblock {
-    width: 50px;
+    width: 100rpx;
-    height: 50px;
+    height: 100rpx;
     display: flex;
     border-radius: 50%;
     align-items: center;
@@ -1317,12 +1325,14 @@
     position: absolute;
     color: white;
     z-index: 999;
+    font-size: 25rpx;
   }
 
   .five-attribute {
     width: 100%;
     /* height: 597px; */
     position: relative;
+    /* opacity: 0; */
   }
 
   .five-attribute img {
@@ -1337,7 +1347,6 @@
     top: 25%;
     width: 66.5px;
     height: 66.5px;
-    background-color: red;
     border-radius: 50%;
     overflow: hidden;
     border: 3.22px solid rgba(167, 178, 179, 1);
@@ -1345,7 +1354,7 @@
 
   .avatorLogo img {
     width: 100%;
-    height: 100%;
+    /* height: 100%; */
     object-fit: cover;
   }