Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
a0a43001 by simon
Options

首页

1 parent 29c430bd
Expand all
Inline Side-by-side
Showing 20 changed files with 409 additions and 165 deletions
......@@ -438,28 +438,7 @@ textarea {
}
}
.el-select .el-input.is-focus .el-input__inner {
border-color: transparent !important;
}
.ipt .el-input__inner {
border: none !important;
background-color: transparent !important;
padding: 0 !important;
}
.el-select-dropdown__item.selected {
color: $cOrange !important;
}
.el-input__suffix {
display: none;
}
.clarms .el-input__inner {
font-size: 22px;
border: none;
}
.ql-editor {
padding: 0px 0px !important;
......
......@@ -1099,7 +1099,7 @@ module.exports = {
},
title: {
t1: "「平安·傳家福」分紅終身壽險計劃",
t2: "美好重要的事物總是值得更好的守護，「平安·傳家福」分紅終身壽險計劃，提供長期儲蓄回報和終身人壽保障，幫助您持續滾存財富，保護您的收入和財富。 「平安．傳家福」設計具有獨特的功能，並保證最低回報，為您及摯愛家庭的未來做好準備。",
t2: "美好重要的事物總是值得更好的守護，「平安·傳家福」分紅終身壽險計劃，提供長期儲蓄回報和終身人壽保障，幫助您持續滾存財富，保護您的收入和財富。「平安·傳家福」設計具有獨特的功能，並保證最低回報，為您及摯愛家庭的未來做好準備。",
t3: "",
t4: "",
},
......
......@@ -1104,7 +1104,7 @@ module.exports = {
},
title: {
t1: "「平安·传家福」分红终身寿险计划",
t2: "美好重要的事物总是值得更好的守护，「平安·传家福」分红终身寿险计划，提供长期储蓄回报和终身人寿保障，帮助您持续滚存财富，保护您的收入和财富。 「平安．传家福」设计具有独特的功能，并保证最低回报，为您及挚爱家庭的未来做好准备。",
t2: "美好重要的事物总是值得更好的守护，「平安·传家福」分红终身寿险计划，提供长期储蓄回报和终身人寿保障，帮助您持续滚存财富，保护您的收入和财富。「平安·传家福」设计具有独特的功能，并保证最低回报，为您及挚爱家庭的未来做好准备。",
t3: "",
t4: "",
},
......
......@@ -71,7 +71,10 @@ export default {
this.bannerTipsVisible = false;
},
bottomBtnHandle() {
this.btnNavigateTo(this.bottomBtnType, this.bottomBtnLink);
// this.btnNavigateTo(this.bottomBtnType, this.bottomBtnLink);
this.$router.push({
path:"/custom/service?q=m6"
})
},
btnNavigateTo(type, link) {
switch (type) {
......
......@@ -893,9 +893,13 @@ $borderSize: 6px;
.tt {
// width: 100%;
.ff{
.nn{
padding: 24px 0;
}
}
}
.label {
padding: 12px;
}
......@@ -908,63 +912,13 @@ $borderSize: 6px;
padding: 0;
}
}
}
}
.guarantee2 {
.tit {
font-size: $fontSizeTitle-M2;
}
.container {
flex-wrap: wrap;
.table {
margin-top: 24px;
font-size: $fontSize-M2;
width: auto;
.smal {
font-size: $fontSizeSmall-M2;
}
&-item {
flex-wrap: nowrap;
min-height: auto;
.val {
padding: 12px;
}
}
&-item-3 {
.val {
padding: 0;
}
}
&-item-4 {
.val {
padding: 0;
}
}
.titl {
&-item {
font-size: $fontSize-M2;
}
}
&-item2{
}
}
}
// 下载
.download {
margin: 48px auto 0;
......
......@@ -2,79 +2,107 @@
* 页面描述:官网首页
*/
import api from "@/api/api";
import { httpGet, httpPost } from "@/api/fetch-api.js";
import api from '@/api/api';
import {
httpGet,
httpPost
} from '@/api/fetch-api.js';
import {
mapGetters,
mapActions,
mapState
} from "vuex";
var UA = require("ua-device");
import DatePicker from "@/components/date-picker/date-picker.vue";
import { ddMMyyyy2yyyyMMdd } from "@utils/utils.js";
export default {
data() {
return {
key: 'value',
key: "value",
// swiper
swiperOption: {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
pagination: {
el: '.swiper-pagination',
clickable: true,
el: ".swiper-pagination",
clickable: true
},
autoplay: {
delay: 5000,
stopOnLastSlide: false,
disableOnInteraction: false
},
speed: 1000,
speed: 1000
},
bannerList: [],
bannerCandidateList: [],
// 导航菜单
tabList: [{
name: "平安“好e時”<br>自願醫保標準計劃",
url: "",
id: 0,
}, {
name: "「平安 ‧ 傳家福<br>分紅終身壽險計劃",
url: "",
id: 1,
}, {
name: "Ping An 'Pro Easy'<br>VHIS Standard Plan",
url: "",
id: 2,
}, {
name: "Ping An GenRich<br>Insurance Plan",
url: "",
id: 3,
}, {
name: "Ping An 'Pro Easy'<br>VHIS Standard Plan",
url: "",
id: 4,
}],
curTab: {}
}
tabList: [
{
name: "平安“好e時”<br>自願醫保標準計劃",
url: "",
index: 0
},
{
name: "「平安 ‧ 傳家福<br>分紅終身壽險計劃",
url: "",
index: 1
},
{
name: "Ping An 'Pro Easy'<br>VHIS Standard Plan",
url: "",
index: 2
},
{
name: "Ping An GenRich<br>Insurance Plan",
url: "",
index: 3
},
{
name: "Ping An 'Pro Easy'<br>VHIS Standard Plan",
url: "",
index: 4
}
],
curTab: {},
// 投保
quoteData: {
gender: 1
},
// 投保背景图
quoteBgUrl:"https://kdcdn.oss-cn-shenzhen.aliyuncs.com/temp/pingan-life/index-quote-bg-temp.png",
// 表单
formData: {
gender: "",
birthDate: ""
},
// 性别列表
genderList: [
{
n: "先生",
v: "M"
},
{
n: "女士",
v: "F"
}
],
// 错误提示
errTips:""
};
},
components: {
DatePicker
},
components: {},
computed: {
locale() {
return this.$i18n.locale || 'tc';
return this.$i18n.locale || "tc";
},
i18n() {
return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
},
return this.$i18n.messages && this.$i18n.locale
? this.$i18n.messages[this.$i18n.locale]
: {};
}
},
methods: {
initData() {
this.curTab = this.tabList[0];
this.fetchBanner().then(res => {
......@@ -100,7 +128,7 @@ export default {
this.bannerCandidateList.forEach(element => {
bannerList.push(element[key]);
});
this.$set(this, 'bannerList', bannerList);
this.$set(this, "bannerList", bannerList);
},
btnNavigateTo(type, link) {
switch (type) {
......@@ -132,6 +160,33 @@ export default {
// 选择标签
onTabHandler(item) {
this.curTab = item;
},
// 投保组件性别选择
onQuoteSexHandler(gender) {
this.quoteData.gender = gender;
},
onPrevTabHandler() {
if (this.tabList.length <= 0) return;
let index = this.curTab.index;
index--;
if (index < 0) {
index = this.tabList.length - 1;
}
this.curTab = this.tabList[index];
},
onNextTabHandler() {
if (this.tabList.length <= 0) return;
let index = this.curTab.index;
index++;
if (index >= this.tabList.length) {
index = 0;
}
this.curTab = this.tabList[index];
},
toContactUs() {
this.$router.push({
path: "/custom/service?q=m1"
});
}
},
beforeDestroy() {},
......@@ -145,5 +200,4 @@ export default {
} catch (e) {}
});
}
}
};
......
@import '@/styles/_support.scss';
@import "@/styles/_support.scss";
.page {}
.page {
font-size: 22px;
}
.top-space {
height: 27px;
}
.box {
......@@ -61,7 +62,6 @@
min-width: 288px;
margin-left: 12px;
background: url("~@assets/images/vhis/vhis-btn.png");
}
.banner-btn:lang(zh) {
......@@ -105,7 +105,7 @@
font-weight: bold;
color: $cOrange2;
width: 1200px;
max-width: 1200px;
margin: 0 auto;
&-item {
......@@ -177,7 +177,7 @@
cursor: pointer;
.icon {
background-image: url('~@/assets/images/index/icon-contact-tips.png');
background-image: url("~@/assets/images/index/icon-contact-tips.png");
@extend .bis;
width: 35px;
height: 31px;
......@@ -189,12 +189,174 @@
// 线上报价
.quote {
background: url('~@/assets/images/index/index-quote-bg-temp.png') center no-repeat;
// background: url("~@/assets/images/index/index-quote-bg-temp.png") center
// no-repeat;
width: 100%;
height: 1482px;
;
overflow: hidden;
margin: 52px auto 0;
.space1 {
height: 540px;
}
.tit {
font-size: 36px;
font-weight: bold;
text-align: center;
color: $cOrange2;
&:lang(zh) {
letter-spacing: 1.8px;
}
}
.tit2 {
width: 720px;
margin: 40px auto 0;
text-align: center;
color: #ffffff;
text-shadow: 0px 0px 16px rgba(0, 0, 0, 1);
}
.table {
width: 1200px;
margin: 56px auto 0;
&-tab {
position: relative;
width: 100%;
display: flex;
justify-content: center;
margin-left: 2px;
&-item {
background-image: url("~@/assets/images/index/index-tab.png");
@extend .bis;
@extend .fcc;
height: 73px;
margin: 0 -14px;
font-size: $fontSize-M2;
color: $cOrange2;
font-weight: bold;
cursor: pointer;
&-act {
background-image: url("~@/assets/images/index/index-tab-act.png");
color: #ffffff;
}
}
}
&-cont {
@include linear-bg;
height: 380px;
margin: -4px auto 0;
position: relative;
z-index: 11;
display: flex;
.panel {
position: relative;
margin-top: 5px;
width: 50%;
}
.panel-left {
position: relative;
@extend .fcc;
.desc {
&-item {
font-size: 22px;
color: #ffffff;
line-height: 1.6;
&:lang() {
letter-spacing: 1.1px;
}
}
}
}
.panel-right {
background-color: #ffffff;
@extend .fcc;
.func {
}
.func1 {
&-item {
display: flex;
align-items: center;
margin: 32px auto;
.k {
@extend .bb;
padding-right: 12px;
width: 120px;
}
.gender {
display: flex;
&-item {
display: flex;
align-items: center;
margin-right: 30px;
cursor: pointer;
img {
margin-left: 8px;
}
}
}
.age {
.ipt-wrap-linear {
width: 222px;
}
}
}
}
}
.arrow {
position: absolute;
width: 44px;
height: 73px;
top: 32%;
cursor: pointer;
z-index: 21;
}
.arrow-left {
background-image: url("~@/assets/images/index/arrow-left.png");
left: -64px;
}
.arrow-right {
background-image: url("~@/assets/images/index/arrow-right.png");
right: -64px;
}
}
}
.quote-btn {
@include btc4(300px, 50px, 22px);
margin: 40px auto 0;
&:lang(zh) {
letter-spacing: 1.1px;
}
}
.customer-service {
margin-top: 24px;
font-size: 22px;
font-weight: bold;
text-align: center;
color: #ffffff;
.udl {
display: inline-block;
border-bottom: solid 2px #ffffff;
border-radius: 1px;
}
&:lang(zh) {
letter-spacing: 1.1px;
}
}
}
// 联系我们表单
......@@ -217,13 +379,13 @@
}
}
.t2{
.t2 {
margin-top: 50px;
font-size: 24px;
font-weight: bold;
}
.pic-mobile{
.pic-mobile {
margin-top: 248px;
}
}
......@@ -232,22 +394,78 @@
@extend .bb;
flex: 1;
padding-left: 40px;
.form{
.form {
width: 100%;
// height: 600px;
// background-color: wheat;
&-item {
margin-bottom: 28px;
.ipt-wrap-linear {
.cont {
.ipt {
text-align: center;
}
.sel {
}
.textarea {
@extend .bb;
padding-top: 16px;
text-align: left;
height: 238px;
}
.ipt-date {
padding: 0 24px;
width: 100%;
background-color: #ffffff;
border-radius: $borderRadius;
@include border-tans;
border-radius: 5px;
}
}
}
.dear {
width: 40%;
margin-right: 26px;
}
.name {
width: 60%;
}
&:last-child() {
margin-bottom: 0;
}
}
}
.err-tips {
font-size: $fontSizeSmall-M2;
color: $cOrange;
min-height: 28px;
margin: 12px 0;
}
.submit-btn {
@include linear-bg();
margin: 0 auto 0;
@include btc4(300px, 50px, 22px);
&:lang(zh) {
letter-spacing: 1.1px;
}
}
}
}
}
.swiper-button-prev {
background-image: url('~@/assets/images/common/button-prev.png');
background-image: url("~@/assets/images/common/button-prev.png");
left: 360px;
}
.swiper-button-next {
background-image: url('~@/assets/images/common/button-next.png');
background-image: url("~@/assets/images/common/button-next.png");
right: 360px;
}
......@@ -257,7 +475,7 @@
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal>.swiper-pagination-bullets {
.swiper-container-horizontal > .swiper-pagination-bullets {
bottom: 48px;
}
......@@ -281,12 +499,11 @@
.content {
@include content-percent();
}
}
@media (max-width: 768px) {
.content {}
.content {
}
.banner-contaner {
height: auto;
......@@ -302,8 +519,7 @@
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal>.swiper-pagination-bullets {
.swiper-container-horizontal > .swiper-pagination-bullets {
bottom: 2px;
}
}
......
......@@ -15,7 +15,6 @@
color: $cDark;
}
// 提示栏
.alert {
@extend .bb;
......@@ -67,7 +66,7 @@
position: absolute;
top: 26.4px;
right: 24px;
background-image: url('~@/assets/images/common/down-arrow.png');
background-image: url("~@/assets/images/common/down-arrow.png");
width: 12px;
height: 8px;
pointer-events: none;
......@@ -78,7 +77,7 @@
position: absolute;
top: 14.4px;
right: 24px;
background-image: url('~@/assets/images/common/icon-eyes-off.png');
background-image: url("~@/assets/images/common/icon-eyes-off.png");
width: 27px;
height: 24px;
pointer-events: none;
......@@ -86,7 +85,7 @@
}
.eye-act {
background-image: url('~@/assets/images/common/icon-eyes-on.png');
background-image: url("~@/assets/images/common/icon-eyes-on.png");
}
}
......@@ -104,9 +103,9 @@
}
}
// 输入框
.ipt-wrap2 {
.ipt-wrap-linear {
position: relative;
.ipt {
@extend .bb;
width: 100%;
......@@ -115,7 +114,8 @@
border: 2px solid transparent;
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-image: linear-gradient(90deg, #fff, #fff), linear-gradient(90deg, #feab1b, #f15a08);
background-image: linear-gradient(90deg, #fff, #fff),
linear-gradient(90deg, #feab1b, #f15a08);
background-color: #ffffff;
padding: 0 24px;
......@@ -123,29 +123,33 @@
display: flex;
align-items: center;
font-size: 22px;
color: $cFontGray2;
&:lang(zh) {
letter-spacing: 1.1px;
}
}
::-webkit-input-placeholder {
color: rgba(102, 102, 102, 0.5);
}
.down-arrow {
position: absolute;
top: 26.4px;
top: 18px;
right: 24px;
background-image: url('~@/assets/images/common/down-arrow.png');
width: 12px;
height: 8px;
background-image: url("~@/assets/images/common/down-arrow-linear.png");
width: 20px;
height: 15px;
pointer-events: none;
cursor: default;
z-index: 1000;
}
.eye {
position: absolute;
top: 14.4px;
right: 24px;
background-image: url('~@/assets/images/common/icon-eyes-off.png');
background-image: url("~@/assets/images/common/icon-eyes-off.png");
width: 27px;
height: 24px;
pointer-events: none;
......@@ -153,12 +157,10 @@
}
.eye-act {
background-image: url('~@/assets/images/common/icon-eyes-on.png');
background-image: url("~@/assets/images/common/icon-eyes-on.png");
}
}
// 轮播
.swiper-pagination-bullet {
width: 12px !important;
......@@ -173,6 +175,7 @@
.alert {
padding: 4px 36px 4px 12px;
.icon {}
.icon {
}
}
}
......
......@@ -152,6 +152,7 @@
@mixin content-percent($percent:4%) {
box-sizing: border-box;
padding: 0 $percent;
}
@mixin border-tans($borderRadius:1px, $borderSize:2px) {
......
......@@ -2,13 +2,13 @@
$--color-primary: #f05a23;
/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
$--font-path: "~element-ui/lib/theme-chalk/fonts";
@import "~element-ui/packages/theme-chalk/src/index";
// @import '@/styles/_support.scss';
@import "@/styles/_var.scss";
.filter-comp{
.filter-comp {
.el-checkbox-group {
display: flex;
flex-wrap: wrap;
......@@ -22,5 +22,39 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
font-size: 24px;
}
}
}
.el-select .el-input.is-focus .el-input__inner {
border-color: transparent !important;
}
.ipt .el-input__inner {
border: none !important;
background-color: transparent !important;
padding: 0 !important;
}
.el-select-dropdown__item.selected {
color: $cOrange !important;
}
.el-input__suffix {
display: none;
}
.page-index .el-input__inner,
.clarms .el-input__inner {
font-size: 22px;
border: none;
}
.page-index .contact .el-input__inner {
text-align: center;
}
.page-index .quote .el-input__inner {
text-align: center;
color: $cOrange2;
font-size: 22px;
font-weight: bold;
}
......