-
邀请链接:
-
+
-
-
我的等级:
-
-
-
-
- {{ 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(() => {