kunpeng/pages/product/index.vue

<template>
	<view class="container">
		<view class="swiper">
			<view class="swiper-box">
				<swiper circular="true" autoplay="true" @change="swiperChange">
					<swiper-item v-for="swiper in banner" :key="swiper.id" @click="ToBanner(swiper)"><image :src="swiper.pic"></image></swiper-item>
				</swiper>
				<view class="indicator"><view class="dots" v-for="(swiper, index) in banner" :class="[swiperCurrent >= index ? 'on' : '']" :key="index"></view></view>
			</view>
		</view>
		<view class="product-section">
			<view class="product-item" @click="navTo(1)">
				<view class="image-wrapper"><image src="../../static/img/img01.png" mode="scaleToFill"></image></view>
				<view class="title-box">
					<text class="title ellipsis">质押商品名称</text>
					<view class="price flex_item">￥8888</view>
				</view>
			</view>
			<view class="product-item" >
				<view class="image-wrapper"><image src="../../static/img/img01.png" mode="scaleToFill"></image></view>
				<view class="title-box">
					<text class="title ellipsis">质押商品名称</text>
					<view class="price flex_item">￥8888</view>
				</view>
			</view>
			<view class="product-item" >
				<view class="image-wrapper"><image src="../../static/img/img01.png" mode="scaleToFill"></image></view>
				<view class="title-box">
					<text class="title ellipsis">质押商品名称</text>
					<view class="price flex_item">￥8888</view>
				</view>
			</view>
			<view class="product-item" >
				<view class="image-wrapper"><image src="../../static/img/img01.png" mode="scaleToFill"></image></view>
				<view class="title-box">
					<text class="title ellipsis">质押商品名称</text>
					<view class="price flex_item">￥8888</view>
				</view>
			</view>
			<view class="product-item" >
				<view class="image-wrapper"><image src="../../static/img/img01.png" mode="scaleToFill"></image></view>
				<view class="title-box">
					<text class="title ellipsis">质押商品名称</text>
					<view class="price flex_item">￥8888</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
// import { userinfo } from '@/api/user.js';
export default {
	data() {
		return {
			swiperCurrent: 0,
			banner: [{
				pic:'/static/img/img01.png'
			}],
		};
	},
	onLoad(option){},
	onShow() {
		
	},
	//下拉刷新
	onPullDownRefresh() {
		this.loadData();
	},
	methods: {
		navTo(id){
			uni.navigateTo({
				url:'/pages/product/details?id='+id
			})
		},
	}
};
</script>

<style lang="scss">
page {
	min-height: 100%;
	background-color: #ffffff;
	.container {
		width: 100%;
		
	}
}
//轮播图
.swiper {
	width: 100%;
	display: flex;
	justify-content: center;
	.swiper-box {
		width: 100%;
		height: 260rpx;
		padding: 0 30rpx;
		overflow: hidden;
		// box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
		//兼容ios，微信小程序
		position: relative;
		z-index: 1;
		swiper {
			width: 100%;
			height: 100%;
			swiper-item {
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		.indicator {
			position: absolute;
			bottom: 20upx;
			left: 20upx;
			background-color: rgba(255, 255, 255, 0.4);
			width: 150upx;
			height: 5upx;
			border-radius: 3upx;
			overflow: hidden;
			display: flex;
			.dots {
				width: 0upx;
				background-color: rgba(255, 255, 255, 1);
				transition: all 0.3s ease-out;
				&.on {
					width: (100%/3);
				}
			}
		}
	}
}
/* 猜你喜欢 */
.product-section {
	background-color: #ffffff;
	display: flex;
	flex-wrap: wrap;
	padding: 0 28rpx;
	margin-bottom: 20rpx;
	margin-top: 30rpx;
	.product-item {
		overflow: hidden;
		display: flex;
		flex-direction: column;
		width:48%;
		margin-bottom: 4%;
		&:nth-child(2n + 1) {
			margin-right: 4%;
		}
	}
	.image-wrapper {
		width: 100%;
		height: 267rpx;
		border-radius: 3px;
		overflow: hidden;
		image {
			width: 100%;
			height: 100%;
			opacity: 1;
		}
	}
	.title-box {
		padding: 25rpx 25rpx;
	}
	.title {
		color: #343434 !important;
		font-weight: bold;
		height: 80rpx;
	}
	.price {
		font-size:40rpx;
		font-weight: bold;
		color: #FB3A2F;
		border-top: 2rpx solid #f0f0f0;
	}
}
</style>