uniapp开发可能会用到的列表样式 记录方便后期可能复用

<div class="list">
				<div class="listItem" v-for="(item,index) in packagelist" :key="index">
					<div class="listIteml">
						<image :src="configs.baseUrl+item.thumb"></image>
					</div>
					<div class="listItemr">
						<div class="listItemrTitle">{{item.title}}</div>
						<div class="listItemrDesc"></div>
						<div class="pricebody">
							<div class="priceleft">¥{{item.price}}<text>起</text></div>
							<div class="yuyue" @click="goyuyue(item.id)">预约</div>
						</div>
					</div>
				</div>
			</div>

.listItem {
		width: 690rpx;
		margin: 0 auto;
		height: 150rpx;
		background: #fff;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		align-content: flex-start;
		margin-top: 30rpx;

		.listIteml {
			image {
				width: 120rpx;
				height: 120rpx;
				margin-left: 30rpx;
				margin-right: 30rpx;
			}
		}

		.listItemr {
			height: 120rpx;
			width: 480rpx;

			.pricebody {
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-wrap: nowrap;
				flex-direction: row;
				align-content: flex-start;
				width: 100%;
				margin-top: 20rpx;

				.priceleft {
					color: #9B3227;

					text {
						font-size: 22rpx;
						margin-left: 6rpx;
						color: #999;
					}
				}

				.yuyue {
					width: 120rpx;
					height: 50rpx;
					border-radius: 10rpx;
					background: #FEC846;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-wrap: nowrap;
					flex-direction: row;
					align-content: flex-start;
					color: #fff;
					font-size: 26rpx;
				}
			}

			.listItemrTitle {
				font-size: 30rpx;
				color: #333;
			}

		}
	}