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

<template>
  <view class="page">
	<!-- 1. 顶部标题 -->
	<view class="header">
	  <text class="title">{{title}}</text>
	  <!-- 新增地图按钮 -->
	  <!-- <image
	    class="map-btn"
	    src="/static/img/map.png"
	    mode="aspectFit"
	    @tap="goMap"
	  /> -->
	</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>
	
	<view style="display: flex;width: 100%;flex-direction:row-reverse;background: white;">
		
	<text class="title2" @tap="goMap">地图</text>
	<text class="title2" @tap="goMap2">板块</text>

	</view>

	
	<!-- 3. 九宫格导航 -->
	<!-- <view class="grid-box">
	  <view
	    v-for="(item,index) in parkList2"
	    :key="index"
	    class="grid-card"
	    @tap="goListByValue(item.label)"
	  >

	    <text class="grid-label">{{item.building_cnt}}</text>

	    <text class="grid-num">{{item.label}}</text>
	  </view>
	</view> -->
	
	
	<!-- 3. 九宫格导航 -->
	<view class="grid-box">
	  <view
	    v-for="(item,index) in parkList2"
	    :key="index"
	    class="grid-card"
	    @tap="goListByValue(item.content)"
	  >
	    <!-- 右上角数字 -->
	    <text class="grid-num">{{item.building_cnt}}</text>
	
	    <!-- 中间图片 -->
		<image
		  class="grid-icon"
		  :src="`/static/img/bt${ (index) + 1 }.png`"
		  mode="aspectFit"
		/>
	
	    <!-- 底部文字 -->
	    <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'   // 如不用地图可注释
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: []
    }
  },

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

  onShow() {
  	loginService.getIndustryList().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: {
    // 九宫格跳转
    goListByValue(val) {
      uni.navigateTo({
        url: `/pages/factoryBuildings/factoryBuildingsList?des1=${val}`
      })
    },
	goMap() {
		uni.navigateTo({
		  url: `/pages/index/factoryindex4`   // 换成你的地图页面路径
		})
	  },
    goMap2() {
		uni.navigateTo({
		  url: `/pages/index/factoryindex`   // 换成你的地图页面路径
		})
	},
  }
}
</script>

<style scoped>
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #f5f5f5;
}

/* 顶部标题 */
.header {
  position: relative;   /* 让子元素绝对定位参照它 */
  padding: 20rpx 0;
  text-align: center;
  background: #fff;
}
.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}
/* 右上角地图按钮 */
.map-btn {
  position: absolute;
  right: 30rpx;
  top: 50%;
  transform: translateY(-50%);
  width: 48rpx;
  height: 48rpx;
}

/* 轮播图 */
.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 {
  position: relative;          /* 让右上角数字绝对定位 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 160rpx;
  border-radius: 16rpx;
  transition: transform 0.15s;
}
.grid-card:active {
  transform: scale(0.96);
}

/* 右上角数字 */
.grid-num {
  position: absolute;
  right: 42rpx;
  top: 12rpx;
  font-size: 24rpx;
  font-weight: 600;
  color: #1296db;
}

/* 中间图片 */
.grid-icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 8rpx;
}

/* 底部文字 */
.grid-label {
  font-size: 26rpx;
  color: #333;
}



/* 九宫格区域 */
/* .grid-box {
  width: 100%;
  padding: 30rpx;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24rpx;
  background: #fff;
}

.grid-num {
  margin-top: 8rpx;
  font-size: 24rpx;
  height: 70rpx;
  display: flex;
  align-items: center;
  color: rgba(0, 0, 0, 0.8);
}

.grid-card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 160rpx;
  border-radius: 16rpx;
  transition: transform 0.15s;
  flex-direction: column;
}
.grid-card:active {
  transform: scale(0.96);
}

.grid-label {
  font-size: 30rpx;
  font-weight: 600;
  padding-left: 8rpx;
  padding-right: 8rpx;
  text-align: center;
  color: #00aaff;
} */
.title2{
	background: #1296db;
	border-radius: 15rpx;
	color: white;
	margin-top: 8rpx;
	margin-right: 30rpx;
	padding-top: 8rpx;
	padding-bottom: 8rpx;
	padding-right: 40rpx;
	padding-left: 40rpx;
}
</style>