2026-01-14 10:55:42 +00:00
|
|
|
|
<template>
|
|
|
|
|
|
<view class="home-page">
|
|
|
|
|
|
<!-- 应用头部 -->
|
|
|
|
|
|
<view class="header" :style="{ paddingTop: statusBarHeight + 'px' }">
|
|
|
|
|
|
<image class="logo" src="/static/home/logo.png" mode="aspectFit"></image>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 招募宣传横幅 -->
|
|
|
|
|
|
<swiper
|
|
|
|
|
|
class="recruit-banner"
|
|
|
|
|
|
:indicator-dots="bannerList.length > 1"
|
|
|
|
|
|
:autoplay="bannerList.length > 1"
|
|
|
|
|
|
:interval="3000"
|
|
|
|
|
|
:duration="500"
|
|
|
|
|
|
indicator-color="rgba(255, 255, 255, 0.5)"
|
|
|
|
|
|
indicator-active-color="#ffffff"
|
|
|
|
|
|
>
|
|
|
|
|
|
<swiper-item
|
|
|
|
|
|
v-for="(item, index) in bannerList"
|
|
|
|
|
|
:key="index"
|
|
|
|
|
|
@click="handleBannerClick(item)"
|
|
|
|
|
|
>
|
|
|
|
|
|
<image
|
|
|
|
|
|
class="banner-image"
|
|
|
|
|
|
:src="item.coverUrl"
|
|
|
|
|
|
mode="aspectFit"
|
|
|
|
|
|
></image>
|
|
|
|
|
|
</swiper-item>
|
|
|
|
|
|
</swiper>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 公会福利区 -->
|
|
|
|
|
|
<view class="benefits-section">
|
|
|
|
|
|
<view class="section-header">
|
|
|
|
|
|
<view class="section-title">
|
|
|
|
|
|
<image
|
|
|
|
|
|
class="title-icon"
|
|
|
|
|
|
src="/static/home/gift_icon.png"
|
|
|
|
|
|
mode="aspectFit"
|
|
|
|
|
|
></image>
|
|
|
|
|
|
<text class="title-text">公会福利</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="section-more" @click="handleViewAllBenefits">
|
|
|
|
|
|
查看全部 >
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="benefits-list">
|
|
|
|
|
|
<view
|
|
|
|
|
|
class="benefit-item"
|
|
|
|
|
|
v-for="(item, index) in benefitsList"
|
|
|
|
|
|
:key="index"
|
|
|
|
|
|
@click="handleBenefitClick(item)"
|
|
|
|
|
|
>
|
|
|
|
|
|
<image class="benefit-icon" :src="item.icon" mode="aspectFit"></image>
|
|
|
|
|
|
<text class="benefit-label">{{ item.label }}</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 公会活动区 -->
|
|
|
|
|
|
<view class="activities-section">
|
|
|
|
|
|
<view class="section-header">
|
|
|
|
|
|
<view class="section-title">
|
|
|
|
|
|
<image
|
|
|
|
|
|
class="title-icon"
|
|
|
|
|
|
src="/static/home/activity_icon.png"
|
|
|
|
|
|
mode="aspectFit"
|
|
|
|
|
|
></image>
|
|
|
|
|
|
<text class="title-text">公会活动</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="section-more" @click="handleViewAllActivities">
|
|
|
|
|
|
查看全部 >
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="activities-list">
|
|
|
|
|
|
<view
|
|
|
|
|
|
class="activity-item"
|
|
|
|
|
|
v-for="(item, index) in activitiesList"
|
|
|
|
|
|
:key="index"
|
|
|
|
|
|
@click="handleActivityClick(item)"
|
|
|
|
|
|
>
|
|
|
|
|
|
<view class="activity-image-wrapper">
|
|
|
|
|
|
<image
|
|
|
|
|
|
class="activity-image"
|
|
|
|
|
|
:src="item.coverUrl"
|
|
|
|
|
|
mode="aspectFill"
|
|
|
|
|
|
></image>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="activity-content">
|
|
|
|
|
|
<view class="activity-title">{{ item.title }}</view>
|
|
|
|
|
|
<view class="activity-desc">{{ item.summary }}</view>
|
|
|
|
|
|
<view class="activity-time"
|
|
|
|
|
|
>结束时间:{{ formatTime(item.endTime) }}</view
|
|
|
|
|
|
>
|
|
|
|
|
|
<view
|
|
|
|
|
|
class="join-activity-btn"
|
|
|
|
|
|
@click.stop="handleJoinActivity(item)"
|
|
|
|
|
|
>
|
|
|
|
|
|
<text>立即参与</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
import { getHomeData } from "@/api/home.js";
|
|
|
|
|
|
import {
|
|
|
|
|
|
getGuildBenefits,
|
|
|
|
|
|
getGuildActivities,
|
|
|
|
|
|
joinGuild,
|
|
|
|
|
|
joinActivity,
|
|
|
|
|
|
} from "@/api/index.js";
|
|
|
|
|
|
import { formatTime } from "@/utils/date.js";
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
|
data() {
|
|
|
|
|
|
return {
|
|
|
|
|
|
// 状态栏高度
|
|
|
|
|
|
statusBarHeight: 0,
|
|
|
|
|
|
// 导航栏高度（状态栏 + 导航栏内容）
|
|
|
|
|
|
navBarHeight: 0,
|
|
|
|
|
|
bannerList: [],
|
|
|
|
|
|
// 公会福利列表
|
|
|
|
|
|
benefitsList: [
|
|
|
|
|
|
{
|
|
|
|
|
|
id: 1,
|
|
|
|
|
|
label: "美食",
|
|
|
|
|
|
icon: "/static/home/food_menu.png",
|
|
|
|
|
|
type: "food",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
id: 2,
|
|
|
|
|
|
label: "保险",
|
|
|
|
|
|
icon: "/static/home/car_insurance.png",
|
|
|
|
|
|
type: "insurance",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
id: 3,
|
|
|
|
|
|
label: "维修",
|
|
|
|
|
|
icon: "/static/home/repair.png",
|
|
|
|
|
|
type: "repair",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
id: 4,
|
|
|
|
|
|
label: "健康",
|
|
|
|
|
|
icon: "/static/home/health.png",
|
|
|
|
|
|
type: "health",
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
// 公会活动列表
|
|
|
|
|
|
activitiesList: [],
|
|
|
|
|
|
};
|
|
|
|
|
|
},
|
|
|
|
|
|
onLoad() {
|
|
|
|
|
|
this.getSystemInfo();
|
|
|
|
|
|
this.loadHomeData();
|
|
|
|
|
|
this.loadActivities();
|
|
|
|
|
|
|
|
|
|
|
|
// 启用分享功能
|
|
|
|
|
|
// #ifdef MP-WEIXIN
|
|
|
|
|
|
uni.showShareMenu({
|
|
|
|
|
|
withShareTicket: true,
|
|
|
|
|
|
menus: ['shareAppMessage', 'shareTimeline']
|
|
|
|
|
|
});
|
|
|
|
|
|
// #endif
|
|
|
|
|
|
},
|
|
|
|
|
|
onShow() {
|
|
|
|
|
|
// 每次显示页面时刷新数据
|
|
|
|
|
|
this.loadHomeData();
|
|
|
|
|
|
this.loadActivities();
|
|
|
|
|
|
},
|
|
|
|
|
|
onPullDownRefresh() {
|
|
|
|
|
|
this.loadHomeData().finally(() => {
|
|
|
|
|
|
uni.stopPullDownRefresh();
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
// 分享给朋友
|
|
|
|
|
|
onShareAppMessage() {
|
|
|
|
|
|
// 使用第一个banner作为分享图片，如果没有则使用默认logo
|
|
|
|
|
|
const shareImage = this.bannerList && this.bannerList.length > 0
|
|
|
|
|
|
? this.bannerList[0].coverUrl
|
|
|
|
|
|
: '/static/home/logo.png';
|
|
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
|
title: '广厦千万间司机公会 - 加入工会，权益保障，福利升级',
|
|
|
|
|
|
path: '/pages/index/index',
|
|
|
|
|
|
imageUrl: shareImage
|
|
|
|
|
|
};
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
// 分享到朋友圈（微信小程序）
|
|
|
|
|
|
// #ifdef MP-WEIXIN
|
|
|
|
|
|
onShareTimeline() {
|
|
|
|
|
|
// 使用第一个banner作为分享图片，如果没有则使用默认logo
|
|
|
|
|
|
const shareImage = this.bannerList && this.bannerList.length > 0
|
|
|
|
|
|
? this.bannerList[0].coverUrl
|
|
|
|
|
|
: '/static/home/logo.png';
|
|
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
|
title: '广厦千万间司机公会 - 加入工会，权益保障，福利升级',
|
|
|
|
|
|
query: '',
|
|
|
|
|
|
imageUrl: shareImage
|
|
|
|
|
|
};
|
|
|
|
|
|
},
|
|
|
|
|
|
// #endif
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
// 获取系统信息
|
|
|
|
|
|
getSystemInfo() {
|
|
|
|
|
|
// 获取系统信息
|
|
|
|
|
|
const systemInfo = uni.getSystemInfoSync();
|
|
|
|
|
|
this.statusBarHeight = systemInfo.statusBarHeight || 0;
|
|
|
|
|
|
|
|
|
|
|
|
// 导航栏高度 = 状态栏高度 + 导航栏内容高度（通常44px，但不同平台可能不同）
|
|
|
|
|
|
// 这里可以根据实际需求调整导航栏内容高度
|
|
|
|
|
|
const navBarContentHeight = 44; // 导航栏内容高度，可根据设计稿调整
|
|
|
|
|
|
this.navBarHeight = this.statusBarHeight + navBarContentHeight;
|
|
|
|
|
|
},
|
|
|
|
|
|
// 加载首页数据
|
|
|
|
|
|
async loadHomeData() {
|
|
|
|
|
|
try {
|
|
|
|
|
|
// 获取首页banner
|
|
|
|
|
|
const res = await getHomeData({ noticeType: 22 });
|
|
|
|
|
|
if (res) {
|
|
|
|
|
|
this.bannerList = res.list || [];
|
|
|
|
|
|
}
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
|
console.error("加载首页数据失败:", error);
|
|
|
|
|
|
uni.showToast({
|
|
|
|
|
|
title: "加载失败，请重试",
|
|
|
|
|
|
icon: "none",
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
// 加载公会福利
|
|
|
|
|
|
async loadBenefits() {
|
|
|
|
|
|
try {
|
|
|
|
|
|
// 后续补充接口调用
|
|
|
|
|
|
// const res = await getGuildBenefits()
|
|
|
|
|
|
// if (res.statusCode === 200) {
|
|
|
|
|
|
// this.benefitsList = res.data || this.benefitsList
|
|
|
|
|
|
// }
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
|
console.error("加载公会福利失败:", error);
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
// 加载公会活动
|
|
|
|
|
|
async loadActivities() {
|
|
|
|
|
|
try {
|
|
|
|
|
|
// 后续补充接口调用
|
|
|
|
|
|
const res = await getHomeData({ page: 1, pageSize: 3, noticeType: 21 });
|
|
|
|
|
|
if (res) {
|
|
|
|
|
|
this.activitiesList = res.list || [];
|
|
|
|
|
|
}
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
|
console.error("加载公会活动失败:", error);
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
// 格式化时间戳
|
|
|
|
|
|
formatTime,
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// banner点击跳转
|
|
|
|
|
|
handleBannerClick(item) {
|
|
|
|
|
|
console.log(item, 222);
|
|
|
|
|
|
if (item.jumpUrl) {
|
|
|
|
|
|
// 判断跳转类型
|
|
|
|
|
|
if (
|
|
|
|
|
|
item.jumpUrl.startsWith("http://") ||
|
|
|
|
|
|
item.jumpUrl.startsWith("https://")
|
|
|
|
|
|
) {
|
|
|
|
|
|
// 外部链接，使用web-view或浏览器打开
|
|
|
|
|
|
// #ifdef H5
|
|
|
|
|
|
window.open(item.jumpUrl);
|
|
|
|
|
|
// #endif
|
|
|
|
|
|
// #ifdef MP-WEIXIN
|
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
|
url: `/pages/webview/webview?url=${encodeURIComponent(
|
|
|
|
|
|
item.jumpUrl
|
|
|
|
|
|
)}`,
|
|
|
|
|
|
});
|
|
|
|
|
|
// #endif
|
|
|
|
|
|
// #ifdef APP-PLUS
|
|
|
|
|
|
plus.runtime.openURL(item.jumpUrl);
|
|
|
|
|
|
// #endif
|
|
|
|
|
|
} else {
|
|
|
|
|
|
// 内部页面跳转
|
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
|
url: item.jumpUrl,
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
} else if (item.content) {
|
|
|
|
|
|
// 如果 jumpUrl 为空但有 content，展示富文本内容
|
|
|
|
|
|
const title = item.title || '详情';
|
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
|
url: `/pages/detail/richTextDetail?title=${encodeURIComponent(title)}&content=${encodeURIComponent(item.content)}`
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
// 查看全部福利
|
|
|
|
|
|
handleViewAllBenefits() {
|
|
|
|
|
|
// 清除分类信息，跳转到服务页面显示全部
|
|
|
|
|
|
const app = getApp();
|
|
|
|
|
|
if (app && app.globalData) {
|
|
|
|
|
|
app.globalData.serviceCategory = null;
|
|
|
|
|
|
}
|
|
|
|
|
|
uni.switchTab({
|
|
|
|
|
|
url: '/pages/service/service'
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
// 福利项点击
|
|
|
|
|
|
handleBenefitClick(item) {
|
|
|
|
|
|
// 建立 type 到 value 的映射关系
|
|
|
|
|
|
const typeToValueMap = {
|
|
|
|
|
|
food: '0', // 美食
|
|
|
|
|
|
insurance: '4', // 保险
|
|
|
|
|
|
repair: '1', // 维修
|
|
|
|
|
|
health: '5' // 健康
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 获取对应的分类 value
|
|
|
|
|
|
const categoryValue = typeToValueMap[item.type];
|
|
|
|
|
|
|
|
|
|
|
|
console.log(categoryValue, 222);
|
|
|
|
|
|
|
|
|
|
|
|
// 将分类信息存储到 globalData，供 service 页面使用
|
|
|
|
|
|
const app = getApp();
|
|
|
|
|
|
if (app && app.globalData && categoryValue) {
|
|
|
|
|
|
app.globalData.serviceCategory = categoryValue;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 跳转到服务页面
|
|
|
|
|
|
uni.switchTab({
|
|
|
|
|
|
url: '/pages/service/service'
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
// 查看全部活动
|
|
|
|
|
|
handleViewAllActivities() {
|
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
|
url: '/pages/activities/list'
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
// 活动项点击
|
|
|
|
|
|
handleActivityClick(item) {
|
|
|
|
|
|
// 点击活动项跳转到详情页
|
|
|
|
|
|
uni.navigateTo({
|
2026-03-02 07:32:41 +00:00
|
|
|
|
url: `/pages/detail/richTextDetail?id=${item.id}`
|
2026-01-14 10:55:42 +00:00
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
// 参与活动
|
|
|
|
|
|
async handleJoinActivity(item) {
|
|
|
|
|
|
// 跳转到活动详情页
|
|
|
|
|
|
uni.navigateTo({
|
2026-03-02 07:32:41 +00:00
|
|
|
|
url: `/pages/detail/richTextDetail?id=${item.id}`
|
2026-01-14 10:55:42 +00:00
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
};
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
.home-page {
|
|
|
|
|
|
min-height: 100vh;
|
|
|
|
|
|
background-color: #e2e8f1;
|
|
|
|
|
|
padding-bottom: 100rpx; // 为底部tabBar留出空间
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 应用头部 */
|
|
|
|
|
|
.header {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
padding-left: 34rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.logo {
|
|
|
|
|
|
width: 306rpx;
|
|
|
|
|
|
height: 72rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 招募宣传横幅 */
|
|
|
|
|
|
.recruit-banner {
|
|
|
|
|
|
padding: 32rpx 20rpx 20rpx 20rpx;
|
|
|
|
|
|
height: 398rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.banner-image {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 通用区块样式 */
|
|
|
|
|
|
.section-header {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
margin-bottom: 27rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.section-title {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
|
|
.title-icon {
|
|
|
|
|
|
width: 51rpx;
|
|
|
|
|
|
height: 51rpx;
|
|
|
|
|
|
margin-right: 8rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.title-text {
|
|
|
|
|
|
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
font-size: 36rpx;
|
|
|
|
|
|
color: #1a1819;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.section-more {
|
|
|
|
|
|
font-family: PingFang-SC, PingFang-SC;
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
font-size: 22rpx;
|
|
|
|
|
|
color: #333333;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 公会福利区 */
|
|
|
|
|
|
.benefits-section {
|
|
|
|
|
|
margin: 0 20rpx;
|
|
|
|
|
|
padding: 30rpx 22rpx 27rpx 16rpx;
|
|
|
|
|
|
background-color: #ffffff;
|
|
|
|
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.benefits-list {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
|
padding: 0 30rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.benefit-item {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
|
|
|
|
.benefit-icon {
|
|
|
|
|
|
width: 100rpx;
|
|
|
|
|
|
height: 100rpx;
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
margin-bottom: 16rpx;
|
|
|
|
|
|
transition: transform 0.2s;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.benefit-item:active .benefit-icon {
|
|
|
|
|
|
transform: scale(0.95);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.benefit-label {
|
|
|
|
|
|
font-family: PingFang-SC, PingFang-SC;
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
font-size: 26rpx;
|
|
|
|
|
|
color: #333333;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 公会活动区 */
|
|
|
|
|
|
.activities-section {
|
|
|
|
|
|
margin: 20rpx;
|
|
|
|
|
|
background-color: #ffffff;
|
|
|
|
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
|
|
|
|
padding: 32rpx 20rpx 62rpx 20rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.activities-list {
|
|
|
|
|
|
.activity-item {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
margin-bottom: 30rpx;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
|
|
|
|
|
|
|
|
|
|
&:active {
|
|
|
|
|
|
transform: scale(0.98);
|
|
|
|
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&:last-child {
|
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.activity-image-wrapper {
|
|
|
|
|
|
width: 186rpx;
|
|
|
|
|
|
height: 200rpx;
|
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
|
border: 1rpx solid #e2e8f1;
|
|
|
|
|
|
border-radius: 10rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.activity-image {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.activity-image-overlay {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
left: 0;
|
|
|
|
|
|
right: 0;
|
|
|
|
|
|
bottom: 0;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
background: linear-gradient(
|
|
|
|
|
|
to bottom,
|
|
|
|
|
|
rgba(0, 0, 0, 0.1),
|
|
|
|
|
|
rgba(0, 0, 0, 0.4)
|
|
|
|
|
|
);
|
|
|
|
|
|
padding: 20rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.overlay-text {
|
|
|
|
|
|
font-size: 20rpx;
|
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
letter-spacing: 2rpx;
|
|
|
|
|
|
margin-bottom: 10rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.activity-content {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
padding: 0 20rpx;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
|
|
.activity-title {
|
|
|
|
|
|
font-family: PingFang-SC, PingFang-SC;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
font-size: 30rpx;
|
|
|
|
|
|
color: #1a1819;
|
|
|
|
|
|
margin-bottom: 12rpx;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.activity-desc {
|
|
|
|
|
|
font-family: PingFang-SC, PingFang-SC;
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
font-size: 22rpx;
|
|
|
|
|
|
color: #888888;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
|
display: -webkit-box;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.activity-time {
|
|
|
|
|
|
width: 260rpx;
|
|
|
|
|
|
height: 33rpx;
|
|
|
|
|
|
padding: 0 10rpx;
|
|
|
|
|
|
background: rgba(0, 66, 148, 0.1);
|
|
|
|
|
|
color: #004294;
|
|
|
|
|
|
font-size: 20rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.join-activity-btn {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
right: 0;
|
|
|
|
|
|
bottom: 0;
|
|
|
|
|
|
background: #004294;
|
|
|
|
|
|
border-radius: 25rpx;
|
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
|
padding: 12rpx 24rpx;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
