SxsnWechat/components/pages/practiceBox/index.vue

<template>
	<view class="ni">
		<div class="ni-top adfacjb">
			<div class="ni-top-left adfac">
				<image class="avatar" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/12/4bd05666-201c-4016-acb6-09cd1f554524.png"></image>
				<div class="name">{{'张琳琳'}}</div>
				<image class="sex" v-if="sex==2" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/12/b6d1fcb3-55ba-4104-b8cd-756b963a4da8.png"></image>
				<image class="sex" v-else-if="sex==1" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/12/a1899fd0-c468-48d9-b554-2f17b75a4157.png"></image>
				<div class="age" :class="{'women':sex==2,'man':sex==1}">{{46}}岁</div>
			</div>
			<div class="ni-top-right">
				<!-- 	<image v-if="agree" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/12/87b5b244-d14f-43cd-991b-4ac9f48d909e.png" @tap="changeAgree"></image> -->
					<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/12/b8a5cabd-57f8-4ad7-9677-f6372423c50a.png"></image>
			</div>
		</div>
		<div class="ni-info adf">
			<div class="ni-info-left">
				<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/11/d3c53597-a848-4a33-8deb-ab256f028baa.png"></image>
			</div>
			<div class="ni-info-right">
				<div class="title">{{'中国少年先锋队诞辰日'}}</div>
				<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-02"}}</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>
	</view>
</template>

<script setup name="PracticeBox">
	import { ref } from 'vue'
	
	const props = defineProps({
		sex:{
			typeof:Number,
			default:1
		}
	})
</script>

<style scoped lang="scss">
	.ni{
		background: linear-gradient(45deg, #FFFFFF 60%, #F2FFE8 100%);
		border-radius: 24rpx;
		padding: 40rpx 24rpx 32rpx;
		margin-top: 20rpx;
		
		&-top{
			&-left{
				.avatar{
					width: 48rpx;
					height: 48rpx;
				}
				.name{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #151B29;
					line-height: 32rpx;
					margin-left: 16rpx;
				}
				.sex{
					width: 44rpx;
					height: 32rpx;
					margin-left: 10rpx;
				}
				.age{
					border-radius: 13rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 20rpx;
					line-height: 24rpx;
					padding: 4rpx 10rpx;
					margin-left: 13rpx;
					&.women{
						background: rgba(244,101,122,0.14);
						color: #F4657A;
					}
					&.man{
						background: rgba(5,169,254,0.12);
						color: #05A9FE;
					}
				}
			}
			&-right{
				width: 37rpx;
				height: 37rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
		
		&-info{
			margin-top: 40rpx;
			&-left{
				width: 158rpx;
				height: 214rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			&-right{
				width: calc(100% - 158rpx);
				padding-left: 20rpx;
				box-sizing: border-box;
				.title{
					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: 30rpx;
					display: flex;
					justify-content: flex-end;
				}
				.btn{
					background: #B7F358;
					border-radius: 27rpx;
					padding: 12rpx 26rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 24rpx;
					color: #252525;
					line-height: 30rpx;
				}
			}
		}
	}
</style>