<!--登录页面 - 现代化设计 + 系统适配-->
<view class="login-container" style="height: {{windowHeight}}px; padding-top: {{statusBarHeight + 40}}px; padding-bottom: {{safeAreaBottom + 40}}px;">
  
  <!-- 顶部Logo区域 -->
  <view class="header-section">
    <view class="app-logo">
      <image class="logo-image" src="/images/logo.png" mode="aspectFit"></image>
      <view class="logo-rings">
        <view class="ring ring-1"></view>
        <view class="ring ring-2"></view>
        <view class="ring ring-3"></view>
      </view>
    </view>
    <text class="app-title">{{appName}}</text>
    <view class="typewriter-container">
      <view class="typewriter-text">
        <text class="typewriter-char">用</text>
        <text class="typewriter-char">心</text>
        <text class="typewriter-char">选</text>
        <text class="typewriter-char">走</text>
        <text class="typewriter-char">进</text>
        <text class="typewriter-char">生</text>
        <text class="typewriter-char">活</text>
        <text class="typewriter-char comma">，</text>
        <text class="typewriter-char">从</text>
        <text class="typewriter-char">虚</text>
        <text class="typewriter-char">拟</text>
        <text class="typewriter-char">走</text>
        <text class="typewriter-char">向</text>
        <text class="typewriter-char">真</text>
        <text class="typewriter-char">实</text>
      </view>
      <view class="typewriter-cursor"></view>
    </view>
  </view>

  <!-- 登录表单 -->
  <view class="form-section">
    <view class="form-container">
      <!-- 手机号输入 -->
      <view class="input-group">
        <text class="input-label">手机号</text>
        <view class="input-container">
          <view class="input-icon">📱</view>
          <input 
            class="phone-input" 
            type="number" 
            placeholder="请输入手机号" 
            maxlength="11"
            value="{{phoneNumber}}"
            bindinput="onPhoneInput"
            placeholder-class="input-placeholder"
          />
          <view class="input-clear {{phoneNumber ? 'show' : ''}}" bindtap="clearPhone">
            <text class="clear-icon">✕</text>
          </view>
        </view>
      </view>

      <!-- 验证码输入 -->
      <view class="input-group">
        <text class="input-label">验证码</text>
        <view class="input-container code-container">
          <view class="input-icon">🔐</view>
          <input 
            class="code-input" 
            type="number" 
            placeholder="请输入验证码" 
            maxlength="6"
            value="{{verifyCode}}"
            bindinput="onCodeInput"
            placeholder-class="input-placeholder"
          />
          <view 
            class="code-button {{canSendCode ? 'active' : 'disabled'}}" 
            bindtap="sendVerifyCode"
          >
            <text class="code-button-text">{{codeButtonText}}</text>
          </view>
        </view>
      </view>

      <!-- 登录按钮 -->
      <view 
        class="login-button {{canLogin ? 'active' : 'disabled'}}" 
        bindtap="handleLogin"
      >
        <view class="login-content">
          <view class="login-icon" wx:if="{{isLogging}}">⏳</view>
          <view class="login-icon" wx:else>🚀</view>
          <text class="login-text">{{isLogging ? '登录中...' : '立即登录'}}</text>
        </view>
        <view class="login-bg-animation"></view>
      </view>

      <!-- 微信登录 -->
      <view class="wechat-section">
        <view class="divider">
          <view class="divider-line"></view>
          <text class="divider-text">或使用微信登录</text>
          <view class="divider-line"></view>
        </view>
        
        <view class="wechat-button {{isWechatLogging ? 'loading' : ''}}" bindtap="wechatLogin">
          <view class="wechat-content">
            <view class="wechat-icon">💬</view>
            <text class="wechat-text">{{isWechatLogging ? '微信登录中...' : '微信快捷登录'}}</text>
          </view>
          <view class="wechat-animation" wx:if="{{isWechatLogging}}">
            <view class="bounce bounce-1"></view>
            <view class="bounce bounce-2"></view>
            <view class="bounce bounce-3"></view>
          </view>
        </view>
      </view>
    </view>
  </view>

  <!-- 协议区域 -->
  <view class="agreement-section">
    <view class="agreement-container">
      <view class="agreement-checkbox" bindtap="toggleAgreement">
        <view class="checkbox {{agreedToTerms ? 'checked' : ''}}">
          <text class="check-icon" wx:if="{{agreedToTerms}}">✓</text>
        </view>
      </view>
      <view class="agreement-text">
        <text class="agreement-normal">我已阅读并同意</text>
        <text class="link-text" bindtap="showUserAgreement">《用户协议》</text>
        <text class="agreement-normal">和</text>
        <text class="link-text" bindtap="showPrivacyPolicy">《隐私政策》</text>
      </view>
    </view>
  </view>

  <!-- 装饰性背景元素 - 增强版 -->
  <view class="background-decorations">
    <view class="decoration decoration-1">✨</view>
    <view class="decoration decoration-2">🌟</view>
    <view class="decoration decoration-3">💫</view>
    <view class="decoration decoration-4">⭐</view>
    <view class="decoration decoration-5">✨</view>
    <view class="decoration decoration-6">🌟</view>
    <view class="floating-particle particle-1"></view>
    <view class="floating-particle particle-2"></view>
    <view class="floating-particle particle-3"></view>
    <view class="floating-particle particle-4"></view>
  </view>

  <!-- 版本信息 -->
  <view class="version-info">
    <text class="version-text">v{{appVersion}}</text>
  </view>
</view> 