Merge branch 'fix/goods' into 'master'

fix: UI样式调整

See merge request !138

src/api/detail.huatai.zhongjixian.js

@@ -4,10 +4,13 @@
  * @Description:华太30万轻重疾险
  * @Date: 2020-07-27 15:46:37
  * @LastEditors: gzw
- * @LastEditTime: 2020-08-21 20:00:22
+ * @LastEditTime: 2020-08-30 12:13:29
  */
 
 import goodsBg from "@/assets/images/goods/detail/zhongjixian/bg.png";
+import title from "@/assets/images/goods/detail/zhongjixian/title.png";
+import cmd from "@/assets/images/goods/detail/zhongjixian/cmd.png";
+import logo from "@/assets/images/goods/detail/zhongjixian/logo.png";
 import intro01 from "@/assets/images/goods/detail/zhongjixian/intro-01.png";
 import intro02 from "@/assets/images/goods/detail/zhongjixian/intro-02.png";
 import intro03 from "@/assets/images/goods/detail/zhongjixian/intro-03.png";
@@ -21,6 +24,9 @@ export default {
     type: "huatai",
     company: "华泰财险",
     title: "30万重疾轻症保障",
+    titleImg: title,
+    cmdImg: cmd,
+    logo: logo,
     sub: "100种重症+40种轻症确诊即赔",
     price: [3, "元", "首月"],
     subPrice: [5.6, "元/月起", "次月", "（共11期）"],

src/api/detail.taikang.yiliaobaozhang.js

@@ -4,7 +4,7 @@
  * @Description: 泰康600万医疗保障
  * @Date: 2020-07-27 15:46:37
  * @LastEditors: gzw
- * @LastEditTime: 2020-08-29 11:12:47
+ * @LastEditTime: 2020-08-30 11:26:03
  */
 
 import goodsBg from "@/assets/images/goods/detail/yiliaoxian/bg.png";
@@ -101,7 +101,7 @@ export default {
       title: "保费",
       value: {
         needSlot: true,
-        tpl: "保费与被保人年龄、有无社保有关<br />首月1元，次月3.6元/月起"
+        tpl: "<strong>保费与被保人年龄、有无社保有关<br />首月1元，次月3.6元/月起</strong>"
       }
     }
   ],

src/api/goodsList.mock.js

@@ -2,6 +2,7 @@ import good01 from "@/assets/images/goods/goods-01.png";
 import good02 from "@/assets/images/goods/goods-02.png";
 import good03 from "@/assets/images/goods/goods-03.png";
 import good04 from "@/assets/images/goods/goods-04.png";
+import good05 from "@/assets/images/goods/goods-05.png";
 import medical_closed from "@/assets/images/user/medical_closed@2x.png";
 import casualty_closed from "@/assets/images/user/casualty_closed@2x.png";
 import illness_closed from "@/assets/images/user/illness_closed@2x.png";
@@ -91,7 +92,7 @@ export default [
     id: "BNZJX001",
     itype: "cii",
     scope: [1, 3],
-    img: good02,
+    img: good05,
     url: "",
     title: "百年康惠保(2.0)重大疾病险",
     sub: "终身保障155种重疾，最多赔付6次",

src/components/Collapse.vue

@@ -30,7 +30,7 @@
     <div class="collapse-more" :class="{ active: more }" v-if="moreBtn">
       <a href="javascript:;" @click="showMore">
         <span>查看更多</span>
-        <span>隐藏</span>
+        <span>收起</span>
         <svg-icon icon-class="arrow-down" />
       </a>
     </div>

src/components/Copyright.vue

@@ -47,8 +47,8 @@ export default {
     text-align: center;
     margin-bottom: 10px;
     img {
-      width: 111px;
-      height: 35px;
+      width: 121px;
+      height: 66px;
     }
   }
 }

src/components/GoodList/index.less

@@ -75,10 +75,18 @@
     }
     &-glory {
       position: absolute;
-      top: 0;
+      bottom: 0;
       left: 0;
       z-index: 98;
-      background-color: #fcfe67 !important;
+      width: 72px;
+      height: 20px;
+      line-height: 20px;
+      font-size: 11px !important;
+      text-align: center;
+      color: #666666 !important;
+      border-radius: 0px 0px 14px 14px !important;
+      background-color: rgba(255, 255, 255, 0.6) !important;
+      padding: 0;
     }
     &-info {
       max-height: 72px;

src/components/GoodList/index.vue

@@ -21,10 +21,10 @@
             @click.native="clickItem(it)"
           >
             <cr-col span="7" class="goods-list-item-img">
-              <cr-tag type="warning" shape="round" class="goods-list-item-glory" v-if="it.glory">
-                {{ it.glory }}
-              </cr-tag>
-              <img :src="it.img" />
+              <div class="goods-list-item-glory">
+                {{ it.company }}
+              </div>
+              <img :src="it.img" :style="{ 'box-shadow': `0px 8px 14px 0px ${it.shadowColor}` }" />
             </cr-col>
             <cr-col span="17" class="goods-list-item-info">
               <h5>{{ it.title || "-" }}</h5>
@@ -53,9 +53,9 @@
         @click.native="clickItem(it)"
       >
         <cr-col span="7" class="goods-list-item-img">
-          <cr-tag type="warning" shape="round" class="goods-list-item-glory" v-if="it.glory">
-            {{ it.glory }}
-          </cr-tag>
+          <div class="goods-list-item-glory">
+            {{ it.company }}
+          </div>
           <img :src="it.img" :style="{ 'box-shadow': `0px 8px 14px 0px ${it.shadowColor}` }" />
         </cr-col>
         <cr-col span="17" class="goods-list-item-info">

src/style/index.less

@@ -2,13 +2,6 @@
 @import "var.less";
 @import "mixins.less";
 
-* {
-  -moz-user-select: none; 
-  -webkit-user-select: none; 
-  -ms-user-select: none; 
-  -khtml-user-select: none; 
-  user-select: none;
-}
 html,
 body,
 #app {

src/views/Consultant/Buy/index.less

@@ -49,8 +49,12 @@
       display: block;
       font-size: @font-size-14;
       font-weight: @font-weight-bold;
-      line-height: 18px;
-      color: #000;
+      line-height: 24px;
+      width: 140px;
+      margin: 0 auto;
+      color: @white;
+      background-color: @orange-dark;
+      border-radius: 32px 22px 32px 22px;
     }
     &-sub {
       display: block;
@@ -61,12 +65,14 @@
   }
   &-card {
     box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.07);
-    border-radius: 44px 14px 14px 14px;
+    border-radius: 14px;
     padding: 20px 20px 32px;
     background-color: #fff;
     &-title {
       .sub-text-mixins();
       text-align: center;
+      color: @black;
+      font-size: 14px;
     }
     .cr-button {
       height: @button-large-height + 10;
@@ -171,15 +177,15 @@
       h5 {
         font-size: @font-size-16;
       }
-      p:last-child {
-        font-weight: @font-weight-bold;
+      p {
+        color: #666666;
       }
     }
   }
   &-list {
     background-color: @gray-1;
     border-radius: @border-radius-md;
-    padding: 0 14px;
+    padding: 0 14px 15px;
     &-item {
       margin-bottom: 5px;
     }

src/views/Consultant/Buy/index.vue

@@ -4,7 +4,6 @@
       <img src="../../../assets/logo-top.png" alt="logo" class="cul-hd-logo" />
       <div class="cul-hd-rec">
         <h4 class="cul-hd-rec-title">最高节省50%保费</h4>
-        <small class="cul-hd-rec-sub">帮你量身选保险</small>
       </div>
       <div class="cul-hd-card">
         <div class="cul-hd-card-title">您将获得的服务</div>
@@ -88,6 +87,7 @@ import { mapActions, mapState } from "vuex";
 import { create, goPay, getRemainNum } from "@/api/consultant";
 import Card from "@/components/Card";
 import Collapse from "@/components/Collapse";
+import PayWaitLayer from "@/components/PayWaitLayer";
 import CpsQa from "../../Goods/Detail/modules/CpsQA";
 const SUM = 300;
 export default {
@@ -96,7 +96,8 @@ export default {
     Card,
     CpsQa,
     // eslint-disable-next-line
-    Collapse
+    Collapse,
+    PayWaitLayer
   },
   props: {
     state: {

src/views/Consultant/Exclusive/index.less

 @import "../Buy/index.less";
 .container {
   background-color: @white;
+  overflow: hidden;
+  &::after {
+    content: " ";
+    display: block;
+    height: 80px;
+  }
 }
 .cul-hd {
   background: #fff url("../../../assets/images/consultant/culstor-bg.png") top no-repeat;

src/views/Consultant/Plan/index.less

 @import "../Success/index.less";
 .container {
-  background-color: @white;
+  overflow: hidden;
+  background-color: @background-color;
+  &::after {
+    content: " ";
+    display: block;
+    height: 80px;
+  }
 }
 .cul-hd {
   background: url("../../../assets/images/consultant/linear-bg.png") top no-repeat;

src/views/Goods/Detail/AIDetail.vue

@@ -12,7 +12,7 @@
     <div class="det-body">
       <card title="保险计划" :option="['查看详情']" @option-click="openIframePupop(4)">
         <cr-radio-btn v-model="formData.amountInsured" :radio-data="planOptions" />
-        <compactCellGroup :cell-data="planCellData" :text-bold="true" />
+        <compactCellGroup :cell-data="planCellData" :text-bold="true" :font-size="14" />
         <plan-tip :tip-list="planTipOptions" />
       </card>
       <div id="det_insure">

src/views/Goods/Detail/CIIDetail.vue

@@ -12,7 +12,7 @@
     <div class="det-body">
       <card title="保险计划" :option="['查看详情']" @option-click="openIframePupop(4)">
         <cr-radio-btn v-model="formData.amountInsured" :radio-data="planOptions" />
-        <compactCellGroup :cell-data="planCellData" :text-bold="true" />
+        <compactCellGroup :cell-data="planCellData" :text-bold="true" :font-size="14" />
         <plan-tip :tip-list="planTipOptions" />
       </card>
       <div id="det_insure">

src/views/Goods/Detail/LIDetail.vue

@@ -43,7 +43,7 @@
       </div>
       <div id="det_notice">
         <protocol-read
-          title="理赔须知"
+          title="投保须知"
           :options="[]"
           :text-bold="true"
           v-model="read"

src/views/Goods/Detail/index.less

@@ -10,7 +10,7 @@
   &::after {
     content: " ";
     display: block;
-    height: 60px;
+    height: 80px;
   }
   @{deep} .cr-field--error-message {
     display: none;
@@ -75,9 +75,9 @@
   }
   .cr-button {
     border-radius: @border-radius-sm !important;
-    font-size: @font-size-12;
+    font-size: @font-size-12 + 1;
     height: @button-default-height !important;
-    line-height: @button-default-line-height !important;
+    line-height: @button-default-line-height - 1 !important;
     width: 110px;
   }
 }

src/views/Goods/Detail/modules/DetailFooter.vue

@@ -47,10 +47,10 @@ export default {
   }
   &-logo {
     text-align: center;
-    margin-bottom: 19px;
+    margin-bottom: 10px;
     img {
-      width: 111px;
-      height: 35px;
+      width: 121px;
+      height: 66px;
     }
   }
 }

src/views/Goods/Detail/modules/GoInsureDialog.vue

@@ -5,7 +5,7 @@
     <slot>
       <div class="pay-tip">*不满意可随时退保</div>
       <div class="pay-protocol">
-        <div class="pay-protocol-tip">投保前请阅读</div>
+        <div class="pay-protocol-tip">投保前请阅读并同意</div>
         <div class="pay-protocol-link">
           <a
             href="javascript:;"
@@ -139,7 +139,7 @@ export default {
     margin-bottom: 18px;
     &-tip {
       font-size: @font-size-12;
-      color: @gray-4;
+      color: @black;
       line-height: @line-height-lg;
       margin-bottom: 4px;
     }

src/views/Goods/Detail/modules/NavTab.vue

@@ -57,7 +57,7 @@ export default {
       // 所有锚点元素的 offsetTop
       const offsetTopArr = [];
       navContents.forEach(item => {
-        offsetTopArr.push(item.offsetTop);
+        offsetTopArr.push(item.offsetTop + item.offsetHeight - 60);
       });
       // 获取当前文档流的 scrollTop
       const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
@@ -66,7 +66,7 @@ export default {
       for (let n = 0; n < offsetTopArr.length; n++) {
         // 如果 scrollTop 大于等于第n个元素的 offsetTop 则说明 n-1 的内容已经完全不可见
         // 那么此时导航索引就应该是n了
-        if (scrollTop >= offsetTopArr[n]) {
+        if (scrollTop >= (offsetTopArr[n - 1] || 0)) {
           navIndex = n;
         }
       }
@@ -78,7 +78,7 @@ export default {
     scrollTo(index) {
       const _val = this.navList[index].value;
       // 获取目标的 offsetTop
-      const targetOffsetTop = document.querySelector(`#det_${_val}`).offsetTop;
+      const targetOffsetTop = document.querySelector(`#det_${_val}`).offsetTop - 50;
       document.body.scrollTop = targetOffsetTop;
       document.documentElement.scrollTop = targetOffsetTop;
     }

src/views/Goods/Detail/modules/ProtocolRead.vue

 <template>
   <card :title="title" :option="options" footer="协议" @option-click="openIframe(6)">
-    <compactCellGroup :cell-data="cellData" font-size="14" />
+    <compactCellGroup :cell-data="cellData" :text-bold="true" font-size="14" />
     <slot></slot>
     <template v-slot:footer>
       <div class="insure-form-pact" slot="footer">

src/views/Home/index.vue

@@ -86,12 +86,12 @@
         />
       </a>
     </div>
-    <div class="home-phone">
+    <!-- <div class="home-phone">
       <p>
         客服电话：<a :href="`tel:${tel}`">{{ tel }}</a>
       </p>
       <p>服务时间：{{ serviceHours }}</p>
-    </div>
+    </div> -->
     <copyright :logo="true" />
     <tabbar></tabbar>
   </div>

src/views/Policy/Add/index.less

@@ -7,7 +7,7 @@
   &::after {
     content: " ";
     display: block;
-    height: 70px;
+    height: 80px;
   }
 }
 .policy {