feat: 首页跳转到分类页指定分类优化
This commit is contained in:
R524809
+230
-170
@@ -1,13 +1,19 @@
|
||||
<!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">
|
||||
<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: {
|
||||
@@ -81,168 +87,222 @@
|
||||
}
|
||||
}
|
||||
</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>
|
||||
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>
|
||||
<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>
|
||||
<!-- 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>
|
||||
Reference in New Issue
Block a user