opt:优化选择入住类型页面代码

subpkg_checkin/selectCheckinType/selectCheckinType.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="page">
+	<view class="container">
 		<view class="top">
 			<!-- #ifdef MP-WEIXIN -->
 			<NavigateBar title="源享住" control="back"></NavigateBar>
@@ -10,8 +10,8 @@
 		</view>
 
 		<view class="adv-pic">
-			<u-swiper :list="advPicList" keyName="image" indicator indicatorMode="dot" circular 
-				height="540rpx" imgMode="aspectFit" interval="2500"></u-swiper>
+			<u-swiper :list="advPicList" keyName="image" indicator indicatorMode="dot" circular height="540rpx"
+				imgMode="aspectFit" interval="2500"></u-swiper>
 		</view>
 
 		<view class="hotel-name">
@@ -25,10 +25,8 @@
 			</view>
 		</view>
 
-
 		<view class="btn-area">
-			<button class="btn" v-for="btn in btnList" v-text="btn.text" hover-class="btn-hover"
-				@click="navigateTo(btn.url)"></button>
+			<button v-for="btn in btnList" :key=btn.text v-text="btn.text" @click="navigateTo(btn.url)"></button>
 		</view>
 	</view>
 </template>
@@ -57,8 +55,7 @@
 						url: "/subpkg_checkin/queryOrder/queryOrder"
 					}
 				],
-				advPicList: [
-					{
+				advPicList: [{
 						image: IMG_BASE_URL + "/home_adv1.png",
 						title: ""
 					},
@@ -79,7 +76,7 @@
 			}
 		},
 		methods: {
-			...mapMutations("m_business", ["updateOrder","updateCheckinInfo"]),
+			...mapMutations("m_business", ["updateOrder", "updateCheckinInfo"]),
 			navigateTo(url) {
 				uni.navigateTo({
 					url: url
@@ -110,68 +107,68 @@
 <style lang="scss" scoped>
 	@import "../../config.scss";
 
-	.page {
+	.container {
 		height: 100%;
 		width: 100%;
 		display: flex;
 		flex-direction: column;
-	}
-
-	.top {
-		width: 100%;
-		height: 130rpx;
-		position: fixed;
-		top: 0;
-		left: 0;
-		right: 0;
-		z-index: 99;
-	}
 
-	.adv-pic {
-		width: 100%;
-		height: 540rpx;
-	}
+		.top {
+			width: 100%;
+			height: 130rpx;
+			position: fixed;
+			top: 0;
+			left: 0;
+			right: 0;
+			z-index: 99;
+		}
 
-	.hotel-name {
-		margin: 0 40rpx;
-		display: flex;
-		flex-direction: row;
-		color: #FFFFFF;
-		background-color: hsla(0, 100%, 0%, 0.5);
-		padding: 20rpx 0;
-		border-radius: 10rpx;
-		transform: translateY(-60rpx);
+		.adv-pic {
+			width: 100%;
+			height: 540rpx;
+		}
 
-		.hotel-name--fix {
-			font-size: 20rpx;
-			width: 100rpx;
-			padding-right: 16rpx;
+		.hotel-name {
+			margin: 0 40rpx;
 			display: flex;
 			flex-direction: row;
-			align-items: center;
-		}
+			color: #FFFFFF;
+			background-color: hsla(0, 100%, 0%, 0.5);
+			padding: 20rpx 0;
+			border-radius: 10rpx;
+			transform: translateY(-60rpx);
 
-		.hotel-name--content {
-			width: 100%;
-			display: flex;
-			align-items: center;
-			justify-content: center;
+			.hotel-name--fix {
+				font-size: 20rpx;
+				width: 100rpx;
+				padding-right: 16rpx;
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+			}
+
+			.hotel-name--content {
+				width: 100%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
 		}
-	}
 
-	.btn-area {
-		margin-top: 100rpx;
-	}
+		.btn-area {
+			margin-top: 100rpx;
 
-	.btn {
-		color: #FFFFFF;
-		background-color: #9e97c3;
-		margin: 0 60rpx 60rpx;
-		font-size: 33rpx;
-	}
+			button {
+				color: #FFFFFF;
+				background-color: #9e97c3;
+				margin: 0 60rpx 60rpx;
+				font-size: 33rpx;
 
-	.btn-hover {
-		color: #FFFFFF;
-		background-color: #9e97c3;
+				&:hover {
+					color: #FFFFFF;
+					background-color: #CECBE1;
+				}
+			}
+		}
 	}
 </style>