Skip to content

dev / pingan-life-index-pro

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

no message

1 parent 181aed6a
Inline Side-by-side
Showing 45 changed files with 938 additions and 397 deletions
......@@ -6,6 +6,7 @@ node_modules
.DS_Store
sync.sh
git.sh
/sandbox
# local env files
.env.local
......
......@@ -28,16 +28,20 @@ export default {
})
},
methods: {
...mapActions(["pcorphone"])
...mapActions(["pcorphone"]),
// 设置UA
refreshUA() {
let output = new UA(navigator.userAgent);
let deviceType = output.device.type;
let isMobile = deviceType == "mobile";
this.$store.commit("IS_MOBILE", isMobile);
}
},
created() {
let _this = this;
// 设置UA
let output = new UA(navigator.userAgent);
let deviceType = output.device.type;
let isMobile = deviceType == "mobile";
this.$store.commit("IS_MOBILE", isMobile);
// window.onresize = () => {
// this.refreshUA();
// };
this.refreshUA();
//
let userInfoStr = decodeURIComponent(getCookie("_user_profile"));
if (userInfoStr) {
......@@ -293,18 +297,7 @@ textarea {
color: $cLightBlack;
}
.cOrange {
color: $cOrange;
}
.cGreen {
color: $cGreen;
}
.cGray {
color: $cGray;
}
.cDark {
color: $cDark;
}
#app {
border: 0;
......@@ -316,8 +309,6 @@ textarea {
position: relative;
margin: 0 auto;
width: 100%;
// max-width: 1024px; // 设计稿宽度
// min-height: 40rem;
&::after {
display: table;
......@@ -327,63 +318,35 @@ textarea {
}
.content {
// max-width: 1024px;
max-width: 1200px;
width: 100%;
margin: 0 auto;
}
.box-w {
// max-width: 1024px;
// max-width: 950px;
max-width: 1200px;
width: 100%;
margin: 0 auto;
}
.box {
// max-width: 950px;
max-width: 1200px;
width: 100%;
margin: 0 auto;
}
.focus {
border: 1px solid $cOrange;
}
.swiper-pagination-bullet {
width: 1rem !important;
height: 1rem !important;
}
.swiper-pagination-bullet-active {
background: $cOrange !important;
.m-width {
box-sizing: border-box;
padding: 0 4%;
}
.ipt:focus {
border-color: $cOrange !important;
.focus {
border: 1px solid $cOrange;
}
.ipt.err {
border-color: $cOrange !important;
}
.ipt-wrap {
.ipt {
@extend .bb;
width: 100%;
height: 4.5rem;
border-radius: 4.5rem;
border: solid 1px #dcdddd !important;
background-color: #ffffff;
padding: 0 2rem;
flex: 1;
letter-spacing: .1rem;
}
}
// 视频
// // 视频
.video-js {
background-color: transparent !important;
}
......@@ -394,7 +357,6 @@ textarea {
left: 0 !important;
right: 0 !important;
margin: auto !important;
// display: none !important;
}
.video-js .vjs-slider {
......@@ -404,4 +366,25 @@ textarea {
.video-js .vjs-poster {
background-color: transparent !important;
}
@media (max-width: 1200px) {
.page-index {
.video-js {
width: 100% !important;
max-width: 100% !important;
}
}
}
@media (max-width: 768px) {
$fontSizeTitle: $fontSizeTitle-M;
$fontSize: $fontSize-M;
$fontSizeSmall: $fontSizeSmall-M;
}
@media (max-width: 768px) {
$fontSizeTitle: $fontSizeTitle-M;
$fontSize: $fontSize-M;
$fontSizeSmall: $fontSizeSmall-M;
}
</style>
......
......@@ -198,7 +198,8 @@ export default {
month,
date
} = this;
this.dateValue = `${year}-${month}-${date}`;
// this.dateValue = `${year}-${month}-${date}`;
this.formatDateValue(year, month, date);
this.showCalendar();
},
// 选择月份
......@@ -212,7 +213,8 @@ export default {
month,
date
} = this;
this.dateValue = `${year}-${month}-${date}`;
// this.dateValue = `${year}-${month}-${date}`;
this.formatDateValue(year, month, date);
},
// 选择年份
selectYear(item) {
......@@ -226,7 +228,8 @@ export default {
month,
date,
} = this;
this.dateValue = `${year}-${month}-${date}`;
// this.dateValue = `${year}-${month}-${date}`;
this.formatDateValue(year, month, date);
},
// 计算year渲染列表
......@@ -301,6 +304,15 @@ export default {
return;
}
},
formatDateValue(year, month, date) {
if (month < 10) {
month = "0" + month
}
if (date < 10) {
date = "0" + date
}
this.dateValue = `${year}-${month}-${date}`;
},
initData() {}
},
mounted() {},
......
......@@ -20,7 +20,7 @@
margin-left: 0px;
@extend .bb;
width: 450px;
max-width: 450px;
height: 320px;
border-radius: $borderRadius;
background-color: wheat;
......@@ -98,7 +98,8 @@
// 日
.day {}
.month,.year {
.month,
.year {
margin: 36px auto 0;
......@@ -192,3 +193,12 @@
left: 0;
top: 0;
}
@media (max-width: 768px) {
.date-wrap {
.calendar-wrap {
padding: 24px 12px 12px;
}
}
}
......
......@@ -63,7 +63,6 @@
}
}
.user {
width: 9.25rem;
height: 3rem;
......@@ -75,10 +74,8 @@
color: #ffffff;
margin: 0 auto;
span {
max-width: 4.25rem;
/* 51/12 */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
......
@import '@/styles/_support';
.v-footer {
font-family: MicrosoftYaHei;
color: #ffffff;
background-color: #2e2b2a;
font-size: $fontSize;
.footer-containter {
margin: 0 auto;
width: 1200px;
max-width: 1200px;
.cont {
.logo-wrap {
padding: 2.166667rem 0;
......@@ -51,16 +49,13 @@
margin-bottom: 2rem;
}
}
}
// 导航
.nav {
// flex: 1;
display: flex;
.nav-v {
}
.nav-v {}
.n-item {
cursor: pointer;
......@@ -68,6 +63,7 @@
}
}
// 公众号
.public {
text-align: left;
margin-left: 5.32rem;
......@@ -106,20 +102,23 @@
}
}
@media (max-width: 950px) {
@media (max-width: 1200px) {
.v-footer {
@include content-percent();
.footer-containter {
.cont {
.info {
display: block;
.hotline {}
.nav {
margin-top: 2rem;
// flex: d;
display: flex;
.nav-v {
// margin: 0 1.6rem 0 0;
width: 100%;
}
......@@ -128,7 +127,8 @@
}
}
.focus {
.public {
margin: 0;
margin-top: 2rem;
text-align: left;
}
......@@ -138,7 +138,57 @@
box-sizing: border-box;
padding-right: 2rem;
}
}
}
}
}
@media (max-width: 768px) {
.v-footer {
font-size: $fontSizeSmall-M;
.footer-containter {
.cont {
.info {
display: flex;
justify-content: space-between;
.hotline {
min-width: 0;
.phone {
font-size: $fontSizeSmall-M !important;
font-weight: bold !important;
}
}
.nav {
display: none;
margin-top: 0;
.nav-v {}
.n-item {}
}
.nav2 {
display: block;
}
.public {
margin: 0;
}
// 公共组件
.n-item {
margin-bottom: 2rem;
&:first-child {
margin-bottom: 2rem;
}
}
}
.copyright {}
}
}
}
......
......@@ -37,8 +37,16 @@
<div class="n-item">{{$t('footer.contactInformation')}}</div>
<div class="n-item">{{$t('footer.service')}}</div>
</div>
</div>
<div class="nav nav2">
<div class="nav-v">
<div @click="toPage('privacy')" class="n-item">{{$t('footer.privacy')}}</div>
<div @click="toPage('terms')" class="n-item">{{$t('footer.terms')}}</div>
<div @click="toPage('protocol')" class="n-item">{{$t('footer.protocol')}}</div>
</div>
</div>
<div class="public">
<div class="tit">{{$t('footer.qrcode')}}</div>
<!-- <img class="qrcode" src="@/assets/images/home/qrcode-focus.png" alt=""> -->
......
......@@ -26,20 +26,20 @@ export default {
name: "繁",
path: "",
list: [{
name: "繁",
path: "",
value: "tc"
},
{
name: "简",
path: "",
value: "zh"
},
{
name: "EN",
path: "",
value: "en"
},
name: "繁",
path: "",
value: "tc"
},
{
name: "简",
path: "",
value: "zh"
},
{
name: "EN",
path: "",
value: "en"
},
]
}
}
......@@ -95,12 +95,17 @@ export default {
this.$set(this, 'loginData', menuData);
}
},
beforeDestroy() {
window.removeEventListener('resize', this.checkIsSmallScreen(), false)
},
mounted() {
const self = this;
self.checkIsSmallScreen();
document.body.onresize = () => {
self.checkIsSmallScreen();
}
// const self = this;
// self.checkIsSmallScreen();
// document.body.onresize = () => {
// self.checkIsSmallScreen();
// }
window.addEventListener('resize', () => this.checkIsSmallScreen(), false);
},
watch: {
userInfo(val) {
......
......@@ -81,23 +81,24 @@
.lang {
color: $cOrange;
}
}
}
@media (max-width: 950px) {
@media (max-width: 1200px) {
.v-header {
.header-container {
width: 96%;
@include content-percent();
.main-nav-list {
display: none;
}
}
}
@media (max-width: 800px) {
@media (max-width: 768px) {
.v-header {
.main-nav-list {
.main-nav {
display: none;
}
}
......
......@@ -54,3 +54,25 @@
}
}
}
@media (max-width: 1200px) {
.content {
@include content-percent();
padding-bottom: $marginMedium-M;
}
.top-space {
padding-bottom: $marginMedium-M;
}
.product {
&-item {
width: 45%;
height: 15rem;
}
}
.ebg {
display: none;
}
}
......
@import '@/styles/_support';
.common-form-container {}
.common-form-container {
// @extend .bb;
// border-radius: .666667rem;
// border: solid .083333rem #f2f2f2;
// background-color: #ffffff;
// padding: 2.666667rem 2.833333rem 2.833333rem 2rem;
}
.table {
$girdHei: 4.333333rem;
......@@ -108,7 +114,8 @@
}
.w4 {
flex: 1;
width: 12rem;
width: 13.75rem;
}
}
......
......@@ -7,7 +7,6 @@
}
.reservation-container {
// width: 64.25rem;
border-radius: .666667rem;
border: solid .083333rem #f2f2f2;
background-color: #ffffff;
......@@ -16,12 +15,11 @@
.form {
display: flex;
// justify-content: space-between;
flex-wrap: wrap;
&-item {
position: relative;
// padding: 0 1.25rem 0 2.166667rem;
padding: 0 $marginSmall;
margin-bottom: 2.333333rem;
.label {
......@@ -66,7 +64,7 @@
.down-arrow {
position: absolute;
top: 1.6rem;
top: 2.2rem;
right: 2rem;
background-image: url('~@/assets/images/reservation/re-down-arrow.png');
width: 1rem;
......@@ -178,7 +176,7 @@
.form2 {
.form-item {
margin-right: 1.166667rem;
// margin-right: 1.166667rem;
&:last-child {
margin-right: 0;
......@@ -236,3 +234,20 @@ input {
background-color: gray !important;
background-image: none !important;
}
@media (max-width: 768px) {
.form {
&-item3 {
display: block;
.ipt-wrap {
margin: 0;
}
}
}
.notice {
margin: 0;
}
}
......
......@@ -12,12 +12,14 @@
}
.w1 {
width: 10rem;
// width: 10rem;
width: 20rem;
text-align: center;
}
.w2 {
width: 6.25rem;
// width: 6.25rem;
width: 12.5rem;
text-align: center;
}
......
......@@ -77,7 +77,7 @@
.down-arrow {
position: absolute;
top: 1.6rem;
top: 2.2rem;
right: 2rem;
background-image: url('~@/assets/images/reservation/re-down-arrow.png');
width: 1rem;
......
......@@ -4,7 +4,6 @@
padding-bottom: 2rem;
}
.border {
@extend .bb;
// height: 387px;
......@@ -99,16 +98,6 @@
padding: .75rem;
}
.down-arrow {
position: absolute;
top: 1.6rem;
right: 2rem;
background-image: url('~@/assets/images/reservation/re-down-arrow.png');
width: 1rem;
height: .666667rem;
pointer-events: none;
cursor: default;
}
}
}
......
......@@ -91,6 +91,8 @@
<div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-card.png"></div> {{$t('policyChangeInformation.NO')}}
</div>
<div class="ipt-wrap">
<div class="eye"></div>
<!-- <div class="eye eye-act"></div> -->
<input class="ipt" type="text">
</div>
</div>
......
@import '@/styles/_support';
input {
padding: 0 2.083333rem;
color: #333333;
}
.top-space {
// height: 4.25rem;
}
.top-space {}
.reservation-container {
// width: 64.25rem;
@extend .bb;
border-radius: .666667rem;
border: solid .083333rem #f2f2f2;
background-color: #ffffff;
padding: 2.166667rem .916667rem 0;
padding: 2.666667rem 2.833333rem 2.833333rem 2rem;
}
.form {
......@@ -26,7 +24,7 @@ input {
&-item {
position: relative;
padding: 0 1.25rem;
padding: 0 $marginSmall;
margin-bottom: 2.333333rem;
.label {
......@@ -49,8 +47,7 @@ input {
position: relative;
// input和下拉
.ipt {
}
.ipt {}
// 长文本
.textarea {
......@@ -62,7 +59,7 @@ input {
.down-arrow {
position: absolute;
top: 1.6rem;
top: 2.2rem;
right: 2rem;
background-image: url('~@/assets/images/reservation/re-down-arrow.png');
width: 1rem;
......@@ -72,7 +69,6 @@ input {
}
}
.validator {
color: $cOrange;
margin-top: 0.5rem;
......@@ -95,8 +91,8 @@ input {
margin-bottom: 2.25rem;
.label {
min-width: 12.833333rem;
height: 2.5rem;
margin-right: 1rem;
}
.cont {
......@@ -131,7 +127,6 @@ input {
align-items: center;
flex-wrap: wrap;
.label {
// min-width: 8.833333rem;
}
......@@ -148,7 +143,7 @@ input {
}
}
.ipt-wrap2{
.ipt-wrap2 {
flex: 1;
}
......@@ -210,5 +205,21 @@ input {
.disabled {
background-color: gray !important;
background-image:none !important;
background-image: none !important;
}
@media (max-width: 768px) {
.form {
&-item3 {
display: block;
.ipt-wrap {
margin: 0;
}
}
}
.notice {
margin: 0;
}
}
......
<template>
<div class="reservation-container">
<div class="gird-g form">
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/reservation/icon-re-name.png"></div> {{$t('reservation.name')}}
</div>
<div class="ipt-wrap">
<input :placeholder="$t('reservation.namePlaceholder')" class="ipt" :class="{err : errorTips.e1.length > 0}" type="text" v-model="data.name">
</div>
<div class="validator" v-if="errorTips.e1.length > 0">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e1}}
</div>
<div>
<div class="alert">
<img class="icon" src="@/assets/images/common/icon-alert-i.png" alt="">
<div class="txt">
如您有平安一賬通賬戶，可幫助我們更好地為您提供服務，
<span class="pointer btn">登錄</span> 或
<span class="pointer btn">註冊</span>
</div>
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/reservation/icon-re-contact.png"></div>{{$t('reservation.contactType')}}
</div>
<div class="ipt-wrap">
<div class="down-arrow"></div>
<select class="ipt" v-model="data.contactType">
<option v-for="(item,index) in contactTypes" :key="index" :value="item">{{item}}</option>
</select>
</div>
</div>
<img class="pointer close" src="@/assets/images/common/icon-alert-close.png" alt="">
</div>
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/reservation/icon-re-phone.png"></div>{{$t('reservation.contact')}}
</div>
<div class="ipt-wrap">
<input :placeholder="$t('reservation.contactPlaceholder')" class="ipt" :class="{err : errorTips.e3.length > 0}" type="text" v-model="data.contactMethod">
</div>
<div class="validator" v-if="errorTips.e3.length > 0">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e3}}
<div class="reservation-container">
<div class="gird-g form">
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/reservation/icon-re-name.png"></div> {{$t('reservation.name')}}
</div>
<div class="ipt-wrap">
<input :placeholder="$t('reservation.namePlaceholder')" class="ipt" :class="{err : errorTips.e1.length > 0}" type="text" v-model="data.name">
</div>
<div class="validator" v-if="errorTips.e1.length > 0">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e1}}
</div>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/reservation/icon-re-clock.png"></div>{{$t('reservation.reservationType')}}
</div>
<div class="ipt-wrap">
<div class="down-arrow"></div>
<select class="ipt" v-model="data.reservationType">
<option v-for="(item,index) in reservationTypes" :key="index" :value="item">{{item}}</option>
</select>
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/reservation/icon-re-contact.png"></div>{{$t('reservation.contactType')}}
</div>
<div class="ipt-wrap">
<div class="down-arrow"></div>
<select class="ipt" v-model="data.contactType">
<option v-for="(item,index) in contactTypes" :key="index" :value="item">{{item}}</option>
</select>
</div>
</div>
</div>
<div class="pure-u-1 form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/reservation/icon-re-arrow-reservation.png"></div>{{$t('reservation.reservationRemark')}}
</div>
<div class="ipt-wrap">
<textarea :placeholder="$t('reservation.reservationRemarkPlaceholder')" class="ipt textarea" :class="{err : errorTips.e5.length > 0}" v-model="data.instruction"></textarea>
</div>
<div class="validator" v-if="errorTips.e5.length > 0">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e5}}
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/reservation/icon-re-phone.png"></div>{{$t('reservation.contact')}}
</div>
<div class="ipt-wrap">
<input :placeholder="$t('reservation.contactPlaceholder')" class="ipt" :class="{err : errorTips.e3.length > 0}" type="text" v-model="data.contactMethod">
</div>
<div class="validator" v-if="errorTips.e3.length > 0">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e3}}
</div>
</div>
</div>
<div class="pure-u-1 form-item form-item2">
<div class="label">
<div class="icon"><img src="@/assets/images/reservation/icon-re-custom.png"></div>{{$t('reservation.hkClient')}}
</div>
<div class="cont">
<div class="boo-btn pointer" :class="{active:isHkCus}" @click="isHkCus=true">{{$t('reservation.yes')}}</div>
<div class="boo-btn pointer" :class="{active:!isHkCus}" @click="isHkCus=false">{{$t('reservation.no')}}</div>
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/reservation/icon-re-clock.png"></div>{{$t('reservation.reservationType')}}
</div>
<div class="ipt-wrap">
<div class="down-arrow"></div>
<select class="ipt" v-model="data.reservationType">
<option v-for="(item,index) in reservationTypes" :key="index" :value="item">{{item}}</option>
</select>
</div>
</div>
</div>
<!-- 联络时间 -->
<div class="pure-u-1 form-item">
<div class="form-item3">
<div class="pure-u-1 form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/reservation/icon-re-calendar.png"></div>{{$t('reservation.contactTime')}}
<div class="icon"><img src="@/assets/images/reservation/icon-re-arrow-reservation.png"></div>{{$t('reservation.reservationRemark')}}
</div>
<div class="ipt-wrap">
<!-- <input class="ipt" type="date" v-model="data.contactDate" :class="{err : errorTips.e7.length > 0}"> -->
<date-picker v-model="data.contactDate"></date-picker>
<textarea :placeholder="$t('reservation.reservationRemarkPlaceholder')" class="ipt textarea" :class="{err : errorTips.e5.length > 0}" v-model="data.instruction"></textarea>
</div>
<div class="validator" v-if="errorTips.e5.length > 0">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e5}}
</div>
</div>
<div class="pure-u-1 form-item form-item2">
<div class="label">
<div class="icon"><img src="@/assets/images/reservation/icon-re-custom.png"></div>{{$t('reservation.hkClient')}}
</div>
<div class="validator" v-if="errorTips.e7.length > 0">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e7}}
<div class="cont">
<div class="boo-btn pointer" :class="{active:isHkCus}" @click="isHkCus=true">{{$t('reservation.yes')}}</div>
<div class="boo-btn pointer" :class="{active:!isHkCus}" @click="isHkCus=false">{{$t('reservation.no')}}</div>
</div>
<div class="mt8">
</div>
<!-- 联络时间 -->
<div class="pure-u-1 form-item">
<div class="form-item3">
<div class="label">
<div class="icon"><img src="@/assets/images/reservation/icon-re-calendar.png"></div>{{$t('reservation.contactTime')}}
</div>
<!-- <div class="calendar">
<div class="ipt-wrap">
<!-- <input class="ipt" type="date" v-model="data.contactDate" :class="{err : errorTips.e7.length > 0}"> -->
<date-picker v-model="data.contactDate"></date-picker>
</div>
<div class="validator" v-if="errorTips.e7.length > 0">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e7}}
</div>
<div class="mt8">
<div class="label">
</div>
<!-- <div class="calendar">
<img src="@/assets/images/reservation/re-calendar.png">
</div> -->
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box notice">
<p class="notice-item">
<img class="notice-item-icon" src="@/assets/images/reservation/icon-re-notice.png"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{$t('reservation.notice1')}}
</p>
<p class="notice-item pointer" @click="checked = !checked">
<img v-if="!checked" class="notice-item-icon" src="@/assets/images/reservation/un-check.png">
<img v-else class="notice-item-icon" src="@/assets/images/reservation/check.png"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{$t('reservation.notice2')}}
</p>
</div>
<div class="box notice">
<p class="notice-item">
<img class="notice-item-icon" src="@/assets/images/reservation/icon-re-notice.png"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{$t('reservation.notice1')}}
</p>
<p class="notice-item pointer" @click="checked = !checked">
<img v-if="!checked" class="notice-item-icon" src="@/assets/images/reservation/un-check.png">
<img v-else class="notice-item-icon" src="@/assets/images/reservation/check.png"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{$t('reservation.notice2')}}
</p>
</div>
<div class="submit-btn" :class="{disabled : !checked}" @click="submitHandler">
{{$t('customService.reservation.submitBtn')}}
<div class="submit-btn" :class="{disabled : !checked}" @click="submitHandler">
{{$t('customService.reservation.submitBtn')}}
</div>
</div>
</div>
</template>
......
......@@ -9,7 +9,7 @@
.left-panel {
width: 16rem;
// background-color: wheat;
margin-right: $marginMedium;
.separator {
margin: auto;
......@@ -66,7 +66,7 @@
}
&:first-child {
padding: 0 0 1rem;
padding: 0 0 1.5rem;
}
&:last-child {
......@@ -81,8 +81,7 @@
}
.right-panel {
margin-left: $marginMedium;
width: 975px;
max-width: 975px;
background-color: #ffffff;
.panel {
......@@ -97,3 +96,21 @@
.empty-line {
height: 1.333333rem;
}
@media (max-width: 1200px) {
.content {
@include content-percent();
}
.left-panel {
display: none;
}
}
@media (max-width: 768px) {
.content {
@include content-percent();
margin: 0 auto;
}
}
......
import api from '@/api/api'
import api from '@/api/api';
import {
httpGet,
httpPost
} from '@/api/fetch-api.js'
} from '@/api/fetch-api.js';
import {
mapGetters,
mapActions,
mapState
} from "vuex";
var UA = require("ua-device");
export default {
data() {
......@@ -27,32 +32,15 @@ export default {
},
// 视频
playerOptions: {
width: 843,
height: 475,
autoplay: false, //如果true,浏览器准备好时开始回放。
muted: true, // 默认情况下将会消除任何音频。
language: 'en',
// playbackRates: [0.7, 1.0, 1.5, 2.0],//播放速度
sources: [{
type: "video/mp4",
// mp4
src: "https://ow.go.qudone.com/jyesupload/ee516bb327484197b7ca72f3dc4be9e6.mp4",
// webm
// src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
}],
poster: 'images/video-poster.png',
},
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: true //全屏按钮
}
playerOptions: {},
}
},
components: {},
computed: {
...mapState({
isSmallScreen: state => state.isSmallScreen
}),
locale() {
return this.$i18n.locale || 'tc';
},
......@@ -61,49 +49,11 @@ export default {
},
player() {
return this.$refs.videoPlayer.player
}
},
},
methods: {
onPlayerPlay(player) {
// console.log('player play!', player)
},
onPlayerPause(player) {
// console.log('player pause!', player)
},
onPlayerEnded(player) {
// console.log('player ended!', player)
},
onPlayerLoadeddata(player) {
// console.log('player Loadeddata!', player)
},
onPlayerWaiting(player) {
// console.log('player Waiting!', player)
},
onPlayerPlaying(player) {
// console.log('player Playing!', player)
},
onPlayerTimeupdate(player) {
// console.log('player Timeupdate!', player.currentTime())
},
onPlayerCanplay(player) {
// console.log('player Canplay!', player)
},
onPlayerCanplaythrough(player) {
// console.log('player Canplaythrough!', player)
},
// or listen state event
playerStateChanged(playerCurrentState) {
// console.log('player current update state', playerCurrentState)
},
// player is ready
playerReadied(player) {
// seek to 10s
// console.log('example player 1 readied', player)
player.currentTime(10)
// console.log('example 01: the player is readied', player)
},
/**
* 推荐产品
*/
......@@ -149,12 +99,51 @@ export default {
path: '/profile'
})
},
refreshVideoPlayer() {
let playerOptions = {
width: 800,
height: 450,
// aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
autoplay: false, //如果true,浏览器准备好时开始回放。
muted: true, // 默认情况下将会消除任何音频。
language: 'en',
// playbackRates: [0.7, 1.0, 1.5, 2.0],//播放速度
sources: [{
type: "video/mp4",
// mp4
src: "https://ow.go.qudone.com/jyesupload/ee516bb327484197b7ca72f3dc4be9e6.mp4",
// webm
// src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
}],
poster: 'images/video-poster.png',
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: true //全屏按钮
}
}
let output = new UA(navigator.userAgent);
let deviceType = output.device.type;
let isMobile = deviceType == "mobile";
// if (this.isSmallScreen) {
if (isMobile) {
playerOptions.aspectRatio = "16:9";
}
this.playerOptions = playerOptions;
},
initData() {}
},
beforeDestroy() {
window.removeEventListener('resize', this.refreshVideoPlayer(), false);
},
mounted() {
setTimeout(() => {
this.player.muted(false)
}, 2000)
this.refreshVideoPlayer();
window.addEventListener('resize', () => this.refreshVideoPlayer(), false);
},
created() {}
created() {
}
}
......
......@@ -2,7 +2,6 @@
.content {
padding-bottom: 2.25rem;
}
.top-space {
......@@ -45,17 +44,50 @@
display: flex;
text-align: center;
justify-content: space-between;
flex-wrap: wrap;
&-item {
@extend .bb;
margin-right: $marginSmall;
position: relative;
width: 24.25rem;
// width: 100%;
height: 32.75rem;
border-radius: $borderRadiusSmall;
box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
background-color: #fbfbfb;
.img {
width: 100%;
height: 24.25rem;
background-size: cover;
}
.img1 {
background: url("~@/assets/images/index/recommend-1.png") no-repeat center;
background-size: cover;
}
.img2 {
background: url("~@/assets/images/index/recommend-2.png") no-repeat center;
background-size: cover;
}
.img3 {
background: url("~@/assets/images/index/recommend-3.png") no-repeat center;
background-size: cover;
}
.img4 {
background: url("~@/assets/images/index/recommend-4.png") no-repeat center;
background-size: cover;
}
&:last-child {
margin-right: 0;
}
.btn {
position: absolute;
left: 0;
......@@ -84,14 +116,11 @@
// 详情
.detail {
display: flex;
height: 39.75rem;
max-width: 1200px;
.vjs-custom-skin {
border-radius: $borderRadius !important;
overflow: hidden;
}
.txt {
position: relative;
@extend .fcc;
@extend .bb;
padding-left: 2.166667rem;
......@@ -132,8 +161,33 @@
}
@media (max-width: 950px) {
.box {
width: 96%;
@media (max-width: 1200px) {
.content {
@include content-percent();
}
// 详情
.detail {
display: block;
.vjs-custom-skin {
width: 100%;
}
.txt {
padding: 0;
margin: $marginSmall 0 $marginMedium;
}
}
}
@media (max-width: 768px) {
// 推荐产品
.recommend {
&-item {
width: 100%;
margin-right: 0;
}
}
}
......
<template>
<div>
<div class="page page-index">
<div class="banner-contaner">
<!-- banner 轮播 -->
<div class="banner">
......@@ -15,54 +15,36 @@
<div class="swiper-button-next" slot="button-next"></div> -->
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</div>
<div class="content">
<!-- 推荐产品 -->
<div class="box recommend">
<div class="recommend-item">
<div @click="onRecommendHandler(1)" class="btn pointer">{{$t('index.recommend.item1.btn')}}</div>
<img src="@/assets/images/index/recommend-1.png">
<div class="box recommend gird-g">
<div class="recommend-item pure-u-1 pure-u-md-1-2">
<div @click="onRecommendHandler(1)" class="btn pointer">{{$t('index.recommend.t1')}}</div>
<div class="img img1"></div>
</div>
<div class="recommend-item">
<div @click="onRecommendHandler(1)" class="btn pointer">{{$t('index.recommend.item1.btn')}}</div>
<img src="@/assets/images/index/recommend-2.png">
<div class="recommend-item pure-u-1 pure-u-md-1-2">
<div @click="onRecommendHandler(1)" class="btn pointer">{{$t('index.recommend.t2')}}</div>
<div class="img img2"></div>
</div>
<div class="recommend-item">
<div @click="onRecommendHandler(1)" class="btn pointer">{{$t('index.recommend.item1.btn')}}</div>
<img src="@/assets/images/index/recommend-3.png">
<div class="recommend-item pure-u-1 pure-u-md-1-2">
<div @click="onRecommendHandler(1)" class="btn pointer">{{$t('index.recommend.t3')}}</div>
<div class="img img3"></div>
</div>
<div class="recommend-item">
<div @click="onRecommendHandler(1)" class="btn pointer">{{$t('index.recommend.item1.btn')}}</div>
<img src="@/assets/images/index/recommend-4.png">
<div class="recommend-item pure-u-1 pure-u-md-1-2">
<div @click="onRecommendHandler(1)" class="btn pointer">{{$t('index.recommend.t4')}}</div>
<div class="img img4"></div>
</div>
</div>
<!-- <div class="box recommend">
<div class="recommend-item">
<div @click="onRecommendHandler(1)" class="btn pointer">{{$t('index.recommend.item1.btn')}}</div>
<div class="tt t1">{{$t('index.recommend.item1.t1')}}</div>
<img src="@/assets/images/index/recommend-1.png">
</div>
<div class="recommend-item">
<div @click="onRecommendHandler(2)" class="btn pointer">{{$t('index.recommend.item2.btn')}}</div>
<div class="tt t1">{{$t('index.recommend.item2.t1')}}</div>
<img src="@/assets/images/index/recommend-2.png">
</div>
<div class="recommend-item">
<div @click="onRecommendHandler(3)" class="btn pointer">{{$t('index.recommend.item3.btn')}}</div>
<div class="tt t2">{{$t('index.recommend.item3.t1')}}</div>
<div class="tt t1">{{$t('index.recommend.item3.t2')}}
<span class="cOrange">{{$t('index.recommend.item3.t3')}}</span>{{$t('index.recommend.item3.t4')}}</div>
<img src="@/assets/images/index/recommend-3.png">
</div>
</div> -->
<!-- 详情 -->
<div class="box detail">
<video-player class="vjs-custom-skin" controls ref="videoPlayer" :options="playerOptions" :playsinline="true" @play="onPlayerPlay($event)" @pause="onPlayerPause($event)" @ended="onPlayerEnded($event)" @loadeddata="onPlayerLoadeddata($event)" @waiting="onPlayerWaiting($event)" @playing="onPlayerPlaying($event)" @timeupdate="onPlayerTimeupdate($event)" @canplay="onPlayerCanplay($event)" @canplaythrough="onPlayerCanplaythrough($event)" @ready="playerReadied" @statechanged="playerStateChanged($event)">
<video-player class="vjs-custom-skin" ref="videoPlayer" :options="playerOptions" :playsinline="true">
</video-player>
<div class="txt">
<div v-if="$i18n.locale == 'zh'" class="txt">
中国平安人寿保险股份有限公司成立于2002年,是中国平安保险（集团）股份有限公司旗下的重要成员。截至2017年12月31日,平安人寿注册资本为338亿元，在全国拥有42家分公司（含7家电话销售中心）及超过3,300个营业网点,寿险代理人达138.6万名。公司个险、银保、电销、互联网多渠道齐头并进，实现协同发展，运营管理水平及客户体验领先市场，并依托集团“金融+科技”双驱动战略，在合规经营、防范风险的前提下，开启平台经营新时代，持续提升产品、科技两大核心竞争力，推动内含价值及规模持续、健康、稳定增长。
</div>
<div v-else class="txt">
中國平安人壽保險股份有限公司成立於2002年,是中國平安保險（集團）股份有限公司旗下的重要成員。截至2017年12月31日,平安人壽註冊資本為338億元，在全國擁有42家分公司（含7家電話銷售中心）及超過3,300個營業網點,壽險代理人達138.6萬名。公司個險、銀保、電銷、互聯網多渠道齊頭並進，實現協同發展，運營管理水平及客戶體驗領先市場，並依托集團“金融+科技”雙驅動戰略，在合規經營、防範風險的前提下，開啟平臺經營新時代，持續提升產品、科技兩大核心競爭力，推動內含價值及規模持續、健康、穩定增長。
</div>
</div>
......
......@@ -42,7 +42,7 @@
margin: auto;
max-width: 51rem;
border-radius: $borderRadius;
box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
@extend .box-shadow;
background-color: #ffffff;
&-tit {
......@@ -172,7 +172,7 @@
letter-spacing: .1rem;
}
.date{
.date {
width: 100%;
}
......@@ -240,13 +240,60 @@
}
}
@media (max-width: 950px) {
.box {
width: 96%;
@media (max-width: 1200px) {
.content {
@include content-percent();
min-height: 0;
// padding-bottom: $marginMedium-M;
}
.top-space {
height: 0;
}
.login {
padding: 2rem 1rem 3.5rem;
padding: 1rem 1rem 3.5rem;
border-bottom: none;
min-height: 42rem;
&-tit-space-1 {
// height: 5.25rem;
}
&-tit-space-4 {
height: 1rem;
}
&-nav {
margin: 1.75rem auto 1rem;
}
.form {
&-item {
margin: 2rem auto 0;
}
}
&-protocol {
margin: $marginSmall-M auto 0;
}
&-submit {
margin: 0 auto 0;
width: 17.25rem;
height: 3.25rem;
line-height: 3.25rem;
}
}
.box-shadow {
box-shadow: none;
}
.ebg {
display: none;
}
}
......
......@@ -38,7 +38,7 @@
margin: auto;
max-width: 51rem;
border-radius: $borderRadius;
box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
@extend .box-shadow;
background-color: #ffffff;
&-tit {
......@@ -228,12 +228,56 @@
}
}
@media (max-width: 950px) {
.box-shadow {
box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
}
@media (max-width: 1200px) {
.content {
@include content-percent();
min-height: 0;
padding-bottom: 0;
}
.box {
width: 96%;
}
.top-space {
height: 0;
}
.login {
padding: 2rem 1rem 3.5rem;
padding: 1rem 1rem 3.5rem;
border-bottom: none;
&-nav {
margin: 1.75rem auto 1rem;
}
.form {
&-item {
margin-top: 2rem;
}
}
&-protocol {
margin: $marginSmall-M auto 0;
}
&-submit {
margin: 3rem auto 0;
width: 17.25rem;
height: 3.25rem;
line-height: 3.25rem;
}
}
.box-shadow {
box-shadow: none;
}
.ebg {
display: none;
}
}
......
......@@ -48,8 +48,8 @@
letter-spacing: 1.2px;
}
@media (max-width: 950px) {
.box {
width: 96%;
@media (max-width: 1200px) {
.content {
@include content-percent();
}
}
......
......@@ -43,6 +43,7 @@
&-tit {
display: flex;
align-items: center;
flex: 1;
.point {
width: .5rem;
......@@ -51,13 +52,17 @@
margin: 0 1.75rem;
}
.tit{
flex: 1;
}
.new {
margin: 0 1rem;
}
}
&-date {
margin-right: 1rem;
margin: 0 1rem;
}
&:last-child {
......@@ -66,10 +71,31 @@
}
}
.pagination {
padding: 2.25rem 0;
}
@media (max-width: 1200px) {
.content {
@include content-percent();
}
}
@media (max-width: 768px) {
.news {
&-item {
&-tit {
.point {
width: .5rem;
height: .5rem;
background-color: #4c4948;
margin: 0 0.75rem;
}
}
}
}
}
......
......@@ -12,7 +12,7 @@
<div @click="toNewsDetail()" v-for="(item,index) in items" :key="index" class="news-item">
<div class="news-item-tit">
<div class="point"></div>
{{item}}
<div class="tit">{{item}}</div>
<img v-if="index < 3" class="new" src="@/assets/images/news-list/news-list-new.png">
</div>
<div class="news-item-date">2019-09-27</div>
......
......@@ -43,7 +43,7 @@
margin: auto;
max-width: 51rem;
border-radius: $borderRadius;
box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
@extend .box-shadow;
background-color: #ffffff;
&-tit {
......@@ -242,18 +242,59 @@
}
}
@media (max-width: 950px) {
.box {
width: 96%;
@media (max-width: 1200px) {
.content {
@include content-percent();
min-height: 0;
// padding-bottom: $marginMedium-M;
}
.top-space {
height: 0;
}
.login {
padding: 2rem 1rem 3.5rem;
padding: 1rem 1rem 3.5rem;
border-bottom: none;
min-height: 42rem;
&-tit-space-1 {
height: 2.25rem;
}
&-tit-space-4 {
height: 1rem;
}
&-nav {
margin: 1.75rem auto 1rem;
}
.form {
&-item {
margin: 2rem auto 0;
}
}
&-protocol {
margin: $marginSmall-M auto 0;
}
&-submit {
margin: 0 auto 0;
width: 17.25rem;
height: 3.25rem;
line-height: 3.25rem;
}
}
}
.disable {
background-color: #dcdddd !important;
// color: $cFontGray;
color: $cFontGray;
.box-shadow {
box-shadow: none;
}
.ebg {
display: none;
}
}
......
......@@ -38,12 +38,12 @@
@extend .bb;
padding: 2rem 6.25rem 4.5rem;
border-bottom: solid 0.9rem $cGreen;
height: 48rem;
min-height: 48rem;
margin: auto;
max-width: 51rem;
border-radius: $borderRadius;
box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
@extend .box-shadow;
background-color: #ffffff;
&-tit {
......@@ -242,18 +242,58 @@
}
}
@media (max-width: 950px) {
.box {
width: 96%;
@media (max-width: 1200px) {
.content {
@include content-percent();
min-height: 0;
// padding-bottom: $marginMedium-M;
}
.top-space {
height: 0;
}
.login {
padding: 2rem 1rem 3.5rem;
padding: 1rem 1rem 3.5rem;
border-bottom: none;
min-height: 42rem;
&-tit-space-1 {
// height: 5.25rem;
}
&-tit-space-4 {
height: 1rem;
}
&-nav {
margin: 1.75rem auto 1rem;
}
.form {
&-item {
margin: 2rem auto 0;
}
}
&-protocol {
margin: $marginSmall-M auto 0;
}
&-submit {
margin: 0 auto 0;
width: 17.25rem;
height: 3.25rem;
line-height: 3.25rem;
}
}
}
.disable {
background-color: #dcdddd !important;
// color: $cFontGray;
color: $cFontGray;
.box-shadow {
box-shadow: none;
}
.ebg {
display: none;
}
}
......
......@@ -26,9 +26,10 @@
letter-spacing: 1.2px;
}
@media (max-width: 950px) {
.box {
width: 96%;
@media (max-width: 1200px) {
.content {
@include content-percent();
padding-bottom: $marginMedium-M;
}
}
......
......@@ -26,8 +26,9 @@
letter-spacing: 1.2px;
}
@media (max-width: 950px) {
.box {
width: 96%;
@media (max-width: 1200px) {
.content {
@include content-percent();
padding-bottom: $marginMedium-M;
}
}
......
......@@ -27,8 +27,9 @@
}
@media (max-width: 950px) {
.box {
width: 96%;
@media (max-width: 1200px) {
.content {
@include content-percent();
padding-bottom: 2rem;
}
}
......
......@@ -46,9 +46,12 @@
margin: auto;
max-width: 51rem;
border-radius: $borderRadius;
box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
// box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
@extend .box-shadow;
background-color: #ffffff;
&-tit {
color: $cOrange;
display: flex;
......@@ -247,12 +250,53 @@
}
}
@media (max-width: 950px) {
.box {
width: 96%;
@media (max-width: 1200px) {
.content {
@include content-percent();
min-height: 0;
// padding-bottom: $marginMedium-M;
}
.top-space {
height: 0;
}
.step{
margin-bottom: 1rem;
}
.login {
padding: 2rem 1rem 3.5rem;
padding: 1rem 1rem 3.5rem;
border-bottom: none;
&-nav {
margin: 1.75rem auto 1rem;
}
.form {
&-item {
margin-top: 2rem;
}
}
&-protocol {
margin: $marginSmall-M auto 0;
}
&-submit {
margin: 3rem auto 0;
width: 17.25rem;
height: 3.25rem;
line-height: 3.25rem;
}
}
.box-shadow {
box-shadow: none;
}
.ebg {
display: none;
}
}
......
......@@ -27,8 +27,9 @@
}
@media (max-width: 950px) {
.box {
width: 96%;
@media (max-width: 1200px) {
.content {
@include content-percent();
padding-bottom: 2rem;
}
}
......
// 通用颜色
.cOrange {
color: $cOrange;
}
.cGreen {
color: $cGreen;
}
.cGray {
color: $cGray;
}
.cDark {
color: $cDark;
}
// 提示栏
.alert {
@extend .bb;
display: flex;
align-items: center;
position: relative;
width: 100%;
border-radius: 10px;
border: solid 1px #dcdddd;
background-color: #f2f2f2;
margin: 0 auto 12px;
padding: 6px 36px;
.icon {
margin-right: 5px;
display: inline-block;
}
.btn {
color: $cOrange;
}
.close {
position: absolute;
right: 17px;
}
}
// 输入框
.ipt-wrap {
.ipt {
@extend .bb;
width: 100%;
height: 4.5rem;
border-radius: 4.5rem;
border: solid 1px #dcdddd !important;
background-color: #ffffff;
padding: 0 2rem;
flex: 1;
letter-spacing: 0.1rem;
}
.down-arrow {
position: absolute;
top: 2.2rem;
right: 2rem;
background-image: url('~@/assets/images/common/down-arrow.png');
width: 1rem;
height: .666667rem;
pointer-events: none;
cursor: default;
}
.eye {
position: absolute;
top: 1.2rem;
right: 2rem;
background-image: url('~@/assets/images/common/icon-eyes-off.png');
width: 27px;
height: 24px;
pointer-events: none;
cursor: default;
}
.eye-act {
background-image: url('~@/assets/images/common/icon-eyes-on.png');
}
}
.ipt:focus {
border-color: $cOrange !important;
}
.ipt.err {
border-color: $cOrange !important;
}
// 轮播
.swiper-pagination-bullet {
width: 1rem !important;
height: 1rem !important;
}
.swiper-pagination-bullet-active {
background: $cOrange !important;
}
@media (max-width: 768px) {
.alert {
padding: 4px 36px 4px 12px;
.icon {}
}
}
......@@ -114,3 +114,8 @@
color: #006441;
border: solid 1px #006441;
}
@mixin content-percent($percent:4%) {
box-sizing: border-box;
padding: 0 $percent;
}
......
......@@ -13,6 +13,8 @@
@import "utils";
@import "common";
// 图标字体
@import "fonticon";
......
......@@ -26,6 +26,10 @@ $fontSizeTitle:16px;
$fontSize:14px;
$fontSizeSmall:12px;
$fontSizeTitle-M:17px;
$fontSize-M:14px;
$fontSizeSmall-M:12px;
// Color
$cOrange:#f05a23;
$cFontGray: #4c4948;
......