taoke/pages/home/home.vue

<template>
	<view style="background-color: #f7f7f5;overflow: hidden;">
		<view class="top-bg"></view>
		<view class="section carousel-wrapper">
			<swiper class="carousel" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular>
				<swiper-item>
					<view class="swiper-item">
						<image class="image" src="../../static/images/material/carousel01.png" mode=""></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image class="image" src="../../static/images/material/carousel02.png" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="section">
			<view class="col-title">
				<image class="icon" style="width: 38rpx;height: 43rpx;" src="../../static/images/hot.png" mode="scaleToFill"></image>
				<text>今日拿货榜单</text>
			</view>
			<view class="hot-rank">
				<scroll-view scroll-x="true" :show-scrollbar="false" :enable-flex="true" style="white-space: nowrap;">
					<product-item type="swiper" image="https://img.alicdn.com/imgextra/i3/2930255252/O1CN0159ouF21ofSiQ3kPq2_!!2930255252.jpg"></product-item>
					<product-item type="swiper" image="https://img.alicdn.com/imgextra/i3/2930255252/O1CN0159ouF21ofSiQ3kPq2_!!2930255252.jpg"></product-item>
					<product-item type="swiper" image="https://img.alicdn.com/imgextra/i3/2930255252/O1CN0159ouF21ofSiQ3kPq2_!!2930255252.jpg"></product-item>
					<product-item type="swiper" image="https://img.alicdn.com/imgextra/i3/2930255252/O1CN0159ouF21ofSiQ3kPq2_!!2930255252.jpg"></product-item>
				</scroll-view>
			</view>
		</view>
		<view class="section">
			<view class="col-title">
				<image class="icon" style="width: 47rpx;height: 47rpx;" src="../../static/images/sale.png" mode="scaleToFill"></image>
				<text>最新上线</text>
			</view>
			<view class="new-rank">
				<scroll-view scroll-x="true" :show-scrollbar="false" :enable-flex="true" style="white-space: nowrap;">
					<product-item type="swiper" image="https://img.alicdn.com/imgextra/i3/2930255252/O1CN0159ouF21ofSiQ3kPq2_!!2930255252.jpg"></product-item>
					<product-item type="swiper" image="https://img.alicdn.com/imgextra/i3/2930255252/O1CN0159ouF21ofSiQ3kPq2_!!2930255252.jpg"></product-item>
					<product-item type="swiper" image="https://img.alicdn.com/imgextra/i3/2930255252/O1CN0159ouF21ofSiQ3kPq2_!!2930255252.jpg"></product-item>
					<product-item type="swiper" image="https://img.alicdn.com/imgextra/i3/2930255252/O1CN0159ouF21ofSiQ3kPq2_!!2930255252.jpg"></product-item>
				</scroll-view>
			</view>

		</view>
		<view class="section" style="margin-top: 40upx;">
			<view class="col-img-title">
				<image src="../../static/images/like.png" mode="scaleToFill" style="height: 28rpx;width: 363rpx;"></image>
			</view>
			<view class="like">
				<product-item type="list" image="https://img.alicdn.com/imgextra/i3/2930255252/O1CN0159ouF21ofSiQ3kPq2_!!2930255252.jpg"></product-item>
				<product-item type="list" image="https://img.alicdn.com/imgextra/i3/2930255252/O1CN0159ouF21ofSiQ3kPq2_!!2930255252.jpg"></product-item>
				<product-item type="list" image="https://img.alicdn.com/imgextra/i3/2930255252/O1CN0159ouF21ofSiQ3kPq2_!!2930255252.jpg"></product-item>
				<product-item type="list" image="https://img.alicdn.com/imgextra/i3/2930255252/O1CN0159ouF21ofSiQ3kPq2_!!2930255252.jpg"></product-item>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
			}
		},
		components: {},
		onLoad() {

		},
		onNavigationBarButtonTap(e) {
			// console.log(e)
			switch (e.index) {
				case 0:
					uni.navigateTo({
						url: '/pages/message/message'
					});
					break;
				default:
					break;
			}
		},
		methods: {}
	}
</script>

<style lang="scss">
	.search {
		background-color: #FFFFFF;
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 30rpx;
		text-align: center;
		color: #999999;
	}

	.top-bg {
		position: absolute;
		top: 0;
		width: 100%;
		height: 300rpx;
		background-color: $primary-color;
		overflow: hidden;
	}

	.top-bg::after {
		background: #F8F8F8;
		position: absolute;
		border-radius: 2000rpx;
		content: "";
		width: 4000rpx;
		height: 4000rpx;
		top: 260rpx;
		left: -1625rpx;
	}

	.carousel-wrapper {
		margin-top: 20rpx;

		.carousel {
			margin: auto;
			overflow: hidden;
			border-radius: 20rpx;
			transform: translateY(0);
			width: 702rpx;
			height: 340rpx;

			.image {
				width: 702rpx;
				height: 340rpx;
			}
		}
	}

	.section {
		// padding: 20rpx;
	}

	.col-title {
		height: 60rpx;
		line-height: 60rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		padding: 20upx 20upx 10upx 20upx;

		.icon {
			// vertical-align: middle;
			margin-right: 12rpx;
		}
	}

	.col-img-title {
		text-align: center;
		background: white;
		height: 80upx;
		line-height: 80upx;
	}

	.hot-rank .product-item,
	.new-rank .product-item {
		margin: 5rpx;

		&:first-child {
			margin-left: 20upx;
		}

		&:last-child {
			margin-right: 20upx;
		}
	}

	.like {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 10upx 20upx;
	}

	.like .product-item {
		margin-bottom: 10upx;
	}
</style>