SxsnWechat/pagesMy/archivesDetail.vue

<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/28/b8876bf2-6bec-4ab2-99f1-6316c9d3deff.png" class="top_bg_img" mode="widthFix"></image>
		<div class="box box1">
			<div class="content">
				<div class="card">
					<div class="avatar">
						<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/28/d3dbdf00-6fee-40ca-96d2-8b95a004d9e7.png"></image>
					</div>
					<image class="logo" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/28/59a63fde-bbd8-4419-a65a-b714790f6b0a.png"></image>
					<image class="heart" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/28/234c696f-a538-45c3-ab11-c0946305f2c2.png"></image>
					<div class="level">Lv.{{4}}</div>
					<div class="name-tip">昵称/NAME</div>
					<div class="name">{{'周晓瑾'}}</div>
					<div class="kh-tip">家庭公益口号</div>
					<div class="kh">{{'公益献爱心，真情暖人心'}}</div>
					<div class="memo">亲爱的，从{{'2025年6月1日'}}至{{'2025年7月30日'}}，您的每一分善意都让世界更温暖！</div>
					<div class="gx-tip">爱心贡献/CONTRIBUTION</div>
					<div class="num" style="margin-top: 28rpx;">捐赠爱心值<text>{{5000}}</text></div>
					<div class="num">获得义工时长<text>{{2}}</text>小时</div>
				</div>
			</div>
		</div>
		<div class="box box2">
			<image class="box-title" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/28/6cbc5700-77f4-4ae8-b4eb-28c4e7748029.png"></image>
			<div class="content">
				{{'参加这次沙漠沙沙树种植活动，我深刻体会到环保行动的意义。在炎热的沙漠中，亲手栽下一棵棵沙沙树，不仅为荒漠增添了一抹绿色，更让我感受到保护生态环境的紧迫性。团队协作让效率倍增，大家的热情也让我深受鼓舞。这次活动让我明白，小小的行动也能为地球带来改变。未来，我会继续参与环保事业，号召更多人加入，共同守护我们的家园。'}}
			</div>
		</div>
		<div class="box box2">
			<image class="box-title" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/28/56ffd9a5-b42a-4eb5-879d-b38a2c05bdae.png"></image>
			<div class="content">
				<image class="img" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/28/e1d9a1e2-d0fd-4503-bc06-8d8509efde01.png" mode="widthFix"></image>
			</div>
		</div>
		<div class="back" @tap="goBack">返回</div>
	</view>
</template>

<script setup name="">
	import CusHeader from '@/components/CusHeader/index.vue'
	import { ref } from 'vue'
	
	const goBack = () => {
		uni.navigateBack();
	}
</script>

<style scoped lang="scss">
	.common_page{
		background: #F9FEFD;
		padding-bottom: 64rpx;
		box-sizing: border-box;
		
		.box{
			background: #D9F9E9;
			border-radius: 48rpx;
			position: relative;
			margin-top: 40rpx;
			padding: 14rpx;
			
			&-title{
				width: 263rpx;
				height: 79rpx;
				position: absolute;
				top: 0;
				left: 50%;
				margin-left: -131.5rpx;
			}
			
			&.box1{
				margin-top: 30rpx;
				.content{
					border-radius: 32rpx;
					padding: 0 18rpx 18rpx;
					background-color: #EFFDF2;
					background-image: url('https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/28/64746c13-7ddc-4224-a1d4-060d126e7a71.png');
					background-repeat: no-repeat;
					background-size: 337rpx 450rpx;
					background-position: top right;
					overflow: hidden;
					border: 6rpx solid #FFFFFF;
					.card{
						position: relative;
						border-radius: 24rpx;
						padding: 63rpx 39rpx;
						box-sizing: border-box;
						margin-top: 142rpx;
						background: #FFFFFF;
						
						.avatar{
							width: 116rpx;
							height: 116rpx;
							border: 6rpx solid #FFFFFF;
							border-radius: 50%;
							position: absolute;
							left: 39rpx;
							top: -74rpx;
							image{
								width: 100%;
								height: 100%;
							}
						}
						.logo{
							width: 159rpx;
							height: 40rpx;
							position: absolute;
							top: 40rpx;
							right: 24rpx;
						}
						.name-tip{
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							font-size: 24rpx;
							color: #B2B2B2;
							line-height: 24rpx;
						}
						.name{
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							font-size: 32rpx;
							color: #252525;
							line-height: 32rpx;
							margin-top: 16rpx;
						}
						.kh-tip{
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							font-size: 24rpx;
							color: #B2B2B2;
							line-height: 24rpx;
							margin-top: 44rpx;
						}
						.kh{
							font-family: PingFang-SC, PingFang-SC;
							font-weight: 800;
							font-size: 44rpx;
							color: #70CF52;
							line-height: 44rpx;
							margin-top: 24rpx;
						}
						.memo{
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							font-size: 24rpx;
							color: #B2B2B2;
							line-height: 39rpx;
							margin-top: 64rpx;
						}
						.gx-tip{
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							font-size: 24rpx;
							color: #B2B2B2;
							line-height: 36rpx;
							margin-top: 112rpx;
						}
						.num{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #151B29;
							line-height: 36rpx;
							margin-top: 20rpx;
							text{
								font-family: AaHouDiHei;
								font-size: 26rpx;
								font-weight: bold;
								color: #70CF52;
								line-height: 36rpx;
								margin: 10rpx;
							}
						}
						.heart{
							width: 235rpx;
							height: 230rpx;
							position: absolute;
							right: 0;
							bottom: 64rpx;
						}
						.level{
							width: 250rpx;
							height: 64rpx;
							background: url('https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/28/f547998f-f2c2-4098-a908-e2b70d16d60c.png') no-repeat;
							background-repeat: no-repeat;
							background-size: 100% 100%;
							position: absolute;
							right: 0;
							bottom: 0;
							font-family: PingFang-SC, PingFang-SC;
							font-weight: 800;
							font-size: 48rpx;
							color: #FFFFFF;
							line-height: 64rpx;
							text-align: center;
						}
					}
				}
			}
		
			&.box2{
				.content{
					background: #FFFFFF;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #4E5969;
					line-height: 48rpx;
					padding: 96rpx 32rpx 46rpx;
					border-radius: 32rpx;
					img{
						width: 100%;
					}
				}
			}
		}
	
		.back{
			width: 100%;
			height: 90rpx;
			background: #B7F358;
			border-radius: 45rpx;
			margin-top: 40rpx;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #151B29;
			line-height: 90rpx;
			text-align: center;
			letter-spacing: 2rpx;
		}
	}
</style>