LocalLivingServicesUniapp/components/index_nav.vue

<template>
	<!-- <swiper class="screen-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
		:autoplay="false" interval="5000" duration="500">
		<swiper-item class="item">
			
		</swiper-item>
	</swiper> -->
	<view class="item">
		<view class="card" v-for="(item,index) in swiperList" :key="index" @click="jump(item)">
			<image :src="item.url" mode="aspectFill"></image>
			{{item.name}}
		</view>
	</view>
</template>

<script>
	export default {
		name: 'indexNav',
		data() {
			return {
				dotStyle: true,
				swiperList: [{
						name: '店铺设置',
						url: '/static/index/shop.png'
					},
					{
						name: '平台活动',
						url: '/static/index/activity.png'
					},
					{
						name: '优惠券',
						url: '/static/index/coupon.png'
					},
					{
						name: '退款管理',
						url: '/static/index/refund.png'
					},
					{
						name: '审核查询',
						url: '/static/index/audit.png'
					},
					{
						name: '商品管理',
						url: '/static/index/product.png'
					},
					{
						name: '提现管理',
					url: '/static/index/withdraw.png'
					},
					{
						name: '秒杀活动',
					url: '/static/index/seckill.png'
					},
					{
						name: '客户评价',
					url: '/static/index/evaluate.png'
					},
					{
						name: '全部服务',
					url: '/static/index/all.png'
					},
				]
			}
		},
		methods: {
			jump(item) {
				if (item.name == '客户评价') {
					uni.navigateTo({
						url: '/pages/evaluate/evaluate'
					})
				} else if (item.name == '商品管理') {
					uni.navigateTo({
						url: '/pages/product/index'
					})
				} else if (item.name == '全部服务') {
					uni.navigateTo({
						url: '/pages/index/full'
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.item {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		
	}

	.card {
		width: 20%;
		height: 96rpx;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		image {
			width: 56rpx;
			height: 56rpx;
			margin-bottom: 4rpx;
		}
	}
	.card:nth-child(-n+5){
		margin-bottom: 40rpx;
	}

	/deep/.uni-swiper-wrapper {
		-webkit-transform: translate3d(0px, 0, 0);
		-moz-transform: translate3d(0px, 0, 0);
		-o-transform: translate(0px, 0px);
		-ms-transform: translate3d(0px, 0, 0);
		transform: translate3d(0px, 0, 0);
	}
</style>