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:
@@ -0,0 +1,105 @@
|
||||
/* V21 配音库 */
|
||||
.xx-project-voices {
|
||||
}
|
||||
|
||||
.xx-voice-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.xx-voice-grid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.xx-voice-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.xx-voice {
|
||||
text-align: center;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 18px;
|
||||
background: white;
|
||||
padding: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.xx-voice:hover {
|
||||
border-color: #4f46e5;
|
||||
}
|
||||
|
||||
.xx-voice.selected {
|
||||
border-color: #4f46e5;
|
||||
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.14);
|
||||
}
|
||||
|
||||
.xx-voice.selected::after {
|
||||
content: '✓';
|
||||
position: absolute;
|
||||
right: -7px;
|
||||
top: -7px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
background: #4f46e5;
|
||||
color: white;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.voice-icon {
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
margin: 0 auto 9px;
|
||||
border-radius: 50%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
background: linear-gradient(135deg, #4f46e5, #6366f1);
|
||||
}
|
||||
|
||||
.xx-voice div {
|
||||
font-weight: 850;
|
||||
font-size: 14px;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.xx-voice small {
|
||||
display: block;
|
||||
color: #64748b;
|
||||
margin-top: 4px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.xx-voice-usage-list {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.xx-voice-usage-row {
|
||||
border: 1px solid #e2e8f0;
|
||||
background: white;
|
||||
border-radius: 18px;
|
||||
padding: 13px;
|
||||
}
|
||||
|
||||
.xx-voice-usage-row b {
|
||||
display: block;
|
||||
color: #0f172a;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.xx-voice-usage-row p {
|
||||
margin: 5px 0 0;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
}
|
||||
Reference in New Issue
Block a user