<template>
	<u-popup :show="show" mode="bottom" @close="onClose" :round="20">
		<u-icon class="icon" name="close" @click="onClose"></u-icon>
		<view class="box" style="overflow-y: auto;">
			<view class="flex my" v-for="(item,index) in list" :key="index+''">
				<image :src="item.url" style="width: 200rpx;" mode="widthFix"></image>
				<view class="ml-2">
					<view>{{item.text}}</view>
					<view class="flex x-between">
						<text class="price">￥{{item.price}}</text>
						<text class="oldprice">{{item.oldPrice}}</text>
						<text class="btn">立即查看</text>
					</view>
				</view>
			</view>
		</view>
	</u-popup>
</template>
<script>
	export default {
		name: "shoplist",
		props: ["show"],
		data() {
			return {
				list:[
					{
						url:"/static/images/banner.png",
						text:"卡罗莱全自动机械表时尚男士手表官方新款防水腕表潮",
						price:"2488.00",
						oldPrice:"2988.00"
					},
					{
						url:"/static/images/banner.png",
						text:"卡罗莱全自动机械表时尚男士手表官方新款防水腕表潮",
						price:"2488.00",
						oldPrice:"2988.00"
					},
					{
						url:"/static/images/banner.png",
						text:"卡罗莱全自动机械表时尚男士手表官方新款防水腕表潮",
						price:"2488.00",
						oldPrice:"2988.00"
					},
					{
						url:"/static/images/banner.png",
						text:"卡罗莱全自动机械表时尚男士手表官方新款防水腕表潮",
						price:"2488.00",
						oldPrice:"2988.00"
					},
					{
						url:"/static/images/banner.png",
						text:"卡罗莱全自动机械表时尚男士手表官方新款防水腕表潮",
						price:"2488.00",
						oldPrice:"2988.00"
					},
					{
						url:"/static/images/banner.png",
						text:"卡罗莱全自动机械表时尚男士手表官方新款防水腕表潮",
						price:"2488.00",
						oldPrice:"2988.00"
					}
				]
			}
		},
		methods: {
			onClose() {
				this.$emit("onClose");
			},
		}
	}
</script>

<style lang="scss" scoped>
	.flex {
		display: flex;
	}
	.ml-2{
		margin-left: 20rpx;
	}
	.my{
		margin: 40rpx 0;
	}
	.x-between{
		justify-content: space-between;
		align-items: center;
	}
	
	.icon{
		position: absolute;
		top:20rpx;
		right: 20rpx;
	}
	
	.box {
		height: 700rpx;
		padding: 40rpx 40rpx 0 40rpx;
		
		.price{
			color: #FE3368;
		}
		.oldprice{
			color: #999999;
			text-decoration: line-through;
			font-size: 14rpx;
			transform: translate(-30rpx,0);
		}
		.btn{
			color: white;
			background-color: #FE3368;
			line-height: 70rpx;
			padding: 0 20rpx;
			border-radius: 20rpx;
			font-size: 20rpx;
		}
	}
</style>
