feat: redesign promotion earnings cards
This commit is contained in:
@@ -87,9 +87,238 @@
|
||||
.uc-content .uc-affiliate-stats article strong { color:var(--primary,#2563eb); font-size:24px; font-variant-numeric:tabular-nums; }
|
||||
.uc-content .uc-affiliate-link-card [data-affiliate-feedback] { grid-column:1/-1; margin:0; min-height:18px; color:var(--success,#16a34a); font-size:12px; }
|
||||
.uc-content .uc-affiliate-link-card [data-affiliate-feedback].is-error { color:var(--danger,#dc2626); }
|
||||
.uc-content .uc-affiliate-accounts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding-top:4px; }
|
||||
.uc-content .uc-affiliate-accounts label { display:grid; gap:5px; color:var(--muted,#6b7280); font-size:12px; }
|
||||
.uc-content .uc-affiliate-accounts input { height:38px; padding:0 10px; border:1px solid var(--border,#e5e7eb); border-radius:8px; background:var(--surface,#fff); color:var(--text,#111827); }
|
||||
.uc-content .uc-affiliate-accounts button { justify-self:start; }
|
||||
.uc-content .uc-affiliate-accounts p { grid-column:1/-1; margin:0; color:var(--success,#16a34a); font-size:12px; }
|
||||
@media (max-width:640px) { .uc-content .aksrt-affiliate-panel { padding:16px; } .uc-content .uc-affiliate-link-card { align-items:stretch; flex-direction:column; } .uc-content .uc-affiliate-link-card button { width:100%; } .uc-content .uc-affiliate-stats,.uc-content .uc-affiliate-accounts { grid-template-columns:1fr; } }
|
||||
@media (max-width:640px) { .uc-content .aksrt-affiliate-panel { padding:16px; } .uc-content .uc-affiliate-link-card { align-items:stretch; flex-direction:column; } .uc-content .uc-affiliate-link-card button { width:100%; } .uc-content .uc-affiliate-stats { grid-template-columns:1fr; } }
|
||||
|
||||
/* 推广收益新版布局：顶部概览卡 + 单一推荐奖励白卡。 */
|
||||
.uc-content .uc-revenue-panel {
|
||||
gap: 22px;
|
||||
}
|
||||
|
||||
.uc-content .uc-commission-summary {
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.uc-content .uc-commission-card {
|
||||
min-height: 174px;
|
||||
padding: 24px 26px;
|
||||
border: 0;
|
||||
border-radius: 18px;
|
||||
box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
|
||||
}
|
||||
|
||||
.uc-content .uc-commission-card--ratio {
|
||||
color: #fff;
|
||||
background:
|
||||
radial-gradient(circle at 86% 4%, rgba(255, 255, 255, .16) 0 22%, transparent 22.5%),
|
||||
radial-gradient(circle at 32% 110%, rgba(213, 37, 43, .28) 0 42%, transparent 42.5%),
|
||||
linear-gradient(135deg, #ff6d61 0%, #ff3e3e 100%);
|
||||
}
|
||||
|
||||
.uc-content .uc-commission-card--balance {
|
||||
color: #fff;
|
||||
background:
|
||||
radial-gradient(circle at 14% 96%, rgba(11, 103, 204, .2) 0 44%, transparent 44.5%),
|
||||
radial-gradient(circle at 100% 100%, rgba(255, 255, 255, .12) 0 28%, transparent 28.5%),
|
||||
linear-gradient(135deg, #48b7ee 0%, #2b8fe8 100%);
|
||||
}
|
||||
|
||||
.uc-content .uc-commission-card__body {
|
||||
display: grid;
|
||||
align-content: space-between;
|
||||
min-height: 126px;
|
||||
}
|
||||
|
||||
.uc-content .uc-commission-card__body > span,
|
||||
.uc-content .uc-commission-card__body > p,
|
||||
.uc-content .uc-commission-card__body strong,
|
||||
.uc-content .uc-commission-card__body strong small {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.uc-content .uc-commission-card__body > span:first-child {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.uc-content .uc-commission-card__body strong {
|
||||
font-size: 42px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.uc-content .uc-commission-card__body strong small {
|
||||
margin-left: 4px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.uc-content .uc-commission-card__body > span:last-child,
|
||||
.uc-content .uc-commission-card__body > p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
opacity: .92;
|
||||
}
|
||||
|
||||
.uc-content .uc-commission-card--ratio .uc-commission-card__body strong {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.uc-content .uc-commission-card__action {
|
||||
align-self: center;
|
||||
margin-left: auto;
|
||||
padding: 10px 16px;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, .14);
|
||||
font-size: 14px;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.uc-content .uc-commission-card__action:hover {
|
||||
background: rgba(255, 255, 255, .24);
|
||||
}
|
||||
|
||||
.uc-content .aksrt-affiliate-panel {
|
||||
gap: 24px;
|
||||
padding: 34px 44px 38px;
|
||||
border: 0;
|
||||
border-radius: 18px;
|
||||
background: var(--surface-1, #fff);
|
||||
box-shadow: 0 8px 26px rgba(15, 23, 42, .06);
|
||||
}
|
||||
|
||||
.uc-content .uc-panel-heading {
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid var(--color-line-soft, rgba(15, 23, 42, .08));
|
||||
}
|
||||
|
||||
.uc-content .uc-panel-heading h2 {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin: 0 0 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.uc-content .uc-panel-heading h2::after {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: -11px;
|
||||
left: 0;
|
||||
height: 3px;
|
||||
border-radius: 999px;
|
||||
background: #f1498c;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.uc-content .uc-panel-heading p {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.uc-content .uc-affiliate-link-card {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.uc-content .uc-affiliate-link-card > div {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.uc-content .uc-affiliate-link-card > div > span {
|
||||
color: var(--color-ink-4);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.uc-content .uc-affiliate-link-card input {
|
||||
height: 42px;
|
||||
border: 0;
|
||||
border-radius: 7px;
|
||||
color: #ef5370;
|
||||
background: #fff0f2;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.uc-content .uc-affiliate-link-card button {
|
||||
min-height: 42px;
|
||||
border-radius: 7px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.uc-content .uc-affiliate-link-card [data-affiliate-feedback] {
|
||||
grid-column: 2 / -1;
|
||||
}
|
||||
|
||||
.uc-content .uc-affiliate-stats {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.uc-content .uc-affiliate-stats article {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 48px;
|
||||
padding: 0 14px;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background: var(--surface-2, #f7f8fa);
|
||||
}
|
||||
|
||||
.uc-content .uc-affiliate-stats article strong {
|
||||
color: var(--color-primary);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.uc-content .uc-affiliate-stats article:first-child strong {
|
||||
color: #e94568;
|
||||
}
|
||||
|
||||
.uc-content .uc-affiliate-note {
|
||||
margin-top: -8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.uc-content .uc-commission-summary {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.uc-content .aksrt-affiliate-panel {
|
||||
padding: 24px 20px 28px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.uc-content .uc-commission-card {
|
||||
min-height: 150px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.uc-content .uc-commission-card__body {
|
||||
min-height: 108px;
|
||||
}
|
||||
|
||||
.uc-content .uc-commission-card__body strong {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.uc-content .uc-affiliate-link-card {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.uc-content .uc-affiliate-link-card > div {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.uc-content .uc-affiliate-link-card [data-affiliate-feedback] {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.uc-content .uc-affiliate-stats {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user