feat(mobile): finish employee app page polish
This commit is contained in:
@@ -1,70 +1,82 @@
|
||||
<template>
|
||||
<view class="page login-page">
|
||||
<view class="login-head">
|
||||
<view class="brand-lockup">
|
||||
<image class="login-logo" src="/static/brand-logo.png" mode="aspectFit" />
|
||||
<view class="brand-copy">
|
||||
<text class="brand-name">银城物业</text>
|
||||
<text class="login-eyebrow">数字师傅</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="page-title">银城员工端</text>
|
||||
<text class="page-subtitle">使用手机号登录后,回到当前任务。</text>
|
||||
</view>
|
||||
|
||||
<view class="panel login-card">
|
||||
<text class="panel-title">手机号登录</text>
|
||||
<uni-forms
|
||||
ref="loginForm"
|
||||
class="login-form"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-position="top"
|
||||
validate-trigger="submit"
|
||||
err-show-type="undertext"
|
||||
:border="false"
|
||||
>
|
||||
<uni-forms-item label="手机号" name="phone" required>
|
||||
<uni-easyinput
|
||||
v-model="formData.phone"
|
||||
type="number"
|
||||
maxlength="11"
|
||||
:clearable="false"
|
||||
primary-color="#e70014"
|
||||
placeholder="请输入手机号"
|
||||
placeholder-style="color: #9aa5b5"
|
||||
:styles="inputStyles"
|
||||
/>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="验证码" name="smsCode" required class="code-form-item">
|
||||
<view class="code-row">
|
||||
<uni-easyinput
|
||||
v-model="formData.smsCode"
|
||||
class="code-input"
|
||||
type="number"
|
||||
maxlength="6"
|
||||
:clearable="false"
|
||||
primary-color="#e70014"
|
||||
placeholder="请输入验证码"
|
||||
placeholder-style="color: #9aa5b5"
|
||||
:styles="inputStyles"
|
||||
/>
|
||||
<button class="secondary-button code-button" :disabled="sending" @click="sendCode">
|
||||
{{ sending ? '发送中' : '获取验证码' }}
|
||||
</button>
|
||||
<view class="login-shell">
|
||||
<view class="login-head">
|
||||
<view class="brand-lockup">
|
||||
<image class="login-logo" src="/static/brand-logo.png" mode="aspectFit" />
|
||||
<view class="brand-copy">
|
||||
<text class="brand-name">银城物业</text>
|
||||
<text class="brand-divider">|</text>
|
||||
<text class="login-eyebrow">数字师傅</text>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
<button class="primary-button" :disabled="loggingIn" @click="login">
|
||||
{{ loggingIn ? '登录中' : '登录' }}
|
||||
</button>
|
||||
<uni-notice-bar
|
||||
v-if="message"
|
||||
:text="message"
|
||||
:background-color="message === '验证码已发送' ? '#edf7f0' : '#fff2f3'"
|
||||
:color="message === '验证码已发送' ? '#168243' : '#bd0010'"
|
||||
show-icon
|
||||
/>
|
||||
</view>
|
||||
<text class="page-title">银城员工端</text>
|
||||
<text class="page-subtitle">高效协同 · 贴心服务 · 让工作更简单</text>
|
||||
</view>
|
||||
|
||||
<view class="panel login-card">
|
||||
<uni-forms
|
||||
ref="loginForm"
|
||||
class="login-form"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-position="top"
|
||||
validate-trigger="submit"
|
||||
err-show-type="undertext"
|
||||
:border="false"
|
||||
>
|
||||
<uni-forms-item label="手机号" name="phone">
|
||||
<view class="field-shell">
|
||||
<uni-icons class="field-icon" type="phone" size="22" color="#a7adb8" />
|
||||
<uni-easyinput
|
||||
v-model="formData.phone"
|
||||
aria-label="手机号"
|
||||
type="number"
|
||||
maxlength="11"
|
||||
:clearable="false"
|
||||
primary-color="#e70014"
|
||||
@input="onPhoneInput"
|
||||
placeholder="请输入手机号"
|
||||
placeholder-style="color: #b5b8c1"
|
||||
:styles="inputStyles"
|
||||
/>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="验证码" name="smsCode">
|
||||
<view class="code-row">
|
||||
<view class="field-shell code-shell">
|
||||
<uni-icons class="field-icon" type="locked" size="22" color="#a7adb8" />
|
||||
<uni-easyinput
|
||||
v-model="formData.smsCode"
|
||||
class="code-input"
|
||||
aria-label="验证码"
|
||||
type="number"
|
||||
maxlength="6"
|
||||
:clearable="false"
|
||||
primary-color="#e70014"
|
||||
@input="onSmsCodeInput"
|
||||
placeholder="请输入验证码"
|
||||
placeholder-style="color: #b5b8c1"
|
||||
:styles="inputStyles"
|
||||
/>
|
||||
</view>
|
||||
<button class="secondary-button code-button" :disabled="sending" @click="sendCode">
|
||||
{{ sending ? '发送中' : '获取验证码' }}
|
||||
</button>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
<button class="primary-button login-submit" :disabled="loggingIn" @click="login">
|
||||
{{ loggingIn ? '登录中' : '登录' }}
|
||||
</button>
|
||||
<uni-notice-bar
|
||||
v-if="message"
|
||||
:text="message"
|
||||
:background-color="message === '验证码已发送' ? '#edf7f0' : '#fff2f3'"
|
||||
:color="message === '验证码已发送' ? '#168243' : '#bd0010'"
|
||||
show-icon
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -103,9 +115,23 @@ const loggingIn = ref(false);
|
||||
const message = ref('');
|
||||
const inputStyles = {
|
||||
color: '#25282d',
|
||||
borderColor: '#d7d9de',
|
||||
backgroundColor: '#ffffff'
|
||||
borderColor: 'transparent',
|
||||
backgroundColor: 'transparent'
|
||||
};
|
||||
|
||||
const normalizeDigits = (value: string | number, maxLength: number) =>
|
||||
String(value || '')
|
||||
.replace(/\D/g, '')
|
||||
.slice(0, maxLength);
|
||||
|
||||
const onPhoneInput = (value: string | number) => {
|
||||
formData.phone = normalizeDigits(value, 11);
|
||||
};
|
||||
|
||||
const onSmsCodeInput = (value: string | number) => {
|
||||
formData.smsCode = normalizeDigits(value, 6);
|
||||
};
|
||||
|
||||
const goAfterLogin = async () => {
|
||||
const redirect = consumeLoginRedirect() || '/pages/user/today/index';
|
||||
goToMobileTarget(await nextUserRouteAfterLogin(redirect));
|
||||
@@ -178,145 +204,294 @@ onShow(() => {
|
||||
|
||||
<style scoped>
|
||||
.login-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
padding-top: 52px;
|
||||
background: #f7f7f8;
|
||||
padding: 0;
|
||||
background:
|
||||
radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.98), rgba(247, 247, 247, 0.86) 38%, rgba(239, 239, 239, 0.72) 100%),
|
||||
linear-gradient(180deg, #fafafa 0%, #f2f2f2 100%);
|
||||
}
|
||||
|
||||
.login-shell {
|
||||
min-height: 100vh;
|
||||
padding: 114px 30px 52px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.login-shell::before,
|
||||
.login-shell::after {
|
||||
position: fixed;
|
||||
inset: auto;
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.45);
|
||||
filter: blur(10px);
|
||||
content: '';
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.login-shell::before {
|
||||
top: 64px;
|
||||
right: -46px;
|
||||
}
|
||||
|
||||
.login-shell::after {
|
||||
bottom: 120px;
|
||||
left: -72px;
|
||||
}
|
||||
|
||||
.login-head {
|
||||
position: relative;
|
||||
margin-bottom: 32px;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.login-head::before {
|
||||
position: absolute;
|
||||
top: 73px;
|
||||
left: 0;
|
||||
width: 42px;
|
||||
height: 3px;
|
||||
border-radius: 0;
|
||||
background: #e70014;
|
||||
content: '';
|
||||
max-width: 720px;
|
||||
margin: 0 auto 43px;
|
||||
}
|
||||
|
||||
.brand-lockup {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 28px;
|
||||
gap: 12px;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
.login-logo {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
flex: none;
|
||||
transform: translateX(6px) scale(1.4);
|
||||
}
|
||||
|
||||
.brand-copy {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.brand-name,
|
||||
.brand-divider,
|
||||
.login-eyebrow {
|
||||
display: block;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: #34373c;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.brand-divider {
|
||||
color: #8d9097;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.login-eyebrow {
|
||||
color: #168243;
|
||||
font-size: 12px;
|
||||
color: #1d9668;
|
||||
}
|
||||
|
||||
.login-head .page-title {
|
||||
color: #25282d;
|
||||
font-size: 32px;
|
||||
display: block;
|
||||
color: #252931;
|
||||
font-size: 34px;
|
||||
font-weight: 800;
|
||||
line-height: 1.16;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.login-head .page-subtitle {
|
||||
display: block;
|
||||
margin-top: 12px;
|
||||
color: #74777d;
|
||||
font-size: 14px;
|
||||
color: #6d7078;
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding: 26px 20px 22px;
|
||||
border: 1px solid #e3e4e7;
|
||||
border-top: 3px solid #e70014;
|
||||
gap: 18px;
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
padding: 36px 20px 36px;
|
||||
border: 1px solid rgba(225, 227, 232, 0.95);
|
||||
border-top: 4px solid #f20b1a;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 24px rgba(27, 31, 38, 0.07);
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
box-shadow: 0 12px 28px rgba(29, 31, 35, 0.12), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
|
||||
}
|
||||
|
||||
.login-card::before {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 26%);
|
||||
content: '';
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.login-card > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
margin-top: 2px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.login-form :deep(.uni-forms-item) {
|
||||
margin-bottom: 18px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.login-form :deep(.uni-forms-item:last-child) {
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
.login-form :deep(.uni-forms-item__label) {
|
||||
padding-bottom: 8px;
|
||||
color: #34373c;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.login-form :deep(.uni-easyinput__content) {
|
||||
min-height: 44px;
|
||||
border-radius: 6px;
|
||||
padding-bottom: 4px;
|
||||
color: #20242b;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.login-form :deep(.uni-forms-item__error) {
|
||||
margin-top: 6px;
|
||||
margin-top: 9px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.code-row {
|
||||
.field-shell {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
min-height: 56px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid #d8dce3;
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
|
||||
transition: border-color 160ms ease, box-shadow 160ms ease;
|
||||
}
|
||||
|
||||
.field-shell:focus-within {
|
||||
border-color: #e70014;
|
||||
box-shadow: 0 0 0 3px rgba(231, 0, 20, 0.08);
|
||||
}
|
||||
|
||||
.field-shell :deep(.uni-easyinput) {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.field-shell :deep(.uni-easyinput__content) {
|
||||
min-height: auto;
|
||||
border: none !important;
|
||||
border-radius: 0;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.field-shell :deep(.uni-easyinput__content-input) {
|
||||
height: 28px;
|
||||
color: #25282d;
|
||||
font-size: 15px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.field-shell :deep(.uni-easyinput__placeholder-class) {
|
||||
color: #b5b8c1;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.field-icon {
|
||||
margin-right: 12px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.code-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 84px;
|
||||
align-items: stretch;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.code-shell,
|
||||
.code-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.code-button {
|
||||
width: 118px;
|
||||
min-height: 44px;
|
||||
flex: none;
|
||||
border-color: #e70014;
|
||||
background: #ffffff;
|
||||
color: #e70014;
|
||||
font-size: 14px;
|
||||
.code-shell {
|
||||
padding-right: 10px;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.login-card > .primary-button {
|
||||
min-height: 52px;
|
||||
.code-shell .field-icon {
|
||||
margin-right: 9px;
|
||||
}
|
||||
|
||||
.code-shell :deep(.uni-easyinput__content-input),
|
||||
.code-shell :deep(.uni-easyinput__placeholder-class) {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.code-button {
|
||||
width: 100%;
|
||||
min-height: 56px;
|
||||
padding: 0 4px;
|
||||
border: 1px solid #f20b1a;
|
||||
border-radius: 8px;
|
||||
background: #e70014;
|
||||
box-shadow: 0 8px 16px rgba(231, 0, 20, 0.16);
|
||||
background: linear-gradient(180deg, #ffffff 0%, #fffdfd 100%);
|
||||
color: #f20b1a;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 6px 14px rgba(242, 11, 26, 0.06);
|
||||
}
|
||||
|
||||
.login-submit {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-height: 60px;
|
||||
margin-top: 4px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-self: stretch;
|
||||
padding: 0 20px;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(90deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0) 12%),
|
||||
linear-gradient(180deg, #ff1124 0%, #f40619 100%);
|
||||
color: #ffffff;
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 2px;
|
||||
box-shadow: 0 8px 18px rgba(231, 0, 20, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.24);
|
||||
}
|
||||
|
||||
.login-card :deep(.uni-noticebar) {
|
||||
margin: 0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.login-shell {
|
||||
padding-right: 32px;
|
||||
padding-left: 32px;
|
||||
}
|
||||
|
||||
.brand-name,
|
||||
.brand-divider,
|
||||
.login-eyebrow {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.login-head .page-title {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.code-row {
|
||||
grid-template-columns: minmax(0, 1fr) 80px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.code-button {
|
||||
width: 100%;
|
||||
min-height: 56px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user