yd_qycpfb/jp-mobile/pages/index/factoryindex2.vue

<template>
  <view class="page">
    <!-- 1. 顶部标题 -->
    <view class="header">
      <text class="title">{{title}}</text>
    </view>

    <!-- 2. 轮播图 -->
    <swiper
      class="swiper"
      circular
      :indicator-dots="true"
      :autoplay="true"
      :interval="3000"
      :duration="800"
    >
      <swiper-item v-for="(item, index) in picture" :key="index">
        <image :src="item" class="swiper-item" mode="aspectFill" />
      </swiper-item>
    </swiper>

    <!-- 3. 九宫格 -->
    <view class="grid-box">
      <view
        v-for="(item, index) in parkList2"
        :key="index"
        class="grid-item"
        @tap="goList(item.label)"
      >
        <image class="grid-icon" :src="item.icon" mode="aspectFit" />
        <text class="grid-label">{{ item.label }}</text>
      </view>
    </view>
	
	
  </view>
</template>

<script>
	import loginService from "@/api/auth/loginService";
export default {
  data() {
    return {
      title: '盐都区厂房资源分布图',
      picture: [
        'https://ydwqfw.com.cn/yd_qycpfbH5/bg1.jpg',
        'https://ydwqfw.com.cn/yd_qycpfbH5/bg2.jpg',
        'https://ydwqfw.com.cn/yd_qycpfbH5/bg3.jpg',
        'https://ydwqfw.com.cn/yd_qycpfbH5/bg4.jpg'
      ],
      // 九宫格数据
      parkList2: []
    }
  },
  
  onShow() {
  	loginService.getParkList().then(({
  		data
  	}) => {
  		let alls=0;
  		for(var i = 0; i < data.length; i++){
  			alls=alls+data[i].building_cnt;
  		}
  		
  		this.allcount=alls;		
  		this.parkList2=data;
  		this.parkList2.unshift({total_area: 0, total_idle_area: 0, building_cnt: alls, label: "全部"})
  		
  	}).catch(e => {
  		
  	})
  	
  },
  methods: {
    // 与之前保持一致
    goList(parkid) {
      uni.navigateTo({
        url: `/pages/factoryBuildings/factoryBuildingsList?parkid=${parkid}`
      })
    }
  }
}
</script>

<style scoped>
/* 原有样式不变，仅新增宫格 */
.page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f5f5f5;
}
.header {
  padding: 20rpx 0;
  text-align: center;
  background: #fff;
}
.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}
.swiper {
  width: 100%;
  height: 300rpx;
}
.swiper-item {
  width: 100%;
  height: 100%;
}

/* 九宫格 */
.grid-box {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx;
  box-sizing: border-box;
  background: #f5f5f5;
}
.grid-item {
  width: 33.33%;
  height: 180rpx;
  display: flex;
  flex-direction: column;   /* 图标在上，文字在下 */
  align-items: center;
  justify-content: center;
  border: 1rpx solid #e0e0e0;
  border-radius: 15rpx;	
  margin: 0 -1rpx -1rpx 0;  /* 消除双边框 */
  box-sizing: border-box;
  background: #fff;
}
.grid-icon {
  width: 96rpx;   /* 48px */
  height: 96rpx;
  margin-bottom: 10rpx;
}
.grid-label {
  font-size: 28rpx;
  color: #333;
}
</style>