yizhizan-h5/pages/recruitmentData/dataCenter.vue

<template>
  <view class="page">
    <!-- Custom Navbar -->
    <view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
      <view class="navbar-content">
        <view class="navbar-left" @click="goBack">
          <u-icon name="arrow-leftward" color="white" size="36"></u-icon>
        </view>
        <view class="navbar-title">招聘数据中心</view>
        <view class="navbar-right"></view>
      </view>
    </view>

    <!-- Filter Section -->
    <view class="filter-section">
      <view class="filter-buttons">
        <view class="filter-btn" @click="selectDateRange">
          <text class="filter-text">2025.07.30-08.06</text>
          <u-icon name="arrow-down" color="#016BF6" size="16"></u-icon>
        </view>
        <view class="filter-btn" @click="selectPosition">
          <text class="filter-text">亚马逊运营总监</text>
          <u-icon name="arrow-down" color="#016BF6" size="16"></u-icon>
        </view>
      </view>
    </view>

     <!-- Content Section -->
     <view class="content-section">
       <!-- Recruitment Progress Card -->
       <view class="card-header">
         <text class="hearder-title">招聘进展</text>
       </view>

       <!-- New Card -->
       <view class="data-card">
         <view class="card-header">
           <view class="card-title">
             <view class="card-icon-wrapper">
               <image src="/static/images/eye.svg" class="card-icon" mode="aspectFit"></image>
             </view>
             <text>查看</text>
           </view>
         </view>
         <view class="card-content">
           <view class="data-row">
             <view class="data-item">
               <text class="data-label">我看过</text>
               <view class="data-value-wrapper">
                 <text class="data-value">1120</text>
                 <text class="data-unit">人</text>
               </view>
             </view>
             <view class="data-item">
               <text class="data-label">看过我</text>
               <view class="data-value-wrapper">
                 <text class="data-value">2120</text>
                 <text class="data-unit">人</text>
               </view>
             </view>
           </view>
         </view>
       </view>

       <view class="data-card">
         <view class="card-header">
           <view class="card-title">
             <view class="card-icon-wrapper">
               <image src="/static/images/goutong.svg" class="card-icon" mode="aspectFit"></image>
             </view>
             <text>沟通</text>
           </view>
         </view>
         <view class="card-content">
           <view class="data-row">
             <view class="data-item">
               <text class="data-label">我沟通</text>
               <view class="data-value-wrapper">
                 <text class="data-value">1120</text>
                 <text class="data-unit">人</text>
               </view>
             </view>
             <view class="data-item">
               <text class="data-label">求职者</text>
               <view class="data-value-wrapper">
                 <text class="data-value">2120</text>
                 <text class="data-unit">人</text>
               </view>
             </view>
           </view>
         </view>
       </view>

       <view class="data-card">
         <view class="card-header">
           <view class="card-title">
             <view class="card-icon-wrapper">
               <image src="/static/images/lianxi.svg" class="card-icon" mode="aspectFit"></image>
             </view>
             <text>获取简历联系方式</text>
           </view>
         </view>
         <view class="card-content">
           <view class="data-row">
             <view class="data-item">
               <text class="data-label">合计</text>
               <view class="data-value-wrapper">
                 <text class="data-value">1120</text>
                 <text class="data-unit">人</text>
               </view>
             </view>
             <view class="data-item">
               <text class="data-label">获取简历</text>
               <view class="data-value-wrapper">
                 <text class="data-value">2120</text>
                 <text class="data-unit">人</text>
               </view>
             </view>
             <view class="data-item">
               <text class="data-label">交换电话</text>
               <view class="data-value-wrapper">
                 <text class="data-value">2120</text>
                 <text class="data-unit">人</text>
               </view>
             </view>
             <view class="data-item">
               <text class="data-label">交换微信</text>
               <view class="data-value-wrapper">
                 <text class="data-value">2120</text>
                 <text class="data-unit">人</text>
               </view>
             </view>
           </view>
         </view>
       </view>

       <view class="data-card">
         <view class="card-header">
           <view class="card-title">
             <view class="card-icon-wrapper">
               <image src="/static/images/huoqu.svg" class="card-icon" mode="aspectFit"></image>
             </view>
             <text>获取简历联系方式</text>
           </view>
         </view>
         <view class="card-content">
           <view class="data-row">
             <view class="data-item">
               <text class="data-label">邀约面试</text>
               <view class="data-value-wrapper">
                 <text class="data-value">1120</text>
                 <text class="data-unit">人</text>
               </view>
             </view>
             <view class="data-item">
               <text class="data-label">接受面试</text>
               <view class="data-value-wrapper">
                 <text class="data-value">2120</text>
                 <text class="data-unit">人</text>
               </view>
             </view>
           </view>
         </view>
       </view>
     </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 0
    }
  },
  onLoad() {
    const systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = systemInfo.statusBarHeight || 0
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    goToCommunicationRecords() {
      uni.navigateTo({
        url: '/pages/recruitmentData/communicationRecords'
      })
    },
    selectDateRange() {
      console.log('选择日期范围')
    },
    selectPosition() {
      console.log('选择职位')
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  background: linear-gradient(180.00deg, rgba(255, 102, 0, 1),rgba(255, 102, 0, 0) 100%);
  background-size: 100% 35%;
  background-position: center top;
  background-repeat: no-repeat;
  min-height: 100vh;
}

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

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

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

.navbar-title {
  color: rgba(255, 255, 255, 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;
}

/* Filter Section */
.filter-section {
  padding: 180rpx 32rpx 32rpx 32rpx;
}

.filter-buttons {
  display: flex;
  gap: 20rpx;
}

.filter-btn {
  flex: 1;
  padding: 16rpx 20rpx;
  background: rgba(255, 255, 255, 1);
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
}

.filter-text {
    color: rgba(1, 107, 246, 1);
    font-family: DM Sans;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 32rpx;
    letter-spacing: -0.5px;
    text-align: center;
}

/* Content Section */
.content-section {
  margin: 0 32rpx 32rpx 32rpx;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 1);
  border-radius: 12rpx;
  border: 0.5px solid rgba(227, 231, 236, 1);
  padding: 32rpx 20rpx;
}

.data-card {
  background: rgba(255, 255, 255, 1);
  border-radius: 12rpx;
  padding: 24rpx; 
  border: 0.5px solid rgba(227, 231, 236, 1);
  margin-top: 24rpx;
}

.hearder-title {
    color: rgba(23, 23, 37, 1);
    font-family: DM Sans;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 44rpx;
    letter-spacing: 0.5%;
    text-align: left;
}

 .card-title {
   display: flex;
   align-items: center;
   gap: 12rpx;
 }

 .card-icon-wrapper {
   width: 32rpx;
   height: 32rpx;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .card-icon {
   width: 32rpx;
   height: 32rpx;
 }

 .card-title text {
    color: rgba(102, 102, 102, 1);
    font-family: DM Sans;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 32rpx;
    letter-spacing: 0%;
    text-align: left;
 }

 .card-content {
   margin-top: 12rpx;
 }

 .data-row {
   display: flex;
   gap: 24rpx;
 }

 .data-item {
//    flex: 1;
//    display: flex;
//    flex-direction: column;
//    align-items: flex-start;
 }

 .data-label {
    color: rgba(102, 102, 102, 1);
    font-family: DM Sans;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 32rpx;
    letter-spacing: 0%;
    text-align: left;
   margin-bottom: 12rpx;
 }

 .data-value-wrapper {
   display: flex;
   align-items: baseline;
   gap: 4rpx;
 }

 .data-value {
    color: rgba(51, 51, 51, 1);
    font-family: DM Sans;
    font-size: 40rpx;
    font-weight: 400;
    line-height: 52rpx;
    letter-spacing: 0%;
    text-align: left;
 }

 .data-unit {
   color: rgba(153, 153, 153, 1);
   font-family: DM Sans;
   font-size: 24rpx;
   font-weight: 400;
   line-height: 32rpx;
 }
</style>