From 969b6e3288eeb0a63cb2fefa6465bd45c74700a0 Mon Sep 17 00:00:00 2001 From: xiaojunnuo Date: Tue, 26 May 2026 23:45:44 +0800 Subject: [PATCH] =?UTF-8?q?chore:=20=E9=92=B1=E5=8C=85=E9=82=80=E8=AF=B7?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E7=BE=8E=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/views/certd/invite/index.vue | 160 +++++++++++++++--- .../src/views/certd/mine/user-profile.vue | 25 +-- .../src/views/certd/suite/buy.vue | 2 +- .../src/views/certd/wallet/index.vue | 20 ++- .../src/views/sys/suite/invite/level.vue | 43 ++++- packages/ui/certd-server/src/configuration.ts | 2 - 6 files changed, 204 insertions(+), 48 deletions(-) diff --git a/packages/ui/certd-client/src/views/certd/invite/index.vue b/packages/ui/certd-client/src/views/certd/invite/index.vue index f1531c073..6896228c0 100644 --- a/packages/ui/certd-client/src/views/certd/invite/index.vue +++ b/packages/ui/certd-client/src/views/certd/invite/index.vue @@ -19,25 +19,37 @@
-
- 邀请码： - +
+
+ +
+ 邀请码 +
+ +
-
- 邀请链接： - +
+
+ +
+ 邀请链接 +
+ +
-
- 我的等级： - - - - - {{ inviteInfo.currentLevel?.name || "未设置" }} +
+
+ + +
+ 我的等级 +
+ {{ inviteInfo.currentLevel?.name || "未设置" }} {{ inviteInfo.currentLevel.commissionRate }}% - +
+
@@ -320,14 +332,27 @@ onActivated(async () => { .summary-card, .invite-link-panel { - border: 1px solid hsl(var(--border)); + border: 1px solid rgba(148, 163, 184, 0.28); border-radius: 8px; - background: hsl(var(--card)); - box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); + background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.82)), hsl(var(--card)); + box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08); + transition: + transform 0.18s ease, + box-shadow 0.18s ease, + border-color 0.18s ease; + } + + .summary-card:hover, + .invite-link-panel:hover { + border-color: rgba(52, 120, 246, 0.34); + box-shadow: 0 16px 38px rgba(15, 23, 42, 0.12); + transform: translateY(-2px); } .summary-card { + position: relative; min-height: 112px; + overflow: hidden; padding: 22px; } @@ -353,7 +378,7 @@ onActivated(async () => { .invite-link-panel { flex: none; - padding: 14px 18px; + padding: 16px 18px; margin-bottom: 18px; } @@ -364,24 +389,94 @@ onActivated(async () => { gap: 10px; } + .invite-highlight-row { + min-height: 48px; + padding: 8px 12px; + border: 1px solid rgba(52, 120, 246, 0.16); + border-radius: 8px; + background: rgba(248, 250, 252, 0.72); + transition: + border-color 0.18s ease, + background-color 0.18s ease, + box-shadow 0.18s ease; + } + + .invite-highlight-row:hover { + border-color: rgba(52, 120, 246, 0.34); + background: rgba(255, 255, 255, 0.92); + box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06); + } + + .level-highlight-row { + cursor: pointer; + } + + .level-info-icon { + color: #8a5a16; + font-size: 20px; + } + .invite-info-row + .invite-info-row { margin-top: 8px; } - .info-label { - width: 92px; + .info-icon { + display: inline-flex; flex: none; - color: hsl(var(--muted-foreground)); - text-align: right; + align-items: center; + justify-content: center; + width: 30px; + height: 30px; + border: 1px solid rgba(52, 120, 246, 0.14); + border-radius: 8px; + background: rgba(52, 120, 246, 0.08); + color: #3478f6; + font-size: 17px; + } + + .info-label { + width: 72px; + flex: none; + color: hsl(var(--foreground)); + font-size: 13px; + font-weight: 600; + text-align: left; white-space: nowrap; } + .info-content { + flex: 1; + min-width: 0; + } + .current-level-rate { margin-left: 6px; color: #c58a35; font-weight: 700; } + .level-info-content { + display: flex; + align-items: center; + gap: 4px; + } + + .level-name-text { + color: hsl(var(--foreground)); + font-weight: 600; + } + + .level-open-icon { + flex: none; + color: hsl(var(--muted-foreground)); + font-size: 16px; + transition: transform 0.18s ease; + } + + .level-highlight-row:hover .level-open-icon { + transform: translateX(2px); + } + .level-button { display: inline-flex; align-items: center; @@ -406,9 +501,10 @@ onActivated(async () => { flex-direction: column; min-height: 0; padding: 0 12px 12px; - border: 1px solid hsl(var(--border)); + border: 1px solid rgba(148, 163, 184, 0.28); border-radius: 8px; - background: hsl(var(--card)); + background: rgba(255, 255, 255, 0.92); + box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08); } .ant-tabs-content-holder, @@ -446,17 +542,27 @@ onActivated(async () => { position: relative; min-height: 132px; padding: 16px; - border: 1px solid hsl(var(--border)); + overflow: hidden; + border: 1px solid rgba(148, 163, 184, 0.28); border-radius: 8px; - background: hsl(var(--card)); + background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.8)), linear-gradient(135deg, rgba(197, 138, 53, 0.14), rgba(52, 120, 246, 0.12)); + box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08); transition: + transform 0.18s ease, + box-shadow 0.18s ease, border-color 0.2s, background-color 0.2s; } + .level-card:hover { + border-color: rgba(52, 120, 246, 0.38); + box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12); + transform: translateY(-2px); + } + .level-card.active { border-color: #3478f6; - background: hsl(var(--primary) / 10%); + background: linear-gradient(145deg, rgba(236, 244, 255, 0.92), rgba(248, 250, 252, 0.88)), hsl(var(--primary) / 10%); } .level-name { diff --git a/packages/ui/certd-client/src/views/certd/mine/user-profile.vue b/packages/ui/certd-client/src/views/certd/mine/user-profile.vue index 08f624945..a126a98d6 100644 --- a/packages/ui/certd-client/src/views/certd/mine/user-profile.vue +++ b/packages/ui/certd-client/src/views/certd/mine/user-profile.vue @@ -455,8 +455,8 @@ onMounted(async () => { .card-header { .header-bg-gradient { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - opacity: 0.15; + background: rgba(255, 255, 255, 0.04); + opacity: 1; } } @@ -572,8 +572,9 @@ onMounted(async () => { .bindings-card, .passkey-card { background: #fff; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); overflow: hidden; + border: 1px solid rgba(148, 163, 184, 0.22); + box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06); transition: all 0.3s ease; margin: 5px; } @@ -586,13 +587,15 @@ onMounted(async () => { .profile-card:hover, .bindings-card:hover, .passkey-card:hover { - box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); + border-color: rgba(148, 163, 184, 0.34); + box-shadow: 0 12px 30px rgba(15, 23, 42, 0.1); transform: translateY(-2px); } .card-header { position: relative; padding: 40px 30px; + background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.9)), hsl(var(--card)); } .header-bg-gradient { @@ -601,8 +604,8 @@ onMounted(async () => { left: 0; right: 0; height: 100%; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - opacity: 0.08; + background: radial-gradient(circle at 14% 22%, rgba(52, 120, 246, 0.08), transparent 34%), radial-gradient(circle at 86% 18%, rgba(197, 138, 53, 0.08), transparent 32%); + opacity: 1; } .header-content { @@ -631,14 +634,14 @@ onMounted(async () => { padding: 0; color: #667eea; background: #ffffff; - border: 1px solid #e5e7eb; + border: 1px solid rgba(148, 163, 184, 0.34); border-radius: 50%; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); + box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12); } .user-avatar { border: 4px solid #ffffff; - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); + box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12); } .status-indicator { @@ -678,7 +681,9 @@ onMounted(async () => { align-items: center; gap: 6px; padding: 6px 12px; - border-radius: 20px; + border: 1px solid rgba(148, 163, 184, 0.22); + border-radius: 8px; + background: rgba(255, 255, 255, 0.72); font-size: 13px; } diff --git a/packages/ui/certd-client/src/views/certd/suite/buy.vue b/packages/ui/certd-client/src/views/certd/suite/buy.vue index ecaccb19f..7c9e56160 100644 --- a/packages/ui/certd-client/src/views/certd/suite/buy.vue +++ b/packages/ui/certd-client/src/views/certd/suite/buy.vue @@ -125,7 +125,7 @@ loadSuiteIntro(); .suite-card-col { width: 20% !important; - min-width: 360px !important; + min-width: 354px !important; } } } diff --git a/packages/ui/certd-client/src/views/certd/wallet/index.vue b/packages/ui/certd-client/src/views/certd/wallet/index.vue index 0ccf2e3d2..869cf4043 100644 --- a/packages/ui/certd-client/src/views/certd/wallet/index.vue +++ b/packages/ui/certd-client/src/views/certd/wallet/index.vue @@ -299,21 +299,33 @@ onActivated(async () => { .summary-card, .wallet-tabs { - border: 1px solid hsl(var(--border)); + border: 1px solid rgba(148, 163, 184, 0.28); border-radius: 8px; - background: hsl(var(--card)); - box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); + background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.82)), hsl(var(--card)); + box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08); + transition: + transform 0.18s ease, + box-shadow 0.18s ease, + border-color 0.18s ease; } .summary-card { + position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 112px; + overflow: hidden; padding: 22px; } + .summary-card:hover { + border-color: rgba(52, 120, 246, 0.34); + box-shadow: 0 16px 38px rgba(15, 23, 42, 0.12); + transform: translateY(-2px); + } + .summary-card-main { min-width: 0; } @@ -345,6 +357,7 @@ onActivated(async () => { .summary-action-button { flex: none; + box-shadow: 0 8px 18px rgba(52, 120, 246, 0.22); } .wallet-tabs { @@ -353,6 +366,7 @@ onActivated(async () => { flex-direction: column; min-height: 0; padding: 0 12px 12px; + background: rgba(255, 255, 255, 0.92); } .ant-tabs-content-holder, diff --git a/packages/ui/certd-client/src/views/sys/suite/invite/level.vue b/packages/ui/certd-client/src/views/sys/suite/invite/level.vue index a56e9f7cc..b5287d740 100644 --- a/packages/ui/certd-client/src/views/sys/suite/invite/level.vue +++ b/packages/ui/certd-client/src/views/sys/suite/invite/level.vue @@ -102,6 +102,10 @@ onActivated(() => {