bigDataApp/pages/index/index.vue

<template>
	<view class="content">
		<u-swiper :list="list" mode="dot" class="index_uswiper" height='300'></u-swiper>
		<view class="function">
			<view class="function_item" v-for="(item,index) in functionimg" :key="index" @click="tabfunction(index)">
				<image :src="item.src" mode=""></image>
				<p>{{item.text}}</p>
			</view>
		</view>
		<view class="equipment">
			<p class="equipment_p">系统设备</p>
			<view class="equipment_item">
				<view class="equipment_item_img" v-for="(item,index) in equipmentimg" :key="index" @click="tabequipment(index)">
					<image :src="item.src" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>
<style lang="scss">
	.index_uswiper {
		width: 95%;
		margin: 0 auto;
		border-radius: 20rpx !important;
	}

	.function {
		width: 95%;
		margin: 20rpx auto;
		display: flex;
		justify-content: space-around;

		.function_item {
			width: 18%;
			text-align: center;

			image {
				width: 90rpx;
				height: 90rpx;
			}

			p {
				font-size: 24rpx;
			}
		}
	}

	.equipment {
		width: 95%;
		margin: 20rpx auto;

		.equipment_p {
			width: 90%;
			border-left: 8rpx solid #4BB85F;
			font-weight: 700;
			padding-left: 20rpx;
		}
		.equipment_item{
			display: flex;
			flex-wrap:wrap ;
			justify-content: space-between;
			.equipment_item_img{
				width: 49%;
				margin-top: 20rpx;
				image{
					width: 100%;
					height: 170rpx;
				}
			}
		}
	}
</style>
<script>
	export default {
		data() {
			return {
				currentPage:'tabBar1',
				list: [{
					image: '../../static/image/index/11.png'
				}, ],
				functionimg: [{
						src: "../../static/image/index/1.png",
						text: "四情基地"
					},
					{
						src: "../../static/image/index/2.png",
						text: "病虫识别"
					},
					{
						src: "../../static/image/index/3.png",
						text: "专家诊断"
					},
					{
						src: "../../static/image/index/4.png",
						text: "售后服务"
					}
				],
				equipmentimg: [{
						src: "../../static/image/index/5.png"
					},
					{
						src: "../../static/image/index/6.png"
					},
					{
						src: "../../static/image/index/7.png"
					},
					{
						src: "../../static/image/index/8.png"
					},
					{
						src: "../../static/image/index/9.png"
					},
					{
						src: "../../static/image/index/10.png"
					}
				]
			}
		},
		onLoad() {

		},
		methods: {
			tabfunction(index){
				if(index==0){
					uni.navigateTo({
						url:"../fourBase/index"
					})
				}else if(index==1){
					console.log(1)
				}else if(index==2){
					uni.navigateTo({
						url:"../expertDiagnosis/index"
					})
				}else if(index==3){
					uni.navigateTo({
						url:"../afterSale/index"
					})
				}
			},
			tabequipment(index){
				if(index==0){
					uni.navigateTo({
						url:"../cb/index/index"
					})
				}else if(index==1){
					uni.navigateTo({
						url:"../prevention/index"
					})
				}else if(index==2){
					console.log(2)
				}else if(index==3){
					console.log(3)
				}else if(index==4){
					uni.navigateTo({
						url:"../equipMange/index/index"
					})
				}else if(index==5){
					console.log(5)
				}
			}
		}
	}
</script>