Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
3966f9bb by simon
Options

默认提交

1 parent 18509492
Inline Side-by-side
Showing 20 changed files with 464 additions and 352 deletions
......@@ -3,7 +3,9 @@ import {
} from 'vuex'
import api from '@/api/api'
import { httpPost } from '@/api/fetch-api.js'
import {
httpPost
} from '@/api/fetch-api.js'
export default {
name: "DropDownList",
......@@ -16,25 +18,25 @@ export default {
props: {
type: {
type: String,
default() {
default () {
return "nav";
}
},
dataObj: {
type: Object,
default() {
default () {
return {};
}
},
dataList: {
type: Array,
default() {
default () {
return [];
}
},
labelProperty: {
type: String,
default() {
default () {
return "name";
}
}
......@@ -94,14 +96,11 @@ export default {
})
}
}
// console.log("name:", this.dataList[index].name);
// this.$emit("change", {
// index: index,
// value: this.dataList[index]
// });
},
loginHandler() {
httpPost({ url: api.logout }).then(() => {
httpPost({
url: api.logout
}).then(() => {
this.$store.commit("SET_USER_INFO", null);
this.showLogoutTip();
});
......@@ -116,6 +115,5 @@ export default {
return this.dataList[this.activeIndex][this.labelProperty];
}
},
created() {
},
created() {},
};
......
......@@ -22,6 +22,7 @@ export default {
data() {
return {
dropdownMVisible: false,
loginMVisible: false,
maxClientWidth: 1200,
navList: [],
loginData: {},
......@@ -59,29 +60,16 @@ export default {
path: "/"
})
},
onShowDropdown(boo = true) {
this.dropdownMVisible = boo;
// if (this.dropdownMVisible) {
// this.stop();
// } else {
// this.move();
// }
onShowDropdown(evtStr) {
console.log("evtStr:", evtStr);
this.dropdownMVisible = false;
this.loginMVisible = false;
if (evtStr == 'nav') {
this.dropdownMVisible = true;
} else if (evtStr == 'login') {
this.loginMVisible = true;
} else {}
},
// stop() {
// var mo = function (e) {
// e.preventDefault();
// };
// document.body.style.overflow = 'hidden';
// document.addEventListener("touchmove", mo, false); //禁止页面滑动
// },
// /***取消滑动限制***/
// move() {
// var mo = function (e) {
// e.preventDefault();
// };
// document.body.style.overflow = ''; //出现滚动条
// document.removeEventListener("touchmove", mo, false);
// },
checkIsSmallScreen() {
const self = this;
if (document.body.clientWidth > self.maxClientWidth) {
......
......@@ -8,11 +8,13 @@
<!-- mobile -->
<div class="nav-list-m mobile">
<div class="mobile-nav-list">
<img src="@/assets/images/home/mobile-user.png" alt="">
<img @click="onShowDropdown(true)" v-if="!dropdownMVisible" src="@/assets/images/home/mobile-nav.png" alt="">
<img @click="onShowDropdown(false)" v-else src="@/assets/images/home/mobile-nav-close.png" alt="">
<img @click="onShowDropdown('login')" v-if="!loginMVisible" src="@/assets/images/home/mobile-user.png" alt="">
<img @click="onShowDropdown('')" v-else src="@/assets/images/home/mobile-user.png" alt="">
<img @click="onShowDropdown('nav')" v-if="!dropdownMVisible" src="@/assets/images/home/mobile-nav.png" alt="">
<img @click="onShowDropdown('')" v-else src="@/assets/images/home/mobile-nav-close.png" alt="">
</div>
<m-dropdown class="lang" :lang-list="langData.list" :visible="dropdownMVisible" :show-dropdown-m="onShowDropdown"></m-dropdown>
<m-dropdown class="lang" :type="'nav'" :visible="dropdownMVisible" :show-dropdown-m="onShowDropdown" :lang-list="langData.list"></m-dropdown>
<m-dropdown class="lang" :type="'login'" :visible="loginMVisible" :show-dropdown-m="onShowDropdown"></m-dropdown>
</div>
<!-- pc -->
......
......@@ -25,6 +25,12 @@ export default {
return false;
}
},
type: {
type: String,
default () {
return "nav";
}
},
langList: {
type: Array,
default () {
......@@ -46,10 +52,11 @@ export default {
},
},
methods: {
// 跳转菜单
onClickHandler(item) {
let path = item && item.path || "";
if (path) {
this.showDropdownM(false);
this.showDropdownM('');
this.$router.push({
path: path
})
......@@ -63,7 +70,7 @@ export default {
* 设置语言
*/
setLangHandler(curData) {
this.showDropdownM(false);
this.showDropdownM('');
// 如果是语言设置，则设置语言
let lang = curData.value;
this.$i18n.locale = lang;
......@@ -72,13 +79,39 @@ export default {
window.location.reload();
},
initData() {
let navList = this.i18n.nav.navList;
navList.forEach(element => {
this.activeNames.push(
[]
)
});
let navList = [];
if (this.type == "nav") {
navList = this.i18n.nav.navList;
navList.forEach(element => {
this.activeNames.push(
[]
)
});
} else if (this.type == "login") {
// 构建登陆页面
let i18n = this.$i18n.messages[this.$i18n.locale] || {};
let menuData = JSON.parse(JSON.stringify(i18n.nav.loginData));
let list = [];
if (this.userInfo && this.userInfo.name) {
menuData.name = this.userInfo.name;
menuData.list.forEach(element => {
if (element.type == "auth") {
list.push(element);
}
});
} else {
menuData.list.forEach(element => {
if (element.type == "noAuth") {
list.push(element);
}
});
}
// menuData.list = list;
navList = list;
console.log("navList:", navList);
}
this.navList = navList;
}
},
created() {
......
<template>
<div>
<div ref="panel" class="panel" :class="{'hide':!visible}">
<div class="mask" @click="showDropdownM(false)"></div>
<div class="mask" @click="showDropdownM('')"></div>
<!-- 列表 -->
<div class="list">
<div v-for="(item,index) in navList" :key="item.id" :index="index">
......
@import '@/styles/_support';
.common-form-container {
// @extend .bb;
// border-radius: .666667rem;
// border: solid .083333rem #f2f2f2;
// background-color: #ffffff;
// padding: 2.666667rem 2.833333rem 2.833333rem 2rem;
}
.common-form-container {}
.table {
$girdHei: 4.333333rem;
......@@ -119,7 +113,19 @@
}
}
.orange {
background-color: $cOrange;
}
@media (max-width: 1200px) {
.container {
display: -webkit-box;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
width: 92vw;
}
}
.container::-webkit-scrollbar {
display: none;
}
......
<template>
<div class="common-form-container">
<div class="container common-form-container">
<div class="table">
<div class="table-header orange">
<div class="table-header-item w1">{{$t('commonForm.head1')}}</div>
......
......@@ -160,3 +160,17 @@
height: 1.4rem;
margin: 0 1rem;
}
@media (max-width: 1200px) {
.container {
width: 1200px;
display: -webkit-box;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
width: 92vw;
}
}
.container::-webkit-scrollbar {
display: none;
}
......
<template>
<div>
<div class="cell-group">
<div class="table-header orange">
<div class="normal-header">
<div class="td w1">{{$t('customService.insuranceQuery.InsurantNumber')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.Insurant')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.InsurantName')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.InsurantAmount')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.effectiveDate')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.period')}}</div>
<div class="container">
<div>
<div class="cell-group">
<div class="table-header orange">
<div class="normal-header">
<div class="td w1">{{$t('customService.insuranceQuery.InsurantNumber')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.Insurant')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.InsurantName')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.InsurantAmount')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.effectiveDate')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.period')}}</div>
</div>
</div>
</div>
<div class="table-content">
<div class="data-line">
<!-- 勾选checkbox样式 -->
<!-- <div class="td w1">
<div class="table-content">
<div class="data-line">
<!-- 勾选checkbox样式 -->
<!-- <div class="td w1">
<img v-if="1>10" class="icon-check pointer" src="@/assets/images/insurance-query/un-check.png">
<img v-else class="icon-check pointer" src="@/assets/images/insurance-query/check.png"> P3**********0772
</div> -->
<!-- 下载样式 -->
<div class="td w1">P3**********0772<img class="icon-download" src="@/assets/images/insurance-query/icon-down-load.png" alt=""></div>
<div class="td w2">平安</div>
<div class="td w2">{{dataForm.v1}}</div>
<div class="td w2">HK$10,000</div>
<div class="td w2">2020-1-1</div>
<div class="td w2">{{dataForm.v2}}</div>
<!-- 下载样式 -->
<div class="td w1">P3**********0772<img class="icon-download" src="@/assets/images/insurance-query/icon-down-load.png" alt=""></div>
<div class="td w2">平安</div>
<div class="td w2">{{dataForm.v1}}</div>
<div class="td w2">HK$10,000</div>
<div class="td w2">2020-1-1</div>
<div class="td w2">{{dataForm.v2}}</div>
</div>
</div>
</div>
</div>
<div class="cell-group">
<div class="table-header">
<div class="normal-header">
<div class="title">{{$t('customService.insuranceQuery.t2Title')}}</div>
<div class="guide" :class="{rotate180 : !insuranceForm.f1}" @click="insuranceForm.f1 = !insuranceForm.f1"></div>
</div>
</div>
<div class="table-content" :class="{hide : !insuranceForm.f1}">
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t2InsurantClassify')}}</div>
<div class="label">{{dataForm.v1}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.InsurantAmount')}}</div>
<div class="label">HK$10,000</div>
<div class="cell-group">
<div class="table-header">
<div class="normal-header">
<div class="title">{{$t('customService.insuranceQuery.t2Title')}}</div>
<div class="guide" :class="{rotate180 : !insuranceForm.f1}" @click="insuranceForm.f1 = !insuranceForm.f1"></div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.effectiveDate')}}</div>
<div class="label">2020-1-1</div>
<div class="table-content" :class="{hide : !insuranceForm.f1}">
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t2InsurantClassify')}}</div>
<div class="label">{{dataForm.v1}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.InsurantAmount')}}</div>
<div class="label">HK$10,000</div>
</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.period')}}</div>
<div class="label">{{dataForm.v2}}</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.effectiveDate')}}</div>
<div class="label">2020-1-1</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.period')}}</div>
<div class="label">{{dataForm.v2}}</div>
</div>
</div>
</div>
</div>
</div>
<div class="cell-group">
<div class="table-header">
<div class="normal-header">
<div class="title">{{$t('customService.insuranceQuery.t3Title')}}</div>
<div class="guide" :class="{rotate180 : !insuranceForm.f2}" @click="insuranceForm.f2 = !insuranceForm.f2"></div>
<div class="cell-group">
<div class="table-header">
<div class="normal-header">
<div class="title">{{$t('customService.insuranceQuery.t3Title')}}</div>
<div class="guide" :class="{rotate180 : !insuranceForm.f2}" @click="insuranceForm.f2 = !insuranceForm.f2"></div>
</div>
</div>
</div>
<div class="table-content" :class="{hide : !insuranceForm.f2}">
<div class="data-line">
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsurantNameCn')}}
<span>修改</span>
<div class="table-content" :class="{hide : !insuranceForm.f2}">
<div class="data-line">
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsurantNameCn')}}
<span>修改</span>
</div>
<div class="label">平安</div>
</div>
<div class="label">平安</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsurantNameEn')}}
<span>修改</span>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsurantNameEn')}}
<span>修改</span>
</div>
<div class="label">Pingan</div>
</div>
<div class="label">Pingan</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.effectiveDate')}}</div>
<div class="label">2020-1-1</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsurantIdNumber')}}
<span>修改</span>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.effectiveDate')}}</div>
<div class="label">2020-1-1</div>
</div>
<div class="label">123*****567</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsurantContactAddress')}}
<span>修改</span>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsurantIdNumber')}}
<span>修改</span>
</div>
<div class="label">123*****567</div>
</div>
<div class="label">{{dataForm.v3}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsurantAddress')}}
<span>修改</span>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsurantContactAddress')}}
<span>修改</span>
</div>
<div class="label">{{dataForm.v3}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsurantAddress')}}
<span>修改</span>
</div>
<div class="label">{{dataForm.v3}}</div>
</div>
<div class="label">{{dataForm.v3}}</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsurantMobile')}}
<span>修改</span>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsurantMobile')}}
<span>修改</span>
</div>
<div class="label">（852）2888 8888</div>
</div>
<div class="label">（852）2888 8888</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsurantEmail')}}
<span>修改</span>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsurantEmail')}}
<span>修改</span>
</div>
<div class="label">123@ping.com.cn</div>
</div>
<div class="label">123@ping.com.cn</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsuredNameCn')}}
<span>修改</span>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsuredNameCn')}}
<span>修改</span>
</div>
<div class="label">平安</div>
</div>
<div class="label">平安</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsuredNameEn')}}
<span>修改</span>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsuredNameEn')}}
<span>修改</span>
</div>
<div class="label">Pingan</div>
</div>
<div class="label">Pingan</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t3InsuredBirthday')}}</div>
<div class="label">1999-1-1</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsuredIdNumber')}}
<span>修改</span>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t3InsuredBirthday')}}</div>
<div class="label">1999-1-1</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">
{{$t('customService.insuranceQuery.t3InsuredIdNumber')}}
<span>修改</span>
</div>
<div class="label">123*****567</div>
</div>
<div class="label">123*****567</div>
</div>
</div>
</div>
</div>
<div class="cell-group cell-between">
<div class="table-header">
<div class="normal-header">
<div class="title">{{$t('customService.insuranceQuery.t4Title')}}</div>
<div class="guide" :class="{rotate180 : !insuranceForm.f3}" @click="insuranceForm.f3 = !insuranceForm.f3"></div>
</div>
</div>
<div class="table-content" :class="{hide : !insuranceForm.f3}">
<div class="data-line">
<div class="td w2">{{$t('customService.insuranceQuery.t4NameCn')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.t4NameEn')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.t4Relation')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.t4Allocation')}}</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="td w2">{{dataForm.v4}}</div>
<div class="td w2">Zhangsan</div>
<div class="td w2">{{dataForm.v4_2}}</div>
<div class="td w2">50%</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="td w2">李四</div>
<div class="td w2">Lisi</div>
<div class="td w2">{{dataForm.v4_3}}</div>
<div class="td w2">50%</div>
</div>
</div>
</div>
<div class="cell-group">
<div class="table-header">
<div class="normal-header">
<div class="title">{{$t('customService.insuranceQuery.t5Title')}}</div>
<div class="guide" :class="{rotate180 : !insuranceForm.f4}" @click="insuranceForm.f4 = !insuranceForm.f4"></div>
<div class="cell-group cell-between">
<div class="table-header">
<div class="normal-header">
<div class="title">{{$t('customService.insuranceQuery.t4Title')}}</div>
<div class="guide" :class="{rotate180 : !insuranceForm.f3}" @click="insuranceForm.f3 = !insuranceForm.f3"></div>
</div>
</div>
</div>
<div class="table-content" :class="{hide : !insuranceForm.f4}">
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5PaymentPeriod')}}</div>
<div class="label">30年</div>
<div class="table-content" :class="{hide : !insuranceForm.f3}">
<div class="data-line">
<div class="td w2">{{$t('customService.insuranceQuery.t4NameCn')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.t4NameEn')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.t4Relation')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.t4Allocation')}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5PaymentMethod')}}</div>
<div class="label">{{dataForm.v5}}</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="td w2">{{dataForm.v4}}</div>
<div class="td w2">Zhangsan</div>
<div class="td w2">{{dataForm.v4_2}}</div>
<div class="td w2">50%</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="td w2">李四</div>
<div class="td w2">Lisi</div>
<div class="td w2">{{dataForm.v4_3}}</div>
<div class="td w2">50%</div>
</div>
</div>
<div class="separator-h"></div>
</div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5PaymentCurrency')}}</div>
<div class="label">{{dataForm.v6}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5CurrentPremium')}}</div>
<div class="label">HK$2,000</div>
<div class="cell-group">
<div class="table-header">
<div class="normal-header">
<div class="title">{{$t('customService.insuranceQuery.t5Title')}}</div>
<div class="guide" :class="{rotate180 : !insuranceForm.f4}" @click="insuranceForm.f4 = !insuranceForm.f4"></div>
</div>
</div>
<div class="separator-h"></div>
<div class="table-content" :class="{hide : !insuranceForm.f4}">
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5PaymentPeriod')}}</div>
<div class="label">30年</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5PaymentMethod')}}</div>
<div class="label">{{dataForm.v5}}</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5PaymentBank')}}</div>
<div class="label">{{dataForm.v7}}</div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5PaymentCurrency')}}</div>
<div class="label">{{dataForm.v6}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5CurrentPremium')}}</div>
<div class="label">HK$2,000</div>
</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5PaymentAccount')}}</div>
<div class="label">1234******888</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5PaymentBank')}}</div>
<div class="label">{{dataForm.v7}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5PaymentAccount')}}</div>
<div class="label">1234******888</div>
</div>
</div>
<div class="separator-h"></div>
</div>
<div class="separator-h"></div>
</div>
</div>
<div class="cell-group cell-between">
<div class="table-header">
<div class="normal-header">
<div class="title">{{$t('customService.insuranceQuery.t6Title')}}</div>
<div class="guide" :class="{rotate180 : !insuranceForm.f5}" @click="insuranceForm.f5 = !insuranceForm.f5"></div>
</div>
</div>
<div class="table-content" :class="{hide : !insuranceForm.f5}">
<div class="data-line">
<div class="td w2">{{$t('customService.insuranceQuery.t6PaymentPeriod')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.t6PaymentMethod')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.t6ClosingDate')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.t6PaymentAmount')}}</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="td w2">第二期</div>
<div class="td w2">{{dataForm.v8}}</div>
<div class="td w2">2021-1-1</div>
<div class="td w2">HK$2,000</div>
<div class="cell-group cell-between">
<div class="table-header">
<div class="normal-header">
<div class="title">{{$t('customService.insuranceQuery.t6Title')}}</div>
<div class="guide" :class="{rotate180 : !insuranceForm.f5}" @click="insuranceForm.f5 = !insuranceForm.f5"></div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="td w2">首期</div>
<div class="td w2">{{dataForm.v8}}</div>
<div class="td w2">2020-1-1</div>
<div class="td w2">HK$2,000</div>
<div class="table-content" :class="{hide : !insuranceForm.f5}">
<div class="data-line">
<div class="td w2">{{$t('customService.insuranceQuery.t6PaymentPeriod')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.t6PaymentMethod')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.t6ClosingDate')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.t6PaymentAmount')}}</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="td w2">第二期</div>
<div class="td w2">{{dataForm.v8}}</div>
<div class="td w2">2021-1-1</div>
<div class="td w2">HK$2,000</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="td w2">首期</div>
<div class="td w2">{{dataForm.v8}}</div>
<div class="td w2">2020-1-1</div>
<div class="td w2">HK$2,000</div>
</div>
</div>
</div>
</div>
......
......@@ -43,7 +43,6 @@
background-image: linear-gradient(to bottom, #f05f28, #f05021);
}
}
&-line {
......@@ -53,7 +52,7 @@
&-cont {
@extend .bb;
padding: 4.25rem 2rem 0 2.5rem;
padding: 4.25rem 2rem $marginMedium-M 2.5rem;
border: solid 1px #f2f2f2;
background-color: #ffffff;
min-height: 43.75rem;
......@@ -90,11 +89,6 @@
}
}
/* 隐藏下方的滚动条 */
// .payment-nav::-webkit-scrollbar {
// background-color: transparent;
// }
.payment-nav::-webkit-scrollbar {
display: none;
}
......
......@@ -52,10 +52,7 @@
flex: 1;
}
.agree{
// @extend .bb;
// padding-left: 80px;
}
.agree {}
.name-ipt {
width: 13.666667rem;
......@@ -132,3 +129,24 @@
background-blend-mode: soft-light, ;
background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429);
}
@media (max-width: 768px) {
.form {
&-item {
.ipt-wrap {
display: block;
}
.agree {
margin-top: $marginSmall-M;
.check-icon {
margin-left: 0;
}
}
}
}
}
......
......@@ -8,7 +8,7 @@
</div>
<div class="ipt-wrap">
<input class="ipt mail-ipt" :class="{err : errorTips.e1.length > 0}" type="text" v-model="data.mobile">
<div class="agree pointer" @click="checked1 = !checked1">
<div class="agree" @click="checked1 = !checked1">
<img v-if="!checked1" class="check-icon pointer" src="@/assets/images/reservation/un-check.png">
<img v-else class="check-icon pointer" src="@/assets/images/reservation/check.png">
<span>{{$t("policyChangeContact.checkTips")}}</span>
......@@ -25,7 +25,7 @@
</div>
<div class="ipt-wrap">
<input class="ipt mail-ipt" type="text" :class="{err : errorTips.e2.length > 0}" v-model="data.address">
<div class="pointer" @click="checked2 = !checked2">
<div class="agree" @click="checked2 = !checked2">
<img v-if="!checked2" class="check-icon pointer" src="@/assets/images/reservation/un-check.png">
<img v-else class="check-icon pointer" src="@/assets/images/reservation/check.png">
<span>{{$t("policyChangeContact.checkTips")}}</span>
......@@ -41,7 +41,7 @@
</div>
<div class="ipt-wrap">
<input class="ipt mail-ipt" type="text" :class="{err : errorTips.e3.length > 0}" v-model="data.email">
<div class="pointer" @click="checked3 = !checked3">
<div class="agree" @click="checked3 = !checked3">
<img v-if="!checked3" class="check-icon pointer" src="@/assets/images/reservation/un-check.png">
<img v-else class="check-icon pointer" src="@/assets/images/reservation/check.png">
<span>{{$t("policyChangeContact.checkTips")}}</span>
......
......@@ -121,8 +121,8 @@
}
.w5 {
flex: 1;
// width: 212px;
// flex: 1;
width: 212px;
}
}
......@@ -146,9 +146,22 @@
.icon {
display: inline-block;
width: 1rem;
;
margin-right: .5rem;
}
margin-top: 1.25rem;
}
@media (max-width: 1200px) {
.container {
display: -webkit-box;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
width: 92vw;
}
}
.container::-webkit-scrollbar {
display: none;
}
......
<template>
<div class="policy-change-guide-container">
<div class="table">
<div class="table-header orange">
<div class="table-header-item w1">{{$t('policyChangeGuide.head1')}}</div>
<div class="table-header-item w2">{{$t('policyChangeGuide.head2')}}</div>
<div class="table-header-item w3">{{$t('policyChangeGuide.head3')}}</div>
<div class="table-header-item w4">{{$t('policyChangeGuide.head4')}}</div>
<div class="table-header-item w5">{{$t('policyChangeGuide.head5')}}</div>
</div>
<div class="table-content">
<div v-for="(item,index) in i18n.policyChangeGuide.form" :key="index" class="table-content-item">
<div v-if="index < i18n.policyChangeGuide.form.length-1" class="hl"></div>
<div class="ww w1">
<div class="grid">
<div class="v-line"></div>
<span :class="{'act':item.projectType == 1}" @click="onProjectHandler(item)" v-html="item.project"> {{item.project}}</span>
<div>
<div class="container policy-change-guide-container">
<div class="table">
<div class="table-header orange">
<div class="table-header-item w1">{{$t('policyChangeGuide.head1')}}</div>
<div class="table-header-item w2">{{$t('policyChangeGuide.head2')}}</div>
<div class="table-header-item w3">{{$t('policyChangeGuide.head3')}}</div>
<div class="table-header-item w4">{{$t('policyChangeGuide.head4')}}</div>
<div class="table-header-item w5">{{$t('policyChangeGuide.head5')}}</div>
</div>
<div class="table-content">
<div v-for="(item,index) in i18n.policyChangeGuide.form" :key="index" class="table-content-item">
<div v-if="index < i18n.policyChangeGuide.form.length-1" class="hl"></div>
<div class="ww w1">
<div class="grid">
<div class="v-line"></div>
<span :class="{'act':item.projectType == 1}" @click="onProjectHandler(item)" v-html="item.project"> {{item.project}}</span>
</div>
</div>
</div>
<div class="ww w2">
<div class="grid">
<div class="v-line"></div>
<span v-html="item.content"> {{item.content}}</span>
<div class="ww w2">
<div class="grid">
<div class="v-line"></div>
<span v-html="item.content"> {{item.content}}</span>
</div>
</div>
</div>
<div class="ww w3">
<div class="grid">
<div class="v-line"></div>
<span v-html="item.applicant"> {{item.applicant}}</span>
<div class="ww w3">
<div class="grid">
<div class="v-line"></div>
<span v-html="item.applicant"> {{item.applicant}}</span>
</div>
</div>
</div>
<div class="ww w4">
<div class="grid">
<div class="v-line"></div>
<span v-html="item.receptionTime"> {{item.receptionTime}}</span>
<div class="ww w4">
<div class="grid">
<div class="v-line"></div>
<span v-html="item.receptionTime"> {{item.receptionTime}}</span>
</div>
</div>
</div>
<div class="ww w5">
<div class="grid">
<div class="material" :class="{'pointer':item2.type == 1}" v-for="(item2,index2) in item.materialList" :key="index2">
<img v-if="item2.type == 1" class="icon" src="@/assets/images/common-form/icon-cf-download.png" alt="">
<span :class="{'act':item2.type == 1}" v-html="item2.name">{{ item2.name }}</span>
<div class="ww w5">
<div class="grid">
<div class="material" :class="{'pointer':item2.type == 1}" v-for="(item2,index2) in item.materialList" :key="index2">
<img v-if="item2.type == 1" class="icon" src="@/assets/images/common-form/icon-cf-download.png" alt="">
<span :class="{'act':item2.type == 1}" v-html="item2.name">{{ item2.name }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="notice">
<img class="icon" src="@/assets/images/policy-change-guide/icon-pcg-notice.png" alt=""> {{$t("policyChangeGuide.notice")}}
</div>
</div>
</template>
<script src="./policy-change-guide.js"></script>
......
......@@ -167,3 +167,12 @@
background-blend-mode: soft-light, ;
background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429);
}
@media (max-width: 768px) {
.form {
&-item2 {
display: block;
}
}
}
......
......@@ -302,3 +302,27 @@
// color: $cFontGray;
color: #4c4948;
}
.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;
}
.top-space {
height: 0;
}
.box-shadow {
box-shadow: none;
}
.ebg {
display: none;
}
}
......
......@@ -239,10 +239,6 @@
padding-bottom: 0;
}
.box {
width: 96%;
}
.top-space {
height: 0;
}
......
......@@ -242,6 +242,10 @@
}
}
.box-shadow {
box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
}
@media (max-width: 1200px) {
.content {
@include content-percent();
......@@ -267,7 +271,6 @@
height: 1rem;
}
&-nav {
margin: 1.75rem auto 1rem;
}
......
......@@ -242,6 +242,10 @@
}
}
.box-shadow {
box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
}
@media (max-width: 1200px) {
.content {
@include content-percent();
......
......@@ -30,7 +30,7 @@
.step {
@extend .fcc;
margin-bottom: 4.25rem;
margin: .5rem auto 4.25rem;
img {
height: 4.25rem;
......@@ -250,6 +250,10 @@
}
}
.box-shadow {
box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
}
@media (max-width: 1200px) {
.content {
@include content-percent();
......