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.value)"
      >
        <image class="grid-icon" :src="item.icon" mode="aspectFit" />
        <text class="grid-label">{{ item.label }}</text>
      </view>
    </view>
	
	
  </view>
</template>

<script>
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: [
        { label: '全部',   value: '', icon: '/static/icon/all.png' },
        { label: '台创园', value: '台创园', icon: '/static/icon/taichuang.png' },
        { label: '大冈',   value: '大冈镇', icon: '/static/icon/dagang.png' },
        { label: '大纵湖', value: '大纵湖镇', icon: '/static/icon/dazonghu.png' },
        { label: '学富',   value: '学富镇', icon: '/static/icon/xuefu.png' },
        { label: '尚庄',   value: '尚庄镇', icon: '/static/icon/shangzhuang.png' },
        { label: '张庄',   value: '张庄街道', icon: '/static/icon/zhangzhuang.png' },
        { label: '楼王',   value: '楼王镇', icon: '/static/icon/louwang.png' },
        { label: '潘黄',   value: '潘黄街道', icon: '/static/icon/panhuang.png' },
        { label: '盐渎',   value: '盐渎街道', icon: '/static/icon/yandu.png' },
        { label: '秦南',   value: '秦南镇', icon: '/static/icon/qinnan.png' },
        { label: '郭猛',   value: '郭猛镇', icon: '/static/icon/guomeng.png' },
        { label: '高新区', value: '盐龙街道', icon: '/static/icon/gxq.png' },
        { label: '龙冈',   value: '龙冈镇', icon: '/static/icon/longgang.png' }
      ]
    }
  },
  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>