library-wechat/subpkg/pages/activity-list/activity-list.vue

<template>
	<view class="activity-list">
		<view class="tab-box">
			<view 
				class="tab-item" 
				:class="{ active: currentTab === 0 }"
				@click="switchTab(0)"
			>
				进行中
			</view>
			<view 
				class="tab-item" 
				:class="{ active: currentTab === 1 }"
				@click="switchTab(1)"
			>
				往期活动
			</view>
		</view>

		<scroll-view
			scroll-y
			refresher-enabled
			:refresher-triggered="refreshing"
			@refresherrefresh="onRefresh"
			lower-threshold="100"
		>
			<view class="activity-item" v-for="(item, index) in displayList" @click="toActivityDetail(item)" :key="index">
				<image class="activity-img" :src="item.imgUrl" mode="aspectFill"></image>
				<view class="activity-info">
					<view class="activity-info-left">
						<text class="title">{{ item.title }}</text>
						<view class="time">
							<uni-icons class="time-icon" custom-prefix="iconfont" type="icon-shijian" size="15"></uni-icons>
							<text>{{ item.time }}</text>
						</view>
					</view>
					<button
						class="activity-btn"
						:class="item.status === 0 ? 'disabled-btn' : ''"
						type="primary"
						:disabled="item.status === 0"
					>
						{{ item.status === 1 ? '立即参加' : '活动结束' }}
					</button>
				</view>
			</view>

			<view class="empty-box" v-if="displayList.length === 0">
        <uni-icons custom-prefix="iconfont" type="icon-kongshuju" size="80"></uni-icons>
				<text style="margin-top: 20px;">暂无{{ currentTab === 0 ? '进行中的活动' : '往期活动' }}~</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentTab: 0,
			activityList: [],
			refreshing: false
		};
	},
	computed: {
		displayList() {
			return this.currentTab === 0 
				? this.activityList.filter(item => item.status === 1)
				: this.activityList.filter(item => item.status === 0);
		}
	},
	onLoad() {
		this.getActivityList();
	},
	methods: {
		switchTab(index) {
			this.currentTab = index;
		},

		getActivityList() {
			this.refreshing = true;
			setTimeout(() => {
				this.activityList = [
					{
						imgUrl: "https://mmbiz.qpic.cn/mmbiz_jpg/tuyGibvSXrso7c068ibUK1dXCGM2oiaBHAe3c82icrPjhLr3aFMLzhQ8n4C9X6qY5n0aDkRibvTNxoFVchrQxnicSJ64LX5KJxKj80TutmMicRKoY0/640?wx_fmt=jpeg&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=3",
						title: "以爱之名赴健康之约，致敬每一位伟大的母亲",
						time: "2026-05-10 09:00 ~ 2026-05-15 11:30",
            localImg: "images/activity1.png", 
            content: `<p style="padding:20px 12px; text-indent: 2em; line-height:28px; ">2026年5月10日，“以爱之名，守护健康”葛图讲坛35期母亲节健康关爱活动在葛店经开区图书馆温情启幕，汇聚了近40组亲子家庭，将健康科普化作深情告白，把亲子陪伴化作节日惊喜，为每一位母亲送上最真挚的节日祝福与贴心关怀。</p>

                https://mmbiz.qpic.cn/mmbiz_jpg/tuyGibvSXrsp5h4G9Ip4Jl10attsaXjlUyRLOcia8zXKfV0yc9cwOIgmvnSqusKkB4iaia8bMFDnBm2ApntEWA06QEmDt7hbwa5t5k3hofWZm3s/640?wx_fmt=jpeg&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=6

                <p style="text-align: center;color: rgb(240, 159, 161); padding-bottom: 40px;">HAPPY MOTHER'S DAY</p>

               <p style="text-align: center; line-height:36px;"> 致敬母亲<br/>
                不止于告白<br/>
                更在于守护她的岁岁安康</p>

                https://mmbiz.qpic.cn/sz_mmbiz_jpg/tuyGibvSXrspDOvN5sicEDS4tqjTXZzurKrqmQibiazDZldSP5j1bWvKKiahCMvJ2OOpvUcvDPSyodGso32IEEC6ajPznwKm2PL5vyMjh2biahh2g/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=7

                <p style="text-align: center; line-height:36px;">
                活动特邀湖北省中医院四位专家<br/>
                聚焦母亲群体高频健康痛点<br/>
                把专业的医学知识<br/>
                化作守护母亲的暖心指南<br/>
                </p>
                <p style="text-align: center; line-height:36px;">
                杨露医师重点科普中老年母亲<br/>
                高发的睡眠呼吸暂停综合征<br/>
                教大家科学识别与干预<br/>
                </p>
                <p style="text-align: center; line-height:36px;">                
                王诗蕾护师详解顺时养生与睡眠的关联<br/>
                为常见失眠问题提供实用方案<br/>
                帮助大家拥抱深度睡眠<br/>
                </p>
                https://mmbiz.qpic.cn/mmbiz_jpg/tuyGibvSXrsqHcibsoKTrNmhFAOlmA4EibNBoEJibQRd0zoU5IOYPORqIKWAC6xH6qCMYKbKGshU5mkSicMOdhCIP24LpEPkgtyVXN73XXU83vsk/640?wx_fmt=jpeg&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=12

                https://mmbiz.qpic.cn/sz_mmbiz_jpg/tuyGibvSXrsoMcRPkKzwAq229WY37uOaqlzvV1lrPrib1WibQyH8iakKGweuJ2eyYZpRXj79Qmm7zC4IMaibDgn5qXfCuxmF8eibFONhjZOpMZtvQ/640?wx_fmt=jpeg&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=13
                <p style="text-align: center; line-height:36px;">
                认真聆听的模样<br/>
                是母亲对自己的温柔善待<br/>
                专注记录的瞬间<br/>
                是我们对母亲最实在的守护<br/>
                </p>
                https://mmbiz.qpic.cn/sz_mmbiz_jpg/tuyGibvSXrsphvUJMRz60CzqkEd6xuSxdzoSCjdOoQr8CG3aaib2xl6vpcUr35JAqbXfojqib2lQZWh24cNOgf2ewfVmJrRrtrfJadib8aKkkibY/640?wx_fmt=jpeg&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=17
                <p style="text-align: center;color: rgb(240, 159, 161); padding-top: 40px; padding-bottom: 40px;">HAPPY MOTHER'S DAY</p>
                <p style="text-align: center; line-height:36px;">
                以爱之名，守护健康<br/>
                以书为媒，传递温情<br/>
                </p>
                <p style="text-align: center; line-height:36px; padding-bottom: 40px;">
                这场由葛店经开区图书馆<br/>
                湖北省中医院葛店院区<br/>
                湖畔社区居委会联合举办的<br/>
                “葛图讲坛”母亲节特别企划<br/>
                是我馆人文关怀与文化传播的一次温柔落地<br/>
                更是对每一位母亲的深情致敬<br/>
                </p>
                 <p style="text-align: center; line-height:36px;">
                愿更多关注投向母亲健康<br/>
                愿每一份爱意及时抵达<br/>
                让每一位母亲被时光温柔以待<br/>
                被健康悉心守护<br/>
                </p>`,
						status: 1,
            location: "葛店经开区图书馆",
					},
					{
						imgUrl: "https://mmbiz.qpic.cn/sz_mmbiz_jpg/tuyGibvSXrsqmHJvND8QQFHPDaFEuGGqaNgVvjEO7tqBziaqlcz5bURSyNd4DoKxcD41LWIDComEbUm25pBA86ibeN45zvoPAzDJzaoxayyicMc/640?wx_fmt=jpeg&from=appmsg#imgIndex=22",
						title: "别让肥胖偷走健康，馆藏好书为健康支招",
						time: "2026-05-11 09:00 ~ 2026-05-11 17:30",
            localImg: "images/activity2.png", 
            content: `<p style="padding:20px 12px; text-indent: 2em; line-height:28px;  font-size: 13px;">5月11日，是专为对抗肥胖问题设立的世界防治肥胖日。当“5·11”谐音成“我要瘦”，这简单的三个字背后，藏着的是全球超20亿超重或肥胖人群的健康焦虑。肥胖早已不是“体态丰满”的小事，而是被世界卫生组织列为十大慢性疾病之一的公共卫生危机。今天，就让我们一起科学认识肥胖，把健康主动权握在自己手中。</p>
                <div style="display:flex; justify-content: center; margin:40px auto 20px auto;">
                  <p style="background-color: rgb(93, 164, 124); padding: 4px 15px; color:#fff; border-radius: 4px; ">科学减重指南书籍推荐</p>
                </div>
                <p style="text-indent: 2em; line-height:28px; display: inline-block; margin:0 12px; border: 2px solid rgb(93, 164, 124); padding: 10px; background-color: rgb(199, 227, 178); font-size: 13px; text-align: justify; border-radius: 4px;">为什么你拼命运动还是瘦不下来？为什么你严格节食却依旧反弹？为什么别人轻松减肥，你却举步维艰？其实，减肥不是一场靠意志力硬撑的战争，而是一场需要科学指导的持久战。想要打破减肥僵局，不妨从阅读专业的减肥书籍开始。今天，葛店经开区图书馆就为你推荐几本靠谱的减肥好书，帮你重塑身材，拥抱健康生活。</p>
               https://mmbiz.qpic.cn/sz_mmbiz_jpg/tuyGibvSXrsoXfmjrjPs3sDmOmIkx7LSHA7bMdkNGvbVDdyN7AywSXk8hfL2Z0S0bv9S6NUSxuYngZnyRGXff2gmvuUn89iaxHfPxVQyNLLZg/640?wx_fmt=jpeg&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=16
                <div style="display:flex; justify-content: center; margin:20px auto; flex-direction: column; padding:0 20px;  font-size: 13px;">
                  <p>ISBN:</p>
                  <p style="text-align: center; line-height:36px;">978-7-5337-9035-6 </p>
                  <p>馆藏地点：</p>
                  <p style="text-align: center; line-height:36px;">二楼综合阅览一<br/>27架B面03列03层</p>
                  <p>内容简介:</p>
                  <p style="padding:20px 12px; text-indent: 2em; line-height:28px; ">本书分为五个篇章, 包括认知篇、饮食营养篇、心理篇、运动篇, 以及特殊人群篇。这五个篇章涵盖了超重和肥胖人群的体重管理, 以及消瘦人群的体重管理, 旨在为读者提供全面、科学的体重管理指导。</p>
                </div>
              https://mmbiz.qpic.cn/mmbiz_jpg/tuyGibvSXrso5oZu6lfdRoV4n8qqp55JYqOh44UrIiaicPHbnicIk8C7QVoCGiaNZXZXByXUWo7WqgiaBhGXztdZtYnC0ps8SYHjiaV9PKY8X6iaPqQ/640?wx_fmt=jpeg&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=17
                <div style="display:flex; justify-content: center; margin:20px auto; flex-direction: column; padding:0 20px;  font-size: 13px;">
                  <p>ISBN:</p>
                  <p style="text-align: center; line-height:36px;">978-7-5001-7513-1 </p>
                  <p>馆藏地点：</p>
                  <p style="text-align: center; line-height:36px;">二楼综合阅览一<br/>27架B面03列03层</p>
                  <p>内容简介:</p>
                  <p style="padding:20px 12px; text-indent: 2em; line-height:28px; ">本书主要内容: 身体重置计划不需要节食、不需要有禁食窗口期, 无关饮食热量限制或其他时髦的花招。它包含六大简单的操作技巧, 是为生活在现实世界中的真实成年人设计, 帮助成年人通过饮食实现健康生活, 甚至逆龄生态。书中内容非常易于操作和可持续, 不需要很多额外的餐饮动作, 是一套详尽、有效、丰富的餐饮为主, 配合适当运动的综合性身体调节计划。</p>
                </div>
               https://mmbiz.qpic.cn/sz_mmbiz_jpg/tuyGibvSXrspsqSQqHXGWtMUuLeKD7y1hJ0gDBqpBNJlRCMyPoZwjB8HN1chbl13zcQEIiaVBbrsRdnznThGze0EDQtfQyKen282oFUunVzB0/640?wx_fmt=jpeg&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=18
                <div style="display:flex; justify-content: center; margin:20px auto; flex-direction: column; padding:0 20px;  font-size: 13px;">
                  <p>ISBN:</p>
                  <p style="text-align: center; line-height:36px;">978-7-5532-1045-2</p>
                  <p>馆藏地点：</p>
                  <p style="text-align: center; line-height:36px;">二楼综合阅览一<br/>27架B面02列02层</p>
                  <p>内容简介:</p>
                  <p style="padding:20px 12px; text-indent: 2em; line-height:28px; ">作者谢佳妤在整理其奶奶李瑞芬遗稿的基础上，用年轻化的语言讲述了饮食与健康的关系，说明了各种常见的营养素的作用和正确进行食物搭配的方法，有助于读者学会科学选择食物、理性对待食物，养成均衡饮食、合理膳食的习惯。</p>
                </div>
                 <div style="display:flex; justify-content: center; margin:40px auto 20px auto;">
                  <p style="background-color: rgb(93, 164, 124); padding: 4px 15px; color:#fff; border-radius: 4px; ">肥胖是疾病的“导火索”</p>
                </div>
                <div>
                  <p style="padding:20px 12px; text-indent: 2em; line-height:28px; ">很多人觉得“胖点没关系，看着富态”，但医学研究早已证实，肥胖是多种疾病的“共同土壤”。它就像一颗埋在身体里的定时炸弹，随时可能引爆健康危机：</p>
                  https://mmbiz.qpic.cn/sz_mmbiz_png/tuyGibvSXrsoGIHpwHdfEr7sM6Ldqd4YjPwaYBBeFc2CRickibceCwIEXIopOCO6HWMIagYQkEwApf42cYxPUbdUqT3d2rFudibJcM53n3wTG0Q/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=20
                  <p style="text-align: center; line-height:36px;">1.代谢系统紊乱：</p>
                  <p style="padding:20px 12px; text-indent: 2em; line-height:28px; ">约80%的2型糖尿病患者伴有超重或肥胖，内脏脂肪释放的炎症因子会干扰胰岛素信号，让身体对胰岛素“失灵”，血糖随之失控。此外，肥胖还会诱发痛风、高脂血症，让血液变成浓稠的“油脂汤”。</p>
                  <p style="text-align: center; line-height:36px;">2.心血管不堪重负：</p>
                  <p style="padding:20px 12px; text-indent: 2em; line-height:28px; ">肥胖者患高血压的风险比正常人高60%，冠心病风险更是高出2-3倍。腹部堆积的脂肪会压迫血管，加速动脉粥样硬化，心梗、中风等急性心血管事件的发生率也随之飙升。</p>
                  https://mmbiz.qpic.cn/sz_mmbiz_jpg/tuyGibvSXrsqmHJvND8QQFHPDaFEuGGqaNgVvjEO7tqBziaqlcz5bURSyNd4DoKxcD41LWIDComEbUm25pBA86ibeN45zvoPAzDJzaoxayyicMc/640?wx_fmt=jpeg&from=appmsg#imgIndex=22
                  <p style="text-align: center; line-height:36px;">3.癌症风险飙升：</p>
                  <p style="padding:20px 12px; text-indent: 2em; line-height:28px; ">国际癌症研究机构确认，肥胖与至少13种癌症相关。其中，子宫内膜癌风险增加6倍，食管腺癌、肝癌、肾癌等发病概率也显著上升。脂肪组织分泌的异常激素，会持续刺激细胞变异，为癌症埋下隐患。</p>
                  <p style="text-align: center; line-height:36px;">4.生活质量直线下降：</p>
                  <p style="padding:20px 12px; text-indent: 2em; line-height:28px; ">体重每增加5公斤，膝关节骨关节炎风险上升36%；重度肥胖者中，阻塞性睡眠呼吸暂停综合征患病率超70%，每晚都在“缺氧”中挣扎。更不用提肥胖带来的自卑、抑郁等心理问题，让很多人在社交中抬不起头。 </p>
                </div>
                 <div style="display:flex; justify-content: center; margin:40px auto 20px auto;">
                  <p style="background-color: rgb(93, 164, 124); padding: 4px 15px; color:#fff; border-radius: 4px; ">科学减重：避开误区找对方法</p>
                </div>
                <div>
                  https://mmbiz.qpic.cn/mmbiz_png/tuyGibvSXrsroDeiawZ9ApdibzQc2ZXAp8u1JSsViciaibwfIupY4VTpIets2AoEY87dfbKIS8cuDeR7icLqBGNSUkV8nCA3fmyLDw2hH7dtdWK5FE/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=29
                  <p style="padding:20px 12px; text-indent: 2em; line-height:28px; ">提到减肥，很多人第一反应就是“节食”“吃减肥药”，但这些极端方法往往伤身又反弹。真正的科学减重，是建立健康的生活方式，让身体慢慢回归平衡。</p>
                  <p style="text-align: center; line-height:36px;">1.不是“饿肚子”，是“会吃饭”</p>
                  <p style="padding:20px 12px; text-indent: 2em; line-height:28px; ">控制总能量，合理分配：先根据“身高（cm）-105”算出理想体重，再按每天每公斤理想体重15-35kcal计算总能量（轻体力劳动者选20-25kcal）。将一日三餐能量按3:4:3分配，早餐吃好、午餐吃饱、晚餐吃少。</p>
                   https://mmbiz.qpic.cn/mmbiz_png/tuyGibvSXrsobpIdpicy3GeZ9HxuWwQCKqAr85ibIHfZKGFAsgewVSrh6fwI04vlJGAOBgiaRB5eyp4HHo4NJ3wWiberXHvke4LGs6hnKupzqPqk/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=31
                  <p style="padding:20px 12px; text-indent: 2em; line-height:28px; ">拒绝“高热量陷阱”：少吃油炸食品、含糖糕点、肥肉等高能量食物，这些食物往往一口就占了半天的能量配额。多吃全谷物、蔬菜、优质蛋白，比如燕麦、西兰花、鸡胸肉，它们能带来更强的饱腹感，还能保证营养均衡。</p>
                  https://mmbiz.qpic.cn/sz_mmbiz_png/tuyGibvSXrsq1ypaFcwARIlrCXTqibKZcjwozFc9JlKTap25kzbxY7a8Fk7l5ibLxibKN7bTIak0logVmTGR48N9xHz3NF1nL7gxXZ6MncFvGt8/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=32
                  <p style="padding:20px 12px; text-indent: 2em; line-height:28px; ">养成健康进食习惯：细嚼慢咽，每口饭嚼20次以上；定时定量进餐，不吃夜宵；用小盘子盛饭，避免“眼大肚小”吃撑自己。</p>
                  <p style="text-align: center; line-height:36px;">2. 动起来，让脂肪“动”起来</p>
                  <p style="padding:20px 12px; text-indent: 2em; line-height:28px; ">有氧运动为主，抗阻运动为辅：每周进行150-300分钟中等强度有氧运动，比如快走、慢跑、游泳，每次30分钟以上，能有效燃烧脂肪。每周再安排2-3次抗阻运动，举哑铃、做平板支撑都可以，增加肌肉量能提高基础代谢，让你躺着也能消耗更多能量。</p>
                  https://mmbiz.qpic.cn/mmbiz_png/tuyGibvSXrsp64a3In2BKHfQQHEIkDIUSjCklsbETfrcRkHyd35fW3OUYZeibpJHRE6zicbicSf94DIics1vP9b27o1GPH7X2rQkk0wh8bNNaicoQ/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=34
                  <p style="padding:20px 12px; text-indent: 2em; line-height:28px; ">打破“久坐魔咒”：每坐1小时就起身活动3-5分钟，伸伸懒腰、倒杯水、走两步，每天的零碎时间加起来，也是一笔不小的“运动财富”。</p>
                  <p style="text-align: center; line-height:36px;">3.小习惯，大改变</p>
                  <p style="padding:20px 12px; text-indent: 2em; line-height:28px; ">睡够7小时：睡眠不足会导致瘦素分泌减少、饥饿素分泌增加，让你忍不住想吃高糖高脂食物。尽量在晚上11点前入睡，给身体足够的修复时间。 </p>
                  https://mmbiz.qpic.cn/mmbiz_png/tuyGibvSXrspLUJPiaZuP1eAZXWjyNyGeKLNgnXibwich4xnqgQJjXcyxCIickVWr8ibsmnEmTUx2JuwARYWxDR3yW2ibIJX2O3RzSic3xT3RNlkwaA/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=35
                  https://mmbiz.qpic.cn/sz_mmbiz_png/tuyGibvSXrsqKnXiak3cs5BPILA59JRapTCkFBycZ0SYdzxBQ1LMnqkXicWZiaNiaYPsTyZ9S1wBOyuv0j24v6pbyjWIO2p8Ue42LWckMYWuaSrs/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=36
                  <p style="padding:20px 12px; text-indent: 2em; line-height:28px; ">学会情绪管理：压力大时很多人会“情绪化进食”，不妨试试冥想、听音乐、和朋友聊天，用健康的方式释放压力，别让食物成为“情绪垃圾桶”。</p>
                  https://mmbiz.qpic.cn/mmbiz_png/tuyGibvSXrsoGPLDZ7l26cKDDac6BewgQuZiaic4M5Rk052cibY1OYBiaE9G46QAIEeCdSZN58usFVWMIto6dcz2lxg04ksYRaECazibulFu9pjf4/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=37
                  <p style="padding:20px 12px; text-indent: 2em; line-height:28px; ">定期监测体重：每周固定时间称一次体重，比如每周一早上空腹称重，及时调整饮食和运动计划，避免体重“悄悄失控”。</p>
                </div>
                <p style="text-align: center; line-height:36px; padding-top: 40px;">
                每个人<br/>
                从自己做起<br/>
                主动学习健康知识<br/>
                管住嘴<br/>
                迈开腿<br/>
                用实际行动对抗肥胖<br/>
                </p>`,
						status: 0,
            location: "葛店经开区图书馆",
					}
				];
				this.refreshing = false;
			}, 300);
		},

		onRefresh() {
			this.getActivityList();
		},

		toActivityDetail(item) {
      if (item.link) {
        uni.navigateTo({
          url: '/subpkg/pages/webview/webview?url=' + encodeURIComponent(item.link)
        });
      } else {
        uni.navigateTo({
          url: "/subpkg/pages/activity-detail/activity-detail?item=" + encodeURIComponent(JSON.stringify(item))
        });
      }
    }
	},
};
</script>

<style lang="scss" scoped>
.activity-list {
	padding: 15px 10px;
	height: 100vh;
	box-sizing: border-box;
	background-color: #f5f5f5;
}


.tab-box {
	display: flex;
	background-color: #fff;
	margin-bottom: 10px;
  position: sticky;
  top: 0;
  z-index: 99;
}
.tab-item {
	flex: 1;
	text-align: center;
	padding: 10px 0;
	font-size: 15px;
	color: #333;
	position: relative;
}
.tab-item.active {
	color: #01a4fe;
	font-weight: bold;
}
.tab-item.active::after {
	content: '';
	position: absolute;
	width: 25px;
	height: 2px;
	background-color: #01a4fe;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 2px;
}


scroll-view {
	height: calc(100vh - 120px);
}

.empty-box {
	display: flex;
  flex-direction: column;
	justify-content: center;
	align-items: center;
	height: calc(100vh - 200px);
	color: #999;
	font-size: 15px;
}

.activity-item {
	background: #fff;
	border-radius: 12px;
	margin-bottom: 15px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

	.activity-img {
		width: 100%;
		height: 180rpx;
    object-fit: cover;
	}

	.activity-info {
		padding: 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.activity-info-left {
			flex: 1;

			.title {
				font-size: 16px;
				font-weight: bold;
				color: #333;
				display: block;
				margin-bottom: 8px;
			}

			.time {
				display: flex;
				align-items: center;
				font-size: 12px;
				color: #999;

				.time-icon {
					margin-right: 4px;
				}
			}
		}

		.activity-btn {
			background-color: #01a4fe;
			font-size: 14px;
			border-radius: 30px;
			padding: 0 15px;
			height: 36px;
			line-height: 36px;
		}

		.disabled-btn {
			background-color: #ccc !important;
		}
	}
}
</style>