美化了样式2.0
This commit is contained in:
@ -1,78 +1,107 @@
|
||||
<view class="flex-col page">
|
||||
<image
|
||||
class="self-center image"
|
||||
src="./images/logo.png"
|
||||
/>
|
||||
<text class="self-center text">欢迎登陆—青橙校园</text>
|
||||
<view class="flex-col self-stretch group">
|
||||
<view class="flex-col register">
|
||||
<text class="self-start font text_2">账号注册</text>
|
||||
<view class="flex-col self-stretch group_6 mt-20">
|
||||
<view class="flex-col">
|
||||
<view class="flex-col justify-start relative section">
|
||||
<input class="flex-col justify-start items-start text-wrapper_5 view input"
|
||||
placeholder="{{ placeholder }}"
|
||||
maxlength="18"
|
||||
bindinput="onInput" data-field="nickname" value="{{nickname}}"
|
||||
/>
|
||||
</view>
|
||||
<view class="flex-col justify-start section_1 mt-22">
|
||||
<input
|
||||
class="flex-col justify-start items-start text-wrapper_5 text-wrapper_1 input_1"
|
||||
placeholder="请输入手机号"
|
||||
maxlength="11"
|
||||
type="number"
|
||||
bindinput="onInput" data-field="phone" value="{{phone}}"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-row items-center relative section_3 mt-22">
|
||||
<input
|
||||
class="flex-col justify-start items-start text-wrapper_2 view_6 input_2"
|
||||
placeholder="请输入验证码"
|
||||
maxlength="6"
|
||||
bindinput="onInput" data-field="captcha" value="{{captcha}}"
|
||||
/>
|
||||
<view bindtap="{{sending ? '' : 'sendSmsCode'}}" class="flex-col justify-start items-center shrink-0 text-wrapper_3 ml-18">
|
||||
<text class="text_7">{{ sending ? count + 's后重发' : '发送验证码' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-col mt-22">
|
||||
<view class="flex-col justify-start relative section_2">
|
||||
<input
|
||||
class="flex-col justify-start items-start text-wrapper_5 view_1 input_3"
|
||||
placeholder="请输入邀请码"
|
||||
maxlength="6"
|
||||
bindinput="onInput" data-field="inviteCode" value="{{inviteCode}}"
|
||||
/>
|
||||
</view>
|
||||
<view class="flex-col justify-start section_2 mt-22">
|
||||
<input class="flex-col justify-start items-start text-wrapper_5 view_3 input_4"
|
||||
placeholder="请输入密码"
|
||||
password="true"
|
||||
maxlength="11"
|
||||
bindinput="onInput" data-field="password" value="{{password}}"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="page">
|
||||
|
||||
<!-- 顶部 Logo 与标题 -->
|
||||
<image class="logo" src="/static/logo.jpg" mode="aspectFit" />
|
||||
<text class="page-title">欢迎登录 — 丁香校园</text>
|
||||
|
||||
<!-- 注册卡片 -->
|
||||
<view class="card">
|
||||
|
||||
<view class="card-head">
|
||||
<text class="card-title">账号注册</text>
|
||||
</view>
|
||||
|
||||
<!-- 表单 -->
|
||||
<view class="form">
|
||||
|
||||
<!-- 昵称 -->
|
||||
<view class="field">
|
||||
<input
|
||||
class="field-input"
|
||||
placeholder="{{ placeholder }}"
|
||||
placeholder-class="ph"
|
||||
maxlength="18"
|
||||
bindinput="onInput" data-field="nickname" value="{{nickname}}"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 手机号 -->
|
||||
<view class="field">
|
||||
<input
|
||||
class="field-input"
|
||||
placeholder="请输入手机号"
|
||||
placeholder-class="ph"
|
||||
maxlength="11"
|
||||
type="number"
|
||||
bindinput="onInput" data-field="phone" value="{{phone}}"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 验证码（输入 + 发送） -->
|
||||
<view class="field field-row">
|
||||
<input
|
||||
class="field-input flex-1"
|
||||
placeholder="请输入验证码"
|
||||
placeholder-class="ph"
|
||||
maxlength="6"
|
||||
bindinput="onInput" data-field="captcha" value="{{captcha}}"
|
||||
/>
|
||||
<view
|
||||
bindtap="{{sending ? '' : 'sendSmsCode'}}"
|
||||
class="code-btn {{sending ? 'disabled' : ''}}"
|
||||
>
|
||||
<text class="code-btn-text">{{ sending ? count + 's后重发' : '发送验证码' }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-row items-center group_1 mt-26">
|
||||
<!-- 复选框 -->
|
||||
|
||||
<!-- 邀请码 -->
|
||||
<view class="field">
|
||||
<input
|
||||
class="field-input"
|
||||
placeholder="请输入邀请码"
|
||||
placeholder-class="ph"
|
||||
maxlength="6"
|
||||
bindinput="onInput" data-field="inviteCode" value="{{inviteCode}}"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 密码 -->
|
||||
<view class="field">
|
||||
<input
|
||||
class="field-input"
|
||||
placeholder="请输入密码"
|
||||
placeholder-class="ph"
|
||||
password="true"
|
||||
maxlength="18"
|
||||
bindinput="onInput" data-field="password" value="{{password}}"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 协议勾选 -->
|
||||
<view class="agreements">
|
||||
<checkbox-group bindchange="onCheckboxChange">
|
||||
<checkbox value="agree" checked="{{agree}}" color="#FF8D1A" />
|
||||
</checkbox-group>
|
||||
<view class="group_2 ml-13">
|
||||
<text class="font_2 text_10">我已阅读并同意</text>
|
||||
<text class="font_2" bind:tap="gotoAgreement">《用户协议》</text>
|
||||
<text class="text_11">&</text>
|
||||
<text class="font_2" bind:tap="gotoPolicy">《隐私协议》</text>
|
||||
<view class="agreements-text">
|
||||
<text class="muted">我已阅读并同意</text>
|
||||
<text class="link" bind:tap="gotoAgreement">《用户协议》</text>
|
||||
<text class="muted">&</text>
|
||||
<text class="link" bind:tap="gotoPolicy">《隐私协议》</text>
|
||||
</view>
|
||||
</view>
|
||||
<view bindtap="onRegister" class="flex-col justify-start items-center text-wrapper_6 mt-26"><text class="font text_12">注册</text></view>
|
||||
|
||||
<!-- 注册按钮 -->
|
||||
<view class="btn-primary" bindtap="onRegister">
|
||||
<text class="btn-primary-text">注册</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="self-center group_3">
|
||||
<text class="font_2 text_13">已有账号？</text>
|
||||
<text bindtap="gotoLogin" class="font_2 text_14" >立即登录→</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 登录引导 -->
|
||||
<view class="footer-tip">
|
||||
<text class="muted">已有账号？</text>
|
||||
<text class="link-strong" bindtap="gotoLogin">立即登录 →</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
Reference in New Issue
Block a user