公益活动详情静态页完成

pages.json

@@ -36,6 +36,17 @@
 					}
 				}
 			]
+		},
+		{
+			"root": "pagesNonprofit",
+			"pages": [
+				{
+					"path": "nonprofitDetail",
+					"style": {
+						"navigationStyle": "custom"
+					}
+				}
+			]
 		}
 	],
 	"globalStyle": {

pages/nonprofit.vue

@@ -11,7 +11,7 @@
 		<div class="list">
 			<up-list @scrolltolower="scrolltolower" style="height: 100%;">
 				<up-list-item v-for="(item, index) in list" :key="index">
-					<NonprofitItem></NonprofitItem>
+					<NonprofitItem @tap="toDetail(item)"></NonprofitItem>
 				</up-list-item>
 			</up-list>
 		</div>
@@ -35,6 +35,12 @@
 	const changeTab = index => {
 		tidx.value = index;
 	}
+	
+	const toDetail = item => {
+		uni.navigateTo({
+			url:'/pagesNonprofit/nonprofitDetail'
+		})
+	}
 </script>
 
 <style scoped lang="scss">

pagesNonprofit/nonprofitDetail.vue

@@ -0,0 +1,325 @@
+<template>
+	<view class="common_page" :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="top">
+			<div class="top-status adfacjb">
+				<div class="left">{{'已报名'}}</div>
+				<div class="right"><span>{{200}}</span>爱心值</div>
+			</div>
+			<div class="top-no">善行少年编号：{{'Pinan202501'}}</div>
+		</div>
+		<div class="box box1 adf" style="margin-top: 30rpx;">
+			<div class="box1-left">
+				<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/23/b3a3b866-e31c-4c33-bbce-a61f8689354c.png"></image>
+			</div>
+			<div class="box1-right">
+				<div class="title">{{'环保知识知多少？让孩子成为大自然的守护者！'}}</div>
+				<div class="memo">{{'每200爱心值守护一条河流，让河流恢复往日的清澈模样'}}</div>
+			</div>
+		</div>
+		<div class="box box2">
+			<div class="box-title">活动信息</div>
+			<div class="box2-item adfacjb">
+				<div class="left">报名时间</div>
+				<div class="right">{{'2025-06-01 ～ 2025-06-02'}}</div>
+			</div>
+			<div class="box2-item adfacjb">
+				<div class="left">活动时间</div>
+				<div class="right">{{'2025-06-01 ～ 2025-06-02'}}</div>
+			</div>
+			<div class="box2-item adfacjb">
+				<div class="left">活动地点</div>
+				<div class="right">{{'广东省深圳市'}}</div>
+			</div>
+			<div class="box2-item adfacjb">
+				<div class="left">招募人数</div>
+				<div class="right">{{40}}/{{50}}</div>
+			</div>
+			<div class="box2-item adfacjb">
+				<div class="left">联系人</div>
+				<div class="right">{{'周小瑾'}}/{{'13111987666'}}</div>
+			</div>
+			<div class="box2-item adfacjb">
+				<div class="left">公益支持</div>
+				<div class="right">{{'深圳慈善会公益基金'}}</div>
+			</div>
+		</div>
+		<div class="box box3">
+			<div class="box-title">报名信息</div>
+			<div class="box3-list">
+				<div class="box3-list-item adfacjb" v-for="(user,index) in userList" :key="index">
+					<div class="left">
+						<div class="top adfac">
+							<div class="name">{{'张琳琳'}}</div>
+							<image class="sex" v-if="user.sex==2" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/12/b6d1fcb3-55ba-4104-b8cd-756b963a4da8.png"></image>
+							<image class="sex" v-else-if="user.sex==1" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/12/a1899fd0-c468-48d9-b554-2f17b75a4157.png"></image>
+							<div class="age" :class="{'women':user.sex==2,'man':user.sex==1}">{{46}}岁</div>
+						</div>
+						<div class="bottom">身份证 {{'340123**********09'}}</div>
+					</div>
+					<div class="right">
+						<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/23/ebdf1327-3eeb-4797-8840-cb1ec4840d9a.png"></image>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="box box4">
+			<div class="box-title">活动详情</div>
+			<div class="box4-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 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>
+	</view>
+</template>
+
+<script setup name="">
+	import { onShareAppMessage } from '@dcloudio/uni-app';
+	import CusHeader from '@/components/CusHeader/index.vue'
+	import { ref } from 'vue'
+	
+	const userList = ref([{sex:2},{sex:1}])
+	const detail = ref(`山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。  
+	苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。  
+	无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？<br>山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。  
+	苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。  
+	无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`)
+
+	const handleShare = () => {
+	  uni.showToast({
+		title: '请点击右上角进行分享',
+		icon: 'none'
+	  });
+	};
+	
+	onShareAppMessage(() => {
+	  return {
+	    title: '公益活动详情',
+	    path: '/pagesNonprofit/detail'
+	  };
+	});
+</script>
+
+<style scoped lang="scss">
+	.common_page{
+		padding-bottom: 211rpx;
+		box-sizing: border-box;
+		
+		.top{
+			position: relative;
+			margin-top: 39rpx;
+			&-status{
+				.left{
+					font-family: PingFang-SC, PingFang-SC;
+					font-weight: bold;
+					font-size: 40rpx;
+					color: #252525;
+					line-height: 48rpx;
+				}
+				.right{
+					font-family: PingFangSC, PingFang SC;
+					font-weight: 400;
+					font-size: 24rpx;
+					color: #676775;
+					line-height: 24rpx;	
+					label{
+						font-family: PingFang-SC, PingFang-SC;
+						font-weight: bold;
+						font-size: 40rpx;
+						color: #252525;
+						line-height: 48rpx;
+						margin-right: 6rpx;
+					}
+				}
+			}
+			&-no{
+				font-family: PingFangSC, PingFang SC;
+				font-weight: 400;
+				font-size: 28rpx;
+				color: #676775;
+				line-height: 28rpx;
+				margin-top: 30rpx;
+			}
+		}
+	
+		.box{
+			background: #FFFFFF;
+			border-radius: 24rpx;
+			padding: 36rpx 24rpx;
+			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{
+			&-left{
+				width: 158rpx;
+				height: 214rpx;
+				image{
+					width: 100%;
+					height: 100%;
+				}
+			}
+			&-right{
+				width: calc(100% - 158rpx);
+				padding-left: 20rpx;
+				box-sizing: border-box;
+				.title{
+					font-family: PingFang-SC, PingFang-SC;
+					font-weight: bold;
+					font-size: 32rpx;
+					color: #151B29;
+					line-height: 40rpx;
+				}
+				.memo{
+					font-family: PingFangSC, PingFang SC;
+					font-weight: 400;
+					font-size: 24rpx;
+					color: #C9A771;
+					line-height: 37rpx;
+					margin-top: 27rpx;
+				}
+			}
+		}
+	
+		.box2{
+			&-item{
+				margin-top: 40rpx;
+				.left{
+					font-family: PingFangSC, PingFang SC;
+					font-weight: 400;
+					font-size: 28rpx;
+					color: #676775;
+					line-height: 28rpx;
+				}
+				.right{
+					font-family: PingFangSC, PingFang SC;
+					font-weight: 400;
+					font-size: 28rpx;
+					color: #252525;
+					line-height: 28rpx;
+					text-align: right;
+				}
+			}
+		}
+	
+		.box3{
+			&-list{
+				margin-top: 15rpx;
+				&-item{
+					margin-top: 25rpx;
+					.left{
+						.top{
+							.name{
+								font-family: PingFang-SC, PingFang-SC;
+								font-weight: bold;
+								font-size: 32rpx;
+								color: #151B29;
+								line-height: 32rpx;
+							}
+							.sex{
+								width: 44rpx;
+								height: 32rpx;
+								margin-left: 10rpx;
+							}
+							.age{
+								border-radius: 13rpx;
+								font-family: PingFangSC, PingFang SC;
+								font-weight: 400;
+								font-size: 20rpx;
+								line-height: 24rpx;
+								padding: 4rpx 10rpx;
+								margin-left: 13rpx;
+								&.women{
+									background: rgba(244,101,122,0.14);
+									color: #F4657A;
+								}
+								&.man{
+									background: rgba(5,169,254,0.12);
+									color: #05A9FE;
+								}
+							}
+						}
+						.bottom{
+							font-family: PingFangSC, PingFang SC;
+							font-weight: 400;
+							font-size: 24rpx;
+							color: #989998;
+							line-height: 24rpx;
+							margin-top: 24rpx;
+						}
+					}
+					.right{
+						image{
+							width: 36rpx;
+							height: 36rpx;
+						}
+					}
+				}
+			}
+		}
+	
+		.box4{
+			&-detail{
+				margin-top: 40rpx;
+			}
+		}
+	
+		.bottom{
+			width: 100%;
+			height: 191rpx;
+			background: #FFFFFF;
+			box-shadow: 0rpx -2rpx 8rpx 0rpx rgba(178,178,178,0.1);
+			padding: 0 30rpx 0 54rpx;
+			box-sizing: border-box;
+			position: fixed;
+			left: 0;
+			bottom: 0;
+			.left{
+				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>