pet-system-fulfiller-app/pages/recruit/landing/index.vue

<template>
  <view class="container">
    <!-- 状态栏占位 -->
    <view :style="{ height: statusBarHeight + 'px' }"></view>

    <!-- 自定义导航栏 (返回按钮) -->
    <view class="nav-bar">
      <view class="back-icon" @click="goBack">‹</view>
    </view>

    <!-- 标题区域 -->
    <view class="header-area">
      <text class="main-title">加入宠宝履约者</text>
      <text class="sub-title">月薪最高可达1.5万元</text>
    </view>

    <!-- 白色内容卡片 -->
    <view class="content-card">
      <view class="benefit-item">
        <view class="icon-circle icon-money">
          <text class="icon-text">￥</text>
        </view>
        <view class="info">
          <text class="item-title">1、收入可观</text>
          <text class="item-desc">小默配送为您提供一种全新的赚钱选择，利用空闲时间，获得更多收入。</text>
        </view>
      </view>

      <view class="benefit-item">
        <view class="icon-circle icon-loc">
          <text class="icon-text">📍</text>
        </view>
        <view class="info">
          <text class="item-title">2、地点灵活</text>
          <text class="item-desc">小默配送覆盖国内各城市与港澳台等地，您可随时就近使用。</text>
        </view>
      </view>

      <view class="benefit-item">
        <view class="icon-circle icon-clock">
          <text class="icon-text">🕒</text>
        </view>
        <view class="info">
          <text class="item-title">3、时间自由</text>
          <text class="item-desc">不必再受繁琐事务约束，加入小默配送，自由分配个人时间，为自己工作。</text>
        </view>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="footer-area">
      <button class="join-btn" @click="goToForm">我要加入</button>
      <view class="faq">
        <text class="help-icon">?</text> 常见问题
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 20,
    }
  },
  onLoad() {
    const sysInfo = uni.getSystemInfoSync();
    this.statusBarHeight = sysInfo.statusBarHeight || 20;
  },
  methods: {
    goBack() {
      const pages = getCurrentPages();
      if (pages.length > 1) {
        uni.navigateBack();
      } else {
        uni.reLaunch({ url: '/pages/login/index' });
      }
    },
    goToForm() {
      uni.navigateTo({ url: '/pages/recruit/form/index' });
    }
  }
}
</script>

<style>
page {
  background-color: #FF9800;
}

.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

.nav-bar {
  height: 88rpx;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
}

.back-icon {
  font-size: 60rpx;
  color: #fff;
  font-weight: bold;
  width: 60rpx;
  height: 60rpx;
  line-height: 56rpx;
  text-align: center;
  display: block;
}

.header-area {
  padding: 40rpx 40rpx 20rpx;
  color: #fff;
  text-align: center;
}

.main-title {
  font-size: 48rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 20rpx;
}

.sub-title {
  font-size: 32rpx;
  opacity: 0.9;
  display: block;
}

.content-card {
  background-color: #fff;
  border-radius: 30rpx;
  margin: 40rpx 30rpx;
  padding: 60rpx 40rpx;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
}

.benefit-item {
  display: flex;
  align-items: center;
  margin-bottom: 60rpx;
}

.icon-circle {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 30rpx;
  flex-shrink: 0;
  color: #fff;
  font-weight: bold;
}

.icon-money {
  background-color: #26A69A;
}

.icon-loc {
  background-color: #2979FF;
}

.icon-clock {
  background-color: #FF7043;
}

.icon-text {
  font-size: 40rpx;
}

.info {
  flex: 1;
}

.item-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
  display: block;
}

.item-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
  display: block;
}

.footer-area {
  margin-top: auto;
  padding: 20rpx 40rpx 80rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.join-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background: #fff;
  color: #FF5722;
  font-size: 34rpx;
  font-weight: bold;
  border-radius: 45rpx;
  box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
}

.join-btn::after {
  border: none;
}

.faq {
  margin-top: 30rpx;
  color: #fff;
  font-size: 26rpx;
  display: flex;
  align-items: center;
}

.help-icon {
  width: 30rpx;
  height: 30rpx;
  border: 1px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20rpx;
  margin-right: 10rpx;
  color: #fff;
}
</style>