Skip to content

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

"feat: 详情页基础element"

parent 757f00bb
Hide whitespace changes
Inline Side-by-side
Showing with 517 additions and 63 deletions
jsconfig.json
View file @ 20a73075
{ {
"compilerOptions": { "compilerOptions": {
"target": "es2017", "target": "es2017",
"allowSyntheticDefaultImports": false, "allowSyntheticDefaultImports": true,
"baseUrl": "./", "baseUrl": "./",
"paths": { "paths": {
"@/*": ["src/*"] "@/*": ["src/*"]
......
src/api/goodsList.mock.js
View file @ 20a73075
...@@ -8,6 +8,7 @@ export default [ ...@@ -8,6 +8,7 @@ export default [
sub: "报销医药费，有无社保均可保", sub: "报销医药费，有无社保均可保",
children: [ children: [
{ {
id: 1,
img: good01, img: good01,
title: "万家保·百万医疗险", title: "万家保·百万医疗险",
sub: "产品优势", sub: "产品优势",
...@@ -23,6 +24,7 @@ export default [ ...@@ -23,6 +24,7 @@ export default [
sub: "责任内疾病确诊即赔", sub: "责任内疾病确诊即赔",
children: [ children: [
{ {
id: 1,
img: good02, img: good02,
title: "万家保·重疾轻症险", title: "万家保·重疾轻症险",
sub: "100种重疾+40种轻症", sub: "100种重疾+40种轻症",
...@@ -32,6 +34,7 @@ export default [ ...@@ -32,6 +34,7 @@ export default [
allow: true allow: true
}, },
{ {
id: 1,
img: good02, img: good02,
title: "百年康惠保2.0重大疾病险", title: "百年康惠保2.0重大疾病险",
sub: "产品优势", sub: "产品优势",
...@@ -47,6 +50,7 @@ export default [ ...@@ -47,6 +50,7 @@ export default [
sub: "意外保障无等待期", sub: "意外保障无等待期",
children: [ children: [
{ {
id: 1,
img: good03, img: good03,
title: "万家保·综合意外险", title: "万家保·综合意外险",
sub: "产品优势", sub: "产品优势",
...@@ -62,6 +66,7 @@ export default [ ...@@ -62,6 +66,7 @@ export default [
sub: "避免因家庭顶梁柱身故，导致的房贷、子女教育等生活压力", sub: "避免因家庭顶梁柱身故，导致的房贷、子女教育等生活压力",
children: [ children: [
{ {
id: 1,
img: good04, img: good04,
title: "华贵大麦2020定期寿险", title: "华贵大麦2020定期寿险",
sub: "产品优势", sub: "产品优势",
......
src/assets/icons/svg/assistant.svg 0 → 100644
View file @ 20a73075
<?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 0 → 100644
View file @ 20a73075
@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
View file @ 20a73075
...@@ -12,10 +12,19 @@ ...@@ -12,10 +12,19 @@
</slot> </slot>
</div> </div>
<div class="goods-list-children" v-if="item.children.length > 0" :key="'children' + index"> <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-col span="7" class="goods-list-item-img">
<!-- <cr-tag type="primary">标签</cr-tag> --> <cr-tag type="warning" shape="round" class="goods-list-item-glory" v-if="it.glory">
<cr-image width="72px" height="72px" :src="it.img" /> {{ it.glory }}
</cr-tag>
<img :src="it.img" />
</cr-col> </cr-col>
<cr-col span="17" class="goods-list-item-info"> <cr-col span="17" class="goods-list-item-info">
<h5>{{ it.title || "-" }}</h5> <h5>{{ it.title || "-" }}</h5>
...@@ -31,9 +40,19 @@ ...@@ -31,9 +40,19 @@
</template> </template>
</div> </div>
<div v-else> <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-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>
<cr-col span="17" class="goods-list-item-info"> <cr-col span="17" class="goods-list-item-info">
<h5>{{ it.title || "-" }}</h5> <h5>{{ it.title || "-" }}</h5>
...@@ -61,47 +80,17 @@ export default { ...@@ -61,47 +80,17 @@ export default {
computed: { computed: {
// TODO // TODO
hasChildren: function() { 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: {
</script> clickItem(item) {
<style lang="less" scoped> if (!item.allow) {
@import "../style/var.less"; return;
@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
View file @ 20a73075
...@@ -32,7 +32,7 @@ export default { ...@@ -32,7 +32,7 @@ export default {
}; };
</script> </script>
<style scoped> <style>
.svg-icon { .svg-icon {
width: 1em; width: 1em;
height: 1em; height: 1em;
......
src/router/index.js
View file @ 20a73075
...@@ -20,8 +20,13 @@ const routes = [ ...@@ -20,8 +20,13 @@ const routes = [
}, },
{ {
path: "/goods", path: "/goods",
name: "goods", name: "Goods",
component: () => import(/* webpackChunkName: "about" */ "../views/Goods/index.vue") 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
View file @ 20a73075
...@@ -7,8 +7,8 @@ const { ...@@ -7,8 +7,8 @@ const {
Button, Button,
Image, Image,
// Icon, // Icon,
// Cell, Cell,
// CellGroup, CellGroup,
Row, Row,
Col, Col,
// Popup, // Popup,
...@@ -22,11 +22,11 @@ const { ...@@ -22,11 +22,11 @@ const {
// Area, // Area,
// Dialog, // Dialog,
// Field, // Field,
// Checkbox, Checkbox,
// CheckboxGroup, // CheckboxGroup,
// Radio, Radio,
// RadioGroup, RadioGroup,
// Switch, Switch,
Tag, Tag,
// PullRefresh, // PullRefresh,
// CardList, // CardList,
...@@ -48,9 +48,15 @@ const { ...@@ -48,9 +48,15 @@ const {
Vue.use(Button); Vue.use(Button);
Vue.use(Image); Vue.use(Image);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Row); Vue.use(Row);
Vue.use(Col); Vue.use(Col);
Vue.use(Divider); Vue.use(Divider);
Vue.use(Checkbox);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(Switch);
Vue.use(Tag); Vue.use(Tag);
Vue.use(Tabbar); Vue.use(Tabbar);
Vue.use(TabbarItem); Vue.use(TabbarItem);
......
src/style/index.less
View file @ 20a73075
@import "reset.less"; @import "reset.less";
@import "var.less"; @import "var.less";
@import "mixins.less";
html,body { html,body {
height: 100%; height: 100%;
} }
...@@ -7,6 +8,10 @@ body { ...@@ -7,6 +8,10 @@ body {
font-family: @font-family; font-family: @font-family;
background-color: @background-color; background-color: @background-color;
} }
a {
color: @blue;
font-size: @font-size-12;
}
.cr-button { .cr-button {
padding: 0 @padding-sm !important; padding: 0 @padding-sm !important;
&__text { &__text {
...@@ -17,8 +22,53 @@ body { ...@@ -17,8 +22,53 @@ body {
background-color: @button-warning-background-color !important; background-color: @button-warning-background-color !important;
border: 1px solid @button-warning-border-color !important; border: 1px solid @button-warning-border-color !important;
border-radius: @border-radius-md !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
View file @ 20a73075
...@@ -59,9 +59,10 @@ ...@@ -59,9 +59,10 @@
@font-size-16: 16px; @font-size-16: 16px;
@font-size-18: 18px; @font-size-18: 18px;
@font-size-20: 20px; @font-size-20: 20px;
@font-size-26: 26px;
@font-size-28: 28px; @font-size-28: 28px;
@font-size-32: 32px; @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; @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; @base-font-family: @font-family;
...@@ -72,8 +73,8 @@ ...@@ -72,8 +73,8 @@
@button-small-min-width: 48px; @button-small-min-width: 48px;
@button-small-line-height: 28px; @button-small-line-height: 28px;
@button-large-height: 52px; @button-large-height: 50px;
@button-large-line-height: 52px; @button-large-line-height: 50px;
@button-default-height: 36px; @button-default-height: 36px;
@button-default-line-height: 36px; @button-default-line-height: 36px;
......
src/views/Goods/detail.less 0 → 100644
View file @ 20a73075
@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
View file @ 20a73075
<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
View file @ 20a73075
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
<script> <script>
import AiTestTip from "./modules/AiTestTip"; import AiTestTip from "./modules/AiTestTip";
import GoodList from "@/components/GoodList"; import GoodList from "@/components/GoodList/index";
import goodsList from "@/api/goodsList.mock"; import goodsList from "@/api/goodsList.mock";
...@@ -28,8 +28,11 @@ export default { ...@@ -28,8 +28,11 @@ export default {
data() { data() {
return { return {
active: 0, active: 0,
goodsList goodsList: []
}; };
},
mounted() {
this.goodsList = goodsList;
} }
}; };
</script> </script>
......
src/views/Goods/modules/AiTestTip.vue
View file @ 20a73075
...@@ -61,11 +61,15 @@ export default { ...@@ -61,11 +61,15 @@ export default {
} }
span { span {
color: @orange-dark; color: @orange-dark;
font-weight: bold;
} }
} }
&-btn { &-btn {
width: 76px; width: 76px;
.cr-button { .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; border-radius: @border-radius-sm !important;
} }
} }
......
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