yizhizan-h5/pages/my/onlineResume.vue

<template>
	<view class="online-resume" :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="avatar-container">
				<image :src="detail.userEntity&&detail.userEntity.avatar?detail.userEntity.avatar:'../../static/logo.png'" class="user-avatar" mode="aspectFill"></image>
				<view class="edit-avatar-icon" @click="goToBasicInfo">
					<image src="../../static/images/index/Combined-Shape.svg" style="width: 32rpx;height: 32rpx;" mode=""></image>
				</view>
			</view>
			<view class="user-name">{{detail.userEntity&&detail.userEntity.userName||'匿名'}}</view>
			<view class="user-info">{{detail.workExpTimes}}年经验·{{detail.userEntity&&detail.userEntity.age}}岁·{{detail.degree}}·{{detail.userEntity&&detail.userEntity.sex==1?'男':'女'}}</view>
			<view class="contact-info">
				<view class="contact-item">
                    <image src="../../static/images/index/phone.svg" style="width: 24rpx;height: 24rpx;" mode=""></image>
					<text class="contact-text">{{detail.resumeList&&detail.resumeList.resumesPhone}}</text>
				</view>
				<view class="contact-item">
                    <image src="../../static/images/index/wx.svg" style="width: 24rpx;height: 24rpx;" mode=""></image>
					<text class="contact-text">{{detail.userEntity&&detail.userEntity.weChatNum}}</text>
				</view>
			</view>
			<view class="availability">
				<text class="status-text">{{detail.resumeList&&detail.resumeList.resumesStatus?statusList[detail.resumeList.resumesStatus].text:statusList[0].text}}</text>
				<view class="status-dot"></view>
			</view>
		</view>

		<!-- 内容区域 -->
		<view class="content-section">
			<!-- 跨境电商工作经验 -->
			<view class="switch-section">
				<view class="switch-left">
                    <view class="flex justify-between">
                        <view class="switch-title">是否有跨境电商工作经验</view>
                        <view class="template-text">不同简历模版</view>
                    </view>
					<view class="section-status" v-if="hasEcommerceExperience">
						是,有跨境电商工作经验
					</view>
				</view>
				<u-switch @change="setResume" v-model="hasEcommerceExperience" active-color="#007AFF" size="60"></u-switch>
			</view>

			<!-- 个人优势 -->
			<view class="section-item">
				<view class="section-header">
					<view class="section-title">个人优势</view>
					<view class="edit-icon">
						<image src="../../static/images/index/Combined-Shape.svg" style="width: 48rpx;height: 48rpx;" mode=""></image>
					</view>
				</view>
				<view class="advantage-content">
					<textarea @blur="setResume" auto-height v-model="detail.resumeList&&detail.resumeList.adv"></textarea>
				</view>
			</view>

            <!-- 全职期望卡片 -->
            <view class="expectation-card">
                <view class="card-header">
                    <view class="header-left">
                        <image src="../../static/images/index/lingdai.svg" class="header-icon" />
                        <text class="header-title">全职期望</text>
                    </view>
                    <text class="progress-text">{{detail.intentions&&detail.intentions.length}}/3</text>
                </view>
                
                <view class="job-list">
                    <view @longpress="commonDelete(item.intentionId,'intentions')" @click="addExpectation(item.intentionId)" class="job-item" v-for="(item,index) in detail.intentions">
                        <view class="job-info">
                            <view>
                                <text class="job-title">{{item.ruleClassifyName}}</text>
                                <view @click.stop="goToPreferenceSetting(item)">
                                    <view class="preference-btn">
                                    <text>设置求职偏好</text>
                                    </view>
                                    <u-icon name="arrow-right" color="rgba(29, 33, 41, 1)" size="28"></u-icon>
                                </view>
                            </view>
                            <text class="job-details">{{item.salaryRange}}・{{item.industry||'不限'}}</text>
                            <text class="job-location">{{item.citys}}</text>
                        </view>
                    </view>
                </view>
                
				<view class="add-expectation-btn" @click="addExpectation('')">
					<text>添加求职期望</text>
				</view>
			</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" @click="goToWorkExperience('')">
						<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" @click.stop="goToWorkExperience(item.workExpId)" v-for="item in detail.workExps">
						<view class="company-logo">
							<image src="../../static/images/index/changsha.svg" class="logo-img" mode="aspectFit"></image>
						</view>
						<view class="experience-content">
							<view class="experience-box" v-for="it in item.workExpDetails">
								<view class="job-info-row">
									<view class="job-title">{{it.position}}</view>
									<view class="job-department">{{it.department}}</view>
								</view>
								<view class="company-period-row">
									<view class="company-name">{{item.companyName}}</view>
									<view class="work-period">{{it.startTime}}-{{it.endTime}}</view>
								</view>
								<view class="job-description">
									{{it.workContent}}
								</view>
								<view class="skill-tags">
									<view class="tag" v-for="skill in it.skills">{{skill}}</view>
								</view>
							</view>
						</view>
						<view @click.stop="commonDelete(item.workExpId,'workExps')">
							<image src="../../static/images/index/delete.svg" class="delete-icon" />
						</view>
					</view>
				</view>
			</view>

			<!-- 教育经历 -->
			<view class="education-section">
				<view class="section-header">
					<view class="section-title">
						<text>教育经历</text>
					</view>
					<view class="edit-icon" @click="goToEducationExperience('')">
						<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" @click.stop="goToEducationExperience(item.eduId)" v-for="(item,index) in detail.eduList">
						<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">{{item.school}}</view>
							<view class="degree-info">{{item.degree}} • {{item.profession}} • {{new Date(item.startTime).getFullYear()}}-{{new Date(item.endTime).getFullYear()}}</view>
							<view class="education-description">
								{{item.detail}}
							</view>
						</view>
						<view @click.stop="commonDelete(item.eduId,'eduList')">
							<image src="../../static/images/index/delete.svg" class="delete-icon" />
						</view>
					</view>
				</view>
			</view>

			<!-- 技能 -->
			<view class="skills-section">
				<view class="section-header">
					<view class="section-title">
						<text>技能</text>
					</view>
					<view class="edit-icon" @click="goToJobSkills">
						<image src="../../static/images/index/Combined-Shape.svg" style="width: 48rpx;height: 48rpx;" mode=""></image>
					</view>
				</view>
				
				<view class="skills-grid">
					<view class="skill-tag" v-for="(skill, skillIndex) in detail.skills" :key="skillIndex">{{skill.skillName}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var intentionId=0
	export default {
		data() {
			return {
				statusBarHeight: 0, // 状态栏高度
				hasEcommerceExperience: false,
				detail:{},
				statusList: [
					{
						value: 'unemployed_available',
						text: '离职-随时到岗',
						
					},
					{
						value: 'employed_monthly',
						text: '在职-月内到岗',
						
					},
					{
						value: 'employed_considering',
						text: '在职-考虑机会',
						
					},
					{
						value: 'employed_not_considering',
						text: '在职-暂不考虑',
					}
				]
			}
		},
		onLoad() {
			// 获取状态栏高度
			let systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight || 0;
			this.getData()
			var that=this
			uni.$on('updateResume',()=>{
				console.log(2222222222222)
				that.getData()
			})
			
			// 监听技能设置更新
			uni.$on('skillsUpdated', (data) => {
				if(data.set!=1)
					return
				that.changeSkill(data.selectedTags)
			})
			uni.$on('preferenceUpdated', (data) => {
				if(data.set!=1)
					return
				that.changePreference(data.preferences)
			})
		},
		onUnload(){
			uni.$off('updateResume')
			uni.$off('preferenceUpdated')
			uni.$off('skillsUpdated')
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			getData(){
				var that=this
				this.$Request.getT("/app/userFirst/getUserResumes", {}).then((res) => {
				  if (res.code == 0) {
				     that.detail=res.data
					  that.hasEcommerceExperience=res.data.resumeList&&res.data.resumeList.ifExp?true:false
					  that.detail.degree=that.$queue.getHighestEducation(res.data.eduList)
					  
					  res.data.workExps.forEach(function(item) {
					    console.log(item.type);
					    try {
					      if (typeof item.type === 'string' && (item.type.startsWith('[') || item.type.startsWith('{'))) {
					        item.type = JSON.parse(item.type);
					      }
					    } catch (e) {
					      console.warn('item.type JSON解析失败:', item.type);
					    }
					    item.workExpDetails = [];
					    res.data.workExpList.forEach(function(it) {
					      console.log(it.skills);
					      try {
					        if (typeof it.skills === 'string' && (it.skills.startsWith('[') || it.skills.startsWith('{'))) {
					          it.skills = JSON.parse(it.skills);
					        }
					      } catch (e) {
					        console.warn('it.skills JSON解析失败:', it.skills);
					      }
					  
					      it.startTime = it.startTime.slice(0, 7);
					      if (that.$queue.isCurrentMonth(new Date(it.endTime)))
					        it.endTime = '至今';
					      else
					        it.endTime = it.endTime.slice(0, 7);
					  
					      if (it.workExpId == item.workExpId)
					        item.workExpDetails.push(it);
					    });
					  });

					  console.log('最终数据')
					  console.log(res.data.workExps);
					  that.detail.workExps=res.data.workExps
				  } else {
				    uni.showToast({
				      title: res.msg,
				      icon: "none",
				    });
				  }
				});
			},
			addExpectation(id='') {
				uni.navigateTo({
					url: '/package/jobIntention/addExpectation?id='+id
				})
			},
			goToPreferenceSetting(item) {
				intentionId=item.intentionId
				if(item.ruleClassifyId==''||item.ruleClassifyId==0)
					return this.$queue.showToast('请先选择岗位')
				uni.navigateTo({
					url: '/package/jobIntention/preferenceSetting?set=1&jobId='+item.ruleClassifyId+'&jobTitle='+item.ruleClassifyName+'&selectedPreferences='+encodeURIComponent(JSON.stringify(item.industry==''||item.industry==null?[]:item.industry.split('/')))
				})
			},
			goToJobSkills() {
				uni.navigateTo({
					url: '/package/jobIntention/jobSkills?set=1&jobTitle=我的&skill='+encodeURIComponent(JSON.stringify(this.detail.skills==null?[]:this.$queue.array_column(this.detail.skills,'skillName')))
				})
			},
			goToWorkExperience(id='') {
				// 获取业务类型数据
				const businessTypes = this.getBusinessTypes()
				console.log('传递给工作经历页面的业务类型:', businessTypes)
				console.log('当前hasEcommerceExperience状态:', this.hasEcommerceExperience)
				uni.navigateTo({
					url: `/pages/my/workExperience?id=${id}&businessTypes=${encodeURIComponent(JSON.stringify(businessTypes))}`
				})
			},
			goToEducationExperience(id='') {
				uni.navigateTo({
					url: `/pages/my/educationExperience?id=${id}`
				})
			},
			goToBasicInfo() {
				uni.navigateTo({
					url: '/package/jobIntention/basicInfo?resumesStatus='+(this.detail.resumeList&&this.detail.resumeList.resumesStatus||0)+'&birthday='+(this.detail.resumeList&&this.detail.resumeList.birthday||'')+'&ifExp='+(this.detail.resumeList&&this.detail.resumeList.ifExp||0)+'&resumesPhone='+(this.detail.resumeList&&this.detail.resumeList.resumesPhone||'')
				})
			},
			getBusinessTypes() {
				// 根据是否有跨境电商经验返回业务类型
				if (this.hasEcommerceExperience) {
					return ['0']
				} else {
					return []
				}
			},
			// 设置
			setResume() {
				let data={
					ifExp:this.hasEcommerceExperience?1:0,
					adv:this.detail.resumeList&&this.detail.resumeList.adv||'',
				}
			  uni.showLoading({ title: "提交中..." });
			  this.$Request.postJson("/app/userFirst/regist", data).then((res) => {
				  uni.hideLoading();
			    if (res.code == 0) {
			        // 实际开发中可以在这里添加跳转逻辑
			    } else {
			      uni.showToast({
			        title: res.msg,
			        icon: "none",
			      });
			    }
			  });
			},
			changeSkill(skill) {
				var skills=[]
				for(var i in skill){
					skills[i]={
					    "userId": "",
					    "skillId": "",
					    "skillName": skill[i],
					    "isuse": 1
					  }
				}
				let data={
					skills
				}
			  var that=this
			  this.$Request.postJson("/app/userFirst/updateSkill", skills).then((res) => {
			    if (res.code == 0) {
			        // 实际开发中可以在这里添加跳转逻辑
					that.getData()
			    } else {
			      uni.showToast({
			        title: res.msg,
			        icon: "none",
			      });
			    }
			  });
			},
			changePreference(preference) {
				if(intentionId==0)
					return;
				var industry=preference==''||preference==null?'':preference.join('/')
				let data={
					intentionId,
					industry
				}
			  var that=this
			  this.$Request.postJson("/app/intention/saveUpdate", data).then((res) => {
			    if (res.code == 0) {
			        // 实际开发中可以在这里添加跳转逻辑
					that.getData()
			    } else {
			      uni.showToast({
			        title: res.msg,
			        icon: "none",
			      });
			    }
			  });
			},
			commonDelete(id,modules) {
				  var that=this
				  var action='userFirst/deleteEdu'
				  var params={eduId:id}
				  if(modules=='workExps'){
					action='userFirst/deleteWorkExp'
					params={workExpId:id}
				  }
				  if(modules=='intentions'){
				  	action='intention/deleteIntention'
				  	params={intentionId:id}
				  }
				  this.$queue.appConfirm('确认删除该条内容么？',function(res){
					  if(!res)
						return;
					that.$Request.postJson("/app/"+action, params).then((res) => {
					  if (res.code == 0) {
					    // 实际开发中可以在这里添加跳转逻辑
						var info = that.detail[modules].filter(function (item) {
						  return item[modules=='workExps'?'workExpId':(modules=='intentions'?'intentionId':'eduId')] != id;
						});
						that.detail[modules]=info
					  } else {
					    uni.showToast({
					      title: res.msg,
					      icon: "none",
					    });
					  }
					});
				  })
				  
			},
		},
		watch: {
			hasEcommerceExperience(newVal, oldVal) {
				console.log('hasEcommerceExperience 变化:', oldVal, '->', newVal)
				// 只有有效的布尔值才保存到缓存
			}
		}
	}
</script>

<style lang="scss" scoped>
	.delete-icon{
		width: 40rpx;
		height: 40rpx;
	}
	.online-resume {
		// background-color: #F2F6FC;
		min-height: 100vh;
		// padding-top 已改为动态计算，在模板中通过 :style 设置
	}

	.fixed-nav {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9999;
		background-color: #ffffff;
		padding: 0 32rpx;
		// 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: 36rpx;
                font-weight: 700;
                line-height: 52rpx;
                letter-spacing: 0%;
                text-align: center;
			}
			
			.navbar-right {
				width: 60rpx;
				height: 60rpx;
			}
		}
	}

	// 用户信息区域
	.user-profile {
		background: #fff;
		padding: 60rpx 30rpx 40rpx;
		text-align: center;
        border-bottom: 2px solid rgba(227, 231, 236, 1);
		
		.avatar-container {
			position: relative;
			display: inline-block;
			margin-bottom: 30rpx;
			
			.user-avatar {
				width: 180rpx;
				height: 180rpx;
				border-radius: 50%;
			}
			
			.edit-avatar-icon {
				position: absolute;
				bottom: 10rpx;
				right: 10rpx;
				width: 48rpx;
				height: 48rpx;
				background: #fff;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
			}
		}
		
		.user-name {
            color: rgba(21, 21, 23, 1);
            font-family: DM Sans;
            font-size: 24px;
            font-weight: 700;
            line-height: 26px;
            letter-spacing: 0%;
            text-align: center;
		}
		
		.user-info {
            color: rgba(102, 112, 122, 1);
            font-family: DM Sans;
            font-size: 28rpx;
            line-height: 44rpx;
            font-weight: 400;
            letter-spacing: 0%;
            text-align: center;
            margin: 30rpx auto;
		}
		
		.contact-info {
			display: flex;
			justify-content: center;
			gap: 40rpx;
			margin-bottom: 30rpx;
			
			.contact-item {
				display: flex;
				align-items: center;
				gap: 10rpx;
				
				.contact-text {
                    color: rgba(116, 116, 116, 1);
                    font-family: DM Sans;
                    font-size: 16rpx;
                    font-weight: 400;
                    line-height: 20rpx;
                    letter-spacing: 0%;
                    text-align: center;
				}
			}
		}
		
		.availability {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 10rpx;
			
			.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;
			}
			
			.status-dot {
				width: 18rpx;
				height: 18rpx;
				background: rgba(0, 204, 154, 1);
				border-radius: 50%;
			}
		}
	}

	// 内容区域
	.content-section {
		// background: #F2F6FC;
		padding: 30rpx;
		
		// 开关部分样式
		.switch-section {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #fff;
			border-radius: 12rpx;
			padding: 24rpx;
			margin-bottom: 16rpx;
			
			.switch-left {
				flex: 1;
				
				.switch-title {
					color: rgba(21, 22, 26, 1);
					font-family: DM Sans;
					font-size: 28rpx;
					font-weight: 500;
					line-height: 52rpx;
					letter-spacing: 0%;
					text-align: left;
					margin-bottom: 12rpx;
				}
				
				.template-text {
					color: rgba(153, 153, 153, 1);
					font-family: DM Sans;
					font-size: 20rpx;
					font-weight: 400;
					line-height: 52rpx;
					letter-spacing: 0%;
					text-align: right;
				}
				
				.section-status {
					color: rgba(1, 107, 246, 1);
					font-family: DM Sans;
					font-size: 24rpx;
					font-weight: 400;
					line-height: 40rpx;
					letter-spacing: 0%;
					text-align: left;
				}
			}
		}
		
		.section-item {
			background: #fff;
			border-radius: 16rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;
            box-sizing: border-box;
            border: 1px solid rgba(227, 231, 236, 1);
            border-radius: 12px;
			
			.section-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;
				
				.section-title {
                    color: rgba(23, 23, 37, 1);
                    font-family: Inter;
                    font-size: 32rpx;
                    font-weight: 600;
                    line-height: 48rpx;
                    letter-spacing: 0%;
                    text-align: left;
				}
				
				.template-text {
                    color: rgba(120, 130, 138, 1);
                    font-family: DM Sans;
                    font-size: 24rpx;
                    font-weight: 400;
                    line-height: 32rpx;
                    letter-spacing: 0%;
                    text-align: left;
				}
				
				.edit-icon {
					width: 40rpx;
					height: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
			
			.section-status {
				font-size: 28rpx;
				color: #007AFF;
				font-weight: 500;
			}
			
			.advantage-content {
				font-size: 14px;
				color: #666;
				line-height: 1.6;
				textarea{
					width: 100%;
					height: fit-content;
					min-height: 44rpx;
				}
			}
		}
		
		// 全职期望卡片样式
		.expectation-card {
			background: #ffffff;
			border-radius: 12rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;
			box-sizing: border-box;
			border: 0.5px solid rgba(227, 231, 236, 1);
			border-radius: 6px;
			background: rgba(253, 253, 253, 1);
			
			.card-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.header-left {
					display: flex;
					align-items: center;
					
					.header-icon {
						width: 40rpx;
						height: 40rpx;
						margin-right: 20rpx;
					}
					
					.header-title {
						color: rgba(29, 33, 41, 1);
						font-family: DM Sans;
						font-size: 28rpx;
						font-weight: 500;
						line-height: 16px;
						letter-spacing: 0%;
						text-align: left;
					}
				}
				
				.progress-text {
					font-family: DM Sans;
					font-size: 24rpx;
					font-weight: 700;
					line-height: 13px;
					letter-spacing: 0%;
					text-align: right;
				}
			}
			
			.job-list {
				margin-bottom: 10rpx;
				
				.job-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20rpx 0;
					
					&:last-child {
						border-bottom: none;
					}
					
					.job-info {
						flex: 1;
						
						> view:first-child {
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-bottom: 4rpx;
						}
						
						.job-title {
							color: rgba(29, 33, 41, 1);
							font-family: DM Sans;
							font-size: 28rpx;
							font-weight: 500;
							line-height: 16px;
							letter-spacing: 0%;
							text-align: left;
						}
						
						.job-details {
							display: block;
							font-size: 24rpx;
							color: rgba(153, 153, 153, 1);
							margin-bottom: 4rpx;
						}
						
						.job-location {
							font-size: 24rpx;
							color: rgba(153, 153, 153, 1);
						}
					}
					
					.preference-btn {
						display: flex;
						align-items: center;
						padding: 8rpx;
						border: 0.5rpx solid #007AFF;
						border-radius: 12rpx;
						margin-right: 10rpx;
						
						text {
							font-size: 18rpx;
							color: #007AFF;
						}
					}
					
					.job-info > view:first-child > view:last-child {
						display: flex;
						align-items: center;
					}
				}
			}
			
			.add-expectation-btn {
				width: 100%;
                height: 70rpx;
				border: 1rpx solid #007AFF;
				border-radius: 42rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				
				text {
					font-size: 28rpx;
					color: #007AFF;
					font-weight: 500;
				}
			}
		}
		
		// 工作经历部分样式
		.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);
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						.logo-img {
							width: 50rpx;
							height: 50rpx;
							border-radius: 8rpx;
							
						}
					}
					
					.experience-content {
						flex: 1;
						.experience-box{
							margin-bottom: 20rpx;
						}
						.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);
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						.logo-img {
							width: 54rpx;
							height: 50rpx;
							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;
						}
					}
				}
			}
		}
		
		// 技能部分样式
		.skills-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;
					}
				}
			}
			
			.skills-grid {
				display: flex;
				flex-wrap: wrap;
				gap: 16rpx;
				
				.skill-tag {
                    padding: 32rpx;
                    border: 1px solid  rgba(236, 241, 246, 1);
                    border-radius: 64rpx;
                    color: rgba(23, 23, 37, 1);
                    font-family: DM Sans;
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 20px;
                    letter-spacing: 0.5%;
                    text-align: right;
				}
			}
		}
	}
</style>