yizhizan-h5/pages/recruitmentData/index.vue

<template>
  <view class="page">
    <!-- 背景层 -->
    <view class="detail-bg"></view>
    
    <!-- 导航栏 -->
    <nav-bar title="招聘数据"></nav-bar>

    <!-- 可滚动内容区域 -->
    <view class="content">
      <!-- 头部区域 -->
      <view class="header-section">
        <view class="header-content">
          <view class="main-title">我的招聘数据</view>
          <view class="week-data-btn" @click="toggleWeekData">
            <image src="/static/images/zhoushuju.svg" class="week-icon" mode="aspectFit"></image>
            <text class="btn-text">周数据</text>
          </view>
        </view>
      </view>

      <!-- 内容区域 -->
      <view class="content-section">
      <!-- 今日数据卡片 -->
      <view class="today-data-card">
        <view class="card-header">
          <view class="card-title">
            <text>今日数据</text>
            <image src="/static/images/qiehuan.svg" class="switch-icon" mode="aspectFit" @click="goToDataCenter"></image>
          </view>
          <view class="filter-btn" @click="goToDataCenter">
            <text class="filter-text">亚马逊运营总监</text>
            <u-icon name="arrow-down" color="#016BF6" size="16"></u-icon>
          </view>
        </view>
        
        <view class="data-grid">
          <view 
            class="data-item" 
            v-for="(item, index) in todayData" 
            :key="index"
            @click="showDetail(item)"
        >
            <view class="data-title">{{ item.title }}</view>
              <view class="data-compare">
                <view class="data-number">{{ item.number }}</view>
                    <view class="data-compare-text">
                        <text class="compare-text">较昨日</text>
                        <text class="compare-change">{{ item.change }}</text>
                        <u-icon name="arrow-right" color="#999" size="24"></u-icon>
                    </view>
               </view>
            </view>
        </view>
      </view>

      <!-- 今日权益使用量卡片 -->
      <view class="benefits-card">
        <view class="card-title">今日权益使用量</view>
        
        <view class="benefits-list">
          <view 
            class="benefit-item" 
            v-for="(benefit, index) in benefitsData" 
            :key="index"
          >
            <!-- 图标、查看和急聘标签区域 -->
            <view class="benefit-header">
              <view class="benefit-icon-container">
                <image :src="getBenefitIcon(benefit.action)" class="benefit-icon" mode="aspectFit"></image>
                <text class="benefit-action">{{ benefit.action }}</text>
                <text v-if="benefit.isUrgent" class="urgent-tag">急聘</text>
              </view>
            </view>
            
            <!-- 招聘职位和进度条区域 -->
            <view class="benefit-content">
              <view class="benefit-type-container">
                <text class="benefit-type">{{ benefit.type }}</text>
              </view>
              
              <view class="progress-container">
                <u-line-progress 
                  :percent="(benefit.used / benefit.total * 100)"
                  :show-percent="false"
                  :height="12"
                  active-color="#016BF6"
                  inactive-color="#E3E7EC"
                ></u-line-progress>
                <text class="progress-text">{{ benefit.used }}/{{ benefit.total }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    </view>
  </view>
</template>

<script>
import navBar from "@/components/nav-bar/index.vue";

export default {
  components: {
    navBar
  },
  data() {
    return {
      statusBarHeight: 0,
      todayData: [
        { title: '我看过', number: 1120, change: -9 },
        { title: '看过我', number: 1120, change: -9 },
        { title: '我沟通', number: 1120, change: -9 },
        { title: '求职者沟通', number: 1120, change: -9 },
        { title: '收获简历', number: 1120, change: -9 },
        { title: '交换电话微信', number: 1120, change: -9 },
        { title: '接受面试', number: 1120, change: -9 }
      ],
      benefitsData: [
        {
          action: '查看',
          type: '招聘职位',
          used: 4,
          total: 10,
          isUrgent: false
        },
        {
          action: '沟通',
          type: '招聘职位',
          used: 4,
          total: 10,
          isUrgent: false
        },
        {
          action: '查看',
          type: '急聘职位',
          used: 4,
          total: 10,
          isUrgent: true
        },
        {
          action: '沟通',
          type: '急聘职位',
          used: 4,
          total: 10,
          isUrgent: true
        }
      ]
    }
  },
  onLoad() {
    // 获取状态栏高度
    const systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = systemInfo.statusBarHeight || 0
  },
  methods: {
    getBenefitIcon(action) {
      switch(action) {
        case '查看':
          return '/static/images/eye.svg'
        case '沟通':
          return '/static/images/goutong.svg'
        default:
          return '/static/images/eye.svg'
      }
    },
    goBack() {
      uni.navigateBack()
    },
    goToDataCenter() {
      uni.navigateTo({
        url: '/pages/recruitmentData/dataCenter'
      })
    },
    toggleWeekData() {
      // 切换周数据视图
      console.log('切换周数据')
    },
    showDetail(item) {
      // 显示详情
      console.log('显示详情:', item)
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.detail-bg {
    height: 327px;
    width: 100%;
    background: linear-gradient(180deg, rgba(255, 102, 0, 1), rgba(255, 102, 0, 0) 100%);
    position: absolute;
}

.content {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
    z-index: 0;
}

/* 自定义导航栏 */
.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;
  padding: 0 20rpx;
}

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

/* 头部区域 */
.header-section {
  padding: 40rpx 32rpx 0rpx 32rpx;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

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

.week-data-btn {
  background: rgba(255, 255, 255, 1);
  border-radius: 20px;
  padding: 12rpx 28rpx;
  display: flex;
  align-items: center;
  gap: 8rpx;
}

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

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

.calendar-icon {
  color: white;
  font-size: 12px;
}

/* 内容区域 */
.content-section {
  padding: 32rpx;
}

/* 今日数据卡片 */
.today-data-card {
    padding: 32rpx 20rpx;
    box-sizing: border-box;
    border: 0.5px solid rgba(227, 231, 236, 1);
    border-radius: 6px;
    background: rgba(255, 255, 255, 1);
    margin-bottom: 20rpx;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

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

.switch-icon {
  width: 18rpx;
  height: 18rpx;
  margin-left: 12rpx;
}

.filter-btn {
    padding: 8rpx;
    box-sizing: border-box;
    border: 0.5px solid rgba(1, 107, 246, 1);
    border-radius: 8rpx;
    background: rgba(252, 233, 220, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8rpx;
}

.filter-text {
    color: rgba(1, 107, 246, 1);
    font-family: DM Sans;
    font-size: 16rpx;
    font-weight: 400;
    line-height: 20rpx;
}

/* 数据网格 */
.data-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.data-item {
    padding: 24rpx;
    box-sizing: border-box;
    border: 0.5px solid rgba(227, 231, 236, 1);
    border-radius: 6px;
    background: rgba(255, 255, 255, 1);
}

.data-title {
    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;
}

.data-number {
    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-compare-text {
    gap: 8rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.data-compare {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.compare-text {
    color: rgba(153, 153, 153, 1);
    font-family: DM Sans;
    font-size: 20rpx;
    font-weight: 400;
    line-height: 26rpx;
    letter-spacing: 0%;
    text-align: left;
}

.compare-change {
    color: var(--016BF6, rgba(1, 107, 246, 1));
    font-family: DM Sans;
    font-size: 20rpx;
    font-weight: 400;
    line-height: 26rpx;
    letter-spacing: 0%;
    text-align: left;
}


/* 权益使用量卡片 */
.benefits-card {
    padding: 32rpx 20rpx;
    box-sizing: border-box;
    border: 0.5px solid rgba(227, 231, 236, 1);
    border-radius: 6px;
    background: rgba(255, 255, 255, 1);
}

.benefits-list {
  margin-top: 32rpx;
}

.benefit-item {
  background: rgba(255, 255, 255, 1);
  border: 0.5px solid rgba(227, 231, 236, 1);
  border-radius: 6px;
  padding: 24rpx;
  margin-bottom: 16rpx;
}

.benefit-item:last-child {
  margin-bottom: 0;
}

.benefit-header {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 16rpx;
}

.benefit-icon-container {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.benefit-action {
    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;
}

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

.benefit-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16rpx;
}

.benefit-type-container {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.benefit-type {
    color: rgba(153, 153, 153, 1);
    font-family: DM Sans;   
    font-size: 20rpx;
    font-weight: 400;
    line-height: 26rpx;
    letter-spacing: 0%;
    text-align: left;
}

.urgent-tag {
  background: rgba(236, 225, 253, 1);
  padding: 8rpx;
  border: 1px solid rgba(106, 84, 214, 1);
  border-radius: 8rpx;
  color: rgba(106, 84, 214, 1);
  font-family: DM Sans;
  font-size: 16rpx;
  font-weight: 400;
  line-height: 20rpx;
  letter-spacing: 0%;
  text-align: left;
}

.progress-container {
  display: flex;
  align-items: center;
  gap: 16rpx;
  flex: 1;
}

.progress-text {
  color: rgba(153, 153, 153, 1);
  font-family: DM Sans;
  font-size: 20rpx;
  font-weight: 400;
  line-height: 26rpx;
  min-width: 60rpx;
  text-align: right;
}
</style>