Skip to content

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

fix: UI样式调整

parent f5603c34
Show whitespace changes
Inline Side-by-side
Showing with 77 additions and 50 deletions
src/api/detail.huatai.zhongjixian.js
View file @ a06cb72f
......@@ -4,10 +4,13 @@
* @Description:华太30万轻重疾险
* @Date: 2020-07-27 15:46:37
* @LastEditors: gzw
* @LastEditTime: 2020-08-21 20:00:22
* @LastEditTime: 2020-08-30 12:13:29
*/
import goodsBg from "@/assets/images/goods/detail/zhongjixian/bg.png";
import title from "@/assets/images/goods/detail/zhongjixian/title.png";
import cmd from "@/assets/images/goods/detail/zhongjixian/cmd.png";
import logo from "@/assets/images/goods/detail/zhongjixian/logo.png";
import intro01 from "@/assets/images/goods/detail/zhongjixian/intro-01.png";
import intro02 from "@/assets/images/goods/detail/zhongjixian/intro-02.png";
import intro03 from "@/assets/images/goods/detail/zhongjixian/intro-03.png";
......@@ -21,6 +24,9 @@ export default {
type: "huatai",
company: "华泰财险",
title: "30万重疾轻症保障",
titleImg: title,
cmdImg: cmd,
logo: logo,
sub: "100种重症+40种轻症确诊即赔",
price: [3, "元", "首月"],
subPrice: [5.6, "元/月起", "次月", "（共11期）"],
......
src/api/detail.taikang.yiliaobaozhang.js
View file @ a06cb72f
......@@ -4,7 +4,7 @@
* @Description: 泰康600万医疗保障
* @Date: 2020-07-27 15:46:37
* @LastEditors: gzw
* @LastEditTime: 2020-08-29 11:12:47
* @LastEditTime: 2020-08-30 11:26:03
*/
import goodsBg from "@/assets/images/goods/detail/yiliaoxian/bg.png";
......@@ -101,7 +101,7 @@ export default {
title: "保费",
value: {
needSlot: true,
tpl: "保费与被保人年龄、有无社保有关<br />首月1元，次月3.6元/月起"
tpl: "<strong>保费与被保人年龄、有无社保有关<br />首月1元，次月3.6元/月起</strong>"
}
}
],
......
src/api/goodsList.mock.js
View file @ a06cb72f
......@@ -2,6 +2,7 @@ import good01 from "@/assets/images/goods/goods-01.png";
import good02 from "@/assets/images/goods/goods-02.png";
import good03 from "@/assets/images/goods/goods-03.png";
import good04 from "@/assets/images/goods/goods-04.png";
import good05 from "@/assets/images/goods/goods-05.png";
import medical_closed from "@/assets/images/user/medical_closed@2x.png";
import casualty_closed from "@/assets/images/user/casualty_closed@2x.png";
import illness_closed from "@/assets/images/user/illness_closed@2x.png";
......@@ -91,7 +92,7 @@ export default [
id: "BNZJX001",
itype: "cii",
scope: [1, 3],
img: good02,
img: good05,
url: "",
title: "百年康惠保(2.0)重大疾病险",
sub: "终身保障155种重疾，最多赔付6次",
......
src/assets/logo-foot.png
View replaced file @ f5603c34 View file @ a06cb72f
src/assets/logo-foot.png

4.26 KB | W: | H:

src/assets/logo-foot.png

7.29 KB | W: | H:

src/assets/logo-foot.png
src/assets/logo-foot.png
src/assets/logo-foot.png
src/assets/logo-foot.png
  • 2-up
  • Swipe
  • Onion skin
src/components/Collapse.vue
View file @ a06cb72f
......@@ -30,7 +30,7 @@
<div class="collapse-more" :class="{ active: more }" v-if="moreBtn">
<a href="javascript:;" @click="showMore">
<span>查看更多</span>
<span>隐藏</span>
<span>收起</span>
<svg-icon icon-class="arrow-down" />
</a>
</div>
......
src/components/Copyright.vue
View file @ a06cb72f
......@@ -47,8 +47,8 @@ export default {
text-align: center;
margin-bottom: 10px;
img {
width: 111px;
height: 35px;
width: 121px;
height: 66px;
}
}
}
......
src/components/GoodList/index.less
View file @ a06cb72f
......@@ -75,10 +75,18 @@
}
&-glory {
position: absolute;
top: 0;
bottom: 0;
left: 0;
z-index: 98;
background-color: #fcfe67 !important;
width: 72px;
height: 20px;
line-height: 20px;
font-size: 11px !important;
text-align: center;
color: #666666 !important;
border-radius: 0px 0px 14px 14px !important;
background-color: rgba(255, 255, 255, 0.6) !important;
padding: 0;
}
&-info {
max-height: 72px;
......
src/components/GoodList/index.vue
View file @ a06cb72f
......@@ -21,10 +21,10 @@
@click.native="clickItem(it)"
>
<cr-col span="7" class="goods-list-item-img">
<cr-tag type="warning" shape="round" class="goods-list-item-glory" v-if="it.glory">
{{ it.glory }}
</cr-tag>
<img :src="it.img" />
<div class="goods-list-item-glory">
{{ it.company }}
</div>
<img :src="it.img" :style="{ 'box-shadow': `0px 8px 14px 0px ${it.shadowColor}` }" />
</cr-col>
<cr-col span="17" class="goods-list-item-info">
<h5>{{ it.title || "-" }}</h5>
......@@ -53,9 +53,9 @@
@click.native="clickItem(it)"
>
<cr-col span="7" class="goods-list-item-img">
<cr-tag type="warning" shape="round" class="goods-list-item-glory" v-if="it.glory">
{{ it.glory }}
</cr-tag>
<div class="goods-list-item-glory">
{{ it.company }}
</div>
<img :src="it.img" :style="{ 'box-shadow': `0px 8px 14px 0px ${it.shadowColor}` }" />
</cr-col>
<cr-col span="17" class="goods-list-item-info">
......
src/style/index.less
View file @ a06cb72f
......@@ -2,13 +2,6 @@
@import "var.less";
@import "mixins.less";
* {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;
}
html,
body,
#app {
......
src/views/Consultant/Buy/index.less
View file @ a06cb72f
......@@ -49,8 +49,12 @@
display: block;
font-size: @font-size-14;
font-weight: @font-weight-bold;
line-height: 18px;
color: #000;
line-height: 24px;
width: 140px;
margin: 0 auto;
color: @white;
background-color: @orange-dark;
border-radius: 32px 22px 32px 22px;
}
&-sub {
display: block;
......@@ -61,12 +65,14 @@
}
&-card {
box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.07);
border-radius: 44px 14px 14px 14px;
border-radius: 14px;
padding: 20px 20px 32px;
background-color: #fff;
&-title {
.sub-text-mixins();
text-align: center;
color: @black;
font-size: 14px;
}
.cr-button {
height: @button-large-height + 10;
......@@ -171,15 +177,15 @@
h5 {
font-size: @font-size-16;
}
p:last-child {
font-weight: @font-weight-bold;
p {
color: #666666;
}
}
}
&-list {
background-color: @gray-1;
border-radius: @border-radius-md;
padding: 0 14px;
padding: 0 14px 15px;
&-item {
margin-bottom: 5px;
}
......
src/views/Consultant/Buy/index.vue
View file @ a06cb72f
......@@ -4,7 +4,6 @@
<img src="../../../assets/logo-top.png" alt="logo" class="cul-hd-logo" />
<div class="cul-hd-rec">
<h4 class="cul-hd-rec-title">最高节省50%保费</h4>
<small class="cul-hd-rec-sub">帮你量身选保险</small>
</div>
<div class="cul-hd-card">
<div class="cul-hd-card-title">您将获得的服务</div>
......@@ -88,6 +87,7 @@ import { mapActions, mapState } from "vuex";
import { create, goPay, getRemainNum } from "@/api/consultant";
import Card from "@/components/Card";
import Collapse from "@/components/Collapse";
import PayWaitLayer from "@/components/PayWaitLayer";
import CpsQa from "../../Goods/Detail/modules/CpsQA";
const SUM = 300;
export default {
......@@ -96,7 +96,8 @@ export default {
Card,
CpsQa,
// eslint-disable-next-line
Collapse
Collapse,
PayWaitLayer
},
props: {
state: {
......
src/views/Consultant/Exclusive/index.less
View file @ a06cb72f
@import "../Buy/index.less";
.container {
background-color: @white;
overflow: hidden;
&::after {
content: " ";
display: block;
height: 80px;
}
}
.cul-hd {
background: #fff url("../../../assets/images/consultant/culstor-bg.png") top no-repeat;
......
src/views/Consultant/Plan/index.less
View file @ a06cb72f
@import "../Success/index.less";
.container {
background-color: @white;
overflow: hidden;
background-color: @background-color;
&::after {
content: " ";
display: block;
height: 80px;
}
}
.cul-hd {
background: url("../../../assets/images/consultant/linear-bg.png") top no-repeat;
......
src/views/Goods/Detail/AIDetail.vue
View file @ a06cb72f
......@@ -12,7 +12,7 @@
<div class="det-body">
<card title="保险计划" :option="['查看详情']" @option-click="openIframePupop(4)">
<cr-radio-btn v-model="formData.amountInsured" :radio-data="planOptions" />
<compactCellGroup :cell-data="planCellData" :text-bold="true" />
<compactCellGroup :cell-data="planCellData" :text-bold="true" :font-size="14" />
<plan-tip :tip-list="planTipOptions" />
</card>
<div id="det_insure">
......
src/views/Goods/Detail/CIIDetail.vue
View file @ a06cb72f
......@@ -12,7 +12,7 @@
<div class="det-body">
<card title="保险计划" :option="['查看详情']" @option-click="openIframePupop(4)">
<cr-radio-btn v-model="formData.amountInsured" :radio-data="planOptions" />
<compactCellGroup :cell-data="planCellData" :text-bold="true" />
<compactCellGroup :cell-data="planCellData" :text-bold="true" :font-size="14" />
<plan-tip :tip-list="planTipOptions" />
</card>
<div id="det_insure">
......
src/views/Goods/Detail/LIDetail.vue
View file @ a06cb72f
......@@ -43,7 +43,7 @@
</div>
<div id="det_notice">
<protocol-read
title="理赔须知"
title="投保须知"
:options="[]"
:text-bold="true"
v-model="read"
......
src/views/Goods/Detail/index.less
View file @ a06cb72f
......@@ -10,7 +10,7 @@
&::after {
content: " ";
display: block;
height: 60px;
height: 80px;
}
@{deep} .cr-field--error-message {
display: none;
......@@ -75,9 +75,9 @@
}
.cr-button {
border-radius: @border-radius-sm !important;
font-size: @font-size-12;
font-size: @font-size-12 + 1;
height: @button-default-height !important;
line-height: @button-default-line-height !important;
line-height: @button-default-line-height - 1 !important;
width: 110px;
}
}
......
src/views/Goods/Detail/modules/DetailFooter.vue
View file @ a06cb72f
......@@ -47,10 +47,10 @@ export default {
}
&-logo {
text-align: center;
margin-bottom: 19px;
margin-bottom: 10px;
img {
width: 111px;
height: 35px;
width: 121px;
height: 66px;
}
}
}
......
src/views/Goods/Detail/modules/GoInsureDialog.vue
View file @ a06cb72f
......@@ -5,7 +5,7 @@
<slot>
<div class="pay-tip">*不满意可随时退保</div>
<div class="pay-protocol">
<div class="pay-protocol-tip">投保前请阅读</div>
<div class="pay-protocol-tip">投保前请阅读并同意</div>
<div class="pay-protocol-link">
<a
href="javascript:;"
......@@ -139,7 +139,7 @@ export default {
margin-bottom: 18px;
&-tip {
font-size: @font-size-12;
color: @gray-4;
color: @black;
line-height: @line-height-lg;
margin-bottom: 4px;
}
......
src/views/Goods/Detail/modules/NavTab.vue
View file @ a06cb72f
......@@ -57,7 +57,7 @@ export default {
// 所有锚点元素的 offsetTop
const offsetTopArr = [];
navContents.forEach(item => {
offsetTopArr.push(item.offsetTop);
offsetTopArr.push(item.offsetTop + item.offsetHeight - 60);
});
// 获取当前文档流的 scrollTop
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
......@@ -66,7 +66,7 @@ export default {
for (let n = 0; n < offsetTopArr.length; n++) {
// 如果 scrollTop 大于等于第n个元素的 offsetTop 则说明 n-1 的内容已经完全不可见
// 那么此时导航索引就应该是n了
if (scrollTop >= offsetTopArr[n]) {
if (scrollTop >= (offsetTopArr[n - 1] || 0)) {
navIndex = n;
}
}
......@@ -78,7 +78,7 @@ export default {
scrollTo(index) {
const _val = this.navList[index].value;
// 获取目标的 offsetTop
const targetOffsetTop = document.querySelector(`#det_${_val}`).offsetTop;
const targetOffsetTop = document.querySelector(`#det_${_val}`).offsetTop - 50;
document.body.scrollTop = targetOffsetTop;
document.documentElement.scrollTop = targetOffsetTop;
}
......
src/views/Goods/Detail/modules/ProtocolRead.vue
View file @ a06cb72f
<template>
<card :title="title" :option="options" footer="协议" @option-click="openIframe(6)">
<compactCellGroup :cell-data="cellData" font-size="14" />
<compactCellGroup :cell-data="cellData" :text-bold="true" font-size="14" />
<slot></slot>
<template v-slot:footer>
<div class="insure-form-pact" slot="footer">
......
src/views/Home/index.vue
View file @ a06cb72f
......@@ -86,12 +86,12 @@
/>
</a>
</div>
<div class="home-phone">
<!-- <div class="home-phone">
<p>
客服电话：<a :href="`tel:${tel}`">{{ tel }}</a>
</p>
<p>服务时间：{{ serviceHours }}</p>
</div>
</div> -->
<copyright :logo="true" />
<tabbar></tabbar>
</div>
......
src/views/Policy/Add/index.less
View file @ a06cb72f
......@@ -7,7 +7,7 @@
&::after {
content: " ";
display: block;
height: 70px;
height: 80px;
}
}
.policy {
......
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