itcsx/Docker
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ow

Browse Source
This commit is contained in:
owenchen committed 2026-10-17 21:08:10 +08:00
1 parent 282d8ce583
commit 28dd3ffebd
229 files changed
+5765 -4786
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

uniapp/youjiala/src/pages/login/login.vue
+115 -110
View File
@@ -10,6 +10,7 @@ import { computed, ref } from "vue";
import { brandGlyph, veinGlyph } from "@/common/brand";
import { backendLocale, baseUrl } from "@/common/http.interceptor";
import { encryptLoginPassword } from "@/common/pwd-crypto";
import { useThemeGradient, useThemeTokens } from "@/composables";
import { LoginData as LoginDataClass } from "@/data/auto/loginData";
import { reloadLocales } from "@/locale";
import { decodeQueryPath, isAuthFree, pageUrl, resolvePageName } from "@/router/routes";
@@ -22,6 +23,17 @@ const showPwd = ref(false);
const loading = ref(false);
const loginProfileStore = useLoginProfileStore();
/* 主题接线：页面底渐变与强调色全部跟随当前主题（与「我的」/媒体/共享页同一口径），
不再写死品牌绿——切主题后登录/注册/代理登录三页即时联动 */
const { themeBackground } = useThemeGradient();
const { primary, accentGradient, accentSoft, accentShadow } = useThemeTokens();
const themeVars = computed(() => ({
"--fg-primary": primary.value,
"--fg-gradient": accentGradient.value,
"--fg-soft": accentSoft.value,
"--fg-shadow": accentShadow.value,
}));
/**
* 登录成功后的落地地址：被守卫送去登录页时由 ?redirect= 带过来（见 nav-guard 的 goLoginWithRedirect）。
* 只接受 PAGE_PATHS 里认得出的地址，避免 ?redirect= 把人送到站外或不存在的路径
@@ -117,7 +129,7 @@ async function handleLogin() {
</script>
<template>
<view class="login-page">
<view class="login-page" :style="[{ background: themeBackground }, themeVars]">
<!-- 背景右上淡叶脉暗纹（纯装饰，低透明） -->
<image class="login-vein" :src="veinGlyph" mode="aspectFit" />
@@ -138,17 +150,13 @@ async function handleLogin() {
<view class="login-form">
<view class="login-field">
<u-icon name="account" size="34" color="#9aa0a6" />
<input
v-model="userMobile" class="login-field__input" :placeholder="t('LoginForm.userLabel')"
placeholder-class="login-field__ph" @confirm="handleLogin"
>
<input v-model="userMobile" class="login-field__input" :placeholder="t('LoginForm.userLabel')"
placeholder-class="login-field__ph" @confirm="handleLogin">
</view>
<view class="login-field">
<u-icon name="lock" size="34" color="#9aa0a6" />
<input
v-model="password" class="login-field__input" :password="!showPwd" :placeholder="t('LoginForm.passwordLabel')"
placeholder-class="login-field__ph" @confirm="handleLogin"
>
<input v-model="password" class="login-field__input" :password="!showPwd"
:placeholder="t('LoginForm.passwordLabel')" placeholder-class="login-field__ph" @confirm="handleLogin">
<u-icon :name="showPwd ? 'eye-fill' : 'eye-off'" size="34" color="#9aa0a6" @click="showPwd = !showPwd" />
</view>
</view>
@@ -185,174 +193,171 @@ async function handleLogin() {
</template>
<style lang="scss" scoped>
/* 品牌配色：黛翠绿主色 + 琥珀金点缀 + 暖米白底，登录页品牌身份独立于应用内主题 */
$brand-green: #2f7d5c;
$brand-green-dark: #1f5f47;
$brand-green-light: #47a678;
$brand-amber: #c8912f;
$brand-ink: #1f3d2f;
/* 强调色（底渐变/按钮/Logo/链接）全部经 --fg-* 变量跟随主题（见 script 的 themeVars）；
此处仅留中性文字色与柔和投影，不再写死品牌绿 */
$ink: #1f2329;
$soft-shadow: 0 6rpx 20rpx rgba(31, 35, 41, 0.06);
.login-page {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
min-height: 100vh;
padding: 150rpx 60rpx 60rpx;
overflow: hidden;
background: linear-gradient(165deg, #f7f0e3 0%, #f1e7d6 55%, #eaddc7 100%);
position: relative;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
min-height: 100vh;
padding: 150rpx 60rpx 60rpx;
overflow: hidden;
}
/* 右上淡叶脉暗纹：半隐若现，不拦截点击 */
.login-vein {
position: absolute;
top: -40rpx;
right: -60rpx;
width: 460rpx;
height: 460rpx;
opacity: 0.08;
pointer-events: none;
position: absolute;
top: -40rpx;
right: -60rpx;
width: 460rpx;
height: 460rpx;
opacity: 0.08;
pointer-events: none;
}
/* ===== 品牌位 ===== */
.login-brand {
display: flex;
z-index: 1;
flex-direction: column;
align-items: center;
margin-bottom: 80rpx;
display: flex;
z-index: 1;
flex-direction: column;
align-items: center;
margin-bottom: 80rpx;
}
.login-brand__logo {
display: flex;
align-items: center;
justify-content: center;
width: 132rpx;
height: 132rpx;
margin-bottom: 28rpx;
border-radius: 36rpx;
background: linear-gradient(150deg, $brand-green-light, $brand-green-dark);
box-shadow: 0 16rpx 36rpx rgba(31, 95, 71, 0.32);
display: flex;
align-items: center;
justify-content: center;
width: 132rpx;
height: 132rpx;
margin-bottom: 28rpx;
border-radius: 36rpx;
background: var(--fg-gradient, linear-gradient(135deg, #47a678, #1f5f47));
box-shadow: 0 16rpx 36rpx var(--fg-shadow, rgba(31, 95, 71, 0.32));
}
.login-brand__glyph {
width: 76rpx;
height: 76rpx;
width: 76rpx;
height: 76rpx;
}
.login-brand__name {
font-size: 52rpx;
font-weight: 700;
letter-spacing: 4rpx;
color: $brand-ink;
font-size: 52rpx;
font-weight: 700;
letter-spacing: 4rpx;
color: $ink;
}
.login-brand__slogan {
margin-top: 14rpx;
font-size: 26rpx;
letter-spacing: 6rpx;
color: $brand-amber;
margin-top: 14rpx;
font-size: 26rpx;
letter-spacing: 6rpx;
color: var(--fg-primary, #2f7d5c);
}
/* ===== 表单 ===== */
.login-form {
display: flex;
z-index: 1;
flex-direction: column;
gap: 32rpx;
width: 100%;
display: flex;
z-index: 1;
flex-direction: column;
gap: 32rpx;
width: 100%;
}
.login-field {
display: flex;
align-items: center;
gap: 16rpx;
padding: 0 32rpx;
border-radius: 20rpx;
background-color: #ffffff;
box-shadow: 0 6rpx 20rpx rgba(31, 95, 71, 0.06);
display: flex;
align-items: center;
gap: 16rpx;
padding: 0 32rpx;
border-radius: 20rpx;
background-color: #ffffff;
box-shadow: $soft-shadow;
}
.login-field__input {
flex: 1;
height: 96rpx;
font-size: 30rpx;
color: $brand-ink;
flex: 1;
height: 96rpx;
font-size: 30rpx;
color: $ink;
}
.login-field__ph {
color: #b3b8bd;
color: #b3b8bd;
}
/* ===== 按钮 ===== */
.login-btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 96rpx;
margin-top: 40rpx;
border-radius: 48rpx;
font-size: 32rpx;
font-weight: 600;
letter-spacing: 8rpx;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 96rpx;
margin-top: 40rpx;
border-radius: 48rpx;
font-size: 32rpx;
font-weight: 600;
letter-spacing: 8rpx;
}
.login-btn--submit {
color: #ffffff;
background: linear-gradient(135deg, $brand-green-light, $brand-green-dark);
box-shadow: 0 16rpx 32rpx rgba(31, 95, 71, 0.3);
color: #ffffff;
background: var(--fg-gradient, linear-gradient(135deg, #47a678, #1f5f47));
box-shadow: 0 16rpx 32rpx var(--fg-shadow, rgba(31, 95, 71, 0.3));
}
/* ===== 底部 ===== */
.login-footer {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin-top: auto;
padding-top: 60rpx;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin-top: auto;
padding-top: 60rpx;
}
.login-lang {
display: flex;
align-items: center;
gap: 6rpx;
font-size: 26rpx;
display: flex;
align-items: center;
gap: 6rpx;
font-size: 26rpx;
}
.login-lang__label {
color: #9aa0a6;
color: #9aa0a6;
}
.login-lang__switch {
font-weight: 600;
color: $brand-green;
font-weight: 600;
color: var(--fg-primary, #2f7d5c);
}
.login-register {
display: flex;
align-items: center;
gap: 6rpx;
margin-top: 24rpx;
font-size: 26rpx;
display: flex;
align-items: center;
gap: 6rpx;
margin-top: 24rpx;
font-size: 26rpx;
}
.login-register__tip {
color: #9aa0a6;
color: #9aa0a6;
}
.login-register__link {
font-weight: 600;
color: $brand-amber;
font-weight: 600;
color: var(--fg-primary, #2f7d5c);
}
/* 非发布版的环境 / 后端地址角标：低调灰字，仅开发或 UAT 构建出现 */
.login-env {
margin-top: 22rpx;
font-size: 22rpx;
letter-spacing: 0.5rpx;
color: #b0a894;
margin-top: 22rpx;
font-size: 22rpx;
letter-spacing: 0.5rpx;
color: #b0a894;
}
</style>