yizhizan-h5/pages/recruitmentData/communicationRecords.vue

<template>
	<view class="page">
		<!-- Custom Navbar -->
		<view class="custom-navbar">
			<view class="navbar-content">
				<view class="navbar-left" @click="goBack">
					<u-icon name="arrow-leftward" color="color: rgba(51, 51, 51, 1);" size="36"></u-icon>
				</view>
				<view class="navbar-title">沟通记录</view>
				<view class="navbar-right"></view>
			</view>
		</view>

		<view class="tab-section-bg">
			<text class="title-text">沟通记录</text>
			<text class="interview-manage" @click="goToInterviewManage">面试管理</text>
		</view>

		<!-- Tab Navigation -->
		<view class="tab-section">
			<u-tabs :list="tabs" :current="activeTab" @change="switchTab" :is-scroll="false" :height="88"
				:font-size="24" active-color="rgba(1, 107, 246, 1)" inactive-color="rgba(102, 102, 102, 1)"
				:bar-width="80" :bar-height="4" item-width="80" :gutter="40" bg-color="#ffffff" :bar-style="{
          borderRadius: '2rpx'
        }"></u-tabs>
		</view>

		<!-- Content Section -->
		<view class="content-section">
			<!-- Communication Records List -->
			<view class="communication-list" v-if="activeTab === 0">
				<!-- 有数据时显示列表 -->
				<view v-if="communicationRecords.length > 0">
					<!-- Date Group -->
					<view class="date-group" v-for="(group, groupIndex) in groupedRecords" :key="groupIndex">
						<view class="date-header">
							<text class="date-text">{{ group.date }}</text>
						</view>

						<!-- Records for this date -->
						<view class="talent-card" v-for="(record, recordIndex) in group.records" :key="recordIndex"
							@click="goToResumeDetail(record)">
							<view class="talent-content">
								<!-- 头像和基本信息 -->
								<view class="talent-header">
									<view class="avatar-wrapper">
										<image :src="record.userAvatar || '/static/logo.png'" class="talent-avatar" mode="aspectFill"></image>
										<image src="/static/images/svg/male.svg" class="sex-icon" v-if="record.userSex == 1"></image>
										<image src="/static/images/svg/female.svg" class="sex-icon" v-if="record.userSex == 2"></image>
									</view>
									<view class="talent-info">
										<view class="talent-name-section">
											<view class="talent-name">{{ record.userName }}</view>
											<view class="talent-tags">
												<view class="status-tag online flex align-center" v-if="record.isOnline"><view class="dot"></view>在线</view>
												<view class="status-tag hot" v-if="record.isHot">热门搜索</view>
												<view class="status-tag active" v-if="record.lastActive">
													{{ record.lastActive }}</view>
											</view>
										</view>
										<!-- 经验和薪资 -->
										<view class="talent-experience">
											<text class="experience-text">{{ record.resumesWorkExperience }}</text>
											<text class="education-salary">{{ record.degree }}</text>
											<text>{{ record.salaryRange }}</text>
											<text
												class="status-text">{{ record.resumesStatus==1?'在职&考虑机会':"离职" }}</text>
										</view>
									</view>
								</view>

								<!-- 当前职位 -->
								<view class="current-job" v-if="record.companyName">
									<view class="flex align-start">
										<image src="../../static/images/aixin.svg" class="job-icon" mode="aspectFit">
										</image>
										<text class="job-text">
											<text>{{ record.companyName }}</text>
											<text v-if="record.lastWorkPosition"> · {{ record.lastWorkPosition }}</text>
										</text>										
									</view>
									<text class="work-period">{{ record.resumesWorkExperience }}</text>
								</view>

								<!-- 求职期望 -->
								<view class="job-expectation">
									<image src="../../static/images/xiangzi.svg" class="job-icon" mode="aspectFit">
									</image>
									<text class="expectation-text">求职期望: {{ record.expectedPosition }}</text>
								</view>

								<!-- 技能标签 -->
								<view class="skill-tags">
									<view class="skill-tag" v-for="(skill, skillIndex) in record.intentIndustry"
										:key="skillIndex">
										{{ skill }}
									</view>
								</view>

								<!-- 工作描述 -->
								<view class="job-description">
									<text class="description-text">{{ record.workContent }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 空状态显示 -->
				<view class="empty-state" v-else>
					<view class="empty-illustration">
						<image src="../../static/images/index/Hrempty.svg" class="empty-image" mode="aspectFit" />
					</view>
				</view>
			</view>

			<!-- Interview Records List -->
			<view class="interview-list" v-if="activeTab === 1">
				<!-- Date Selector -->
				<view class="date-selector">
					<!-- Month Switcher -->
					<view class="month-switcher">
						<u-icon name="arrow-left" color="#666" size="28" @click="changeMonth(-1)"></u-icon>
						<text class="current-month">{{ currentYear }}年{{ currentMonth }}月</text>
						<u-icon name="arrow-right" color="#666" size="28" @click="changeMonth(1)"></u-icon>
					</view>
					
					<!-- Week Days -->
					<view class="week-days">
						<text class="day-name" v-for="day in currentMonthDays" :key="day.name">{{ day.name }}</text>
					</view>
					
					<!-- Month Dates -->
					<view class="month-dates">
						<view class="date-item" 
							:class="{ 
								active: date.isSelected, 
								'other-month': date.isOtherMonth 
							}" 
							v-for="(date,index) in currentMonthDates"
							:key="index" 
							@click="selectDate(date)">
							<text class="date-value">{{ date.value }}</text>
						</view>
					</view>
				</view>

				<!-- Interview Records -->
				<view class="interview-records">
					<!-- 有数据时显示列表 -->
					<view v-if="interviewRecords.length > 0">
						<view class="interview-record"
							:class="{ 'today': formatDate(record.interviewDateTime,'YYYY-MM-DD') === formatDate(selectDate,'YYYY-MM-DD') }"
							v-for="(record, index) in interviewRecords" :key="index"
							@click="goToInterviewDetail(record)">
							<view class="record-content">
								<view class="record-left">
									<text
										class="date-label">{{ checkDate(record.interviewDateTime) === 1 ? '今天' : checkDate(record.interviewDateTime) === 2 ? '明天' : record.interviewDateTime.substring(5, 10) }}</text>
									<text
										class="time-label">{{ record.detailTime? record.detailTime : record.interviewDateTime.substring(11, 16) }}</text>
								</view>
								<view class="record-right">
									<text class="candidate-name">{{ record.userEntity.userName }}</text>
									<block v-if="record.resumesListDto.length > 0">
										<text
											class="candidate-details">{{ record.resumesListDto[0].resumesWorkExperience? record.resumesListDto[0].resumesWorkExperience :'无经验'}}
											{{ record.resumesListDto[0].degree }}
											{{ record.resumesListDto[0].minSalary }}-{{ record.resumesListDto[0].maxSalary }}</text>
									</block>
								</view>
							</view>
						</view>
					</view>

					<!-- 空状态显示 -->
					<view class="empty-state" v-else>
						<view class="empty-illustration">
							<image style="height: 300px;" src="../../static/images/index/Hrempty.svg" class="empty-image" mode="aspectFit" />
						</view>
					</view>
				</view>
			</view>

			<!-- 收藏标签页 -->
			<view class="favorite-list" v-if="activeTab === 2">
				<!-- 有数据时显示列表 -->
				<view v-if="favoriteRecords.length > 0">
					<!-- 收藏记录列表内容 -->
					<view class="qyList flex justify-center">
						<view class="qyList-box">
							<view class="qyList-box-item flex justify-center" v-for="(item, index) in favoriteRecords"
								:key="index"
								@click="goNav(`/pages/talentSearch/resumeDetail?resumesId=${item.resumesId}&postPushId=${item.postPushId}`)">
								<view class="qyList-box-item-box">
									<view class="qyList-box-item-info flex justify-between align-center" v-if="item.resumesListDto[0]">
										<view class="qyList-box-item-info-l">
											<view style="color: #212121; font-size: 38rpx; font-weight: 800">
												{{ item.resumesListDto[0].userName }}
											</view>
											<view class="flex align-center flex-wrap"
												style="color: #999999; font-size: 26rpx; margin-top: 10rpx">
												<text>{{ item.resumesListDto[0].userAge }}岁</text>
												<text style="margin-left: 20rpx; margin-right: 20rpx">|</text>
												<text>{{ item.resumesListDto[0].resumesWorkExperience }}</text>
												<text style="margin-left: 20rpx; margin-right: 20rpx">|</text>
												<text>{{ item.resumesListDto[0].degree }}</text>
												<text style="margin-left: 20rpx; margin-right: 20rpx">|</text>
												<text>期望{{item.resumesListDto[0].minSalary}} - {{item.resumesListDto[0].maxSalary}}</text>
											</view>
										</view>
										<view class="qyList-box-item-info-r">
											<image
												:src="item.resumesListDto[0].userAvatar ? item.resumesListDto[0].userAvatar : '../../static/logo.png'"
												style="width: 95rpx; height: 95rpx; border-radius: 50%" mode=""></image>
										</view>
									</view>
									<view class="qyList-box-item-job flex align-center" v-if="item.resumesListDto[0]">
										<image src="../../static/images/qi.png"
											style="width: 30rpx; height: 32rpx; margin-right: 16rpx" mode=""></image>
										<view class="txt-desc flex align-center justify-between">
											<view>
												<view>{{ item.resumesListDto[0].companyName }}</view>
												<view v-if="item.resumesListDto[0]">
													{{ item.resumesListDto[0].lastWorkStartTime ? item.resumesListDto[0].lastWorkStartTime.slice(0, 10)
														: ''
													}}--{{
														item.resumesListDto[0].lastWorkEndTime ? item.resumesListDto[0].lastWorkEndTime.slice(0, 10) : '' }}
												</view>
											</view>
											<view>
												<view>
													{{ item.resumesListDto[0].school ? item.resumesListDto[0].school : '' }}
												</view>
												<view>
													{{ item.resumesListDto[0].degree }}
												</view>
											</view>
										</view>
									</view>
									<view class="qyList-box-item-job flex align-center" v-if="item.resumesListDto[0]">
										<u-icon name="heart-fill" color="#016BF6" size="30" style="margin-right: 16rpx">
										</u-icon>
										期望岗位:{{ item.resumesListDto[0].expectedPosition }}
									</view>
									<!-- <view class="qyList-box-item-rem" v-if="item.resumesDetails">
										优势:{{ item.resumes.workContent }}
									</view> -->
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 空状态显示 -->
				<view class="empty-state" v-else>
					<view class="empty-illustration">
						<image src="../../static/images/index/Hrempty.svg" class="empty-image" mode="aspectFit" />
					</view>
				</view>
			</view>

			<!-- 收藏职位标签页 -->
			<view class="favorite-jobs-list" v-if="activeTab === 3">
				<!-- 有数据时显示列表 -->
				<view v-if="favoriteJobs.length > 0">
					<!-- 收藏职位列表内容 -->
				</view>

				<!-- 空状态显示 -->
				<view class="empty-state" v-else>
					<view class="empty-illustration">
						<image src="../../static/images/index/Hrempty.svg" class="empty-image" mode="aspectFit" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
		return {
			statusBarHeight: 0,
			activeTab: 0,
			tabs: [{
					name: '沟通过'
				},
				{
					name: '面试'
				},
				{
					name: '收藏简历'
				},
				// { name: '收藏职位' }
			],
			communicationRecords: [],
			// 面试相关数据
			selectedDate: null, // 当前选中的日期
			// 收藏相关数据
			favoriteRecords: [], // 收藏记录（空数组，显示空状态）
			favoriteJobs: [], // 收藏职位（空数组，显示空状态）
			interviewRecords: [],
			// 当前显示的年月
			currentYear: new Date().getFullYear(),
			currentMonth: new Date().getMonth() + 1 // 1-12
		}
	},
		computed: {
			groupedRecords() {
				const records = Array.isArray(this.communicationRecords) ?
					this.communicationRecords :
					[]

				const groups = {}

				records
					.filter(r => r && r.lastTime) // 过滤掉 null 或没有 lastTime 的数据
					.forEach(record => {
						const date = record.lastTime.substring(0, 10)
						record.intentIndustry = record.intentIndustry?.split('/')
						if (!groups[date]) {
							groups[date] = {
								date,
								records: []
							}
						}
						groups[date].records.push(record)
					})

				return Object.values(groups)
			},
			// 星期名称
			currentMonthDays() {
				const weekDays = ['日', '一', '二', '三', '四', '五', '六']
				return weekDays.map(name => ({
					name
				}))
			},
			// 当前月的日期
			currentMonthDates() {
				const today = new Date()
				// 计算当前月份的第一天
				const firstDay = new Date(this.currentYear, this.currentMonth - 1, 1)
				// 计算当前月份的天数
				const daysInMonth = new Date(this.currentYear, this.currentMonth, 0).getDate()
				// 计算第一天是星期几（0-6，0是周日）
				const firstDayOfWeek = firstDay.getDay()
				
				// 生成当前月份的日期数组
				const monthDates = []
				
				// 添加上月的日期（填充第一行）
				if (firstDayOfWeek > 0) {
					const prevMonthLastDay = new Date(this.currentYear, this.currentMonth - 1, 0).getDate()
					for (let i = firstDayOfWeek - 1; i >= 0; i--) {
						const date = new Date(this.currentYear, this.currentMonth - 1, prevMonthLastDay - i)
						monthDates.push({
							value: date.getDate().toString(),
							date: date,
							isSelected: false,
							isOtherMonth: true
						})
					}
				}
				
				// 添加当月的日期
				for (let i = 1; i <= daysInMonth; i++) {
					const date = new Date(this.currentYear, this.currentMonth - 1, i)
					const isToday = date.toDateString() === today.toDateString()
					const isSelected = this.selectedDate ?
						date.toDateString() === this.selectedDate.toDateString() : isToday
					
					monthDates.push({
						value: i.toString(),
						date: date,
						isSelected: isSelected,
						isOtherMonth: false
					})
				}
				
				// 添加下月的日期（填充最后一行）
				const totalCells = Math.ceil(monthDates.length / 7) * 7
				if (monthDates.length < totalCells) {
					const remainingCells = totalCells - monthDates.length
					for (let i = 1; i <= remainingCells; i++) {
						const date = new Date(this.currentYear, this.currentMonth, i)
						monthDates.push({
							value: i.toString(),
							date: date,
							isSelected: false,
							isOtherMonth: true
						})
					}
				}
				
				return monthDates
			},
		},
		onLoad(options) {
			console.log(options);
			this.activeTab = options.tab ? parseInt(options.tab) : 0
			const systemInfo = uni.getSystemInfoSync()
			this.statusBarHeight = systemInfo.statusBarHeight || 0
			this.getData()
			this.getInterviewRecords()
			this.getFavoriteRecords()
		},
		methods: {
			getFavoriteRecords() {
				this.$Request.getT("/app/myCollection/getCompanyCollectionList").then(res => {
					console.log(res);
					this.favoriteRecords = res.data.records //收藏记录
				})
			},
			checkDate(targetDate) {
				const today = new Date();
				const tomorrow = new Date();
				tomorrow.setDate(today.getDate() + 1);

				const inputDate = new Date(targetDate);

				// 重置时间为 00:00:00 进行比较
				today.setHours(0, 0, 0, 0);
				tomorrow.setHours(0, 0, 0, 0);
				inputDate.setHours(0, 0, 0, 0);

				if (inputDate.getTime() === today.getTime()) {
					return 1; // 今天
				} else if (inputDate.getTime() === tomorrow.getTime()) {
					return 2; // 明天
				} else {
					return 0; // 其他日期
				}
			},
			formatDate(date, format = 'YYYY-MM-DD HH:mm:ss') {
				const d = new Date(date);
				const padZero = (num) => String(num).padStart(2, '0');
				const replacements = {
					'YYYY': d.getFullYear(),
					'MM': padZero(d.getMonth() + 1),
					'DD': padZero(d.getDate()),
					'HH': padZero(d.getHours()),
					'mm': padZero(d.getMinutes()),
					'ss': padZero(d.getSeconds()),
					'SSS': padZero(d.getMilliseconds()).padStart(3, '0'),
					'M': d.getMonth() + 1,
					'D': d.getDate(),
					'H': d.getHours(),
					'm': d.getMinutes(),
					's': d.getSeconds()
				};
				return format.replace(/YYYY|MM|DD|HH|mm|ss|SSS|M|D|H|m|s/g, match => replacements[match]);
			},
			getInterviewRecords() {
				this.$Request.getT("/app/interviewRecord/getHrInterviewList").then(res => {
					console.log(res);
					this.interviewRecords = res.data.records //沟通记录
				})
			},
			getYearMonthInterval(startDate, endDate) {
				// 确保传入的是 Date 对象
				const start = new Date(startDate);
				const end = new Date(endDate);
				console.log(start, end, '为啥')
				return;
				// 确保结束日期在开始日期之后
				if (end < start) {
					throw new Error('结束日期必须在开始日期之后');
				}

				// 计算年份差异
				let yearDiff = end.getFullYear() - start.getFullYear();

				// 计算月份差异
				let monthDiff = end.getMonth() - start.getMonth();

				// 如果结束日期的月份小于开始日期的月份，需要借年
				if (monthDiff < 0) {
					yearDiff--;
					monthDiff += 12;
				}

				// 如果月份相同，但结束日期的日期小于开始日期的日期，也需要借月
				if (monthDiff === 0 && end.getDate() < start.getDate()) {
					yearDiff--;
					monthDiff = 11;
				} else if (end.getDate() < start.getDate()) {
					monthDiff--;
				}

				return [yearDiff, monthDiff];
			},
			goBack() {
				uni.navigateBack()
			},
			switchTab(index) {
				this.activeTab = index
			},
			goToResumeDetail(record) {
				console.log('查看简历详情:', record)
				uni.navigateTo({
					url: `/pages/talentSearch/resumeDetail?resumeId=${record.id}`
				})
			},
			selectDate(date) {
				// 选中当前点击的日期
				this.selectedDate = date.date
				console.log('选中日期:', date.date)
			},
			// 切换月份
			changeMonth(direction) {
				let newMonth = this.currentMonth + direction
				let newYear = this.currentYear
				
				if (newMonth < 1) {
					newMonth = 12
					newYear--
				} else if (newMonth > 12) {
					newMonth = 1
					newYear++
				}
				
				this.currentYear = newYear
				this.currentMonth = newMonth
			},
			goToInterviewDetail(record) {
				console.log('查看面试详情:', record)
				uni.navigateTo({
					url: `/my/jilu/bossMianshiDetail?recordId=${record.recordId}`
				})
			},
			goToInterviewManage() {
				console.log('跳转到面试管理')
				uni.navigateTo({
					url: '/pages/recruitmentData/interviewManage'
				})
			},
			getData() {
				this.$Request.getT("/app/chat/chatUser", {
					limit: 50
				}).then(res => {
					console.log(res);
					this.communicationRecords = res.data.records //沟通记录
				})
			},
			goNav(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		height: 100vh;
		overflow: hidden;
	}

	.tab-section-bg {
		position: fixed;
		top: 150rpx;
		left: 0;
		right: 0;
		z-index: 1000;
		background-color: #ffffff;
		padding: 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

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

		.interview-manage {
			color: rgba(1, 107, 246, 1);
			font-family: DM Sans;
			font-size: 28rpx;
			font-weight: 400;
			line-height: 60rpx;
			letter-spacing: 0px;
			text-align: left;
		}
	}

	/* Custom Navbar */
	.custom-navbar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
		background-color: #ffffff;
		padding-top: 80rpx;
	}

	.navbar-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 44px;
		padding: 20rpx;
	}

	.navbar-left {
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.navbar-title {
		color: rgba(51, 51, 51, 1);
		font-family: DM Sans;
		font-size: 30rpx;
		font-weight: 700;
		line-height: 52rpx;
		letter-spacing: 0.5%;
		text-align: center;
	}

	.navbar-right {
		width: 44px;
	}

	/* Tab Section */
	.tab-section {
		position: fixed;
		top: 250rpx;
		left: 0;
		right: 0;
		background: white;
		z-index: 99;
	}

	/* Content Section */
	.content-section {
		margin-top: 330rpx;
		padding: 20rpx 40rpx;
		height: calc(100vh - 330rpx) !important;
		overflow-y: auto;
	}

	/* Date Group */
	.date-group {
		margin-bottom: 20rpx;
	}

	.date-header {
		margin-bottom: 20rpx;
	}

	.date-text {
		color: rgba(153, 153, 153, 1);
		font-family: DM Sans;
		font-size: 16rpx;
		font-weight: 400;
		line-height: 20rpx;
		margin-left: 32rpx;
	}

	/* Talent Card */
	.talent-card {
		background-color: #ffffff;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		padding: 36rpx;
		//   box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.talent-content {
		.talent-header {
			display: flex;
			align-items: flex-start;
			
			.avatar-wrapper {
				position: relative;
				width: 72rpx;
				height: 72rpx;
				border-radius: 50%;
				border: 0.5px solid rgba(240, 240, 240, 1);
				margin-right: 20rpx;
			}

			.talent-avatar {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
			
			.sex-icon {
				position: absolute;
				top: 0;
				right: 0;
				width: 20rpx;
				height: 20rpx;
				background: #fff;
				border-radius: 50%;
			}

			.talent-info {
				flex: 1;

				.talent-name-section {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					width: 100%;
					margin-bottom: 6rpx;
				}

				.talent-name {
					color: rgba(51, 51, 51, 1);
					font-family: DM Sans;
					font-size: 28rpx;
					font-weight: 500;
					line-height: 36rpx;
					letter-spacing: 0.5%;
					text-align: left;
					margin-right: 12rpx;
				}

				.talent-tags {
					display: flex;
					flex-wrap: wrap;
					gap: 10rpx;

					.status-tag {
						padding: 8rpx;
						border-radius: 8rpx;
						font-size: 16rpx;
						font-family: DM Sans;
						font-weight: 400;
						line-height: 20rpx;
						letter-spacing: -0.5px;
						text-align: left;

						&.online {
							background: rgba(213, 255, 231, 1);
							color: rgba(29, 209, 104, 1);
						}

						&.hot {
							background: rgba(1, 107, 246, 0.1);
							color: rgba(1, 107, 246, 1);
						}

						&.active {
							color: rgba(153, 153, 153, 1);
						}
					}
					
					.dot {
						width: 8rpx;
						height: 8rpx;
						border-radius: 50%;
						background: rgba(29, 209, 104, 1);
						border: 1px solid #fff;
						margin-right: 8rpx;
					}
				}
			}
		}

		.talent-experience {
			display: flex;
			align-items: center;
			margin-bottom: 12rpx;
			gap: 16rpx;
			color: rgba(156, 164, 171, 1);
			font-family: DM Sans;
			font-size: 24rpx;
			font-weight: 400;
			line-height: 32rpx;
			letter-spacing: 0.5%;
			text-align: left;
		}

		.current-job {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 12rpx;

			.job-icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 8rpx;
			}

			.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;
				flex: 1;
			}
		}
		.work-period {
			align-self: flex-start;
			min-width: 80rpx;
			word-wrap: nowrap;
			color: rgba(153, 153, 153, 1);
			font-family: DM Sans;
			font-size: 16rpx;
			font-weight: 400;
			line-height: 44rpx;
			text-align: right;
			margin-left: 20rpx;
		}

		.job-expectation {
			display: flex;
			align-items: center;
			margin-bottom: 16rpx;

			.job-icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 8rpx;
			}

			.expectation-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;
			}
		}

		.skill-tags {
			display: flex;
			flex-wrap: wrap;
			gap: 10rpx;
			margin-bottom: 16rpx;

			.skill-tag {
				padding: 8rpx;
				background: rgba(198, 198, 198, 0.1);
				border-radius: 12rpx;
				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;
			}
		}

		.job-description {
			margin-bottom: 12rpx;

			.description-text {
				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;
			}
		}
	}

	/* Interview List Styles */
	.interview-list {
		padding: 0 20rpx;
	}

	/* Date Selector */
	.date-selector {
		background: #ffffff;
		border-radius: 12rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;
	}

	/* Month Switcher */
	.month-switcher {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 24rpx;
	}

	.current-month {
		color: rgba(51, 51, 51, 1);
		font-family: DM Sans;
		font-size: 28rpx;
		font-weight: 700;
		line-height: 36rpx;
	}

	/* Week Days */
	.week-days {
		display: flex;
		justify-content: space-between;
		margin-bottom: 16rpx;
		padding: 0 10rpx;
	}

	.day-name {
		color: rgba(153, 153, 153, 1);
		font-family: DM Sans;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 32rpx;
		text-align: center;
		flex: 1;
	}

	/* Month Dates */
	.month-dates {
		display: flex;
		flex-wrap: wrap;
		padding: 0 10rpx;
	}

	.date-item {
		width: 14.28%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 72rpx;
		// border-radius: 50%;
		cursor: pointer;
		box-sizing: border-box;
	}

	.date-item.active {
		background: rgba(1, 107, 246, 1);
	}

	.date-item.other-month {
		opacity: 0.5;
	}

	.date-value {
		color: rgba(51, 51, 51, 1);
		font-family: DM Sans;
		font-size: 28rpx;
		font-weight: 400;
		line-height: 36rpx;
		text-align: center;
	}

	.date-item.active .date-value {
		color: #ffffff;
	}

	.date-item.other-month .date-value {
		color: rgba(153, 153, 153, 1);
	}

	/* Interview Records */
	.interview-records {
		background: #ffffff;
		border-radius: 12rpx;
		padding: 24rpx 0;
		//    border: 0.5px solid rgba(227, 231, 236, 1);
	}

	.interview-record {
		display: flex;
		position: relative;
		border-radius: 8rpx;
		margin-bottom: 16rpx;
	}

	.interview-record.today {
		background: #fff;
		
		.record-content {
			background: rgba(1, 107, 246, 0.1);
			
			.record-right {
				border-left: 5px solid rgba(1, 107, 246, 1);
				background: rgba(1, 107, 246, 0.1);
				.candidate-name,
				.candidate-details{
					color: rgba(1, 107, 246, 1);
				}
			}
		}
	}

	.interview-record:not(.today) {
		background: rgba(221, 221, 221, 1);
	}

	.interview-record:last-child {
		margin-bottom: 0;
	}


	/* Record Content */
	.record-content {
		flex: 1;
		display: flex;
		align-items: center;
		
	}

	.record-left {
		width: 25%;
		display: flex;
		flex-direction: column;
		min-width: 80rpx;
		padding: 32rpx;
	}

	.record-divider {
		width: 10rpx;
		height: 100%;
		background: rgba(1, 107, 246, 1);
	}

	.record-right {
		height: 100%;
		flex: 1;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		border-left: 5px solid rgba(91, 91, 91, 1);
		border-radius: 0px 6px 6px 0px;
		// background: rgba(1, 107, 246, 0.1);
		padding: 28rpx 16rpx;
	}

	.date-label {
		color: rgba(106, 106, 106, 1);
		font-family: DM Sans;
		font-size: 16rpx;
		font-weight: 400;
		line-height: 40rpx;
		letter-spacing: 0.5%;
		text-align: right;
	}

	.time-label {
		color: rgba(106, 106, 106, 1);
		font-family: DM Sans;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 32rpx;
		letter-spacing: 0.5%;
		text-align: left;
	}

	.candidate-name {
		color: rgba(51, 51, 51, 1);
		font-family: DM Sans;
		font-size: 28rpx;
		font-weight: 400;
		line-height: 36rpx;
		margin-bottom: 8rpx;
	}

	.candidate-details {
		color: rgba(102, 102, 102, 1);
		font-family: DM Sans;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 32rpx;
	}

	/* Empty State - 与jobManagement页面保持一致 */
	.empty-state {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 40rpx;

		.empty-illustration {
			margin-bottom: 40rpx;

			.empty-image {
				width: 700rpx;
				height: 800rpx;
			}
		}

		.empty-text {
			color: rgba(120, 130, 138, 1);
			font-family: DM Sans;
			font-size: 28rpx;
			font-weight: 400;
			line-height: 36rpx;
			letter-spacing: 0.5%;
			text-align: center;
		}
	}

	.qyList {
		width: 100%;
		height: auto;
		margin-top: 20rpx;

		.qyList-box {
			width: 686rpx;
			height: 100%;

			.qyList-box-item {
				width: 100%;
				// height: 400rpx;
				padding-bottom: 40rpx;
				background-color: #ffffff;
				border-radius: 24rpx;
				margin-bottom: 20rpx;

				.qyList-box-item-box {
					width: 626rpx;
					height: 100%;
				}

				.qyList-box-item-info {
					margin-top: 40rpx;
				}

				.qyList-box-item-job {
					color: #121212;
					font-size: 28rpx;
					font-weight: 500;
					margin-top: 20rpx;
				}

				.qyList-box-item-rem {
					color: #999999;
					font-size: 26rpx;
					margin-top: 20rpx;
				}
			}
		}
	}
	.txt-desc{
		color: rgba(153, 153, 153, 1);
		font-family: DM Sans;
		font-size: 20rpx;
		font-weight: 400;
		line-height: 34rpx;
		letter-spacing: 0%;
		flex: 1;
	}
</style>