Skip to content

M
mongo-ui
Commit 20e12d35 authored by 郭志伟's avatar 郭志伟 Committed by 郝聪敏
Browse files
Options

feat: 详情页组件整理

parent bcf6bef8
Hide whitespace changes
Inline Side-by-side
Showing with 341 additions and 334 deletions
src/api/detail.case.mock.js 0 → 100644
View file @ 20e12d35
/* eslint-disable */
export default {
name: "吴先生",
info: "46岁 北京 有社保",
list: [
{
title: "投保",
event: "2018年6月29日，吴先生为自己投保了一份万家保·重疾轻症险，保额20万，并续保。"
},
{
title: "投保",
event: "2019年9月16日，吴先生意外烫伤双下肢皮肤，达到浅Ⅲ°烧伤，烧伤面积达20"
},
{
title: "轻症理赔",
event: "2019年9月17日，吴先生后向我司报案，经核实符合该保险中轻症“特定面积Ⅲ度烧伤”的诊断赔付标准，给予4万保险金赔付。"
},
{
title: "重疾理赔",
event: "2020年1月3日，吴先生突发胸痛咯血，后诊断为右肺非小细胞性肺癌，经我司核实后确认为保险责任，一次性给予20万元的重大疾病保险金。"
}
]
};
src/components/Collapse.vue
View file @ 20e12d35
<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 class="collapse">
<div
class="collapse-item"
:class="{
show: item.show,
more: index > 2 && !more
}"
v-for="(item, index) in list"
:key="index"
>
<div class="collapse-item-title" @click="itemClick(index)">
<i class="collapse-item-title-icon">Q</i>
<span class="collapse-item-title-txt">{{ item.q }}</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">{{ item.a }}</div>
</div>
<cr-divider :hairline="false" :style="{ color: '#ebebeb', margin: 0 }" />
</div>
</div>
<div class="collapse-more" :class="{ active: more }" v-if="moreBtn">
<a href="javascript:;" @click="showMore">
<span>查看更多</span>
<span>隐藏</span>
<svg-icon icon-class="arrow-down" />
</a>
</div>
</div>
</template>
<script>
// TODO
export default {
name: "Collapse",
props: {
list: {
collapseData: {
type: Array,
required: true,
default() {
return [];
}
},
moreBtn: {
type: Boolean,
default: true
}
},
watch: {
collapseData: {
immediate: true,
deep: true,
handler(val) {
this.list = val.map(item => {
item.showItem = false;
return item;
});
}
}
},
data() {
return {
list: [],
more: false
};
},
methods: {
changeContent(index) {
//通过index拿到当前值
this.list[index].showContent = !this.list[index].showContent;
itemClick(index) {
let _item = this.list[index];
_item.show = !_item.show;
this.$set(this.list, index, _item);
},
showMore() {
this.more = !this.more;
}
}
};
</script>
<style></style>
<style lang="less" scoped>
@import "../style/var.less";
.collapse {
&-item {
background-color: @white;
&.more {
display: none;
}
&-title {
display: flex;
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;
margin-top: 2px;
border-radius: @border-radius-sm / 4 @border-radius-md / 2;
background-color: @orange-light;
box-shadow: 0px 6px 25px 0px rgba(255, 200, 66, 0.2);
}
&-txt {
margin-left: 10px;
font-weight: @font-weight-bold;
font-size: @font-size-14;
line-height: @line-height-lg;
}
.svg-icon {
height: 17px;
width: 17px;
transition: all 0.2s linear;
margin-left: auto;
margin-top: 4px;
}
}
&-content {
display: none;
overflow: hidden;
color: @black;
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;
margin-bottom: 15px;
&-icon {
font-style: normal;
font-weight: @font-weight-bold;
}
&-txt {
margin-left: 8px;
}
}
&.show {
.collapse-item-title {
.svg-icon {
transform: rotate(180deg);
}
}
.collapse-item-content {
display: flex;
}
}
}
}
.collapse-more {
text-align: center;
line-height: @line-height-lg;
padding: 5px 0;
span:nth-child(2) {
display: none;
}
.svg-icon {
height: 11px;
width: 11px;
margin-left: 3px;
transition: all 0.2s linear;
}
&.active {
span:nth-child(1) {
display: none;
}
span:nth-child(2) {
display: inline;
}
.svg-icon {
transform: rotate(180deg);
}
}
}
</style>
src/components/CompactCellGroup.vue
View file @ 20e12d35
......@@ -59,7 +59,7 @@ export default {
};
</script>
<style lang="less" scoped>
@import "../../../style/var.less";
@import "../style/var.less";
.sub-text-mixins {
font-size: @font-size-12;
color: @gray-4;
......
src/components/Copyright.vue
View file @ 20e12d35
<template>
<template functional>
<div class="copyright">
<p class="copyright-logo" v-if="props.logo">
<img src="../assets/logo-foot.png" alt="logo" />
......@@ -11,7 +11,6 @@
<script>
export default {
name: "Copyright",
functional: true,
props: ["logo"]
};
</script>
......
src/components/PopupWithIframe.vue
View file @ 20e12d35
......@@ -78,7 +78,7 @@ export default {
</script>
<style lang="less" scoped>
@import "../../../style/var.less";
@import "../style/var.less";
.body-wrap-mixin {
overflow-x: hidden;
overflow-y: auto;
......
src/views/Goods/Detail/index.less
View file @ 20e12d35
@import "../../style/var.less";
@import "../../../style/var.less";
.sub-text-mixins {
font-size: @font-size-12;
color: @gray-4;
......
src/views/Goods/Detail/index.vue
View file @ 20e12d35
<template>
<div class="container">
<detail-header @click="goInsureState = true" />
<detail-header @click="goInsureState = true" :det="headerInfo" />
<div class="det-body">
<card title="保险计划" :option="['查看详情']" @option-click="openIframePupop(4)">
<cr-radio-btn v-model="formData.planValue" :radio-data="planOptions" />
......@@ -85,11 +85,11 @@
height="auto"
/>
</card>
<cps-demo />
<cps-process @click="openIframePupop" />
<cps-qa />
<cps-case :case-data="caseInfo" />
<cps-process :process-data="processDetail" @click="openIframePupop(5)" />
<cps-qa :qa-data="qaList" />
</div>
<detail-footer />
<detail-footer :company-info="companyInfo" />
<copyright />
<good-action @click="goInsureState = true" @leftClick="showLayer = true" />
<popup-with-iframe
......@@ -98,7 +98,7 @@
:content="pupopData.content"
:url="pupopData.url"
>
<cps-process-detail v-if="currentPupopIndex === 5" />
<cps-process-detail v-if="currentPupopIndex === 5" :process-data="processDetail" />
<cps-rate v-if="currentPupopIndex === 6" />
</popup-with-iframe>
<record-layer v-model="showLayer" desc="敬请期待" />
......@@ -109,19 +109,47 @@
<script>
import DetailHeader from "./modules/DetailHeader";
import DetailFooter from "./modules/DetailFooter";
import CompactCellGroup from "@/modules/CompactCellGroup";
import CpsDemo from "./modules/CpsDemo";
import CompactCellGroup from "@/components/CompactCellGroup";
import CpsCase from "./modules/CpsCase";
import CpsProcess from "./modules/CpsProcess";
import CpsQa from "./modules/CpsQA";
import PopupWithIframe from "@/modules/PopupWithIframe";
import GoInsureDialog from "../modules/GoInsureDialog";
import PopupWithIframe from "@/components/PopupWithIframe";
import GoInsureDialog from "./modules/GoInsureDialog";
import CpsProcessDetail from "./modules/CpsProcessDetail";
import CpsRate from "./CpsRate";
import CpsRate from "./modules/CpsRate";
import CrRadioBtn from "@/components/CrRadioBtn";
import Card from "@/components/Card";
import Copyright from "@/components/Copyright";
import GoodAction from "@/components/GoodAction";
import RecordLayer from "@/components/RecordLayer";
import Collapse from "@/components/Collapse";
import goodsBg01 from "@/assets/goods/detail/bg-zhongjixian.png";
import qaList from "@/api/detail.qa.mock";
import caseInfo from "@/api/detail.case.mock";
import processDetail from "@/api/detail.process.mock";
const headerInfo = {
bgSrc: goodsBg01,
type: "huatai",
company: "华泰财险",
title: "30万重疾轻症保障",
sub: "100种重症+40种轻症确诊即赔",
price: "首月<strong>3</strong>元<small>次月5.6元/月起</small>",
insuredNum: 0,
stamp: true
};
const companyInfo = [
{ content: "承保公司：华泰财产保险有限公司", offset: false },
{ content: "经营范围：短期健康保险和意外伤害保险", offset: false },
{ content: "备案名称：华泰财险重大疾病保险条款", offset: false },
{ content: "华泰财险附加重大疾病轻症综合保险条款；", offset: true },
{ content: "华泰财险附加保险费分期支付条款", offset: true },
{ content: "备案编号：C00015431912018061501152；", offset: false },
{ content: "C00015432622017111500872；", offset: true },
{ content: "C00015431922018061503991", offset: true }
];
export default {
name: "GoodsDetail",
......@@ -131,7 +159,9 @@ export default {
CompactCellGroup,
CrRadioBtn,
Card,
CpsDemo,
// eslint-disable-next-line
Collapse,
CpsCase,
CpsProcess,
CpsQa,
Copyright,
......@@ -144,6 +174,11 @@ export default {
},
data() {
return {
headerInfo,
qaList,
caseInfo,
processDetail,
companyInfo,
introImg: [
"@/assets/goods/detail/zhongjixian/intro-01.png",
"@/assets/goods/detail/zhongjixian/intro-02.png",
......
src/views/Goods/Detail/modules/CpsCase.vue
View file @ 20e12d35
<template>
<template functional>
<card class="cps-demo-title_np" title="理赔案例">
<div class="cps-demo">
<div class="cps-demo-header">
......@@ -7,33 +7,13 @@
</div>
<div class="cps-demo-body">
<div class="cps-demo-person">
<span>吴先生</span>
<span>46岁 北京 有社保</span>
<span>{{ props.caseData.name }}</span>
<span>{{ props.caseData.info }}</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 class="cps-demo-list-item" v-for="(item, index) in props.caseData.list" :key="index">
<div class="cps-demo-list-item-title">{{ item.title }}</div>
<div class="cps-demo-list-item-content">{{ item.event }}</div>
</div>
</div>
</div>
......@@ -42,23 +22,25 @@
</template>
<script>
import card from "@/components/Card";
export default {
name: "CpsCase",
components: {
card
},
props: {
demoData: {
caseData: {
type: Object,
default() {}
default() {
return {
name: "",
info: "",
list: []
};
}
}
}
};
</script>
<style lang="less" scoped>
@import "../../../style/var.less";
@import "../../../../style/var.less";
.cps-demo {
&-title_np {
.card-header {
......@@ -66,7 +48,7 @@ export default {
}
}
&-header {
background: url(../../../assets/goods/detail/assistant-card.png) top no-repeat;
background: url(../../../../assets/goods/detail/assistant-card.png) top no-repeat;
background-size: contain;
padding: 24px 24px 21.5px;
h4 {
......
src/views/Goods/Detail/modules/CpsProcess.vue
View file @ 20e12d35
<template>
<card title="理赔流程" :option="['了解更多理赔信息']" @option-click="optionClick">
<template functional>
<card title="理赔流程" :option="['了解更多理赔信息']" @option-click="listeners.click">
<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" v-for="(item, index) in props.processData" :key="index">
<div class="cps-process-list-item-title">{{ index + 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>
<h6>{{ item.title }}</h6>
<small v-html="item.desc"></small>
</div>
</div>
</div>
......@@ -29,28 +13,21 @@
</template>
<script>
import card from "@/components/Card";
export default {
name: "CpsProcess",
components: {
card
},
props: {
processData: {
type: Object,
default() {}
}
},
methods: {
optionClick() {
this.$emit("click", 5);
type: Array,
default() {
return [];
}
}
}
};
</script>
<style lang="less" scoped>
@import "../../../style/var.less";
@import "../../../../style/var.less";
.cps-process {
&-list {
position: relative;
......
src/views/Goods/Detail/modules/CpsProcessDetail.vue
View file @ 20e12d35
<template>
<template functional>
<div class="cps-process-list">
<div class="cps-process-list-item" v-for="(item, index) in detail" :key="index">
<div class="cps-process-list-item" v-for="(item, index) in props.processData" :key="index">
<div class="cps-process-list-item-title">{{ index + 1 }}</div>
<div class="cps-process-list-item-content">
<h6>{{ item.title }}</h6>
......@@ -11,20 +11,20 @@
</template>
<script>
import detail from "@/api/detail.process.mock";
export default {
name: "CpsProcessDetail",
data() {
return {
detail
};
processData: {
type: Array,
default() {
return [];
}
}
};
</script>
<style lang="less" scoped>
@import "../../style/var.less";
@import "../../style/mixins.less";
@import "../../../../style/var.less";
@import "../../../../style/mixins.less";
.cps-process {
&-list {
margin-bottom: 50px;
......
src/views/Goods/Detail/modules/CpsQA.vue
View file @ 20e12d35
<template>
<card title="常见问题" class="collapse-header">
<div class="collapse">
<div
class="collapse-item"
:class="{
show: item.show,
more: index > 2 && !more
}"
v-for="(item, index) in list"
:key="index"
>
<div class="collapse-item-title" @click="itemClick(index)">
<i class="collapse-item-title-icon">Q</i>
<span class="collapse-item-title-txt">{{ item.q }}</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">{{ item.a }}</div>
</div>
<cr-divider :hairline="false" :style="{ color: '#ebebeb', margin: 0 }" />
</div>
</div>
<div class="collapse-more" :class="{ active: more }" v-if="moreBtn">
<a href="javascript:;" @click="showMore">
<span>查看更多</span>
<span>隐藏</span>
<svg-icon icon-class="arrow-down" />
</a>
</div>
<template functional>
<card title="常见问题" class="qa-header">
<collapse :collapse-data="props.qaData" :more-btn="true" />
</card>
</template>
<script>
import card from "@/components/Card";
import detail from "@/api/detail.qa.mock";
export default {
name: "CpsQA",
components: {
card
},
props: {
qaData: {
type: Array,
default() {
return detail;
}
},
moreBtn: {
type: Boolean,
default: true
}
},
watch: {
qaData: {
immediate: true,
deep: true,
handler(val) {
this.list = val.map(item => {
item.showItem = false;
return item;
});
}
}
},
data() {
return {
list: [],
more: false
};
},
methods: {
itemClick(index) {
let _item = this.list[index];
_item.show = !_item.show;
this.$set(this.list, index, _item);
},
showMore() {
this.more = !this.more;
}
}
name: "CpsQA"
};
</script>
<style lang="less" scoped>
@import "../../../style/var.less";
.collapse {
@import "../../../../style/var.less";
.qa {
&-header {
.card-header {
padding-bottom: 4px;
}
}
&-item {
background-color: @white;
&.more {
display: none;
}
&-title {
display: flex;
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;
margin-top: 2px;
border-radius: @border-radius-sm / 4 @border-radius-md / 2;
background-color: @orange-light;
box-shadow: 0px 6px 25px 0px rgba(255, 200, 66, 0.2);
}
&-txt {
margin-left: 10px;
font-weight: @font-weight-bold;
font-size: @font-size-14;
line-height: @line-height-lg;
}
.svg-icon {
height: 17px;
width: 17px;
transition: all 0.2s linear;
margin-left: auto;
margin-top: 4px;
}
}
&-content {
display: none;
overflow: hidden;
color: @black;
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;
margin-bottom: 15px;
&-icon {
font-style: normal;
font-weight: @font-weight-bold;
}
&-txt {
margin-left: 8px;
}
}
&.show {
.collapse-item-title {
.svg-icon {
transform: rotate(180deg);
}
}
.collapse-item-content {
display: flex;
}
}
}
}
.collapse-more {
text-align: center;
line-height: @line-height-lg;
padding: 5px 0;
span:nth-child(2) {
display: none;
}
.svg-icon {
height: 11px;
width: 11px;
margin-left: 3px;
transition: all 0.2s linear;
}
&.active {
span:nth-child(1) {
display: none;
}
span:nth-child(2) {
display: inline;
}
.svg-icon {
transform: rotate(180deg);
}
}
}
</style>
src/views/Goods/Detail/modules/CpsRate.vue
View file @ 20e12d35
......@@ -70,7 +70,7 @@ export default {
};
</script>
<style lang="less" scoped>
@import "../../style/var.less";
@import "../../../../style/var.less";
.rate-container {
background-color: @white;
......
src/views/Goods/Detail/modules/DetailFooter.vue
View file @ 20e12d35
<template>
<template functional>
<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>
<p class="det-footer-logo"><img src="../../../../assets/logo-foot.png" alt="logo" /></p>
<p
v-for="(item, index) in props.companyInfo"
:key="index"
:class="{ 'det-footer-offset': item.offset }"
>
{{ item.content }}
</p>
</div>
</template>
<script>
export default {
name: "DetailFooter",
data() {
return {};
props: {
companyInfo: {
type: Array,
default() {
return [];
}
}
}
};
</script>
<style lang="less" scoped>
@import "../../../style/var.less";
<style lang="less">
@import "../../../../style/var.less";
.det-footer {
padding: 25px 36px;
background-color: #fff;
......
src/views/Goods/Detail/modules/DetailHeader.vue
View file @ 20e12d35
<template>
<div class="det-hd">
<img src="../../../assets/logo-top.png" alt="logo" class="det-hd-logo" />
<template functional>
<div
class="det-hd"
:class="props.det.type"
:style="{ backgroundImage: 'url(' + props.det.bgSrc + ')' }"
>
<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>承保
<strong>{{ props.det.company }}</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 @click="btnClick">立即开启保障</cr-button>
<div class="det-hd-insured" :class="{ stamp: props.det.stamp }">
<h1 class="det-hd-insured-title">{{ props.det.title }}</h1>
<small class="det-hd-insured-sub">
<slot>{{ props.det.sub }}</slot>
</small>
<h5 class="det-hd-insured-price" v-html="props.det.price"></h5>
<cr-button type="warning" block>立即开启保障</cr-button>
<div class="det-hd-insured-people">
已有
<em>0</em>位用户投保
<em>{{ props.det.insuredNum }}</em>
位用户投保
</div>
</div>
</div>
</template>
<script>
const BTN_CLICK_EVENT = "click";
export default {
name: "DetailHeader",
data() {
return {};
},
methods: {
btnClick() {
this.$emit(BTN_CLICK_EVENT, 1);
props: {
det: {
type: Object,
default() {
return {
bgSrc: "",
type: "",
company: "",
title: "",
sub: "",
price: "",
insuredNum: 0
};
}
}
}
};
</script>
<style lang="less" scoped>
@import "../../../style/var.less";
<style lang="less">
@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-color: transparent;
background-position: top;
background-repeat: no-repeat;
background-size: contain;
padding: 10px 16px;
&-logo {
......@@ -88,10 +101,13 @@ export default {
border-radius: @border-radius-md;
padding: 30px 32px;
text-align: center;
background: url(../../../assets/goods/detail/stamp.png) no-repeat;
background-repeat: no-repeat;
background-color: #fff;
background-position: bottom right;
background-size: 19%;
&.stamp {
background-image: url(../../../../assets/goods/detail/stamp.png);
}
&-title {
font-size: 32px;
font-weight: @font-weight-bold;
......
src/views/Goods/Detail/modules/GoInsureDialog.vue
View file @ 20e12d35
......@@ -36,12 +36,12 @@
</template>
<script>
import compactCellGroup from "./CompactCellGroup";
import CompactCellGroup from "@/components/CompactCellGroup";
const DIALOG_CHANGE_EVENT = "input";
export default {
name: "GoInsureDialog",
components: {
compactCellGroup
CompactCellGroup
},
props: {
value: null
......@@ -81,7 +81,7 @@ export default {
</script>
<style lang="less" scoped>
@import "../../../style/var.less";
@import "../../../../style/var.less";
.panel {
background-color: @white;
border-radius: @border-radius-md;
......@@ -99,7 +99,7 @@ export default {
border-top-left-radius: @border-radius-md;
border-top-right-radius: @border-radius-md;
padding: @padding-lg @padding-lg 5px @padding-lg;
background: url("../../../assets/dialog-header-bg.png") right no-repeat;
background: url("../../../../assets/dialog-header-bg.png") right no-repeat;
background-size: 34px 25px;
background-position: right center;
h4 {
......
src/views/Goods/Inform/index.less
View file @ 20e12d35
@import "../../style/var.less";
@import "../../../style/var.less";
.inform-container {
background-color: @white;
padding-top: 15px;
......
src/views/Goods/Plan/index.less
View file @ 20e12d35
@import "../../style/var.less";
@import "../../../style/var.less";
.plan-container {
background-color: @white;
padding-bottom: 20px;
......
src/views/Goods/index.vue
View file @ 20e12d35
......@@ -17,10 +17,10 @@
</template>
<script>
import goodsList from "@/api/goodsList.mock";
import AiTestTip from "./modules/AiTestTip";
import GoodList from "@/components/GoodList/index";
import Tabbar from "@/components/Tabbar";
import goodsList from "@/api/goodsList.mock";
import copyright from "@/components/Copyright";
import RecordLayer from "@/components/RecordLayer";
......
src/views/Goods/modules/AiTestTip.vue
View file @ 20e12d35
<template>
<template functional>
<div class="ai-test">
<div class="ai-test-tip">
<h5>不知道怎么买保险</h5>
......@@ -6,7 +6,7 @@
</div>
<cr-row class="ai-test-cell" type="flex" align="center">
<cr-col span="5" class="ai-test-cell-image">
<cr-image width="60px" height="68px" :src="aiImg" />
<cr-image width="60px" height="68px" src="@/assets/goods/ai-mongo.png" />
</cr-col>
<div class="ai-test-cell-title">
<h5>智能<span>风险测评</span></h5>
......@@ -20,14 +20,8 @@
</template>
<script>
import aiImg from "@/assets/goods/ai-mongo.png";
export default {
name: "AiTestTip",
data() {
return {
aiImg
};
}
name: "AiTestTip"
};
</script>
<style lang="less" scoped>
......@@ -35,7 +29,6 @@ export default {
@import "../../../style/mixins.less";
.ai-test {
margin-bottom: 49px;
padding: 20px 16px 25.5px;
&-tip {
text-align: center;
......
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