shop-app/pages/index/components/Banner.vue

<!--
 * @Author: ch
 * @Date: 2022-03-23 10:31:12
 * @LastEditors: ch
 * @LastEditTime: 2022-04-30 19:30:49
 * @Description: file content
-->
<template>
	<view class="banner">
			<u-swiper bgColor="none" @click="goDetail" radius="18rpx" keyName="url" :list="data" height="240rpx" circular 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 : []
		}
	},
	methods:{
		goDetail(idx){
			this.$Router.push(`/goodsDetail?id=${this.data[idx].id}`)
		}
	}
}
</script>
<style lang="scss" scoped>

.banner{
	height: 368rpx;
	position: relative;
	padding: 40rpx 30rpx 0;
	overflow: hidden;
	&::before{
		display: block;
		content: '';
		position: absolute;
		left: -5vw;
		top:-2rpx;
		height: 231rpx;
		width: 110vw;
		background: $color-blue5;
		border-bottom-left-radius: 100%;
		border-bottom-right-radius: 100%;
	}
	.swiper{
		background-color: none !important;
	}
}
.desc{
	display: flex;
	justify-content: space-between;
	margin-top: 14rpx;
	padding-right: 10rpx;
	&--item{
		display: flex;
		align-items: center;
	}
	&--icon{
		width: 42rpx;
		height: 44rpx;
		position: relative;
	}
	&--txt{
		font-size: 22rpx;
		color: $color-grey5;
		margin-top: 4rpx;
	}
}
</style>