Skip to content

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

feat: 详情样式调整

parent fffdc5e4
Hide whitespace changes
Inline Side-by-side
Showing with 150 additions and 140 deletions
src/views/Goods/detail.less
View file @ fe64a9e5
@import "../../style/var.less"; @import "../../style/var.less";
.sub-text-mixins { .sub-text-mixins {
font-size: @font-size-12; font-size: @font-size-12;
color: @gray-4; color: @gray-4;
line-height: @line-height-sm; line-height: @line-height-sm;
} }
.container { .container {
background-color: @background-color; background-color: @background-color;
margin-bottom: 80px; margin-bottom: 80px;
} }
.plan-tip { .plan-tip {
font-size: @font-size-11; font-size: @font-size-11;
color: @gray-5; color: @gray-5;
line-height: @line-height-sm; line-height: @line-height-sm;
margin-top: 14px; margin-top: 14px;
.svg-icon { .svg-icon {
margin-right: 3px; margin-right: 3px;
width: 12px; width: 12px;
height: 12px; height: 12px;
} }
&_offset { &_offset {
margin-right: 4px; margin-right: 4px;
} }
} }
.insure-form { .insure-form {
&-title { &-title {
font-size: @font-size-16; font-size: @font-size-16;
font-weight: @font-weight-bold; font-weight: @font-weight-bold;
margin: @padding-md 0; margin: @padding-md 0;
} }
/deep/ .cr-cell { /deep/ .cr-cell {
&-group { &-group {
&::after { &::after {
display: none; display: none;
} }
} }
background-color: @gray-1; background-color: @gray-1;
border-radius: @border-radius-md; border-radius: @border-radius-md;
margin-bottom: 12px; margin-bottom: 12px;
&::after { align-items: center;
display: none; &::after {
} display: none;
&__title { }
color: #333333; &__title {
} color: #333333;
} }
&-item_nobg { }
background-color: @white !important; &-item_nobg {
padding: 10px 0; background-color: @white !important;
overflow: initial; padding: 10px 0;
align-items: baseline; overflow: initial;
margin-bottom: 0 !important; align-items: baseline;
/deep/ .cr-cell { margin-bottom: 0 !important;
&__title { /deep/ .cr-cell {
width: 31%; &__title {
flex: none; width: 31%;
} flex: none;
&__value { }
width: 69%; &__value {
flex: none; width: 69%;
overflow: initial; flex: none;
} overflow: initial;
} }
} }
&-switch { }
display: flex; &-switch {
justify-content: space-between; display: flex;
align-items: center; justify-content: space-between;
flex: 1; align-items: center;
&-card { flex: 1;
padding-top: 0; &-card {
} padding-top: 0;
&-label { }
font-size: @font-size-12; &-label {
color: @black; font-size: @font-size-12;
margin-right: 4px; color: @black;
} margin-right: 4px;
.cr-tag { }
margin: 0 auto 0 8px; .cr-tag {
color: @white !important; margin: 0 auto 0 8px;
} color: @white !important;
&-option { }
display: flex; &-option {
align-items: center; display: flex;
justify-content: right; align-items: center;
} justify-content: right;
} }
&-pact { }
display: flex; &-pact {
justify-content: space-between; display: flex;
align-items: center; justify-content: space-between;
padding: 14px 0; align-items: center;
/deep/ .cr-checkbox__label { padding: 14px 0;
font-size: @font-size-11; /deep/ .cr-checkbox__label {
color: @gray-4; font-size: @font-size-11;
line-height: @line-height-lg; color: @gray-4;
} line-height: @line-height-lg;
&-link { }
margin-top: -3.5px; &-link {
a { margin-top: -3.5px;
font-size: @font-size-11; a {
vertical-align: middle; font-size: @font-size-11;
} vertical-align: middle;
i { }
display: inline-block; i {
width: 0; display: inline-block;
height: 12px; width: 0;
border-right: 1px @blue solid; height: 12px;
vertical-align: middle; border-right: 1px @blue solid;
margin: 0 3px; vertical-align: middle;
} margin: 0 3px;
} }
} }
} }
.intro { }
margin: 10px 0;; .intro {
padding: 0; margin: 10px 0;;
.card-body { padding: 0;
margin-bottom: 0; .card-body {
} margin-bottom: 0;
} }
.det-body { }
.card { .det-body {
padding-bottom: 0; .card {
} padding-bottom: 0;
/deep/ .card-body { }
margin-bottom: 0; /deep/ .card-body {
} margin-bottom: 0;
} }
}
src/views/Goods/detail.vue
View file @ fe64a9e5
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
<h5 class="card-title">开通次年自动续保</h5> <h5 class="card-title">开通次年自动续保</h5>
<cr-tag type="warning">小果建议您开通</cr-tag> <cr-tag type="warning">小果建议您开通</cr-tag>
<div class="insure-form-switch-option"> <div class="insure-form-switch-option">
<span class="insure-form-switch-label">已开通</span> <span class="insure-form-switch-label">{{ formData.auto ? "已" : "未" }}开通</span>
<cr-switch v-model="formData.auto" active-color="#FFC842" size="23.5px" /> <cr-switch v-model="formData.auto" active-color="#FFC842" size="23.5px" />
</div> </div>
</div> </div>
...@@ -176,27 +176,36 @@ export default { ...@@ -176,27 +176,36 @@ export default {
popupShow: false, popupShow: false,
currentPupopIndex: null, currentPupopIndex: null,
popupArray: [ popupArray: [
{ title: "保险条款", url: "http://pages.xyqb.com/p/d3c0c8d6-ddea-4335-8aaf-f09dafc580e9/" }, {
{ title: "健康告知", url: "http://pages.xyqb.com/p/d3c0c8d6-ddea-4335-8aaf-f09dafc580e9/" }, title: "保险条款",
url: "http://mangguo-contract.qthbx.com/taikang-bao-xian-tiao-kuan-v1/"
},
{
title: "健康告知",
url: "http://mangguo-contract.qthbx.com/taikang-jian-kang-gao-zhi-v1/"
},
{ {
title: "投保须知及声明", title: "投保须知及声明",
url: "http://pages.xyqb.com/p/d3c0c8d6-ddea-4335-8aaf-f09dafc580e9/" url: "http://mangguo-contract.qthbx.com/taikang-toubaoxuzhi-v1/"
}, },
{ {
title: "平台服务协议", title: "平台服务协议",
url: "http://pages.xyqb.com/p/d3c0c8d6-ddea-4335-8aaf-f09dafc580e9/" url: "http://mangguo-contract.qthbx.com/fu-wu-xie-yi-v1/"
}, },
{ title: "保险计划" }, { title: "保险计划" },
{ title: "保险计划" }, { title: "保险计划" },
{ title: "完整费率" }, { title: "完整费率" },
{ title: "自动续保", url: "http://pages.xyqb.com/p/d3c0c8d6-ddea-4335-8aaf-f09dafc580e9/" } {
title: "自动续保服务协议",
url: "http://pages.xyqb.com/p/d3c0c8d6-ddea-4335-8aaf-f09dafc580e9/"
}
], ],
formData: { formData: {
planValue: "3", planValue: "3",
insured: "1", insured: "1",
payway: "1", payway: "1",
auto: true, auto: false,
pact: true pact: false
}, },
goInsureState: false goInsureState: false
}; };
......
src/views/Goods/index.vue
View file @ fe64a9e5
<template> <template>
<div class="container"> <div class="container">
<cr-sticky class="goods-head"> <!-- <cr-sticky class="goods-head">
<cr-tabbar v-model="active" active-color="#333" inactive-color="#666"> <cr-tabbar v-model="active" active-color="#333" inactive-color="#666">
<cr-tabbar-item>全部</cr-tabbar-item> <cr-tabbar-item>全部</cr-tabbar-item>
<cr-tabbar-item>成人</cr-tabbar-item> <cr-tabbar-item>成人</cr-tabbar-item>
<cr-tabbar-item>老年</cr-tabbar-item> <cr-tabbar-item>老年</cr-tabbar-item>
<cr-tabbar-item>少儿</cr-tabbar-item> <cr-tabbar-item>少儿</cr-tabbar-item>
</cr-tabbar> </cr-tabbar>
</cr-sticky> </cr-sticky> -->
<good-list :list="goodsList" /> <good-list :list="goodsList" />
<ai-test-tip /> <ai-test-tip />
</div> </div>
......
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