yizhizan-h5/pages/talentSearch/resumeDetail.vue

<template>
	<view class="resume-detail" :style="{ paddingTop: (12 + statusBarHeight + 88 - 60) + 'px' }">
		<!-- 固定顶部导航栏 -->
		<view class="fixed-nav" :style="{ paddingTop: (12 + statusBarHeight) + 'px' }">
			<view class="navbar">
				<view class="navbar-content">
					<view class="navbar-left" @click="goBack">
						<u-icon name="arrow-leftward" size="38" color="#333"></u-icon>
					</view>
					<view class="navbar-title">简历详情</view>
					<view class="navbar-right"></view>
				</view>
			</view>
		</view>

		<!-- 用户信息区域 -->
		<view class="user-profile">
			<view class="profile-header">
				<view class="name-section">
					<view class="user-name">{{resumeData.name || '李世明'}}</view>
					<view class="status-tag">热门搜索</view>
				</view>
				<view class="avatar-container">
					<image :src="resumeData.avatar || '../../static/logo.png'" class="user-avatar" mode="aspectFill"></image>
					<view class="notification-badge"></view>
				</view>
			</view>
			
			<view class="current-job">
                <image src="../../static/images/aixin.svg" class="job-icon" mode="aspectFit"></image>
				<text class="job-text">{{resumeData.currentJob || '世迪贸易-亚马逊运营'}}</text>
			</view>
			
			<view class="availability">
				<text class="status-text">{{resumeData.status || '离职&随时到岗位'}}</text>
			</view>
			
			<view class="summary-info">
				<view class="summary-item">
					<text class="summary-text">{{resumeData.experience || '4年'}}</text>
				</view>
				<view class="summary-item">
					<text class="summary-text">{{resumeData.education || '本科'}}</text>
				</view>
				<view class="summary-item">
					<text class="summary-text">{{resumeData.age || '25岁'}}</text>
				</view>
			</view>
		</view>

		<!-- 内容区域 -->
		<view class="content-section">
			<!-- 个人优势 -->
			<view class="section-item">
				<view class="advantage-content">
					{{resumeData.advantage || '这是求职者的个人优势这是求职者的个人优势这是求职者的个人优势这是求职者的个人优势这是求职者的个人优势这是求职者的个人优势这是求职者的个人优。(最多展示三行)'}}
				</view>
			</view>
			
			<!-- 附件简历 -->
			<view class="attachment-section">
				<view class="attachment-btn">
					<image src="../../static/images/fujian.svg" class="attachment-icon" mode="aspectFit"></image>
					<text class="attachment-text">已上传附件简历</text>
				</view>
			</view>

            <!-- 求职期望 -->
            <view class="expectation-card">
                <view class="card-header">
                    <text class="header-title">求职期望</text>
                </view>
                
                <view class="job-expectation">
                    <text class="expectation-text">亚马逊店铺运营, 深圳</text>
                    <text class="salary-range">24-36K</text>
                </view>
			</view>

            <view class="jobRemarks-box-c-title flex align-center">
				<image src="/static/images/index/ins.png" class="title-icon"></image>
				<text>工作经历</text>
			</view>

			<!-- 工作经历 -->
			<view class="work-experience-section">
				<view class="section-header">
					<view class="section-title">
						<text class="required-mark">*</text>
						<text class="required-title">工作经历</text>
                        <view class="section-desc">请填写专属跨境行业的工作经验</view>
					</view>
					<view class="edit-icon">
						<image src="../../static/images/index/Combined-Shape.svg" style="width: 48rpx;height: 48rpx;" mode=""></image>
					</view>
				</view>
				
				<view class="experience-list">
					<view class="experience-item">
						<view class="company-logo">
							<image src="../../static/images/index/changsha.svg" class="logo-img" mode="aspectFit"></image>
						</view>
						<view class="experience-content">
							<view class="job-info-row">
								<view class="job-title">资深亚马逊运营</view>
								<view class="job-department">运营部</view>
							</view>
							<view class="company-period-row">
								<view class="company-name">深圳市世迪贸易科技有限公司</view>
								<view class="work-period">2019.02-至今</view>
							</view>
							<view class="job-description">
								负责Amazon英国、欧洲站、制定推广与销售计划,达成团队要求的销售业绩;做好数据的统计分析工作,收集、分析市场信息,竞争对手状况,并根据产品销售与排名变化,及时制定和调整产品的销售...
							</view>
							<view class="skill-tags">
								<view class="tag">精品铺货</view>
								<view class="tag">独立站</view>
								<view class="tag">3C数码</view>
								<view class="tag">品类运营</view>
							</view>
						</view>
					</view>
					
					<view class="experience-item">
						<view class="company-logo">
							<image src="../../static/images/index/changsha.svg" class="logo-img" mode="aspectFit"></image>
						</view>
						<view class="experience-content">
							<view class="job-info-row">
								<view class="job-title">高级ebay运营</view>
								<view class="job-department">运营部</view>
							</view>
							<view class="company-period-row">
								<view class="company-name">深圳市世迪贸易科技有限公司</view>
								<view class="work-period">2018.01-2019.01</view>
							</view>
							<view class="job-description">
								负责Amazon英国、欧洲站、制定推广与销售计划,达成团队要求的销售业绩;做好数据的统计分析工作,收集、分析市场信息,竞争对手状况,并根据产品销售与排名变化,及时制定和调整产品的销售....
							</view>
							<view class="skill-tags">
								<view class="tag">精品铺货</view>
								<view class="tag">独立站</view>
								<view class="tag">3C数码</view>
								<view class="tag">品类运营</view>
							</view>
						</view>
					</view>
					
					<view class="experience-item">
						<view class="company-logo">
							<image src="../../static/images/index/changsha.svg" class="logo-img" mode="aspectFit"></image>
						</view>
						<view class="experience-content">
							<view class="job-info-row">
								<view class="job-title">高级产品开发经理</view>
								<view class="job-department">产品开发部</view>
							</view>
							<view class="company-period-row">
								<view class="company-name">深圳虾皮科技有限公司</view>
								<view class="work-period">2023.04 -至今</view>
							</view>
							<view class="job-description">
								这是简历填写的内容这是简历填写的内容这是简历填写的内容这是简历填写的内容这是简历填写的内容这是简历填写的内容这是简历填写的内容这是简历填写的内容这是简历填写的内容这是简历填写的内容这是简历填写的内容这是简历填写的内容这是简历填写的内容...
							</view>
							<view class="skill-tags">
								<view class="tag">技能标签</view>
								<view class="tag">技能标签</view>
								<view class="tag">技能标签</view>
								<view class="tag">技能标签</view>
								<view class="tag">技能标签</view>
								<view class="tag">技能标签</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 教育经历 -->
			<view class="education-section">
				<view class="section-header">
					<view class="section-title">
						<text>教育经历</text>
					</view>
					<view class="edit-icon">
						<image src="../../static/images/index/Combined-Shape.svg" style="width: 48rpx;height: 48rpx;" mode=""></image>
					</view>
				</view>
				
				<view class="education-list">
					<view class="education-item">
						<view class="school-logo">
							<image src="../../static/images/index/wuhan.svg" class="logo-img" mode="aspectFit"></image>
						</view>
						<view class="education-content">
							<view class="school-name">武汉工程大学</view>
							<view class="degree-info">硕士 • 高分子化学与物理 • 2014-2017</view>
							<view class="education-description">
								这是简历填写的内容这是简历填写的内容内容这是简历填写的内是简历填写的内容这是简历填写的内容...
							</view>
						</view>
					</view>
					
					<view class="education-item">
						<view class="school-logo">
							<image src="../../static/images/index/wuhan.svg" class="logo-img" mode="aspectFit"></image>
						</view>
						<view class="education-content">
							<view class="school-name">武汉工程大学</view>
							<view class="degree-info">硕士 • 高分子化学与物理 • 2014-2017</view>
							<view class="education-description">
								这是简历填写的内容这是简历填写的内容这是简的内容这是的内容这是简历填写的内容这是简历填写的内容...
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 资格证书 -->
			<view class="certificates-section">
				<view class="section-header">
					<view class="section-title">
						<text>资格证书</text>
					</view>
				</view>
				
				<view class="certificates-grid">
					<view class="certificate-tag" v-for="cert in resumeData.certificates || defaultCertificates" :key="cert">{{cert}}</view>
				</view>
			</view>

			<!-- 专业技能 -->
			<view class="skills-section">
				<view class="section-header">
					<view class="section-title">
						<text>专业技能</text>
					</view>
				</view>
				
				<view class="skills-content">
					{{resumeData.skills || '熟练使用熟练使用熟练使用熟练使用熟练使用熟练使用熟练使用熟练使用熟练使用熟练使用熟练使用熟练使用熟练使用熟练使用熟练使用熟练使用熟练'}}
				</view>
			</view>
		</view>

		<!-- 底部操作按钮 -->
		<view class="bottom-actions">
			<view class="action-btn contact-btn" @click="contactCandidate">
				<text>立即联系</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0, // 状态栏高度
				resumeId: '',
				resumeData: {},
				defaultExpectations: [
					{
						title: '亚马逊运营总监',
						salary: '30-40K',
						type: '不限',
						location: '深圳'
					},
					{
						title: 'TikTok运营总监',
						salary: '30-40K',
						type: '精品铺货',
						location: '深圳'
					}
				],
				defaultWorkExperience: [
					{
						position: '资深亚马逊运营',
						department: '运营部',
						company: '深圳市世迪贸易科技有限公司',
						period: '2019.02-至今',
						description: '负责Amazon英国、欧洲站、制定推广与销售计划,达成团队要求的销售业绩;做好数据的统计分析工作,收集、分析市场信息,竞争对手状况,并根据产品销售与排名变化,及时制定和调整产品的销售...',
						skills: ['精品铺货', '独立站', '3C数码', '品类运营']
					}
				],
				defaultEducation: [
					{
						school: '武汉工程大学',
						degree: '硕士',
						major: '高分子化学与物理',
						period: '2014-2017',
						description: '这是简历填写的内容这是简历填写的内容内容这是简历填写的内是简历填写的内容这是简历填写的内容...'
					}
				],
				defaultSkills: ['Design & Creative', 'Wireframing UX', 'Figma', 'UI Design', 'Prototype', 'Adobe XD', 'UX Design', 'Front End'],
				defaultCertificates: ['大学英语六级', '计算机职业资格', '初级会计师', '中级会计师', '高级会计师', '注册会计师']
			}
		},
		onLoad(options) {
			// 获取状态栏高度
			let systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight || 0;
			
			if (options.resumeId) {
				this.resumeId = options.resumeId;
				this.loadResumeData();
			}
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			loadResumeData() {
				// 这里应该根据 resumeId 加载简历数据
				// 暂时使用默认数据
				console.log('加载简历数据:', this.resumeId);
			},
			contactCandidate() {
				uni.showToast({
					title: '功能开发中',
					icon: 'none'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.resume-detail {
		min-height: 100vh;
		padding-bottom: 120rpx;
		// padding-top 已改为动态计算，在模板中通过 :style 设置
	}

	.fixed-nav {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9999;
		background-color: #ffffff;
		// padding: 0 4rpx;
		// padding-top 已改为动态计算，在模板中通过 :style 设置
	}

	// 顶部导航栏
	.navbar {
		background: #fff;
		height: 88rpx;
		padding: 0 8rpx;
		// padding: 80rpx 0 40rpx 0; // 已移除，因为现在是固定导航栏
		
		.navbar-content {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			height: 60rpx;
			
			.navbar-left {
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			.navbar-title {
                color: rgba(23, 23, 37, 1);
                font-family: DM Sans;
                font-size: 38rpx;
                font-weight: 700;
                line-height: 52rpx;
                letter-spacing: 0%;
                text-align: center;
			}
			
			.navbar-right {
				width: 60rpx;
				height: 60rpx;
			}
		}
	}

	// 用户信息区域
	.user-profile {
		background: #fff;
		padding: 30rpx;
		// margin: 0 32rpx;
		
		.profile-header {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			margin-bottom: 20rpx;
			
			.name-section {
				flex: 1;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                gap: 12rpx;
				
				.user-name {
                    color: rgba(58, 57, 67, 1);
                    font-family: DM Sans;
                    font-size: 48rpx;
                    font-weight: 700;
                    line-height: 60rpx;
                    letter-spacing: 0px;
                    text-align: left;
                    margin-right: 12rpx;
				}
				
				.status-tag {
					background: rgba(252, 233, 220, 1);
					color: rgba(1, 107, 246, 1);
                    font-family: DM Sans;
					font-size: 18rpx;
					padding: 4rpx 8rpx;
					border-radius: 8rpx;
					display: inline-block;
				}
			}
			
			.avatar-container {
				position: relative;
				
				.user-avatar {
					width: 72rpx;
					height: 72rpx;
					border-radius: 50%;
				}
				
				.notification-badge {
					position: absolute;
					top: 0;
					right: 0;
					width: 20rpx;
					height: 20rpx;
					background: #FF3B30;
					border-radius: 50%;
					border: 2rpx solid #fff;
				}
			}
		}
		
		.current-job {
			display: flex;
			align-items: center;
			gap: 8rpx;
			margin-bottom: 12rpx;
			
			.job-icon {
				width: 36rpx;
				height: 36rpx;
			}
			
			.job-text {
                color: rgba(156, 164, 171, 1);
                font-family: DM Sans;
                font-size: 24rpx;
                font-weight: 400;
                line-height: 40rpx;
                letter-spacing: 0.5%;
                text-align: left;
			}
		}
		
		.availability {
			display: flex;
			align-items: center;
			gap: 8rpx;
			margin-bottom: 12rpx;
			
			.status-text {
                color: rgba(156, 164, 171, 1);
                font-family: DM Sans;
                font-size: 24rpx;
                font-weight: 400;
                line-height: 32rpx;
                letter-spacing: 0%;
                text-align: left;
			}
		}
		
		.summary-info {
			display: flex;
			gap: 12rpx;
			margin-right: 12rpx;
			
			.summary-item {
				.summary-text {
					color: rgba(153, 153, 153, 1);
					font-family: DM Sans;
					font-size: 20rpx;
					font-weight: 400;
					line-height: 20rpx;
					letter-spacing: -0.5px;
					text-align: left;
					padding: 12rpx;
					border-radius: 8rpx;
					background: rgba(198, 198, 198, 0.1);
				}
			}
		}
	}

	// 内容区域
	.content-section {
		padding: 0 30rpx 30rpx 30rpx;
		
		.section-item {
			background: #fff;
			border-radius: 12rpx;
			padding: 30rpx 0;
			margin-bottom: 20rpx;
            box-sizing: border-box;
			
			.advantage-content {
                color: rgba(97, 110, 124, 1);
                font-family: DM Sans;
                font-size: 26rpx;
                font-weight: 400;
                line-height: 32rpx;
                letter-spacing: 0px;
                text-align: left;
			}
		}
		
		.attachment-section {
			margin-bottom: 20rpx;
			
			.attachment-btn {
				background: rgba(246, 246, 246, 1);
				border-radius: 8rpx;
				padding: 20rpx;
				display: flex;
				align-items: center;
				gap: 12rpx;
				
				.attachment-icon {
					width: 32rpx;
					height: 32rpx;
				}
				
				.attachment-text {
                    color: rgba(1, 107, 246, 1);
                    font-family: DM Sans;
                    font-size: 24rpx;
                    font-weight: 400;
                    line-height: 32rpx;
                    letter-spacing: 0px;
                    text-align: left;
				}
			}
		}
		
		// 求职期望卡片样式
		.expectation-card {
			background: #ffffff;
			border-radius: 12rpx;
			padding: 30rpx 0;
			margin-bottom: 20rpx;
			box-sizing: border-box;
			
			.card-header {
				margin-bottom: 20rpx;
				
				.header-title {
                    color: rgba(34, 37, 42, 1);
                    font-family: DM Sans;
                    font-size: 32rpx;
                    font-weight: 400;
                    line-height: 48rpx;
                    letter-spacing: 0px;
                    text-align: left;
				}
			}
			
			.job-expectation {
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.expectation-text {
                    color: rgba(153, 153, 153, 1);
                    font-family: DM Sans;
                    font-size: 24rpx;
                    font-weight: 500;
                    line-height: 48rpx;
                    letter-spacing: 0.5%;
                    text-align: left;
				}
				
				.salary-range {
                    color: rgba(1, 107, 246, 1);
                    font-family: DM Sans;
                    font-size: 32rpx;
                    font-weight: 700;
                    line-height: 40rpx;
                    letter-spacing: 0.5%;
                    text-align: right;
				}
			}
		}
		
		// 工作经历部分样式
		.work-experience-section {
			background: #fff;
			border-radius: 12px;
			padding: 30rpx;
			margin-bottom: 20rpx;
			box-sizing: border-box;
			border: 1px solid rgba(1, 107, 246, 1);
			
			.section-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 30rpx;
				
				.section-title {

					display: flex;
					align-items: center;
					
					.required-mark {
						color: #FF3B30;
						font-size: 18px;
						font-weight: 600;
						margin-right: 8rpx;
					}

                    .required-title {
                        font-family: DM Sans;
                        font-size: 28rpx;
                        font-weight: 700;
                        line-height: 52rpx;
                        letter-spacing: 0%;
                        text-align: left;
                        margin-right: 12rpx;
                    }
					
					text {
						color: rgba(23, 23, 37, 1);
						font-family: Inter;
						font-size: 20px;
						font-weight: 600;
						line-height: 24px;
					}
				}
				
				.section-desc {
                    color: rgba(1, 107, 246, 1);
                    font-family: DM Sans;
                    font-size: 20rpx;
                    font-weight: 400;
                    line-height: 44rpx;
                    letter-spacing: 0%;
                    text-align: left;
				}
			}
			
			.experience-list {
				.experience-item {
					display: flex;
					padding: 24rpx 0;
					border-bottom: 1rpx solid #F0F0F0;
					
					&:last-child {
						border-bottom: none;
					}
					
					.company-logo {
						width: 90rpx;
						height: 90rpx;
						margin-right: 24rpx;
						flex-shrink: 0;
                        border-radius: 8px;
                        background: rgba(246, 246, 246, 1);
						
						.logo-img {
							width: 100%;
							height: 100%;
							border-radius: 8rpx;
						}
					}
					
					.experience-content {
						flex: 1;
						
						.job-info-row {
							display: flex;
							align-items: center;
							margin-bottom: 4rpx;
						}
						
						.job-title {
                            color: rgba(23, 23, 37, 1);
                            font-family: DM Sans;
                            font-size: 28rpx;
                            font-weight: 400;
                            line-height: 44rpx;
                            letter-spacing: 0%;
                            text-align: left;
                            margin-right: 12rpx;
						}
						
						.job-department {
                            color: rgba(120, 130, 138, 1);
                            font-family: DM Sans;
                            font-size: 20rpx;
                            font-weight: 400;
                            line-height: 44rpx;
                            letter-spacing: 0%;
                            text-align: left;
						}
						
						.company-period-row {
							display: flex;
							align-items: center;
							justify-content: flex-start;
							margin-bottom: 12rpx;
                            gap: 12rpx;
							padding: 12rpx 0;
						}
						
						.company-name {
							color: rgba(120, 130, 138, 1);
							font-family: DM Sans;
							font-size: 20rpx;
							font-weight: 400;
							line-height: 10px;
							letter-spacing: 0.5%;
							text-align: left;
						}
						
						.work-period {
							color: rgba(120, 130, 138, 1);
							font-family: DM Sans;
							font-size: 20rpx;
							font-weight: 400;
							line-height: 10px;
							letter-spacing: 0.5%;
							text-align: left;
						}
						
						.job-description {
                            color: rgba(120, 130, 138, 1);
                            font-family: DM Sans;
                            font-size: 16rpx;
                            font-weight: 400;
                            line-height: 24rpx;
                            letter-spacing: 0%;
                            text-align: left;
						}
						
						.skill-tags {
							display: flex;
							flex-wrap: wrap;
							gap: 8rpx;
                            margin-top: 12rpx;
							
							.tag {
								background: rgba(153, 153, 153, 0.1);
								border-radius: 12rpx;
								padding: 6rpx;
                                color: rgba(102, 102, 102, 1);
                                font-family: DM Sans;
                                font-size: 16rpx;
                                font-weight: 400;
                                letter-spacing: 0%;
                                text-align: left;
							}
						}
					}
				}
			}
		}
		
		// 教育经历部分样式
		.education-section {
			background: #fff;
			border-radius: 12px;
			padding: 30rpx;
			margin-bottom: 20rpx;
			box-sizing: border-box;
			border: 1px solid rgba(227, 231, 236, 1);
			
			.section-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 30rpx;
				
				.section-title {
					text {
						color: rgba(23, 23, 37, 1);
						font-family: Inter;
						font-size: 20px;
						font-weight: 600;
						line-height: 24px;
					}
				}
			}
			
			.education-list {
				.education-item {
					display: flex;
					padding: 24rpx 0;
					border-bottom: 1rpx solid #F0F0F0;
					
					&:last-child {
						border-bottom: none;
					}
					
					.school-logo {
						width: 90rpx;
						height: 90rpx;
						margin-right: 24rpx;
						flex-shrink: 0;
						border-radius: 8px;
						background: rgba(246, 246, 246, 1);
						
						.logo-img {
							width: 100%;
							height: 100%;
							border-radius: 8rpx;
						}
					}
					
					.education-content {
						flex: 1;
						
						.school-name {
                            color: rgba(23, 23, 37, 1);
                            font-family: DM Sans;
                            font-size: 18px;
                            font-weight: 400;
                            line-height: 22px;
                            letter-spacing: 0%;
                            text-align: left;
						}
						
						.degree-info {
                            color: rgba(120, 130, 138, 1);
                            font-family: DM Sans;
                            font-size: 20rpx;
                            font-weight: 500;
                            line-height: 24px;
                            letter-spacing: 0%;
                            text-align: left;
							padding: 12rpx 0;
						}
						
						.education-description {
                            color: rgba(120, 130, 138, 1);
                            font-family: DM Sans;
                            font-size: 20rpx;
                            font-weight: 400;
                            line-height: 16px;
                            letter-spacing: 0%;
                            text-align: left;
						}
					}
				}
			}
		}
		
		// 资格证书部分样式
		.certificates-section {
			background: #fff;
			border-radius: 12px;
			padding: 30rpx 0;
			margin-bottom: 20rpx;
			box-sizing: border-box;
			
			.section-header {
				margin-bottom: 30rpx;
				
				.section-title {
					text {
                        color: rgba(34, 37, 42, 1);
                        font-family: DM Sans;
                        font-size: 32rpx;
                        font-weight: 400;
                        line-height: 48rpx;
                        letter-spacing: 0px;
                        text-align: left;
					}
				}
			}
			
			.certificates-grid {
				display: flex;
				flex-wrap: wrap;
				gap: 12rpx;
				
				.certificate-tag {
                    padding: 8rpx 16rpx;
                    color: rgba(1, 107, 246, 1);
                    font-family: DM Sans;
                    font-size: 16rpx;
                    font-weight: 400;
                    line-height: 20rpx;
                    letter-spacing: -0.5px;
                    text-align: left;
                    border-radius: 8rpx;
                    background: rgba(252, 233, 220, 1);
				}
			}
		}

		// 专业技能部分样式
		.skills-section {
			background: #fff;
			border-radius: 12px;
			padding: 30rpx 0; 
			margin-bottom: 20rpx;
			box-sizing: border-box;
			
			.section-header {
				margin-bottom: 30rpx;
				
				.section-title {
					text {
                        color: rgba(34, 37, 42, 1);
                        font-family: DM Sans;
                        font-size: 32rpx;
                        font-weight: 400;
                        line-height: 48rpx;
                        letter-spacing: 0px;
                        text-align: left;
					}
				}
			}
			
			.skills-content {
                color: rgba(97, 110, 124, 1);
                font-family: DM Sans;
                font-size: 24rpx;
                font-weight: 400;
                line-height: 32rpx;
                letter-spacing: 0px;
                text-align: left;
			}
		}
		
		// 工作经历标题样式
		.jobRemarks-box-c-title {
			color: rgba(1, 107, 246, 1);
			font-size: 32rpx;
			padding: 8px 12px;
			border-radius: 36px;
			font-weight: 500;
			background: rgba(246, 246, 246, 1);
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			
			.title-icon {
				width: 32rpx;
				height: 32rpx;
				margin-right: 12rpx;
			}
			
			text {
				color: rgba(1, 107, 246, 1);
				font-family: DM Sans;
				font-size: 32rpx;
				font-weight: 500;
				line-height: 48rpx;
				letter-spacing: 0px;
				text-align: left;
			}
		}
	}

	// 底部操作按钮
	.bottom-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		padding: 30rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.1);
		
		.action-btn {
			width: 100%;
			height: 88rpx;
			border-radius: 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			font-weight: 500;
		}
		
		.contact-btn {
			background: linear-gradient(90deg, rgba(13, 39, 247, 1), rgba(19, 193, 234, 1) 100%);
			color: #fff;
		}
	}
</style>