yizhizan-h5/pages/my/personalCenter.vue

<template>
	<view class="personal-center">
		<!-- 头部用户信息区域 -->
		<view class="header-section">
			<!-- 设置和通知图标 -->
			<view class="header-icons">
                <image src="../../static/images/index/Myset.svg" style="width: 32rpx;height: 32rpx;" mode="aspectFill"></image>
                <image src="../../static/images/index/setting.svg" style="width: 32rpx;height: 32rpx;" mode="aspectFill"></image>
			</view>
			
			<!-- 用户信息 -->
			<view class="user-info">
				<view class="avatar-container">
					<image src="../../static/logo.png" class="user-avatar" mode="aspectFill"></image>
				</view>
				<view class="user-details">
					<view class="user-name">罗维靖</view>
					<view class="resume-info">
						<text class="resume-text">在线简历</text>
						<image class="edit-icon" src="../../static/images/index/myEdit.svg"></image>
					</view>
				</view>
				<u-icon name="arrow-right" color="rgba(255, 255, 255, 1)" size="32"></u-icon>
			</view>
		</view>

		<!-- 统计数据栏 -->
		<view class="stats-bar">
			<view class="stat-item">
				<text class="stat-number">34</text>
				<text class="stat-label">沟通通过</text>
			</view>
			<view class="stat-item">
				<text class="stat-number">56</text>
				<text class="stat-label">已投简历</text>
			</view>
			<view class="stat-item">
				<text class="stat-number">666</text>
				<text class="stat-label">待面试</text>
			</view>
			<view class="stat-item">
				<text class="stat-number">6</text>
				<text class="stat-label">收藏</text>
			</view>
		</view>

		<!-- 推广横幅 -->
		<view class="promo-banner">
			<view class="banner-content">
				<view class="banner-text">
					<text class="banner-title">牛人找资金</text>
					<text class="banner-subtitle">带上你的超级项目,这里有无限的可能</text>
				</view>
				<view class="banner-button">
					<text class="button-text">立即参与</text>
				</view>
			</view>
		</view>

		<!-- 快速功能区域 -->
		<view class="quick-functions">
			<view class="function-item">
				<image src="../../static/images/index/icon_32_全屋智能.svg" class="function-icon"></image>
				<text class="function-text">在线简历</text>
			</view>
			<view class="function-item">
				<image src="../../static/images/index/icon_32_产品百科.svg" class="function-icon"></image>
				<text class="function-text">附件简历</text>
			</view>
			<view class="function-item">
				<image src="../../static/images/index/icon_32_服务中心.svg" class="function-icon"></image>
				<text class="function-text">求职意向</text>
			</view>
			<view class="function-item">
				<image src="../../static/images/index/icon_32_热门活动.svg" class="function-icon"></image>
				<text class="function-text">项目中心</text>
			</view>
		</view>

		<!-- 更多功能区域 -->
		<view class="more-functions">
			<text class="section-title">更多功能</text>
			<view class="function-grid">
				<view class="function-item">
					<image src="../../static/images/index/moreSkill1.svg" class="function-icon"></image>
					<text class="function-text">猎头服务</text>
				</view>
				<view class="function-item">
					<image src="../../static/images/index/moreSkill2.svg" class="function-icon"></image>
					<text class="function-text">精选公司</text>
				</view>
				<view class="function-item">
					<image src="../../static/images/index/moreSkill3.svg" class="function-icon"></image>
					<text class="function-text">规则中心</text>
				</view>
				<view class="function-item">
					<image src="../../static/images/index/moreSkill4.svg" class="function-icon"></image>
					<text class="function-text">联系客服</text>
				</view>
			</view>
		</view>

		<!-- 联系信息 -->
		<view class="contact-info">
			<text class="contact-text">客服电话 400-000-0100 工作时间08:00-22:00</text>
			<text class="legal-text">人力资源服务许可证 营业执照 深圳市人社局监督电话</text>
			<text class="icp-text">粤ICP备231231311231号-23A 粤ICP证12313131号</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			
		}
	},
	methods: {
		
	}
}
</script>

<style lang="scss" scoped>
.personal-center {
	min-height: 100vh;
	background: url('../../static/images/index/myBc.png') no-repeat;
	background-size: 100% 40%;
	background-position: top center;
    padding-top: 80rpx;
}

// 顶部状态栏
.status-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 40rpx;
	background-color: #fff;
	
	.time {
		color: #000;
		font-size: 32rpx;
		font-weight: 600;
	}
	
	.status-icons {
		display: flex;
		gap: 16rpx;
		
		.signal-icon, .wifi-icon, .battery-icon {
			width: 24rpx;
			height: 24rpx;
			background-color: #000;
			border-radius: 4rpx;
		}
	}
}

// 头部用户信息区域
.header-section {
	// background: linear-gradient(135deg, #007AFF 0%, #5AC8FA 100%);
	padding: 40rpx 32rpx;
	position: relative;
	
	.header-icons {
		display: flex;
		justify-content: flex-end;
		gap: 32rpx;
		margin-bottom: 40rpx;
		
		.notification-icon, .settings-icon {
			width: 48rpx;
			height: 48rpx;
			background-color: rgba(255, 255, 255, 0.2);
			border-radius: 50%;
		}
	}
	
	.user-info {
		display: flex;
		align-items: center;
		gap: 32rpx;
		
		.avatar-container {
			.user-avatar {
				width: 128rpx;
				height: 128rpx;
				border-radius: 50%;
			}
		}
		
		.user-details {
			flex: 1;
			
			.user-name {
                color: rgba(255, 255, 255, 1);
                font-family: DM Sans;
                font-size: 48rpx;
                font-weight: 400;
                line-height: 72rpx;
                letter-spacing: 0.5%;
                text-align: left;
			}
			
			.resume-info {
				display: flex;
				align-items: center;
				gap: 16rpx;
				
				.resume-text {
                    color: rgba(255, 255, 255, 1);
                    font-family: DM Sans;
                    font-size: 24rpx;
                    font-weight: 400;
                    line-height: 32rpx;
                    letter-spacing: 0%;
                    text-align: left;
				}
				
				.edit-icon {
					width: 32rpx;
					height: 32rpx;
					border-radius: 8rpx;
				}
			}
		}
		
	}
}

// 统计数据栏
.stats-bar {
	border-radius: 24rpx;
	display: flex;
	justify-content: space-around;
	
	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8rpx;
		
		.stat-number {
            color: rgba(255, 255, 255, 1);
            font-family: DM Sans;
            font-size: 36rpx;
            font-weight: 400;
            line-height: 26px;
            letter-spacing: 0%;
            text-align: center;
		}
		
		.stat-label {
            color: rgba(255, 255, 255, 1);
            font-family: DM Sans;
            font-size: 28rpx;
            font-weight: 400;
            line-height: 20px;
            letter-spacing: 0%;
            text-align: center;
		}
	}
}

// 推广横幅
.promo-banner {
	margin: 40rpx;
	background: var(--线性渐变, linear-gradient(90.00deg, rgba(13, 39, 247, 1),rgba(19, 193, 234, 1) 100%));
	border-radius: 24rpx;
	padding: 16rpx 40rpx;
	
	.banner-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.banner-text {
			flex: 1;
			
			.banner-title {
				color: rgba(255, 255, 255, 1);
				font-family: HarmonyOS Sans SC;
				font-size: 32rpx;
				font-weight: 900;
				line-height: 48rpx;
				letter-spacing: 0%;
				text-align: left;
				display: block;
				margin-bottom: 8rpx;
				transform: skew(-10deg);
			}
			
			.banner-subtitle {
				color: rgba(255, 255, 255, 0.7);
				font-family: HarmonyOS Sans SC;
				font-size: 26rpx;
				font-weight: 400;
				line-height: 36rpx;
				letter-spacing: 0%;
				text-align: left;
				display: block;
			}
		}
		
		.banner-button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 138rpx;
            height: 48rpx;
            border-radius: 26px;
            background: #FFFFFF;
			
			.button-text {
                background: var(--线性渐变, linear-gradient(90.00deg, rgba(13, 39, 247, 1),rgba(19, 193, 234, 1) 100%));
                -webkit-background-clip:text;
                -webkit-text-fill-color:transparent;
                background-clip:text;
                text-fill-color:transparent;
                font-family: HarmonyOS Sans SC;
                font-size: 26rpx;
                font-weight: 500;
                line-height: 18px;
                letter-spacing: 0%;
                text-align: left;
			}
		}
	}
}

// 快速功能区域
.quick-functions {
	margin: 0 32rpx;
	border-radius: 24rpx;
	padding: 48rpx;
	display: flex;
	justify-content: space-between;
	
	.function-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16rpx;
		
		.function-icon {
			width: 64rpx;
			height: 64rpx;
		}
		
		.function-text {
			color: rgba(56, 58, 63, 1);
			font-family: DM Sans;
			font-size: 24rpx;
			font-weight: 400;
			line-height: 18px;
			letter-spacing: 0%;
			text-align: center;
		}
	}
}

// 更多功能区域
.more-functions {
	margin: 0 32rpx;
	padding: 24rpx 48rpx 48rpx 48rpx;
	background: #fff;
	border-radius: 24rpx;
	
	.section-title {
		color: rgba(29, 33, 41, 1);
		font-family: DM Sans;
		font-size: 28rpx;
		font-weight: 500;
		line-height: 44rpx;
		letter-spacing: 0%;
		text-align: left;
	}
	
	.function-grid {
		margin-top: 24rpx;
		display: flex;
		justify-content: space-between;
		border-top: 0.5px solid rgba(238, 238, 238, 1);
		padding-top: 16rpx;
		
		.function-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 16rpx;
			
			.function-icon {
				width: 48rpx;
				height: 48rpx;
			}
			
			.function-text {
				color: #333;
				font-size: 24rpx;
				font-weight: 500;
			}
		}
	}
}

// 联系信息
.contact-info {
	margin: 0 40rpx 120rpx 40rpx;
	padding: 40rpx;
	
	.contact-text, .legal-text, .icp-text {
		display: block;
		color: rgba(153, 153, 153, 1);
		font-family: DM Sans;
		font-size: 18rpx;
		font-weight: 400;
		line-height: 1.6;
		letter-spacing: 0%;
		text-align: center;
		margin-bottom: 8rpx;
	}
}

// 底部导航栏
.bottom-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	border-top: 1rpx solid #f0f0f0;
	padding: 20rpx 0;
	display: flex;
	justify-content: space-around;
	
	.nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8rpx;
		
		.nav-icon {
			width: 48rpx;
			height: 48rpx;
			border-radius: 12rpx;
			background-color: #ccc;
			
			&.home-icon, &.urgent-icon, &.message-icon {
				background-color: #ccc;
			}
			
			&.personal-icon {
				background-color: #007AFF;
			}
		}
		
		.nav-text {
			font-size: 20rpx;
			color: #999;
			
			.active & {
				color: #007AFF;
			}
		}
		
		&.active .nav-text {
			color: #007AFF;
		}
	}
}
</style>