Skip to content

M
mongo-ui
Commit 3d1b73e9 authored by 郭志伟's avatar 郭志伟
Browse files
Options

"feat: 详情"

parent 20a73075
Show whitespace changes
Inline Side-by-side
Showing with 1048 additions and 175 deletions
src/assets/icons/svg/arrow-down.svg 0 → 100644
View file @ 3d1b73e9
<?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 0 → 100644
View file @ 3d1b73e9
<?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 0 → 100644
View file @ 3d1b73e9
<?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 0 → 100644
View file @ 3d1b73e9
<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 0 → 100644
View file @ 3d1b73e9
<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
View file @ 3d1b73e9
......@@ -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/detail.less
View file @ 3d1b73e9
......@@ -7,169 +7,437 @@
.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;
.card {
padding: 20px;
background-color: @white;
margin-bottom: 10px;
&-header {
padding: 4px 0 16px;
display: flex;
justify-content: space-between;
align-items: center;
}
&-recommend {
color: @white;
padding: 0 8px;
&-h2 {
font-size: @font-size-20;
&-title {
font-size: @font-size-18;
font-weight: @font-weight-bold;
line-height: 28px;
color: @black;
line-height: @line-height-sm + 2;
}
&-option {
display: flex;
align-items: center;
}
&-body {
margin-bottom: 20px;
}
&-h1 {
font-size: @font-size-26;
}
.plan-tip {
font-size: @font-size-11;
color: @gray-5;
line-height: @line-height-sm;
margin-top: 14px;
.svg-icon {
margin-right: 3px;
width: 12px;
height: 12px;
}
&_offset {
margin-right: 4px;
}
}
.insure-form {
&-title {
font-size: @font-size-16;
font-weight: @font-weight-bold;
line-height: 37px;
margin-top: -3px;
margin: @padding-md 0;
}
/deep/ .cr-cell {
&-group {
&::after {
display: none;
}
}
background-color: @gray-1;
border-radius: @border-radius-md;
margin-bottom: 12px;
&::after {
display: none;
}
&__title {
color: #333333;
}
}
&-item_nobg {
background-color: @white !important;
padding: 10px 0;
overflow: initial;
/deep/ .cr-cell {
&__title {
width: 31%;
flex: none;
}
&__value {
width: 69%;
flex: none;
overflow: initial;
}
}
}
&-switch {
&-label {
font-size: @font-size-12;
color: @black;
margin-right: 4px;
}
.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 auto 0 8px;
color: @white !important;
}
.card-option {
justify-content: right;
}
}
&-pact {
display: flex;
justify-content: space-between;
align-items: center;
/deep/ .cr-checkbox__label {
font-size: @font-size-11;
color: @gray-4;
line-height: @line-height-lg;
}
&-link {
margin-top: -3.5px;
a {
font-size: @font-size-11;
vertical-align: middle;
}
i {
display: inline-block;
width: 0;
height: 12px;
border-right: 1px @blue solid;
vertical-align: middle;
margin: 0 3px;
}
}
}
&-insured {
margin-top: 39px;
background: @white;
box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.07);
}
.intro {
padding: 0;
.card-body {
margin-bottom: 0;
}
}
.cps-demo {
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;
&-title_np {
padding-bottom: 0;
}
&-header {
background: url(../../assets/goods/detail/assistant-card.png) top no-repeat;
background-size: contain;
padding: 24px 24px 20px;
h4 {
margin-top: 20px;
font-size: @font-size-20;
color: @black;
line-height: @line-height-lg * 2;
margin-top: 1px;
line-height: @line-height-lg;
font-weight: @font-weight-bold;
}
small {
margin-top: 9.5px;
padding-left: 8.8px;
display: block;
color: @white;
font-size: @font-size-12 - 1;
}
}
&-body {
background-color: @gray-1;
padding: @padding-sm + 1 @padding-md;
}
&-sub {
.sub-text-mixins();
margin-top: 8px;
&-person {
background-color: @white;
border-radius: @border-radius-md;
font-size: @font-size-14 + 1;
font-weight: @font-weight-bold;
padding: @padding-xs @padding-sm;
line-height: @line-height-lg;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 29px;
}
&-price {
&-list {
&-item {
position: relative;
display: flex;
padding-bottom: 20px;
&-title {
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;
width: 32px;
line-height: @line-height-md;
}
small {
margin-left: 5px;
.sub-text-mixins();
&-content {
flex: 1;
font-size: @font-size-11;
color: @gray-5;
line-height: @line-height-sm + 1;
padding-left: 50px;
position: relative;
&::after,
&::before {
content: " ";
display: block;
position: absolute;
top: 4px;
left: 0;
}
&::before {
height: 12px;
width: 12px;
background-color: #d8d8d8;
border-radius: @border-radius-max;
left: 20px;
}
.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);
&::after {
width: 0;
height: calc(100% + 20px);
border-left: 1px solid #d8d8d8;
left: 26px;
}
}
&:last-child {
.cps-demo-list-item-content::after {
display: none;
}
&-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;
.cps-process {
&-list {
&-item {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
}
padding-bottom: 16px;
&-title {
font-size: @font-size-18;
font-size: @font-size-12;
font-weight: @font-weight-bold;
color: @black;
width: 19px;
height: 19px;
margin: -10px 20px 0 4px;
background-color: @orange-light;
border-radius: @border-radius-max;
line-height: @line-height-md;
position: relative;
text-align: center;
line-height: 19px;
&::after {
content: " ";
display: block;
position: absolute;
top: 19px;
left: 9.5px;
width: 0;
height: calc(100% + 70px);
border-left: 1px solid #d8d8d8;
}
}
&-content {
flex: 1;
background-color: #f6f6f6;
border-radius: @border-radius-sm / 2 @border-radius-md;
padding: @padding-sm;
h6 {
color: @black;
font-weight: @font-weight-bold;
font-size: @font-size-14;
line-height: @line-height-sm + 2;
}
&-option {
display: flex;
align-items: center;
small {
color: @gray-5;
font-size: @font-size-12;
line-height: @line-height-sm + 2;
}
}
&:last-child {
color: #fff;
.cps-process-list-item-title::after {
display: none;
}
}
}
&-body {
margin-bottom: 20px;
}
}
.radio-btn {
.collapse {
&-item {
background-color: @white;
&-title {
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 {
color: @black;
font-weight: @font-weight-bold;
padding: @padding-md 0;
&-icon {
font-size: @font-size-12;
font-weight: @font-weight-bold;
font-style: normal;
line-height: @line-height-md - 2;
height: 20px;
text-align: center;
width: 20px;
border-radius: @border-radius-sm / 4 @border-radius-md / 2;
background-color: @orange-light;
/deep/ .cr-radio__label {
box-shadow: 0px 6px 25px 0px rgba(255, 200, 66, 0.2);
}
&-txt {
margin-left: 12px;
font-weight: @font-weight-bold;
font-size: @font-size-14;
line-height: @line-height-lg;
}
.svg-icon {
height: 19px;
width: 19px;
margin-left: auto;
}
line-height: 36px;
/deep/ &__icon {
display: none;
}
/deep/ &__label {
font-size: @font-size-14;
&-content {
display: flex;
color: @black;
width: 100%;
text-align: center;
margin-left: 0;
font-size: @font-size-14;
background-color: @gray-1;
border-radius: @border-radius-md;
padding: 16px 16px 16px 12px;
line-height: @line-height-sm + 2;
&-icon {
font-style: normal;
font-weight: @font-weight-bold;
}
&-txt {
margin-left: 8px;
}
}
}
}
.compact-cell {
&-group {
background: @gray-1;
border-radius: @border-radius-md;
padding: @padding-md;
.collapse-more {
text-align: center;
line-height: @line-height-lg;
padding: 5px 0;
.svg-icon {
height: 11px;
width: 11px;
margin-left: 3px;
}
background-color: @gray-1;
}
.det-footer {
padding: 25px 36px;
background-color: #fff;
p {
color: @gray-4;
font-size: @font-size-12;
color: @black;
line-height: @line-height-sm + 2;
}
&-offset {
padding-left: 60px;
}
&-logo {
text-align: center;
margin-bottom: 19px;
img {
width: 111px;
height: 35px;
}
}
}
.copyright {
margin: 16px 0;
text-align: center;
color: @gray-4;
font-size: @font-size-12;
line-height: @line-height-sm + 2;
}
.good-action {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
background-color: @white;
border-top: 1px solid rgba(0, 0, 0, .1);
&-left {
display: flex;
align-items: center;
position: relative;
&::after {
display: none;
content: " ";
display: block;
position: absolute;
right: 0;
top: 0;
bottom: 0;
margin: auto;
height: 32px;
width: 0;
border-right: 1px solid #ebebeb;
}
&-btn {
color: @black;
padding: 0 16px;
.svg-icon {
display: block;
width: 28px;
height: 28px;
margin: 0 auto;
}
i {
display: block;
line-height: @line-height-sm + 2;
font-style: normal;
width: 28px;
margin: 0 auto;
}
}
}
&-content {
flex: 1;
padding: 0 12px;
h6 {
font-size: @font-size-16;
font-weight: @font-weight-bold;
color: @black;
line-height: @line-height-sm;
margin-bottom: 4px;
}
strong {
color: @orange-dark;
}
small {
display: block;
color: @gray-4;
line-height: @line-height-sm;
font-size: @font-size-11;
}
}
&-right {
padding-right: 8px;
.cr-button {
width: 188px;
font-size: @font-size-16 !important;
border-radius: @border-radius-max !important;
box-shadow: 1px 2px 8px 0px rgba(255, 200, 66, 0.4);
}
.cr-cell {
}
}
src/views/Goods/detail.vue
View file @ 3d1b73e9
<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>
<detail-header />
<div class="det-body">
<div class="card">
<div class="card-header">
......@@ -24,64 +10,308 @@
</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>
<cr-radio-btn v-model="formData.planValue" :radio-data="planOptions" />
<compactCellGroup :cell-data="planCellData" :text-bold="true" />
<div class="plan-tip">
<svg-icon icon-class="check-circle" />
<span class="plan-tip_offset">垫付医药费轻症赔付后，重疾保障继续有效</span>
<svg-icon icon-class="check-circle" />
<span>可逐年续保至99岁</span>
</div>
</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 class="card-body">
<h6 class="insure-form-title">本人信息</h6>
<cr-cell-group class="insure-form">
<cr-field v-model="value" placeholder="请输入投保人姓名" label="姓名" />
<cr-field v-model="value" placeholder="信息保密，仅用于投保" label="身份证号" />
</cr-cell-group>
</div>
<div class="card-body">为谁投保</div>
<div class="card-header">
<h5 class="card-title">开通次年自动续保<cr-tag type="warning">小果建议您开通</cr-tag></h5>
<div class="card-body">
<h6 class="insure-form-title">为谁投保</h6>
<cr-radio-btn v-model="formData.insured" :radio-data="insuredOptions" />
<cr-cell-group class="insure-form">
<cr-field v-model="value" placeholder="请输入投保人姓名" label="姓名" />
<cr-field v-model="value" placeholder="信息保密，仅用于投保" label="身份证号" />
<cr-cell title="缴费方式" class="insure-form-item_nobg">
<cr-radio-group v-model="formData.payway" class="radio-btn">
<cr-radio name="1" :class="{ checked: formData.payway == '1' }">
月缴
<small>（12期）</small>
</cr-radio>
<cr-radio name="2" :class="{ checked: formData.payway == '2' }">一次交清</cr-radio>
</cr-radio-group>
</cr-cell>
</cr-cell-group>
</div>
<div class="card-header insure-form-switch">
<h5 class="card-title">开通次年自动续保</h5>
<cr-tag type="warning">小果建议您开通</cr-tag>
<div class="card-option">
<span>已开通</span>
<cr-switch v-model="checked" active-color="#FFC842" />
<span class="insure-form-switch-label">已开通</span>
<cr-switch v-model="formData.auto" active-color="#FFC842" size="23.5px" />
</div>
</div>
<div class="card-body">为谁投保</div>
<div class="card-body">
<compactCellGroup :cell-data="autoCellData" :no-val="true" />
</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 class="card-body">
<cr-cell-group class="compact-cell-group">
<cr-cell title="投保年龄" value="30~6周岁" class="compact-cell" />
<cr-cell title="保障期限" value="1年（可续保至99周岁）" class="compact-cell" />
<cr-cell title="等待期" value="90天" class="compact-cell" />
<cr-cell title="保费" class="compact-cell compact-cell_br">
保费与保额、被保人年龄有关
<br />首月3元，次月5.6元/月起
</cr-cell>
</cr-cell-group>
</div>
<div class="card-footer insure-form-pact">
<cr-checkbox
shape="round"
icon-size="12px"
v-model="formData.pact"
checked-color="#FFC842"
>
投保前请阅读
</cr-checkbox>
<div class="insure-form-pact-link">
<a href>保险条款</a>
<i></i>
<a href>健康告知</a>
<i></i>
<a href>投保须知与声明</a>
<i></i>
<a href>服务协议</a>
</div>
</div>
</div>
<div class="card intro">
<div class="card-body">
<cr-image :src="item" v-for="(item, index) in introImg" :key="index" />
</div>
</div>
<div class="card">
<div class="card-body">保险计划</div>
<div class="card-header cps-demo-title_np">
<h5 class="card-title">理赔案例</h5>
</div>
<div class="card-body">
<div class="cps-demo">
<div class="cps-demo-header">
<h4>1对1专员协助理赔</h4>
<small>因为专业 所以放心</small>
</div>
<div class="cps-demo-body">
<div class="cps-demo-person">
<span>吴先生</span>
<span>46岁 北京 有社保</span>
</div>
<div class="cps-demo-list">
<div class="cps-demo-list-item">
<div class="cps-demo-list-item-title">投保</div>
<div class="cps-demo-list-item-content">
2018年6月29日，吴先生为自己投保了一份万家保·重疾轻症险，保额20万，并续保。
</div>
</div>
<div class="cps-demo-list-item">
<div class="cps-demo-list-item-title">投保</div>
<div class="cps-demo-list-item-content">
2019年9月16日，吴先生意外烫伤双下肢皮肤，达到浅Ⅲ°烧伤，烧伤面积达20%。
</div>
</div>
<div class="cps-demo-list-item">
<div class="cps-demo-list-item-title">轻症理赔</div>
<div class="cps-demo-list-item-content">
2019年9月17日，吴先生后向我司报案，经核实符合该保险中轻症“特定面积Ⅲ度烧伤”的诊断赔付标准，给予4万保险金赔付。
</div>
</div>
<div class="cps-demo-list-item">
<div class="cps-demo-list-item-title">重疾理赔</div>
<div class="cps-demo-list-item-content">
2020年1月3日，吴先生突发胸痛咯血，后诊断为右肺非小细胞性肺癌，经我司核实后确认为保险责任，一次性给予20万元的重大疾病保险金。
</div>
</div>
</div>
</div>
</div>
</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 class="cps-process-list">
<div class="cps-process-list-item">
<div class="cps-process-list-item-title">1</div>
<div class="cps-process-list-item-content">
<h6>电话报案</h6>
<small>
请拨打华泰财险400-609-5509进行报案。华泰财险会有理赔专员1对1指导理赔事宜。
</small>
</div>
</div>
<div class="cps-process-list-item">
<div class="cps-process-list-item-title">2</div>
<div class="cps-process-list-item-content">
<h6>提交资料</h6>
<small>根据理赔专员的指导，准备理赔材料，并邮寄至指定地点进行审核。</small>
</div>
</div>
<div class="cps-process-list-item">
<div class="cps-process-list-item-title">3</div>
<div class="cps-process-list-item-content">
<h6>理赔付款</h6>
<small>审核通过后，理赔款将通过转账的方式支付。</small>
</div>
</div>
</div>
</div>
<div class="card-header">
<h5 class="card-title">Q&A</h5>
</div>
<div class="card-body" style="margin-bottom: 0">
<div class="collapse">
<div class="collapse-item">
<div class="collapse-item-title">
<i class="collapse-item-title-icon">Q</i>
<span class="collapse-item-title-txt">这个产品的等待期是多久？</span>
<svg-icon icon-class="triangle-down" />
</div>
<div class="collapse-item-content">
<i class="collapse-item-content-icon">A:</i>
<div class="collapse-item-content-txt">
文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案
</div>
</div>
<cr-divider :hairline="false" :style="{ color: '#ebebeb', marginBottom: 0 }" />
</div>
<div class="collapse-item">
<div class="collapse-item-title">
<i class="collapse-item-title-icon">Q</i>
<span class="collapse-item-title-txt">这款产品提供了哪些保障？</span>
<svg-icon icon-class="triangle-down" />
</div>
<div class="collapse-item-content">
<i class="collapse-item-content-icon">A:</i>
<p>
文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案
</p>
</div>
</div>
<div class="collapse-item">
<div class="collapse-item-title">
<i class="collapse-item-title-icon">Q</i>
<span class="collapse-item-title-txt">
如果同时购买了其他重疾险，可以赔付2次吗？
</span>
<svg-icon icon-class="triangle-down" />
</div>
<div class="collapse-item-content">
<i class="collapse-item-content-icon">A:</i>
<p>
文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案
</p>
</div>
</div>
</div>
<div class="collapse-more">
<a href="">查看更多<svg-icon icon-class="arrow-down"/></a>
</div>
</div>
</div>
</div>
<div class="det-footer">
<p class="det-footer-logo"><img src="../../assets/logo-foot.png" alt="logo" /></p>
<p>承保公司：华泰财产保险有限公司</p>
<p>经营范围：短期健康保险和意外伤害保险</p>
<p>备案名称：华泰财险重大疾病保险条款(B款)；</p>
<p class="det-footer-offset">华泰财险附加重大疾病轻症综合保险条款；</p>
<p class="det-footer-offset">华泰财险附加保险费分期支付条款</p>
<p>备案编号：C00015431912018061501152；</p>
<p class="det-footer-offset">C00015432622017111500872；</p>
<p class="det-footer-offset">C00015431922018061503991</p>
</div>
<div class="copyright">
<p>版权所有©2020 全天候保险代理股份有限公司</p>
<p>京ICP备15059975号</p>
</div>
<div class="good-action">
<div class="good-action-left">
<a href="javascript:;" class="good-action-left-btn">
<svg-icon icon-class="assistant" />
<i>客服</i>
</a>
</div>
<div class="good-action-content">
<h6>首月<strong>3</strong>元</h6>
<small>次月5.6元/月起</small>
</div>
<div class="good-action-right">
<cr-button type="warning" round>我要投保</cr-button>
</div>
</div>
<div class="det-footer"></div>
</div>
</template>
<script>
import intro01 from "@/assets/goods/detail/zhongjixian/intro-01.png";
import intro02 from "@/assets/goods/detail/zhongjixian/intro-02.png";
import intro03 from "@/assets/goods/detail/zhongjixian/intro-03.png";
import intro04 from "@/assets/goods/detail/zhongjixian/intro-04.png";
import detailHeader from "./modules/DetailHeader";
import compactCellGroup from "./modules/CompactCellGroup";
import crRadioBtn from "@/components/CrRadioBtn";
export default {
name: "GoodsDetail",
components: {
detailHeader,
compactCellGroup,
crRadioBtn
},
data() {
return {
planValue: "3"
introImg: [intro01, intro02, intro03, intro04],
autoCellData: [
{ title: "【省心】自动续保，不用担心续保不及时导致保障中断", value: "" },
{ title: "【放心】开通自动续保后，可随时取消", value: "" },
{ title: "【安心】自动续保按费率可自动扣费", value: "" },
{ title: " 阅读并同意<a href>《自动续保服务协议》</a>", value: "", needSlot: true }
],
planCellData: [
{ title: "100种重大疾病医疗保险金", value: "30万" },
{ title: "20种轻症保险金", value: "6万" },
{ title: "投保年龄", value: "30天~60周岁" },
{ title: "保险期限", value: "1年" }
],
planOptions: [
{ label: "30万", value: "3" },
{ label: "20万", value: "2" },
{ label: "10万", value: "1" }
],
insuredOptions: [
{ label: "本人", value: "1" },
{ label: "配偶", value: "2" },
{ label: "父母", value: "3" },
{ label: "子女", value: "4" }
],
formData: {
planValue: "3",
insured: "1",
payway: "1",
auto: true,
pact: true
}
};
}
};
......
src/views/Goods/modules/CompactCellGroup.vue 0 → 100644
View file @ 3d1b73e9
<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 0 → 100644
View file @ 3d1b73e9
<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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment