pet-system-fulfiller-app/pages/recruit/landing.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>
import logic from './landing.js';
export default logic;
</script>

<style>
@import './landing.css';
</style>