<!--
 * @Author: ch
 * @Date: 2022-03-23 10:31:12
 * @LastEditors: ch
 * @LastEditTime: 2022-04-12 10:09:44
 * @Description: file content
-->
<template>
	<view class="banner">
			<u-swiper keyName="img" :list="data" height="240rpx" indicator indicatorMode="dot">
				
			</u-swiper>
			<view class="desc">
				<view class="desc--item">
					<image class="desc--icon" src='@/static/index/bz.png'></image>
					<text class="desc--txt">马士兵严选</text>
				</view>
				<view class="desc--item">
					<image class="desc--icon" src='@/static/index/bz.png'></image>
					<text class="desc--txt">100%正品</text>
				</view>
				<view class="desc--item">
					<image class="desc--icon" src='@/static/index/bz.png'></image>
					<text class="desc--txt">365天质保</text>
				</view>
				<view class="desc--item">
					<image class="desc--icon" src='@/static/index/bz.png'></image>
					<text class="desc--txt">售后无忧</text>
				</view>
			</view>
		</view>
</template>
<script>
export default {
	data(){
		return {
			
		}
	},
	props:{
		data : {
			type : Array,
			default : []
		}
	}
}
</script>
<style lang="scss" scoped>

.banner{
	height: 388rpx;
	position: relative;
	padding: 40rpx 30rpx 0;
	// margin-bottom: 50rpx;
	overflow: hidden;
	&::before{
		display: block;
		content: '';
		position: absolute;
		left: -5vw;
		top:0;
		height: 231rpx;
		width: 110vw;
		background: $color-blue5;
		border-bottom-left-radius: 100%;
		border-bottom-right-radius: 100%;
	}
}
.desc{
	display: flex;
	justify-content: space-between;
	margin-top: 24rpx;
	&--item{
		display: flex;
	}
	&--icon{
		width: 22rpx;
		height: 24rpx;
		position: relative;
		margin-right: 11rpx;
		overflow: initial;
			// box-shadow: 0 0 5rpx #f00; 
		&::before{
			display: block;
			content: '';
			position: absolute;
			width: 10rpx;
			height: 10rpx;
			border-radius: 50%;
			top: 10rpx;
			left: 7rpx;
			box-shadow: 0 0 20rpx #FA7204; 
			background: #FA7204;
			z-index: -1;
		}
	}
	&--txt{
		font-size: 22rpx;
		color: $color-grey5;
	}
}
</style>