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";
.sub-text-mixins {
font-size: @font-size-12;
color: @gray-4;
line-height: @line-height-sm;
}
.container {
background-color: @background-color;
margin-bottom: 80px;
}
.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;
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;
align-items: baseline;
margin-bottom: 0 !important;
/deep/ .cr-cell {
&__title {
width: 31%;
flex: none;
}
&__value {
width: 69%;
flex: none;
overflow: initial;
}
}
}
&-switch {
display: flex;
justify-content: space-between;
align-items: center;
flex: 1;
&-card {
padding-top: 0;
}
&-label {
font-size: @font-size-12;
color: @black;
margin-right: 4px;
}
.cr-tag {
margin: 0 auto 0 8px;
color: @white !important;
}
&-option {
display: flex;
align-items: center;
justify-content: right;
}
}
&-pact {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 0;
/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;
}
}
}
}
.intro {
margin: 10px 0;;
padding: 0;
.card-body {
margin-bottom: 0;
}
}
.det-body {
.card {
padding-bottom: 0;
}
/deep/ .card-body {
margin-bottom: 0;
}
}
@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;
margin-bottom: 80px;
}
.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;
margin: @padding-md 0;
}
/deep/ .cr-cell {
&-group {
&::after {
display: none;
}
}
background-color: @gray-1;
border-radius: @border-radius-md;
margin-bottom: 12px;
align-items: center;
&::after {
display: none;
}
&__title {
color: #333333;
}
}
&-item_nobg {
background-color: @white !important;
padding: 10px 0;
overflow: initial;
align-items: baseline;
margin-bottom: 0 !important;
/deep/ .cr-cell {
&__title {
width: 31%;
flex: none;
}
&__value {
width: 69%;
flex: none;
overflow: initial;
}
}
}
&-switch {
display: flex;
justify-content: space-between;
align-items: center;
flex: 1;
&-card {
padding-top: 0;
}
&-label {
font-size: @font-size-12;
color: @black;
margin-right: 4px;
}
.cr-tag {
margin: 0 auto 0 8px;
color: @white !important;
}
&-option {
display: flex;
align-items: center;
justify-content: right;
}
}
&-pact {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 0;
/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;
}
}
}
}
.intro {
margin: 10px 0;;
padding: 0;
.card-body {
margin-bottom: 0;
}
}
.det-body {
.card {
padding-bottom: 0;
}
/deep/ .card-body {
margin-bottom: 0;
}
}
src/views/Goods/detail.vue
View file @ fe64a9e5
......@@ -33,7 +33,7 @@
<h5 class="card-title">开通次年自动续保</h5>
<cr-tag type="warning">小果建议您开通</cr-tag>
<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" />
</div>
</div>
......@@ -176,27 +176,36 @@ export default {
popupShow: false,
currentPupopIndex: null,
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: "投保须知及声明",
url: "http://pages.xyqb.com/p/d3c0c8d6-ddea-4335-8aaf-f09dafc580e9/"
url: "http://mangguo-contract.qthbx.com/taikang-toubaoxuzhi-v1/"
},
{
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: "自动续保", url: "http://pages.xyqb.com/p/d3c0c8d6-ddea-4335-8aaf-f09dafc580e9/" }
{
title: "自动续保服务协议",
url: "http://pages.xyqb.com/p/d3c0c8d6-ddea-4335-8aaf-f09dafc580e9/"
}
],
formData: {
planValue: "3",
insured: "1",
payway: "1",
auto: true,
pact: true
auto: false,
pact: false
},
goInsureState: false
};
......
src/views/Goods/index.vue
View file @ fe64a9e5
<template>
<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-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-sticky>
</cr-sticky> -->
<good-list :list="goodsList" />
<ai-test-tip />
</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