fjrcloud-community-app/pages/index/index.vue

<!-- 智慧社区首页 - 严格还原蓝湖设计图 -->
<template>
  <view class="home-page">
    <!-- 状态栏占位 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    
    <!-- 顶部小区选择器 -->
    <view class="community-selector">
      <text class="community-name" @tap="goLogin">融侨馨苑</text>
      <text class="arrow-down">▼</text>

      <text class="not-auth" @tap="goCheck">未认证!请点击认证房屋!</text>
    </view>

    <!-- Banner卡片 -->
    <view class="banner-card">
      <swiper 
        class="banner-swiper" 
        :indicator-dots="true" 
        :autoplay="true" 
        :interval="3000" 
        :circular="true"
        indicator-color="rgba(255, 127, 105, 0.3)"
        indicator-active-color="#FF7F69"
      >
        <swiper-item v-for="(item, index) in bannerList" :key="index">
          <view class="banner-content">
            <view class="banner-text">
              <text class="banner-title">{{ item.title }}</text>
              <text class="banner-subtitle">{{ item.subtitle }}</text>
            </view>
            <image class="banner-icon" :src="item.icon" mode="aspectFit"></image>
          </view>
        </swiper-item>
      </swiper>
    </view>

    <!-- 功能入口网格 4x2 -->
    <view class="function-grid">
      <view 
        class="grid-item" 
        v-for="(item, index) in functionList" 
        :key="index"
        @tap="handleFunctionTap(item)"
      >
        <view class="icon-wrapper" :style="{ background: item.bgGradient }">
          <image class="icon-img" :src="item.icon" mode="aspectFit"></image>
        </view>
        <text class="icon-label">{{ item.label }}</text>
      </view>
    </view>

    <!-- 通知栏 -->
    <view class="notice-bar" @tap="goNotice">
      <view class="notice-tag">通知</view>
      <text class="notice-text">关于做好小区消防安全管理的通知...</text>
      <image class="right-icon" src="/static/img/right-icon.png" mode="aspectFit" />
    </view>

    <!-- 法律小课堂 + 小区治理 -->
    <view class="info-cards">
      <view class="info-card card-purple" @tap="goLawClass">
        <text class="card-title">法律小课堂</text>
        <text class="card-desc">法律进小区平安伴邻里</text>
      </view>
      <view class="info-card card-orange" @tap="goCommunityGov">
        <text class="card-title">小区治理</text>
        <text class="card-desc">共治共管幸福家园</text>
      </view>
    </view>

    <!-- 小区活动 -->
    <view class="activity-section">
      <view class="section-header" @tap="goActivityList">
        <text class="section-title">小区活动</text>
        <view class="more-icon-wrapper">
          <image class="right-icon" src="/static/img/right-icon-black.png" mode="aspectFit" />
        </view>
      </view>
      
      <!-- 活动卡片 -->
      <view class="activity-card" @tap="goActivityDetail">
        <image class="activity-cover" src="/static/img/guest.png" mode="aspectFill"></image>
        <view class="activity-info">
          <view class="activity-location">
            <view class="location-tag">
              <image class="location-img" src="/static/img/me-icon7.png" mode="aspectFit" />
            </view>
            <text class="location-text">福清市音西街道融侨馨苑1号楼下</text>
          </view>
          <view class="activity-date">
            <text class="date-label">报名日期：</text>
            <text class="date-value">2025/06/30-2025/07/01</text>
          </view>
          <view class="activity-date">
            <text class="date-label">活动日期：</text>
            <text class="date-value">2025/07/05 12:00-2025/07/05 18:00</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

// 状态栏高度
const statusBarHeight = ref(0);

// Banner轮播数据
const bannerList = ref([
  {
    title: '智慧社区',
    subtitle: '让生活更简单',
    icon: '/static/img/home-banner-icon.png',
  },
  {
    title: '智慧社区',
    subtitle: '让生活更简单',
    icon: '/static/img/home-banner-icon.png',
  },
]);

// 功能入口列表
const functionList = ref([
  { label: '工作计划', icon: '/static/img/Group_1.png', bgGradient: 'linear-gradient(35deg, #FF7F69 0%, #FC5A5D 100%)', path: '/pages/sub/community/dynamics' },
  { label: '业主投票', icon: '/static/img/Group_2.png', bgGradient: 'linear-gradient(35deg, #52C41A 0%, #36AD1A 100%)', path: '/pages/sub/community/daily' },
  { label: '收益公示', icon: '/static/img/Group_3.png', bgGradient: 'linear-gradient(35deg, #FFA940 0%, #FA8C16 100%)', path: '' },
  { label: '在线缴费', icon: '/static/img/Group_4.png', bgGradient: 'linear-gradient(35deg, #4096FF 0%, #1890FF 100%)', path: '' },
  { label: '报事报修', icon: '/static/img/Group_5.png', bgGradient: 'linear-gradient(35deg, #69B1FF 0%, #4096FF 100%)', path: '' },
  { label: '物业人员', icon: '/static/img/Group_6.png', bgGradient: 'linear-gradient(35deg, #9254DE 0%, #722ED1 100%)', path: '/pages/sub/staff/index' },
  { label: '业委会组织', icon: '/static/img/Group_7.png', bgGradient: 'linear-gradient(35deg, #7B61FF 0%, #597EF7 100%)', path: '' },
  { label: '更多服务', icon: '/static/img/Group_8.png', bgGradient: 'linear-gradient(35deg, #36CFC9 0%, #13C2C2 100%)', path: '' },
]);

onLoad(() => {
  // 获取状态栏高度
  const systemInfo = uni.getSystemInfoSync();
  statusBarHeight.value = systemInfo.statusBarHeight || 0;
});

// 功能入口点击
const handleFunctionTap = (item) => {
  if (item.path) {
    uni.navigateTo({ url: item.path });
  } else {
    uni.showToast({ title: `${item.label}功能开发中`, icon: 'none' });
  }
};

// 通知
const goNotice = () => {
  uni.navigateTo({ url: '/pages/sub/notice/detail?id=1' });
};

// 跳转登录页
const goLogin = () => {
  uni.navigateTo({ url: '/pages/index/login-page' });
};

const goCheck = () => {
  uni.navigateTo({ url: '/pages/index/check-page' });
};

// 法律小课堂
const goLawClass = () => {
  uni.navigateTo({ url: '/pages/sub/knowledge/classroom?tab=0', fail: (err) => { console.error('跳转失败', err); } });
};

// 小区治理
const goCommunityGov = () => {
  uni.navigateTo({ url: '/pages/sub/knowledge/classroom?tab=1', fail: (err) => { console.error('跳转失败', err); } });
};

// 活动列表
const goActivityList = () => {
  uni.navigateTo({ url: '/pages/sub/activity/list' });
};

// 活动详情
const goActivityDetail = () => {
  uni.navigateTo({ url: '/pages/sub/activity/detail?id=1' });
};
</script>

<style lang="less">
// 页面容器
.home-page {
  min-height: 100vh;
  background-color: #F5F7FA;
  padding-bottom: 120rpx;
}

// 状态栏占位
.status-bar {
  width: 100%;
  background-color: #F5F7FA;
}

// 小区选择器
.community-selector {
  display: flex;
  align-items: center;
  padding: 20rpx 32rpx;
  
  .community-name {
    font-size: 36rpx;
    font-weight: 600;
    color: #333333;
    font-family: 'PingFang SC', sans-serif;
  }
  
  .arrow-down {
    font-size: 20rpx;
    color: #999999;
    margin-left: 8rpx;
  }

  .not-auth{
    margin-left:30rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

// Banner卡片
.banner-card {
  height: 298rpx;
  margin: 0 24rpx 24rpx;
  padding: 45.8rpx 38rpx;
  background-color: #FFFFFF;
  border-radius: 38rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
  
  .banner-swiper {
    width: 100%;
    height: 100%;
    
    .banner-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 32rpx;
      height: 100%;
      
      .banner-text {
        flex: 1;
        
        .banner-title {
          display: block;
          font-size: 44rpx;
          font-weight: 600;
          color: #333333;
          margin-bottom: 12rpx;
          font-family: 'PingFang SC', sans-serif;
        }
        
        .banner-subtitle {
          display: block;
          font-size: 24rpx;
          color: #999999;
          font-family: 'PingFang SC', sans-serif;
        }
      }
      
      .banner-icon {
        width: 160rpx;
        height: 160rpx;
      }
    }
  }
}

// 功能入口网格
.function-grid {
  margin: 0 24rpx 24rpx;
  padding: 24rpx 16rpx;
  //background-color: #FFFFFF;
  border-radius: 24rpx;
  display: flex;
  flex-wrap: wrap;
  // box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
  
  .grid-item {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24rpx;
    
    .icon-wrapper {
      width: 88rpx;
      height: 88rpx;
      border-radius: 34rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 12rpx;
      
      .icon-img {
        // width: 48rpx;
        // height: 48rpx;
        width: 100%;
        height: 100%;
      }
    }
    
    .icon-label {
      font-size: 24rpx;
      color: #333333;
      font-family: 'PingFang SC', sans-serif;
    }
  }
}

// 通知栏
.notice-bar {
  margin: 0 24rpx 50rpx;
  padding: 20rpx 24rpx;
  background-color: #FFF0E5;
  border-radius: 19rpx;
  display: flex;
  align-items: center;
  
  .notice-tag {
    height: 40rpx;
    font-family: YouSheBiaoTiYuan, YouSheBiaoTiYuan;
    font-weight: 400;
    font-size: 31rpx;
    color: #333333;
    text-align: center;
    font-style: normal;
    text-transform: none;
    flex-shrink: 0;
    margin-right: 16rpx;
  }
  
  .notice-text {
    flex: 1;
    min-width: 0;
    font-size: 26rpx;
    color: #666666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'PingFang SC', sans-serif;
  }
  
  .right-icon {
    width: 24rpx;
    height: 24rpx;
    margin-left: 8rpx;
    flex-shrink: 0;
  }
}

// 信息卡片（法律小课堂 + 小区治理）
.info-cards {
  margin: 0 24rpx 38rpx;
  display: flex;
  gap: 16rpx;
  
  .info-card {
    flex: 1;
    padding: 22rpx;
    border-radius: 16rpx;
    min-height: 140rpx;
    display: flex;
    flex-direction: column;
    // justify-content: center;
    
    .card-title {
      // font-size: 30rpx;
      // font-weight: 600;
      // color: #FFFFFF;
      // margin-bottom: 8rpx;
      // font-family: 'PingFang SC', sans-serif;

      height: 36rpx;
      font-family: Source Han Sans SC, Source Han Sans SC;
      font-weight: 500;
      font-size: 31rpx;
      color: #FFFFFF;
      text-align: left;
      font-style: normal;
      text-transform: none;
      margin-bottom: 13rpx;
    }
    
    .card-desc {
      // font-size: 22rpx;
      // color: rgba(255, 255, 255, 0.85);
      // font-family: 'PingFang SC', sans-serif;

      height: 61rpx;
      font-family: Source Han Sans SC, Source Han Sans SC;
      font-weight: 400;
      font-size: 23rpx;
      color: #E8E6FF;
      line-height: 34rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
    
    &.card-purple {
      background: url('/static/img/home-left.png') no-repeat right bottom, linear-gradient(135deg, #9254DE 0%, #722ED1 100%);
      background-size: 180rpx auto, 100% 100%;
    }
    
    &.card-orange {
      background: url('/static/img/home-right.png') no-repeat right bottom, linear-gradient(135deg, #FFA940 0%, #FA8C16 100%);
      background-size: 180rpx auto, 100% 100%;
    }
  }
}

// 小区活动
.activity-section {
  margin: 0 24rpx;
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    
    .section-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333333;
      font-family: 'PingFang SC', sans-serif;
    }
    
    .more-icon-wrapper {
      width: 42rpx;
      height: 42rpx;
      background: rgba(208, 199, 194, 0.27);
      border-radius: 71rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .right-icon {
        width: 30rpx;
        height: 30rpx;
      }
    }
  }
  
  .activity-card {
    background-color: #FFFFFF;
    border-radius: 31rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
    padding: 19rpx;
    
    .activity-cover {
      width: 100%;
      height: 320rpx;
      border-radius: 31rpx;
    }
    
    .activity-info {
      padding: 24rpx;
      
      .activity-title {
        display: block;
        font-size: 30rpx;
        font-weight: 600;
        color: #333333;
        margin-bottom: 16rpx;
        font-family: 'PingFang SC', sans-serif;
      }
      
      .activity-location {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        
        .location-tag {
          width: 53rpx;
          height: 59rpx;
          background: #FF9F7F;
          border-radius: 8rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 20rpx;
          flex-shrink: 0;
          transform: skewX(-15deg);
          
          .location-img {
              width: 25rpx;
              height: 25rpx;
              transform: skewX(15deg);
              filter: brightness(0) invert(1);
            }
        }
        
        .location-text {
          flex: 1;
          min-width: 0;
          font-size: 30rpx;
          color: #666666;
          font-family: 'PingFang SC', sans-serif;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      
      .activity-date {
        display: flex;
        align-items: center;
        margin-bottom: 12rpx;
        
        .date-label {
          font-size: 24rpx;
          color: #999999;
          font-family: 'PingFang SC', sans-serif;
        }
        
        .date-value {
          font-size: 24rpx;
          color: #666666;
          font-family: 'PingFang SC', sans-serif;
        }
      }
    }
  }
}
</style>