feat: 完成分类页开发
This commit is contained in:
R524809
@@ -0,0 +1,54 @@
|
||||
# Design System Strategy: Doodle Mini
|
||||
|
||||
## 1. Overview & Creative North Star: "The Sun-Drenched Studio"
|
||||
The creative direction for this design system is **"The Sun-Drenched Studio."** We are moving away from the cold, clinical "educational app" look and toward a space that feels like a physical, tactile craft room bathed in morning light.
|
||||
|
||||
Instead of a rigid, boxed-in grid, we embrace **Organic Asymmetry**. Elements should feel like they were placed on a table by hand, not snapped to a pixel-perfect wireframe. We break the "template" look by using exaggerated corner radii, overlapping "paper" layers, and a hierarchy that prioritizes warmth and play over traditional data density.
|
||||
|
||||
## 2. Colors: Tonal Radiance
|
||||
The palette is anchored by `primary` (#6c5a00) and `primary_container` (#ffd709), creating a "Yaya Yellow" experience that is vibrant yet sophisticated.
|
||||
|
||||
* **The "No-Line" Rule:** Under no circumstances should 1px solid borders be used to separate content. We define boundaries exclusively through background shifts. Use `surface_container_low` (#f8f0e0) for main content areas and `surface` (#fef6e7) for the global backdrop.
|
||||
* **Surface Hierarchy & Nesting:** Treat the UI as stacked sheets of heavy-weight construction paper.
|
||||
* **Level 0:** `background` (#fef6e7) – The desk surface.
|
||||
* **Level 1:** `surface_container` (#f0e7d6) – The worksheet base.
|
||||
* **Level 2:** `surface_container_lowest` (#ffffff) – Active drawing cards or "Paper" modals.
|
||||
* **The Glass & Gradient Rule:** For navigation bars or floating tool palettes, use Glassmorphism. Apply `surface_container_low` at 80% opacity with a `20px` backdrop blur. This ensures the "sunny" background bleeds through, maintaining the "Sun-Drenched" atmosphere.
|
||||
* **Signature Textures:** Main CTAs should not be flat. Apply a subtle linear gradient from `primary_fixed` (#ffd709) to `primary_fixed_dim` (#efc900) at a 145-degree angle to give buttons a "pillowy" 3D volume.
|
||||
|
||||
## 3. Typography: The Friendly Guide
|
||||
We use **Plus Jakarta Sans** exclusively. Its geometric yet soft terminals provide a modern, legible, and approachable voice.
|
||||
|
||||
* **Display & Headlines:** Use `display-lg` (3.5rem) for "Doodle Mini" brand moments. Headlines (`headline-md`) should use a tighter letter-spacing (-0.02em) to feel "hugged" and friendly.
|
||||
* **Body & Labels:** Use `body-lg` for all instructional text. In a children's context, readability is paramount; ensure a line height of at least 1.6x the font size.
|
||||
* **Hierarchy as Personality:** Use `on_secondary_container` (#6d3b00) for sub-headers to provide a warm, "chocolatey" contrast against the yellow, moving away from harsh blacks.
|
||||
|
||||
## 4. Elevation & Depth: Tonal Layering
|
||||
Depth in this system is a result of light and shadow, not lines and strokes.
|
||||
|
||||
* **The Layering Principle:** To lift a component, place a `surface_container_highest` (#e5dcc9) element inside a `surface_container_low` (#f8f0e0) environment. This creates a "recessed" or "elevated" feel through color value alone.
|
||||
* **Ambient Shadows:** Use shadows sparingly. When an object "floats" (like a floating action button), use a shadow color derived from `on_surface` (#322e25) at 6% opacity, with a blur of `32px` and a Y-offset of `8px`. It should look like a soft glow, not a drop shadow.
|
||||
* **The "Ghost Border" Fallback:** If a separator is required for accessibility in input fields, use `outline_variant` (#b3ac9f) at **15% opacity**. It should be felt, not seen.
|
||||
|
||||
## 5. Components: Tactile & Safe
|
||||
Every component must feel "squishy" and safe to touch.
|
||||
|
||||
* **Buttons:**
|
||||
* **Primary:** Uses `primary_container` (#ffd709) with a `full` (9999px) radius.
|
||||
* **States:** On press, scale the button down to 96% size to simulate a physical "click" into the screen.
|
||||
* **Cards & Lists:** Forbid divider lines. Separate list items using a `spacing-3` (1rem) gap and alternating background colors between `surface_container_low` and `surface_container`.
|
||||
* **Input Fields:** Use `surface_container_highest` for the input track. Corners must be `xl` (3rem). Labels sit *above* the field in `title-sm` to ensure children can always see the context.
|
||||
* **Selection Chips:** Use `secondary_container` (#ffc697) for selected states. The roundedness must be `full` to mimic smooth river stones.
|
||||
* **The "Joy" Progress Bar:** A custom component for Doodle Mini. Use a thick track (`1.5rem` height) in `surface_container_highest` with the progress indicator using a gradient of `tertiary` (#006b1b) to `tertiary_fixed` (#91f78e).
|
||||
|
||||
## 6. Do’s and Don’ts
|
||||
|
||||
### Do:
|
||||
* **Do** use `xl` and `full` corner radii for almost everything. Sharp corners are "scary."
|
||||
* **Do** lean into white space. Use `spacing-12` (4rem) between major sections to let the design breathe.
|
||||
* **Do** use `on_tertiary_container` (dark green) for success states; it feels organic and "earthy" against the yellow.
|
||||
|
||||
### Don’t:
|
||||
* **Don’t** use pure black (#000000). Use `on_surface` (#322e25) for all dark text to maintain the warm, sunny tone.
|
||||
* **Don’t** use 1px dividers. If you feel you need one, use a `surface_variant` (#e5dcc9) color block that is `4px` thick with `full` rounded caps.
|
||||
* **Don’t** crowd the interface. If a screen feels busy, increase the background "paper" size and use a scrollable layout instead of shrinking elements.
|
||||
@@ -0,0 +1,248 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="zh-CN"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>分类 - Doodle Mini</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"primary": "#6c5a00",
|
||||
"on-secondary": "#fff0e6",
|
||||
"secondary-fixed-dim": "#ffb470",
|
||||
"primary-container": "#ffd709",
|
||||
"inverse-primary": "#ffd709",
|
||||
"outline-variant": "#b3ac9f",
|
||||
"surface-variant": "#e5dcc9",
|
||||
"on-primary": "#fff2cd",
|
||||
"surface-dim": "#dcd4c0",
|
||||
"on-tertiary": "#d1ffc8",
|
||||
"primary-fixed": "#ffd709",
|
||||
"outline": "#7c766a",
|
||||
"on-secondary-container": "#6d3b00",
|
||||
"secondary-container": "#ffc697",
|
||||
"on-surface": "#322e25",
|
||||
"primary-fixed-dim": "#efc900",
|
||||
"tertiary-fixed-dim": "#83e881",
|
||||
"background": "#fef6e7",
|
||||
"surface-bright": "#fef6e7",
|
||||
"error-container": "#f95630",
|
||||
"tertiary-fixed": "#91f78e",
|
||||
"tertiary-container": "#91f78e",
|
||||
"secondary-fixed": "#ffc697",
|
||||
"on-primary-fixed-variant": "#665500",
|
||||
"surface-container-high": "#eae2d0",
|
||||
"on-surface-variant": "#605b50",
|
||||
"tertiary-dim": "#005d16",
|
||||
"surface": "#fef6e7",
|
||||
"on-primary-container": "#5b4b00",
|
||||
"inverse-on-surface": "#a29c8f",
|
||||
"secondary-dim": "#794200",
|
||||
"on-tertiary-container": "#005e17",
|
||||
"on-tertiary-fixed": "#00480f",
|
||||
"on-error": "#ffefec",
|
||||
"inverse-surface": "#110e06",
|
||||
"surface-container-highest": "#e5dcc9",
|
||||
"primary-dim": "#5e4e00",
|
||||
"surface-container": "#f0e7d6",
|
||||
"error": "#b02500",
|
||||
"secondary": "#8a4c00",
|
||||
"surface-tint": "#6c5a00",
|
||||
"on-background": "#322e25",
|
||||
"on-primary-fixed": "#453900",
|
||||
"on-secondary-fixed": "#512a00",
|
||||
"on-tertiary-fixed-variant": "#00691a",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-secondary-fixed-variant": "#7a4300",
|
||||
"error-dim": "#b92902",
|
||||
"surface-container-low": "#f8f0e0",
|
||||
"tertiary": "#006b1b",
|
||||
"on-error-container": "#520c00"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "1rem",
|
||||
"lg": "2rem",
|
||||
"xl": "3rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Plus Jakarta Sans"],
|
||||
"display": ["Plus Jakarta Sans"],
|
||||
"body": ["Plus Jakarta Sans"],
|
||||
"label": ["Plus Jakarta Sans"]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body { font-family: 'Plus Jakarta Sans', sans-serif; }
|
||||
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
|
||||
.icon-fill { font-variation-settings: 'FILL' 1; }
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface h-screen flex flex-col overflow-hidden">
|
||||
<!-- TopAppBar equivalent for search -->
|
||||
<header class="bg-surface-container-low/80 backdrop-blur-xl z-50 px-4 py-3 flex-none sticky top-0">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex-1 bg-surface-container-highest rounded-full flex items-center px-4 py-2">
|
||||
<span class="material-symbols-outlined text-outline mr-2">search</span>
|
||||
<input class="bg-transparent border-none focus:ring-0 text-body-lg text-on-surface placeholder-on-surface-variant w-full p-0" placeholder="搜索练习纸..." type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content Area -->
|
||||
<main class="flex-1 flex overflow-hidden">
|
||||
<!-- Left Sidebar (Categories) -->
|
||||
<aside class="w-20 md:w-40 bg-surface-container-low flex flex-col overflow-y-auto hide-scrollbar py-2 px-2 gap-1 flex-none rounded-r-[2rem]">
|
||||
<button class="flex flex-col md:flex-row items-center gap-1 md:gap-3 px-2 md:px-4 py-2 rounded-full text-on-surface-variant hover:bg-surface-container transition-colors">
|
||||
<span class="text-xs md:text-sm font-medium">全部</span>
|
||||
</button>
|
||||
<button class="flex flex-col md:flex-row items-center gap-1 md:gap-3 px-2 md:px-4 py-2 rounded-full bg-primary-container text-on-primary-container font-bold shadow-sm scale-105 transition-all">
|
||||
<span class="text-xs md:text-sm">数感启蒙</span>
|
||||
</button>
|
||||
<button class="flex flex-col md:flex-row items-center gap-1 md:gap-3 px-2 md:px-4 py-2 rounded-full text-on-surface-variant hover:bg-surface-container transition-colors">
|
||||
<span class="text-xs md:text-sm font-medium">汉语拼音</span>
|
||||
</button>
|
||||
<button class="flex flex-col md:flex-row items-center gap-1 md:gap-3 px-2 md:px-4 py-2 rounded-full text-on-surface-variant hover:bg-surface-container transition-colors">
|
||||
<span class="text-xs md:text-sm font-medium">专注力游戏</span>
|
||||
</button>
|
||||
<button class="flex flex-col md:flex-row items-center gap-1 md:gap-3 px-2 md:px-4 py-2 rounded-full text-on-surface-variant hover:bg-surface-container transition-colors">
|
||||
<span class="text-xs md:text-sm font-medium">趣味识字</span>
|
||||
</button>
|
||||
<button class="flex flex-col md:flex-row items-center gap-1 md:gap-3 px-2 md:px-4 py-2 rounded-full text-on-surface-variant hover:bg-surface-container transition-colors">
|
||||
<span class="text-xs md:text-sm font-medium">英语启蒙</span>
|
||||
</button>
|
||||
<button class="flex flex-col md:flex-row items-center gap-1 md:gap-3 px-2 md:px-4 py-2 rounded-full text-on-surface-variant hover:bg-surface-container transition-colors">
|
||||
<span class="text-xs md:text-sm font-medium">创意手工</span>
|
||||
</button>
|
||||
</aside>
|
||||
<!-- Right Content List -->
|
||||
<section class="flex-1 overflow-y-auto p-2 md:p-4 bg-background">
|
||||
<div class="flex flex-col gap-2 pb-24">
|
||||
<!-- Card 1 -->
|
||||
<article class="bg-surface-container-lowest rounded-[20px] p-2 flex gap-3 shadow-sm border border-surface-container-high hover:shadow-md transition-shadow">
|
||||
<div class="w-24 shrink-0 rounded-[20px] overflow-hidden bg-surface-container relative">
|
||||
<img alt="Colorful counting beads on a wooden frame, bright sunny lighting, educational" class="w-full h-full object-cover" data-alt="Colorful counting beads on a wooden frame, bright sunny lighting, educational" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC9YDdXdSqQute8UWn7lNaZDuRi4z_BD5HYyM2GKRikRpUs7G-CuwDgAhVqH_6tqN7icRuAhrtmrxbGtrv4T65CdT9ItF68N-9SgNeU1mFQiliih1bt7Cc-nKeyJW2_bgZCg-FOZsl_1S_sD25qt7qBhPsmXT8X3ahauX3VpI3-84vfatabv2wk_TUNOeSt3SdbIpmCHvZR1RqKkyrvaAxPxKIO4uY5v0BhccLxE5L-L96DyM5JAcxxQKRXtnFY2qfvBWMqPT3LC_E"/>
|
||||
</div>
|
||||
<div class="flex flex-col justify-between flex-1 overflow-hidden py-1">
|
||||
<div>
|
||||
<h3 class="text-base font-bold text-on-surface tracking-tight mb-1 truncate">认识基础图形</h3>
|
||||
<p class="text-on-surface-variant text-xs mb-2 truncate">通过趣味拼贴，让孩子初步感知圆形、方形与三角形的美妙世界。</p>
|
||||
<div class="flex gap-2 mb-1">
|
||||
<span class="px-2 py-0.5 bg-primary-container text-on-primary-container rounded-full text-[10px] font-medium whitespace-nowrap">3-6岁</span>
|
||||
<span class="px-2 py-0.5 bg-surface-container-high rounded-full text-[10px] font-medium text-on-surface-variant whitespace-nowrap">入门</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-[10px] text-outline mt-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="flex items-center gap-0.5"><span class="material-symbols-outlined text-[14px]">favorite</span> 456</span>
|
||||
<span class="flex items-center gap-0.5"><span class="material-symbols-outlined text-[14px]">download</span> 89</span>
|
||||
</div>
|
||||
<span>2024-05-20</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<!-- Card 2 -->
|
||||
<article class="bg-surface-container-lowest rounded-[20px] p-2 flex gap-3 shadow-sm border border-surface-container-high hover:shadow-md transition-shadow">
|
||||
<div class="w-24 shrink-0 rounded-[20px] overflow-hidden bg-surface-container relative">
|
||||
<img alt="Hand drawn numbers on colorful paper cutouts, messy desk, creative warm light" class="w-full h-full object-cover" data-alt="Hand drawn numbers on colorful paper cutouts, messy desk, creative warm light" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCyTKBE2-6CRjamB6TIUQBymqI1pU6sGFiSLL3meuf0rC8-B-37beMuXbFxJN4bhoA7mZqqYM9QzUAiu-iQmDBLhaayZkJGc0QfTTAAte3Mp7gNwGMy9UDJah-oiJcuY6UUTp0tOTeT-A1Nley0IwNVpeQ2ED1p-NwFwYPojmDcdsfbYRcj5GmnGzR_au03NR8AqFe4o1MtgjRrw4s3_U89bYBmBcpzBTo9BEMsltkwgKbcboX7j6nh2iyyGbCqwtJxSjgzoqbquhA"/>
|
||||
</div>
|
||||
<div class="flex flex-col justify-between flex-1 overflow-hidden py-1">
|
||||
<div>
|
||||
<h3 class="text-base font-bold text-on-surface tracking-tight mb-1 truncate">数字连连看</h3>
|
||||
<p class="text-on-surface-variant text-xs mb-2 truncate">跟随小兔子走迷宫，在游戏中掌握1-10的数字顺序。</p>
|
||||
<div class="flex gap-2 mb-1">
|
||||
<span class="px-2 py-0.5 bg-tertiary-container text-on-tertiary-container rounded-full text-[10px] font-medium whitespace-nowrap">4-5岁</span>
|
||||
<span class="px-2 py-0.5 bg-surface-container-high rounded-full text-[10px] font-medium text-on-surface-variant whitespace-nowrap">进阶</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-[10px] text-outline mt-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="flex items-center gap-0.5"><span class="material-symbols-outlined text-[14px]">favorite</span> 230</span>
|
||||
<span class="flex items-center gap-0.5"><span class="material-symbols-outlined text-[14px]">download</span> 45</span>
|
||||
</div>
|
||||
<span>2024-05-18</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<!-- Card 3 -->
|
||||
<article class="bg-surface-container-lowest rounded-[20px] p-2 flex gap-3 shadow-sm border border-surface-container-high hover:shadow-md transition-shadow">
|
||||
<div class="w-24 shrink-0 rounded-[20px] overflow-hidden bg-surface-container relative">
|
||||
<img alt="Wooden abacus with colorful beads on a bright yellow desk, soft shadows" class="w-full h-full object-cover" data-alt="Wooden abacus with colorful beads on a bright yellow desk, soft shadows" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCZTJ8e802cJ_5FfgED6WRGmFayr9x84nGvf4F-Prhl0jI8Cl0jJAMVtNM2ccSAgCM3XTBTSrMUPL1Ez2W40lJGQsopbLz0Lkm6cNMbPpI0xluIUX5iWqB-BsMCoiOAFN0Zrn5_7wwT1Y14CqEt7gjjPdk9HgHWM5fNu2Fxn-vSvbAZdFGGAsanZQkQ_pjfjQX0vgLSwT13Zo0uCy50CskhRd-NB9bCG4NEby-b7lht5gHvBco21O8_IRh1Mal3jWmubIen-2KxGb4"/>
|
||||
</div>
|
||||
<div class="flex flex-col justify-between flex-1 overflow-hidden py-1">
|
||||
<div>
|
||||
<h3 class="text-base font-bold text-on-surface tracking-tight mb-1 truncate">加法启蒙</h3>
|
||||
<p class="text-on-surface-variant text-xs mb-2 truncate">结合生动插画，帮助孩子轻松记忆基础加法运算。</p>
|
||||
<div class="flex gap-2 mb-1">
|
||||
<span class="px-2 py-0.5 bg-secondary-container text-on-secondary-container rounded-full text-[10px] font-medium whitespace-nowrap">5-7岁</span>
|
||||
<span class="px-2 py-0.5 bg-surface-container-high rounded-full text-[10px] font-medium text-on-surface-variant whitespace-nowrap">挑战</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-[10px] text-outline mt-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="flex items-center gap-0.5"><span class="material-symbols-outlined text-[14px]">favorite</span> 890</span>
|
||||
<span class="flex items-center gap-0.5"><span class="material-symbols-outlined text-[14px]">download</span> 156</span>
|
||||
</div>
|
||||
<span>2024-05-15</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<!-- Card 4 -->
|
||||
<article class="bg-surface-container-lowest rounded-[20px] p-2 flex gap-3 shadow-sm border border-surface-container-high hover:shadow-md transition-shadow">
|
||||
<div class="w-24 shrink-0 rounded-[20px] overflow-hidden bg-surface-container relative">
|
||||
<img alt="Comic style colorful abstract shapes on white paper, playful child drawing" class="w-full h-full object-cover" data-alt="Comic style colorful abstract shapes on white paper, playful child drawing" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDNI9UXLOiyKRJscHCtr4bBERSio7GZGyntl-0IkJW-OHd-3hdwx2bL00mpzqAHVVu-O2944uDbQ8Zy1la27ucH2vIFOz01EEe5lCsV4aWSr7KUIQVqvMP8kSq0kPBiJV2EJCgZJp-YY3q4A9PPNRlq5i9qbj01ZJipPmG71aVYjRrz4JBt7J8V8Zl5OQH7kU7HgaT-NNVDCTXnZcmVQXCQtJwiEExpJkrAb7jPi4V1QpMDFIIpqdtD1cHVDOvO7418cr24yRaGPK8"/>
|
||||
</div>
|
||||
<div class="flex flex-col justify-between flex-1 overflow-hidden py-1">
|
||||
<div>
|
||||
<h3 class="text-base font-bold text-on-surface tracking-tight mb-1 truncate">找规律</h3>
|
||||
<p class="text-on-surface-variant text-xs mb-2 truncate">简单的剪贴纸工艺，培养孩子的动手能力与色彩感知。</p>
|
||||
<div class="flex gap-2 mb-1">
|
||||
<span class="px-2 py-0.5 bg-primary-container text-on-primary-container rounded-full text-[10px] font-medium whitespace-nowrap">4-6岁</span>
|
||||
<span class="px-2 py-0.5 bg-surface-container-high rounded-full text-[10px] font-medium text-on-surface-variant whitespace-nowrap">逻辑</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-[10px] text-outline mt-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="flex items-center gap-0.5"><span class="material-symbols-outlined text-[14px]">favorite</span> 512</span>
|
||||
<span class="flex items-center gap-0.5"><span class="material-symbols-outlined text-[14px]">download</span> 110</span>
|
||||
</div>
|
||||
<span>2024-05-10</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- BottomNavBar -->
|
||||
<nav class="bg-surface-container-low/90 backdrop-blur-xl pb-safe pt-2 px-6 flex justify-between items-center fixed bottom-0 w-full z-50 md:hidden">
|
||||
<button class="flex flex-col items-center p-2 text-primary">
|
||||
<span class="material-symbols-outlined icon-fill">explore</span>
|
||||
<span class="text-xs font-bold mt-1">发现</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center p-2 text-on-surface-variant">
|
||||
<span class="material-symbols-outlined">filter_list</span>
|
||||
<span class="text-xs font-medium mt-1">分龄</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center p-2 text-on-surface-variant">
|
||||
<span class="material-symbols-outlined">favorite</span>
|
||||
<span class="text-xs font-medium mt-1">收藏</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center p-2 text-on-surface-variant">
|
||||
<span class="material-symbols-outlined">person</span>
|
||||
<span class="text-xs font-medium mt-1">我的</span>
|
||||
</button>
|
||||
</nav>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 359 KiB |
Reference in New Issue
Block a user