SxsnWechat/pagesMy/practiceRecord.vue

<template>
	<view class="common_page adffc" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title="申领社会实践记录" bgColor="#FFFFFF"></cus-header>
		<div class="prove adffcac">
			<image class="prove-logo" mode="widthFix" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/11/20/965dc74b-fc45-4409-aa09-56877e75d2bc.png"></image>
			<image class="prove-title" mode="widthFix" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/11/20/7c341572-58b7-4afb-801f-93bf9890fa76.png"></image>
			<image class="prove-line" mode="widthFix" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/11/20/c21e680c-e83a-4f54-948c-19c49141ae99.png"></image>
			<div class="prove-no">证书编号：{{'650102000105375'}}</div>
			<div class="prove-info">
				<div class="prove-info-pre adf">
					<div class="prove-info-pre-left">
						<div class="prove-info-pre-left-text">义工服务姓名：</div>
						<div class="prove-info-pre-left-tip">Volunteer service Name</div>
					</div>
					<div class="prove-info-pre-right">{{'龙傲天'}}</div>
				</div>
				<div class="prove-info-pre adf">
					<div class="prove-info-pre-left">
						<div class="prove-info-pre-left-text space">所属学校：</div>
						<div class="prove-info-pre-left-tip">Affiliated school</div>
					</div>
					<div class="prove-info-pre-right">{{'深圳实验中学'}}</div>
				</div>
				<div class="prove-info-pre adf">
					<div class="prove-info-pre-left">
						<div class="prove-info-pre-left-text space">证件类型：</div>
						<div class="prove-info-pre-left-tip">Type of ID</div>
					</div>
					<div class="prove-info-pre-right">{{'居民身份证'}}</div>
				</div>
				<div class="prove-info-pre adf">
					<div class="prove-info-pre-left">
						<div class="prove-info-pre-left-text space">证件号码：</div>
						<div class="prove-info-pre-left-tip">IdCard No</div>
					</div>
					<div class="prove-info-pre-right">{{'342221********9876'}}</div>
				</div>
				<div class="prove-info-pre adf">
					<div class="prove-info-pre-left">
						<div class="prove-info-pre-left-text">义工服务时长：</div>
						<div class="prove-info-pre-left-tip">Volunteer service Time</div>
					</div>
					<div class="prove-info-pre-right">{{80}}小时</div>
				</div>
			</div>
			<div class="prove-memo">
				您累计参与了 <span>{{5}}</span> 场活动，捐赠了 <span>{{2000}}</span> 爱心值。向您践行志愿精神，为社会进步奉献力量致以最崇高的敬意。
			</div>
			<div class="prove-memo" style="margin-top: 30rpx;">特发此证！</div>
			<div class="prove-bottom">
				<div class="prove-bottom-pre">证明单位：善行少年服务基金会</div>
				<div class="prove-bottom-pre">发证日期：{{'2025年06月30日'}}</div>
			</div>
			<image class="prove-seal" mode="widthFix" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/11/20/8ad6323d-f6a0-4057-8063-7eec97ec93f4.png"></image>
		</div>
		<div class="list">
			<div class="list-box" v-for="(item,index) in list" :key="index">
				<div class="title">{{'感恩有你 温暖前行'}}</div>
				<div class="content adf">
					<div class="left">
						<image :src="'https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/11/d3c53597-a848-4a33-8deb-ab256f028baa.png'"></image>
					</div>
					<div class="right">
						<div class="right-pre adf">
							<div class="tip">活动时间：</div>
							<div class="text">{{'2025-06-01 15:00'}}</div>
						</div>
						<div class="right-pre adf">
							<div class="tip">爱心值贡献：</div>
							<div class="text">{{'200/每捐赠100爱心值可支持10本图书'}}</div>
						</div>
						<div class="right-pre adf">
							<div class="tip">义工时长：</div>
							<div class="text">{{'3小时'}}</div>
						</div>
						<div class="right-pre adf">
							<div class="tip">公益合作：</div>
							<div class="text">{{'深圳善行少年基金会'}}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="btn">下载</div>
	</view>
</template>

<script setup name="">
	import CusHeader from '@/components/CusHeader/index.vue'
	import { ref } from 'vue'
	
	const list = ref([1,1,1,1])
</script>

<style scoped lang="scss">
	.common_page{
		padding-bottom: 184rpx;
		
		.prove{
			margin-top: 20rpx;
			background: url('https://transcend.ringzle.com/xiaozhi-app/profile/2025/11/20/57b2f49c-beac-49e7-8840-777ec860ae59.png') no-repeat;
			background-size: 100% 100%;
			height: 945rpx;
			position: relative;
			&-logo{
				width: 133rpx;
				position: absolute;
				top: 58rpx;
				left: 72rpx;
			}
			&-title{
				width: 363rpx;
				margin-top: 101rpx;
			}
			&-line{
				width: 400rpx;
				margin-top: 7rpx;
			}
			&-seal{
				width: 131rpx;
				border-radius: 50%;
				position: absolute;
				bottom: 69rpx;
				right: 73rpx;
			}
		
			&-no{
				font-family: SourceHanSerifSC, SourceHanSerifSC;
				font-weight: bold;
				font-size: 20rpx;
				color: #9F793F;
				line-height: 20rpx;
				letter-spacing: 1px;
				margin-top: 9rpx;
			}
			
			&-info{
				margin-top: 27rpx;
				overflow: auto;
				&-pre{
					margin-top: 22rpx;
					&-left{
						width: 135rpx;
						&-text{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 17rpx;
							color: #252525;
							line-height: 17rpx;
							letter-spacing: 1px;
							&.space{
								letter-spacing: 10rpx;
							}
						}
						&-tip{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 10rpx;
							color: #252525;
							line-height: 10rpx;
							margin-top: 3rpx;
						}
					}
					&-right{
						width: 188rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 17rpx;
						color: #252525;
						line-height: 17rpx;
						padding-bottom: 8rpx;
						border-bottom: 2rpx solid #DDCEAF;
					}
				}
			}
			&-memo{
				width: 100%;
				padding: 0 80rpx;
				box-sizing: border-box;
				margin-top: 79rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #252525;
				line-height: 31rpx;
				label{
					color: #C9A771;
					margin: 0 5rpx;
				}
			}
			&-bottom{
				width: 100%;
				padding: 0 80rpx;
				box-sizing: border-box;
				margin-top: 89rpx;
				overflow: hidden;
				&-pre{
					margin-top: 16rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 17rpx;
					color: #252525;
					line-height: 20rpx;
				}
			}
		}
		
		.list{
			&-box{
				margin-top: 20rpx;
				padding: 36rpx 20rpx;
				background: #FFFFFF;
				.title{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #252525;
					line-height: 32rpx;
				}
				.content{
					margin-top: 30rpx;
					.left{
						width: 182rpx;
						height: 240rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.right{
						width: calc(100% - 182rpx);
						padding-left: 20rpx;
						box-sizing: border-box;
						&-pre{
							margin-top: 20rpx;
							&:first-child{
								margin-top: 12rpx;
							}
							.tip{
								width: 150rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #676775;
							}
							.text{
								width: calc(100% - 150rpx);
								font-family: PingFang-SC, PingFang-SC;
								font-weight: bold;
								font-size: 24rpx;
								color: #252525;
							}
						}
					}
				}
			}
		}
		
		.btn{
			width: calc(100% - 210rpx);
			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;
			position: fixed;
			left: 105rpx;
			bottom: 64rpx;
		}
	}
</style>