538 lines
14 KiB
Vue
538 lines
14 KiB
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/community/dynamics' },
|
||
{ label: '业主投票', icon: '/static/img/Group_2.png', bgGradient: 'linear-gradient(35deg, #52C41A 0%, #36AD1A 100%)', path: '' },
|
||
{ 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: '' },
|
||
{ 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/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/public/richtext?title=法律小课堂' });
|
||
};
|
||
|
||
// 小区治理
|
||
const goCommunityGov = () => {
|
||
uni.navigateTo({ url: '/pages/public/richtext?title=小区治理' });
|
||
};
|
||
|
||
// 活动列表
|
||
const goActivityList = () => {
|
||
uni.navigateTo({ url: '/pages/activity/index' });
|
||
};
|
||
|
||
// 活动详情
|
||
const goActivityDetail = () => {
|
||
uni.navigateTo({ url: '/pages/activity/detail' });
|
||
};
|
||
</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>
|