<template>
	<view class="content">
		<view class="item" v-for="(item,index) in list" :key='index'>
			<view class="top"  @click="toShop(item.id)">
			    <view class="tl">
			    	<view class="t1" @click="toShop(item.id)">
			    		<image :src="item.logo" mode=""></image>
			    	</view>
			    	<view class="t2">
			    		<view class="t2t">
			    			{{item.name}}
			    		</view>
			    		<view class="t2b">
			    			关注数 {{item.followCount}}
			    		</view>
			    	</view>
			    </view>
				<view class="t3">
					进店
				</view>
			</view>
			<view class="bottom">
				<scroll-view  class="scroll-box" scroll-x="true">
				<view class="scroll-view">
					<view class="items" @click="toDetail(itemz.id)" v-for="(itemz,indexz) in item.prolist" :key='indexz'>
						 <image :src="itemz.pic" mode=""></image>
						<view class="mo">
							￥{{itemz.sell_price}}
						</view>
					</view>
				</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
export default{
	props:{
		list:{
			default:()=>{
				return[]
			}
		},
	},
	mounted: function() {
		console.log("店铺信息=====",this.list)
	},
	methods:{
		toShop(id){
			uni.navigateTo({
				url:'/pagesA/shop/index?id='+id
				// url:'/pages/business/index?id='+id
			})
		},
		toDetail(id){
			uni.navigateTo({
				url:'/pages/shop/product?id='+id
			})
		}
	},
}
</script>

<style lang="scss">
	.item {
		padding: 20rpx;
		// border: 1px sol#000000;
		box-shadow:  0 4rpx 8rpx 0 rgba(0,0,0,0.03);
		margin-bottom: 24rpx;
		border-radius: 12rpx;
		background: #FFF;
		.bottom{
			margin-top: 20rpx;
			.scroll-box {
				& ::-webkit-scrollbar {
					display: none;
				}
			}
			.scroll-view  {
				// width: 100%;
				// overflow: hidden;
				 white-space: nowrap;
				// display: flex;
				.items{
					border-radius: 16rpx;
					display: inline-block;
					width: 208rpx;
					height: 208rpx;
					margin-right: 16rpx;
					position: relative;
					image{
						width: 100%;
						height: 100%;
						border-radius: 6rpx;
					}
					.mo{
						position: absolute;
						height: 32rpx;
						line-height: 32rpx;
						font-size: 24rpx;
						padding: 0 14rpx;
						border-radius: 16rpx;
						background-color: rgba($color: #000000, $alpha: 0.4);
						right: 0;
						bottom: 16rpx;
						color: #fff;
					}
				}
			}
		}
		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.tl{
				display: flex;
				flex: 1;
				margin-right: 20rpx;
			}

			.t1 {
				image {
					width: 76rpx;
					height: 76rpx;
					border-radius: 50%;
					margin-right: 14rpx;
				}
			}

			.t2 {
				.t2t {
					font-size: 28rpx;
					font-weight: bold;
					margin-bottom: 4rpx;
				}

				.t2b {
					font-size: 24rpx;
					color: #999;
				}
			}

			.t3 {
				width: 96rpx;
				height: 48rpx;
				line-height: 48rpx;
				text-align: center;
				border-radius: 24rpx;
				box-sizing: border-box;
				padding: 0rpx 10rpx;
				background: linear-gradient(to right,#00AE68, #096742);
				color: #FFFFFF;
				flex-shrink: 0;
			}
		}
	}
</style>
