<template>
	<view class="home">
		<view class="hometitle" :style="{paddingTop:navBarTop + 'px',height:navBarHeight + 'px',marginLeft:0,lineHeight:navBarHeight + 'px'}">首页</view>
		
		<view class="swiper-box" :style="{marginTop:navBarHeight +10+ 'px'}">
			<u-swiper :list="list" height="400" border-radius="20"></u-swiper>
		</view>
		<view class="welcome">
			<image src="../../static/images/Welcome.png" mode="heightFix"></image>
			<text>首次注册立享新人券</text>
		</view>
		<view class="notice">
			<image src="../../static/images/noice.png" mode="widthFix"></image>
			<u-notice-bar mode="vertical" 
			:list="noticeList" 
			style="flex:1"
			:volume-icon="false" 
			type="none" 
			color="#111111"
			font-size="28"
			:more-icon="true"></u-notice-bar>
		</view>
		<view class="flagGroup">
			<view class="flag">
				<image src="../../static/images/m1.png" mode="widthFix"></image>
				<view class="desc">100%正品</view>
			</view>
			<view class="devide"></view>
			<view class="flag">
				<image src="../../static/images/m2.png" mode="widthFix"></image>
				<view class="desc">精选上新</view>
			</view>
			<view class="devide"></view>
			<view class="flag">
				<image src="../../static/images/m3.png" mode="widthFix"></image>
				<view class="desc">多重惊喜</view>
			</view>
		</view>
		<view class="shopList">
			<view class="shopItem" v-for="(item,index) in shopList" :key="index">
				<view class="shopImg">
					<image :src="item.img" mode="heightFix"></image>
				</view>
				<view class="infoBox">
					<view class="shopTitle">
						<image src="../../static/images/xinp.png" mode="widthFix"></image>
						<text>{{item.title}}</text>
					</view>
					<view class="progress">
						<u-line-progress active-color="#F0D2A0" 
						:show-percent="false" height="20"
						style="width: 60%;"
						 inactive-color="#F6EEE6" :percent="70"></u-line-progress>
						<text>已售{{item.num}}套</text>
					</view>
					<view class="price">
						<view class="priceInfo">
							<text class="mainPrice">￥{{item.mainprice}}</text>
							<text class="subPrice">￥{{item.subprice}}</text>
						</view>
						<view class="btn">去抢购</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				noticeList: [
					'新活动上新拉！赶紧抢先一步点击查看~'
				],
				list: ['/static/images/home.png'],
				shopList:[
					{
						img:'../../static/images/shopdesc.png',
						title:'SK-II 熬夜肌肤“重启”秘籍 熬夜肌SK-II 熬夜肌肤“重启”秘籍 熬夜肌',
						num:288,
						mainprice:389.00,
						subprice:999.00
					},
					{
						img:'../../static/images/shopdesc.png',
						title:'SK-II 熬夜肌肤“重启”秘籍 熬夜肌SK-II 熬夜肌肤“重启”秘籍 熬夜肌',
						num:288,
						mainprice:389.00,
						subprice:999.00
					}
				],
				navBarTop:0,
				navBarHeight:0
			};
		},
		onLoad() {
			 let statuBar = uni.getSystemInfoSync().statusBarHeight;
			 let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			 
			 this.navBarTop = menuButtonInfo.top;
			 this.navBarHeight = menuButtonInfo.height;
		},
	}
</script>

<style lang="scss">
.home{
	min-height: calc(100vh);
	background-color: #21222B;
	padding:0 25upx;
	.hometitle{
		font-size: 34upx;
		color: #FFFFFF;
		// padding-top: 30px;
		// margin-bottom: 49upx;
	}
	.welcome{
		background: #FFFFFF;
		box-shadow: 0px 6upx 16upx 0px rgba(25,25,25,0.05);
		border-radius: 20upx;
		padding:39upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin:24upx 0;
		image{
			height:27upx;
		}
		text{
			
			font-size: 34upx;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			color: #333333;
		}
	}
	.notice{
		background: #F0D2A0;
		border-radius: 20upx;
		padding:29upx;
		display: flex;
		align-items: center;
		image{
			width:38upx;
			height:auto;
		}
	}
	.flagGroup{
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin:40upx 0;
		.flag{
			text-align: center;
			image{
				width:54upx;
			}
			.desc{
				font-size: 28upx;
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				color: #F0D2A0;
				margin-top:22upx;
			}
		}
		.devide{
			width: 1px;
			height: 90upx;
			border: 1px solid #494A53;
		}
	}
	.shopList{
		padding-bottom: 16rpx;
		.shopItem{
			// height: 650px;
			margin-bottom: 24upx;
			background: #FFFFFF;
			box-shadow: 0upx 6upx 16upx 0upx rgba(25,25,25,0.05);
			border-radius: 20upx;
			overflow: hidden;
			.shopImg{
				height: 400upx;
				background: #D3D3D3;
				box-shadow: 0upx 6upx 16upx 0upx rgba(25,25,25,0.05);
				border-radius: 20upx 20upx 0upx 0upx;
				image{
					height:100%;
				}
			}
			.infoBox{
				margin-top: 20upx;
				.shopTitle{
					display: flex;
					align-items: center;
					
					image{
						width:180upx;
						height:auto
					}
					text{
						font-size: 34upx;
						color: #333333;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						margin-left: 22upx;
					}
				}
				.progress{
					display: flex;
					align-items: center;
					padding:0 30upx;
					margin: 30upx 0;
					text{
						margin-left: 22upx;
						font-size: 24upx;
						color: #333333;
					}
				}
				.price{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding:0 30upx;
					margin-bottom: 30upx;
					.mainPrice{
						font-size: 34upx;
						color: #111111;
						font-weight: bold;
					}
					.subPrice{
						font-size: 24upx;
						text-decoration: line-through;
						color: #C4BFBC;
						margin-left:20upx;
					}
					.btn{
						padding:20upx 46upx;
						background: #111111;
						border: 1px solid #EAEAEA;
						border-radius: 33px;
						font-size: 30upx;
						color: #FFFFFF;
					}
				}
			}
		}
		
	}
}
</style>
