yd_qycpfb/jp-mobile/pages/index/factoryindex.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-card"
        @tap="goListByValue(item.value)"
      >
        <text class="grid-label">{{item.label}}</text>
      </view>
    </view>

    <!-- 地图已注释，如需恢复直接放开即可 -->
    <!--
    <view class="map-box">
      <view @touchend="onTouchEnd" class="map-wrap">
        <canvas canvas-id="ydChart" id="ydChart" class="map-canvas" />
      </view>
    </view>
    -->
  </view>
</template>

<script>
// import * as echarts from 'echarts'   // 如不用地图可注释

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: '' },
        { label: '台创园', value: '台创园' },
        { label: '大冈', value: '大冈镇' },
        { label: '大纵湖', value: '大纵湖镇' },
        { label: '学富', value: '学富镇' },
        { label: '尚庄', value: '尚庄镇' },
        { label: '张庄', value: '张庄街道' },
        { label: '楼王', value: '楼王镇' },
        { label: '潘黄', value: '潘黄街道' },
        { label: '盐渎', value: '盐渎街道' },
        { label: '秦南', value: '秦南镇' },
        { label: '郭猛', value: '郭猛镇' },
        { label: '高新区', value: '盐龙街道' },
        { label: '龙冈', value: '龙冈镇' }
      ]
    }
  },

  /* 地图相关生命周期，如不用可全部注释
  async onReady() {
    const json = await this.loadGeoJSON()
    echarts.registerMap('yanduqu', json)
    ...
  },
  methods: {
    loadGeoJSON() { ... },
    onTouchEnd(e)  { ... },
    renderMap()    { ... }
  }
  */

  methods: {
    // 九宫格跳转
    goListByValue(val) {
      uni.navigateTo({
        url: `/pages/factoryBuildings/factoryBuildingsList?parkid=${val}`
      })
    }
  }
}
</script>

<style scoped>
.page {
  display: flex;
  flex-direction: column;
  min-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 {
  width: 100%;
  padding: 30rpx;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24rpx;
  background: #fff;
}

.grid-card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 160rpx;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border-radius: 16rpx;
  box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.08);
  transition: transform 0.15s;
}
.grid-card:active {
  transform: scale(0.96);
}

.grid-label {
  font-size: 30rpx;
  font-weight: 600;
  color: #fff;
}
</style>