joey5628/doodle-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 完成分类页开发

Browse Source
This commit is contained in:
R524809
2026-04-22 11:18:56 +08:00
parent 28151018ee
commit 3bb8476e93
42 changed files with 1070 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
stitch-ui/category/code.html
+248
View File
@@ -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&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;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>