style(invitation): 邀请返利界面全面对齐平台金橙品牌色规范
- 顶部 Banner 重构为黑曜石暗金底配金橙光辉，彻底消除蓝色调 - 收益数据卡片、专属推广栏及操作按钮升级为金橙与琥珀暖色系 - 阶梯分成规则卡片更新为首月红橙、次月暖金、永久长青绿三阶体系 - 明细 Tab 指示条、角色标签与分页组件全面对齐品牌设计 - 验证方式：npm run check 与 npm run test 全部通过，无告警与报错
This commit is contained in:
yml2213
@@ -269,7 +269,10 @@ function cycleLabel(cycle: string) {
|
||||
<!-- 阶梯分成规则说明 -->
|
||||
<div class="rules-card">
|
||||
<div class="rules-header">
|
||||
<h3>邀请返利分成规则说明</h3>
|
||||
<div class="rules-header-title">
|
||||
<div class="rules-title-bar"></div>
|
||||
<h3>邀请返利分成规则说明</h3>
|
||||
</div>
|
||||
<span class="rule-tip">以被邀请人完成实名认证时刻作为周期计算起点</span>
|
||||
</div>
|
||||
|
||||
@@ -462,53 +465,74 @@ function cycleLabel(cycle: string) {
|
||||
}
|
||||
|
||||
.hero-card {
|
||||
background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
|
||||
border-radius: 16px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background:
|
||||
radial-gradient(circle at 90% 15%, rgba(255, 106, 0, 0.22) 0%, transparent 50%),
|
||||
radial-gradient(circle at 10% 85%, rgba(255, 133, 46, 0.12) 0%, transparent 45%),
|
||||
linear-gradient(145deg, #0d121c 0%, #151d2d 45%, #1e293b 100%);
|
||||
border: 1px solid rgba(255, 106, 0, 0.25);
|
||||
border-radius: 20px;
|
||||
color: #ffffff;
|
||||
padding: 32px 28px;
|
||||
padding: 36px 32px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
box-shadow: 0 10px 25px rgba(37, 99, 235, 0.15);
|
||||
gap: 22px;
|
||||
box-shadow:
|
||||
0 12px 32px rgba(15, 23, 42, 0.22),
|
||||
0 4px 16px rgba(255, 106, 0, 0.08);
|
||||
}
|
||||
|
||||
.hero-left {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
padding: 4px 12px;
|
||||
background: rgba(255, 106, 0, 0.16);
|
||||
border: 1px solid rgba(255, 133, 46, 0.4);
|
||||
color: #ff9b4e;
|
||||
padding: 4px 14px;
|
||||
border-radius: 20px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 12px;
|
||||
backdrop-filter: blur(4px);
|
||||
font-weight: 600;
|
||||
margin-bottom: 14px;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 26px;
|
||||
font-size: 28px;
|
||||
font-weight: 800;
|
||||
margin: 0;
|
||||
letter-spacing: 0.5px;
|
||||
background: linear-gradient(135deg, #ffffff 60%, #ffd8a8 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 14px;
|
||||
opacity: 0.9;
|
||||
margin: 8px 0 0;
|
||||
line-height: 1.5;
|
||||
color: #cbd5e1;
|
||||
margin: 10px 0 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.hero-unverified-alert {
|
||||
background: rgba(234, 179, 8, 0.18);
|
||||
border: 1px solid rgba(253, 224, 71, 0.4);
|
||||
border-radius: 12px;
|
||||
padding: 14px 18px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
background: rgba(255, 106, 0, 0.12);
|
||||
border: 1px solid rgba(255, 106, 0, 0.35);
|
||||
border-radius: 14px;
|
||||
padding: 16px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.alert-content {
|
||||
@@ -519,38 +543,40 @@ function cycleLabel(cycle: string) {
|
||||
|
||||
.alert-icon {
|
||||
font-size: 24px;
|
||||
color: #fde047;
|
||||
color: #ff852e;
|
||||
}
|
||||
|
||||
.alert-text strong {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #fef08a;
|
||||
color: #fed7aa;
|
||||
}
|
||||
|
||||
.alert-text p {
|
||||
margin: 2px 0 0;
|
||||
margin: 3px 0 0;
|
||||
font-size: 12px;
|
||||
color: #f8fafc;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
.realname-btn {
|
||||
background: #facc15;
|
||||
color: #854d0e;
|
||||
background: linear-gradient(135deg, #ff6a00 0%, #ff852e 100%);
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 8px 16px;
|
||||
padding: 9px 18px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
transition: opacity 0.2s;
|
||||
box-shadow: 0 4px 12px rgba(255, 106, 0, 0.3);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.realname-btn:hover {
|
||||
opacity: 0.9;
|
||||
box-shadow: 0 6px 16px rgba(255, 106, 0, 0.45);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.stats-row {
|
||||
@@ -562,10 +588,17 @@ function cycleLabel(cycle: string) {
|
||||
|
||||
.stat-card {
|
||||
background: #ffffff;
|
||||
border-radius: 14px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
|
||||
border-radius: 16px;
|
||||
padding: 22px;
|
||||
box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
|
||||
border: 1px solid #f1f5f9;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
border-color: #fed7aa;
|
||||
box-shadow: 0 8px 24px rgba(255, 106, 0, 0.08);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.stat-header {
|
||||
@@ -577,28 +610,31 @@ function cycleLabel(cycle: string) {
|
||||
.stat-label {
|
||||
font-size: 13px;
|
||||
color: #64748b;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
font-size: 20px;
|
||||
padding: 6px;
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.stat-icon.income {
|
||||
background: #fef2f2;
|
||||
color: #dc2626;
|
||||
background: #fff7ed;
|
||||
color: #ea580c;
|
||||
border: 1px solid #ffedd5;
|
||||
}
|
||||
|
||||
.stat-icon.month {
|
||||
background: #eff6ff;
|
||||
color: #2563eb;
|
||||
background: #fefce8;
|
||||
color: #d97706;
|
||||
border: 1px solid #fef08a;
|
||||
}
|
||||
|
||||
.stat-icon.users {
|
||||
background: #f0fdf4;
|
||||
color: #16a34a;
|
||||
border: 1px solid #dcfce7;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
@@ -610,14 +646,15 @@ function cycleLabel(cycle: string) {
|
||||
}
|
||||
|
||||
.stat-value strong {
|
||||
font-size: 28px;
|
||||
font-size: 30px;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.currency {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #dc2626;
|
||||
color: #ea580c;
|
||||
}
|
||||
|
||||
.stat-value .unit {
|
||||
@@ -634,10 +671,10 @@ function cycleLabel(cycle: string) {
|
||||
|
||||
.share-box-card {
|
||||
background: #ffffff;
|
||||
border-radius: 14px;
|
||||
padding: 22px;
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
margin-top: 20px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
|
||||
box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
|
||||
border: 1px solid #f1f5f9;
|
||||
}
|
||||
|
||||
@@ -645,7 +682,7 @@ function cycleLabel(cycle: string) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.share-title {
|
||||
@@ -654,15 +691,20 @@ function cycleLabel(cycle: string) {
|
||||
gap: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.share-title .el-icon {
|
||||
color: #ff6a00;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.poster-trigger-btn {
|
||||
background: #eff6ff;
|
||||
color: #2563eb;
|
||||
border: 1px solid #bfdbfe;
|
||||
border-radius: 6px;
|
||||
padding: 6px 14px;
|
||||
background: #fff7ed;
|
||||
color: #ff6a00;
|
||||
border: 1px solid #fed7aa;
|
||||
border-radius: 8px;
|
||||
padding: 7px 16px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
@@ -673,12 +715,15 @@ function cycleLabel(cycle: string) {
|
||||
}
|
||||
|
||||
.poster-trigger-btn:hover {
|
||||
background: #dbeafe;
|
||||
background: #ffedd5;
|
||||
border-color: #fdba74;
|
||||
color: #ea580c;
|
||||
box-shadow: 0 2px 8px rgba(255, 106, 0, 0.15);
|
||||
}
|
||||
|
||||
.share-content-row {
|
||||
display: grid;
|
||||
grid-template-columns: 180px 1fr;
|
||||
grid-template-columns: 200px 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
@@ -687,13 +732,13 @@ function cycleLabel(cycle: string) {
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
margin-bottom: 6px;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.field-box {
|
||||
background: #f8fafc;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
background: #fffaf5;
|
||||
border: 1px solid #fed7aa;
|
||||
border-radius: 10px;
|
||||
padding: 8px 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -702,15 +747,15 @@ function cycleLabel(cycle: string) {
|
||||
}
|
||||
|
||||
.code-text {
|
||||
font-family: monospace;
|
||||
font-size: 18px;
|
||||
font-family: 'DIN Alternate', 'SF Mono', Consolas, monospace;
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
color: #2563eb;
|
||||
letter-spacing: 1px;
|
||||
color: #ff6a00;
|
||||
letter-spacing: 1.5px;
|
||||
}
|
||||
|
||||
.link-text {
|
||||
font-family: monospace;
|
||||
font-family: -apple-system, BlinkMacSystemFont, monospace;
|
||||
font-size: 13px;
|
||||
color: #334155;
|
||||
white-space: nowrap;
|
||||
@@ -723,8 +768,9 @@ function cycleLabel(cycle: string) {
|
||||
border: 1px solid #cbd5e1;
|
||||
color: #475569;
|
||||
border-radius: 6px;
|
||||
padding: 5px 10px;
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -733,39 +779,60 @@ function cycleLabel(cycle: string) {
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.copy-btn.primary {
|
||||
background: #2563eb;
|
||||
border-color: #2563eb;
|
||||
color: #ffffff;
|
||||
.copy-btn:hover {
|
||||
border-color: #ff6a00;
|
||||
color: #ff6a00;
|
||||
}
|
||||
|
||||
.copy-btn:hover {
|
||||
opacity: 0.9;
|
||||
.copy-btn.primary {
|
||||
background: linear-gradient(135deg, #ff6a00 0%, #ff852e 100%);
|
||||
border: none;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 3px 10px rgba(255, 106, 0, 0.28);
|
||||
}
|
||||
|
||||
.copy-btn.primary:hover {
|
||||
box-shadow: 0 5px 16px rgba(255, 106, 0, 0.4);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.rules-card {
|
||||
background: #ffffff;
|
||||
border-radius: 14px;
|
||||
padding: 22px;
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
margin-top: 20px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
|
||||
box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
|
||||
border: 1px solid #f1f5f9;
|
||||
}
|
||||
|
||||
.rules-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.rules-header-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.rules-title-bar {
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
background: linear-gradient(180deg, #ff6a00, #ff852e);
|
||||
}
|
||||
|
||||
.rules-header h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.rule-tip {
|
||||
@@ -776,47 +843,73 @@ function cycleLabel(cycle: string) {
|
||||
.ladder-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 14px;
|
||||
margin-bottom: 18px;
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.ladder-item {
|
||||
border-radius: 10px;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
padding: 18px 16px;
|
||||
text-align: center;
|
||||
border: 1px solid transparent;
|
||||
transition: all 0.25s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ladder-item:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.ladder-first {
|
||||
background: #fef2f2;
|
||||
border-color: #fecaca;
|
||||
background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%);
|
||||
border: 1.5px solid #fed7aa;
|
||||
}
|
||||
|
||||
.ladder-second {
|
||||
background: #fffbeb;
|
||||
border-color: #fde68a;
|
||||
background: linear-gradient(180deg, #fefce8 0%, #ffffff 100%);
|
||||
border: 1px solid #fde68a;
|
||||
}
|
||||
|
||||
.ladder-subsequent {
|
||||
background: #eff6ff;
|
||||
border-color: #bfdbfe;
|
||||
background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
|
||||
border: 1px solid #bbf7d0;
|
||||
}
|
||||
|
||||
.ladder-tag {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.ladder-first .ladder-tag {
|
||||
color: #ea580c;
|
||||
}
|
||||
|
||||
.ladder-second .ladder-tag {
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
.ladder-subsequent .ladder-tag {
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.ladder-rate {
|
||||
font-size: 32px;
|
||||
font-size: 34px;
|
||||
font-weight: 900;
|
||||
line-height: 1.2;
|
||||
margin: 6px 0;
|
||||
margin: 8px 0;
|
||||
font-family:
|
||||
'DIN Alternate',
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
Roboto,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
.ladder-first .ladder-rate {
|
||||
color: #dc2626;
|
||||
color: #ea580c;
|
||||
}
|
||||
|
||||
.ladder-second .ladder-rate {
|
||||
@@ -824,7 +917,7 @@ function cycleLabel(cycle: string) {
|
||||
}
|
||||
|
||||
.ladder-subsequent .ladder-rate {
|
||||
color: #2563eb;
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.ladder-time {
|
||||
@@ -841,38 +934,39 @@ function cycleLabel(cycle: string) {
|
||||
|
||||
.rules-details {
|
||||
background: #f8fafc;
|
||||
border-radius: 8px;
|
||||
padding: 14px 16px;
|
||||
border-radius: 10px;
|
||||
padding: 16px 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
gap: 10px;
|
||||
border-left: 3px solid #fdba74;
|
||||
}
|
||||
|
||||
.rule-point {
|
||||
font-size: 13px;
|
||||
color: #475569;
|
||||
line-height: 1.5;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.rule-point strong {
|
||||
color: #1e293b;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.details-tabs-card {
|
||||
background: #ffffff;
|
||||
border-radius: 14px;
|
||||
padding: 22px;
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
margin-top: 20px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
|
||||
box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
|
||||
border: 1px solid #f1f5f9;
|
||||
}
|
||||
|
||||
.tabs-header {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
gap: 20px;
|
||||
border-bottom: 2px solid #f1f5f9;
|
||||
padding-bottom: 12px;
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
@@ -882,13 +976,18 @@ function cycleLabel(cycle: string) {
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
cursor: pointer;
|
||||
padding: 6px 8px;
|
||||
padding: 6px 4px;
|
||||
position: relative;
|
||||
transition: color 0.2s;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.tab-btn:hover {
|
||||
color: #ff6a00;
|
||||
}
|
||||
|
||||
.tab-btn.active {
|
||||
color: #2563eb;
|
||||
color: #ff6a00;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.tab-btn.active::after {
|
||||
@@ -897,9 +996,9 @@ function cycleLabel(cycle: string) {
|
||||
bottom: -14px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: #2563eb;
|
||||
border-radius: 2px;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, #ff6a00, #ff852e);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.table-responsive {
|
||||
@@ -917,50 +1016,59 @@ function cycleLabel(cycle: string) {
|
||||
background: #f8fafc;
|
||||
color: #64748b;
|
||||
font-weight: 600;
|
||||
padding: 10px 14px;
|
||||
padding: 12px 14px;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.data-table td {
|
||||
padding: 12px 14px;
|
||||
padding: 14px;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
color: #1e293b;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.data-table tbody tr:hover td {
|
||||
background: #fffaf5;
|
||||
}
|
||||
|
||||
.status-pill {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
padding: 3px 10px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status-pill.active {
|
||||
background: #f0fdf4;
|
||||
color: #16a34a;
|
||||
border: 1px solid #bbf7d0;
|
||||
}
|
||||
|
||||
.status-pill.pending {
|
||||
background: #fffbeb;
|
||||
color: #d97706;
|
||||
border: 1px solid #fde68a;
|
||||
}
|
||||
|
||||
.role-pill {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
padding: 3px 10px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.role-pill.buyer {
|
||||
background: #eff6ff;
|
||||
color: #2563eb;
|
||||
background: #fff7ed;
|
||||
color: #ea580c;
|
||||
border: 1px solid #fed7aa;
|
||||
}
|
||||
|
||||
.role-pill.seller {
|
||||
background: #fdf2f8;
|
||||
color: #db2777;
|
||||
border: 1px solid #fbcfe8;
|
||||
}
|
||||
|
||||
.cycle-pill {
|
||||
@@ -969,89 +1077,130 @@ function cycleLabel(cycle: string) {
|
||||
}
|
||||
|
||||
.rebate-amount {
|
||||
font-weight: 700;
|
||||
color: #dc2626;
|
||||
font-weight: 800;
|
||||
color: #ea580c;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.loading-state,
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 40px 16px;
|
||||
padding: 48px 16px;
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.pagination-bar {
|
||||
margin-top: 16px;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
:deep(.el-pagination.is-background .el-pager li.is-active) {
|
||||
background-color: #ff6a00 !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
:deep(.el-pagination.is-background .el-pager li:not(.is-active):hover) {
|
||||
color: #ff6a00 !important;
|
||||
}
|
||||
|
||||
.poster-modal-body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.poster-card {
|
||||
background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
|
||||
position: relative;
|
||||
background:
|
||||
radial-gradient(circle at 85% 15%, rgba(255, 106, 0, 0.28) 0%, transparent 60%),
|
||||
radial-gradient(circle at 15% 85%, rgba(255, 133, 46, 0.18) 0%, transparent 55%),
|
||||
linear-gradient(150deg, #111827 0%, #1a2234 50%, #252f44 100%);
|
||||
color: #ffffff;
|
||||
border-radius: 12px;
|
||||
padding: 20px 16px;
|
||||
border: 1px solid rgba(255, 106, 0, 0.3);
|
||||
border-radius: 16px;
|
||||
padding: 24px 20px;
|
||||
box-shadow: 0 16px 36px rgba(15, 23, 42, 0.25);
|
||||
}
|
||||
|
||||
.poster-badge {
|
||||
display: inline-block;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
padding: 2px 10px;
|
||||
background: linear-gradient(135deg, #ff6a00 0%, #ff852e 100%);
|
||||
color: #ffffff;
|
||||
padding: 3px 12px;
|
||||
border-radius: 12px;
|
||||
font-size: 11px;
|
||||
margin-bottom: 6px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
box-shadow: 0 2px 8px rgba(255, 106, 0, 0.35);
|
||||
}
|
||||
|
||||
.poster-card h3 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.poster-desc {
|
||||
font-size: 12px;
|
||||
opacity: 0.85;
|
||||
margin: 6px 0 16px;
|
||||
color: #cbd5e1;
|
||||
margin: 8px 0 18px;
|
||||
}
|
||||
|
||||
.poster-qr-wrap {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
background: #ffffff;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
border-radius: 12px;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.poster-qr-wrap img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.poster-code-row {
|
||||
margin-top: 14px;
|
||||
margin-top: 16px;
|
||||
font-size: 13px;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
.poster-code-row strong {
|
||||
color: #fde047;
|
||||
font-size: 16px;
|
||||
letter-spacing: 1px;
|
||||
color: #ff9b4e;
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 1.5px;
|
||||
}
|
||||
|
||||
.poster-tip {
|
||||
font-size: 12px;
|
||||
color: #94a3b8;
|
||||
margin-top: 12px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero-card {
|
||||
padding: 24px 18px;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.share-content-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.ladder-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user