style(report): 调整页面元素属性顺序和样式优化

- 统一HTML属性排序，将v-if指令置于class之前
- 优化图片标签属性顺序，提升代码可读性
- 调整内联样式位置，保持一致的编码风格
- 重新排列组件属性顺序，提高模板整洁度
- 更新CSS样式声明顺序，增强维护性
- 优化条件渲染逻辑的位置安排
- 统一标签闭合格式和属性书写规范

pages/report/index.vue

@@ -14,9 +14,9 @@
       <!-- <Header v-if="!!userFaceInfo" :userFaceInfo="userFaceInfo" /> -->
       <Header v-if="collect" :userFaceInfo="collect" />
 
-      <view class="download" @click="openEmailDialog" v-if="!isInPptr">
+      <view v-if="!isInPptr" class="download" @click="openEmailDialog">
         <view class="download-left">
-          <img src="/static/pdf-icon.png" class="pdf-icon" />
+          <img class="pdf-icon" src="/static/pdf-icon.png" />
         </view>
         <view class="download-center">输入邮件地址获取PDF报告</view>
 
@@ -30,24 +30,24 @@
     </view>
 
     <view
-      style="display: block; background-color: white; position: relative; z-index: 2"
       v-if="isInPptr"
+      style="display: block; background-color: white; position: relative; z-index: 2"
     >
       <img src="/static/nav-1.png" style="width: 100%; display: block" />
       <img src="/static/nav-2.png" style="width: 100%; display: block" />
     </view>
 
-    <view :class="classFixed" style="width: 100%" v-if="!isInPptr">
+    <view v-if="!isInPptr" :class="classFixed" style="width: 100%">
-      <Tabs :tabs="tabsList" :activeTab="activeTab" @update:activeTab="onTabChange"> </Tabs>
+      <Tabs :activeTab="activeTab" :tabs="tabsList" @update:activeTab="onTabChange"> </Tabs>
     </view>
 
     <view
-      class="content"
+      v-if="collect"
       :style="{
         paddingTop: (classFixed === '' ? 0 : 60) + 'px',
         overflowY: 'hidden',
       }"
-      v-if="collect"
+      class="content"
     >
       <view v-if="isInPptr ? true : activeTab === 0">
         <view class="style-type">
@@ -82,28 +82,28 @@
           <SkinColor :skinColor="collect?.complexion" />
 
           <FacialColorLatitude
-            :hue="collect?.hue ?? 0"
             :chroma="collect?.chroma ?? 0"
+            :hue="collect?.hue ?? 0"
             :luminance="collect?.luminance ?? 0"
           />
 
           <!--          轮廓类型-->
           <template v-if="customFigure">
             <SensoryTypes
-              :type="collect.straight_total_score_t"
               :ai-desc="customFigure?.contour?.desc"
+              :type="collect.straight_total_score_t"
             />
 
             <!--          量感类型-->
             <TypeOfMass
-              :type="collect.total_sense_of_quantity_t"
               :ai-desc="customFigure?.quantity?.desc"
+              :type="collect.total_sense_of_quantity_t"
             />
             <!-- <h1>动静类型</h1> -->
             <!--          动静类型-->
             <Movementtype
-              :type="collect.dynamic_static_t"
               :ai-desc="customFigure?.movement?.desc"
+              :type="collect.dynamic_static_t"
             />
             <!--          体型-->
             <BodyType :body-type="collect?.somatotype" :gender="collect?.gender" />
@@ -138,16 +138,16 @@
                 <img :src="pngImgUrl + 'rightRe.png'" alt="" srcset="" />
               </view>
             </view>
-            <swiper class="swiper" @change="chageSwiper" :current="current">
+            <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
-                        style="width: 235px; height: 235px"
                         :src="item.avatarFrameImgUrl"
                         alt=""
                         srcset=""
+                        style="width: 235px; height: 235px"
                       />
                     </view>
                     <view class="avatar">
@@ -171,9 +171,9 @@
             </view>
             <view class="padding-top20">
               <img
-                class="image"
                 :src="colorTypeText.colourDiscImgUrl"
                 alt=""
+                class="image"
                 srcset=""
                 @click="previewImage(colorTypeText.colourDiscImgUrl)"
               />
@@ -184,9 +184,9 @@
 
             <view class="padding-top20">
               <img
-                class="image"
                 :src="colorTypeText.adviseImgUrl"
                 alt=""
+                class="image"
                 srcset=""
                 @click="previewImage(colorTypeText.adviseImgUrl)"
               />
@@ -196,9 +196,9 @@
             </view>
             <view class="padding-top20">
               <img
-                class="image"
                 :src="colorTypeText.fashionNeutralsImgUrl"
                 alt=""
+                class="image"
                 srcset=""
                 @click="previewImage(colorTypeText.fashionNeutralsImgUrl)"
               />
@@ -213,7 +213,7 @@
 
             <view v-if="collect?.gender === '女'" style="padding: 0 20px">
               <view class="reference-img-box">
-                <img class="reference-img1" :src="colorTypeInfo.useReferenceImgUrl" />
+                <img :src="colorTypeInfo.useReferenceImgUrl" class="reference-img1" />
               </view>
             </view>
             <view style="padding-left: 20px"> 注：人工智能大模型在计算中可能存在0.5%的误差。 </view>
@@ -226,9 +226,9 @@
         <view class="style-type">
           <view class="avatar-warp">
             <view
-              :class="index === 1 ? 'avatar-main' : 'avatar-side'"
               v-for="(item, index) in avatarList"
               :key="index"
+              :class="index === 1 ? 'avatar-main' : 'avatar-side'"
             >
               <img :src="item.url" alt="" srcset="" @click="previewImage(item.url)" />
             </view>
@@ -242,12 +242,12 @@
               }"
             > -->
             <view
-              class="face-img-box"
               :style="{
                 height: collect?.gender === '男' ? '150px' : '328px',
               }"
+              class="face-img-box"
             >
-              <img style="object-fit: cover" :src="faceImgUrl" alt="" srcset="" />
+              <img :src="faceImgUrl" alt="" srcset="" style="object-fit: cover" />
             </view>
             <rich-text :nodes="praiseTextList[1]"></rich-text>
             <view class="more-hairstyle">
@@ -256,13 +256,13 @@
               </view>
               <view class="scroll-box">
                 <view
-                  class=""
-                  @click="toHairstyleRoom(item)"
                   v-for="(item, index) in hairStyleList"
                   :key="index"
+                  class=""
                   style="height: 103px; margin-right: 8px"
+                  @click="toHairstyleRoom(item)"
                 >
-                  <img style="width: 76px; height: 100%" :src="item.fileUrl" alt="" srcset="" />
+                  <img :src="item.fileUrl" alt="" srcset="" style="width: 76px; height: 100%" />
                 </view>
               </view>
             </view>
@@ -324,8 +324,8 @@
                 </view>
                 <view>
                   <img
-                    src="https://llshop.zglvling.com/shop/img/png/h5/baseMap.png"
                     alt=""
+                    src="https://llshop.zglvling.com/shop/img/png/h5/baseMap.png"
                     srcset=""
                   />
                 </view>
@@ -1466,7 +1466,7 @@
   }
 </style>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
   .download {
     background-color: #d9d9d9;
     height: 128rpx;
@@ -1477,6 +1477,8 @@
     padding: 0 24rpx;
 
     .download-left {
+      width: 102rpx;
+      height: 102rpx;
       .pdf-icon {
         width: 102rpx;
         height: 102rpx;