This repository has been archived on 2024-09-30. You can view files and clone it, but cannot push or open issues/pull-requests.
wxSmallApp/pages/login/login.wxml

52 lines
1.8 KiB
Plaintext

<view class="login">
<!-- 登录卡片容器 -->
<view class="login-card">
<view class="login-text">登录</view>
<!-- 手机号输入区 -->
<view class="phone">
<image src="/assets/images/icon/Phone.svg" class="phone-icon"></image>
<input bindinput="handlePhoneInput" placeholder="请输入手机号" />
</view>
<!-- 密码输入区 -->
<view class="password">
<image src="/assets/images/icon/password.svg" class="password-icon"></image>
<!-- 根据passwordVisible动态设置input类型 -->
<input type="{{passwordVisible ? 'text' : 'password'}}" bindinput="handlePasswordInput" placeholder="请输入密码" />
<!-- 绑定点击事件到togglePasswordVisibility函数 -->
<image src="/assets/images/icon/eye.svg" class="eye-icon" bindtap="togglePasswordVisibility"></image>
</view>
<!-- 忘记密码链接 -->
<view class="forget-password">
<navigator>忘记密码?</navigator>
</view>
<!-- 登录按钮 -->
<view class="login-btn">
<!-- 绑定点击事件到handleLogin函数 -->
<button class="btn-dl" bindtap="handleLogin" type="primary">登录</button>
</view>
<!-- 协议区 -->
<checkbox-group bindchange="checkAccepted" class="agreement-area">
<checkbox class="agreement-box" checked="{{checked}}"></checkbox>
<view class="agreement-text">小程序《用户使用协议》</view>
</checkbox-group>
</view>
<!-- 登录提示框 -->
<view class="prompt-box">
<view class="line"></view>
<view class="lText">您还可以使用以下方式登录</view>
<view class="line"></view>
</view>
<!-- 其他登录方式 -->
<view class="other-login">
<image src="/assets/images/icon/weixin.svg"></image>
</view>
</view>