SxsnWechat/pagesHome/activityDetail.vue

<template>
	<view class="common_page adffc" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title="公益活动详情" bgColor="transparent"></cus-header>
		<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/19/54b75bc8-d926-449b-95a5-1126f700b481.png" class="top_bg_img" mode="widthFix"></image>
		<div class="lunbo">
			<up-swiper
				:list="imgList"
				@change="e => current = e.current"
				:autoplay="false"
				height="440rpx"
			>
				<template #indicator>
					<view class="indicator adf">
						<view class="indicator__dot" v-for="(item, index) in imgList" :key="index"
							:class="[index === current && 'indicator__dot--active']">
						</view>
					</view>
				</template>
			</up-swiper>
		</div>
		<div class="box box1">
			<div class="box1-top">
				<text class="box1-top-status">{{'进行中'}}</text>
				<text class="box1-top-title">{{'《环保知识知多少》让孩子成为大自然的守护者！'}}</text>
			</div>
			<div class="box1-line" style="margin-top: 36rpx;"></div>
			<div class="box1-place adfacjb">
				<div class="box1-place-left adffcjb">
					<text>活动地点</text>
					<div class="addr">{{'深圳市南山区南山街道丰潭路'}}</div>
				</div>
				<div class="box1-place-right">
					<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/239a8c29-499b-407b-a9b5-90447248d9ab.png"></image>
				</div>
			</div>
			<div class="box1-line" style="margin-top: 24rpx;"></div>
			<div class="box1-member adfacjb">
				<div class="box1-member-left adffc">
					<text>招募人数</text>
					<div class="num"><text>{{35}}</text> /{{50}}</div>
				</div>
				<div class="box1-member-right adffc">
					<div class="review adfac">
						<text>查看报名人员</text>
						<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/b7b7531b-33fa-4ec3-841b-796be9035191.png"></image>
					</div>
					<div class="avatars">
						<up-avatar-group :urls="avatars" size="30" gap="0.4" :maxCount="3"></up-avatar-group>
					</div>
				</div>
			</div>
			<div class="box1-line" style="margin-top: 33rpx;"></div>
			<div class="box1-time adffc">
				<text>活动时间</text>
				<div class="text">{{'2025年06月01日 12:00'}} - {{'2025年06月15日12:00'}}</div>
			</div>
			<div class="box1-line" style="margin-top: 30rpx;"></div>
			<div class="box1-need adffc">
				<text>报名要求</text>
				<div class="text"><text>{{200}}</text>爱心值</div>
				<div class="tip">每{{200}}爱心值守护一条河流，让河流恢复往日的清澈模样</div>
			</div>
			<div class="box1-line" style="margin-top: 30rpx;"></div>
			<div class="box1-info adfacjb">
				<div class="box1-info-pre">
					<text>年龄限制</text>
					<div class="text">{{10}}岁以上</div>
				</div>
				<div class="box1-info-pre line">
					<text>可获得义工时长</text>
					<div class="hour"><text>{{2}}</text> 小时</div>
				</div>
			</div>
			<div class="box1-line" style="margin-top: 30rpx;"></div>
			<div class="box1-info adfacjb">
				<div class="box1-info-pre">
					<text>联系人</text>
					<div class="text">{{'周小瑾'}}/{{'13111987668'}}</div>
				</div>
				<div class="box1-info-pre line">
					<text>公益合作</text>
					<div class="text">{{'深圳善行少年基金会'}}</div>
				</div>
			</div>
		</div>
		<div class="box box2">
			<div class="box-title">活动详情</div>
			<div class="box2-detail">
				<up-read-more :toggle="true" showHeight="374rpx" color="#989998" fontSize="24rpx" openText="收起更多信息" closeText="展开更多信息">
				    <rich-text :nodes="detail"></rich-text>
				</up-read-more>
			</div>
		</div>
		<div class="bottom">
			<div class="time">
				报名时间：{{'2025年06月01日 12:00'}} - {{'2025年06月15日12:00'}} 
			</div>
			<div class="btns adfacjb">
				<div class="left adffcacjc" @tap="handleShare">
					<up-icon name="share-square" color="#252525" size="48rpx"></up-icon>
					<text>分享</text>
				</div>
				<div class="right">立即报名</div>
			</div>
		</div>
	</view>
</template>

<script setup name="">
	import CusHeader from '@/components/CusHeader/index.vue'
	import { onShareAppMessage, onLoad } from '@dcloudio/uni-app';
	import { ref } from 'vue'
	
	const id = ref('')
	const imgList = ref(['https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/5378bfeb-32f5-4325-aaef-5270e4a55a3a.png'])
	const detail = ref(`山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？<br>山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`)
	const avatars = ref([
		'https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/565ca09a-88e2-4c2c-a89e-98bd51fbea7f.png',
		'https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/565ca09a-88e2-4c2c-a89e-98bd51fbea7f.png',
		'https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/565ca09a-88e2-4c2c-a89e-98bd51fbea7f.png',
		'https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/565ca09a-88e2-4c2c-a89e-98bd51fbea7f.png',
		'https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/565ca09a-88e2-4c2c-a89e-98bd51fbea7f.png'
	])
	
	const handleShare = () => {
	  
	};
	
	onLoad(options=>{
		id.value = options?.id;
	})
	
	onShareAppMessage(() => {
	  return {
	    title: '公益活动详情',
	    path: '/pagesHome/activityDetail?id='+id.value
	  };
	});
</script>

<style scoped lang="scss">
	.common_page{
		padding-bottom: 276rpx;
		
		.lunbo{
			width: 100%;
			height: 440rpx;
			margin-top: 20rpx;
			position: relative;
		}
		
		.box{
			background: linear-gradient(45deg,#FFFFFF 70%,#F2FFE8 100%);
			border-radius: 24rpx;
			padding: 36rpx 24rpx 30rpx;
			margin-top: 20rpx;
			position: relative;
			&-title{
				width: 170rpx;
				height: 44rpx;
				padding-left: 2rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 800;
				font-size: 36rpx;
				color: #151B29;
				line-height: 36rpx;
				background-image: url('https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/11/6ec1f999-fcbb-4a0b-a1a5-d0b5e1374bb1.png');
				background-size: 170rpx 31rpx;
				background-position: 0 20rpx;
				background-repeat: no-repeat;
			}
		}
		
		.box1{
			&-top{
				&-status{
					padding: 10rpx 20rpx;
					background: url('https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/46184afd-e7cd-4ffa-b32f-7390f7a1decc.png') no-repeat;
					background-size: 100% 100%;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 24rpx;
					color: #151B29;
					line-height: 33rpx;
				}
				&-title{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 36rpx;
					color: #151B29;
					line-height: 54rpx;
					margin-left: 10rpx;
				}
			}
			&-line{
				width: 100%;
				height: 1rpx;
				background: #E7E7E7;
			}
			&-place{
				&-left{
					width: calc(100% - 228rpx);
					text{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #989998;
						line-height: 26rpx;
					}
					.addr{
						width: 100%;
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 26rpx;
						color: #151B29;
						line-height: 26rpx;
						margin-top: 24rpx;
					}
				}
				&-right{
					width: 188rpx;
					height: 115rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
			&-member{
				margin-top: 37rpx;
				&-left{
					&>text{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #989998;
						line-height: 26rpx;
					}
					.num{
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 26rpx;
						color: #676775;
						line-height: 48rpx;
						margin-top: 25rpx;
						text{
							font-size: 36rpx;
							color: #151B29;
						}
					}
				}
				&-right{
					.review{
						text{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #989998;
							line-height: 26rpx;
						}
						image{
							width: 28rpx;
							height: 28rpx;
							margin-left: 8rpx;
						}
					}
					.avatars{
						margin-top: 27rpx;
						display: flex;
						justify-content: flex-end;
					}
				}
			}
			&-time{
				margin-top: 30rpx;
				text{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #989998;
					line-height: 26rpx;
				}
				.text{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 26rpx;
					color: #151B29;
					line-height: 26rpx;
					margin-top: 24rpx;
				}
			}
			&-need{
				margin-top: 30rpx;
				&>text{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #989998;
					line-height: 26rpx;
				}
				.text{
					margin-top: 30rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #676775;
					line-height: 26rpx;
					text{
						font-weight: bold;
						font-size: 36rpx;
						color: #151B29;
					}
				}
				.tip{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #C9A771;
					line-height: 26rpx;
					margin-top: 20rpx;
				}
			}
			&-info{
				margin-top: 30rpx;
				&-pre{
					width: 50%;
					&.line{
						border-left: 1rpx solid #E7E7E7;
						padding-left: 24rpx;
						box-sizing: border-box;
					}
					&>text{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #989998;
						line-height: 26rpx;
					}
					.text{
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 26rpx;
						color: #151B29;
						line-height: 26rpx;
						margin-top: 24rpx;
					}
					.hour{
						margin-top: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #676775;
						line-height: 26rpx;
						text{
							font-weight: bold;
							font-size: 36rpx;
							color: #151B29;
						}
					}
				}
			}
		}
		
		.box2{
			&-detail{
				margin-top: 40rpx;
			}
		}
		
		.bottom{
			width: 100%;
			height: 256rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -2rpx 8rpx 0rpx rgba(178,178,178,0.1);
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 30rpx 24rpx 0;
			box-sizing: border-box;
			.time{
				padding: 19rpx 24rpx 12rpx;
				background: #F8F8F9;
				border-radius: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #4B545C;
				line-height: 33rpx;
			}
			.btns{
				margin-top: 24rpx;
				.left{
					margin-left: 30rpx;
					text{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #151B29;
						line-height: 26rpx;
						margin-top: 17rpx;
					}
				}
				.right{
					width: 540rpx;
					height: 90rpx;
					background: #B7F358;
					border-radius: 45rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #151B29;
					line-height: 90rpx;
					text-align: center;
					letter-spacing: 2rpx;
				}
			}
		}
	}
</style>