细节优化

components/storeList/popStoreList.vue

 <template>
-	<view class="store-list">
-		<view class="flex-col" v-for="(val,i) in list" :key="i" @tap.stop="onNavToHome(val)">
-			<view class="flex-row">
-				<view class="room-img-box">
-					<image :src="val.images[0]" mode="aspectFill" @tap.stop="onPreview(val)"></image>
-				</view>
-				<view class="flex-1 part-right">
-					<view class="part-title">
-						<view class='cu-tag radius sm bg-pink'>{{storeTypeEnum[val.storeType]}}</view>
-						<text class="text-title text-lg text-bold">【{{val.name}}】</text>
-					</view>
-					<view class="flex-between">
-						<view class="flex-row part-title">
-							<text class="cuIcon-location text-pink margin-right"></text>
-							<view class="flex-1">
-								<text class="text-gray text-sm">{{val.address}}</text>
-							</view>
+	<view class="store-list-content">
+		<scroll-view class="scroll-view" scroll-y="true">
+			<view class="store-list">
+				<view class="flex-col" v-for="(val,i) in list" :key="i" @tap.stop="onNavToHome(val)">
+					<view class="flex-row">
+						<view class="room-img-box">
+							<image :src="val.images[0]" mode="aspectFill" @tap.stop="onPreview(val)"></image>
 						</view>
-						<!-- <view class="nav-icon" @tap.stop="onNavToMap(val)">
-							<image :src="assetsPath+'/map_icon.png'" mode="widthFix"></image>
-						</view> -->
-					</view>					
-					<view class="flex-between part-title">
-						<view class='cu-tag radius line-pink'>距离{{Number(val.distance).toFixed(2)}}km</view>
-						<view class="location">
-							<button class="cu-btn bg-pink" >去预定</button>
+						<view class="flex-1 part-right">
+							<view class="part-title">
+								<view class='cu-tag radius sm bg-pink'>{{storeTypeEnum[val.storeType]}}</view>
+								<text class="text-title text-lg text-bold">【{{val.name}}】</text>
+							</view>
+							<view class="flex-between">
+								<view class="flex-row part-title">
+									<text class="cuIcon-location text-pink margin-right"></text>
+									<view class="flex-1">
+										<text class="text-gray text-sm">{{val.address}}</text>
+									</view>
+								</view>
+								<!-- <view class="nav-icon" @tap.stop="onNavToMap(val)">
+								<image :src="assetsPath+'/map_icon.png'" mode="widthFix"></image>
+							</view> -->
+							</view>
+							<view class="flex-between part-title">
+								<view class='cu-tag radius line-pink'>距离{{Number(val.distance).toFixed(2)}}km</view>
+								<view class="location">
+									<button class="cu-btn bg-pink">去预定</button>
+								</view>
+							</view>
 						</view>
 					</view>
 				</view>
 			</view>
-		</view>
+		</scroll-view>
 	</view>
-
 </template>
 
 <script>
@@ -39,7 +42,7 @@
 	import {
 		getDictItem
 	} from "@/utils/tools.js"
-	
+
 	export default {
 		name: "storeList",
 		props: {
@@ -52,7 +55,7 @@
 			return {
 				assetsPath: config.assetsPath,
 				list: [],
-				storeTypeEnum:{},
+				storeTypeEnum: {},
 			};
 		},
 		watch: {
@@ -65,14 +68,14 @@
 		},
 		mounted() {
 			let dicts = JSON.parse(uni.getStorageSync('dicts'))
-			this.storeTypeEnum = getDictItem(dicts,"store_type");
+			this.storeTypeEnum = getDictItem(dicts, "store_type");
 		},
 		methods: {
 			onLoading() {
 				this.list = this.value;
 			},
-			onNavToHome(val){
-				this.$emit("change",val.id)
+			onNavToHome(val) {
+				this.$emit("change", val.id)
 			},
 			onPreview(item) {
 				uni.previewImage({
@@ -86,7 +89,7 @@
 					longitude: Number(val.longitude),
 					scale: 18,
 					name: val.address,
-					address:val.address,
+					address: val.address,
 					success: (res) => {
 						console.log(res)
 					},
@@ -100,10 +103,24 @@
 </script>
 
 <style lang="scss" scoped>
+	.store-list-content{
+		width: 100%;
+		height: 100%;
+	}
+	.scroll-view {
+		position: relative;
+		width: 100%;
+		height: 100%;
+	}
+
 	.store-list {
+		position: absolute;
+		top: 0;
+		left: 2%;
 		display: flex;
 		flex-direction: column;
-		width: 100%;
+		width: 96%;
+
 		>.flex-col {
 			display: flex;
 			flex-direction: column;
@@ -114,6 +131,7 @@
 			overflow: hidden;
 			padding: 12upx;
 			margin: 12upx 0;
+
 			.room-img-box {
 				display: flex;
 				width: 200upx;
@@ -121,6 +139,7 @@
 				border-radius: 12upx;
 				overflow: hidden;
 				margin: 0 20upx 0 0;
+
 				image {
 					height: 100%;
 				}
@@ -196,12 +215,14 @@
 			}
 		}
 	}
-	.nav-icon{
+
+	.nav-icon {
 		display: flex;
 		justify-content: center;
 		align-items: center;
 		width: 80upx;
-		image{
+
+		image {
 			display: block;
 			width: 100%;
 			height: auto;

pages/index/index.vue

@@ -183,11 +183,11 @@
 					</view>
 				</view>
 				<view class="tip-text">
-					<text class="text-title text-lg">本店当前时段所有包厢已被占用，您可以预约本店的其他时段，或者预定凑角附近的其它门店。</text>
+					<text class="text-title text-lg">本店当前时段所有包厢已被预定，您可以预约本店的其他时段，或者预定凑角附近的其它门店。</text>
 				</view>
 				<!-- 展示所有房间列表 -->
 				<view class="store-box">
-					<StoreList v-model="popStoreList" @change="onStoreChage"></StoreList>
+					<StoreList style="width: 100%;" v-model="popStoreList" @change="onStoreChage"></StoreList>
 				</view>
 			</view>
 		</uni-popup>

pages/order/order.vue

@@ -1899,10 +1899,17 @@
 						font-size: 32upx;
 					}
 
+                    .line-black{
+						border: 1px solid #e03997;
+						color: #e03997;
+					}
+					.line-black::after{
+						border-color: transparent;
+					}
 					.line-pink {
 						display: flex;
 						align-items: center;
-
+                        // border-color: #e03997;
 						.cuIcon-edit {
 							margin-bottom: 7upx;
 							margin-left: 12upx;