xpl/pages/index/index.vue

<template>
	<view class="center">
		<view class="top">
			<view class="status_bar"><!-- 这里是状态栏 --></view>
			<view class="top-bg"><image src="../../static/img/index-bg.png" mode=""></image></view>
		</view>
		<view class="carousel">
			<swiper autoplay="true" duration="400" interval="5000" @change="swiperChange" class="bor">
				<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item"><image :src="item.pic" /></swiper-item>
			</swiper>
		</view>
		<view class="swiper-dot">
			<template v-for="item in swiperLength">
				<view class="swiper-dots-item" :key="item" :class="{ action: swiperCurrent + 1 === item }"></view>
			</template> 
		</view>
		<view class="main">
			<view class="main-item" v-for="(item,index) in main" :key="index">
				<view class="pic">
					<image :src="item.pic" mode=""></image>
				</view>
				<view class="main-name">
					{{item.name}}
				</view>
			</view>
		</view>
		<!-- 商品栏 -->
		<view class="commodity">
			<view class="commodity-item" v-for="(item,index) in commodityList">
				<view class="commodity-prc">
					<image src="" mode=""></image>
					<view class="fanli" v-if="item.type == 1">
						<image src="../../static/img/index-fanl.png" mode=""></image>
					</view>
				</view>
				<view class="commodity-info">
					<view class="commodity-name clamp">
						{{item.name}}
					</view>
					<view class="commodity-systom clamp">
						{{item.systom}}
					</view>
					<view class="commodity-price">
						￥{{item.price}}<text>￥{{item.price}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import { lala, lalaDetial, buylala } from '@/api/product.js';
import { getTime } from '@/utils/rocessor.js';
import { loadIndexs } from '@/api/user.js';
export default {
	data() {
		return {
			carouselList:[],
			main:[{
				name:'自动拼团',
				pic:'../../static/icon/index1.png',
				type:1
			},
			{
				name:'11人团专区',
				pic:'../../static/icon/index2.png'
			},
			{
				name:'拼团合伙人',
				pic:'../../static/icon/index3.png'
			},
			{
				name:'素材分享',
				pic:'../../static/icon/index4.png'
			},
			{
				name:'邀请有礼',
				pic:'../../static/icon/index5.png'
			},
			{
				name:'拼购福利',
				pic:'../../static/icon/index6.png'
			},
			{
				name:'互助专区',
				pic:'../../static/icon/index7.png'
			},
			{
				name:'签到领钱',
				pic:'../../static/icon/index8.png'
			},
			{
				name:'服务器兑换',
				pic:'../../static/icon/index9.png'
			},
			{
				name:'话费充值',
				pic:'../../static/icon/index10.png'
			},
			],
			swiperLength: 0,
			swiperCurrent: 0,
			commodityList:[{
				name:'古驰马衔扣单肩包',
				systom:'1955系列单肩包女包',
				price:'2690.32',
				type:1
			},
			{
				name:'古驰马衔扣单肩包',
				systom:'1955系列单肩包女包',
				price:'2690',
				type:0
			},
			{
				name:'古驰马衔扣单肩包',
				systom:'1955系列单肩包女包',
				price:'2690',
				type:0
			},
			{
				name:'古驰马衔扣单肩包',
				systom:'1955系列单肩包女包',
				price:'2690',
				type:1
			},
			],
		};
	},
	//页面加载即刻发生
	onShow() {
		this.loadDate();
	},
	methods: {
		async loadDate() {
			const obj = this
			loadIndexs({}).then(({ data }) => {
					console.log(data);
					obj.carouselList = data.banner;
					obj.swiperLength = data.banner.length;
				})
		},
		//轮播图切换修改背景色
		swiperChange(e) {
			const index = e.detail.current;
			this.swiperCurrent = index;
		},
	}
};
</script>
<style lang="scss">
.center {
	height: auto;
	min-height: 100%;
	background-color: #ffffff;
}
.status_bar {
	height: var(--status-bar-height);
	width: 100%;
}
.top {
	width: 100%;
	height: 338rpx;
	position: relative;
	.top-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 338rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
}
.carousel {
	width: 700rpx;
	height: 300rpx;
	border-radius: 14rpx;
	margin: -200rpx auto 0;
	.bor {
		border-radius: 14rpx;
		.carousel-item {
			image {
				width: 100%;
				height: 100%;
				border-radius: 14rpx;
			}
		}
	}
}
.swiper-dot {
	position: relative;
	z-index: 10;
	margin-top: -40rpx;
	display: flex;
	justify-content: center;

	.swiper-dots-item {
		width: 14rpx;
		height: 14rpx;
		background: #aaaaaa;
		border-radius: 50%;
		margin: 0 16rpx;
		// z-index: 999;
	}

	.action {
		background-color: #ffffff;
	}
}
.main {
	margin-top: 80rpx;
	display: flex;
	width: 100%;
	align-items: center;
	flex-wrap: wrap;
	.main-item {
		margin: 20rpx 0;
		width: 20%;
		display: flex;
		flex-direction: column;
		align-items: center;
		.pic {
			width: 64rpx;
			height: 64rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.main-name {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			margin-top: 10rpx;
		}
	} 
}
.commodity {
	padding: 36rpx 14rpx;
	margin-top: 20rpx;
	display: flex;
	flex-wrap: wrap;
	.commodity-item {
		width: 348rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
		margin:10rpx 6rpx 0;
		border-radius: 10rpx;
		.commodity-prc {
			width: 345rpx;
			height: 345rpx;
			border-radius: 10rpx;
		}
		.commodity-info {
			padding: 28rpx 20rpx 35rpx 24rpx;
			.commodity-name {
				width: 100%;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}
			.commodity-systom {
				margin-top: 16rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
			}
			.commodity-price {
				margin-top: 34rpx;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #E83F30;
				text {
					display: inline-block;
					padding-left: 6rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: bold;
					text-decoration: line-through;
					color: #999999;
				}
			}
		}
	}
}
</style>