"feat: 详情"

src/assets/icons/svg/arrow-down.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1595332471748" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2077" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M454.188 785.022c-145.192-150.177-290.378-300.353-435.422-450.526-59.842-61.836 37.327-154.021 97.313-91.899 129.23 133.647 258.318 267.296 387.548 400.868 133.646-134.287 267.436-268.574 401.083-402.934 60.84-61.123 158.011 31.060 97.244 91.971-150.105 150.89-300.279 301.703-450.454 452.521-24.933 24.934-72.666 25.575-97.311 0z" p-id="2078" fill="#666666"></path></svg>
\ No newline at end of file

src/assets/icons/svg/check-circle.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="13px" viewBox="0 0 12 13" 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>首页</title>
+    <desc>Created with Sketch.</desc>
+    <g id="首页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-20.000000, -427.000000)" id="Group-10">
+            <g transform="translate(20.000000, 427.664719)">
+                <g id="对勾">
+                    <g id="Group-2">
+                        <circle id="Oval" fill="#FFC842" fill-rule="nonzero" cx="6" cy="6" r="6"></circle>
+                        <polyline id="Path-17" stroke="#333333" stroke-linecap="round" stroke-linejoin="round" fill-rule="nonzero" points="3 6.24771798 5.05215696 8.24771798 8.15040625 5"></polyline>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/assets/icons/svg/triangle-down.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="17px" viewBox="0 0 16 17" 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 8</title>
+    <desc>Created with Sketch.</desc>
+    <g id="顾问" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-339.000000, -1834.000000)" fill-rule="nonzero" id="Group-8">
+            <g transform="translate(20.000000, 1830.000000)">
+                <g id="Group-24" transform="translate(319.000000, 4.000000)">
+                    <g id="Group-14" transform="translate(0.000000, 0.500000)">
+                        <rect id="Rectangle" fill="#FFFFFF" x="0" y="0" width="16" height="16"></rect>
+                        <path d="M8.70710678,5.70710678 L13.2928932,10.2928932 C13.6834175,10.6834175 13.6834175,11.3165825 13.2928932,11.7071068 C13.1053568,11.8946432 12.8510029,12 12.5857864,12 L3.41421356,12 C2.86192881,12 2.41421356,11.5522847 2.41421356,11 C2.41421356,10.7347835 2.5195704,10.4804296 2.70710678,10.2928932 L7.29289322,5.70710678 C7.68341751,5.31658249 8.31658249,5.31658249 8.70710678,5.70710678 Z" id="Triangle" fill="#EEEEEE" transform="translate(8.000000, 8.500000) scale(1, -1) translate(-8.000000, -8.500000) "></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/components/Collapse.vue

+<template>
+  <div>
+    <ul>
+      <li v-for="(item, index) in list" :key="index">
+        <p @click="changeContent(index)">{{ item.title }}</p>
+        <div class="box" v-show="item.showContent">11111</div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Collapse",
+  props: {
+    list: {
+      type: Array,
+      required: true,
+      default() {
+        return [];
+      }
+    }
+  },
+  methods: {
+    changeContent(index) {
+      //通过index拿到当前值
+      this.list[index].showContent = !this.list[index].showContent;
+    }
+  }
+};
+</script>
+
+<style></style>

src/components/CrRadioBtn.vue

+<template>
+  <cr-radio-group v-model="value" class="radio-btn">
+    <cr-radio
+      :name="item.value"
+      :class="{ checked: value === item.value }"
+      v-for="(item, index) in radioData"
+      :key="index"
+    >
+      {{ item.label }}
+    </cr-radio>
+  </cr-radio-group>
+</template>
+<script>
+const CHANGE_EVENT = "change";
+export default {
+  name: "CrRadioBtn",
+  props: {
+    radioData: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    value: null
+  },
+  watch: {
+    value(val) {
+      this.$emit(CHANGE_EVENT, val);
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+@import "../style/var.less";
+.radio-btn {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  margin-bottom: 12px;
+  /deep/ .cr-radio {
+    margin-right: 10px;
+    flex: 1;
+    background: @white;
+    box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.07);
+    border-radius: @border-radius-sm;
+    height: 36px;
+    line-height: 36px;
+    transition: all 0.1s linear;
+    &:last-child {
+      margin-right: 0;
+    }
+    &.checked {
+      background-color: @orange-light;
+      /deep/ .cr-radio__label {
+        font-weight: @font-weight-bold;
+      }
+    }
+    &__icon {
+      display: none;
+    }
+    &__label {
+      font-size: @font-size-14;
+      color: @black;
+      width: 100%;
+      text-align: center;
+      margin-left: 0;
+    }
+  }
+}
+</style>

src/service/cherry-ui.js

@@ -21,7 +21,7 @@ const {
   // Picker,
   // Area,
   // Dialog,
-  // Field,
+  Field,
   Checkbox,
   // CheckboxGroup,
   Radio,
@@ -53,6 +53,7 @@ Vue.use(CellGroup);
 Vue.use(Row);
 Vue.use(Col);
 Vue.use(Divider);
+Vue.use(Field);
 Vue.use(Checkbox);
 Vue.use(Radio);
 Vue.use(RadioGroup);

src/views/Goods/modules/CompactCellGroup.vue

+<template>
+  <cr-cell-group
+    class="compact-cell-group"
+    :class="{
+      'compact-cell-text_bold': textBold,
+      'compact-cell-text_noval': noVal
+    }"
+  >
+    <cr-cell
+      v-for="(item, index) in cellData"
+      :key="index"
+      :title="item.title"
+      :value="item.value"
+      class="compact-cell"
+      :class="item.className"
+    >
+      <div v-if="needSlot && item.title" v-html="item.title" slot="title"></div>
+      <div v-if="needSlot && item.value" v-html="item.value"></div>
+    </cr-cell>
+  </cr-cell-group>
+</template>
+
+<script>
+export default {
+  name: "CompactCellGroup",
+  props: {
+    cellData: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    textBold: {
+      type: Boolean,
+      default: false
+    },
+    noVal: {
+      type: Boolean,
+      default: false
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+@import "../../../style/var.less";
+.sub-text-mixins {
+  font-size: @font-size-12;
+  color: @gray-4;
+  line-height: @line-height-sm;
+}
+.compact-cell {
+  &-group {
+    background: @gray-1;
+    border-radius: @border-radius-md;
+    padding: @padding-md;
+    /deep/ .cr-cell {
+      &-group {
+        &::after {
+          display: none;
+        }
+      }
+      &__title {
+        color: @gray-5;
+      }
+      &__value {
+        color: @black;
+      }
+    }
+  }
+  background-color: @gray-1;
+  font-size: @font-size-12;
+  color: @black;
+  padding: 0;
+  &::after {
+    display: none;
+  }
+  &-text_bold {
+    /deep/ .cr-cell__title {
+      color: @black;
+    }
+    /deep/ .cr-cell__value {
+      color: @black;
+      font-weight: @font-weight-bold;
+    }
+  }
+  &-text_noval {
+    /deep/ .cr-cell__value {
+      display: none;
+    }
+  }
+  &_br {
+    /deep/ .cr-cell__value {
+      flex: none;
+      width: 165px;
+    }
+  }
+}
+</style>

src/views/Goods/modules/DetailHeader.vue

+<template>
+  <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>
+</template>
+
+<script>
+export default {
+  name: "DetailHeader",
+  data() {
+    return {};
+  }
+};
+</script>
+<style lang="less" scoped>
+@import "../../../style/var.less";
+.sub-text-mixins {
+  font-size: @font-size-12;
+  color: @gray-4;
+  line-height: @line-height-sm;
+}
+.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;
+      }
+    }
+  }
+}
+</style>