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="img">
			<image :src="''" mode="widthFix"></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;
		
		.img{
			padding: 30rpx;
			margin-top: 20rpx;
			background: #FFFFFF;
			min-height: 800rpx;
		}
		
		.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>