fix: 产品详情UI调整

src/api/detail.huagui.shouxian.js

@@ -4,10 +4,13 @@
  * @Description: 华贵大麦2020定期寿险
  * @Date: 2020-07-27 15:46:37
  * @LastEditors: gzw
- * @LastEditTime: 2020-08-24 20:13:25
+ * @LastEditTime: 2020-08-26 18:57:16
  */
 
 import goodsBg from "@/assets/images/goods/detail/shouxian/bg.png";
+import title from "@/assets/images/goods/detail/shouxian/title.png";
+import cmd from "@/assets/images/goods/detail/shouxian/cmd.png";
+import logo from "@/assets/images/goods/detail/shouxian/logo.png";
 import intro01 from "@/assets/images/goods/detail/shouxian/intro-01.png";
 import intro02 from "@/assets/images/goods/detail/shouxian/intro-02.png";
 import intro03 from "@/assets/images/goods/detail/shouxian/intro-03.png";
@@ -20,7 +23,10 @@ export default {
     type: "huagui",
     company: "",
     title: "大麦2020定期寿险",
+    titleImg: title,
     price: [155, "元/年起"],
+    logo: logo,
+    cmdImg: cmd,
     subPrice: [155, "元/年", "剩余", "(共9年)"],
     insuredNum: 0,
     stamp: false

src/api/detail.taikang.yiliaobaozhang.js

@@ -4,15 +4,19 @@
  * @Description: 泰康600万医疗保障
  * @Date: 2020-07-27 15:46:37
  * @LastEditors: gzw
- * @LastEditTime: 2020-08-24 21:00:06
+ * @LastEditTime: 2020-08-26 18:20:51
  */
 
 import goodsBg from "@/assets/images/goods/detail/yiliaoxian/bg.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";
-import intro04 from "@/assets/images/goods/detail/zhongjixian/intro-04.png";
-
+import title from "@/assets/images/goods/detail/yiliaoxian/title.png";
+import cmd from "@/assets/images/goods/detail/yiliaoxian/cmd.png";
+import logo from "@/assets/images/goods/detail/yiliaoxian/logo.png";
+import intro01 from "@/assets/images/goods/detail/yiliaoxian/intro-01.png";
+import intro02 from "@/assets/images/goods/detail/yiliaoxian/intro-02.png";
+import intro03 from "@/assets/images/goods/detail/yiliaoxian/intro-03.png";
+import intro04 from "@/assets/images/goods/detail/yiliaoxian/intro-04.png";
+import intro05 from "@/assets/images/goods/detail/yiliaoxian/intro-05.png";
+import intro06 from "@/assets/images/goods/detail/yiliaoxian/intro-06.png";
 export default {
   type: "mi",
   productNo: "TKYLX001",
@@ -20,19 +24,27 @@ export default {
     bgSrc: goodsBg,
     type: "taikang",
     company: "泰康在线",
-    title: "1000万医疗保障",
-    sub: "责任内100%报销住院医疗费",
+    title: "600万医疗保障",
+    titleImg: title,
+    sub: "报销看病费用 治疗和用药都保障",
+    cmdImg: cmd,
+    logo: logo,
     price: [1, "元", "首月"],
     subPrice: [3.6, "元/月起", "次月", "（共11期）"],
     insuredNum: 0,
     stamp: true
   },
-  introImg: [intro01, intro02, intro03, intro04],
+  introImg: [intro01, intro02, intro03, intro04, intro05, intro06],
   companyInfo: [
-    { content: "承保公司：泰康财产保险有限公司", offset: false },
-    { content: "经营范围：短期健康保险和意外伤害保险", offset: false },
-    { content: "备案名称：华泰财险重大疾病保险条款", offset: false },
-    { content: "备案编号：C00015431912018061501152；", offset: false }
+    { content: "承保公司：泰康在线财产保险股份有限公司", offset: false },
+    { content: "备案名称：泰康在线财产保险股份有限公司住院医疗费用保险（C款)", offset: false },
+    { content: "泰康在线财产保险股份有限公司附加特定疾病保险（A款）)", offset: true },
+    { content: "泰康在线财产保险股份有限公司附加质子重离子医疗保险)", offset: true },
+    { content: "泰康在线财产保险股份有限公司附加恶性肿瘤院外特定药品费用医疗保险条款)", offset: true },
+    { content: "备案编号：C00019932512020071000092", offset: false },
+    { content: "C00019932522020081804172", offset: true },
+    { content: "C00019932522019010901732", offset: true },
+    { content: "C00019932522019043002571", offset: true }
   ],
   navBarOptions: [
     { label: "我要投保", value: "insure" },
@@ -58,9 +70,6 @@ export default {
     { title: "质子重离子医疗保险金", value: "600万" },
     { title: "恶性肿瘤院外特定药品费用保险金", value: "600万" },
     { title: "", value: "", divider: true },
-    { title: "发生以下治疗费用，获额外400万年度累计限额的赔付", value: "", inline: true },
-    { title: "恶性肿瘤特定治疗保险金/康复医疗保险金", value: "400万" },
-    { title: "", value: "", divider: true },
     { title: "发生以下指定费用，赔付不超过对应限额", value: "", inline: true },
     { title: "指定检查费用保险金", value: "5000元" },
     { title: "特定疾病保险金", value: "5000元" },
@@ -69,7 +78,7 @@ export default {
     { title: "押金垫付", value: "住院费用垫付服务" },
     { title: "就医绿色通道", value: "全国1233家知名三甲医院" }
   ],
-  planTipOptions: ["不限社保", "报销自费药", "额外400万特定赔付"],
+  planTipOptions: ["不限社保", "报销自费药", "最高可报600万"],
   insuredOptions: [
     { label: "本人", value: "1" },
     { label: "父母", value: "2" },
@@ -128,24 +137,24 @@ export default {
     { title: "平台服务协议", id: 3 }
   ],
   caseInfo: {
-    name: "吴先生",
-    info: "46岁 北京 有社保",
+    name: "蔡女士",
+    info: "28岁  成都   无社保",
     list: [
       {
         title: "投保",
-        event: "2018年6月29日，吴先生为自己投保了一份万家保·重疾轻症险，保额20万，并续保。"
+        event: "2020年2月6日，蔡女士为自己投保了一份万家保·百万医疗险，无社保版。"
       },
       {
-        title: "投保",
-        event: "2019年9月16日，吴先生意外烫伤双下肢皮肤，达到浅Ⅲ°烧伤，烧伤面积达20"
+        title: "出险",
+        event: "2020年6月18日，蔡女士不幸确诊了乳腺癌。住院过程中，蔡女士还使用了靶向药、进口器材等设备，总计花费了50.23万元。"
       },
       {
-        title: "轻症理赔",
-        event: "2019年9月17日，吴先生后向我司报案，经核实符合该保险中轻症“特定面积Ⅲ度烧伤”的诊断赔付标准，给予4万保险金赔付。"
+        title: "报案",
+        event: "蔡女士出院后，拨打泰康保险公司热线400-079-5522完成了报案。"
       },
       {
-        title: "重疾理赔",
-        event: "2020年1月3日，吴先生突发胸痛咯血，后诊断为右肺非小细胞性肺癌，经我司核实后确认为保险责任，一次性给予20万元的重大疾病保险金。"
+        title: "理赔",
+        event: "泰康在线在收到蔡女士的理赔材料后，经审核保险事故属实，保险公司按照保单约定比例100%赔付，共计50.23万元，合同继续有效。"
       }
     ]
   },
@@ -183,6 +192,10 @@ export default {
     {
       title: "提交资料",
       desc: `关注「泰康在线保险服务」微信公众号，验证身份信息后，填写被保险人出险信息，并完成上传理赔材料。保险公司审核通过后，通知客户寄送纸质理赔原件。`
+    },
+    {
+      title: "理赔付款",
+      desc: `自保险公司成功收取理赔原件后，5个工作日内赔付。`
     }
   ],
   rateInfo: [

src/api/detail.zhongan.yiwai.js

@@ -4,10 +4,12 @@
  * @Description:众安50万意外险
  * @Date: 2020-07-27 15:46:37
  * @LastEditors: gzw
- * @LastEditTime: 2020-08-25 18:25:51
+ * @LastEditTime: 2020-08-26 18:43:54
  */
-
 import goodsBg from "@/assets/images/goods/detail/yiwaixian/bg.png";
+import title from "@/assets/images/goods/detail/yiwaixian/title.png";
+import cmd from "@/assets/images/goods/detail/yiwaixian/cmd.png";
+import logo from "@/assets/images/goods/detail/yiwaixian/logo.png";
 import intro01 from "@/assets/images/goods/detail/yiwaixian/intro-01.png";
 import intro02 from "@/assets/images/goods/detail/yiwaixian/intro-02.png";
 import intro03 from "@/assets/images/goods/detail/yiwaixian/intro-03.png";
@@ -21,8 +23,11 @@ export default {
     type: "zhongan",
     company: "众安保险",
     title: "100万意外保障",
+    titleImg: title,
     sub: "最高可赔400万 包含猝死责任",
-    price: [53, "元/年起"],
+    cmdImg: cmd,
+    logo: logo,
+    price: [53, "元", "", "/年起"],
     insuredNum: 0,
     stamp: true
   },

src/components/Card.vue

@@ -92,6 +92,9 @@ export default {
   &-option {
     display: flex;
     align-items: center;
+    a {
+      font-size: 14px;
+    }
   }
   &-body {
     margin-bottom: 20px;

src/components/Collapse.vue

@@ -132,7 +132,7 @@ export default {
         box-shadow: 0px 6px 25px 0px rgba(255, 200, 66, 0.2);
       }
       &-txt {
-        margin-left: 10px;
+        margin-left: 14px;
         font-weight: @font-weight-bold;
         font-size: @font-size-14;
         line-height: @line-height-lg;
@@ -158,7 +158,7 @@ export default {
       &-icon {
         font-style: normal;
         font-weight: @font-weight-bold;
-        width: 15px;
+        width: 18px;
       }
       &-txt {
         margin-left: 8px;

src/components/CompactCellGroup.vue

@@ -16,6 +16,7 @@
         'compact-cell_divider': item.divider,
         'compact-cell_inline': item.inline
       }"
+      :style="{ fontSize: fontSize + 'px' }"
       @click="cellClick(item)"
     >
       <template v-if="item.title.needSlot" slot="title">
@@ -52,6 +53,10 @@ export default {
     noVal: {
       type: Boolean,
       default: false
+    },
+    fontSize: {
+      type: [Number, String],
+      default: 12
     }
   },
   methods: {

src/components/GoodList/index.vue

@@ -105,7 +105,7 @@ export default {
       if (!item.allow) {
         return;
       }
-      if (item.id === "" && !item.url) {
+      if (item.id === "BNZJX001" && !item.url) {
         this.setIsShowLogin();
         return;
       }

src/router/index.js

@@ -30,7 +30,7 @@ const router = new VueRouter({
 router.beforeEach((to, from, next) => {
   const urlParams = parseSearch(window.location.href);
   setTitle(to.meta.title, to.path, to.query);
-  if (isXyqb) getAuthInfo(urlParams.token);
+  if (isXyqb) getAuthInfo(urlParams.vccToken);
   if (isWeixinBrower) getWxOpenId(urlParams.code);
   next();
 });

src/service/localStorage.js

@@ -8,6 +8,7 @@ export default {
     }
   },
   set(key, value) {
+    if (value === undefined) return;
     let toString = Object.prototype.toString;
     if (toString.call(value) === "[object Array]" || toString.call(value) === "[object Object]") {
       value = JSON.stringify(value);

src/views/Consultant/Question/index.vue

@@ -260,6 +260,7 @@ export default {
         "5万以下",
         "5万",
         "10万",
+        "15万",
         "20万",
         "25万",
         "30万",

src/views/Goods/Detail/AIDetail.vue

@@ -154,7 +154,9 @@ export default {
       immediate: true,
       handler(val) {
         const { price } = val;
-        this.goodActionInfo = { title: price };
+        const _price = JSON.parse(JSON.stringify(price));
+        _price[1] = "元/年起";
+        this.goodActionInfo = { title: _price };
         this.goodBuyModalInfo = [{ title: `每年保费`, value: `${price[0]}元` }];
       }
     },
@@ -369,9 +371,12 @@ export default {
         const res = await trail(_param);
         if (res) {
           price[0] = res.downPayPrice;
-          price[1] = "元/年";
+          price[1] = "元";
+          price[3] = "/年";
+          const _price = JSON.parse(JSON.stringify(price));
+          _price[1] = "元/年";
           this.goodActionInfo = {
-            title: price
+            title: _price
           };
           this.goodBuyModalInfo = [{ title: `每年保费`, value: `${price[0]}元` }];
           noticeCellInfo[amountInsured][2].value = `${price[0] + price[1]}`;

src/views/Goods/Detail/MIDetail.vue

@@ -4,7 +4,7 @@
     <detail-header :det="headerInfo" />
     <div class="det-body">
       <card title="保险计划" :option="['查看详情']" @option-click="openIframePupop(4)">
-        <compactCellGroup :cell-data="planCellInfo" :text-bold="true" />
+        <compactCellGroup :cell-data="planCellInfo" :text-bold="true" font-size="14" />
         <plan-tip :tip-list="planTipOptions" />
       </card>
       <div id="det_insure">
@@ -36,7 +36,7 @@
       </card>
       <cps-case :case-data="caseInfo" />
       <div id="det_process">
-        <cps-process :process-data="processDetail" @click="openIframePupop(5)" />
+        <cps-process :process-data="processDetail" :more="false" />
       </div>
       <cps-qa :qa-data="qaInfo" />
     </div>
@@ -49,7 +49,6 @@
       :content="pupopData.content"
       :url="pupopData.url"
     >
-      <cps-process-detail v-if="currentPupopIndex === 5" :process-data="processDetail" />
       <cps-rate v-if="currentPupopIndex === 6" :rate-data="rateInfo" :is-mi="true" />
     </popup-with-iframe>
     <go-insure-dialog
@@ -80,7 +79,6 @@ import CpsProcess from "./modules/CpsProcess";
 import CpsQa from "./modules/CpsQA";
 import PopupWithIframe from "@/components/PopupWithIframe";
 import GoInsureDialog from "./modules/GoInsureDialog";
-import CpsProcessDetail from "./modules/CpsProcessDetail";
 import CpsRate from "./modules/CpsRate";
 import PlanTip from "./modules/PlanTip";
 import InsurePersonForm from "./modules/InsurePersonForm";
@@ -117,7 +115,6 @@ export default {
     PopupWithIframe,
     GoodAction,
     GoInsureDialog,
-    CpsProcessDetail,
     CpsRate,
     PlanTip,
     InsurePersonForm,

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

@@ -10,7 +10,9 @@
         readonly
         :rules="[{ required: true, message: 'required' }]"
         @click.native="$emit('select-date')"
-      />
+      >
+        <svg-icon icon-class="triangle-right" slot="button" />
+      </cr-field>
       <cr-field
         name="amountInsured"
         label="保障额度"
@@ -136,7 +138,7 @@ export default {
 .policy-form {
   padding: 0;
   @{deep} .cr-cell {
-    padding: 8px 0 !important;
+    padding: 7.5px 0 !important;
     &__title {
       width: 75px !important;
     }
@@ -148,4 +150,9 @@ export default {
     }
   }
 }
+.svg-icon {
+  height: 16px;
+  width: 16px;
+  margin-top: 4px;
+}
 </style>

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

@@ -8,6 +8,7 @@
       <div class="cps-demo-body">
         <div class="cps-demo-person">
           <span>{{ props.caseData.name }}</span>
+          <i>|</i>
           <span>{{ props.caseData.info }}</span>
         </div>
         <div class="cps-demo-list">
@@ -80,8 +81,12 @@ export default {
     line-height: @line-height-lg;
     display: flex;
     align-items: center;
-    justify-content: space-between;
     margin-bottom: 29px;
+    i {
+      font-style: normal;
+      padding: 0 10px;
+      vertical-align: -2px;
+    }
   }
   &-list {
     &-item {
@@ -91,7 +96,7 @@ export default {
       &-title {
         font-size: @font-size-16;
         font-weight: @font-weight-bold;
-        color: @black;
+        color: @orange-dark;
         width: 34px;
         line-height: @line-height-md;
       }
@@ -113,14 +118,14 @@ export default {
         &::before {
           height: 12px;
           width: 12px;
-          background-color: #d8d8d8;
+          background-color: @orange-light;
           border-radius: @border-radius-max;
           left: 18px;
         }
         &::after {
           width: 0;
           height: calc(100% + 20px);
-          border-left: 1px solid #d8d8d8;
+          border-left: 1px solid @orange-light;
           left: 24px;
         }
       }

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

@@ -2,7 +2,7 @@
   <card
     title="理赔流程"
     :option="props.more ? ['了解更多理赔信息'] : []"
-    @option-click="listeners.click"
+    @option-click="props.more ? listeners.click : () => {}"
   >
     <div class="cps-process-list">
       <div class="cps-process-list-item" v-for="(item, index) in props.processData" :key="index">
@@ -43,7 +43,7 @@ export default {
       content: " ";
       display: block;
       position: absolute;
-      top: 50px;
+      top: 35px;
       left: 13px;
       width: 0;
       height: calc(100% - 98px);
@@ -52,7 +52,6 @@ export default {
     }
     &-item {
       display: flex;
-      align-items: center;
       padding-bottom: 16px;
       &-title {
         font-size: @font-size-12;
@@ -60,7 +59,7 @@ export default {
         color: @black;
         width: 19px;
         height: 19px;
-        margin: -10px 20px 0 4px;
+        margin: 30px 20px 0 4px;
         background-color: @orange-light;
         border-radius: @border-radius-max;
         line-height: @line-height-md;
@@ -76,7 +75,7 @@ export default {
         padding: @padding-sm;
         position: relative;
         h6 {
-          color: @black;
+          color: @orange-dark;
           font-weight: @font-weight-bold;
           font-size: @font-size-14;
           line-height: @line-height-sm + 2;

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

@@ -4,16 +4,19 @@
     :class="props.det.type"
     :style="{ backgroundImage: 'url(' + props.det.bgSrc + ')' }"
   >
-    <img
-      src="@/assets/images/goods/detail/shouxian/logo.png"
-      alt="logo"
-      class="det-hd-logo"
-      v-if="props.det.type === 'huagui'"
-    />
+    <img :src="props.det.logo" alt="logo" class="det-hd-logo" v-if="props.det.logo" />
     <img src="@/assets/logo-top.png" alt="logo" class="det-hd-logo" v-else />
     <div class="det-hd-recommend">
+      <img
+        :src="props.det.cmdImg"
+        alt="智能产品官-小果 为您优选推荐"
+        class="det-hd-recommend-img"
+        v-if="props.det.cmdImg"
+      />
+      <template v-else>
         <h2 class="det-hd-recommend-h2">智能产品官-小果</h2>
         <h1 class="det-hd-recommend-h1">为您优选推荐</h1>
+      </template>
       <cr-tag v-if="props.det.company">
         由
         <strong>{{ props.det.company }}</strong>
@@ -22,22 +25,31 @@
       <div class="tag-placeholder" v-else></div>
     </div>
     <div class="det-hd-insured" :class="{ stamp: props.det.stamp }">
-      <h1 class="det-hd-insured-title">{{ props.det.title }}</h1>
+      <img
+        :src="props.det.titleImg"
+        :alt="props.det.title"
+        class="det-hd-insured-title-img"
+        v-if="props.det.titleImg"
+      />
+      <h1 class="det-hd-insured-title" v-else>{{ props.det.title }}</h1>
       <slot>
         <small class="det-hd-insured-sub">
           {{ props.det.sub }}
         </small>
         <h5 class="det-hd-insured-price" v-if="props.det.price">
           <!-- eslint-disable-next-line prettier/prettier -->
-          {{ props.det.price[2] || "" }}<strong>{{ props.det.price[0] || "" }}</strong>{{ props.det.price[1] || "" }}
+          {{ props.det.price[2] || "" }}<strong>{{ props.det.price[0] || "" }}{{ props.det.price[1] || "" }}</strong>{{ (props.det.type === "zhongan" ? props.det.price[3] : "") || "" }}
           <small v-if="props.det.subPrice && props.det.subPrice[0]">
             <!-- eslint-disable-next-line prettier/prettier -->
             {{ props.det.subPrice[2] || "" }}{{ props.det.subPrice[0] || "" }}{{ props.det.subPrice[1] || "" }}
           </small>
         </h5>
-        <cr-button type="warning" block native-type="submit">
-          立即开启保障
-        </cr-button>
+        <button
+          class="cr-button cr-button--warning cr-button--normal cr-button--square cr-button--block insure-btn"
+          type="submit"
+        >
+          <img src="@/assets/images/goods/detail/get-insure.png" alt="立即投保" />
+        </button>
         <div class="det-hd-insured-people">
           已有
           <em>{{ props.det.insuredNum }}</em>
@@ -86,13 +98,18 @@ export default {
   &-logo {
     position: relative;
     left: -16px;
-    width: 100px;
     height: 32px;
     margin: 16px 0 12px;
   }
   &-recommend {
     color: @white;
     padding: 0 8px;
+    &-img {
+      width: 163px;
+      height: 51px;
+      display: block;
+      margin: 8px 0 4px;
+    }
     &-h2 {
       font-size: @font-size-20;
       font-weight: @font-weight-bold;
@@ -133,9 +150,16 @@ export default {
       color: @black;
       line-height: @line-height-lg * 2;
       margin-top: 1px;
+      &-img {
+        height: 49px;
+        display: block;
+        margin: 0 auto;
+      }
     }
     &-sub {
       .sub-text-mixins();
+      color: @black;
+      font-size: @font-size-16;
       margin-top: 8px;
     }
     &-price {
@@ -153,20 +177,29 @@ export default {
       small {
         margin-left: 5px;
         .sub-text-mixins();
+        color: @black;
       }
     }
-    .cr-button {
+    .insure-btn {
       margin-top: 30px;
       height: @button-large-height;
       line-height: @button-large-line-height;
       font-size: @font-size-16;
+      border-radius: @border-radius-max !important;
       box-shadow: 1px 12px 14px 0px rgba(255, 200, 66, 0.4);
+      img {
+        width: 98px;
+        height: 27px;
+        display: block;
+        margin: 10px auto;
+      }
     }
     &-people {
       .sub-text-mixins();
       margin-top: 18px;
-      em {
       color: @black;
+      em {
+        color: @orange-dark;
         font-style: normal;
         margin: 0 3px;
       }
@@ -176,6 +209,7 @@ export default {
 .tag-placeholder {
   height: 30px;
 }
+
 .taikang {
   .det-hd {
     &-recommend {
@@ -199,12 +233,4 @@ export default {
     }
   }
 }
-.huagui {
-  .det-hd {
-    &-logo {
-      width: 173px;
-      height: 32px;
-    }
-  }
-}
 </style>

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

@@ -528,20 +528,26 @@ export default {
   }
   &-item_nobg {
     background-color: transparent !important;
-    padding: 10px 0;
+    padding: 10px 0 !important;
     overflow: initial;
     align-items: baseline !important;
     margin-bottom: 0 !important;
+    flex-wrap: wrap;
     .radio-btn {
       margin-bottom: 0;
     }
     @{deep} .cr-cell {
       &__title {
-        width: 31%;
+        width: 100%;
         flex: none;
+        margin-bottom: 16px;
+        font-size: @font-size-16;
+        span {
+          font-weight: @font-weight-bold;
+        }
       }
       &__value {
-        width: 69%;
+        width: 100%;
         flex: none;
         overflow: initial;
       }

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

 <template>
   <card :title="title" :option="options" footer="协议" @option-click="openIframe(6)">
-    <compactCellGroup :cell-data="cellData" />
+    <compactCellGroup :cell-data="cellData" font-size="14" />
     <slot></slot>
     <template v-slot:footer>
       <div class="insure-form-pact" slot="footer">
@@ -103,9 +103,6 @@ export default {
 @import "../../../../style/var.less";
 .insure-form {
   &-pact {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
     padding: 14px 0;
     .cr-cell {
       padding: 0;
@@ -115,22 +112,23 @@ export default {
       }
     }
     @{deep} .cr-checkbox__label {
-      font-size: @font-size-11;
-      color: @gray-4;
+      font-size: @font-size-14;
+      color: #999;
       margin-left: 5px;
     }
     &-link {
-      margin-top: -3.5px;
+      margin-top: 3px;
       display: flex;
       padding-top: 3px;
+      padding-left: 17px;
       align-items: center;
       a {
-        font-size: @font-size-11;
+        font-size: @font-size-12 + 1;
         &::after {
           display: inline-block;
           content: " ";
           width: 0;
-          height: 12px;
+          height: 13px;
           border-right: 1px @blue solid;
           margin: 0 3px 0 1px;
           vertical-align: -2px;

vue.config.js

@@ -46,7 +46,8 @@ module.exports = {
         return {
           ...options,
           transformAssetUrls: {
-            "cr-image": "src"
+            "cr-image": "src",
+            "cr-button": "icon"
           }
         };
       });