wxamp-ymtxMerchant/pages/login/login.wxml

<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>