feat(web): complete V21 UI redesign for all pages
- Replaced Ant Design Card/Layout with V21-compliant components - Updated Header, MainLayout to V21 sticky top navigation - Redesigned WorkspaceList, ProjectAssets, ProjectResults, ProjectTitles, ProjectVoices, ProjectGeneration with V21 card/grid system - Added V21 color scheme, typography, spacing, pill badges, vertical/video cards - Updated Login page and Plans subscription page to V21 design - CSS-only styling without Ant Design overrides where possible
This commit is contained in:
Xiaoxia AI
@@ -1,860 +1,32 @@
|
||||
:root {
|
||||
--xx-primary: #4f46e5;
|
||||
--xx-primary-dark: #4338ca;
|
||||
--xx-primary-soft: #eef2ff;
|
||||
--xx-slate: #0f172a;
|
||||
--xx-muted: #64748b;
|
||||
--xx-line: #e2e8f0;
|
||||
--xx-bg: #f8fafc;
|
||||
--xx-card: #ffffff;
|
||||
--xx-shadow: 0 24px 70px rgba(15, 23, 42, 0.09);
|
||||
--xx-shadow-soft: 0 12px 34px rgba(15, 23, 42, 0.06);
|
||||
}
|
||||
|
||||
/* V21 主容器 */
|
||||
.xx-app-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
color: var(--xx-slate);
|
||||
background:
|
||||
radial-gradient(circle at 18% 20%, rgba(79, 70, 229, 0.11), transparent 30%),
|
||||
radial-gradient(circle at 86% 14%, rgba(16, 185, 129, 0.08), transparent 28%),
|
||||
radial-gradient(circle at 48% 80%, rgba(99, 102, 241, 0.08), transparent 34%),
|
||||
var(--xx-bg);
|
||||
}
|
||||
|
||||
.xx-top-nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 30;
|
||||
min-height: 68px;
|
||||
border-bottom: 1px solid rgba(226, 232, 240, 0.92);
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
box-shadow: 0 8px 28px rgba(15, 23, 42, 0.04);
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
|
||||
.xx-top-nav-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
max-width: 1440px;
|
||||
min-height: 68px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.xx-brand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--xx-slate);
|
||||
font-size: 20px;
|
||||
font-weight: 900;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.xx-logo {
|
||||
display: grid;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
place-items: center;
|
||||
border-radius: 14px;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, #818cf8, #4f46e5);
|
||||
box-shadow: 0 12px 26px rgba(79, 70, 229, 0.24);
|
||||
}
|
||||
|
||||
.xx-nav-links {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
gap: 22px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.xx-nav-links button {
|
||||
position: relative;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--xx-muted);
|
||||
font-weight: 750;
|
||||
cursor: pointer;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.xx-nav-links button.active,
|
||||
.xx-nav-links button:hover {
|
||||
color: var(--xx-primary);
|
||||
}
|
||||
|
||||
.xx-nav-links button.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -22px;
|
||||
height: 3px;
|
||||
border-radius: 999px;
|
||||
background: var(--xx-primary);
|
||||
}
|
||||
|
||||
.xx-user-menu {
|
||||
cursor: pointer;
|
||||
color: #334155;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.xx-avatar {
|
||||
background: var(--xx-primary-soft);
|
||||
color: var(--xx-primary-dark);
|
||||
background: var(--bg, #f8fafc);
|
||||
color: var(--slate, #0f172a);
|
||||
}
|
||||
|
||||
.xx-app-content {
|
||||
width: min(1440px, calc(100% - 48px));
|
||||
flex: 1;
|
||||
max-width: 1440px;
|
||||
margin: 0 auto;
|
||||
padding: 38px 0 76px;
|
||||
}
|
||||
|
||||
.xx-page-card {
|
||||
border: 1px solid rgba(226, 232, 240, 0.95);
|
||||
border-radius: 28px;
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
box-shadow: var(--xx-shadow);
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
.xx-page-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.xx-page-head h1,
|
||||
.xx-page-head h2 {
|
||||
margin: 0 0 6px;
|
||||
color: var(--xx-slate);
|
||||
font-size: 28px;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
|
||||
.xx-page-head p {
|
||||
margin: 0;
|
||||
color: var(--xx-muted);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.xx-action-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.xx-btn-primary.ant-btn-primary {
|
||||
border: 0;
|
||||
background: linear-gradient(135deg, #6366f1, #4f46e5);
|
||||
box-shadow: 0 14px 26px rgba(79, 70, 229, 0.22);
|
||||
}
|
||||
|
||||
.xx-vertical-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.xx-vertical-card {
|
||||
border: 1px solid #e8eef7;
|
||||
border-radius: 18px;
|
||||
background: linear-gradient(180deg, #fff, #fbfdff);
|
||||
padding: 9px;
|
||||
transition: 0.18s ease;
|
||||
}
|
||||
|
||||
.xx-vertical-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--xx-shadow-soft);
|
||||
}
|
||||
|
||||
.xx-vertical-thumb {
|
||||
position: relative;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
aspect-ratio: 9 / 16;
|
||||
margin-bottom: 8px;
|
||||
overflow: hidden;
|
||||
border-radius: 14px;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, #0ea5e9, #312e81);
|
||||
box-shadow: inset 0 -50px 80px rgba(15, 23, 42, 0.18);
|
||||
}
|
||||
|
||||
.xx-vertical-thumb.orange { background: linear-gradient(135deg, #f97316, #ef4444); }
|
||||
.xx-vertical-thumb.gray { background: linear-gradient(135deg, #64748b, #334155); }
|
||||
.xx-vertical-thumb.green { background: linear-gradient(135deg, #10b981, #0284c7); }
|
||||
|
||||
.xx-play {
|
||||
display: grid;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
place-items: center;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.22);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.xx-vertical-title {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.xx-vertical-title b {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
font-size: 13px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.xx-vertical-meta {
|
||||
margin: 0;
|
||||
color: var(--xx-muted);
|
||||
font-size: 11px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.xx-empty-state {
|
||||
border: 1px dashed #cbd5e1;
|
||||
border-radius: 22px;
|
||||
background: linear-gradient(180deg, #fff, #f8fafc);
|
||||
color: var(--xx-muted);
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.xx-empty-icon {
|
||||
display: grid;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
place-items: center;
|
||||
margin: 0 auto 12px;
|
||||
border-radius: 18px;
|
||||
background: var(--xx-primary-soft);
|
||||
color: var(--xx-primary-dark);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.xx-empty-state b {
|
||||
display: block;
|
||||
color: var(--xx-slate);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.xx-vertical-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.xx-top-nav-inner {
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.xx-nav-links {
|
||||
order: 3;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
gap: 14px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.xx-nav-links button.active::after { display: none; }
|
||||
.xx-app-content { width: calc(100% - 28px); padding-top: 22px; }
|
||||
.xx-page-head { flex-direction: column; }
|
||||
.xx-action-row,
|
||||
.xx-action-row .ant-btn { width: 100%; }
|
||||
.xx-vertical-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.xx-brand { font-size: 18px; }
|
||||
.xx-page-card { border-radius: 22px; padding: 16px; }
|
||||
.xx-vertical-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
|
||||
.xx-vertical-card { padding: 8px; }
|
||||
.xx-vertical-title b { font-size: 12px; }
|
||||
.xx-vertical-meta { font-size: 10px; }
|
||||
}
|
||||
|
||||
.xx-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
border: 1px solid var(--xx-line);
|
||||
border-radius: 18px;
|
||||
background: #fff;
|
||||
padding: 13px;
|
||||
transition: 0.18s ease;
|
||||
}
|
||||
|
||||
.xx-title-row:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--xx-shadow-soft);
|
||||
}
|
||||
|
||||
.xx-title-index {
|
||||
display: grid;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
flex: 0 0 auto;
|
||||
place-items: center;
|
||||
border-radius: 11px;
|
||||
background: var(--xx-primary-soft);
|
||||
color: var(--xx-primary-dark);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.xx-title-row b {
|
||||
display: block;
|
||||
color: var(--xx-slate);
|
||||
}
|
||||
|
||||
.xx-title-row span {
|
||||
display: block;
|
||||
color: var(--xx-muted);
|
||||
font-size: 12px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.xx-generation-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 360px;
|
||||
gap: 22px;
|
||||
}
|
||||
|
||||
.xx-section-block {
|
||||
border-top: 1px solid #edf2f7;
|
||||
padding: 24px 0;
|
||||
}
|
||||
|
||||
.xx-section-block:first-child {
|
||||
border-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.xx-section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.xx-section-title h3 {
|
||||
margin: 0;
|
||||
color: var(--xx-slate);
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
.xx-plan-panel {
|
||||
border: 1px solid #e8eef7;
|
||||
border-radius: 24px;
|
||||
background: #fff;
|
||||
padding: 18px;
|
||||
align-self: start;
|
||||
box-shadow: var(--xx-shadow-soft);
|
||||
}
|
||||
|
||||
.xx-preview-phone {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
aspect-ratio: 9 / 16;
|
||||
max-height: 360px;
|
||||
margin-bottom: 18px;
|
||||
border-radius: 22px;
|
||||
padding: 18px;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, #111827, #312e81);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.xx-preview-phone div {
|
||||
border-radius: 12px;
|
||||
background: rgba(255,255,255,.92);
|
||||
color: #111827;
|
||||
font-weight: 850;
|
||||
text-align: center;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.xx-generation-layout { grid-template-columns: 1fr; }
|
||||
.xx-plan-panel { order: -1; }
|
||||
.xx-preview-phone { max-height: 300px; }
|
||||
}
|
||||
|
||||
.xx-vertical-card.selected {
|
||||
border-color: var(--xx-primary);
|
||||
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.14), var(--xx-shadow-soft);
|
||||
}
|
||||
|
||||
.xx-kpi-card {
|
||||
border: 1px solid var(--xx-line);
|
||||
border-radius: 20px;
|
||||
background: linear-gradient(180deg, #fff, #f8fafc);
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.xx-kpi-card b {
|
||||
display: block;
|
||||
font-size: 28px;
|
||||
color: var(--xx-slate);
|
||||
}
|
||||
|
||||
.xx-kpi-card span {
|
||||
color: var(--xx-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.xx-voice-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.xx-voice-card {
|
||||
display: grid;
|
||||
grid-template-columns: 72px minmax(0, 1fr) 42px;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
border: 1px solid var(--xx-line);
|
||||
border-radius: 22px;
|
||||
background: linear-gradient(180deg, #fff, #fbfdff);
|
||||
padding: 14px;
|
||||
transition: 0.18s ease;
|
||||
}
|
||||
|
||||
.xx-voice-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--xx-shadow-soft);
|
||||
}
|
||||
|
||||
.xx-voice-cover {
|
||||
position: relative;
|
||||
display: grid;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
place-items: center;
|
||||
border-radius: 18px;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, #22c55e, #0ea5e9);
|
||||
font-size: 24px;
|
||||
box-shadow: inset 0 -24px 44px rgba(15, 23, 42, 0.16);
|
||||
}
|
||||
|
||||
.xx-voice-cover span {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
bottom: 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 900;
|
||||
opacity: 0.84;
|
||||
}
|
||||
|
||||
.xx-voice-body {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.xx-voice-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.xx-voice-title b {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
color: var(--xx-slate);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.xx-waveform {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
height: 28px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.xx-waveform i {
|
||||
display: block;
|
||||
width: 6px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(180deg, #93c5fd, #4f46e5);
|
||||
}
|
||||
|
||||
.xx-waveform i:nth-child(1) { height: 12px; }
|
||||
.xx-waveform i:nth-child(2) { height: 22px; }
|
||||
.xx-waveform i:nth-child(3) { height: 16px; }
|
||||
.xx-waveform i:nth-child(4) { height: 26px; }
|
||||
.xx-waveform i:nth-child(5) { height: 18px; }
|
||||
.xx-waveform i:nth-child(6) { height: 24px; }
|
||||
.xx-waveform i:nth-child(7) { height: 14px; }
|
||||
.xx-waveform i:nth-child(8) { height: 28px; }
|
||||
.xx-waveform i:nth-child(9) { height: 18px; }
|
||||
.xx-waveform i:nth-child(10) { height: 12px; }
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.xx-voice-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.xx-voice-card {
|
||||
grid-template-columns: 56px minmax(0, 1fr);
|
||||
}
|
||||
.xx-voice-cover {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
}
|
||||
.xx-voice-card > .ant-btn {
|
||||
grid-column: 1 / -1;
|
||||
width: 100%;
|
||||
border-radius: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Strict V21 mappings */
|
||||
.xx-vertical-grid.compact {
|
||||
grid-template-columns: repeat(7, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.xx-vertical-grid.compact .xx-vertical-card {
|
||||
border-radius: 18px;
|
||||
padding: 9px;
|
||||
}
|
||||
|
||||
.xx-vertical-grid.compact .xx-vertical-thumb {
|
||||
border-radius: 14px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.xx-vertical-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.xx-vertical-row b {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
font-size: 13px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.xx-pill {
|
||||
flex: 0 0 auto;
|
||||
border-radius: 999px;
|
||||
font-size: 11px;
|
||||
font-weight: 850;
|
||||
letter-spacing: 0.01em;
|
||||
padding: 3px 7px;
|
||||
}
|
||||
|
||||
.xx-pill.ok { background: #dcfce7; color: #166534; }
|
||||
.xx-pill.warn { background: #ffedd5; color: #c2410c; }
|
||||
.xx-pill.bad { background: #ffe4e6; color: #be123c; }
|
||||
|
||||
.xx-result-video,
|
||||
.xx-result-poster {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border: 0;
|
||||
padding: 38px 24px 76px;
|
||||
}
|
||||
|
||||
.xx-result-video {
|
||||
background: #0f172a;
|
||||
/* 根 CSS 变量 */
|
||||
:root {
|
||||
--indigo: #4f46e5;
|
||||
--slate: #0f172a;
|
||||
--muted: #64748b;
|
||||
--line: #e2e8f0;
|
||||
--bg: #f8fafc;
|
||||
--green: #10b981;
|
||||
--amber: #f59e0b;
|
||||
}
|
||||
|
||||
.xx-mini-play {
|
||||
display: grid;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
place-items: center;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.22);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.xx-sound-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 22px 30px;
|
||||
}
|
||||
|
||||
.xx-sound-card {
|
||||
display: grid;
|
||||
grid-template-columns: 100px 1fr 54px;
|
||||
gap: 26px;
|
||||
align-items: center;
|
||||
min-height: 116px;
|
||||
border: 1px solid #eef2f7;
|
||||
border-radius: 18px;
|
||||
background: #fff;
|
||||
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.045);
|
||||
padding: 14px 18px 14px 14px;
|
||||
transition: 0.18s ease;
|
||||
}
|
||||
|
||||
.xx-sound-card:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: #c7d2fe;
|
||||
box-shadow: var(--xx-shadow-soft);
|
||||
}
|
||||
|
||||
.xx-sound-cover {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(135deg, #111827, #334155);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.xx-sound-cover.green { background: linear-gradient(135deg, #16a34a, #92400e); }
|
||||
.xx-sound-cover.blue { background: linear-gradient(135deg, #020617, #1d4ed8); }
|
||||
.xx-sound-cover.ice { background: linear-gradient(135deg, #0f172a, #38bdf8); }
|
||||
.xx-sound-cover.opera { background: linear-gradient(135deg, #111827, #16a34a); }
|
||||
.xx-sound-cover.food { background: linear-gradient(135deg, #991b1b, #f59e0b); }
|
||||
.xx-sound-cover.sun { background: linear-gradient(135deg, #0f172a, #f97316); }
|
||||
|
||||
.xx-sound-play {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
display: grid;
|
||||
width: 62px;
|
||||
height: 62px;
|
||||
place-items: center;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.58);
|
||||
color: #fff;
|
||||
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
|
||||
font-size: 25px;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.xx-sound-title {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
color: #0f172a;
|
||||
font-size: 20px;
|
||||
font-weight: 650;
|
||||
margin-bottom: 24px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.xx-sound-wave {
|
||||
height: 28px;
|
||||
opacity: 0.65;
|
||||
background: repeating-linear-gradient(90deg, #cbd5e1 0 3px, transparent 3px 7px);
|
||||
mask: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
|
||||
}
|
||||
|
||||
.xx-sound-time {
|
||||
color: #64748b;
|
||||
font-size: 16px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.xx-sound-progress {
|
||||
width: 100px;
|
||||
height: 10px;
|
||||
margin: -10px 18px 8px auto;
|
||||
border-radius: 999px;
|
||||
background: #34d399;
|
||||
box-shadow: 0 6px 16px rgba(52, 211, 153, 0.25);
|
||||
}
|
||||
|
||||
.xx-audio-inline {
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.xx-vertical-grid.compact { grid-template-columns: repeat(5, minmax(0, 1fr)); }
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.xx-vertical-grid.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.xx-sound-grid { grid-template-columns: 1fr; }
|
||||
.xx-sound-card { grid-template-columns: 82px 1fr 46px; gap: 14px; }
|
||||
.xx-sound-cover { width: 82px; height: 82px; }
|
||||
.xx-sound-title { font-size: 17px; margin-bottom: 18px; }
|
||||
.xx-sound-time { font-size: 14px; }
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.xx-vertical-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
|
||||
.xx-vertical-grid.compact .xx-vertical-card { padding: 8px; }
|
||||
.xx-vertical-grid.compact b { font-size: 12px; }
|
||||
.xx-sound-card { grid-template-columns: 70px 1fr; position: relative; padding-right: 14px; }
|
||||
.xx-sound-cover { width: 70px; height: 70px; }
|
||||
.xx-sound-play { width: 46px; height: 46px; }
|
||||
.xx-sound-time { position: absolute; right: 14px; bottom: 14px; }
|
||||
.xx-sound-wave { max-width: 150px; }
|
||||
}
|
||||
|
||||
.xx-filter-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.xx-hint {
|
||||
border: 1px solid var(--xx-line);
|
||||
border-radius: 999px;
|
||||
background: #f8fafc;
|
||||
color: var(--xx-muted);
|
||||
font-size: 13px;
|
||||
padding: 7px 10px;
|
||||
}
|
||||
|
||||
.xx-diagnosis-strip {
|
||||
display: grid;
|
||||
grid-template-columns: 150px minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
border: 1px solid #edf2f7;
|
||||
border-radius: 22px;
|
||||
background: #fff;
|
||||
margin-bottom: 18px;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.xx-title-row .xx-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.xx-filter-row .ant-select,
|
||||
.xx-filter-row .ant-btn,
|
||||
.xx-filter-row .ant-input-search {
|
||||
width: 100% !important;
|
||||
}
|
||||
.xx-diagnosis-strip { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.xx-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border: 1px solid #c7d2fe;
|
||||
border-radius: 999px;
|
||||
background: #eef2ff;
|
||||
color: #4338ca;
|
||||
font-size: 13px;
|
||||
font-weight: 850;
|
||||
padding: 7px 12px;
|
||||
}
|
||||
|
||||
.xx-pricing-head {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.xx-pricing-head h1 {
|
||||
margin-top: 16px;
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.xx-pricing-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.xx-pricing-card {
|
||||
position: relative;
|
||||
border: 1px solid var(--xx-line);
|
||||
border-radius: 24px;
|
||||
background: #fff;
|
||||
padding: 22px;
|
||||
box-shadow: var(--xx-shadow-soft);
|
||||
}
|
||||
|
||||
.xx-pricing-card.recommended {
|
||||
border: 2px solid var(--xx-primary);
|
||||
transform: translateY(-6px);
|
||||
}
|
||||
|
||||
.xx-pricing-card h2 {
|
||||
margin: 18px 0 8px;
|
||||
color: var(--xx-slate);
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.xx-pricing-card p {
|
||||
min-height: 48px;
|
||||
color: var(--xx-muted);
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.xx-price {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 4px;
|
||||
margin: 18px 0;
|
||||
}
|
||||
|
||||
.xx-price b {
|
||||
font-size: 36px;
|
||||
color: var(--xx-slate);
|
||||
}
|
||||
|
||||
.xx-price span {
|
||||
color: var(--xx-muted);
|
||||
}
|
||||
|
||||
.xx-feature-list {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
min-height: 180px;
|
||||
margin: 18px 0 22px;
|
||||
color: #475569;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.xx-pricing-grid { grid-template-columns: 1fr; }
|
||||
.xx-pricing-card.recommended { transform: none; }
|
||||
.xx-pricing-head h1 { font-size: 28px; }
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user