默认提交

@@ -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;
+			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 class="container">
 		<div>
 			<div class="cell-group">
 				<div class="table-header orange">
@@ -289,6 +290,7 @@
 				</div>
 			</div>
 		</div>
+	</div>
 </template>
 
 

@@ -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>
+		<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>
@@ -47,10 +48,13 @@
 					</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();