1/pages/cloudStore/components/shopItem.vue

<template>
	<view class="shopItem">
		<view class="left">
			<image class="shopIcon" :src="shopIcon"></image>
		</view>
		<view class="right">
			<text class="shopTitle">{{shopName}}</text>
			<view class="secondPart">
				<u-rate :count="count" v-model="value" allowHalf="true"></u-rate>
				<text class="rateValue">{{value}}</text>
				<text class="sales">月售 {{sales}}</text>
			</view>
			<view class="thridPart">
				<view class="label1">
					<image src="https://files.hecrab.com/crab-net/cloud-store-list-1.png" mode="aspectFit"></image>
					<text>验蟹师品质保</text>
				</view>
				<view class="label2">
					<image src="https://files.hecrab.com/crab-net/cloud-store-list-2.png" mode="aspectFit"></image>
					<text>一件代发</text>
				</view>
				<view class="label3">
					<image src="https://files.hecrab.com/crab-net/cloud-store-list-3.png" mode="aspectFit"></image>
					<text>批发</text>
				</view>
			</view>
			<view class="shopCommodity" >
				<view class="shopCommodityCon" v-for="(item) in 10">
					<image src="https://wx3.sinaimg.cn/large/006upAuggy1hs44n9w981j30u00u0te3.jpg"></image>
					<text> susu福福 </text>
					<view class="price"> 0.60 </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			shopName:{
				type:String,
				required:true
			},
			shopIcon:{
				type:String,
				required:true
			},
			value:{
				type:Number,
				required:true
			},
		},
		data(){
			return{
				count: 5,
				sales:28773,
				value:this.value,
			}
		}
	}
</script>

<style lang="scss">
	.shopItem{
		width: 678rpx;
		height: 396rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 16rpx;
		margin: 0 auto;
		display: flex;
		margin-bottom: 20rpx;
	}
	.shopIcon{
		width: 144rpx;
		height: 144rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 2rpx solid rgba(0,0,0,0.1);
	}
	.right{
		margin-left: 12rpx;
		width: 490rpx;
		height: 364rpx;
		.shopTitle{
			font-size: 32rpx;
			font-weight: 600;
		}
		.secondPart{
			width: 490rpx;
			height: 34rpx;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			display: flex;
			margin-top: 16rpx;
			position: relative;
			.rateValue{
				font-weight: 400;
				font-size: 24rpx;
				color: #FF480B;
				line-height: 34rpx;
				margin-left: 4rpx;
			}
			.sales{
				text-align: center;
				position: absolute;
				right: 0;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				line-height: 34rpx;
			}
			
		}
		.thridPart{
			width: 492rpx;
			height: 42rpx;
			margin-top: 18rpx;
			display: flex;
			justify-content: space-between;
			.label1{
				width: 204rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 2rpx solid rgba(155,118,56,0.3);
				display: flex;
				justify-content: center;
				>image{
					width: 32rpx;
					height: 32rpx;
				}
				>text{
					font-weight: 500;
					font-size: 24rpx;
					color: #9B7638;
					margin-left: 2rpx;
				}
				
			}
			.label2{
				width: 156rpx;
				border-radius: 12rpx;
				border: 2rpx solid rgba(6,115,237,0.3);
				display: flex;
				justify-content: center;
				>image{
					width: 32rpx;
					height: 32rpx;
				}
				>text{
					font-weight: 500;
					font-size: 24rpx;
					color: #0673ED;
					margin-left: 2rpx;
				}
			}
			.label3{
				width: 108rpx;
				border-radius: 8rpx;
				border: 2rpx solid rgba(249,64,64,0.3);
				display: flex;
				justify-content: center;
				>image{
					width: 32rpx;
					height: 32rpx;
				}
				>text{
					font-weight: 500;
					font-size: 24rpx;
					color: #F94040;
					margin-left: 2rpx;
				}
			}
		}
		.shopCommodity{
			margin-top: 20rpx;
			display: flex;
			overflow-x: auto;
			.shopCommodityCon{
				width: 120rpx;
				margin-right: 20rpx;
				>image{
					width: 120rpx;
					height: 120rpx;
				}
				>text{
					font-weight: 300;
					font-size: 24rpx;
					color: #999999;
				}
				.price{
					font-weight: 500;
					font-size: 24rpx;
					color: #FF3C26;
					&::before {
						content: "¥";
						font-size: 20rpx;
						color: #FF3C26;
					}
				}
			}
		}
	}
</style>