美化了样式2.0
This commit is contained in:
@ -1,106 +1,113 @@
|
||||
<view class="flex-col page">
|
||||
<image class="self-center image" src="./images/logo.png" />
|
||||
<view class="page">
|
||||
|
||||
<view class="flex-col items-center self-stretch group">
|
||||
<!-- 加上 bold-text -->
|
||||
<text class="font text bold-text">欢迎登陆—青橙校园</text>
|
||||
<text class="font mt-12">（{{ showRole }}端）</text>
|
||||
<!-- 顶部 Logo -->
|
||||
<image class="logo" src="/static/logo.jpg" mode="aspectFit" />
|
||||
|
||||
<!-- 标题与角色 -->
|
||||
<view class="title-wrap">
|
||||
<text class="title bold-text">欢迎登录 — 丁香校园</text>
|
||||
<text class="subtitle">（{{ showRole }}端）</text>
|
||||
</view>
|
||||
|
||||
<!-- 登录卡片 -->
|
||||
<view class="card">
|
||||
|
||||
<!-- 登录方式切换 -->
|
||||
<view class="tabs">
|
||||
<text
|
||||
class="tab {{loginType==='password' ? 'active' : ''}}"
|
||||
bindtap="switchToPassword"
|
||||
>密码登录</text>
|
||||
|
||||
<text
|
||||
class="tab {{loginType==='sms' ? 'active' : ''}}"
|
||||
bindtap="switchToSms"
|
||||
wx:if="{{ role === 'user' }}"
|
||||
>验证码登录</text>
|
||||
</view>
|
||||
|
||||
<view class="flex-col self-stretch group_2">
|
||||
<view class="flex-row">
|
||||
<!-- 密码登录 -->
|
||||
<text
|
||||
class="font_2 toggle-text {{loginType==='password'?'active':''}}"
|
||||
bindtap="switchToPassword"
|
||||
>密码登录</text>
|
||||
<!-- 表单 -->
|
||||
<view class="form">
|
||||
|
||||
<!-- 验证码登录 -->
|
||||
<text
|
||||
class="font_2 ml-8 toggle-text {{loginType==='sms'?'active':''}}"
|
||||
bindtap="switchToSms" wx:if="{{ role === 'user' }}"
|
||||
>验证码登录</text>
|
||||
<!-- 手机号 -->
|
||||
<view class="field">
|
||||
<input
|
||||
class="field-input"
|
||||
placeholder="请输入手机号"
|
||||
placeholder-class="ph"
|
||||
value="{{phone}}"
|
||||
bindinput="onPhoneInput"
|
||||
maxlength="11"
|
||||
type="number"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="flex-col group_1 mt-20">
|
||||
<!-- 手机号 输入框，保持原 .text-wrapper 样式 -->
|
||||
<view class="flex-col self-stretch">
|
||||
<view class="flex-col justify-start relative section">
|
||||
<input
|
||||
class="text-wrapper"
|
||||
placeholder="请输入手机号"
|
||||
value="{{phone}}"
|
||||
bindinput="onPhoneInput"
|
||||
maxlength="11"
|
||||
type="number"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 密码/验证码 输入框，保持原 .text-wrapper_2 样式 -->
|
||||
<view class="flex-row items-center section_2 mt-21">
|
||||
<input
|
||||
class="text-wrapper"
|
||||
placeholder="{{ loginType==='password' ? '请输入密码' : '请输入验证码' }}"
|
||||
value="{{credential}}"
|
||||
bindinput="onCredentialInput"
|
||||
password="{{ loginType==='password' }}"
|
||||
type="{{ loginType==='sms' ? 'number' : 'text' }}"
|
||||
/>
|
||||
|
||||
<!-- 仅验证码登录时显示倒计时按钮 -->
|
||||
<view
|
||||
class="flex-col justify-start items-center shrink-0 text-wrapper_3 ml-2"
|
||||
bindtap="getSmsCode"
|
||||
wx:if="{{ loginType==='sms' }}"
|
||||
>
|
||||
<text class="text_6">{{ codeButtonText }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 忘记密码，仅密码登录时显示 -->
|
||||
<text
|
||||
class="self-end font_4 text_7"
|
||||
bindtap="gotoForgetPwd"
|
||||
wx:if="{{ loginType==='password' }}"
|
||||
>忘记密码</text>
|
||||
|
||||
<!-- 登录按钮 -->
|
||||
<view
|
||||
class="flex-col justify-start items-center self-stretch text-wrapper_4"
|
||||
bindtap="onLogin"
|
||||
<!-- 密码 / 验证码 -->
|
||||
<view class="field field-row">
|
||||
<input
|
||||
class="field-input flex-1"
|
||||
placeholder="{{ loginType==='password' ? '请输入密码' : '请输入验证码' }}"
|
||||
placeholder-class="ph"
|
||||
value="{{credential}}"
|
||||
bindinput="onCredentialInput"
|
||||
password="{{ loginType==='password' }}"
|
||||
type="{{ loginType==='sms' ? 'number' : 'text' }}"
|
||||
/>
|
||||
<!-- 验证码按钮（仅验证码登录显示） -->
|
||||
<view
|
||||
class="code-btn"
|
||||
bindtap="getSmsCode"
|
||||
wx:if="{{ loginType==='sms' }}"
|
||||
>
|
||||
<text class="text_8">登录</text>
|
||||
</view>
|
||||
|
||||
<!-- 协议勾选 -->
|
||||
<view class="flex-row items-center self-stretch group_3">
|
||||
<checkbox-group bindchange="onAgreeChange">
|
||||
<checkbox
|
||||
class="checkbox"
|
||||
value="agree"
|
||||
checked="{{ isAgree }}"
|
||||
color="#FF8D1A"
|
||||
/>
|
||||
</checkbox-group>
|
||||
<view class="group_4 ml-12">
|
||||
<text class="font_5 text_9">登录代表您已同意</text>
|
||||
<text class="font_5" bindtap="gotoAgreement">《用户协议》</text>
|
||||
<text class="text_10">&</text>
|
||||
<text class="font_5" bindtap="gotoPolicy">《隐私协议》</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 去注册 -->
|
||||
<view class="self-center group_5" wx:if="{{isShowRegister}}">
|
||||
<text class="font_4 text_11">没有账号？</text>
|
||||
<text class="font_5 text_12" bindtap="gotoRegister">去注册→</text>
|
||||
<text class="code-btn-text">{{ codeButtonText }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="flex-row justify-evenly items-center self-end section_3" bind:tap="joinUs" wx:if="{{ role === 'user' }}">
|
||||
<text class="font_2 text_13">加入我们</text>
|
||||
<image class="image_3" src="./images/joinus.png" />
|
||||
<!-- 忘记密码（仅密码登录） -->
|
||||
<text
|
||||
class="link-right"
|
||||
bindtap="gotoForgetPwd"
|
||||
wx:if="{{ loginType==='password' }}"
|
||||
>忘记密码</text>
|
||||
|
||||
<!-- 登录按钮 -->
|
||||
<view
|
||||
class="btn-primary"
|
||||
bindtap="onLogin"
|
||||
>
|
||||
<text class="btn-primary-text">登录</text>
|
||||
</view>
|
||||
|
||||
<!-- 协议 -->
|
||||
<view class="agreements">
|
||||
<checkbox-group bindchange="onAgreeChange">
|
||||
<checkbox
|
||||
class="checkbox"
|
||||
value="agree"
|
||||
checked="{{ isAgree }}"
|
||||
color="#FF8D1A"
|
||||
/>
|
||||
</checkbox-group>
|
||||
<view class="agreements-text">
|
||||
<text class="muted">登录代表您已同意</text>
|
||||
<text class="link" bindtap="gotoAgreement">《用户协议》</text>
|
||||
<text class="muted">&</text>
|
||||
<text class="link" bindtap="gotoPolicy">《隐私协议》</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 去注册 -->
|
||||
<view class="register" wx:if="{{isShowRegister}}">
|
||||
<text class="muted">没有账号？</text>
|
||||
<text class="link-strong" bindtap="gotoRegister">去注册 →</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加入我们（仅 user 端） -->
|
||||
<view class="cta-join" bind:tap="joinUs" wx:if="{{ role === 'user' }}">
|
||||
<text class="cta-join-text">加入我们</text>
|
||||
<image class="cta-join-img" src="./images/joinus.png" mode="aspectFit" />
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
Reference in New Issue
Block a user