feat(mini-program): 优化登录页视觉设计，提升用户体验
This commit is contained in:
@@ -1,5 +1,9 @@
|
||||
# 开发环境配置（本地开发调试）
|
||||
VITE_APP_ENV=dev
|
||||
# 本地环境
|
||||
# VITE_API_BASE_URL=http://localhost:19089/api
|
||||
# VITE_WS_URL=ws://localhost:19089/ws
|
||||
# 测试环境
|
||||
VITE_API_BASE_URL=https://lifescript.happylifeos.com/api
|
||||
VITE_WS_URL=wss://lifescript.happylifeos.com/ws
|
||||
VITE_DEBUG=true
|
||||
|
||||
@@ -3,11 +3,17 @@
|
||||
<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
|
||||
|
||||
<view class="bg-decoration">
|
||||
<view class="aurora-top"></view>
|
||||
<view class="aurora-bottom"></view>
|
||||
<view class="orb orb-primary"></view>
|
||||
<view class="orb orb-secondary"></view>
|
||||
<view class="star-field"></view>
|
||||
</view>
|
||||
|
||||
<view class="content" :style="{ paddingTop: safeAreaTop + 20 + 'px' }">
|
||||
<view class="content" :style="{ paddingTop: safeAreaTop + 'px', paddingBottom: safeAreaBottom + 24 + 'px' }">
|
||||
<view class="brand-lockup">
|
||||
<text class="brand-kicker">EMOTION MUSEUM</text>
|
||||
<text class="brand-title">数字生命档案</text>
|
||||
</view>
|
||||
|
||||
<view class="login-card">
|
||||
<view class="header">
|
||||
<text class="title font-serif">欢迎回来</text>
|
||||
@@ -22,6 +28,7 @@
|
||||
type="number"
|
||||
maxlength="11"
|
||||
placeholder="输入手机号"
|
||||
placeholder-class="input-placeholder"
|
||||
v-model="phone"
|
||||
/>
|
||||
</view>
|
||||
@@ -34,6 +41,7 @@
|
||||
type="number"
|
||||
maxlength="6"
|
||||
placeholder="请输入验证码"
|
||||
placeholder-class="input-placeholder"
|
||||
v-model="code"
|
||||
/>
|
||||
<view
|
||||
@@ -77,7 +85,6 @@ const safeAreaTop = ref(uni.getStorageSync('safeAreaTop') || 20)
|
||||
const safeAreaBottom = ref(uni.getStorageSync('safeAreaBottom') || 0)
|
||||
|
||||
onMounted(() => {
|
||||
// 使用新的推荐 API 替代已弃用的 getSystemInfoSync
|
||||
const windowInfo = uni.getWindowInfo()
|
||||
statusBarHeight.value = windowInfo.statusBarHeight || 20
|
||||
safeAreaTop.value = windowInfo.safeAreaInsets?.top || windowInfo.statusBarHeight || 20
|
||||
@@ -107,7 +114,7 @@ const handleGetCode = async () => {
|
||||
uni.showToast({ title: '验证码已发送', icon: 'success' })
|
||||
startCountdown()
|
||||
} catch (error) {
|
||||
uni.showToast({ title: '验证码已发送 (模拟: 888888)', icon: 'none' })
|
||||
uni.showToast({ title: '验证码已发送（模拟: 888888）', icon: 'none' })
|
||||
startCountdown()
|
||||
}
|
||||
}
|
||||
@@ -153,14 +160,16 @@ const handleLogin = async () => {
|
||||
<style scoped>
|
||||
.login-page {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(180deg, #0F071A 0%, #1A0B2E 50%, #0F071A 100%);
|
||||
background:
|
||||
radial-gradient(circle at 50% -8%, rgba(180, 129, 255, 0.28), transparent 28%),
|
||||
linear-gradient(180deg, #13091f 0%, #1b0b31 46%, #100719 100%);
|
||||
position: relative;
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
overflow: hidden;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
}
|
||||
|
||||
/* 标题字体 - Cinzel (原型标准) */
|
||||
.title.font-serif {
|
||||
font-family: 'Cinzel', 'Inter', serif;
|
||||
font-family: 'Songti SC', 'STSong', 'Noto Serif SC', serif;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
@@ -177,26 +186,39 @@ const handleLogin = async () => {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.aurora-top {
|
||||
.orb {
|
||||
position: absolute;
|
||||
top: -10%;
|
||||
left: -10%;
|
||||
width: 120%;
|
||||
height: 60%;
|
||||
background: rgba(168, 85, 247, 0.08);
|
||||
filter: blur(120rpx);
|
||||
border-radius: 50%;
|
||||
border-radius: 999rpx;
|
||||
filter: blur(72rpx);
|
||||
}
|
||||
|
||||
.aurora-bottom {
|
||||
.orb-primary {
|
||||
top: 96rpx;
|
||||
right: -120rpx;
|
||||
width: 360rpx;
|
||||
height: 360rpx;
|
||||
background: rgba(162, 91, 255, 0.24);
|
||||
}
|
||||
|
||||
.orb-secondary {
|
||||
left: -180rpx;
|
||||
bottom: 18%;
|
||||
width: 420rpx;
|
||||
height: 420rpx;
|
||||
background: rgba(62, 98, 255, 0.14);
|
||||
}
|
||||
|
||||
.star-field {
|
||||
position: absolute;
|
||||
bottom: -10%;
|
||||
right: -10%;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
background: rgba(139, 92, 246, 0.05);
|
||||
filter: blur(100rpx);
|
||||
border-radius: 50%;
|
||||
top: 132rpx;
|
||||
left: 64rpx;
|
||||
right: 64rpx;
|
||||
height: 360rpx;
|
||||
opacity: 0.42;
|
||||
background-image:
|
||||
radial-gradient(circle, rgba(255, 255, 255, 0.5) 0 1rpx, transparent 2rpx),
|
||||
radial-gradient(circle, rgba(219, 196, 255, 0.38) 0 1rpx, transparent 2rpx);
|
||||
background-size: 108rpx 96rpx, 148rpx 132rpx;
|
||||
}
|
||||
|
||||
.content {
|
||||
@@ -204,77 +226,110 @@ const handleLogin = async () => {
|
||||
z-index: 1;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40rpx;
|
||||
padding-top: calc(40rpx + constant(safe-area-inset-top));
|
||||
padding-top: calc(40rpx + env(safe-area-inset-top));
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
padding-left: 32rpx;
|
||||
padding-right: 32rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.brand-lockup {
|
||||
margin-top: 136rpx;
|
||||
margin-bottom: 50rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.brand-kicker {
|
||||
display: block;
|
||||
margin-bottom: 14rpx;
|
||||
color: rgba(219, 200, 255, 0.58);
|
||||
font-size: 18rpx;
|
||||
font-weight: 600;
|
||||
letter-spacing: 5rpx;
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
display: block;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 34rpx;
|
||||
font-weight: 500;
|
||||
letter-spacing: 3rpx;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
width: 100%;
|
||||
max-width: 720rpx;
|
||||
background: rgba(168, 85, 247, 0.05);
|
||||
backdrop-filter: blur(40rpx);
|
||||
border: 1px solid rgba(168, 85, 247, 0.15);
|
||||
border-radius: 48rpx;
|
||||
padding: 48rpx 32rpx;
|
||||
max-width: 686rpx;
|
||||
margin: 0 auto;
|
||||
padding: 46rpx 32rpx 36rpx;
|
||||
box-sizing: border-box;
|
||||
transform: translateY(-12%);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(58, 29, 91, 0.76), rgba(31, 15, 52, 0.82)),
|
||||
rgba(34, 15, 57, 0.86);
|
||||
border: 1rpx solid rgba(217, 190, 255, 0.22);
|
||||
border-radius: 40rpx;
|
||||
box-shadow:
|
||||
0 28rpx 72rpx rgba(0, 0, 0, 0.32),
|
||||
inset 0 1rpx 0 rgba(255, 255, 255, 0.12);
|
||||
backdrop-filter: blur(34rpx);
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 48rpx;
|
||||
margin-bottom: 42rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: block;
|
||||
font-size: 42rpx;
|
||||
font-weight: 300;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
letter-spacing: 6rpx;
|
||||
margin-bottom: 12rpx;
|
||||
color: rgba(255, 255, 255, 0.94);
|
||||
font-size: 42rpx;
|
||||
font-weight: 500;
|
||||
letter-spacing: 5rpx;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
display: block;
|
||||
color: rgba(225, 209, 255, 0.66);
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
font-style: italic;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.form {
|
||||
margin-bottom: 40rpx;
|
||||
margin-bottom: 36rpx;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.input-group:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.input-label {
|
||||
display: block;
|
||||
font-size: 18rpx;
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
margin-bottom: 12rpx;
|
||||
letter-spacing: 4rpx;
|
||||
text-transform: uppercase;
|
||||
color: rgba(234, 223, 255, 0.64);
|
||||
font-size: 22rpx;
|
||||
font-weight: 500;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
.glass-input {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 24rpx;
|
||||
height: 84rpx;
|
||||
padding: 0 28rpx;
|
||||
color: #F3E8FF;
|
||||
font-size: 26rpx;
|
||||
box-sizing: border-box;
|
||||
color: #fff7ff;
|
||||
font-size: 27rpx;
|
||||
background: rgba(255, 255, 255, 0.085);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.14);
|
||||
border-radius: 24rpx;
|
||||
}
|
||||
|
||||
.glass-input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
.input-placeholder {
|
||||
color: rgba(230, 213, 255, 0.38);
|
||||
}
|
||||
|
||||
.code-row {
|
||||
@@ -293,64 +348,93 @@ const handleLogin = async () => {
|
||||
}
|
||||
|
||||
.code-btn {
|
||||
width: 200rpx;
|
||||
height: 80rpx;
|
||||
background: linear-gradient(135deg, rgba(147, 51, 234, 0.5), rgba(124, 58, 237, 0.4));
|
||||
border: 1px solid rgba(168, 85, 247, 0.4);
|
||||
border-radius: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
font-size: 20rpx;
|
||||
width: 196rpx;
|
||||
height: 84rpx;
|
||||
color: rgba(255, 255, 255, 0.94);
|
||||
font-size: 22rpx;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
letter-spacing: 2rpx;
|
||||
border-radius: 24rpx;
|
||||
background: rgba(132, 72, 204, 0.58);
|
||||
border: 1rpx solid rgba(217, 190, 255, 0.28);
|
||||
box-sizing: border-box;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.code-btn:active {
|
||||
transform: scale(0.97);
|
||||
opacity: 0.85;
|
||||
opacity: 0.86;
|
||||
}
|
||||
|
||||
.code-btn.disabled {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
color: rgba(226, 213, 255, 0.36);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border-color: rgba(255, 255, 255, 0.09);
|
||||
}
|
||||
|
||||
.countdown {
|
||||
color: rgba(235, 224, 255, 0.7);
|
||||
font-size: 26rpx;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
background: linear-gradient(135deg, #9333EA 0%, #7C3AED 100%);
|
||||
border-radius: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
font-size: 28rpx;
|
||||
letter-spacing: 1rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
box-shadow: 0 8rpx 32rpx rgba(168, 85, 247, 0.3);
|
||||
margin-bottom: 24rpx;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
border-radius: 28rpx;
|
||||
background: linear-gradient(135deg, #a855f7 0%, #6d3be8 100%);
|
||||
box-shadow:
|
||||
0 14rpx 36rpx rgba(133, 68, 255, 0.34),
|
||||
inset 0 1rpx 0 rgba(255, 255, 255, 0.22);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow:
|
||||
0 8rpx 24rpx rgba(133, 68, 255, 0.24),
|
||||
inset 0 1rpx 0 rgba(255, 255, 255, 0.18);
|
||||
}
|
||||
|
||||
.btn-primary.disabled {
|
||||
opacity: 0.5;
|
||||
opacity: 0.48;
|
||||
}
|
||||
|
||||
.agreement {
|
||||
display: block;
|
||||
text-align: center;
|
||||
color: rgba(220, 205, 246, 0.44);
|
||||
font-size: 22rpx;
|
||||
color: rgba(255, 255, 255, 0.25);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@media screen and (max-height: 700px) {
|
||||
.brand-lockup {
|
||||
margin-top: 76rpx;
|
||||
margin-bottom: 34rpx;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
padding-top: 38rpx;
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user