SxsnWechat/pagesHome/recruitsNumber.vue

<template>
	<view class="common_page adffc" :style="{'height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title="招募人数" bgColor="#FFFFFF"></cus-header>
		<div class="box num">
			<div class="num-pre">招募人数<text>{{50}}人</text></div>
			<div class="num-pre line">已报名<text>{{35}}人</text></div>
			<div class="num-pre">最少报名人数<text>{{40}}人</text></div>
		</div>
		<div class="box list" v-if="list.length">
			<div class="list-pre adfacjb" v-for="(item,index) in list" :key="index">
				<div class="list-pre-left adfac">
					<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/a56db26d-4149-4f6a-8272-2c3d4af0a6a8.png"></image>
					<text>{{'张**'}}</text>
				</div>
				<div class="list-pre-right">{{'2025-07-17 09:35:01'}}</div>
			</div>
		</div>
		<div class="empty adffcacjc" v-else>
			暂无善行少年报名<br>期待您的参与
		</div>
	</view>
</template>

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

<style scoped lang="scss">
	.common_page{
		.box{
			margin-top: 20rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
		}
		
		.num{
			padding: 6rpx 24rpx 30rpx;
			display: flex;
			flex-wrap: wrap;
			&-pre{
				width: 50%;
				margin-top: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #676775;
				line-height: 42rpx;
				&.line{
					border-left: 1rpx solid #E5E0E0;
					padding-left: 40rpx;
					box-sizing: border-box;
				}
				text{
					font-weight: bold;
					color: #176892;
					margin-left: 24rpx;
				}
			}
		}
	
		.list{
			padding: 0 24rpx;
			flex: 1;
			overflow: auto;
			&-pre{
				padding: 32rpx 0;
				box-shadow: inset 0rpx -1rpx 0rpx 0rpx #F2F2F2;
				&-left{
					image{
						width: 64rpx;
						height: 64rpx;
					}
					text{
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 30rpx;
						color: #252525;
						line-height: 42rpx;
						margin-left: 30rpx;
					}
				}
				&-right{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #676775;
					line-height: 40rpx;
					text-align: right;
				}
			}
		}
	
		.empty{
			flex: 1;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #252525;
			line-height: 42rpx;
			text-align: center;
		}
	}
</style>