kate522/wordpress-theme-aksrt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: unify referral promotion tabs and compact earnings UI

Browse Source
This commit is contained in:
kate522
2026-08-16 20:40:21 +08:00
parent 8799063c6c
commit ff730ab593
7 changed files with 144 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/routes/user-center/promotion.css
+48 -8
View File
@@ -99,8 +99,8 @@
}
.uc-content .uc-commission-card {
min-height: 174px;
padding: 24px 26px;
min-height: 116px;
padding: 16px 22px;
border: 0;
border-radius: 18px;
box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
@@ -125,7 +125,7 @@
.uc-content .uc-commission-card__body {
display: grid;
align-content: space-between;
min-height: 126px;
min-height: 84px;
}
.uc-content .uc-commission-card__body > span,
@@ -142,13 +142,13 @@
}
.uc-content .uc-commission-card__body strong {
font-size: 42px;
font-size: 32px;
line-height: 1;
}
.uc-content .uc-commission-card__body strong small {
margin-left: 4px;
font-size: 18px;
font-size: 15px;
}
.uc-content .uc-commission-card__body > span:last-child,
@@ -174,6 +174,36 @@
backdrop-filter: blur(4px);
}
/* 三 Tab 推广收益：佣金详细页采用紧凑的一列信息清单。 */
.uc-content .uc-reward-area { display: grid; gap: 18px; padding: 24px 28px 30px; border-radius: 18px; background: var(--surface-1, #fff); box-shadow: 0 8px 26px rgba(15, 23, 42, .06); }
.uc-content .uc-reward-area__heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.uc-content .uc-reward-area__heading h3 { margin: 0; font-size: 20px; }
.uc-content .uc-reward-area__heading > span { color: var(--color-ink-4); font-size: 13px; }
.uc-content .uc-reward-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--color-line-soft, rgba(15, 23, 42, .08)); }
.uc-content .uc-reward-tabs a { position: relative; padding: 0 0 12px; color: var(--color-ink-4); font-size: 14px; text-decoration: none; }
.uc-content .uc-reward-tabs a.is-active { color: var(--color-primary); font-weight: 700; }
.uc-content .uc-reward-tabs a.is-active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; border-radius: 99px; background: var(--color-primary); content: ""; }
.uc-content .uc-promotion-summary-list { display: grid; gap: 0; max-width: 920px; }
.uc-content .uc-promotion-summary-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 54px; padding: 8px 0; border-bottom: 1px solid var(--color-line-soft, rgba(15, 23, 42, .07)); }
.uc-content .uc-promotion-summary-row > span { color: var(--color-ink-3); font-size: 14px; }
.uc-content .uc-promotion-summary-row > strong { color: var(--color-ink); font-size: 16px; }
.uc-content .uc-promotion-summary-row > em { color: var(--color-ink-4); font-style: normal; }
.uc-content .uc-promotion-summary-row--link input { width: 100%; min-width: 0; height: 38px; padding: 0 10px; border: 1px solid var(--color-line-soft, rgba(15, 23, 42, .12)); border-radius: 7px; color: var(--color-primary); background: var(--surface-2, #f8fafc); }
.uc-content .uc-promotion-summary-row--link button { min-width: 64px; height: 38px; padding: 0 12px; border-radius: 7px; }
.uc-content .uc-promotion-summary-row--link small { grid-column: 2 / -1; min-height: 16px; color: var(--color-success, #16a34a); font-size: 12px; }
.uc-content .uc-promotion-summary-row--link small.is-error { color: var(--color-error, #dc2626); }
.uc-content .uc-promotion-summary-row--total > div { display: flex; flex-wrap: wrap; gap: 12px; }
.uc-content .uc-promotion-summary-row--total strong { padding: 7px 11px; border-radius: 7px; color: var(--color-primary); background: var(--surface-2, #f8fafc); font-size: 14px; }
.uc-content .uc-promotion-summary-row--explain { align-items: start; padding-top: 16px; border-bottom: 0; }
.uc-content .uc-promotion-summary-row--explain .uc-reward-richtext { grid-column: 2 / -1; color: var(--color-ink-3); font-size: 14px; line-height: 1.75; }
.uc-content .uc-promotion-summary-row--explain .uc-reward-richtext p { margin: 0; }
.uc-content .uc-promotion-user-list { display: grid; }
.uc-content .uc-promotion-user-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--color-line-soft, rgba(15, 23, 42, .07)); }
.uc-content .uc-promotion-user-row img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: var(--surface-2); }
.uc-content .uc-promotion-user-row > div { display: grid; flex: 1; gap: 3px; min-width: 0; }
.uc-content .uc-promotion-user-row small { color: var(--color-ink-4); font-size: 12px; }
.uc-content .uc-promotion-user-row > span { color: var(--color-success, #16a34a); font-size: 12px; }
.uc-content .uc-commission-card__action:hover {
background: rgba(255, 255, 255, .24);
}
@@ -293,16 +323,16 @@
@media (max-width: 560px) {
.uc-content .uc-commission-card {
min-height: 150px;
min-height: 100px;
padding: 20px;
}
.uc-content .uc-commission-card__body {
min-height: 108px;
min-height: 72px;
}
.uc-content .uc-commission-card__body strong {
font-size: 36px;
font-size: 28px;
}
.uc-content .uc-affiliate-link-card {
@@ -321,4 +351,14 @@
.uc-content .uc-affiliate-stats {
grid-template-columns: 1fr;
}
.uc-content .uc-reward-area { padding: 20px 16px 24px; }
.uc-content .uc-reward-area__heading { display: grid; gap: 4px; }
.uc-content .uc-reward-tabs { gap: 16px; overflow-x: auto; }
.uc-content .uc-promotion-summary-row { grid-template-columns: 92px minmax(0, 1fr) auto; gap: 8px; }
.uc-content .uc-promotion-summary-row--link { grid-template-columns: 1fr auto; }
.uc-content .uc-promotion-summary-row--link > span { grid-column: 1 / -1; }
.uc-content .uc-promotion-summary-row--link small { grid-column: 1 / -1; }
.uc-content .uc-promotion-summary-row--explain { grid-template-columns: 1fr; }
.uc-content .uc-promotion-summary-row--explain .uc-reward-richtext { grid-column: 1; }
}