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"
        :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">
                   <image :src="record.userAvatar" class="talent-avatar" mode="aspectFill"></image>
                   <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" v-if="record.isOnline">在线</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 }} {{ record.minSalary }}-{{record.maxSalary}}</text>
                       <text class="status-text">{{ record.resumesStatus==1?'在职&考虑机会':"离职" }}</text>
                     </view>
                   </view>
                 </view>
                 
                 <!-- 当前职位 -->
                 <view class="current-job" v-if="record.companyName">
                   <image src="../../static/images/aixin.svg" class="job-icon" mode="aspectFit"></image>
                   <text class="job-text">{{ record.companyName }}</text>
                   <text class="work-period">
                    <span v-if="getYearMonthInterval(record.lastWorkStartTime, record.lastWorkEndTime)[0] > 0">{{ getYearMonthInterval(record.lastWorkStartTime, record.lastWorkEndTime)[0] }}年</span>
                    {{ getYearMonthInterval(record.lastWorkStartTime, record.lastWorkEndTime)[1] }}个月</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.skillName.split(',')" 
                     :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">
           <view class="week-days">
             <text class="day-name" v-for="day in currentWeekDays" :key="day.name">{{ day.name }}</text>
           </view>
           <view class="week-dates">
             <view 
               class="date-item" 
               :class="{ active: date.isSelected }" 
               v-for="date in currentWeekDates" 
               :key="date.value"
               @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-divider"></view>
                 <view class="record-right">
                   <text class="candidate-name">{{ record.resumesListDto[0].userName }}</text>
                   <text class="candidate-details">{{ record.resumesListDto[0].resumesWorkExperience }}年 {{ record.resumesListDto[0].degree }} {{ record.resumesListDto[0].minSalary }}-{{ record.resumesListDto[0].maxSalary }}</text>
                 </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>

       <!-- 收藏标签页 -->
       <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">
                <view class="qyList-box-item-info-l">
                  <view
                    class=""
                    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].school }}</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">
                <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-job flex align-center"
              >
                <image
                  src="../../static/images/qi.png"
                  style="width: 30rpx; height: 32rpx; margin-right: 16rpx"
                  mode=""
                ></image>
                {{ item.resumesListDto[0].companyName }} /
                {{ item.resumesListDto[0].lastWorkPosition }}
              </view>
              <view class="qyList-box-item-rem" v-if="item.resumesDetails">
                优势:{{ item.resumesListDto[0].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: [
       ]
     }
  },
   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)
             if (!groups[date]) {
               groups[date] = { date, records: [] }
             }
             groups[date].records.push(record)
           })
     
         return Object.values(groups)
       },
     // 当前周的星期名称
     currentWeekDays() {
       const weekDays = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
       return weekDays.map(name => ({ name }))
     },
     // 当前周的日期
     currentWeekDates() {
       const today = new Date()
       const currentDay = today.getDay() // 0-6，0是周日
       
       // 获取本周一的日期（周一开始）
       const monday = new Date(today)
       // 如果今天是周日(0)，则往前推6天到周一
       // 如果今天是周一(1)，则往前推0天
       // 如果今天是周二(2)，则往前推1天
       const daysToMonday = currentDay === 0 ? 6 : currentDay - 1
       monday.setDate(today.getDate() - daysToMonday)
       
       // 生成本周7天的日期
       const weekDates = []
       for (let i = 0; i < 7; i++) {
         const date = new Date(monday)
         date.setDate(monday.getDate() + i)
         
         const isToday = date.toDateString() === today.toDateString()
         const isSelected = this.selectedDate ? 
           date.toDateString() === this.selectedDate.toDateString() : isToday
         
         weekDates.push({
           value: date.getDate().toString(),
           date: date,
           isSelected: isSelected
         })
       }
       
       return weekDates
     }
   },
  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);

      // 确保结束日期在开始日期之后
      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)
     },
    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").then(res=>{
			console.log(res);
			this.communicationRecords = res.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;
  height: calc(100vh - 330rpx) !important;
  overflow-y: auto;
}

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

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

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

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

.talent-content {
  .talent-header {
    display: flex;
    align-items: flex-start;
    
    .talent-avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      margin-right: 20rpx;
    }
    
    .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: 16rpx;
      }
      
      .talent-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 10rpx;
        
        .status-tag {
          padding: 8rpx;
          border-radius: 12rpx;
          font-size: 18rpx;
          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(252, 233, 220, 1);
            color: rgba(1, 107, 246, 1);
          }
          
          &.active {
            color: rgba(153, 153, 153, 1);
          }
        }
      }
    }
  }
  
  .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;
    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 {
      color: rgba(153, 153, 153, 1);
      font-family: DM Sans;
      font-size: 22rpx;
      font-weight: 400;
      line-height: 28rpx;
    }
  }
  
  .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 0;
//    margin-bottom: 20rpx;
//    border: 0.5px solid rgba(227, 231, 236, 1);
 }

 .week-days {
   display: flex;
   justify-content: space-between;
   margin-bottom: 16rpx;
 }

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

 .week-dates {
   display: flex;
   justify-content: space-between;
 }

 .date-item {
   flex: 1;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 60rpx;
   border-radius: 50%;
   cursor: pointer;
   min-width: 60rpx;
   max-width: 60rpx;
 }

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

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

 /* 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: rgba(250, 187, 143, 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;
   gap: 24rpx;
 }

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

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

 .record-right {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 8rpx;
 }

 .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: 32rpx;
   font-weight: 600;
   line-height: 40rpx;
 }

 .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;
      }
    }
  }
}
 </style>