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 { ...@@ -3,7 +3,9 @@ import {
3 } from 'vuex' 3 } from 'vuex'
4 4
5 import api from '@/api/api' 5 import api from '@/api/api'
6 import { httpPost } from '@/api/fetch-api.js' 6 import {
7 httpPost
8 } from '@/api/fetch-api.js'
7 9
8 export default { 10 export default {
9 name: "DropDownList", 11 name: "DropDownList",
...@@ -16,25 +18,25 @@ export default { ...@@ -16,25 +18,25 @@ export default {
16 props: { 18 props: {
17 type: { 19 type: {
18 type: String, 20 type: String,
19 default() { 21 default () {
20 return "nav"; 22 return "nav";
21 } 23 }
22 }, 24 },
23 dataObj: { 25 dataObj: {
24 type: Object, 26 type: Object,
25 default() { 27 default () {
26 return {}; 28 return {};
27 } 29 }
28 }, 30 },
29 dataList: { 31 dataList: {
30 type: Array, 32 type: Array,
31 default() { 33 default () {
32 return []; 34 return [];
33 } 35 }
34 }, 36 },
35 labelProperty: { 37 labelProperty: {
36 type: String, 38 type: String,
37 default() { 39 default () {
38 return "name"; 40 return "name";
39 } 41 }
40 } 42 }
...@@ -94,14 +96,11 @@ export default { ...@@ -94,14 +96,11 @@ export default {
94 }) 96 })
95 } 97 }
96 } 98 }
97 // console.log("name:", this.dataList[index].name);
98 // this.$emit("change", {
99 // index: index,
100 // value: this.dataList[index]
101 // });
102 }, 99 },
103 loginHandler() { 100 loginHandler() {
104 httpPost({ url: api.logout }).then(() => { 101 httpPost({
102 url: api.logout
103 }).then(() => {
105 this.$store.commit("SET_USER_INFO", null); 104 this.$store.commit("SET_USER_INFO", null);
106 this.showLogoutTip(); 105 this.showLogoutTip();
107 }); 106 });
...@@ -116,6 +115,5 @@ export default { ...@@ -116,6 +115,5 @@ export default {
116 return this.dataList[this.activeIndex][this.labelProperty]; 115 return this.dataList[this.activeIndex][this.labelProperty];
117 } 116 }
118 }, 117 },
119 created() { 118 created() {},
120 },
121 }; 119 };
......
...@@ -22,6 +22,7 @@ export default { ...@@ -22,6 +22,7 @@ export default {
22 data() { 22 data() {
23 return { 23 return {
24 dropdownMVisible: false, 24 dropdownMVisible: false,
25 loginMVisible: false,
25 maxClientWidth: 1200, 26 maxClientWidth: 1200,
26 navList: [], 27 navList: [],
27 loginData: {}, 28 loginData: {},
...@@ -59,29 +60,16 @@ export default { ...@@ -59,29 +60,16 @@ export default {
59 path: "/" 60 path: "/"
60 }) 61 })
61 }, 62 },
62 onShowDropdown(boo = true) { 63 onShowDropdown(evtStr) {
63 this.dropdownMVisible = boo; 64 console.log("evtStr:", evtStr);
64 // if (this.dropdownMVisible) { 65 this.dropdownMVisible = false;
65 // this.stop(); 66 this.loginMVisible = false;
66 // } else { 67 if (evtStr == 'nav') {
67 // this.move(); 68 this.dropdownMVisible = true;
68 // } 69 } else if (evtStr == 'login') {
70 this.loginMVisible = true;
71 } else {}
69 }, 72 },
70 // stop() {
71 // var mo = function (e) {
72 // e.preventDefault();
73 // };
74 // document.body.style.overflow = 'hidden';
75 // document.addEventListener("touchmove", mo, false); //禁止页面滑动
76 // },
77 // /***取消滑动限制***/
78 // move() {
79 // var mo = function (e) {
80 // e.preventDefault();
81 // };
82 // document.body.style.overflow = ''; //出现滚动条
83 // document.removeEventListener("touchmove", mo, false);
84 // },
85 checkIsSmallScreen() { 73 checkIsSmallScreen() {
86 const self = this; 74 const self = this;
87 if (document.body.clientWidth > self.maxClientWidth) { 75 if (document.body.clientWidth > self.maxClientWidth) {
......
...@@ -8,11 +8,13 @@ ...@@ -8,11 +8,13 @@
8 <!-- mobile --> 8 <!-- mobile -->
9 <div class="nav-list-m mobile"> 9 <div class="nav-list-m mobile">
10 <div class="mobile-nav-list"> 10 <div class="mobile-nav-list">
11 <img src="@/assets/images/home/mobile-user.png" alt=""> 11 <img @click="onShowDropdown('login')" v-if="!loginMVisible" src="@/assets/images/home/mobile-user.png" alt="">
12 <img @click="onShowDropdown(true)" v-if="!dropdownMVisible" src="@/assets/images/home/mobile-nav.png" alt=""> 12 <img @click="onShowDropdown('')" v-else src="@/assets/images/home/mobile-user.png" alt="">
13 <img @click="onShowDropdown(false)" v-else src="@/assets/images/home/mobile-nav-close.png" alt=""> 13 <img @click="onShowDropdown('nav')" v-if="!dropdownMVisible" src="@/assets/images/home/mobile-nav.png" alt="">
14 <img @click="onShowDropdown('')" v-else src="@/assets/images/home/mobile-nav-close.png" alt="">
14 </div> 15 </div>
15 <m-dropdown class="lang" :lang-list="langData.list" :visible="dropdownMVisible" :show-dropdown-m="onShowDropdown"></m-dropdown> 16 <m-dropdown class="lang" :type="'nav'" :visible="dropdownMVisible" :show-dropdown-m="onShowDropdown" :lang-list="langData.list"></m-dropdown>
17 <m-dropdown class="lang" :type="'login'" :visible="loginMVisible" :show-dropdown-m="onShowDropdown"></m-dropdown>
16 </div> 18 </div>
17 19
18 <!-- pc --> 20 <!-- pc -->
......
...@@ -25,6 +25,12 @@ export default { ...@@ -25,6 +25,12 @@ export default {
25 return false; 25 return false;
26 } 26 }
27 }, 27 },
28 type: {
29 type: String,
30 default () {
31 return "nav";
32 }
33 },
28 langList: { 34 langList: {
29 type: Array, 35 type: Array,
30 default () { 36 default () {
...@@ -46,10 +52,11 @@ export default { ...@@ -46,10 +52,11 @@ export default {
46 }, 52 },
47 }, 53 },
48 methods: { 54 methods: {
55 // 跳转菜单
49 onClickHandler(item) { 56 onClickHandler(item) {
50 let path = item && item.path || ""; 57 let path = item && item.path || "";
51 if (path) { 58 if (path) {
52 this.showDropdownM(false); 59 this.showDropdownM('');
53 this.$router.push({ 60 this.$router.push({
54 path: path 61 path: path
55 }) 62 })
...@@ -63,7 +70,7 @@ export default { ...@@ -63,7 +70,7 @@ export default {
63 * 设置语言 70 * 设置语言
64 */ 71 */
65 setLangHandler(curData) { 72 setLangHandler(curData) {
66 this.showDropdownM(false); 73 this.showDropdownM('');
67 // 如果是语言设置，则设置语言 74 // 如果是语言设置，则设置语言
68 let lang = curData.value; 75 let lang = curData.value;
69 this.$i18n.locale = lang; 76 this.$i18n.locale = lang;
...@@ -72,13 +79,39 @@ export default { ...@@ -72,13 +79,39 @@ export default {
72 window.location.reload(); 79 window.location.reload();
73 }, 80 },
74 initData() { 81 initData() {
75 let navList = this.i18n.nav.navList; 82 let navList = [];
76 navList.forEach(element => { 83 if (this.type == "nav") {
77 this.activeNames.push( 84 navList = this.i18n.nav.navList;
78 [] 85 navList.forEach(element => {
79 ) 86 this.activeNames.push(
80 }); 87 []
88 )
89 });
90 } else if (this.type == "login") {
91 // 构建登陆页面
92 let i18n = this.$i18n.messages[this.$i18n.locale] || {};
93 let menuData = JSON.parse(JSON.stringify(i18n.nav.loginData));
94 let list = [];
95 if (this.userInfo && this.userInfo.name) {
96 menuData.name = this.userInfo.name;
97 menuData.list.forEach(element => {
98 if (element.type == "auth") {
99 list.push(element);
100 }
101 });
102 } else {
103 menuData.list.forEach(element => {
104 if (element.type == "noAuth") {
105 list.push(element);
106 }
107 });
108 }
109 // menuData.list = list;
110 navList = list;
111 console.log("navList:", navList);
112 }
81 this.navList = navList; 113 this.navList = navList;
114
82 } 115 }
83 }, 116 },
84 created() { 117 created() {
......
1 <template> 1 <template>
2 <div> 2 <div>
3 <div ref="panel" class="panel" :class="{'hide':!visible}"> 3 <div ref="panel" class="panel" :class="{'hide':!visible}">
4 <div class="mask" @click="showDropdownM(false)"></div> 4 <div class="mask" @click="showDropdownM('')"></div>
5 <!-- 列表 --> 5 <!-- 列表 -->
6 <div class="list"> 6 <div class="list">
7 <div v-for="(item,index) in navList" :key="item.id" :index="index"> 7 <div v-for="(item,index) in navList" :key="item.id" :index="index">
......
1 @import '@/styles/_support'; 1 @import '@/styles/_support';
2 2
3 .common-form-container { 3 .common-form-container {}
4 // @extend .bb;
5 // border-radius: .666667rem;
6 // border: solid .083333rem #f2f2f2;
7 // background-color: #ffffff;
8 // padding: 2.666667rem 2.833333rem 2.833333rem 2rem;
9 }
10 4
11 .table { 5 .table {
12 $girdHei: 4.333333rem; 6 $girdHei: 4.333333rem;
...@@ -119,7 +113,19 @@ ...@@ -119,7 +113,19 @@
119 } 113 }
120 } 114 }
121 115
122
123 .orange { 116 .orange {
124 background-color: $cOrange; 117 background-color: $cOrange;
125 } 118 }
119
120 @media (max-width: 1200px) {
121 .container {
122 display: -webkit-box;
123 overflow-x: scroll;
124 -webkit-overflow-scrolling: touch;
125 width: 92vw;
126 }
127 }
128
129 .container::-webkit-scrollbar {
130 display: none;
131 }
......
1 1
2 <template> 2 <template>
3 <div class="common-form-container"> 3 <div class="container common-form-container">
4 <div class="table"> 4 <div class="table">
5 <div class="table-header orange"> 5 <div class="table-header orange">
6 <div class="table-header-item w1">{{$t('commonForm.head1')}}</div> 6 <div class="table-header-item w1">{{$t('commonForm.head1')}}</div>
......
...@@ -160,3 +160,17 @@ ...@@ -160,3 +160,17 @@
160 height: 1.4rem; 160 height: 1.4rem;
161 margin: 0 1rem; 161 margin: 0 1rem;
162 } 162 }
163
164 @media (max-width: 1200px) {
165 .container {
166 width: 1200px;
167 display: -webkit-box;
168 overflow-x: scroll;
169 -webkit-overflow-scrolling: touch;
170 width: 92vw;
171 }
172 }
173
174 .container::-webkit-scrollbar {
175 display: none;
176 }
......
1 <template> 1 <template>
2 <div> 2 <div class="container">
3 <div class="cell-group"> 3 <div>
4 <div class="table-header orange"> 4 <div class="cell-group">
5 <div class="normal-header"> 5 <div class="table-header orange">
6 <div class="td w1">{{$t('customService.insuranceQuery.InsurantNumber')}}</div> 6 <div class="normal-header">
7 <div class="td w2">{{$t('customService.insuranceQuery.Insurant')}}</div> 7 <div class="td w1">{{$t('customService.insuranceQuery.InsurantNumber')}}</div>
8 <div class="td w2">{{$t('customService.insuranceQuery.InsurantName')}}</div> 8 <div class="td w2">{{$t('customService.insuranceQuery.Insurant')}}</div>
9 <div class="td w2">{{$t('customService.insuranceQuery.InsurantAmount')}}</div> 9 <div class="td w2">{{$t('customService.insuranceQuery.InsurantName')}}</div>
10 <div class="td w2">{{$t('customService.insuranceQuery.effectiveDate')}}</div> 10 <div class="td w2">{{$t('customService.insuranceQuery.InsurantAmount')}}</div>
11 <div class="td w2">{{$t('customService.insuranceQuery.period')}}</div> 11 <div class="td w2">{{$t('customService.insuranceQuery.effectiveDate')}}</div>
12 <div class="td w2">{{$t('customService.insuranceQuery.period')}}</div>
13 </div>
12 </div> 14 </div>
13 </div> 15 <div class="table-content">
14 <div class="table-content"> 16 <div class="data-line">
15 <div class="data-line"> 17 <!-- 勾选checkbox样式 -->
16 <!-- 勾选checkbox样式 --> 18 <!-- <div class="td w1">
17 <!-- <div class="td w1">
18 <img v-if="1>10" class="icon-check pointer" src="@/assets/images/insurance-query/un-check.png"> 19 <img v-if="1>10" class="icon-check pointer" src="@/assets/images/insurance-query/un-check.png">
19 <img v-else class="icon-check pointer" src="@/assets/images/insurance-query/check.png"> P3**********0772 20 <img v-else class="icon-check pointer" src="@/assets/images/insurance-query/check.png"> P3**********0772
20 </div> --> 21 </div> -->
21 <!-- 下载样式 --> 22 <!-- 下载样式 -->
22 <div class="td w1">P3**********0772<img class="icon-download" src="@/assets/images/insurance-query/icon-down-load.png" alt=""></div> 23 <div class="td w1">P3**********0772<img class="icon-download" src="@/assets/images/insurance-query/icon-down-load.png" alt=""></div>
23 <div class="td w2">平安</div> 24 <div class="td w2">平安</div>
24 <div class="td w2">{{dataForm.v1}}</div> 25 <div class="td w2">{{dataForm.v1}}</div>
25 <div class="td w2">HK$10,000</div> 26 <div class="td w2">HK$10,000</div>
26 <div class="td w2">2020-1-1</div> 27 <div class="td w2">2020-1-1</div>
27 <div class="td w2">{{dataForm.v2}}</div> 28 <div class="td w2">{{dataForm.v2}}</div>
29 </div>
28 </div> 30 </div>
29 </div> 31 </div>
30 </div>
31 32
32 <div class="cell-group"> 33 <div class="cell-group">
33 <div class="table-header"> 34 <div class="table-header">
34 <div class="normal-header"> 35 <div class="normal-header">
35 <div class="title">{{$t('customService.insuranceQuery.t2Title')}}</div> 36 <div class="title">{{$t('customService.insuranceQuery.t2Title')}}</div>
36 <div class="guide" :class="{rotate180 : !insuranceForm.f1}" @click="insuranceForm.f1 = !insuranceForm.f1"></div> 37 <div class="guide" :class="{rotate180 : !insuranceForm.f1}" @click="insuranceForm.f1 = !insuranceForm.f1"></div>
37 </div>
38 </div>
39 <div class="table-content" :class="{hide : !insuranceForm.f1}">
40 <div class="data-line">
41 <div class="cell1">
42 <div class="label">{{$t('customService.insuranceQuery.t2InsurantClassify')}}</div>
43 <div class="label">{{dataForm.v1}}</div>
44 </div>
45 <div class="separator-v"></div>
46 <div class="cell1">
47 <div class="label">{{$t('customService.insuranceQuery.InsurantAmount')}}</div>
48 <div class="label">HK$10,000</div>
49 </div> 38 </div>
50 </div> 39 </div>
51 <div class="separator-h"></div> 40 <div class="table-content" :class="{hide : !insuranceForm.f1}">
52 <div class="data-line"> 41 <div class="data-line">
53 <div class="cell1"> 42 <div class="cell1">
54 <div class="label">{{$t('customService.insuranceQuery.effectiveDate')}}</div> 43 <div class="label">{{$t('customService.insuranceQuery.t2InsurantClassify')}}</div>
55 <div class="label">2020-1-1</div> 44 <div class="label">{{dataForm.v1}}</div>
45 </div>
46 <div class="separator-v"></div>
47 <div class="cell1">
48 <div class="label">{{$t('customService.insuranceQuery.InsurantAmount')}}</div>
49 <div class="label">HK$10,000</div>
50 </div>
56 </div> 51 </div>
57 <div class="separator-v"></div> 52 <div class="separator-h"></div>
58 <div class="cell1"> 53 <div class="data-line">
59 <div class="label">{{$t('customService.insuranceQuery.period')}}</div> 54 <div class="cell1">
60 <div class="label">{{dataForm.v2}}</div> 55 <div class="label">{{$t('customService.insuranceQuery.effectiveDate')}}</div>
56 <div class="label">2020-1-1</div>
57 </div>
58 <div class="separator-v"></div>
59 <div class="cell1">
60 <div class="label">{{$t('customService.insuranceQuery.period')}}</div>
61 <div class="label">{{dataForm.v2}}</div>
62 </div>
61 </div> 63 </div>
62 </div> 64 </div>
63 </div> 65 </div>
64 </div>
65 66
66 <div class="cell-group"> 67 <div class="cell-group">
67 <div class="table-header"> 68 <div class="table-header">
68 <div class="normal-header"> 69 <div class="normal-header">
69 <div class="title">{{$t('customService.insuranceQuery.t3Title')}}</div> 70 <div class="title">{{$t('customService.insuranceQuery.t3Title')}}</div>
70 <div class="guide" :class="{rotate180 : !insuranceForm.f2}" @click="insuranceForm.f2 = !insuranceForm.f2"></div> 71 <div class="guide" :class="{rotate180 : !insuranceForm.f2}" @click="insuranceForm.f2 = !insuranceForm.f2"></div>
72 </div>
71 </div> 73 </div>
72 </div> 74 <div class="table-content" :class="{hide : !insuranceForm.f2}">
73 <div class="table-content" :class="{hide : !insuranceForm.f2}"> 75 <div class="data-line">
74 <div class="data-line"> 76 <div class="cell1">
75 <div class="cell1"> 77 <div class="label">
76 <div class="label"> 78 {{$t('customService.insuranceQuery.t3InsurantNameCn')}}
77 {{$t('customService.insuranceQuery.t3InsurantNameCn')}} 79 <span>修改</span>
78 <span>修改</span> 80 </div>
81 <div class="label">平安</div>
79 </div> 82 </div>
80 <div class="label">平安</div> 83 <div class="separator-v"></div>
81 </div> 84 <div class="cell1">
82 <div class="separator-v"></div> 85 <div class="label">
83 <div class="cell1"> 86 {{$t('customService.insuranceQuery.t3InsurantNameEn')}}
84 <div class="label"> 87 <span>修改</span>
85 {{$t('customService.insuranceQuery.t3InsurantNameEn')}} 88 </div>
86 <span>修改</span> 89 <div class="label">Pingan</div>
87 </div> 90 </div>
88 <div class="label">Pingan</div>
89 </div> 91 </div>
90 </div> 92 <div class="separator-h"></div>
91 <div class="separator-h"></div> 93 <div class="data-line">
92 <div class="data-line"> 94 <div class="cell1">
93 <div class="cell1"> 95 <div class="label">{{$t('customService.insuranceQuery.effectiveDate')}}</div>
94 <div class="label">{{$t('customService.insuranceQuery.effectiveDate')}}</div> 96 <div class="label">2020-1-1</div>
95 <div class="label">2020-1-1</div>
96 </div>
97 <div class="separator-v"></div>
98 <div class="cell1">
99 <div class="label">
100 {{$t('customService.insuranceQuery.t3InsurantIdNumber')}}
101 <span>修改</span>
102 </div> 97 </div>
103 <div class="label">123*****567</div> 98 <div class="separator-v"></div>
104 </div> 99 <div class="cell1">
105 </div> 100 <div class="label">
106 <div class="separator-h"></div> 101 {{$t('customService.insuranceQuery.t3InsurantIdNumber')}}
107 <div class="data-line"> 102 <span>修改</span>
108 <div class="cell1"> 103 </div>
109 <div class="label"> 104 <div class="label">123*****567</div>
110 {{$t('customService.insuranceQuery.t3InsurantContactAddress')}}
111 <span>修改</span>
112 </div> 105 </div>
113 <div class="label">{{dataForm.v3}}</div>
114 </div> 106 </div>
115 <div class="separator-v"></div> 107 <div class="separator-h"></div>
116 <div class="cell1"> 108 <div class="data-line">
117 <div class="label"> 109 <div class="cell1">
118 {{$t('customService.insuranceQuery.t3InsurantAddress')}} 110 <div class="label">
119 <span>修改</span> 111 {{$t('customService.insuranceQuery.t3InsurantContactAddress')}}
112 <span>修改</span>
113 </div>
114 <div class="label">{{dataForm.v3}}</div>
115 </div>
116 <div class="separator-v"></div>
117 <div class="cell1">
118 <div class="label">
119 {{$t('customService.insuranceQuery.t3InsurantAddress')}}
120 <span>修改</span>
121 </div>
122 <div class="label">{{dataForm.v3}}</div>
120 </div> 123 </div>
121 <div class="label">{{dataForm.v3}}</div>
122 </div> 124 </div>
123 </div>
124 125
125 <div class="separator-h"></div> 126 <div class="separator-h"></div>
126 <div class="data-line"> 127 <div class="data-line">
127 <div class="cell1"> 128 <div class="cell1">
128 <div class="label"> 129 <div class="label">
129 {{$t('customService.insuranceQuery.t3InsurantMobile')}} 130 {{$t('customService.insuranceQuery.t3InsurantMobile')}}
130 <span>修改</span> 131 <span>修改</span>
132 </div>
133 <div class="label">（852）2888 8888</div>
131 </div> 134 </div>
132 <div class="label">（852）2888 8888</div> 135 <div class="separator-v"></div>
133 </div> 136 <div class="cell1">
134 <div class="separator-v"></div> 137 <div class="label">
135 <div class="cell1"> 138 {{$t('customService.insuranceQuery.t3InsurantEmail')}}
136 <div class="label"> 139 <span>修改</span>
137 {{$t('customService.insuranceQuery.t3InsurantEmail')}} 140 </div>
138 <span>修改</span> 141 <div class="label">123@ping.com.cn</div>
139 </div> 142 </div>
140 <div class="label">123@ping.com.cn</div>
141 </div> 143 </div>
142 </div>
143 144
144 <div class="separator-h"></div> 145 <div class="separator-h"></div>
145 <div class="data-line"> 146 <div class="data-line">
146 <div class="cell1"> 147 <div class="cell1">
147 <div class="label"> 148 <div class="label">
148 {{$t('customService.insuranceQuery.t3InsuredNameCn')}} 149 {{$t('customService.insuranceQuery.t3InsuredNameCn')}}
149 <span>修改</span> 150 <span>修改</span>
151 </div>
152 <div class="label">平安</div>
150 </div> 153 </div>
151 <div class="label">平安</div> 154 <div class="separator-v"></div>
152 </div> 155 <div class="cell1">
153 <div class="separator-v"></div> 156 <div class="label">
154 <div class="cell1"> 157 {{$t('customService.insuranceQuery.t3InsuredNameEn')}}
155 <div class="label"> 158 <span>修改</span>
156 {{$t('customService.insuranceQuery.t3InsuredNameEn')}} 159 </div>
157 <span>修改</span> 160 <div class="label">Pingan</div>
158 </div> 161 </div>
159 <div class="label">Pingan</div>
160 </div> 162 </div>
161 </div>
162 163
163 <div class="separator-h"></div> 164 <div class="separator-h"></div>
164 <div class="data-line"> 165 <div class="data-line">
165 <div class="cell1"> 166 <div class="cell1">
166 <div class="label">{{$t('customService.insuranceQuery.t3InsuredBirthday')}}</div> 167 <div class="label">{{$t('customService.insuranceQuery.t3InsuredBirthday')}}</div>
167 <div class="label">1999-1-1</div> 168 <div class="label">1999-1-1</div>
168 </div> 169 </div>
169 <div class="separator-v"></div> 170 <div class="separator-v"></div>
170 <div class="cell1"> 171 <div class="cell1">
171 <div class="label"> 172 <div class="label">
172 {{$t('customService.insuranceQuery.t3InsuredIdNumber')}} 173 {{$t('customService.insuranceQuery.t3InsuredIdNumber')}}
173 <span>修改</span> 174 <span>修改</span>
175 </div>
176 <div class="label">123*****567</div>
174 </div> 177 </div>
175 <div class="label">123*****567</div>
176 </div> 178 </div>
177 </div> 179 </div>
178 </div> 180 </div>
179 </div>
180 181
181 <div class="cell-group cell-between"> 182 <div class="cell-group cell-between">
182 <div class="table-header"> 183 <div class="table-header">
183 <div class="normal-header"> 184 <div class="normal-header">
184 <div class="title">{{$t('customService.insuranceQuery.t4Title')}}</div> 185 <div class="title">{{$t('customService.insuranceQuery.t4Title')}}</div>
185 <div class="guide" :class="{rotate180 : !insuranceForm.f3}" @click="insuranceForm.f3 = !insuranceForm.f3"></div> 186 <div class="guide" :class="{rotate180 : !insuranceForm.f3}" @click="insuranceForm.f3 = !insuranceForm.f3"></div>
186 </div> 187 </div>
187 </div>
188 <div class="table-content" :class="{hide : !insuranceForm.f3}">
189 <div class="data-line">
190 <div class="td w2">{{$t('customService.insuranceQuery.t4NameCn')}}</div>
191 <div class="td w2">{{$t('customService.insuranceQuery.t4NameEn')}}</div>
192 <div class="td w2">{{$t('customService.insuranceQuery.t4Relation')}}</div>
193 <div class="td w2">{{$t('customService.insuranceQuery.t4Allocation')}}</div>
194 </div>
195 <div class="separator-h"></div>
196 <div class="data-line">
197 <div class="td w2">{{dataForm.v4}}</div>
198 <div class="td w2">Zhangsan</div>
199 <div class="td w2">{{dataForm.v4_2}}</div>
200 <div class="td w2">50%</div>
201 </div>
202 <div class="separator-h"></div>
203 <div class="data-line">
204 <div class="td w2">李四</div>
205 <div class="td w2">Lisi</div>
206 <div class="td w2">{{dataForm.v4_3}}</div>
207 <div class="td w2">50%</div>
208 </div>
209 </div>
210 </div>
211
212 <div class="cell-group">
213 <div class="table-header">
214 <div class="normal-header">
215 <div class="title">{{$t('customService.insuranceQuery.t5Title')}}</div>
216 <div class="guide" :class="{rotate180 : !insuranceForm.f4}" @click="insuranceForm.f4 = !insuranceForm.f4"></div>
217 </div> 188 </div>
218 </div> 189 <div class="table-content" :class="{hide : !insuranceForm.f3}">
219 <div class="table-content" :class="{hide : !insuranceForm.f4}"> 190 <div class="data-line">
220 <div class="data-line"> 191 <div class="td w2">{{$t('customService.insuranceQuery.t4NameCn')}}</div>
221 <div class="cell1"> 192 <div class="td w2">{{$t('customService.insuranceQuery.t4NameEn')}}</div>
222 <div class="label">{{$t('customService.insuranceQuery.t5PaymentPeriod')}}</div> 193 <div class="td w2">{{$t('customService.insuranceQuery.t4Relation')}}</div>
223 <div class="label">30年</div> 194 <div class="td w2">{{$t('customService.insuranceQuery.t4Allocation')}}</div>
224 </div> 195 </div>
225 <div class="separator-v"></div> 196 <div class="separator-h"></div>
226 <div class="cell1"> 197 <div class="data-line">
227 <div class="label">{{$t('customService.insuranceQuery.t5PaymentMethod')}}</div> 198 <div class="td w2">{{dataForm.v4}}</div>
228 <div class="label">{{dataForm.v5}}</div> 199 <div class="td w2">Zhangsan</div>
200 <div class="td w2">{{dataForm.v4_2}}</div>
201 <div class="td w2">50%</div>
202 </div>
203 <div class="separator-h"></div>
204 <div class="data-line">
205 <div class="td w2">李四</div>
206 <div class="td w2">Lisi</div>
207 <div class="td w2">{{dataForm.v4_3}}</div>
208 <div class="td w2">50%</div>
229 </div> 209 </div>
230 </div> 210 </div>
231 <div class="separator-h"></div> 211 </div>
232 212
233 <div class="data-line"> 213 <div class="cell-group">
234 <div class="cell1"> 214 <div class="table-header">
235 <div class="label">{{$t('customService.insuranceQuery.t5PaymentCurrency')}}</div> 215 <div class="normal-header">
236 <div class="label">{{dataForm.v6}}</div> 216 <div class="title">{{$t('customService.insuranceQuery.t5Title')}}</div>
237 </div> 217 <div class="guide" :class="{rotate180 : !insuranceForm.f4}" @click="insuranceForm.f4 = !insuranceForm.f4"></div>
238 <div class="separator-v"></div>
239 <div class="cell1">
240 <div class="label">{{$t('customService.insuranceQuery.t5CurrentPremium')}}</div>
241 <div class="label">HK$2,000</div>
242 </div> 218 </div>
243 </div> 219 </div>
244 <div class="separator-h"></div> 220 <div class="table-content" :class="{hide : !insuranceForm.f4}">
221 <div class="data-line">
222 <div class="cell1">
223 <div class="label">{{$t('customService.insuranceQuery.t5PaymentPeriod')}}</div>
224 <div class="label">30年</div>
225 </div>
226 <div class="separator-v"></div>
227 <div class="cell1">
228 <div class="label">{{$t('customService.insuranceQuery.t5PaymentMethod')}}</div>
229 <div class="label">{{dataForm.v5}}</div>
230 </div>
231 </div>
232 <div class="separator-h"></div>
245 233
246 <div class="data-line"> 234 <div class="data-line">
247 <div class="cell1"> 235 <div class="cell1">
248 <div class="label">{{$t('customService.insuranceQuery.t5PaymentBank')}}</div> 236 <div class="label">{{$t('customService.insuranceQuery.t5PaymentCurrency')}}</div>
249 <div class="label">{{dataForm.v7}}</div> 237 <div class="label">{{dataForm.v6}}</div>
238 </div>
239 <div class="separator-v"></div>
240 <div class="cell1">
241 <div class="label">{{$t('customService.insuranceQuery.t5CurrentPremium')}}</div>
242 <div class="label">HK$2,000</div>
243 </div>
250 </div> 244 </div>
251 <div class="separator-v"></div> 245 <div class="separator-h"></div>
252 <div class="cell1"> 246
253 <div class="label">{{$t('customService.insuranceQuery.t5PaymentAccount')}}</div> 247 <div class="data-line">
254 <div class="label">1234******888</div> 248 <div class="cell1">
249 <div class="label">{{$t('customService.insuranceQuery.t5PaymentBank')}}</div>
250 <div class="label">{{dataForm.v7}}</div>
251 </div>
252 <div class="separator-v"></div>
253 <div class="cell1">
254 <div class="label">{{$t('customService.insuranceQuery.t5PaymentAccount')}}</div>
255 <div class="label">1234******888</div>
256 </div>
255 </div> 257 </div>
258 <div class="separator-h"></div>
256 </div> 259 </div>
257 <div class="separator-h"></div>
258 </div> 260 </div>
259 </div>
260 261
261 <div class="cell-group cell-between"> 262 <div class="cell-group cell-between">
262 <div class="table-header"> 263 <div class="table-header">
263 <div class="normal-header"> 264 <div class="normal-header">
264 <div class="title">{{$t('customService.insuranceQuery.t6Title')}}</div> 265 <div class="title">{{$t('customService.insuranceQuery.t6Title')}}</div>
265 <div class="guide" :class="{rotate180 : !insuranceForm.f5}" @click="insuranceForm.f5 = !insuranceForm.f5"></div> 266 <div class="guide" :class="{rotate180 : !insuranceForm.f5}" @click="insuranceForm.f5 = !insuranceForm.f5"></div>
266 </div> 267 </div>
267 </div>
268 <div class="table-content" :class="{hide : !insuranceForm.f5}">
269 <div class="data-line">
270 <div class="td w2">{{$t('customService.insuranceQuery.t6PaymentPeriod')}}</div>
271 <div class="td w2">{{$t('customService.insuranceQuery.t6PaymentMethod')}}</div>
272 <div class="td w2">{{$t('customService.insuranceQuery.t6ClosingDate')}}</div>
273 <div class="td w2">{{$t('customService.insuranceQuery.t6PaymentAmount')}}</div>
274 </div>
275 <div class="separator-h"></div>
276 <div class="data-line">
277 <div class="td w2">第二期</div>
278 <div class="td w2">{{dataForm.v8}}</div>
279 <div class="td w2">2021-1-1</div>
280 <div class="td w2">HK$2,000</div>
281 </div> 268 </div>
282 <div class="separator-h"></div> 269 <div class="table-content" :class="{hide : !insuranceForm.f5}">
283 <div class="data-line"> 270 <div class="data-line">
284 <div class="td w2">首期</div> 271 <div class="td w2">{{$t('customService.insuranceQuery.t6PaymentPeriod')}}</div>
285 <div class="td w2">{{dataForm.v8}}</div> 272 <div class="td w2">{{$t('customService.insuranceQuery.t6PaymentMethod')}}</div>
286 <div class="td w2">2020-1-1</div> 273 <div class="td w2">{{$t('customService.insuranceQuery.t6ClosingDate')}}</div>
287 <div class="td w2">HK$2,000</div> 274 <div class="td w2">{{$t('customService.insuranceQuery.t6PaymentAmount')}}</div>
275 </div>
276 <div class="separator-h"></div>
277 <div class="data-line">
278 <div class="td w2">第二期</div>
279 <div class="td w2">{{dataForm.v8}}</div>
280 <div class="td w2">2021-1-1</div>
281 <div class="td w2">HK$2,000</div>
282 </div>
283 <div class="separator-h"></div>
284 <div class="data-line">
285 <div class="td w2">首期</div>
286 <div class="td w2">{{dataForm.v8}}</div>
287 <div class="td w2">2020-1-1</div>
288 <div class="td w2">HK$2,000</div>
289 </div>
288 </div> 290 </div>
289 </div> 291 </div>
290 </div> 292 </div>
......
...@@ -43,7 +43,6 @@ ...@@ -43,7 +43,6 @@
43 background-image: linear-gradient(to bottom, #f05f28, #f05021); 43 background-image: linear-gradient(to bottom, #f05f28, #f05021);
44 } 44 }
45 45
46
47 } 46 }
48 47
49 &-line { 48 &-line {
...@@ -53,7 +52,7 @@ ...@@ -53,7 +52,7 @@
53 52
54 &-cont { 53 &-cont {
55 @extend .bb; 54 @extend .bb;
56 padding: 4.25rem 2rem 0 2.5rem; 55 padding: 4.25rem 2rem $marginMedium-M 2.5rem;
57 border: solid 1px #f2f2f2; 56 border: solid 1px #f2f2f2;
58 background-color: #ffffff; 57 background-color: #ffffff;
59 min-height: 43.75rem; 58 min-height: 43.75rem;
...@@ -90,11 +89,6 @@ ...@@ -90,11 +89,6 @@
90 } 89 }
91 } 90 }
92 91
93 /* 隐藏下方的滚动条 */
94 // .payment-nav::-webkit-scrollbar {
95 // background-color: transparent;
96 // }
97
98 .payment-nav::-webkit-scrollbar { 92 .payment-nav::-webkit-scrollbar {
99 display: none; 93 display: none;
100 } 94 }
......
...@@ -52,10 +52,7 @@ ...@@ -52,10 +52,7 @@
52 flex: 1; 52 flex: 1;
53 } 53 }
54 54
55 .agree{ 55 .agree {}
56 // @extend .bb;
57 // padding-left: 80px;
58 }
59 56
60 .name-ipt { 57 .name-ipt {
61 width: 13.666667rem; 58 width: 13.666667rem;
...@@ -132,3 +129,24 @@ ...@@ -132,3 +129,24 @@
132 background-blend-mode: soft-light, ; 129 background-blend-mode: soft-light, ;
133 background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429); 130 background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429);
134 } 131 }
132
133
134 @media (max-width: 768px) {
135 .form {
136 &-item {
137 .ipt-wrap {
138 display: block;
139 }
140
141 .agree {
142 margin-top: $marginSmall-M;
143
144 .check-icon {
145 margin-left: 0;
146 }
147 }
148
149
150 }
151 }
152 }
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
8 </div> 8 </div>
9 <div class="ipt-wrap"> 9 <div class="ipt-wrap">
10 <input class="ipt mail-ipt" :class="{err : errorTips.e1.length > 0}" type="text" v-model="data.mobile"> 10 <input class="ipt mail-ipt" :class="{err : errorTips.e1.length > 0}" type="text" v-model="data.mobile">
11 <div class="agree pointer" @click="checked1 = !checked1"> 11 <div class="agree" @click="checked1 = !checked1">
12 <img v-if="!checked1" class="check-icon pointer" src="@/assets/images/reservation/un-check.png"> 12 <img v-if="!checked1" class="check-icon pointer" src="@/assets/images/reservation/un-check.png">
13 <img v-else class="check-icon pointer" src="@/assets/images/reservation/check.png"> 13 <img v-else class="check-icon pointer" src="@/assets/images/reservation/check.png">
14 <span>{{$t("policyChangeContact.checkTips")}}</span> 14 <span>{{$t("policyChangeContact.checkTips")}}</span>
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
25 </div> 25 </div>
26 <div class="ipt-wrap"> 26 <div class="ipt-wrap">
27 <input class="ipt mail-ipt" type="text" :class="{err : errorTips.e2.length > 0}" v-model="data.address"> 27 <input class="ipt mail-ipt" type="text" :class="{err : errorTips.e2.length > 0}" v-model="data.address">
28 <div class="pointer" @click="checked2 = !checked2"> 28 <div class="agree" @click="checked2 = !checked2">
29 <img v-if="!checked2" class="check-icon pointer" src="@/assets/images/reservation/un-check.png"> 29 <img v-if="!checked2" class="check-icon pointer" src="@/assets/images/reservation/un-check.png">
30 <img v-else class="check-icon pointer" src="@/assets/images/reservation/check.png"> 30 <img v-else class="check-icon pointer" src="@/assets/images/reservation/check.png">
31 <span>{{$t("policyChangeContact.checkTips")}}</span> 31 <span>{{$t("policyChangeContact.checkTips")}}</span>
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
41 </div> 41 </div>
42 <div class="ipt-wrap"> 42 <div class="ipt-wrap">
43 <input class="ipt mail-ipt" type="text" :class="{err : errorTips.e3.length > 0}" v-model="data.email"> 43 <input class="ipt mail-ipt" type="text" :class="{err : errorTips.e3.length > 0}" v-model="data.email">
44 <div class="pointer" @click="checked3 = !checked3"> 44 <div class="agree" @click="checked3 = !checked3">
45 <img v-if="!checked3" class="check-icon pointer" src="@/assets/images/reservation/un-check.png"> 45 <img v-if="!checked3" class="check-icon pointer" src="@/assets/images/reservation/un-check.png">
46 <img v-else class="check-icon pointer" src="@/assets/images/reservation/check.png"> 46 <img v-else class="check-icon pointer" src="@/assets/images/reservation/check.png">
47 <span>{{$t("policyChangeContact.checkTips")}}</span> 47 <span>{{$t("policyChangeContact.checkTips")}}</span>
......
...@@ -121,8 +121,8 @@ ...@@ -121,8 +121,8 @@
121 } 121 }
122 122
123 .w5 { 123 .w5 {
124 flex: 1; 124 // flex: 1;
125 // width: 212px; 125 width: 212px;
126 } 126 }
127 127
128 } 128 }
...@@ -146,9 +146,22 @@ ...@@ -146,9 +146,22 @@
146 .icon { 146 .icon {
147 display: inline-block; 147 display: inline-block;
148 width: 1rem; 148 width: 1rem;
149 ;
150 margin-right: .5rem; 149 margin-right: .5rem;
151 } 150 }
152 151
153 margin-top: 1.25rem; 152 margin-top: 1.25rem;
154 } 153 }
154
155 @media (max-width: 1200px) {
156 .container {
157 display: -webkit-box;
158 overflow-x: scroll;
159 -webkit-overflow-scrolling: touch;
160 width: 92vw;
161
162 }
163 }
164
165 .container::-webkit-scrollbar {
166 display: none;
167 }
......
1 1
2 <template> 2 <template>
3 <div class="policy-change-guide-container"> 3 <div>
4 <div class="table"> 4 <div class="container policy-change-guide-container">
5 <div class="table-header orange"> 5 <div class="table">
6 <div class="table-header-item w1">{{$t('policyChangeGuide.head1')}}</div> 6 <div class="table-header orange">
7 <div class="table-header-item w2">{{$t('policyChangeGuide.head2')}}</div> 7 <div class="table-header-item w1">{{$t('policyChangeGuide.head1')}}</div>
8 <div class="table-header-item w3">{{$t('policyChangeGuide.head3')}}</div> 8 <div class="table-header-item w2">{{$t('policyChangeGuide.head2')}}</div>
9 <div class="table-header-item w4">{{$t('policyChangeGuide.head4')}}</div> 9 <div class="table-header-item w3">{{$t('policyChangeGuide.head3')}}</div>
10 <div class="table-header-item w5">{{$t('policyChangeGuide.head5')}}</div> 10 <div class="table-header-item w4">{{$t('policyChangeGuide.head4')}}</div>
11 </div> 11 <div class="table-header-item w5">{{$t('policyChangeGuide.head5')}}</div>
12 <div class="table-content"> 12 </div>
13 <div v-for="(item,index) in i18n.policyChangeGuide.form" :key="index" class="table-content-item"> 13 <div class="table-content">
14 <div v-if="index < i18n.policyChangeGuide.form.length-1" class="hl"></div> 14 <div v-for="(item,index) in i18n.policyChangeGuide.form" :key="index" class="table-content-item">
15 <div class="ww w1"> 15 <div v-if="index < i18n.policyChangeGuide.form.length-1" class="hl"></div>
16 <div class="grid"> 16 <div class="ww w1">
17 <div class="v-line"></div> 17 <div class="grid">
18 <span :class="{'act':item.projectType == 1}" @click="onProjectHandler(item)" v-html="item.project"> {{item.project}}</span> 18 <div class="v-line"></div>
19 <span :class="{'act':item.projectType == 1}" @click="onProjectHandler(item)" v-html="item.project"> {{item.project}}</span>
20 </div>
19 </div> 21 </div>
20 </div> 22 <div class="ww w2">
21 <div class="ww w2"> 23 <div class="grid">
22 <div class="grid"> 24 <div class="v-line"></div>
23 <div class="v-line"></div> 25 <span v-html="item.content"> {{item.content}}</span>
24 <span v-html="item.content"> {{item.content}}</span> 26 </div>
25 </div> 27 </div>
26 </div> 28 <div class="ww w3">
27 <div class="ww w3"> 29 <div class="grid">
28 <div class="grid"> 30 <div class="v-line"></div>
29 <div class="v-line"></div> 31 <span v-html="item.applicant"> {{item.applicant}}</span>
30 <span v-html="item.applicant"> {{item.applicant}}</span> 32 </div>
31 </div> 33 </div>
32 </div> 34 <div class="ww w4">
33 <div class="ww w4"> 35 <div class="grid">
34 <div class="grid"> 36 <div class="v-line"></div>
35 <div class="v-line"></div> 37 <span v-html="item.receptionTime"> {{item.receptionTime}}</span>
36 <span v-html="item.receptionTime"> {{item.receptionTime}}</span> 38 </div>
37 </div> 39 </div>
38 </div> 40 <div class="ww w5">
39 <div class="ww w5"> 41 <div class="grid">
40 <div class="grid"> 42 <div class="material" :class="{'pointer':item2.type == 1}" v-for="(item2,index2) in item.materialList" :key="index2">
41 <div class="material" :class="{'pointer':item2.type == 1}" v-for="(item2,index2) in item.materialList" :key="index2"> 43 <img v-if="item2.type == 1" class="icon" src="@/assets/images/common-form/icon-cf-download.png" alt="">
42 <img v-if="item2.type == 1" class="icon" src="@/assets/images/common-form/icon-cf-download.png" alt=""> 44 <span :class="{'act':item2.type == 1}" v-html="item2.name">{{ item2.name }}</span>
43 <span :class="{'act':item2.type == 1}" v-html="item2.name">{{ item2.name }}</span> 45 </div>
44 </div> 46 </div>
45 </div> 47 </div>
46 </div> 48 </div>
47 </div> 49 </div>
48 </div> 50 </div>
49 </div> 51 </div>
52
50 <div class="notice"> 53 <div class="notice">
51 <img class="icon" src="@/assets/images/policy-change-guide/icon-pcg-notice.png" alt=""> {{$t("policyChangeGuide.notice")}} 54 <img class="icon" src="@/assets/images/policy-change-guide/icon-pcg-notice.png" alt=""> {{$t("policyChangeGuide.notice")}}
52 </div> 55 </div>
53 </div> 56 </div>
57
54 </template> 58 </template>
55 59
56 <script src="./policy-change-guide.js"></script> 60 <script src="./policy-change-guide.js"></script>
......
...@@ -167,3 +167,12 @@ ...@@ -167,3 +167,12 @@
167 background-blend-mode: soft-light, ; 167 background-blend-mode: soft-light, ;
168 background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429); 168 background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429);
169 } 169 }
170
171
172 @media (max-width: 768px) {
173 .form {
174 &-item2 {
175 display: block;
176 }
177 }
178 }
......
...@@ -302,3 +302,27 @@ ...@@ -302,3 +302,27 @@
302 // color: $cFontGray; 302 // color: $cFontGray;
303 color: #4c4948; 303 color: #4c4948;
304 } 304 }
305
306 .box-shadow {
307 box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
308 }
309
310 @media (max-width: 1200px) {
311 .content {
312 @include content-percent();
313 min-height: 0;
314 padding-bottom: 0;
315 }
316
317 .top-space {
318 height: 0;
319 }
320
321 .box-shadow {
322 box-shadow: none;
323 }
324
325 .ebg {
326 display: none;
327 }
328 }
......
...@@ -239,10 +239,6 @@ ...@@ -239,10 +239,6 @@
239 padding-bottom: 0; 239 padding-bottom: 0;
240 } 240 }
241 241
242 .box {
243 width: 96%;
244 }
245
246 .top-space { 242 .top-space {
247 height: 0; 243 height: 0;
248 } 244 }
......
...@@ -242,6 +242,10 @@ ...@@ -242,6 +242,10 @@
242 } 242 }
243 } 243 }
244 244
245 .box-shadow {
246 box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
247 }
248
245 @media (max-width: 1200px) { 249 @media (max-width: 1200px) {
246 .content { 250 .content {
247 @include content-percent(); 251 @include content-percent();
...@@ -267,7 +271,6 @@ ...@@ -267,7 +271,6 @@
267 height: 1rem; 271 height: 1rem;
268 } 272 }
269 273
270
271 &-nav { 274 &-nav {
272 margin: 1.75rem auto 1rem; 275 margin: 1.75rem auto 1rem;
273 } 276 }
......
...@@ -242,6 +242,10 @@ ...@@ -242,6 +242,10 @@
242 } 242 }
243 } 243 }
244 244
245 .box-shadow {
246 box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
247 }
248
245 @media (max-width: 1200px) { 249 @media (max-width: 1200px) {
246 .content { 250 .content {
247 @include content-percent(); 251 @include content-percent();
......
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
30 30
31 .step { 31 .step {
32 @extend .fcc; 32 @extend .fcc;
33 margin-bottom: 4.25rem; 33 margin: .5rem auto 4.25rem;
34 34
35 img { 35 img {
36 height: 4.25rem; 36 height: 4.25rem;
...@@ -250,6 +250,10 @@ ...@@ -250,6 +250,10 @@
250 } 250 }
251 } 251 }
252 252
253 .box-shadow {
254 box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
255 }
256
253 @media (max-width: 1200px) { 257 @media (max-width: 1200px) {
254 .content { 258 .content {
255 @include content-percent(); 259 @include content-percent();
......