Skip to content

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

"feat: 产品列表完善"

parent 2b88a0bd
Hide whitespace changes
Inline Side-by-side
Showing with 189 additions and 14 deletions
src/service/cherry-ui.js
View file @ d038e6c5
......@@ -5,15 +5,15 @@ import "@qg/cherry-ui/dist/cherry.css";
const {
Button,
// Image,
Image,
// Icon,
// Cell,
// CellGroup,
// Row,
// Col,
Row,
Col,
// Popup,
// Overlay,
// Divider,
Divider,
// Loading,
// Toast,
// Uploader,
......@@ -47,5 +47,9 @@ const {
} = cherry;
Vue.use(Button);
Vue.use(Image);
Vue.use(Row);
Vue.use(Col);
Vue.use(Divider);
Vue.use(Tabbar);
Vue.use(TabbarItem);
src/style/index.less
View file @ d038e6c5
@import "var.less";
html,body {
height: 100%;
}
body {
font-family: @font-family;
}
\ No newline at end of file
background-color: @background-color;
}
.cr-button {
padding: 0 @padding-sm !important;
font-weight: 600;
&--warning {
color: @button-warning-color !important;
background-color: @button-warning-background-color !important;
border: 1px solid @button-warning-border-color !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;
}
}
src/style/var.less
View file @ d038e6c5
......@@ -6,7 +6,8 @@
@gray-2: #D5D8DE;
@gray-3: #D0CFCF;
@gray-4: #999999;
@gray-5: #333333;
@gray-5: #666666;
@gray-6: #333333;
@red: #F94C4C;
@blue: #787EFF;
@blue-light: #858AFF;
......@@ -31,11 +32,16 @@
@background-color: #F6F3F7;
@background-color-light: #FFFEFF;
@line-height-sm: 16px;
@line-height-md: 22px;
@line-height-lg: 24px;
// Border
@border-width-base: 1px;
@border-radius-sm: 8px;
@border-radius-md: 14px;
@border-radius-lg: 16px;
@border-radius-lx: 20px;
@border-radius-max: 999px;
// Padding
......@@ -81,8 +87,8 @@
@button-primary-border-color: #f4f5ff;
@button-warning-color: @black;
@button-warning-background-color: @orange;
@button-warning-border-color: @orange;
@button-warning-background-color: @orange-light;
@button-warning-border-color: @orange-light;
@button-border-width: @border-width-base;
@button-border-radius: @border-radius-sm;
......
src/views/Goods/index.less
View file @ d038e6c5
.fff {
font-size: 36px;
@import "../../style/var.less";
.cell-title-mixin {
h5 {
color: @black;
margin: 0 0 4px;
font-size: @font-size-16;
line-height: @line-height-lg;
}
small {
display: block;
color: @gray-4;
font-size: @font-size-12;
line-height: @line-height-md;
}
}
.container {
background-color: @background-color;
}
.goods-head {
/deep/ .cr-tabbar {
background-color: #f5f5f5;
font-size: @font-size-16;
padding: @padding-lg+1 0;
&-item {
position: relative;
&::after {
position: absolute;
left: 0;
top: 26px;
transition: width .2s linear;
content: " ";
display: block;
width: 0;
height: 4px;
background: @orange-light;
border-radius: @border-radius-lx;
}
&--active {
font-weight: 600;
&::after {
width: 32px;
}
}
}
}
}
.goods-list {
background-color: @white;
padding: 18px 20px;
.cell-title-mixin();
&_head {
margin-bottom: 15px;
}
// &_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;
}
}
}
}
.ai-test {
padding: 20px 16px 25.5px;
&_tip {
text-align: center;
.cell-title-mixin();
margin-bottom: @padding-md;
}
&_cell {
background-color: @white;
border-radius: @border-radius-md;
padding: 0 0 0 @padding-xs;
&-image {
.cr-image {
display: block;
margin: 0 auto;
}
}
&-title {
padding: 0 10px 0 5px;
.cell-title-mixin();
span {
color: @orange-dark;
}
}
&-btn {
width: 76px;
.cr-button {
border-radius: @border-radius-sm !important;
}
}
}
}
\ No newline at end of file
src/views/Goods/index.vue
View file @ d038e6c5
......@@ -9,19 +9,62 @@
</cr-tabbar>
</div>
<div class="goods-list">
list
<div class="goods-list_head">
<h5>住院医疗险</h5>
<small>全网精选推荐文案全网精选</small>
</div>
<div class="goods-list_children">
<cr-row type="flex" class="goods-list_item">
<cr-col span="7" class="goods-list_item-img">
<cr-image width="72px" height="72px" :src="goodList[0].img" />
</cr-col>
<cr-col span="17" class="goods-list_item-info">
<h5>国民保·百万重疾险</h5>
<small>优势介绍 | 优势介绍 | 优势介绍 | 优势介绍</small>
<div class="goods-list_item-price">
<span class="goods-list_item-price-amount">¥2.3</span>
<span class="goods-list_item-price-unit">/月起</span>
</div>
</cr-col>
</cr-row>
<cr-divider :hairline="false" :style="{ color: '#e3e5e8' }" />
</div>
</div>
<div class="ai-test">
<div class="ai-test_tip">
<h5>不知道怎么买保险</h5>
<small>试一试智能风险评测，推荐最适合你的保险</small>
</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-col>
<div class="ai-test_cell-title">
<h5>智能<span>风险测评</span></h5>
<small>AI小果：为您提供30s快速测评</small>
</div>
<div class="ai-test_cell-btn">
<cr-button type="warning">开始测评</cr-button>
</div>
</cr-row>
</div>
</div>
</template>
<script>
import "./index.less";
export default {
name: "GoodsList",
data: function() {
data() {
return {
active: 2
aiImg: require("../../assets/goods/ai-mongo.png"),
active: 0,
goodList: [
{
img: require("../../assets/goods/goods-01.png")
}
]
};
}
};
</script>
<style lang="less" src="./index.less" scoped></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