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 188 additions and 76 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 = [];
83 if (this.type == "nav") {
84 navList = this.i18n.nav.navList;
76 navList.forEach(element => { 85 navList.forEach(element => {
77 this.activeNames.push( 86 this.activeNames.push(
78 [] 87 []
79 ) 88 )
80 }); 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 class="container">
2 <div> 3 <div>
3 <div class="cell-group"> 4 <div class="cell-group">
4 <div class="table-header orange"> 5 <div class="table-header orange">
...@@ -289,6 +290,7 @@ ...@@ -289,6 +290,7 @@
289 </div> 290 </div>
290 </div> 291 </div>
291 </div> 292 </div>
293 </div>
292 </template> 294 </template>
293 295
294 296
......
...@@ -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="container policy-change-guide-container">
4 <div class="table"> 5 <div class="table">
5 <div class="table-header orange"> 6 <div class="table-header orange">
6 <div class="table-header-item w1">{{$t('policyChangeGuide.head1')}}</div> 7 <div class="table-header-item w1">{{$t('policyChangeGuide.head1')}}</div>
...@@ -47,10 +48,13 @@ ...@@ -47,10 +48,13 @@
47 </div> 48 </div>
48 </div> 49 </div>
49 </div> 50 </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();
......