- Implemented RecommendationListCard component for displaying a list of recommendations with titles, descriptions, and badges. - Created RoutePlanCard component to show route details, including nodes and tips, with a detailed view toggle. - Added ScenicImageCard component for showcasing images with optional captions. - Developed SharedVisual components: CardShell, BadgePill, MediaFrame, ActionRow, and DetailShell for reusable UI elements. - Introduced SCSS styles for all new components and updated existing styles for consistency. - Created test page to preview and interact with all components using mock data. - Added new utility classes for background colors, borders, colors, display, flex, font sizes, font weights, heights, positions, rounded corners, and widths.
150 lines
1.6 KiB
SCSS
150 lines
1.6 KiB
SCSS
// 字体颜色
|
|
|
|
.color-white {
|
|
color: #fff;
|
|
}
|
|
|
|
.color-000 {
|
|
color: #000;
|
|
}
|
|
|
|
.color-333 {
|
|
color: #333;
|
|
}
|
|
|
|
.color-666 {
|
|
color: #666;
|
|
}
|
|
|
|
.color-999 {
|
|
color: #999;
|
|
}
|
|
|
|
.color-A3A3A3 {
|
|
color: #a3a3a3;
|
|
}
|
|
|
|
.color-525866 {
|
|
color: #525866;
|
|
}
|
|
|
|
.color-171717 {
|
|
color: #171717;
|
|
}
|
|
|
|
.color-99A0AE {
|
|
color: #99a0ae;
|
|
}
|
|
|
|
.color-FF3D60 {
|
|
color: #ff3d60;
|
|
}
|
|
|
|
.color-94A3B8 {
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.theme-color-500 {
|
|
color: $theme-color-500;
|
|
}
|
|
|
|
.color-43669A {
|
|
color: #43669a;
|
|
}
|
|
|
|
.color-21B466 {
|
|
color: #21b466;
|
|
}
|
|
|
|
.color-FA7319 {
|
|
color: #fa7319;
|
|
}
|
|
|
|
.color-B45309 {
|
|
color: #b45309;
|
|
}
|
|
|
|
.color-D97706 {
|
|
color: #d97706;
|
|
}
|
|
|
|
.color-0F172A {
|
|
color: #0f172a;
|
|
}
|
|
|
|
.color-1E293B {
|
|
color: #1e293b;
|
|
}
|
|
|
|
.color-334155 {
|
|
color: #334155;
|
|
}
|
|
|
|
.color-475569 {
|
|
color: #475569;
|
|
}
|
|
|
|
.color-64748B {
|
|
color: #64748b;
|
|
}
|
|
|
|
.color-CBD5E1 {
|
|
color: #cbd5e1;
|
|
}
|
|
|
|
.color-2563EB {
|
|
color: #2563eb;
|
|
}
|
|
|
|
.color-7C3AED {
|
|
color: #7c3aed;
|
|
}
|
|
|
|
.color-E11D48 {
|
|
color: #e11d48;
|
|
}
|
|
|
|
.color-0F766E {
|
|
color: #0f766e;
|
|
}
|
|
|
|
.color-047857 {
|
|
color: #047857;
|
|
}
|
|
|
|
.color-0891B2 {
|
|
color: #0891b2;
|
|
}
|
|
|
|
// text 颜色
|
|
.text-color-900 {
|
|
color: $text-color-900; // #181B25
|
|
}
|
|
.text-color-800 {
|
|
color: $text-color-800; // #222530
|
|
}
|
|
.text-color-700 {
|
|
color: $text-color-700; // #2B303B
|
|
}
|
|
.text-color-600 {
|
|
color: $text-color-600; // #525866
|
|
}
|
|
.text-color-500 {
|
|
color: $text-color-500; // #717784
|
|
}
|
|
.text-color-400 {
|
|
color: $text-color-400; // #99A0AE
|
|
}
|
|
.text-color-300 {
|
|
color: $text-color-300; // #CACFD8
|
|
}
|
|
.text-color-200 {
|
|
color: $text-color-200; // #E5E8EE
|
|
}
|
|
.text-color-100 {
|
|
color: $text-color-100; // #F2F5F8
|
|
}
|
|
.text-color-50 {
|
|
color: $text-color-50; // #F9FAFB
|
|
}
|