feat: 样式兼容pptr

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,57 +1,56 @@
 <script setup>
-import { defineProps, ref, watch } from "vue";
-import CheckBox from "./Checkbox.vue";
-import { styleJson, manStyleJson } from "./json/style";
+  import { defineProps, ref, watch } from 'vue';
+  import CheckBox from './Checkbox.vue';
+  import { styleJson, manStyleJson } from './json/style';
 
-const props = defineProps({
-  styleType: {
-    type: String,
-    default: "",
-  },
-  picList: {
-    type: Array,
-    default: () => [], // 使用函数返回默认值
-  },
-  gender: {
-    type: String,
-    default: "",
-  },
-});
+  const props = defineProps({
+    styleType: {
+      type: String,
+      default: '',
+    },
+    picList: {
+      type: Array,
+      default: () => [], // 使用函数返回默认值
+    },
+    gender: {
+      type: String,
+      default: '',
+    },
+  });
 
-console.log('geneticStyle  -------------------------------------', props.gender)
+  console.log('geneticStyle  -------------------------------------', props.gender);
 
-const styleTypeDesc = ref("");
-const styleTypeJson = ref();
-const showPreview = ref(false);
-const currentPreviewImage = ref("");
+  const styleTypeDesc = ref('');
+  const styleTypeJson = ref();
+  const showPreview = ref(false);
+  const currentPreviewImage = ref('');
 
-watch(
-  () => props.styleType,
-  (newVal) => {
-    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
-    )?.value;
-  },
-  { deep: true, immediate: true }
-);
+  watch(
+    () => props.styleType,
+    (newVal) => {
+      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,
+      )?.value;
+    },
+    { deep: true, immediate: true },
+  );
 
-const previewImage = (imageUrl) => {
+  const previewImage = (imageUrl) => {
+    currentPreviewImage.value = imageUrl;
+    showPreview.value = true;
+  };
 
-  currentPreviewImage.value = imageUrl;
-  showPreview.value = true;
-};
-
-const closePreview = (e) => {
-  // 阻止事件冒泡
-  e.stopPropagation();
-  showPreview.value = false;
-  currentPreviewImage.value = "";
-};
+  const closePreview = (e) => {
+    // 阻止事件冒泡
+    e.stopPropagation();
+    showPreview.value = false;
+    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>
 
   <!-- 图片预览遮罩层 -->
@@ -82,66 +89,66 @@ const closePreview = (e) => {
         :src="currentPreviewImage"
         class="preview-image"
         mode="widthFix"
-		@click="closePreview"
+        @click="closePreview"
       ></image>
     </view>
   </view>
 </template>
 
 <style scoped>
-.title {
-  padding-left: 20px;
-  line-height: 21px;
-  margin-bottom: 12px;
-}
+  .title {
+    padding-left: 20px;
+    line-height: 21px;
+    margin-bottom: 12px;
+  }
 
-.container {
-  padding: 0 26px;
-  text-align: justify;
-}
+  .container {
+    padding: 0 26px;
+    text-align: justify;
+  }
 
-.desc {
-  color: #4e4e4e;
-  margin-top: 10px;
-}
+  .desc {
+    color: #4e4e4e;
+    margin-top: 10px;
+  }
 
-.pic-container {
-  display: flex;
-  padding: 20px 18px;
-}
+  .pic-container {
+    display: flex;
+    padding: 20px 18px;
+  }
 
-/* .pic {
+  /* .pic {
   width: 100px;
   height: 100px;
   background-color: #eee;
   border-radius: 4px;
 } */
 
-/* 预览遮罩层样式 */
-.preview-mask {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.8);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 999;
-}
+  /* 预览遮罩层样式 */
+  .preview-mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.8);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 999;
+  }
 
-.preview-container {
-  width: 90%;
-  height: 90%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
+  .preview-container {
+    width: 90%;
+    height: 90%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 
-.preview-image {
-  max-width: 100%;
-  max-height: 100%;
-  border-radius: 4px;
-}
-</style>
+  .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;
-    height: 160px;
-    margin: 0 10px;
-    border-radius: 40px;
+    /* width: 116px; */
+    /* height: 160px; */
+    height: 100%;
+    margin: 0 10rpx;
+    border-radius: 40rpx;
     overflow: hidden;
   }
 
@@ -1247,10 +1252,11 @@
   }
 
   .avatar-side {
-    width: 80px;
-    height: 120px;
+    /* width: 80px;
+    height: 120px; */
+    height: 80%;
     /* background-color: yellow; */
-    border-radius: 40px;
+    border-radius: 40rpx;
     overflow: hidden;
   }
 
@@ -1265,12 +1271,14 @@
   }
 
   .face-img-box {
-    width: 336px;
-    height: 338px;
+    /* width: 336px;
+    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;
-    height: 50px;
+    width: 100rpx;
+    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;
   }