Astra/ Sol/ K3前端对比测试

为独立书店「翻页 PAGE」设计一个有美术气息、可以实际选书的单页网站。

只生成一个可直接打开的 HTML 文件，CSS、JavaScript 全部内联。禁止联网搜索、外部依赖、测试、生图、SVG 和 Canvas。书封用 HTML 与 CSS 制作，不需要图片素材，不做复杂动画。

这是书店的选书页面。桌面端第一屏要同时看到品牌、本周主推书、部分书目和购物袋入口，不能被巨大宣传标题占满。手机端自然重排。

固定内容：

品牌：翻页 PAGE

品牌短句：给生活留几页空白。

本周主题：把周末还给自己

推荐语：六本适合慢慢读的书，不急着读完，也不急着出发。

书目均为虚构，使用以下数据：

《散步到日落》｜林遥｜文学｜¥42｜编辑推荐

《厨房里的四季》｜陈禾｜生活｜¥68｜新书

《城市的背面》｜周原｜摄影｜¥96｜本周主推

《不必回答的下午》｜许宁｜文学｜¥39

《一把椅子的历史》｜方木｜设计｜¥78

《给植物一点时间》｜叶青｜生活｜¥56

页面包含：

• 品牌导航、书名搜索框、日间/夜间切换、带数量的购物袋入口。


• 本周主推区域，展示《城市的背面》的书封、推荐语、作者、价格与加入购物袋按钮。


• 六本书的选书区域，包含「全部 / 文学 / 生活 / 摄影 / 设计」分类筛选。每本展示书封、书名、作者、价格与加入按钮。


• 一条书店活动信息：「周六共读：带一本没读完的书」，9 月 19 日 15:00，翻页书店二楼，自由参加。


• 简洁页脚：营业时间 10:00—21:00，地址 青石路 24 号。

搜索与分类共同筛选书目。购物袋点击后展开，支持增减数量和移除，显示合计金额；不需要结算。日夜切换改变整页配色。其他布局和视觉方案自行设计。

备注：

• 想象这是一家你周末路过会愿意推门进去的书店。它有自己的品味，但书名、价格和买书入口应该很容易找到。


• 六本书封要像六本不同的出版物，有各自的标题编排、字体气质和封面构成。缩小到书目列表后，也能辨认出主要书名。


• 主推书是第一眼的视觉焦点，其他书目仍然有足够存在感。推荐文字像店员认真写下的一小段话，不要堆砌营销口号。


• 美术感主要来自书封、排版、配色和留白。可以有纸张、印刷或装订的细节，但装饰不应抢过书本。


• 价格、作者、分类与推荐标签要有清楚的层级，长短不同的书名放在一起仍然整齐。


• 日间像自然光里的书店，夜间像晚上仍亮着灯的阅读空间，两种状态都要有完整的色彩考虑。


• 购物袋展开后像这个书店的一部分，数量、金额与操作位置便于扫视，加入书籍的反馈轻巧明确。


• 页面内容可以丰富，但要有疏密变化。最终希望它像一家真实书店的成品，而不是组件陈列或设计提案。