style: 滚动广告改为醒目渐变实色风格
All checks were successful
continuous-integration/drone/push Build is passing

- 背景改为主题色渐变(#4F46E5→#6366F1→#818CF8)
- 文字/图标/标签全部改为白色
- 高度28→32px, 字号12→13px, 宽度420→520px
- 添加box-shadow光晕+hover上浮效果
- 标签改为半透明白底色
This commit is contained in:
yiqiu
2026-03-21 11:03:16 +08:00
parent d00386b38c
commit 0d1d747d3e

View File

@@ -115,41 +115,57 @@ input::-webkit-inner-spin-button {
justify-content: center; justify-content: center;
flex: 1; flex: 1;
min-width: 0; min-width: 0;
padding: 0 24px; padding: 0 16px;
overflow: hidden; overflow: hidden;
} }
.announce-ticker { .announce-ticker {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 8px; gap: 10px;
height: 28px; height: 32px;
padding: 0 14px 0 10px; padding: 0 18px 0 12px;
background: linear-gradient(135deg, rgba(79,70,229,0.06) 0%, rgba(59,130,246,0.06) 100%); background: linear-gradient(135deg, var(--color-primary, #4F46E5) 0%, #6366F1 50%, #818CF8 100%);
border: 1px solid rgba(79,70,229,0.1); border: none;
border-radius: 999px; border-radius: 999px;
max-width: 420px; max-width: 520px;
overflow: hidden; overflow: hidden;
cursor: default; cursor: pointer;
transition: all 200ms ease-out; transition: all 250ms ease-out;
box-shadow: 0 2px 12px rgba(79,70,229,0.25);
position: relative;
}
.announce-ticker::before {
content: '';
position: absolute;
inset: -1px;
border-radius: 999px;
background: linear-gradient(135deg, var(--color-primary, #4F46E5), #818CF8);
opacity: 0;
z-index: -1;
transition: opacity 250ms ease-out;
filter: blur(8px);
} }
.announce-ticker:hover { .announce-ticker:hover {
background: linear-gradient(135deg, rgba(79,70,229,0.1) 0%, rgba(59,130,246,0.1) 100%); box-shadow: 0 4px 20px rgba(79,70,229,0.35);
border-color: rgba(79,70,229,0.18); transform: translateY(-1px);
}
.announce-ticker:hover::before {
opacity: 0.5;
} }
.announce-icon { .announce-icon {
font-size: 14px; font-size: 15px;
color: var(--color-primary, #4F46E5); color: rgba(255,255,255,0.9);
flex-shrink: 0; flex-shrink: 0;
animation: announce-pulse 2s ease-in-out infinite; animation: announce-pulse 2s ease-in-out infinite;
} }
@keyframes announce-pulse { @keyframes announce-pulse {
0%, 100% { opacity: 0.7; transform: scale(1); } 0%, 100% { opacity: 0.75; transform: scale(1); }
50% { opacity: 1; transform: scale(1.1); } 50% { opacity: 1; transform: scale(1.15); }
} }
.announce-flipper { .announce-flipper {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
height: 28px; height: 32px;
display: flex; display: flex;
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
@@ -158,33 +174,35 @@ input::-webkit-inner-spin-button {
.announce-item { .announce-item {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 6px; gap: 8px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
text-decoration: none; text-decoration: none;
color: inherit; color: #fff;
line-height: 28px; line-height: 32px;
} }
.announce-item:hover { color: var(--color-primary, #4F46E5); } .announce-item:hover { color: #fff; opacity: 0.9; }
.announce-tag { .announce-tag {
display: inline-block; display: inline-block;
font-size: 10px; font-size: 10px;
font-weight: 600; font-weight: 700;
letter-spacing: 0.02em; letter-spacing: 0.04em;
padding: 1px 6px; padding: 2px 8px;
border-radius: 4px; border-radius: 4px;
line-height: 1.5; line-height: 1.5;
flex-shrink: 0; flex-shrink: 0;
text-transform: uppercase;
} }
.tag-blue { background: rgba(59,130,246,0.12); color: #2563EB; } .tag-blue { background: rgba(255,255,255,0.2); color: #fff; }
.tag-green { background: rgba(5,150,105,0.12); color: #059669; } .tag-green { background: rgba(52,211,153,0.35); color: #fff; }
.tag-orange { background: rgba(217,119,6,0.12); color: #D97706; } .tag-orange { background: rgba(251,191,36,0.35); color: #fff; }
.tag-red { background: rgba(220,38,38,0.12); color: #DC2626; } .tag-red { background: rgba(248,113,113,0.35); color: #fff; }
.tag-purple { background: rgba(124,58,237,0.12); color: #7C3AED; } .tag-purple { background: rgba(196,181,253,0.35); color: #fff; }
.announce-text { .announce-text {
font-size: 12px; font-size: 13px;
color: #374151; font-weight: 500;
color: rgba(255,255,255,0.95);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;