You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
148 lines
5.8 KiB
148 lines
5.8 KiB
<view class="login-container">
|
|
<!-- 顶部波浪背景 -->
|
|
<view class="wave-background">
|
|
<view class="wave wave-1"></view>
|
|
<view class="wave wave-2"></view>
|
|
<view class="wave wave-3"></view>
|
|
</view>
|
|
|
|
<!-- 装饰元素 - 兽医主题 -->
|
|
<view class="decorations">
|
|
<view class="cloud cloud-1"></view>
|
|
<view class="cloud cloud-2"></view>
|
|
<view class="cloud cloud-3"></view>
|
|
<view class="medical-icon icon-1">🐾</view>
|
|
<view class="medical-icon icon-2">💊</view>
|
|
<view class="medical-icon icon-3">🏥</view>
|
|
</view>
|
|
|
|
<!-- 主要内容区域 -->
|
|
<view class="main-content">
|
|
<!-- Logo区域 -->
|
|
<view class="logo-section">
|
|
<view class="logo-container">
|
|
<view class="logo-circle">
|
|
<view class="logo-inner">
|
|
<text class="logo-text">牧</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<text class="app-title">牧医通</text>
|
|
<text class="app-subtitle">Veterinary Assistant</text>
|
|
</view>
|
|
|
|
<!-- 登录区域 -->
|
|
<view class="login-section">
|
|
<view class="welcome-text">
|
|
<text class="welcome-main">欢迎登录</text>
|
|
<text class="welcome-desc">请输入您的手机号密码</text>
|
|
</view>
|
|
|
|
<!-- 账号输入框 -->
|
|
<view class="input-group">
|
|
<view class="input-wrapper {{accountFocus ? 'input-focused' : ''}}">
|
|
<image class="input-icon" src="/pages/images/zh.png" mode=""/>
|
|
<input
|
|
type="text"
|
|
placeholder="请输入手机号"
|
|
placeholder-class="input-placeholder"
|
|
value="{{account}}"
|
|
bindinput="onAccountInput"
|
|
bindfocus="onAccountFocus"
|
|
bindblur="onAccountBlur"
|
|
maxlength="20"
|
|
confirm-type="next"
|
|
bindconfirm="focusPassword"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 密码输入框 -->
|
|
<view class="input-wrapper {{passwordFocus ? 'input-focused' : ''}}">
|
|
<image class="input-icon" src="/pages/images/mm.png" mode=""/>
|
|
<input
|
|
type="{{passwordVisible ? 'text' : 'password'}}"
|
|
placeholder="请输入密码"
|
|
placeholder-class="input-placeholder"
|
|
value="{{password}}"
|
|
password="{{!passwordVisible}}"
|
|
bindinput="onPasswordInput"
|
|
bindfocus="onPasswordFocus"
|
|
bindblur="onPasswordBlur"
|
|
maxlength="20"
|
|
confirm-type="done"
|
|
bindconfirm="handleLogin"
|
|
/>
|
|
<view class="password-toggle" bindtap="togglePasswordVisible" data-stop="true">
|
|
<text wx:if="{{passwordVisible}}">👁️</text>
|
|
<text wx:else>👁️🗨️</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 登录按钮 -->
|
|
<button
|
|
class="login-btn {{canLogin ? '' : 'btn-disabled'}}"
|
|
hover-class="btn-hover"
|
|
bindtap="handleLogin"
|
|
disabled="{{!canLogin}}"
|
|
>
|
|
<view class="btn-inner">
|
|
<text class="btn-text">登录</text>
|
|
</view>
|
|
</button>
|
|
|
|
<!-- 其他选项 -->
|
|
<view class="options-section">
|
|
<view class="option-item" bindtap="showAgreement">
|
|
<text class="option-text">用户协议</text>
|
|
</view>
|
|
<view class="option-item" bindtap="showPrivacy">
|
|
<text class="option-text">隐私政策</text>
|
|
</view>
|
|
<view class="option-item" bindtap="forgotPassword">
|
|
<text class="option-text">忘记密码</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 协议确认 -->
|
|
<view class="agreement-section">
|
|
<view class="agreement-checkbox {{isAgree ? 'checked' : ''}}" bindtap="toggleAgreement">
|
|
<text class="checkmark" wx:if="{{isAgree}}">✓</text>
|
|
</view>
|
|
<view class="agreement-text">
|
|
我已阅读并同意
|
|
<text class="link" bindtap="showAgreement">《用户协议》</text>
|
|
和
|
|
<text class="link" bindtap="showPrivacy">《隐私政策》</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部装饰 -->
|
|
<view class="bottom-decor">
|
|
<view class="bottom-wave"></view>
|
|
</view>
|
|
|
|
<!-- 协议弹窗（使用原样式） -->
|
|
<view class="agreement-modal" wx:if="{{showAgreementModal}}">
|
|
<view class="modal-mask" bindtap="hideModal"></view>
|
|
<view class="modal-content">
|
|
<view class="modal-header">
|
|
<text class="modal-title">{{modalTitle}}</text>
|
|
<view class="modal-close" bindtap="hideModal">×</view>
|
|
</view>
|
|
<scroll-view class="modal-body" scroll-y>
|
|
<text class="modal-text">{{modalContent}}</text>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 加载提示 -->
|
|
<view class="loading-mask" wx:if="{{isLoading}}">
|
|
<view class="loading-content">
|
|
<view class="loading-spinner"></view>
|
|
<text class="loading-text">登录中...</text>
|
|
</view>
|
|
</view>
|
|
</view>
|