From ff15fd13894d6727f39e227a073d91e73f0078af Mon Sep 17 00:00:00 2001 From: Wenjie Zhang Date: Mon, 4 Aug 2025 18:31:25 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E7=94=A8=E6=88=B7=E7=95=8C=E9=9D=A2):=20?= =?UTF-8?q?=E6=94=B9=E8=BF=9B=E7=99=BB=E5=BD=95=E6=8C=89=E9=92=AE=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E5=B9=B6=E4=BC=98=E5=8C=96=E9=A6=96=E9=A1=B5=E8=A7=86?= =?UTF-8?q?=E8=A7=89=E6=95=88=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/src/components/UserInfoComponent.vue | 26 +++- web/src/views/HomeView.vue | 157 ++++++++++++++++++----- 2 files changed, 146 insertions(+), 37 deletions(-) diff --git a/web/src/components/UserInfoComponent.vue b/web/src/components/UserInfoComponent.vue index 3d64ed45..b365ce7e 100644 --- a/web/src/components/UserInfoComponent.vue +++ b/web/src/components/UserInfoComponent.vue @@ -23,9 +23,12 @@ - - 登录 + + 登录 + @@ -44,6 +47,10 @@ const props = defineProps({ showRole: { type: Boolean, default: false + }, + showButton: { + type: Boolean, + default: false } }) @@ -161,4 +168,19 @@ const goToLogin = () => { font-size: 12px; color: rgba(0, 0, 0, 0.45); } + +.login-icon { + width: 30px; + height: 30px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + border-radius: 50%; + transition: background-color 0.3s; + + &:hover { + background-color: rgba(0, 0, 0, 0.05); + } +} \ No newline at end of file diff --git a/web/src/views/HomeView.vue b/web/src/views/HomeView.vue index eb30d8c6..40c63dbb 100644 --- a/web/src/views/HomeView.vue +++ b/web/src/views/HomeView.vue @@ -1,18 +1,27 @@ @@ -52,6 +45,7 @@ import { useRouter } from 'vue-router' import { useUserStore } from '@/stores/user' import { useInfoStore } from '@/stores/info' import { chatApi } from '@/apis/auth_api' +import UserInfoComponent from '@/components/UserInfoComponent.vue' const router = useRouter() const userStore = useUserStore() @@ -126,9 +120,24 @@ onMounted(async () => { display: flex; flex-direction: column; color: #333; - background: linear-gradient(135deg, #f5f7fa, #e2e8f0, #f0f4f8, #eef2f7); + background: linear-gradient(135deg, #f0f7ff 0%, #f8fcff 50%, #f5faff 100%); background-size: 400% 400%; - animation: gradientBackground 15s ease infinite; + animation: gradientBackground 20s ease infinite; + position: relative; + overflow: hidden; +} + +.home-container::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: radial-gradient(circle at 15% 25%, rgba(161, 196, 253, 0.08) 0%, transparent 25%), + radial-gradient(circle at 85% 75%, rgba(194, 233, 251, 0.08) 0%, transparent 25%), + radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 30%); + z-index: 0; } @keyframes gradientBackground { @@ -149,14 +158,86 @@ onMounted(async () => { align-items: center; width: 100%; padding: 1.2rem 2rem; - background-color: rgba(255, 255, 255, 0.1); - backdrop-filter: blur(10px); + background-color: rgba(255, 255, 255, 0.15); + backdrop-filter: blur(15px); border-bottom: 1px solid rgba(255, 255, 255, 0.2); position: fixed; top: 0; left: 0; right: 0; z-index: 100; + box-shadow: 0 2px 20px rgba(0, 0, 0, 0.03); +} + +.header-actions { + display: flex; + align-items: center; + gap: 1rem; +} + +.background-elements { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: hidden; + z-index: 0; +} + +.circle { + position: absolute; + border-radius: 50%; + background: rgba(255, 255, 255, 0.08); + animation: float 18s infinite ease-in-out; + box-shadow: 0 0 30px rgba(161, 196, 253, 0.1); +} + +.circle-1 { + width: 150px; + height: 150px; + top: 10%; + left: 5%; + animation-delay: 0s; +} + +.circle-2 { + width: 100px; + height: 100px; + top: 70%; + left: 20%; + animation-delay: -5s; +} + +.circle-3 { + width: 80px; + height: 80px; + top: 20%; + right: 10%; + animation-delay: -10s; +} + +.circle-4 { + width: 120px; + height: 120px; + bottom: 15%; + right: 15%; + animation-delay: -7s; +} + +@keyframes float { + 0%, 100% { + transform: translate(0, 0); + } + 25% { + transform: translate(20px, 20px); + } + 50% { + transform: translate(40px, 0); + } + 75% { + transform: translate(20px, -20px); + } } .logo { @@ -179,13 +260,14 @@ onMounted(async () => { color: #333; padding: 0.6rem 1.2rem; border-radius: 2rem; - background-color: rgba(255, 255, 255, 0.4); + background-color: rgba(255, 255, 255, 0.25); transition: all 0.3s ease; + border: 1px solid rgba(255, 255, 255, 0.3); &:hover { - background-color: rgba(255, 255, 255, 0.6); + background-color: rgba(255, 255, 255, 0.4); transform: translateY(-2px); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06); } svg { @@ -199,12 +281,15 @@ onMounted(async () => { .hero-section { height: 100vh; + width: 100vw; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 2rem; + position: relative; + z-index: 1; } .hero-content { @@ -215,7 +300,7 @@ onMounted(async () => { font-size: 4rem; font-weight: 700; margin-bottom: 1.5rem; - background: linear-gradient(45deg, #333, #666); + background: linear-gradient(45deg, #333, #555); -webkit-background-clip: text; background-clip: text; color: transparent; @@ -241,9 +326,11 @@ onMounted(async () => { span { padding: 0.5rem 1rem; - background-color: rgba(255, 255, 255, 0.6); + background-color: rgba(255, 255, 255, 0.3); border-radius: 2rem; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); + border: 1px solid rgba(255, 255, 255, 0.4); + backdrop-filter: blur(10px); } } @@ -257,11 +344,11 @@ onMounted(async () => { border-radius: 3rem; cursor: pointer; transition: all 0.3s ease; - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); &:hover { transform: translateY(-3px); - box-shadow: 0 7px 20px rgba(0, 0, 0, 0.15); + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); background: linear-gradient(135deg, var(--main-color), var(--main-700)); }