wxamp-ymtxUser/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="grass grass-1"></view>
        <view class="grass grass-2"></view>
        <view class="grass grass-3"></view>
        <view class="sheep"></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>
        </view>

        <!-- 登录区域 -->
        <view class="login-section">
            <view class="welcome-text">
                <text class="welcome-main">欢迎回来</text>
                <text class="welcome-desc">请使用手机号快捷登录</text>
            </view>

            <!-- 手机号登录按钮 -->
            <button class="phone-login-btn" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" hover-class="phone-btn-hover">
                <view class="btn-inner">
                    <image src="/pages/images/sjh.png" mode="" />
                    <text class="btn-text">手机号快捷登录</text>
                </view>
            </button>

            <!-- 协议确认 -->
            <view class="agreement-section">
                <view class="agreement-checkbox {{isAgree ? 'checked' : ''}}" bindtap="toggleAgreement">
                    <text class="checkmark" wx:if="{{isAgree}}">✓</text>
                </view>
                <view class="agreement-text">
                    我已阅读并同意
                      <view class="link" bindtap="showAgreement">《用户协议》</view>
                      和
                      <view class="link" bindtap="showPrivacy">《隐私政策》</view>
                </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>