GFRS-454【0326】 建议书优化2.0 --页面样式调整 --提交人：阳华祥

src/views/ebiz/proposal/ProposalInfo.vue

@@ -1,18 +1,18 @@
 <template>
   <div class="proposal-exhibition-container">
     <div class="mb50">
-      <img class="w178 h41" style="margin-top: 13px;margin-left: 14px;" src="@/assets/images/proposal/proposal_logo.png" />
-      <div class="white fw500 fs18" style="margin-top: 37px;margin-left: 17px;">家庭保障计划</div>
+      <img class="w178 h41 div_1" src="@/assets/images/proposal/proposal_logo.png" />
+      <div class="white fw500 fs18 div_2">家庭保障计划</div>
       <van-sticky @scroll="testSticky">
         <div class="pl15 pt15 flex justify-content-fs align-items-c sticky_div" :class="pageShowType.isFixed ? 'divbg_1' : 'divbg_2'">
           <div class="mr9 title_item" v-for="(item, index) in pageShowInfo.insuredDTOs" :key="index" @click="checkInsure(item.insuredId)">
             <div class="relative">
               <div class="bg-white insured_item">
                 <div class="insured_item_1">
-                  <img :src="headPicture[item.relationToAppnt]" />
+                  <img :src="headPicture[item.relationToAppnt + '_' + item.sex]" />
                 </div>
                 <div class="text-center fs12" :class="item.insuredId == pageShowInfo.showInsuredDTO.insuredId ? 'color_3A81F6' : ''">
-                  {{ relationToAppntType[item.relationToAppnt] }}<br />
+                  {{ relationToAppntType[item.relationToAppnt + '_' + item.sex] }}<br />
                   {{ item.name }}
                 </div>
               </div>
@@ -24,7 +24,7 @@
       <!--被保人数据-->
       <div>
         <!-- 险种信息 -->
-        <div class="pt15 bg-white relative" style="border-radius: 5px;margin:14px 15px;">
+        <div class="pt15 bg-white relative div_3">
           <div class="fs14 flex justify-content-a align-items-c">
             <div class="text-center">
               <label class="fs14 color_3A81F6 fw600 lh24">被保人</label><br />
@@ -45,7 +45,7 @@
           </div>
           <div class="fs15 line_title">产品计划</div>
 
-          <div :class="pageShowType.productCheckStatus ? '' : 'hideInfo'" class="fs12" style="position: relative;">
+          <div :class="pageShowType.productCheckStatus ? '' : 'hideInfo'" class="fs12 div_4">
             <div class="risk_head flex text-center line-height table fs12">
               <div class="flex justify-content-c align-items-c pl7 pr7 pt7 pb7">投保险种</div>
               <div class="flex justify-content-c align-items-c pl7 pr7 pt7 pb7 table_border">保额(元）</div>
@@ -97,18 +97,18 @@
               按险种显示
             </div>
           </div>
-          <div :class="pageShowType.riskCheckStatus ? '' : 'hideInfo'" style="margin-top: 15px;" class="text-left">
+          <div :class="pageShowType.riskCheckStatus ? '' : 'hideInfo'" class="text-left div_5">
             <div v-if="pageShowType.dutyShowType == '01'">
-              <div style="border-bottom: 1px solid #f5f5f5;" v-for="(item, index) in pageShowInfo.showInsuredDTO.riskDTOLst" :key="index">
+              <div class="div_6" v-for="(item, index) in pageShowInfo.showInsuredDTO.riskDTOLst" :key="index">
                 <div class="fw600 fs15 color_3A81F6 show_risk_name">
                   {{ item.riskName }}
                 </div>
                 <div v-for="(subItem, subIndex) in item.riskDutySortResult[item.riskCode]" :key="subIndex">
                   <!--<div v-for="(subItem2, subIndex2) in getObjectKeys(subItem)" :key="subIndex2">标题{{ subItem2 }}</div>-->
                   <div v-for="(subItem3, subIndex3) in getObjectValues(subItem)" :key="subIndex3">
-                    <div style="padding-left: 12px;padding-right: 12px;" v-for="(subItem4, subIndex4) in subItem3" :key="subIndex4">
+                    <div class="div_7" v-for="(subItem4, subIndex4) in subItem3" :key="subIndex4">
                       <!--<div class="fs13">{{ subItem4.dutyName }}</div>-->
-                      <div class="fs13 color_666666" style="line-height: 25px;">{{ subItem4.dutyStairExplain }}。</div>
+                      <div class="fs13 color_666666 div_8">{{ subItem4.dutyStairExplain }}。</div>
                     </div>
                   </div>
                 </div>
@@ -144,7 +144,7 @@
             <div class="text-center pl5 pr5 calue_name">《{{ riskItem.riskName }}条款》</div>
             <div class="calue_button" @click="goCaluePDF(riskItem)">查看</div>
           </div>
-          <div style="padding-top: 30px;width: 100%;height: 1px;"></div>
+          <div class="div_9"></div>
         </div>
         <!--产品中利益演示-->
         <div class="pt15 pb17 bg-white text-center relative model_title">
@@ -162,16 +162,15 @@
           <div class="text-center flex justify-content-e align-items-c fs14 check_age">
             <div>当被保人在</div>
             <div class="check_one flex justify-content-fe align-items-c" @click="popupShow = true">
-              {{ pageShowInfo.showInsuredDTO.checkAge }}&emsp;<img style="width: 18px;height: 18px;" src="@/assets/images/proposal/proposal_down.png" />
+              {{ pageShowInfo.showInsuredDTO.checkAge }}&emsp;<img class="img_10" src="@/assets/images/proposal/proposal_down.png" />
             </div>
             <div>岁时</div>
           </div>
           <div class="flex justify-content-s align-items-c mt15 mb20 ml15 mr15">
-            <img class="w20" src="@/assets/images/lessen.png" @click="reduce(pageShowInfo.showInsuredDTO)" />
+            <img class="w20" src="@/assets/images/proposal/proposal_lessen.png" @click="reduce(pageShowInfo.showInsuredDTO)" />
             <van-slider
               class="w220"
               active-color="#9EC2FC"
-              inactive-color="#9EC2FC"
               bar-height="4px"
               :min="1"
               :max="pageShowInfo.showInsuredDTO.policyYear"
@@ -180,7 +179,7 @@
             >
               <div slot="button" class="customer_button"></div>
             </van-slider>
-            <img class="w20" src="@/assets/images/add.png" @click="exhibitionAdd(pageShowInfo.showInsuredDTO)" />
+            <img class="w20" src="@/assets/images/proposal/proposal_add.png" @click="exhibitionAdd(pageShowInfo.showInsuredDTO)" />
           </div>
           <select-radio
             class="mb10"
@@ -191,22 +190,23 @@
             :value.sync="pageShowInfo.showInsuredDTO.tap"
           ></select-radio>
           <div class="fs12 text-center pb15" style="color: #999999;">拖动按钮查看不同年龄的保单利益</div>
-          <div style="padding-top: 10px;width: 100%;height: 1px;"></div>
+          <div class="div_10"></div>
         </div>
         <!-- 温馨提示-->
-        <div class="pt15 pb17 bg-white relative model_title">
+        <div class="pt15 pb17 bg-white model_title">
           <div class="fs16 color_3A81F6 lh24 fw600 text-center">温馨提示</div>
           <div class="line_C8DBFB"></div>
-          <div class="fs13 gray" style="padding: 0 17px;">
+          <div class="fs13 gray div_11">
             本资料仅供客户理解产品条款所用，有关产品的说明、解释、承诺或保证，如与产品条款不一致，均以产品条款为准。
           </div>
-          <div style="padding-top: 20px;width: 100%;height: 1px;"></div>
+          <div class="div_12"></div>
         </div>
       </div>
     </div>
-    <div class="fixed" style="right: 0px;top: 40%;width: 23px;">
-      <img @click="goToCompanyProfile" style="width: 23px;" src="@/assets/images/proposal/proposal_company.png" />
-      <img @click="goPDF" style="width: 23px;margin-top: -2px;" src="@/assets/images/proposal/proposal_pdf.png" />
+    <div class="div_14"></div>
+    <div class="fixed div_13">
+      <img @click="goToCompanyProfile" class="img_11" src="@/assets/images/proposal/proposal_company.png" />
+      <img @click="goPDF" class="img_12" src="@/assets/images/proposal/proposal_pdf.png" />
     </div>
     <div v-show="!isWeixin" class="fixed fs15 flex text-centerjustify-content-c last_fix_div">
       <div class="color_3A81F6 bg-white text-center">转投保</div>
@@ -286,22 +286,28 @@ export default {
         showInsuredDTO: {} //页面显示配保人数据
       },
       headPicture: {
-        '1': require('@/assets/images/proposal/person_br.png'),
-        '2': require('@/assets/images/proposal/person_ez.png'),
-        '3': require('@/assets/images/proposal/person_fq.png'),
-        '4': require('@/assets/images/proposal/person_mq.png'),
-        '5': require('@/assets/images/proposal/person_nr.png'),
-        '6': require('@/assets/images/proposal/person_po.png'),
-        '7': require('@/assets/images/proposal/person_qt.png')
+        '1_1': require('@/assets/images/proposal/person_br.png'),
+        '1_0': require('@/assets/images/proposal/person_br.png'),
+        '4_1': require('@/assets/images/proposal/person_ez.png'),
+        '3_1': require('@/assets/images/proposal/person_fq.png'),
+        '3_0': require('@/assets/images/proposal/person_mq.png'),
+        '4_0': require('@/assets/images/proposal/person_nr.png'),
+        '2_0': require('@/assets/images/proposal/person_po.png'),
+        '2_1': require('@/assets/images/proposal/person_po.png'),
+        '5_1': require('@/assets/images/proposal/person_qt.png'),
+        '5_0': require('@/assets/images/proposal/person_qt.png')
       },
       relationToAppntType: {
-        '1': '本人',
-        '2': '儿子',
-        '3': '父亲',
-        '4': '母亲',
-        '5': '女儿',
-        '6': '配偶',
-        '7': '其他'
+        '1_1': '本人',
+        '1_0': '本人',
+        '4_1': '儿子',
+        '3_1': '父亲',
+        '3_0': '母亲',
+        '4_0': '女儿',
+        '2_1': '配偶',
+        '5_1': '其他',
+        '2_0': '配偶',
+        '5_0': '其他'
       }
     }
   },
@@ -454,7 +460,7 @@ export default {
         let orderDTO = res.content.orderDTO
         this.pageShowInfo.appntDTO = res.content.orderDTO.appntDTO
         this.pageShowInfo.insuredDTOs = res.content.orderDTO.insuredDTOs
-        this.pageShowInfo.showInsuredDTO = this.pageShowInfo.insuredDTOs[1]
+        this.pageShowInfo.showInsuredDTO = this.pageShowInfo.insuredDTOs[0]
         //投保人年龄
         this.pageShowInfo.appntDTO.age = getAge.getAge(this.pageShowInfo.appntDTO.birthdayLabel, new Date())
         let { insuredLabelResult, insuredResult, insuredInfoResult } = res.content.calculusResDTO
@@ -702,7 +708,7 @@ export default {
   }
   width: 100%;
   background: url('../../../assets/images/proposal/proposal_bg.png') no-repeat;
-  background-color: #F7F7F7;
+  background-color: #f7f7f7;
   background-size: 100% auto;
   .line-height {
     line-height: 35px;
@@ -820,7 +826,7 @@ export default {
       height: 24px;
     }
     .img180 {
-      transform:rotate(180deg);
+      transform: rotate(180deg);
     }
   }
   .model_title {
@@ -870,9 +876,9 @@ export default {
     border: 1px solid #3a81f6;
   }
   .customer_button {
-    width: 15px;
-    height: 15px;
-    border-radius: 7.5px;
+    width: 20px;
+    height: 20px;
+    border-radius: 10px;
     background-color: #3a81f6;
   }
   .last_fix_div {
@@ -970,4 +976,71 @@ export default {
     }
   }
 }
+.div_1 {
+  margin-top: 13px;
+  margin-left: 14px;
+}
+.div_2 {
+  margin-top: 37px;
+  margin-left: 17px;
+}
+.div_3 {
+  border-radius: 5px;
+  margin: 14px 15px;
+}
+.div_4 {
+  position: relative;
+}
+.div_5 {
+  margin-top: 15px;
+}
+.div_6 {
+  border-bottom: 1px solid #f5f5f5;
+}
+.div_7 {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+.div_8 {
+  line-height: 25px;
+}
+.div_9 {
+  padding-top: 30px;
+  width: 100%;
+  height: 1px;
+}
+.img_10 {
+  width: 18px;
+  height: 18px;
+}
+.div_10 {
+  padding-top: 10px;
+  width: 100%;
+  height: 1px;
+}
+.div_11 {
+  width: 100%;
+  padding: 10px 8px;
+}
+.div_12 {
+  padding-top: 20px;
+  width: 100%;
+  height: 1px;
+}
+.div_13 {
+  right: 0px;
+  top: 40%;
+  width: 23px;
+}
+.img_11 {
+  width: 23px;
+}
+.img_12 {
+  width: 23px;
+  margin-top: -2px;
+}
+.div_14 {
+  height: 40px;
+  width: 100%;
+}
 </style>