tlfb/pages/product/store.vue

<template>
	<view class="store">
		<view class="list">
			<view class="item">
				
				<view class="left">
					<view class="img">
						<image src="@/static/error/errorImage.jpg" mode=""></image>
					</view>
					<view class="middle">
						<view class="name">
							<text class="storeName">陀罗台州店</text><br>
							<text class="address">台州市椒江区市府大道120号</text>
						</view>
						<view class="distance">
							<image src="@/static/icon/img01.png" mode=""></image>
							距离1.5KM
						</view>
					</view>
				</view>
				<view class="about">
					门店
				</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
$grey: #95A0B1;
$text: #333333;
$red: #FF4C4C;
	.store {
		.list {
			.item {
				box-shadow: 2rpx 2rpx 10rpx #e1e1e1;
				height: 220rpx;
				border-radius: 20rpx;
				background-color: #fff;
				margin: 20rpx;
				padding: 20rpx;
				display: flex;
				justify-content: space-between;
				.left {
					display: flex;
					.img {
						margin-right: 20rpx;
						image {
							border-radius: 20rpx;
							width: 180rpx;
							height: 180rpx;
						}
					}
					.middle {
						display: grid;
						align-content: space-between;
						.name {
							.storeName {
								font-weight: bold;
								font-size: 32rpx;
								color: #333333;
							}
							.address {
								font-size: 20rpx;
								color: #6c6c6c;
							}
						}
						.distance {
							font-size: 26rpx;
							color: $grey;
							image {
								width: 20rpx;
								height: 25rpx;
								margin-right: 10rpx;
							}
						}
					}
				}
				.about {
					font-size: 26rpx;
					padding: 0 10rpx;
					border-radius: 10rpx;
					height: 50rpx;
					line-height: 50rpx;
					color: #fff;
					background: linear-gradient(90deg,  #FFBD70 0%, #FF8F44 100%);
				}
			}
		}
	}
</style>