"feat: 详情页基础element"

jsconfig.json

 {
   "compilerOptions": {
     "target": "es2017",
-    "allowSyntheticDefaultImports": false,
+    "allowSyntheticDefaultImports": true,
     "baseUrl": "./",
     "paths": {
       "@/*": ["src/*"]

src/api/goodsList.mock.js

@@ -8,6 +8,7 @@ export default [
     sub: "报销医药费，有无社保均可保",
     children: [
       {
+        id: 1,
         img: good01,
         title: "万家保·百万医疗险",
         sub: "产品优势",
@@ -23,6 +24,7 @@ export default [
     sub: "责任内疾病确诊即赔",
     children: [
       {
+        id: 1,
         img: good02,
         title: "万家保·重疾轻症险",
         sub: "100种重疾+40种轻症",
@@ -32,6 +34,7 @@ export default [
         allow: true
       },
       {
+        id: 1,
         img: good02,
         title: "百年康惠保2.0重大疾病险",
         sub: "产品优势",
@@ -47,6 +50,7 @@ export default [
     sub: "意外保障无等待期",
     children: [
       {
+        id: 1,
         img: good03,
         title: "万家保·综合意外险",
         sub: "产品优势",
@@ -62,6 +66,7 @@ export default [
     sub: "避免因家庭顶梁柱身故，导致的房贷、子女教育等生活压力",
     children: [
       {
+        id: 1,
         img: good04,
         title: "华贵大麦2020定期寿险",
         sub: "产品优势",

src/assets/icons/svg/assistant.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
+    <title>Group 19</title>
+    <desc>Created with Sketch.</desc>
+    <g id="产品" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="医疗险-" transform="translate(-17.000000, -3440.000000)">
+            <g id="Group-21" transform="translate(0.000000, 3433.000000)">
+                <g id="Group-19" transform="translate(17.000000, 7.000000)">
+                    <g id="Group-18">
+                        <rect id="Rectangle" fill-rule="nonzero" x="0" y="0" width="28" height="28"></rect>
+                        <g id="Group-17" transform="translate(4.000000, 4.000000)">
+                            <g id="客服">
+                                <g id="Group">
+                                    <path d="M19,14.497429 L17.4685139,14.497429 L17.4685139,9.66495264 C17.4685139,5.19620298 13.8950542,1.55886333 9.50478589,1.55886333 C5.11451763,1.55886333 1.54105793,5.19620298 1.54105793,9.66495264 L1.54105793,14.497429 L0.00957178841,14.497429 L0.00957178841,9.66495264 C0.00957178841,4.31286333 4.24669144,0 9.50478589,0 C14.7628804,0 19,4.31286333 19,9.66495264 L19,14.497429 Z" id="Path" fill="#000000"></path>
+                                    <path d="M3.42988287,17.9788823 L2.91938829,17.9788823 C1.28580227,17.9788823 0.00956460957,16.6278666 0.00956460957,15.0170419 L0.00956460957,12.9905196 C0.00956460957,11.3277313 1.3368534,10.0286793 2.91938829,10.0286793 L3.42988287,10.0286793 C5.06346889,10.0286793 6.33970655,11.379695 6.33970655,12.9905196 L6.33970655,15.0170419 C6.33970655,16.6798303 5.01241776,17.9788823 3.42988287,17.9788823 Z M2.91938829,11.5355886 C2.15364521,11.5355886 1.54105076,12.159134 1.54105076,12.9385656 L1.54105076,14.965088 C1.54105076,15.7445196 2.15364521,16.368065 2.91938829,16.368065 L3.42988287,16.368065 C4.19562594,16.368065 4.8082204,15.7445196 4.8082204,14.965088 L4.8082204,12.9905269 C4.8082204,12.2110953 4.19562594,11.5875499 3.42988287,11.5875499 L2.91938829,11.5875499 L2.91938829,11.5355886 Z M16.0901691,17.9788823 L15.6307233,17.9788823 C13.9971373,17.9788823 12.7208996,16.6278666 12.7208996,15.0170419 L12.7208996,12.9905196 C12.7208996,11.3277313 14.0481884,10.0286793 15.6307233,10.0286793 L16.0901691,10.0286793 C17.7237552,10.0286793 18.9999928,11.379695 18.9999928,12.9905196 L18.9999928,15.0170419 C18.9999928,16.6798303 17.672704,17.9788823 16.0901691,17.9788823 Z M15.5796746,11.5355886 C14.8139315,11.5355886 14.201337,12.159134 14.201337,12.9385656 L14.201337,14.965088 C14.201337,15.7445196 14.8139315,16.368065 15.5796746,16.368065 L16.0391204,16.368065 C16.8048635,16.368065 17.4174579,15.7445196 17.4174579,14.965088 L17.4174579,12.9905269 C17.4174579,12.2110953 16.8048635,11.5875499 16.0391204,11.5875499 L15.5796746,11.5875499 L15.5796746,11.5355886 Z" id="Shape" fill="#000000" fill-rule="nonzero"></path>
+                                    <path d="M14.8139458,8.26197564 C14.5076486,8.26197564 14.2013514,8.05412728 14.0992515,7.74235535 C13.5887569,6.23545332 12.2614681,5.55994668 12.2614681,5.55994668 C11.9041222,5.35209832 11.7509736,4.88444005 11.9551709,4.52070365 C12.159369,4.15696969 12.6188141,4.00108336 12.9761625,4.20893099 C13.0272119,4.26089302 14.8139458,5.19621028 15.5286474,7.27470365 C15.681796,7.69040135 15.4775979,8.10609662 15.0692015,8.26198295 L14.813953,8.26198295 L14.8139458,8.26197564 Z" id="Path" fill="#FFC842" fill-rule="nonzero"></path>
+                                    <path d="M18.3282801,12.2678018 L18.3282801,16.7592603 C18.3282801,18.9683993 16.5374191,20.7592603 14.3282801,20.7592603 L11,20.7592603" id="Path-3" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill-rule="nonzero"></path>
+                                    <rect id="Rectangle" fill="#FFC842" fill-rule="nonzero" x="6" y="19" width="7" height="3" rx="1"></rect>
+                                </g>
+                            </g>
+                            <path d="" id="Path-37" stroke="#979797" fill-rule="nonzero"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/components/GoodList/index.less

+@import "../../style/var.less";
+@import "../../style/mixins.less";
+.goods-list {
+  background-color: @white;
+  padding: 18px 20px;
+  .cell-title-mixin();
+  &-head {
+    margin-bottom: 15px;
+    .svg-icon {
+      width: 16px;
+      height: 16px;
+      vertical-align: -0.3em;
+    }
+  }
+  // &-children {}
+  &-item {
+    margin: 16px 0 20px;
+    border-radius: 14px;
+    overflow: hidden;
+    &.not-allow {
+      position: relative;
+      pointer-events: none;
+      &::before,
+      &::after {
+        display: block;
+        position: absolute;
+        top: 0px;
+        left: 0;
+        z-index: 99;
+        text-align: center;
+        width: 100%;
+        font-weight: bold;
+      }
+      &::before {
+        content: "即将开放，敬请期待";
+        background: rgba(227, 226, 226, 0.9);
+        font-size: @font-size-16;
+        color: @black;
+        height: calc(100% - 20px);
+        line-height: 20px;
+        padding-top: 20px;
+      }
+      &::after {
+        content: "COMING SOON";
+        font-size: @font-size-12;
+        font-family: "DIN-Bold";
+        line-height: 10px;
+        padding-top: 44px;
+        height: calc(100% - 44px);
+        letter-spacing: 6px;
+        left: 3px;
+        color: @white;
+      }
+    }
+    &-img {
+      img {
+        display: block;
+        position: relative;
+        z-index: 90;
+        width: 72px;
+        height: 72px;
+      }
+    }
+    &-glory {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 98;
+      background-color: #fcfe67 !important;
+    }
+    &-info {
+      max-height: 72px;
+      h5 {
+        margin-bottom: 3px;
+      }
+      small {
+        line-height: 20px;
+      }
+    }
+    &-price {
+      display: flex;
+      align-items: baseline;
+      margin-top: 4px;
+      &-amount {
+        font-size: @font-size-20;
+        line-height: @line-height-md;
+        color: @red;
+        font-weight: 600;
+        margin-right: 3px;
+      }
+      &-unit {
+        font-size: @font-size-12;
+        color: @gray-4;
+        line-height: @line-height-sm;
+      }
+    }
+  }
+}
\ No newline at end of file

src/components/GoodList.vue → src/components/GoodList/index.vue

@@ -12,10 +12,19 @@
           </slot>
         </div>
         <div class="goods-list-children" v-if="item.children.length > 0" :key="'children' + index">
-          <cr-row type="flex" class="goods-list-item" v-for="(it, idx) in item.children" :key="idx">
+          <cr-row
+            type="flex"
+            class="goods-list-item"
+            :class="{ 'not-allow': !it.allow }"
+            v-for="(it, idx) in item.children"
+            :key="idx"
+            @click.native="clickItem(it)"
+          >
             <cr-col span="7" class="goods-list-item-img">
-              <!-- <cr-tag type="primary">标签</cr-tag> -->
-              <cr-image width="72px" height="72px" :src="it.img" />
+              <cr-tag type="warning" shape="round" class="goods-list-item-glory" v-if="it.glory">
+                {{ it.glory }}
+              </cr-tag>
+              <img :src="it.img" />
             </cr-col>
             <cr-col span="17" class="goods-list-item-info">
               <h5>{{ it.title || "-" }}</h5>
@@ -31,9 +40,19 @@
       </template>
     </div>
     <div v-else>
-      <cr-row type="flex" class="goods-list-item" v-for="(it, idx) in list" :key="idx">
+      <cr-row
+        type="flex"
+        class="goods-list-item"
+        :class="{ 'not-allow': !it.allow }"
+        v-for="(it, idx) in list"
+        :key="idx"
+        @click.native="clickItem(it)"
+      >
         <cr-col span="7" class="goods-list-item-img">
-          <cr-image width="72px" height="72px" :src="it.img" />
+          <cr-tag type="warning" shape="round" class="goods-list-item-glory" v-if="it.glory">
+            {{ it.glory }}
+          </cr-tag>
+          <img :src="it.img" />
         </cr-col>
         <cr-col span="17" class="goods-list-item-info">
           <h5>{{ it.title || "-" }}</h5>
@@ -61,47 +80,17 @@ export default {
   computed: {
     // TODO
     hasChildren: function() {
-      return this.list[0].children && this.list[0].children.length > 0;
+      return this.list[0] && this.list[0].children && this.list[0].children.length > 0;
     }
+  },
+  methods: {
+    clickItem(item) {
+      if (!item.allow) {
+        return;
       }
-};
-</script>
-<style lang="less" scoped>
-@import "../style/var.less";
-@import "../style/mixins.less";
-.goods-list {
-  background-color: @white;
-  padding: 18px 20px;
-  .cell-title-mixin();
-  &-head {
-    margin-bottom: 15px;
-    /deep/ .svg-icon {
-      width: 16px;
-      height: 16px;
-      vertical-align: -0.3em;
-    }
-  }
-  // &-children {}
-  &-item {
-    margin: 16px 0 20px;
-    // &-img {}
-    &-price {
-      display: flex;
-      align-items: baseline;
-      margin-top: 4px;
-      &-amount {
-        font-size: @font-size-20;
-        line-height: @line-height-md;
-        color: @red;
-        font-weight: 600;
-        margin-right: 3px;
-      }
-      &-unit {
-        font-size: @font-size-12;
-        color: @gray-4;
-        line-height: @line-height-sm;
-      }
+      this.$router.push({ path: "/goods/detail", query: { id: item.id } });
     }
   }
-}
-</style>
+};
+</script>
+<style lang="less" src="./index.less" scoped></style>

src/components/SvgIcon.vue

@@ -32,7 +32,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style>
 .svg-icon {
   width: 1em;
   height: 1em;

src/router/index.js

@@ -20,8 +20,13 @@ const routes = [
   },
   {
     path: "/goods",
-    name: "goods",
-    component: () => import(/* webpackChunkName: "about" */ "../views/Goods/index.vue")
+    name: "Goods",
+    component: () => import(/* webpackChunkName: "goods" */ "../views/Goods/index.vue")
+  },
+  {
+    path: "/goods/detail",
+    name: "GoodsDetail",
+    component: () => import(/* webpackChunkName: "goodsDetail" */ "../views/Goods/detail.vue")
   }
 ];
 

src/service/cherry-ui.js

@@ -7,8 +7,8 @@ const {
   Button,
   Image,
   // Icon,
-  // Cell,
-  // CellGroup,
+  Cell,
+  CellGroup,
   Row,
   Col,
   // Popup,
@@ -22,11 +22,11 @@ const {
   // Area,
   // Dialog,
   // Field,
-  // Checkbox,
+  Checkbox,
   // CheckboxGroup,
-  // Radio,
-  // RadioGroup,
-  // Switch,
+  Radio,
+  RadioGroup,
+  Switch,
   Tag,
   // PullRefresh,
   // CardList,
@@ -48,9 +48,15 @@ const {
 
 Vue.use(Button);
 Vue.use(Image);
+Vue.use(Cell);
+Vue.use(CellGroup);
 Vue.use(Row);
 Vue.use(Col);
 Vue.use(Divider);
+Vue.use(Checkbox);
+Vue.use(Radio);
+Vue.use(RadioGroup);
+Vue.use(Switch);
 Vue.use(Tag);
 Vue.use(Tabbar);
 Vue.use(TabbarItem);

src/style/index.less

 @import "reset.less";
 @import "var.less";
+@import "mixins.less";
 html,body {
   height: 100%;
 }
@@ -7,6 +8,10 @@ body {
   font-family: @font-family;
   background-color: @background-color;
 }
+a {
+  color: @blue;
+  font-size: @font-size-12;
+}
 .cr-button {
   padding: 0 @padding-sm !important;
   &__text {
@@ -17,8 +22,53 @@ body {
     background-color: @button-warning-background-color !important;
     border: 1px solid @button-warning-border-color !important;
     border-radius: @border-radius-md !important;
-    height: @button-default-height !important;
-    line-height: @button-default-line-height !important;
-    font-size: @button-default-font-size !important;
+  }
+}
+
+.cr-tag {
+  border-radius: 8px 2px 8px 2px !important;
+  background-color: @tag-default-background-color !important;
+  color: @tag-default-color !important;
+  padding: 1px 6px 2px !important;
+  font-size: 10px !important;
+  font-weight: bold;
+  &--round {
+    border-radius: 1em !important;
+  }
+  &_light {
+    background-color: @tag-default-light-background-color !important;
+    color: @tag-default-light-color !important;
+  }
+  &--primary {
+    background-color: @tag-primary-background-color !important;
+    color: @tag-primary-color !important;
+    &_light {
+      background-color: @tag-primary-light-background-color !important;
+      color: @tag-primary-light-color !important;
+    }
+  }
+  &--success {
+    background-color: @tag-success-background-color !important;
+    color: @tag-success-color !important;
+    &_light {
+      background-color: @tag-success-light-background-color !important;
+      color: @tag-success-light-color !important;
+    }
+  }
+  &--danger {
+    background-color: @tag-danger-background-color !important;
+    color: @tag-danger-color !important;
+    &_light {
+      background-color: @tag-danger-light-background-color !important;
+      color: @tag-danger-light-color !important;
+    }
+  }
+  &--warning {
+    background-color: @tag-warning-background-color !important;
+    color: @tag-warning-color !important;
+    &_light {
+      background-color: @tag-warning-light-background-color !important;
+      color: @tag-warning-light-color !important;
+    }
   }
 }

src/style/var.less

@@ -59,9 +59,10 @@
 @font-size-16: 16px;
 @font-size-18: 18px;
 @font-size-20: 20px;
+@font-size-26: 26px;
 @font-size-28: 28px;
 @font-size-32: 32px;
-@font-weight-bold: 500;
+@font-weight-bold: 700;
 @font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
 @base-font-family: @font-family;
 
@@ -72,8 +73,8 @@
 @button-small-min-width: 48px;
 @button-small-line-height: 28px;
 
-@button-large-height: 52px;
-@button-large-line-height: 52px;
+@button-large-height: 50px;
+@button-large-line-height: 50px;
 
 @button-default-height: 36px;
 @button-default-line-height: 36px;

src/views/Goods/detail.less

+@import "../../style/var.less";
+.sub-text-mixins {
+  font-size: @font-size-12;
+  color: @gray-4;
+  line-height: @line-height-sm;
+}
+.container {
+  background-color: @background-color;
+}
+.det-hd {
+  background: url("../../assets/goods//detail/bg-zhongjixian.png") top no-repeat;
+  background-size: contain;
+  padding: 10px 16px;
+  &-logo {
+    position: relative;
+    left: -16px;
+    width: 100px;
+    height: 32px;
+    margin: 16px 0 12px;
+  }
+  &-recommend {
+    color: @white;
+    padding: 0 8px;
+    &-h2 {
+      font-size: @font-size-20;
+      font-weight: @font-weight-bold;
+      line-height: 28px;
+    }
+    &-h1 {
+      font-size: @font-size-26;
+      font-weight: @font-weight-bold;
+      line-height: 37px;
+      margin-top: -3px;
+    }
+    .cr-tag {
+      background: linear-gradient(
+        180deg,
+        rgba(219, 99, 19, 1) 0%,
+        rgba(192, 83, 10, 1) 100%
+      );
+      font-size: 12px !important;
+      font-weight: normal !important;
+      strong {
+        font-weight: bold;
+        margin: 0 3px;
+      }
+    }
+  }
+  &-insured {
+    margin-top: 39px;
+    background: @white;
+    box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.07);
+    border-radius: @border-radius-md;
+    padding: 30px 32px;
+    text-align: center;
+    background: url(../../assets/goods/detail/stamp.png) no-repeat;
+    background-color: #fff;
+    background-position: bottom right;
+    background-size: 19%;
+    &-title {
+      font-size: 34px;
+      font-weight: @font-weight-bold;
+      color: @black;
+      line-height: @line-height-lg * 2;
+      margin-top: 1px;
+    }
+    &-sub {
+      .sub-text-mixins();
+      margin-top: 8px;
+    }
+    &-price {
+      font-size: @font-size-16;
+      font-weight: @font-weight-bold;
+      color: @black;
+      line-height: @line-height-sm;
+      margin-top: 24px;
+      strong {
+        color: @orange-dark;
+        font-size: @font-size-32;
+        font-weight: @font-weight-bold;
+        margin: 0 3px;
+      }
+      small {
+        margin-left: 5px;
+        .sub-text-mixins();
+      }
+    }
+    .cr-button {
+      margin-top: 30px;
+      height: @button-large-height;
+      line-height: @button-large-line-height;
+      font-size: @font-size-16;
+      box-shadow: 1px 12px 14px 0px rgba(255, 200, 66, 0.4);
+    }
+    &-people {
+      .sub-text-mixins();
+      margin-top: 18px;
+      em {
+        color: @black;
+        font-style: normal;
+        margin: 0 3px;
+      }
+    }
+  }
+}
+.card {
+  padding: 20px;
+  background-color: @white;
+  &-header {
+    padding: 4px 0 16px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  &-title {
+    font-size: @font-size-18;
+    font-weight: @font-weight-bold;
+    color: @black;
+    line-height: @line-height-sm + 2;
+  }
+  &-option {
+    display: flex;
+    align-items: center;
+  }
+  &-body {
+    margin-bottom: 20px;
+  }
+}
+.radio-btn {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  .cr-radio {
+    margin-right: 0;
+    width: 30%;
+    background: @white;
+    box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.07);
+    border-radius: @border-radius-sm;
+    height: 36px;
+    transition: all 0.1s linear;
+    &.checked {
+      background-color: @orange-light;
+      /deep/ .cr-radio__label {
+        font-weight: @font-weight-bold;
+      }
+    }
+    line-height: 36px;
+    /deep/ &__icon {
+      display: none;
+    }
+    /deep/ &__label {
+      font-size: @font-size-14;
+      color: @black;
+      width: 100%;
+      text-align: center;
+      margin-left: 0;
+    }
+  }
+}
+.compact-cell {
+  &-group {
+    background: @gray-1;
+    border-radius: @border-radius-md;
+    padding: @padding-md;
+  }
+  background-color: @gray-1;
+  font-size: @font-size-12;
+  color: @black;
+  &::after {
+    display: none;
+  }
+  .cr-cell {
+    
+  }
+}

src/views/Goods/detail.vue

+<template>
+  <div class="container">
+    <div class="det-hd">
+      <img src="../../assets/logo-top.png" alt="logo" class="det-hd-logo" />
+      <div class="det-hd-recommend">
+        <h2 class="det-hd-recommend-h2">智能产品官-小果</h2>
+        <h1 class="det-hd-recommend-h1">为您优选推荐</h1>
+        <cr-tag>由<strong>华泰财险</strong>承保</cr-tag>
+      </div>
+      <div class="det-hd-insured">
+        <h1 class="det-hd-insured-title">30万重疾轻症保障</h1>
+        <small class="det-hd-insured-sub">100种重症+40种轻症确诊即赔</small>
+        <h5 class="det-hd-insured-price">首月<strong>3</strong>元<small>次月5.6元/月起</small></h5>
+        <cr-button type="warning" block>立即开启保障</cr-button>
+        <div class="det-hd-insured-people">已有<em>31492</em>位用户投保</div>
+      </div>
+    </div>
+    <div class="det-body">
+      <div class="card">
+        <div class="card-header">
+          <h5 class="card-title">保险计划</h5>
+          <div class="card-option">
+            <a href="javascript:;">查看详情</a>
+          </div>
+        </div>
+        <div class="card-body">
+          <cr-radio-group v-model="planValue" class="radio-btn">
+            <cr-radio name="3" :class="{ checked: planValue == '3' }">30万</cr-radio>
+            <cr-radio name="2" :class="{ checked: planValue == '2' }">20万</cr-radio>
+            <cr-radio name="1" :class="{ checked: planValue == '1' }">10万</cr-radio>
+          </cr-radio-group>
+          <cr-cell-group class="compact-cell-group">
+            <cr-cell title="100种重大疾病医疗保险金" value="30万" class="compact-cell" />
+            <cr-cell title="20种轻症保险金" value="6万" class="compact-cell" />
+            <cr-cell title="投保年龄" value="30天~60周岁" class="compact-cell" />
+            <cr-cell title="保险期限" value="1年" class="compact-cell" />
+          </cr-cell-group>
+        </div>
+        <div class="card-header">
+          <h5 class="card-title">请填写投保信息</h5>
+        </div>
+        <div class="card-body">请填写投保信息</div>
+        <div class="card-header">
+          <h5 class="card-title">为谁投保</h5>
+        </div>
+        <div class="card-body">为谁投保</div>
+        <div class="card-header">
+          <h5 class="card-title">开通次年自动续保<cr-tag type="warning">小果建议您开通</cr-tag></h5>
+          <div class="card-option">
+            <span>已开通</span>
+            <cr-switch v-model="checked" active-color="#FFC842" />
+          </div>
+        </div>
+        <div class="card-body">为谁投保</div>
+        <div class="card-header">
+          <h5 class="card-title">投保须知</h5>
+          <div class="card-option">
+            <a href="javascript:;">查看完整费率表</a>
+          </div>
+        </div>
+        <div class="card-body">查看完整费率表</div>
+        <div class="card-footer">
+          <cr-checkbox>投保前请阅读</cr-checkbox>
+          <div>
+            <a href="">保险条款</a>|<a href="">健康告知</a>|<a href="">投保须知与声明</a>|<a href=""
+              >服务协议</a
+            >
+          </div>
+        </div>
+      </div>
+      <div class="card">
+        <div class="card-body">保险计划</div>
+      </div>
+    </div>
+    <div class="det-footer"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "GoodsDetail",
+  data() {
+    return {
+      planValue: "3"
+    };
+  }
+};
+</script>
+<style lang="less" src="./detail.less" scoped></style>

src/views/Goods/index.vue

@@ -15,7 +15,7 @@
 
 <script>
 import AiTestTip from "./modules/AiTestTip";
-import GoodList from "@/components/GoodList";
+import GoodList from "@/components/GoodList/index";
 
 import goodsList from "@/api/goodsList.mock";
 
@@ -28,8 +28,11 @@ export default {
   data() {
     return {
       active: 0,
-      goodsList
+      goodsList: []
     };
+  },
+  mounted() {
+    this.goodsList = goodsList;
   }
 };
 </script>

src/views/Goods/modules/AiTestTip.vue

@@ -61,11 +61,15 @@ export default {
       }
       span {
         color: @orange-dark;
+        font-weight: bold;
       }
     }
     &-btn {
       width: 76px;
       .cr-button {
+        font-size: @button-default-font-size !important;
+        height: @button-default-height !important;
+        line-height: @button-default-line-height !important;
         border-radius: @border-radius-sm !important;
       }
     }