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

feat: 完成 4 个TabBar 页面初版样式修改

Browse Source
This commit is contained in:
R524809
2026-04-02 17:05:55 +08:00
parent b18dbcb0d1
commit 206c44cf6d
61 changed files with 4670 additions and 996 deletions
Download Patch File Download Diff File Expand all files Collapse all files
stitch-ui/favorites/code-download-history.html
+209
View File
@@ -0,0 +1,209 @@
<!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>我的收藏 - 下载历史</title>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@100..700,0..1&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 src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"surface-variant": "#e5dcc9",
"on-tertiary-fixed-variant": "#00691a",
"secondary-container": "#ffc697",
"error-container": "#f95630",
"error-dim": "#b92902",
"tertiary-fixed-dim": "#83e881",
"primary-fixed-dim": "#efc900",
"on-secondary-container": "#6d3b00",
"on-error": "#ffefec",
"on-background": "#322e25",
"surface-container": "#f0e7d6",
"secondary-fixed-dim": "#ffb470",
"surface-tint": "#6c5a00",
"on-primary-container": "#5b4b00",
"inverse-primary": "#ffd709",
"primary": "#6c5a00",
"inverse-surface": "#110e06",
"surface-container-lowest": "#ffffff",
"primary-fixed": "#ffd709",
"surface-bright": "#fef6e7",
"surface-dim": "#dcd4c0",
"outline": "#7c766a",
"background": "#fef6e7",
"surface-container-high": "#eae2d0",
"on-primary-fixed-variant": "#665500",
"primary-container": "#ffd709",
"on-surface": "#322e25",
"primary-dim": "#5e4e00",
"surface-container-low": "#f8f0e0",
"on-tertiary": "#d1ffc8",
"on-secondary": "#fff0e6",
"outline-variant": "#b3ac9f",
"inverse-on-surface": "#a29c8f",
"on-surface-variant": "#605b50",
"on-tertiary-container": "#005e17",
"tertiary-fixed": "#91f78e",
"secondary": "#8a4c00",
"on-secondary-fixed": "#512a00",
"secondary-fixed": "#ffc697",
"on-error-container": "#520c00",
"secondary-dim": "#794200",
"on-primary": "#fff2cd",
"tertiary-dim": "#005d16",
"surface": "#fef6e7",
"tertiary": "#006b1b",
"on-tertiary-fixed": "#00480f",
"on-primary-fixed": "#453900",
"on-secondary-fixed-variant": "#7a4300",
"tertiary-container": "#91f78e",
"surface-container-highest": "#e5dcc9",
"error": "#b02500"
},
fontFamily: {
"headline": ["Plus Jakarta Sans", "system-ui", "sans-serif"],
"body": ["Plus Jakarta Sans", "system-ui", "sans-serif"],
"label": ["Plus Jakarta Sans", "system-ui", "sans-serif"]
},
borderRadius: {"DEFAULT": "1rem", "lg": "2rem", "xl": "3rem", "full": "9999px"},
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
body {
font-family: 'Plus Jakarta Sans', sans-serif;
-webkit-tap-highlight-color: transparent;
}
</style>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="bg-background text-on-surface min-h-screen flex flex-col">
<!-- TopAppBar from JSON -->
<header class="bg-[#f8f0e0]/80 backdrop-blur-xl text-[#6c5a00] font-plus-jakarta docked full-width top-0 z-50 flex justify-between items-center w-full px-6 py-4 sticky">
<div class="flex items-center gap-4">
<span class="material-symbols-outlined cursor-pointer active:scale-95 transition-transform">arrow_back</span>
<h1 class="text-2xl font-bold tracking-tight leading-[1.6]">我的收藏</h1>
</div>
<div class="flex gap-2">
<!-- Secondary action for clearing history as requested -->
<button class="text-[#6c5a00] opacity-60 text-sm font-semibold hover:opacity-100 transition-opacity px-3 py-1 rounded-full hover:bg-[#f0e7d6]">清空历史</button>
</div>
</header>
<main class="flex-1 px-4 pt-4 pb-32 max-w-2xl mx-auto w-full">
<!-- Segmented Control -->
<div class="bg-surface-container rounded-full p-1.5 flex mb-8">
<button class="flex-1 py-3 text-sm font-bold text-on-surface-variant rounded-full transition-all">
收藏的题型
</button>
<button class="flex-1 py-3 text-sm font-bold text-on-primary-container bg-primary-container rounded-full shadow-sm">
下载历史
</button>
</div>
<!-- Download History List -->
<div class="space-y-4">
<!-- History Section: Today -->
<div class="mb-6">
<h3 class="text-xs font-bold text-outline uppercase tracking-widest px-4 mb-3">今天</h3>
<div class="space-y-4"><!-- History Item 1 -->
<div class="bg-surface-container-low rounded-2xl p-4 flex gap-4 items-center group active:scale-[0.98] transition-all">
<div class="w-20 h-20 rounded-xl overflow-hidden flex-shrink-0 bg-surface-container-highest">
<img class="w-full h-full object-cover" data-alt="a minimalist educational worksheet preview with handwriting guides for chinese pinyin and soft warm studio lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBCm6X4rhibw2_WxP-U0dDyOsiYol3y12OnEXHRkPONZYMQBUcr3Grqo1IbwH3sdWPg5jIUeIbr_AEwv_hFwUOMMz9jTIIMc6Pke1bzSvlQcgdDq-zMEIU4A--IQFX59ac-8BscCajXZcd4v8rE6JEZFf1-aztKclPTkE_Rrgj-nbVCy5V6bOE6yDOB67VdTbcqiOdaFN18ju_MgWVo3FQZLwIUZOBahkPl0vDIKA0mkiaGK9eiFpfnERYxkYG3eWJZ40umTYp46Jo"/>
</div>
<div class="flex-1">
<h4 class="text-lg font-bold text-on-surface mb-1 leading-tight">拼音描红 · 声母表</h4>
<div class="flex items-center gap-2 text-on-surface-variant/70 text-sm">
<span class="material-symbols-outlined text-sm" style="font-variation-settings: 'opsz' 18;">schedule</span>
<span>14:32</span>
<span class="w-1 h-1 bg-outline-variant rounded-full"></span>
<span class="text-tertiary font-medium">已保存相册</span>
</div>
</div>
<button class="w-10 h-10 rounded-full flex items-center justify-center hover:bg-surface-container transition-colors">
<span class="material-symbols-outlined text-outline">more_vert</span>
</button>
</div>
<!-- History Item 2 -->
<div class="bg-surface-container-low rounded-2xl p-4 flex gap-4 items-center active:scale-[0.98] transition-all">
<div class="w-20 h-20 rounded-xl overflow-hidden flex-shrink-0 bg-surface-container-highest">
<img class="w-full h-full object-cover" data-alt="a colorful math worksheet for young kids featuring simple addition problems and hand-drawn star shapes in sunny colors" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBxNORxN_vftYMLaMjZVscL-o9bZnBrfUi7IAqOrFATIztGV12_0ggwgae-fmk0cORWtysZWJJDcAzj0NEyniFxbREoGDuq9U4kytprJkA70_k0MCzPgStmq0bRwu1Gx1j4peglFam8PH6IlPvOMbiHQ7-fMFfYTSBtA1p7Dp06NDOzS2VrMlF8VxjEgihVmhHUrHePVvXlktUkXBKNzrXEXrogO3iOyouTUKyvJh0TeChKUv3KohMoD5ol7C3fjBhdHf7QD4StOQ4"/>
</div>
<div class="flex-1">
<h4 class="text-lg font-bold text-on-surface mb-1 leading-tight">趣味口算题卡</h4>
<div class="flex items-center gap-2 text-on-surface-variant/70 text-sm">
<span class="material-symbols-outlined text-sm" style="font-variation-settings: 'opsz' 18;">schedule</span>
<span>09:15</span>
<span class="w-1 h-1 bg-outline-variant rounded-full"></span>
<span class="text-on-surface-variant/50">已下载 PDF</span>
</div>
</div>
<button class="w-10 h-10 rounded-full flex items-center justify-center hover:bg-surface-container transition-colors">
<span class="material-symbols-outlined text-outline">more_vert</span>
</button>
</div></div>
</div>
<!-- History Section: Yesterday -->
<div class="mb-6">
<h3 class="text-xs font-bold text-outline uppercase tracking-widest px-4 mb-3">昨天</h3>
<div class="space-y-4"><!-- History Item 3 -->
<div class="bg-surface-container-low rounded-2xl p-4 flex gap-4 items-center active:scale-[0.98] transition-all opacity-90">
<div class="w-20 h-20 rounded-xl overflow-hidden flex-shrink-0 bg-surface-container-highest">
<div class="w-full h-full bg-gradient-to-br from-secondary-container to-primary-container/20 flex items-center justify-center">
<span class="material-symbols-outlined text-on-secondary-container text-3xl">draw</span>
</div>
</div>
<div class="flex-1">
<h4 class="text-lg font-bold text-on-surface mb-1 leading-tight">汉字笔画基础训练</h4>
<div class="flex items-center gap-2 text-on-surface-variant/70 text-sm">
<span class="material-symbols-outlined text-sm" style="font-variation-settings: 'opsz' 18;">schedule</span>
<span>16:40</span>
<span class="w-1 h-1 bg-outline-variant rounded-full"></span>
<span class="text-on-surface-variant/50">已发送邮件</span>
</div>
</div>
<button class="w-10 h-10 rounded-full flex items-center justify-center hover:bg-surface-container transition-colors">
<span class="material-symbols-outlined text-outline">more_vert</span>
</button>
</div></div>
</div>
</div>
<!-- Empty State Logic (Visualized if no content) -->
<!-- <div class="hidden flex-col items-center justify-center py-20 text-center">
<span class="material-symbols-outlined text-6xl text-outline-variant mb-4">history_toggle_off</span>
<p class="text-on-surface-variant font-medium">暂无下载记录</p>
</div> -->
</main>
<!-- BottomNavBar from JSON -->
<nav class="fixed bottom-0 left-0 w-full flex justify-around items-center px-4 pb-6 pt-2 bg-[#f8f0e0]/80 backdrop-blur-xl z-50 rounded-t-[3rem] shadow-[0_-8px_32px_0_rgba(50,46,37,0.06)]">
<div class="flex flex-col items-center justify-center text-[#322e25] dark:text-[#fef6e7] opacity-70 px-4 py-2 hover:opacity-100 transition-opacity active:scale-90 duration-200 cursor-pointer">
<span class="material-symbols-outlined">explore</span>
<span class="font-plus-jakarta text-[12px] font-semibold leading-[1.6]">发现</span>
</div>
<div class="flex flex-col items-center justify-center text-[#322e25] dark:text-[#fef6e7] opacity-70 px-4 py-2 hover:opacity-100 transition-opacity active:scale-90 duration-200 cursor-pointer">
<span class="material-symbols-outlined">child_care</span>
<span class="font-plus-jakarta text-[12px] font-semibold leading-[1.6]">分龄</span>
</div>
<!-- Active Tab: 收藏 -->
<div class="flex flex-col items-center justify-center bg-[#ffd709] text-[#6d3b00] rounded-full px-6 py-2 scale-105 active:scale-90 transition-all duration-200 cursor-pointer">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">favorite</span>
<span class="font-plus-jakarta text-[12px] font-semibold leading-[1.6]">收藏</span>
</div>
<div class="flex flex-col items-center justify-center text-[#322e25] dark:text-[#fef6e7] opacity-70 px-4 py-2 hover:opacity-100 transition-opacity active:scale-90 duration-200 cursor-pointer">
<span class="material-symbols-outlined">person</span>
<span class="font-plus-jakarta text-[12px] font-semibold leading-[1.6]">我的</span>
</div>
</nav>
</body></html>
stitch-ui/favorites/code-favorites-list.html
+231
View File
@@ -0,0 +1,231 @@
<!DOCTYPE html>
<html class="light" lang="zh-CN"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<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&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"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<style>
body {
font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-webkit-tap-highlight-color: transparent;
}
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.glass-nav {
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
</style>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"surface-variant": "#e5dcc9",
"on-tertiary-fixed-variant": "#00691a",
"secondary-container": "#ffc697",
"error-container": "#f95630",
"error-dim": "#b92902",
"tertiary-fixed-dim": "#83e881",
"primary-fixed-dim": "#efc900",
"on-secondary-container": "#6d3b00",
"on-error": "#ffefec",
"on-background": "#322e25",
"surface-container": "#f0e7d6",
"secondary-fixed-dim": "#ffb470",
"surface-tint": "#6c5a00",
"on-primary-container": "#5b4b00",
"inverse-primary": "#ffd709",
"primary": "#6c5a00",
"inverse-surface": "#110e06",
"surface-container-lowest": "#ffffff",
"primary-fixed": "#ffd709",
"surface-bright": "#fef6e7",
"surface-dim": "#dcd4c0",
"outline": "#7c766a",
"background": "#fef6e7",
"surface-container-high": "#eae2d0",
"on-primary-fixed-variant": "#665500",
"primary-container": "#ffd709",
"on-surface": "#322e25",
"primary-dim": "#5e4e00",
"surface-container-low": "#f8f0e0",
"on-tertiary": "#d1ffc8",
"on-secondary": "#fff0e6",
"outline-variant": "#b3ac9f",
"inverse-on-surface": "#a29c8f",
"on-surface-variant": "#605b50",
"on-tertiary-container": "#005e17",
"tertiary-fixed": "#91f78e",
"secondary": "#8a4c00",
"on-secondary-fixed": "#512a00",
"secondary-fixed": "#ffc697",
"on-error-container": "#520c00",
"secondary-dim": "#794200",
"on-primary": "#fff2cd",
"tertiary-dim": "#005d16",
"surface": "#fef6e7",
"tertiary": "#006b1b",
"on-tertiary-fixed": "#00480f",
"on-primary-fixed": "#453900",
"on-secondary-fixed-variant": "#7a4300",
"tertiary-container": "#91f78e",
"surface-container-highest": "#e5dcc9",
"error": "#b02500"
},
fontFamily: {
"headline": ["Plus Jakarta Sans"],
"body": ["Plus Jakarta Sans"],
"label": ["Plus Jakarta Sans"]
},
borderRadius: {"DEFAULT": "1rem", "lg": "2rem", "xl": "3rem", "full": "9999px"},
},
},
}
</script>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="bg-background text-on-surface min-h-screen pb-32">
<!-- Top App Bar -->
<header class="bg-[#f8f0e0]/80 dark:bg-[#322e25]/80 backdrop-blur-xl docked full-width top-0 z-50 flex justify-between items-center w-full px-6 py-4 sticky">
<div class="flex items-center gap-4">
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-[#f0e7d6] active:scale-95 transition-all text-[#6c5a00]">
<span class="material-symbols-outlined" data-icon="arrow_back">arrow_back</span>
</button>
<h1 class="font-plus-jakarta text-2xl font-bold tracking-tight leading-[1.6] text-[#6c5a00]">我的收藏</h1>
</div>
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-[#f0e7d6] active:scale-95 transition-all text-[#6c5a00]">
<span class="material-symbols-outlined" data-icon="search">search</span>
</button>
</header>
<main class="max-w-2xl mx-auto px-6 pt-6">
<!-- Segmented Control -->
<div class="bg-surface-container p-1.5 rounded-full flex items-center mb-8 shadow-sm">
<button class="flex-1 py-3 px-4 rounded-full bg-primary-container text-on-primary-container font-bold text-sm transition-all shadow-sm">
收藏的题型
</button>
<button class="flex-1 py-3 px-4 rounded-full text-on-surface-variant font-medium text-sm hover:bg-surface-container-high transition-all">
下载历史
</button>
</div>
<!-- Favorites List -->
<div class="space-y-4">
<!-- Card 1 -->
<div class="bg-surface-container-low p-4 flex items-center gap-4 active:scale-[0.98] transition-transform duration-200 rounded-2xl">
<div class="w-20 h-20 overflow-hidden flex-shrink-0 bg-surface-container-highest rounded-xl">
<img alt="Worksheet Thumbnail" class="w-full h-full object-cover" data-alt="Close-up of a colorful children's math worksheet with simple addition problems and cute illustrated animals on creamy paper." src="https://lh3.googleusercontent.com/aida-public/AB6AXuD7khp0rJABfa9yFrMt9ZgIhAPyN44XmJ2pXNBgCzbgBvwA5ptFZVty013JedVzbE9_VvCQnToN7QETLDKjtiX22igzK-a5h4E8wjKrembFW4eVuk1RsJIbHjx3_cCz0hJ7_t76hF8t-Qdod_5R9sNMor1ZEjf6dGNp6UI_eIBjsN9b22iCTJ2VB-IEh0Rmil6_iC4Og-4I03IcQDV2rTHYIXcZxjiay1IiYGXw3wJ3bfo2SF2N7ZFT00akTgYU-9JyF7xJ6n15Yzc"/>
</div>
<div class="flex-1">
<h3 class="font-bold text-lg text-on-surface leading-tight mb-1">10以内加法</h3>
<p class="text-on-surface-variant text-xs mb-2 flex items-center gap-1">
数学启蒙 · 4-6岁 ·
<span class="flex text-primary-fixed-dim">
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1;">star</span>
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1;">star</span>
</span>
</p>
<span class="text-[10px] text-outline px-2 py-0.5 bg-surface-container rounded-full uppercase tracking-wider">收藏于 3 天前</span>
</div>
<button class="w-10 h-10 flex items-center justify-center rounded-full text-error transition-colors">
<span class="material-symbols-outlined" data-icon="favorite" style="font-variation-settings: 'FILL' 1;">favorite</span>
</button>
</div>
<!-- Card 2 -->
<div class="bg-surface-container-low p-4 flex items-center gap-4 active:scale-[0.98] transition-transform duration-200 rounded-2xl">
<div class="w-20 h-20 overflow-hidden flex-shrink-0 bg-surface-container-highest rounded-xl">
<img alt="Worksheet Thumbnail" class="w-full h-full object-cover" data-alt="Children's logic puzzle worksheet featuring colorful patterns and shape matching exercises in a playful studio setting." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBY_0Rr153ZBT4IHcMyFtrcgl-y2ZRyVnOuGecnn7f4PZKoAx2lOuCorsMmfRa72s0JmbXrt4XT3QU1x7cIbZUyhv_EXwCfMaNxtkHc-ymIBIQ5jqm5oiQebrEWH4kjv14JdkCiziT4xzac4TdVN5yqpk7Wlg80QBl_ldDmAQqIgcUeN2PvlVvhmpOYmFeWE2HS3I_e4vV1J8s_cfV9_4g7y8SbxlSfnTmgQNeXrVbcdwaNEAGQWp92Iif0d2pVIqdfuUHO1pTw8oQ"/>
</div>
<div class="flex-1">
<h3 class="font-bold text-lg text-on-surface leading-tight mb-1">图形连连看</h3>
<p class="text-on-surface-variant text-xs mb-2 flex items-center gap-1">
逻辑思维 · 3-5岁 ·
<span class="flex text-primary-fixed-dim">
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1;">star</span>
</span>
</p>
<span class="text-[10px] text-outline px-2 py-0.5 bg-surface-container rounded-full uppercase tracking-wider">收藏于 5 天前</span>
</div>
<button class="w-10 h-10 flex items-center justify-center rounded-full text-error transition-colors">
<span class="material-symbols-outlined" data-icon="favorite" style="font-variation-settings: 'FILL' 1;">favorite</span>
</button>
</div>
<!-- Card 3 -->
<div class="bg-surface-container-low p-4 flex items-center gap-4 active:scale-[0.98] transition-transform duration-200 rounded-2xl">
<div class="w-20 h-20 overflow-hidden flex-shrink-0 bg-surface-container-highest rounded-xl">
<img alt="Worksheet Thumbnail" class="w-full h-full object-cover" data-alt="Handwritten-style pinyin writing worksheet for kids with large guides and soft yellow accents on textured white paper." src="https://lh3.googleusercontent.com/aida-public/AB6AXuC54mXQ8620XwIsWmUHBHJGdmpF8uE4cSYxwR2NLJTsa6gYdTCHz2tqrKbGOye-y0CGgCPPWwJXzEuB2ZYrQ3CWWPlamvbjhTUDYf8yoA9Lyapll1t2w17AqzSHrbBPNFrq931IUCis64b51kslQZoq3c0KslZsBQiky-YSnuE7xUuNsgiF4hOak_ReFFufWE53h1sPkjHFeRM-H34b-e1MCNxGObGPhI0mNlJ_qz0c8aCuS-jdnDocSvIYda-iVcJLWcIT-mO6klw"/>
</div>
<div class="flex-1">
<h3 class="font-bold text-lg text-on-surface leading-tight mb-1">拼音字母认读</h3>
<p class="text-on-surface-variant text-xs mb-2 flex items-center gap-1">
语文基础 · 5-7岁 ·
<span class="flex text-primary-fixed-dim">
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1;">star</span>
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1;">star</span>
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1;">star</span>
</span>
</p>
<span class="text-[10px] text-outline px-2 py-0.5 bg-surface-container rounded-full uppercase tracking-wider">收藏于 1 周前</span>
</div>
<button class="w-10 h-10 flex items-center justify-center rounded-full text-error transition-colors">
<span class="material-symbols-outlined" data-icon="favorite" style="font-variation-settings: 'FILL' 1;">favorite</span>
</button>
</div>
<!-- Card 4 (Bento Variation) -->
<div class="bg-surface-container p-6 relative overflow-hidden active:scale-[0.98] transition-transform duration-200 rounded-2xl">
<div class="relative z-10 pr-16">
<h3 class="font-bold text-xl text-on-surface leading-tight mb-1">趣味英语单词卡</h3>
<p class="text-on-surface-variant text-sm mb-4">语言学习 · 4-8岁 · ⭐⭐⭐</p>
<div class="flex gap-2">
<span class="px-3 py-1 bg-white/50 backdrop-blur rounded-full text-[10px] font-bold text-on-secondary-container"># 畅销经典</span>
<span class="px-3 py-1 bg-white/50 backdrop-blur rounded-full text-[10px] font-bold text-on-secondary-container"># 全彩打印</span>
</div>
</div>
<div class="absolute -right-4 -bottom-4 w-32 h-32 opacity-20">
<span class="material-symbols-outlined text-[120px] text-primary" data-icon="abc">abc</span>
</div>
<button class="absolute top-6 right-6 w-10 h-10 flex items-center justify-center rounded-full text-error transition-colors">
<span class="material-symbols-outlined" data-icon="favorite" style="font-variation-settings: 'FILL' 1;">favorite</span>
</button>
</div>
</div>
<!-- Empty State Suggestion (Subtle) -->
<div class="mt-12 py-8 text-center">
<p class="text-outline text-sm font-medium">发现更多有趣的内容？</p>
<button class="mt-4 px-8 py-3 bg-secondary-container text-on-secondary-container rounded-full font-bold text-sm shadow-sm active:scale-95 transition-all">
去发现页看看
</button>
</div>
</main>
<!-- Bottom Navigation Bar -->
<nav class="fixed bottom-0 left-0 w-full flex justify-around items-center px-4 pb-6 pt-2 bg-[#f8f0e0]/80 dark:bg-[#322e25]/80 backdrop-blur-xl z-50 rounded-t-[3rem] shadow-[0_-8px_32px_0_rgba(50,46,37,0.06)]">
<!-- Tab 发现 -->
<a class="flex flex-col items-center justify-center text-[#322e25] dark:text-[#fef6e7] opacity-70 px-4 py-2 hover:opacity-100 transition-opacity active:scale-90 transition-all duration-200" href="#">
<span class="material-symbols-outlined mb-1" data-icon="explore">explore</span>
<span class="font-plus-jakarta text-[12px] font-semibold leading-[1.6]">发现</span>
</a>
<!-- Tab 分龄 -->
<a class="flex flex-col items-center justify-center text-[#322e25] dark:text-[#fef6e7] opacity-70 px-4 py-2 hover:opacity-100 transition-opacity active:scale-90 transition-all duration-200" href="#">
<span class="material-symbols-outlined mb-1" data-icon="child_care">child_care</span>
<span class="font-plus-jakarta text-[12px] font-semibold leading-[1.6]">分龄</span>
</a>
<!-- Tab 收藏 (Active) -->
<a class="flex flex-col items-center justify-center bg-[#ffd709] dark:bg-[#6c5a00] text-[#6d3b00] dark:text-[#ffd709] rounded-full px-6 py-2 scale-105 active:scale-90 transition-all duration-200" href="#">
<span class="material-symbols-outlined mb-0.5" data-icon="favorite" style="font-variation-settings: 'FILL' 1;">favorite</span>
<span class="font-plus-jakarta text-[12px] font-bold leading-[1.6]">收藏</span>
</a>
<!-- Tab 我的 -->
<a class="flex flex-col items-center justify-center text-[#322e25] dark:text-[#fef6e7] opacity-70 px-4 py-2 hover:opacity-100 transition-opacity active:scale-90 transition-all duration-200" href="#">
<span class="material-symbols-outlined mb-1" data-icon="person">person</span>
<span class="font-plus-jakarta text-[12px] font-semibold leading-[1.6]">我的</span>
</a>
</nav>
</body></html>
stitch-ui/favorites/screen-download-history.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

stitch-ui/favorites/screen-favorites-list.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB