开门红需求-电投提示：UI样式调整 --提交人：阳华祥

src/assets/sass/utils.scss

@@ -44,6 +44,10 @@
   font-size: $font-size-xll;
 }
 
+.fw400 {
+  font-weight: 400 !important;
+}
+
 .fw500 {
   font-weight: 500 !important;
 }

src/components/ebiz/sale/IndexBar.vue

@@ -1,17 +1,28 @@
 <template>
-  <div class="ml6 mr6 pt5 pb5">
+  <div class="own_content">
     <ul class="index-bar">
       <li @click="changePage(Number(index) + 1)" v-for="(item, index) in pageTitle" :key="index" :class="item.tabClass" :id="item.tabClass">
-        <div :class="[{ activeline: item.tabClass }, { 'bg-gray': !item.tabClass }, 'w15', 'h2', 'mr8']" v-if="index != 0"></div>
+        <!-- 选中 -->
-        <span>{{ item.pageNo }}.{{ item.pageItem }}</span>
+        <div v-if="item.tabClass" class="flex justify-content-fs align-items-c">
-        <div :class="[{ activeline: item.tabClass }, { 'bg-gray': !item.tabClass }, 'w15', 'h2', 'ml8']" v-if="index != 7"></div>
+          <div class="flex flex-direction-colunm align-items-c">
-        <van-icon name="arrow" size="12" v-if="index != 7" />
+            <van-image :src="item.imgCheckedUrl" class="image_head" />
+            <span class="fs12 mt12">{{ item.pageItem }}</span>
+          </div>
+          <van-image :src="doneUrl" v-if="index !== 7" class="image_done" />
+        </div>
+        <div v-if="!item.tabClass" class="flex justify-content-fs align-items-c">
+          <div class="flex flex-direction-colunm align-items-c">
+            <van-image :src="item.imgNoCheckedUrl" class="image_head" />
+            <span class="fs12 mt12" style="color: #999999">{{ item.pageItem }}</span>
+          </div>
+          <van-image :src="doneNurl" v-if="index !== 7" class="image_done" />
+        </div>
       </li>
     </ul>
   </div>
 </template>
 <script>
-import { Icon } from 'vant'
+import { Icon, Image as VanImage } from 'vant'
 export default {
   name: 'IndexBar',
   props: {
@@ -34,19 +45,78 @@ export default {
     }
   },
   components: {
-    [Icon.name]: Icon
+    [Icon.name]: Icon,
+    [VanImage.name]: VanImage
   },
   data() {
     return {
+      doneUrl: this.$assetsUrl + 'images/kmh/done.png',
+      doneNurl: this.$assetsUrl + 'images/kmh/done_n.png',
       pageTitle: [
-        { pageNo: 1, pageItem: '投保人信息', urlStr: '/sale/insuredInfo', tabClass: '' },
+        {
-        { pageNo: 2, pageItem: '被保险人信息', urlStr: '/sale/insuredPerson', tabClass: '' },
+          pageNo: 1,
-        { pageNo: 3, pageItem: '选择产品', urlStr: '/common/selectedProduct', tabClass: '' },
+          pageItem: '投保人信息',
-        { pageNo: 4, pageItem: '受益人信息', urlStr: '/sale/beneficiary', tabClass: '' },
+          urlStr: '/sale/insuredInfo',
-        { pageNo: 5, pageItem: '告知信息', urlStr: '/sale/notifyingMessage', tabClass: '' },
+          tabClass: '',
-        { pageNo: 6, pageItem: '账户信息', urlStr: '/sale/accountInformation', tabClass: '' },
+          imgCheckedUrl: this.$assetsUrl + 'images/kmh/tbrxx.png',
-        { pageNo: 7, pageItem: '附件上传', urlStr: '/sale/attachmentManagement', tabClass: '' },
+          imgNoCheckedUrl: this.$assetsUrl + 'images/kmh/tbrxx_n.png'
-        { pageNo: 8, pageItem: '签名确认', urlStr: '/sale/signatureConfirmation', tabClass: '' }
+        },
+        {
+          pageNo: 2,
+          pageItem: '被保险人信息',
+          urlStr: '/sale/insuredPerson',
+          tabClass: '',
+          imgCheckedUrl: this.$assetsUrl + 'images/kmh/bbrxx.png',
+          imgNoCheckedUrl: this.$assetsUrl + 'images/kmh/bbrxx_n.png'
+        },
+        {
+          pageNo: 3,
+          pageItem: '选择产品',
+          urlStr: '/common/selectedProduct',
+          tabClass: '',
+          imgCheckedUrl: this.$assetsUrl + 'images/kmh/xzcp.png',
+          imgNoCheckedUrl: this.$assetsUrl + 'images/kmh/xzcp_n.png'
+        },
+        {
+          pageNo: 4,
+          pageItem: '受益人信息',
+          urlStr: '/sale/beneficiary',
+          tabClass: '',
+          imgCheckedUrl: this.$assetsUrl + 'images/kmh/syrxx.png',
+          imgNoCheckedUrl: this.$assetsUrl + 'images/kmh/syrxx_n.png'
+        },
+        {
+          pageNo: 5,
+          pageItem: '告知信息',
+          urlStr: '/sale/notifyingMessage',
+          tabClass: '',
+          imgCheckedUrl: this.$assetsUrl + 'images/kmh/gzxx.png',
+          imgNoCheckedUrl: this.$assetsUrl + 'images/kmh/gzxx_n.png'
+        },
+        {
+          pageNo: 6,
+          pageItem: '账户信息',
+          urlStr: '/sale/accountInformation',
+          tabClass: '',
+          imgCheckedUrl: this.$assetsUrl + 'images/kmh/zhxx.png',
+          imgNoCheckedUrl: this.$assetsUrl + 'images/kmh/zhxx_n.png'
+        },
+        {
+          pageNo: 7,
+          pageItem: '附件上传',
+          urlStr: '/sale/attachmentManagement',
+          tabClass: '',
+          imgCheckedUrl: this.$assetsUrl + 'images/kmh/fjsc.png',
+          imgNoCheckedUrl: this.$assetsUrl + 'images/kmh/fjsc_n.png'
+        },
+        {
+          pageNo: 8,
+          pageItem: '签名确认',
+          urlStr: '/sale/signatureConfirmation',
+          tabClass: '',
+          imgCheckedUrl: this.$assetsUrl + 'images/kmh/qmqr.png',
+          imgNoCheckedUrl: this.$assetsUrl + 'images/kmh/qmqr_n.png'
+        }
       ],
       //localStorage.salePageFlag:控制导航是否可以直接跳转页面  1-投保人信息 2-被保人信息 3-选择产品 4-受益人信息 5-告知信息 6-账户信息 7-附件上传 8-签名确认
       salePageFlag: Number(localStorage.salePageFlag)
@@ -147,8 +217,7 @@ export default {
   overflow-x: auto;
   overflow-y: hidden;
   white-space: nowrap;
-  font-size: 15px;
+  font-size: 12px;
-  margin-top: 8px;
 }
 
 .index-bar li {
@@ -164,7 +233,7 @@ li {
 }
 .index-bar span,
 .index-bar van-icon {
-  align-items: flex-center;
+  align-items: center;
 }
 .active {
   color: #e9332e;
@@ -172,4 +241,20 @@ li {
 .activeline {
   background: #e9332e;
 }
+.image_head {
+  width: 16px;
+  height: 16px;
+}
+.image_done {
+  width: 8px;
+  height: 14px;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+.own_content {
+  padding-top: 19px;
+  padding-bottom: 15px;
+  margin-left: 10px;
+  margin-right: 10px;
+}
 </style>

src/views/ebiz/common/SelectedProduct.vue

@@ -33,25 +33,32 @@
       </div>
     </div>
 
-    <van-dialog v-model="active_show" :show-confirm-button="false">
+    <van-dialog v-model="active_show" :show-confirm-button="false" class="dialog_class">
-      <div class="pl20 pr20 mt20">
+      <div class="flex justify-content-fe">
-        <p class="fs14 black">请选择：</p>
+        <van-image :src="this.$assetsUrl + 'images/kmh/cancel.png'" class="fr mt15 mr15 icon_image" @click="active_show = false"></van-image>
-        <van-radio-group v-model="active_radio">
+      </div>
-          <van-radio name="1" icon-size="14px" class="radio_class">
+      <div class="pl20 pr20 mt30">
-            <div class="flex justify-content-fs align-items-c pl10 fs18">
+        <p class="fs16 black fw400">请选择：</p>
-              <van-image round width="1.5rem" height="1.5rem" src="https://img.yzcdn.cn/vant/cat.jpeg" />
+        <van-radio-group v-model="active_radio" style="align-items: center;">
-              <div class="fs18 fwb pl10">开门红产品</div>
+          <van-radio name="1" class="radio_class ml60">
+            <template #icon="props">
+              <img class="img-icon radio_icon_image" :src="props.checked ? checkedUrl : noCheckedUrl" />
+            </template>
+            <div class="flex justify-content-fs align-items-c pl5">
+              <div class="fs16 fw400">开门红产品</div>
             </div>
           </van-radio>
-          <van-radio name="2" icon-size="14px" class="radio_class">
+          <van-radio name="2" class="radio_class ml60">
-            <div class="flex justify-content-fs align-items-c pl10 fs18">
+            <template #icon="props">
-              <van-image round width="1.5rem" height="1.5rem" src="https://img.yzcdn.cn/vant/cat.jpeg" />
+              <img class="img-icon radio_icon_image" :src="props.checked ? checkedUrl : noCheckedUrl" />
-              <div class="fs18 fwb pl10">普通产品</div>
+            </template>
+            <div class="flex justify-content-fs align-items-c pl5">
+              <div class="fs16 fw400">普通产品</div>
             </div>
           </van-radio>
         </van-radio-group>
-        <div class="flex justify-content-c bg-white mt20 mb20 align-items-c">
+        <div class="flex justify-content-c bg-white mt20 mb40 align-items-c">
-          <van-button type="danger" size="normal" class="dialog-comfirm-button" @click="comfirmCheckActive" v-no-more-click="1000">确认</van-button>
+          <van-button type="danger" class="dialog-comfirm-button" @click="comfirmCheckActive" v-no-more-click="1000">确认</van-button>
         </div>
       </div>
     </van-dialog>
@@ -89,7 +96,9 @@ export default {
       isFrom: localStorage.isFrom,
       salePageFlag: '3',
       active_show: false,
-      active_radio: ''
+      active_radio: '1',
+      checkedUrl: this.$assetsUrl + 'images/kmh/kmhCheked.png',
+      noCheckedUrl: this.$assetsUrl + 'images/kmh/kmhNoCheked.png'
     }
   },
   components: {
@@ -459,6 +468,7 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+@import '@/assets/sass/variables.scss';
 .select-product-container {
   .border-dotted {
     border: 1px dashed #999;
@@ -477,12 +487,27 @@ export default {
     font-size: 15px;
   }
   .radio_class {
-    height: 80px;
+    height: 60px;
-    border-bottom: 1px solid #8e8d8d;
   }
   .dialog-comfirm-button {
-    width: 50%;
+    width: 167px;
+    height: 36px;
+    line-height: 36px;
     border-radius: 6px;
+    text-align: center;
+    vertical-align: center;
+  }
+  .icon_image {
+    width: 12px;
+    height: 12px;
+  }
+  .radio_icon_image {
+    width: 16px;
+    height: 16px;
+    padding-top: 3px;
+  }
+  .dialog_class {
+    width: 290px;
   }
 }
 </style>