完成列表页

pages/hotel/components/hotel-good.vue

 <template>
+	<view class="hotel-list-item">
+		<view class="img-box">
+			<image src="http://imgfile.oytour.com/Upload/DMC/202105251114114560000000058.png" mode="aspectFill"></image>
+		</view>
+		<view class="hotel-info">
+			<view class="hotel-name">乐山禅驿·嘉定院子酒店</view>
+			<view class="hotel-start">
+				<!-- TODO：判定是否为星级酒店，如果是显示星级，不是，显示另外一种方式 -->
+				<view class="rate" v-if="hotelType==0">
+					<u-rate active-color="#FEB969" inactive-color="#FFF" current="4" active-icon="star" inactive-icon="star" disabled></u-rate>
+					<text style="margin-left: 20rpx;vertical-align: top;">四星</text>
+				</view>
+				<view class="other-rate" v-if="hotelType==1">
+					<text>温泉酒店</text>
+					<span class="line"></span>
+				</view>
+				<view class="other-rate" v-if="hotelType==2">
+					<text>精选民宿</text>
+					<span class="line"></span>
+				</view>
+			</view>
+			<view class="localtion">距该酒店直线4.1公里·近九寨千古情景区·沟口</view>
+			<view>
+				<u-tag text="亲子设施" bg-color="#FFF" border-color="#DFBE6E" color="#DFBE6E" size="mini"></u-tag>
+			</view>
+			<view class="price">
+				<text>￥</text>
+				<text class="money">599</text>
+				<text>起</text>
+			</view>
+		</view>
+	</view>
 </template>
 
 <script>
+	export default {
+		props:{
+			hotelType:{
+				type:Number,
+				default:0
+			}
+		},
+		data() {
+			return {
+				key: value
+			}
+		},
+	}
 </script>
 
 <style>
+	.hotel-list-item{
+		margin: 30rpx 30rpx 0 30rpx;
+		padding-bottom: 30rpx;
+		border-bottom: 1rpx solid #E2E2E2;
+		display: flex;
+		align-items: center;
+	}
+	.hotel-list-item .img-box{
+		width: 220rpx;
+		height: 280rpx;
+		border-radius: 20rpx;
+		overflow: hidden;
+		margin-right: 30rpx;
+	}
+	.hotel-list-item .img-box image{
+		width: 100%;
+	}
+	.hotel-list-item .hotel-info{
+		width: 1px;
+		flex: 1;
+	}
+	.hotel-list-item .hotel-info .hotel-name{
+		font-weight: 500;
+		color: #111111;
+		line-height: 30rpx;
+		font-size: 30rpx;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.hotel-list-item .hotel-info .hotel-start{
+		margin:10rpx 0;
+	}
+	.hotel-list-item .hotel-info .hotel-start .rate{
+		font-size: 30rpx;
+		font-weight: 500;
+		color: #999999;
+		line-height: 30rpx;
+	}
+	.hotel-list-item .hotel-info .hotel-start .other-rate{
+		display: inline-block;
+		position: relative;
+	}
+	.hotel-list-item .hotel-info .hotel-start .other-rate text{
+		position: relative;z-index: 2;
+		font-size: 30rpx;
+		line-height: 30rpx;
+		font-weight: 500;
+		color: #111;
+	}
+	.hotel-list-item .hotel-info .hotel-start .other-rate .line{
+		background-color: #DFBE6E;
+		height: 6px;
+		bottom: 2px;
+		left: 0;
+		right: 0;
+		position: absolute;
+		z-index: 1;
+	}
+	.hotel-list-item .hotel-info .localtion{
+		font-size: 24rpx;
+		font-weight: 400;
+		color: #999999;
+		line-height: 30rpx;
+		
+		text-overflow: -o-ellipsis-lastline;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+		margin-bottom: 10rpx;
+	}
+	.hotel-list-item .hotel-info .price{
+		margin-top: 10rpx;
+		font-weight: 500;
+		color: #FF3166;
+		font-size: 20rpx;
+		text-align: right;
+	}
+	.hotel-list-item .hotel-info .price .money{
+		font-size: 36rpx;
+	}
 </style>

pages/hotel/list.vue

@@ -56,7 +56,17 @@
 		</view>
 		<scroll-view :scroll-y="true" @scrolltolower="lower" :enable-back-to-top="true" :enable-flex="true" :scroll-top="scrollTop"
 		 @scroll="scroll" style="height: calc(100% - 224rpx); padding-bottom: 0px;">
-		 
+		 <hotel-good></hotel-good>
+		 <hotel-good></hotel-good>
+		 <hotel-good :hotelType="1"></hotel-good>
+		 <hotel-good></hotel-good>
+		 <hotel-good :hotelType="1"></hotel-good>
+		 <hotel-good></hotel-good>
+		 <hotel-good></hotel-good>
+		 <hotel-good></hotel-good>
+		 <hotel-good :hotelType="2"></hotel-good>
+		 <hotel-good></hotel-good>
+		 <hotel-good></hotel-good>
 		 <u-loadmore v-if="showLoading" :status="status" :load-text="loadText" :font-size="24" :margin-top="20"
 		  :margin-bottom="20" bg-color="#F5F5F5" color="#111" />
 		</scroll-view>