SxsnWechat/components/pages/archivesBox/index.vue

<template>
	<view class="cpage">
		<div class="top adf">
			<div class="top-left">
				<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/28/19ca20d9-9131-4234-9a1f-daf364ff63b4.png"></image>
			</div>
			<div class="top-right">
				<p>{{'感恩有你 温暖前行'}}</p>
				<div class="tip adf">
					<div class="tip-left adfac">
						<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/11/201a4250-24a4-412d-9ec9-fc58071d10ea.png"></image>
						<text>活动时间：</text>
					</div>
					<div class="tip-right">{{"2025-06-01 ～ 2025-06-01"}}</div>
				</div>
				<div class="tip adf">
					<div class="tip-left adfac">
						<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/11/e9025f86-a59e-4f82-92f0-9d22e846193c.png"></image>
						<text>活动地点：</text>
					</div>
					<div class="tip-right">{{"广东省深圳市南山区"}}</div>
				</div>
			</div>
		</div>
		<div class="bottom adfacjb">
			<div class="bottom-left">限{{46}}人报名参加</div>
			<div class="bottom-right" @tap="toDetail">查看档案</div>
		</div>
	</view>
</template>

<script setup name="ArchivesBox">
	import { ref } from 'vue'
	
	const toDetail = () => {
		uni.navigateTo({
			url:'/pagesMy/archivesDetail'
		})
	}
</script>

<style scoped lang="scss">
	.cpage{
		background-color: #FFFFFF;
		background-image: url('https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/24/b72c473b-300d-4bef-966d-8dc67ba17a4c.png');
		background-repeat: no-repeat;
		background-size: 283rpx 286rpx;
		background-position: top right;
		border-radius: 24rpx;
		margin-top: 20rpx;
		padding: 36rpx 24rpx 32rpx 20rpx;
		
		.top{
			&-left{
				width: 158rpx;
				height: 214rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			&-right{
				width: calc(100% - 158rpx);
				padding-left: 20rpx;
				box-sizing: border-box;
				&>p{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #151B29;
					line-height: 40rpx;
					margin-bottom: 5rpx;
				}
				.tip{
					margin-top: 25rpx;
					&-left{
						width: 160rpx;
						image{
							width: 24rpx;
							height: 24rpx;
						}
						text{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #676775;
							line-height: 24rpx;
							margin-left: 10rpx;
						}
					}
					&-right{
						width: calc(100% - 160rpx);
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #676775;
						line-height: 24rpx;
						margin-left: 10rpx;
					}
				}
			}
		}
	
		.bottom{
			margin-top: 24rpx;
			&-left{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #676775;
				line-height: 24rpx;
			}
			&-right{
				background: #B7F358;
				border-radius: 27rpx;
				padding: 12rpx 30rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 24rpx;
				color: #151B29;
				line-height: 30rpx;
				letter-spacing: 2rpx;
			}
		}
	}
</style>