ow

uniapp/youjiala/src/pages/login/login-agent.vue

@@ -3,13 +3,13 @@
 // 已登录的管理员在「我的」页输入被代理号（目标用户手机号）+ 自己的密码，LoginAgent 成功后覆盖当前会话
 // 后端 LoginAgent 先 Login(data) 用「当前登录者自己的手机号 + 密码」认证，故手机号预填为本人、只读，杜绝填错他人号造成不一致
 // 加密与登录同算法：RsaUserPassword = RSA( guid + MD5(密码) )
-// 视觉与登录页共用一套品牌语言：暖米白底 + 叶脉树 Logo + 黛翠绿渐变按钮 + 图标内嵌白底胶囊输入框
+// 视觉与登录页共用一套语言：主题渐变底 + 叶脉树 Logo + 主题色渐变按钮 + 图标内嵌白底胶囊输入框（强调色全部跟随当前主题）
 import { useLocale } from "uview-pro";
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import { brandGlyph, veinGlyph } from "@/common/brand";
 import { backendLocale } from "@/common/http.interceptor";
 import { encryptLoginPassword, makeGuid } from "@/common/pwd-crypto";
-import { useAuthGuard } from "@/composables";
+import { useAuthGuard, useThemeGradient, useThemeTokens } from "@/composables";
 import { LoginData as LoginDataClass } from "@/data/auto/loginData";
 import { pageUrl } from "@/router/routes";
 import authService from "@/service/security/authService";
@@ -17,6 +17,16 @@ import { useLoginProfileStore } from "@/stores";
 
 const { t } = useLocale();
 
+/* 主题接线：底渐变与强调色跟随当前主题（与登录/注册页同口径），不再写死品牌绿 */
+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,
+}));
+
 useAuthGuard();
 
 const loginProfileStore = useLoginProfileStore();
@@ -89,7 +99,7 @@ async function handleSubmit() {
 </script>
 
 <template>
-    <view class="login-page">
+    <view class="login-page" :style="[{ background: themeBackground }, themeVars]">
         <!-- 背景右上淡叶脉暗纹（纯装饰，低透明） -->
         <image class="login-vein" :src="veinGlyph" mode="aspectFit" />
 
@@ -141,12 +151,9 @@ async function handleSubmit() {
 </template>
 
 <style lang="scss" scoped>
-/* 品牌配色：黛翠绿主色 + 琥珀金点缀 + 暖米白底，与登录页同一套变量 */
-$brand-green: #2f7d5c;
-$brand-green-dark: #1f5f47;
-$brand-green-light: #47a678;
-$brand-amber: #c8912f;
-$brand-ink: #1f3d2f;
+/* 强调色全部经 --fg-* 变量跟随主题（见 script 的 themeVars）；此处仅留中性文字色与柔和投影 */
+$ink: #1f2329;
+$soft-shadow: 0 6rpx 20rpx rgba(31, 35, 41, 0.06);
 
 .login-page {
     position: relative;
@@ -157,7 +164,6 @@ $brand-ink: #1f3d2f;
     min-height: 100vh;
     padding: 120rpx 60rpx 60rpx;
     overflow: hidden;
-    background: linear-gradient(165deg, #f7f0e3 0%, #f1e7d6 55%, #eaddc7 100%);
 }
 
 /* 右上淡叶脉暗纹：半隐若现，不拦截点击 */
@@ -188,8 +194,8 @@ $brand-ink: #1f3d2f;
     height: 120rpx;
     margin-bottom: 24rpx;
     border-radius: 34rpx;
-    background: linear-gradient(150deg, $brand-green-light, $brand-green-dark);
-    box-shadow: 0 16rpx 36rpx rgba(31, 95, 71, 0.32);
+    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 {
@@ -201,14 +207,14 @@ $brand-ink: #1f3d2f;
     font-size: 48rpx;
     font-weight: 700;
     letter-spacing: 4rpx;
-    color: $brand-ink;
+    color: $ink;
 }
 
 .login-brand__sub {
     margin-top: 10rpx;
     font-size: 26rpx;
     letter-spacing: 6rpx;
-    color: $brand-amber;
+    color: var(--fg-primary, #2f7d5c);
 }
 
 /* ===== 表单 ===== */
@@ -227,14 +233,14 @@ $brand-ink: #1f3d2f;
     padding: 0 32rpx;
     border-radius: 20rpx;
     background-color: #ffffff;
-    box-shadow: 0 6rpx 20rpx rgba(31, 95, 71, 0.06);
+    box-shadow: $soft-shadow;
 }
 
 .login-field__input {
     flex: 1;
     height: 92rpx;
     font-size: 30rpx;
-    color: $brand-ink;
+    color: $ink;
 }
 
 /* 只读手机号：压掉 disabled 默认灰白，保留可读的中性灰，表明「锁定但正常」 */
@@ -264,14 +270,14 @@ $brand-ink: #1f3d2f;
 
 .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);
+    background: var(--fg-gradient, linear-gradient(135deg, #47a678, #1f5f47));
+    box-shadow: 0 16rpx 32rpx var(--fg-shadow, rgba(31, 95, 71, 0.3));
 }
 
 .login-btn--ghost {
     margin-top: 24rpx;
-    color: $brand-green;
-    border: 2rpx solid $brand-green;
+    color: var(--fg-primary, #2f7d5c);
+    border: 2rpx solid var(--fg-primary, #2f7d5c);
     background-color: #ffffff;
 }
 </style>