From 982c97ab82f3beb1b4febcf014562eda34b9fc05 Mon Sep 17 00:00:00 2001
From: liu <2021943741@qq.com>
Date: 星期二, 29 九月 2026 17:59:41 +0800
Subject: [PATCH] feat(ui): 江苏商贸品牌视觉与首页/登录页改版
---
src/packages/effects/layouts/src/authentication/authentication.vue | 134 +++++++++++++++++++++++++++++++++-----------
1 files changed, 100 insertions(+), 34 deletions(-)
diff --git a/src/packages/effects/layouts/src/authentication/authentication.vue b/src/packages/effects/layouts/src/authentication/authentication.vue
index 89299ae..47cf399 100644
--- a/src/packages/effects/layouts/src/authentication/authentication.vue
+++ b/src/packages/effects/layouts/src/authentication/authentication.vue
@@ -7,7 +7,6 @@
import { Copyright } from '../basic/copyright';
import AuthenticationFormView from './form.vue';
-import SloganIcon from './icons/slogan.vue';
import Toolbar from './toolbar.vue';
interface Props {
@@ -103,34 +102,39 @@
</div>
</slot>
- <!-- 绯荤粺浠嬬粛 -->
+ <!-- 绯荤粺浠嬬粛锛氭牎鍥鏅彃鐢婚摵婊� + 宸︿笅瑙掑搧鐗屾枃妗� -->
<div v-if="!authPanelCenter" class="relative hidden w-0 flex-1 lg:block">
<div
class="absolute inset-0 size-full bg-background-deep dark:bg-[#070709]"
>
- <div class="login-background absolute top-0 left-0 size-full"></div>
+ <!-- 鎵嬬粯鏍″洯鎻掔敾锛涘閮ㄤ紶鍏� sloganImage 鏃朵紭鍏堢敤澶栭儴鍥� -->
+ <img
+ v-if="sloganImage"
+ alt=""
+ class="campus-illustration"
+ :src="sloganImage"
+ />
+ <img
+ v-else
+ alt=""
+ class="campus-illustration"
+ src="/static/imgs/jssm-campus.svg"
+ />
+ <!-- 鍘嬫殫鍙犲眰锛氬簳閮ㄥ姞閲嶏紝淇濊瘉鏂囧瓧鍙 -->
+ <div class="campus-overlay"></div>
+ <div class="academic-bg-pattern"></div>
+
<div
:key="authPanelLeft ? 'left' : authPanelRight ? 'right' : 'center'"
- class="mr-20 flex-col-center h-full"
+ class="campus-content"
:class="{
'enter-x': authPanelLeft,
'-enter-x': authPanelRight,
}"
>
- <template v-if="sloganImage">
- <img
- :alt="appName"
- :src="sloganImage"
- class="h-64 w-2/5 animate-float"
- />
- </template>
- <SloganIcon v-else :alt="appName" class="h-64 w-2/5 animate-float" />
- <div class="text-1xl mt-6 font-sans text-foreground lg:text-2xl">
- {{ pageTitle }}
- </div>
- <div class="mt-2 dark:text-muted-foreground">
- {{ pageDescription }}
- </div>
+ <div class="campus-rule"></div>
+ <div class="academic-brand-title">{{ pageTitle }}</div>
+ <div class="academic-brand-desc">{{ pageDescription }}</div>
</div>
</div>
</div>
@@ -138,6 +142,8 @@
<!-- 涓績璁よ瘉闈㈡澘 -->
<div v-if="authPanelCenter" class="relative flex-center w-full">
<div class="login-background absolute top-0 left-0 size-full"></div>
+ <!-- 瀛︽湳椋庤楗扮綉鏍艰儗鏅� -->
+ <div class="academic-bg-pattern"></div>
<AuthenticationFormView
class="w-full rounded-3xl pb-20 shadow-float shadow-primary/5 md:w-2/3 md:bg-background lg:w-1/2 xl:w-[36%]"
data-side="bottom"
@@ -172,25 +178,85 @@
</template>
<style scoped>
-.login-background {
- background: linear-gradient(
- 154deg,
- #07070915 30%,
- hsl(var(--primary) / 30%) 48%,
- #07070915 64%
- );
- filter: blur(100px);
+/* 鏍″洯鎻掔敾閾烘弧宸︿晶鍝佺墝鍖猴紱object-position 鐣ュ亸涓婏紝淇濅綇寤虹瓚涓讳綋 */
+.campus-illustration {
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ object-position: center 34%;
+}
+
+/* 鍙犲眰锛氬簳閮ㄥ帇鏆楃粰鏂囧瓧锛屽乏渚х暐鏆椾互绐佸嚭鐧借壊鏍囬 */
+.campus-overlay {
+ position: absolute;
+ inset: 0;
+ background:
+ linear-gradient(
+ 180deg,
+ rgba(8, 24, 44, 0.12) 0%,
+ rgba(8, 24, 44, 0.22) 42%,
+ rgba(8, 24, 44, 0.86) 100%
+ ),
+ linear-gradient(
+ 90deg,
+ rgba(8, 24, 44, 0.4) 0%,
+ rgba(8, 24, 44, 0) 58%
+ );
+}
+
+/* 瑁呴グ缃戞牸锛氬帇鍒板嚑涔庝笉鍙鐨勯噾鑹茬粏绾� */
+.academic-bg-pattern {
+ position: absolute;
+ inset: 0;
+ background-image:
+ linear-gradient(rgba(212, 175, 55, 0.03) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(212, 175, 55, 0.03) 1px, transparent 1px);
+ background-size: 72px 72px;
+ pointer-events: none;
+}
+
+/* 鍝佺墝鏂囨锛氬畾浣嶅埌宸︿笅瑙� */
+.campus-content {
+ position: absolute;
+ bottom: 68px;
+ left: 56px;
+ z-index: 10;
+ max-width: 64%;
+}
+
+/* 鏍囬涓婃柟鐨勯噾鑹茬煭妯嚎 */
+.campus-rule {
+ width: 46px;
+ height: 2px;
+ margin-bottom: 20px;
+ border-radius: 2px;
+ background: linear-gradient(90deg, #e3c567, #b8901f);
+}
+
+/* 鍝佺墝鍖烘爣棰橈細绫崇櫧锛岄槾褰辨敹鏁涗互淇濇寔搴勯噸 */
+.academic-brand-title {
+ color: #f5f0e4 !important;
+ font-size: 26px;
+ font-weight: 600;
+ letter-spacing: 5px;
+ text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
+}
+
+.academic-brand-desc {
+ margin-top: 12px;
+ color: rgba(212, 175, 55, 0.85) !important;
+ font-size: 13.5px;
+ letter-spacing: 3px;
}
.dark {
- .login-background {
- background: linear-gradient(
- 154deg,
- #07070915 30%,
- hsl(var(--primary) / 20%) 48%,
- #07070915 64%
- );
- filter: blur(100px);
+ .academic-bg-pattern {
+ background-image:
+ linear-gradient(rgba(212, 175, 55, 0.045) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(212, 175, 55, 0.045) 1px, transparent 1px);
+ background-size: 72px 72px;
}
}
</style>
--
Gitblit v1.9.3