yd_qycpfb/jp-mobile/pages/index/factoryindex3.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="panel">
      <view class="panel-title">选择园区</view>
      <scroll-view scroll-x class="card-scroll">
        <view
          v-for="(item,index) in parkList2"
          :key="index"
          class="card"
          @tap="goListByValue(item.label)"
        >
          <image
            class="card-bg"
            :src="item.bg||defaultBg"
            mode="aspectFill"
          />
          <view class="card-mask" />
          <view class="card-content">
            <text class="card-name">{{ item.label }}</text>
            <text class="card-count">闲置厂房 {{ item.building_cnt||0 }} 处</text>
          </view>
        </view>

        <!-- 末尾「全部」按钮 -->
        <view class="card all" @tap="goListByValue('')">
          <text class="all-txt">盐都区园区</text>
		  <text class="all-txt2">总闲置 {{allcount}} 处</text>
        </view>
      </scroll-view>
    </view>

    <!-- 地图已注释 -->
    <!--
    <view class="map-box">
      <canvas canvas-id="ydChart" id="ydChart" class="map-canvas" />
    </view>
    -->
  </view>
</template>

<script>
	import loginService from "@/api/auth/loginService";
export default {
  data() {
    return {
      title: '盐都区闲置厂房分布图',
      defaultBg: 'https://ydwqfw.com.cn/yd_qycpfbH5/bg2.jpg', // 默认封面
      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: [],
	  allcount:0,
	  
    }
  },
  
  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: {
    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%;
}

/* 横向卡片区域 */
.panel {
  background: #fff;
  padding: 30rpx 0;
}
.panel-title {
  padding: 0 30rpx 20rpx;
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}
.card-scroll {
  white-space: nowrap;
  padding: 0 30rpx;
}
.card {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 240rpx;
  height: 300rpx;
  border-radius: 16rpx;
  overflow: hidden;
  margin-right: 20rpx;
  box-shadow: 0 8rpx 16rpx rgba(0,0,0,.08);
}
.card-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.card-mask {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60%;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,.6));
  z-index: 2;
}
.card-content {
  position: relative;
  z-index: 3;
  padding: 20rpx;
  color: #fff;
}
.card-name {
  display: block;
  font-size: 30rpx;
  font-weight: 600;
}
.card-count {
  display: block;
  margin-top: 8rpx;
  font-size: 24rpx;
  opacity: .9;
}

/* 全部按钮 */
.card.all {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  justify-content: center;
  align-items: center;
}
.all-txt {
  font-size: 30rpx;
  font-weight: 600;
  color: #fff;
}
.all-txt2 {
  font-size: 25rpx;
  color: #fff;
}
</style>