yizhizan-h5/pages/my/workExperience.vue

<template>
	<view class="work-experience">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar" :style="{ paddingTop: (12 + statusBarHeight) + 'px' }">
			<view class="navbar-content">
				<view class="nav-left" @click="goBack">
					<u-icon name="arrow-leftward" color="#333" size="42"></u-icon>
				</view>
				<view class="nav-title">工作经历</view>
				<view class="nav-right"></view>
			</view>
		</view>

		<!-- 主要内容 -->
		<view class="main-content">
			<!-- 公司信息 -->
			<view class="form-section">
				<!-- 公司名称 -->
				<view class="form-item">
					<view class="form-label">公司名称</view>
					<view class="form-input">
						<input v-model="formData.companyName" placeholder="请填写公司名称" maxlength="50" />
						<u-icon v-if="formData.companyName" name="close-circle-fill" color="#C9CDD4" size="28"
							@click="formData.companyName = ''" class="clear-icon"></u-icon>
					</view>
				</view>

				<!-- 公司业务类型 -->
				<view class="form-item">
					<view class="form-label" style="margin-bottom: 20rpx;">
						<text class="required-mark">*</text>
						<text class="label-text">公司业务类型</text>
					</view>
					<view class="checkbox-container">
						<u-checkbox-group @change="checkboxGroupChange" :wrap="false" shape="square"
							active-color="#007AFF">
							<u-checkbox v-for="(option, index) in businessTypeOptions" :key="index" :name="option.value"
								v-model="option.checked" class="checkbox-item">
								{{ option.label }}
							</u-checkbox>
						</u-checkbox-group>
					</view>
				</view>
			</view>

			<!-- 岗位履历 -->
			<view class="form-section" v-for="(resume, index) in formData.resumes" :key="index">
				<!-- <view class="section-title" v-if="hasCrossBorderExperience"><text>岗位履历 ({{ index + 1 }})</text> -->
				<view class="section-title"><text>岗位履历 ({{ index + 1 }})</text>
					<image src="@/static/images/index/delete.svg" style="width: 40rpx;height: 40rpx;"
						@click="deleteResume(index)" v-if="formData.resumes && formData.resumes.length > 1" />
				</view>

				<!-- 任职时间 -->
				<view class="form-item">
					<view class="form-label">
						<text class="required-mark">*</text>
						<text class="label-text">{{ hasCrossBorderExperience ? '任职时间' : '在职时间' }}</text>
					</view>
					<view class="form-input time-range">
						<view class="time-input">
							<uni-datetime-picker v-model="resume.employmentTime[0]" type="date"
								:border="false" placeholder="开始时间" />
							<!-- <image src="../../static/images/index/Iconly_Light_Calendar.svg"
								style="width: 48rpx; height: 48rpx;" mode="aspectFit"></image> -->
						</view>
						<view class="time-separator">至</view>
						<view class="time-input">
							<uni-datetime-picker v-model="resume.employmentTime[1]" type="date"
								:border="false" placeholder="结束时间" />
							<image src="../../static/images/index/Iconly_Light_Calendar.svg"
								style="width: 48rpx; height: 48rpx;" mode="aspectFit"></image>
						</view>
					</view>
				</view>

				<!-- 所在部门 -->
				<view class="form-item">
					<view class="form-label">
						<text class="required-mark">*</text>
						<text class="label-text">所在部门</text>
					</view>
					<view class="form-input">
						<picker class="picker" :data-index="index" mode="selector" :range="departments"
							@change="selectDepartment">
							<text>{{ departments.length > 0 ? departments[resume.departmentIndex] : '请选择部门' }}</text>
						</picker>
						<u-icon name="arrow-down" color="#999" size="36"></u-icon>
					</view>
				</view>

				<!-- 岗位 -->
				<view class="form-item">
					<view class="form-label">
						<text class="required-mark">*</text>
						<text class="label-text">岗位</text>
					</view>
					<view class="form-input" @click="selectPosition(index)">
						<text v-if="resume.position">{{ resume.position }}</text>
						<text v-else class="placeholder">请选择岗位</text>
						<u-icon name="arrow-right" color="#999" size="36"></u-icon>
					</view>
				</view>

				<!-- 岗位职级 -->
				<view class="form-item">
					<view class="form-label">岗位职级</view>
					<view class="form-input">
						<picker class="picker" :data-index="index" mode="selector" :range="positionLevels"
							@change="selectPositionLevel">
							<text>{{ resume.positionLevel || '请选择' }}</text>
						</picker>
						<u-icon name="arrow-down" color="#999" size="36"></u-icon>
					</view>
				</view>

				<!-- 岗位职业技能 -->
				<view class="form-item">
					<view class="form-label">
						<text class="required-mark">*</text>
						<text class="label-text">跨境职业技能</text>
					</view>
					<view class="skills-input-container">
						<view class="skills-tags">
							<view v-for="(skill, skillIndex) in resume.skills" :key="skillIndex" class="skill-tag">
								<text>{{ skill }}</text>
								<u-icon name="close" color="#999" size="16"
									@click="removeSkill(index, skillIndex)"></u-icon>
							</view>
						</view>
						<view class="add-skill-btn" @click="addSkill(index)">
							<u-icon name="plus" color="rgba(102, 102, 102, 1)" size="28"></u-icon>
						</view>
					</view>
				</view>

				<!-- 工作内容 -->
				<view class="form-item">
					<view class="form-label">
						工作内容
						<text class="word-count">{{ resume.workContent && resume.workContent.length || 0 }}/1000</text>
					</view>
					<view class="form-input">
						<textarea v-model="resume.workContent" placeholder="选填,请输入" maxlength="1000" auto-height
							@input="handleTextareaInput($event, 'workContent', index)" class="form-textarea"></textarea>
						<view class="textarea-clear" v-if="resume.workContent"
							@click="clearTextarea('workContent', index)">
							<u-icon name="close-circle-fill" color="#C9CDD4" size="28"></u-icon>
						</view>
					</view>
				</view>

				<!-- 工作业绩 -->
				<view class="form-item">
					<view class="form-label">
						工作业绩
						<text class="word-count">{{ resume.workPerformance && resume.workPerformance.length || 0 }}/1000</text>
					</view>
					<view class="form-input">
						<textarea v-model="resume.workPerformance" placeholder="选填,请输入" maxlength="1000" auto-height
							@input="handleTextareaInput($event, 'workPerformance', index)"
							class="form-textarea"></textarea>
						<view class="textarea-clear" v-if="resume.workPerformance"
							@click="clearTextarea('workPerformance', index)">
							<u-icon name="close-circle-fill" color="#C9CDD4" size="28"></u-icon>
						</view>
					</view>
				</view>

				<!-- 添加岗位履历按钮 -->
				<view class="add-resume-btn" @click="addResume"
					v-if="index === formData.resumes.length - 1">
					<text>添加岗位履历</text>
				</view>
			</view>

			<!-- 底部保存按钮 -->
			<view class="bottom-btn-container">
				<view class="save-btn" @click="saveWorkExperience">
					<text>保存</text>
				</view>
			</view>
		</view>

		<!-- 添加技能弹窗 -->
		<u-popup v-model="showAddSkill" mode="center" border-radius="24" width="80%">
			<view class="add-skill-popup">
				<view class="popup-title">添加技能</view>
				<view class="popup-content">
					<input v-model="newSkillName" placeholder="请输入技能名称" class="skill-input" maxlength="10" />
				</view>
				<view class="popup-buttons">
					<view class="popup-btn cancel-btn" @click="cancelAddSkill">取消</view>
					<view class="popup-btn confirm-btn" @click="confirmAddSkill">确定</view>
				</view>
			</view>
		</u-popup>

		<!-- 清除确认弹窗 -->
		<u-modal v-model="showClearConfirm" :content="'确定要清除所有填写的内容吗？'" show-cancel-button confirm-text="确定清除"
			cancel-text="取消" @confirm="clearAllContent" confirm-color="#FF4444"></u-modal>
	</view>
</template>

<script>
var id = '';
export default {
	data() {
		return {
			statusBarHeight: 0, // 状态栏高度
			showAddSkill: false,
			newSkillName: '',
			currentResumeIndex: 0,
			showClearConfirm: false, // 清除确认弹窗
			businessTypeOptions: [{
				label: '跨境电商',
				value: '0',
				checked: false
			},
			{
				label: '国内电商',
				value: '1',
				checked: false
			},
			{
				label: '外贸',
				value: '2',
				checked: false
			},
			{
				label: '其他',
				value: '3',
				checked: false
			}
			],
			formData: {
				companyName: '',
				businessTypes: [],
				resumes: [{
					workExpDetailId: "",
					workExpId: "",
					employmentTime: [],
					department: '',
					departmentId: 0,
					departmentIndex: 0,
					position: '',
					positionId: 0,
					positionLevel: '初级',
					skills: [],
					workContent: '',
					workPerformance: ''
				}]
			},
			departments: [],
			departmentsIds: [],
			positionLevels: ['初级', '中级','高级','资深','其它'],
			operateKey: 0,
			isWork: false
		}
	},
	onLoad(options) {
		// 获取状态栏高度
		let systemInfo = uni.getSystemInfoSync();
		this.statusBarHeight = systemInfo.statusBarHeight || 0;
		// 接收从在线简历页面传递的业务类型参数
		if (options.businessTypes) {
			try {
				const businessTypes = JSON.parse(decodeURIComponent(options.businessTypes))
				this.formData.businessTypes = businessTypes
				console.log('接收到的业务类型:', businessTypes)
				// console.log('是否有跨境经验:', this.hasCrossBorderExperience)
				// if (this.hasCrossBorderExperience)
				// 	this.businessTypeOptions[0].checked = true
			} catch (e) {
				console.error('解析业务类型参数失败:', e)
			}
		}
		this.getDepartment()
		id = options && options.id ? options.id : ''
		// 监听技能设置更新
		uni.$on('jobs', (data) => {
			console.log('岗位设置已更新:', data)
			// 这里可以更新对应的技能显示
			this.formData.resumes[this.operateKey].position = data.ruleClassifyName
			this.formData.resumes[this.operateKey].positionId = data.ruleClassifyId;
			// 更新以后给岗位职业技能设置默认值
			this.getDataInfo(this.formData.resumes[this.operateKey].positionId);
		})
		uni.$on('skillsUpdated', (data) => {
			console.log('技能设置已更新:', data)
			// 这里可以更新对应的技能显示
			this.formData.resumes[this.operateKey].skills = data.selectedTags
		})
	},
	beforeDestroy() {
		// 移除事件监听
		uni.$off('jobs')
		uni.$off('skillsUpdated')
	},
	computed: {
		hasCrossBorderExperience() {
			return this.formData.businessTypes.includes('0')
		},
		hasContentToClear() {
			// 检查是否有内容可以清除
			return this.formData.companyName ||
				this.formData.businessTypes.length > 0 ||
				this.formData.resumes.some(resume =>
					resume.position ||
					resume.workContent ||
					resume.workPerformance ||
					resume.skills.length > 0
				)
		}
	},
	methods: {
		getDataInfo(jobId) {
			let data = {
				ruleClassifyId: jobId
			}
			this.$Request.getT('/app/userFirst/getPostSkill', data).then(res => {
				if (res.code == 0) {
					if (res.data.length > 0 && res.data[0]?.childrenList[0]?.postSkillName)
						this.formData.resumes[this.operateKey].skills = []
						this.formData.resumes[this.operateKey].skills.push(res.data[0]?.childrenList[0]?.postSkillName)
				}
			})
		},
		goBack() {
			uni.navigateBack()
		},
		getDepartment() {
			var that = this
			this.$Request.postJson("/app/userFirst/getDepartment", {}).then((res) => {
				if (res.code == 0) {
					that.departments = that.$queue.array_column(res.data, 'departmentName')
					that.departmentsIds = that.$queue.array_column(res.data, 'departmentId')
					that.formData.resumes.forEach(function (item) {
						item.departmentId = that.departmentsIds[item.departmentIndex]
						item.department = that.departments[item.departmentIndex]
					})
					if (id != '' && id != 0)
						that.getData()
				} else {
					uni.showToast({
						title: res.msg,
						icon: "none",
					});
				}
			});

		},
		getData() {
			var that = this
			this.$Request.getT("/app/userFirst/getWorkExpDetailOne", {
				workExpId: id
			}).then((res) => {
				if (res.code == 0) {
					res = res.data
					that.formData.companyName = res.workExp.companyName
					that.formData.businessTypes = JSON.parse(res.workExp.type)
					// 设置公司业务类型回显
					if (this.formData.businessTypes.length) {
						for (let i = 0; i < this.formData.businessTypes.length; i++) {
							for (let opt = 0; i < this.businessTypeOptions.length; opt++) {
								const option = this.businessTypeOptions[opt]
								if (this.formData.businessTypes[i] == option.value) {
									this.businessTypeOptions[opt].checked = true
									break
								}
							}
						}
					}
					console.log(that.formData.businessTypes)
					res.workExpDetails.forEach(function (item) {
						item.skills = JSON.parse(item.skills)
						item.employmentTime = item.startTime == '' ? [] : [item.startTime, item
							.endTime],
							item.departmentIndex = that.departmentsIds.indexOf(item.departmentId) < 0 ?
								0 : that.departmentsIds.indexOf(item.departmentId)
					})
					that.formData.resumes = res.workExpDetails
				} else {
					uni.showToast({
						title: res.msg,
						icon: "none",
					});
				}
			});
		},
		selectDepartment(e) {
			var key = Number(e.currentTarget.dataset.index)
			this.formData.resumes[key].departmentId = this.departmentsIds[e.detail.value]
			this.formData.resumes[key].departmentIndex = e.detail.value
			this.formData.resumes[key].department = this.departments[e.detail.value]
		},
		formatter(type, value) {
			if (type === 'year') {
				return `${value}年`
			}
			if (type === 'month') {
				return `${value}月`
			}
			if (type === 'day') {
				return `${value}日`
			}
			return value
		},
		checkboxGroupChange(e) {
			console.log('选中的业务类型:', e)
			// 更新 formData.businessTypes 以保持数据同步
			this.formData.businessTypes = e
		},

		selectEmploymentTime(index) {
			// 选择任职时间
			uni.showToast({
				title: '选择任职时间',
				icon: 'none'
			})
		},

		selectPosition(index) {
			this.operateKey = index
			// 选择岗位
			uni.navigateTo({
				url: '/package/jobIntention/jobList'
			})
		},
		selectPositionLevel(e) {
			var key = Number(e.currentTarget.dataset.index)
			this.formData.resumes[key].positionLevel = this.positionLevels[e.detail.value]
		},
		addSkill(index) {
			this.operateKey = index
			//this.currentResumeIndex = index
			//this.showAddSkill = true
			//this.newSkillName = ''
			if (this.formData.resumes[index].positionId == '' || this.formData.resumes[index].positionId == 0)
				return this.$queue.showToast('请先选择岗位')
			uni.navigateTo({
				url: '/package/jobIntention/jobSkills?jobId=' + this.formData.resumes[index].positionId +
					'&jobTitle=' + this.formData.resumes[index].position + '&skill=' + encodeURIComponent(JSON
						.stringify(this.formData.resumes[index].skills))
			})
		},
		removeSkill(resumeIndex, skillIndex) {
			this.formData.resumes[resumeIndex].skills.splice(skillIndex, 1)
		},
		cancelAddSkill() {
			this.showAddSkill = false
			this.newSkillName = ''
		},
		confirmAddSkill() {
			if (this.newSkillName.trim()) {
				this.formData.resumes[this.currentResumeIndex].skills.push(this.newSkillName.trim())
				this.showAddSkill = false
				this.newSkillName = ''
			} else {
				uni.showToast({
					title: '请输入技能名称',
					icon: 'none'
				})
			}
		},
		selectWorkContent(index) {
			// 选择工作内容
			uni.showToast({
				title: '选择工作内容',
				icon: 'none'
			})
		},
		selectWorkPerformance(index) {
			// 选择工作业绩
			uni.showToast({
				title: '选择工作业绩',
				icon: 'none'
			})
		},
		addResume() {
			this.formData.resumes.push({
				workExpDetailId: "",
				workExpId: "",
				employmentTime: [],
				department: this.departments[0],
				departmentId: this.departmentsIds[0],
				departmentIndex: 0,
				position: '',
				positionId: 0,
				positionLevel: '初级',
				skills: [],
				workContent: '',
				workPerformance: ''
			})
		},
		deleteResume(index) {
			this.formData.resumes.splice(index, 1)
		},
		// 处理文本域输入
		handleTextareaInput(e, field, index) {
			const value = e.detail.value;
			// 如果超过1000字，截断
			if (value.length > 1000) {
				this.formData.resumes[index][field] = value.substring(0, 1000);
			}
		},

		// 清除单个文本域
		clearTextarea(field, index) {
			this.formData.resumes[index][field] = '';
		},

		// 显示清除确认弹窗
		showClearAllConfirm() {
			this.showClearConfirm = true;
		},

		// 清除所有内容
		clearAllContent() {
			// 清空公司名称
			this.formData.companyName = '';

			// 清空业务类型选择
			this.formData.businessTypes = [];
			this.businessTypeOptions.forEach(option => {
				option.checked = false;
			});

			// 清空所有履历
			this.formData.resumes = [{
				workExpDetailId: "",
				workExpId: "",
				employmentTime: [],
				department: this.departments.length > 0 ? this.departments[0] : '',
				departmentId: this.departmentsIds.length > 0 ? this.departmentsIds[0] : 0,
				departmentIndex: 0,
				position: '',
				positionId: 0,
				positionLevel: '初级',
				skills: [],
				workContent: '',
				workPerformance: ''
			}];

			this.showClearConfirm = false;
			uni.showToast({
				title: '已清除所有内容',
				icon: 'success'
			});
		},

		saveWorkExperience() {
			console.log(this.formData.resumes)
			if (!this.formData.companyName) {
				uni.showToast({
					title: "请输入公司名称",
					icon: "none"
				});
				return;
			}
			if (this.formData.businessTypes.length <= 0) {
				uni.showToast({
					title: "请选择公司业务类型",
					icon: "none"
				});
				return;
			}
			if (this.formData.resumes.length <= 0) {
				uni.showToast({
					title: "请至少填写一份履历",
					icon: "none"
				});
				return;
			}
			for (let i = 0; i < this.formData.resumes.length; i++) {
				const item = this.formData.resumes[i];
				const timeArr = item.employmentTime.filter(time => {
					if (time) {
						return time
					}
				});
				if (timeArr.length <= 0) {
					this.$queue.showToast('任职时间不能为空')
					return false;
				}
				if (timeArr.length < 2) {
					this.$queue.showToast('请选择完整的任职时间')
					return false;
				}
				
				// 判断开始时间是否大于结束时间
				let startTime = ''
				let endTime = ''
				if (item.employmentTime.length == 2) {
					startTime = item.employmentTime[0].split(' ')[0]
					endTime = item.employmentTime[1].split(' ')[0]
				}
				if (startTime && endTime && startTime > endTime) {
					this.$queue.showToast('任职开始时间不能大于任职结束时间')
					return false;
				}
				
				if (item.position == '') {
					this.$queue.showToast('岗位不能为空')
					return false;
				}
				if (item.skills.length <= 0) {
					this.$queue.showToast('岗位技能不能为空')
					return false;
				}
			}
			let postData = this.formData.resumes.map(({
				employmentTime,
				departmentIndex,
				...rest
			}) => {
				return {
					...rest,
					skills: JSON.stringify(rest.skills),
					startTime: employmentTime?.[0] || '',
					endTime: employmentTime?.[1] || ''
				}
			})
			//  this.formData.resumes.forEach(function(item){
			//   console.log(item.skills)
			//  	item.skills=JSON.stringify(item.skills);
			// console.log(item.skills)
			// item.startTime=item.employmentTime[0]?item.employmentTime[0]:'';
			// item.endTime=item.employmentTime[1]?item.employmentTime[1]:'';
			// delete item.employmentTime; 
			// delete item.departmentIndex; 
			//  })
			let data = {
				workExp: {
					workExpId: id,
					companyName: this.formData.companyName,
					type: JSON.stringify(this.formData.businessTypes),
				},
				workExpDetails: postData
			}
			if (this.isWork)
				return
			this.isWork = true
			uni.showLoading({
				title: "提交中..."
			});
			this.$Request.postJson("/app/userFirst/addWorkExp", data).then((res) => {
				uni.hideLoading();
				this.isWork = false
				this.formData.companyName == ''
				if (res.code == 0) {
					uni.showToast({
						title: "保存成功",
						icon: "none"
					});
					// 实际开发中可以在这里添加跳转逻辑
					uni.$emit('updateResume')
					setTimeout(() => {
						uni.navigateBack()
					}, 1000);
				} else {
					uni.showToast({
						title: res.msg,
						icon: "none",
					});
				}
			});
		},
	}
}
</script>

<style lang="scss" scoped>
.work-experience {
	height: 100vh;
	padding-bottom: 120rpx;
	display: flex;
	flex-direction: column;
}

.custom-navbar {
	// position: fixed;
	// top: 0;
	// left: 0;
	// right: 0;
	background-color: #ffffff;
	// z-index: 9999;

	.navbar-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100%;
		padding: 0 40rpx;

		.nav-left,
		.nav-right {
			width: 60rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.nav-title {
			color: rgba(51, 51, 51, 1);
			font-family: DM Sans;
			font-size: 36rpx;
			font-weight: 700;
			line-height: 26px;
			letter-spacing: 0px;
			text-align: center;
		}
	}
}

.main-content {
	margin-top: 68rpx;
	padding: 0 20rpx 40rpx 20rpx;
	flex: 1;
	overflow: auto;
}

.form-section {
	background: #fff;
	border-radius: 16rpx;
	padding: 0rpx 10rpx;

	.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;
		padding: 16rpx 0 32rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}

.form-item {
	margin-bottom: 32rpx;

	.form-label {
		color: rgba(31, 44, 55, 1);
		font-family: DM Sans;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 22px;
		letter-spacing: 0%;
		text-align: left;
		margin-bottom: 20rpx;
		position: relative;

		.word-count {
			font-size: 24rpx;
			color: #aaa;
			position: absolute;
			bottom: 0;
			right: 0;
		}

		.required-mark {
			color: #FF3B30;
			font-size: 18px;
			font-weight: 500;
			margin-right: 4rpx;
		}

		.label-text {
			color: rgba(31, 44, 55, 1);
			font-family: DM Sans;
			font-size: 16px;
			font-weight: 500;
			line-height: 22px;
			letter-spacing: 0%;
			text-align: left;
		}
	}

	.form-input {
		width: 100%;
		min-height: 80rpx;
		padding: 0 40rpx;
		border: 1px solid rgba(227, 231, 236, 1);
		border-radius: 24px;
		background: rgba(255, 255, 255, 1);
		display: flex;
		align-items: center;
		justify-content: space-between;

		.placeholder {
			color: #999999;
		}

		picker {
			width: 100%;
		}

		textarea {
			width: 100%;
			padding: 20rpx 0;
			height: auto !important;
			// min-height: 40rpx;
			resize: none;
			line-height: 1.5;
			overflow-y: hidden;
		}

		.form-textarea {
			width: 100%;
			min-height: 80rpx;
			padding: 20rpx 0;
			line-height: 1.5;
			resize: none;
			background: transparent;
		}
	}
}

.skills-input-container {
	width: 100%;
	min-height: 80rpx;
	padding: 0rpx 40rpx;
	border: 1px solid rgba(227, 231, 236, 1);
	border-radius: 32px;
	background: rgba(255, 255, 255, 1);
	display: flex;
	align-items: center;
	justify-content: space-between;

	.skills-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 12rpx;
		flex: 1;

		.skill-tag {
			padding: 8rpx 16rpx;
			background: #F5F5F5;
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			gap: 8rpx;

			text {
				font-size: 24rpx;
				color: #666666;
			}
		}
	}

	.add-skill-btn {
		width: 40rpx;
		height: 40rpx;
		border: 1rpx solid rgba(102, 102, 102, 1);
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff;
		flex-shrink: 0;
	}
}

.add-resume-btn {
	width: 100%;
	height: 80rpx;
	border: 1rpx solid #007AFF;
	border-radius: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 20rpx;

	text {
		color: #007AFF;
		font-size: 28rpx;
		font-weight: 500;
	}
}

.bottom-btn-container {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 30rpx 20rpx;
	background: #fff;
	border-top: 1px solid #f0f0f0;
	z-index: 98;
}

.save-btn {
	width: 100%;
	height: 88rpx;
	background: linear-gradient(90deg, rgba(13, 39, 247, 1), rgba(19, 193, 234, 1) 100%);
	border-radius: 44rpx;
	display: flex;
	align-items: center;
	justify-content: center;

	text {
		font-size: 32rpx;
		font-weight: 600;
		color: #fff;
	}
}

.add-skill-popup {
	background: #fff;
	border-radius: 24rpx;
	padding: 40rpx;

	.popup-title {
		color: rgba(34, 37, 42, 1);
		font-size: 36rpx;
		font-weight: 500;
		text-align: center;
		margin-bottom: 30rpx;
	}

	.popup-content {
		margin-bottom: 30rpx;

		.skill-input {
			width: 100%;
			height: 80rpx;
			padding: 0 20rpx;
			border: 1rpx solid #E5E5EA;
			border-radius: 12rpx;
			font-size: 28rpx;
			color: rgba(34, 37, 42, 1);
			background: #F7F8FA;
		}
	}

	.popup-buttons {
		display: flex;
		gap: 20rpx;

		.popup-btn {
			flex: 1;
			height: 80rpx;
			border-radius: 12rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			font-weight: 500;
		}

		.cancel-btn {
			background: #F7F8FA;
			color: rgba(102, 102, 102, 1);
		}

		.confirm-btn {
			background: #007AFF;
			color: #fff;
		}
	}
}

.checkbox-container {
	display: flex;
	flex-wrap: nowrap;
	gap: 10rpx;

	/deep/ .u-checkbox-group {
		display: flex;
		flex-wrap: nowrap;
		width: 100%;
	}

	/deep/ .u-checkbox {
		flex: 1;
		min-width: 0;
		margin-right: 0;
	}

	/deep/ .u-checkbox__label {
		color: var(--Grayscale/Grayscale 100, rgba(23, 23, 37, 1));
		font-family: DM Sans;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 48rpx;
		letter-spacing: 0%;
		text-align: left;
	}
}

.form-textarea {
	height: auto;

}

/* 时间选择器样式 */
.time-range {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.time-input {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	// border-bottom: 1rpx solid #E5E5EA;
	// padding-bottom: 10rpx;
	text-align: center;
}

.time-input:first-child {
	margin-right: 20rpx;
}

.time-input:last-child {
	margin-left: 20rpx;
}

.time-separator {
	font-size: 28rpx;
	color: #666;
}

/* 调整日期选择器输入框样式 */
.time-input /deep/ .uni-datetime-picker__input {
	width: 100%;
	font-size: 28rpx;
	color: #333;
}

.time-input /deep/ .uni-datetime-picker__placeholder {
	color: #999;
	font-size: 28rpx;
}
</style>