模板12 页
电商首页模板
包含轮播主视觉、限时秒杀、分类导航与商品瀑布流，全部区块可直接删减。
更新于 08-24
Media / 01
轮播 Carousel
轮播由 data-carousel 上的毫秒值驱动，圆点按幻灯片数量自动生成，箭头在鼠标移入时淡入。同一套结构可以承载单张大图、三图并排与卡片式内容。
自动播放 · 箭头 · 圆点
data-carousel="4000"
Slide 01
设计令牌先行
颜色、圆角、阴影与字号先定义语义名，组件只引用变量，换肤时无需改一行组件代码。
Slide 02
组件按场景分层
通用组件只解决交互与状态，行业页面负责业务组合，避免把订单逻辑写进按钮里。
Slide 03
一套类名两端复用
桌面与移动共用同一份标记，仅用断点调整列数与间距，维护成本直接减半。
data-carousel自动播放间隔，单位毫秒；示例为 4000，不写则回退到 4000
.car-arrow默认透明，鼠标移入轮播区域时淡入；水平居中并左右各留 14px
.car-dots容器留空即可，脚本按幻灯片数量生成圆点，当前项拉长为 22px 的胶囊
多图并排轮播
car-item 内多列 · 6000ms01
02
03
04
05
06
07
08
09
每个 .car-item 内放一组三列图片：一次切换推进三张，适合素材墙、商品图集这类成组浏览的内容。
卡片式轮播
每屏两张卡 · 5000ms模板9 页
内容社区模板
图文流、话题聚合、作者主页与评论区，适合博客与知识社区快速起步。
更新于 08-21
模板14 页
后台数据看板
KPI 概览、趋势图、明细表与筛选抽屉，覆盖日常运营的分析路径。
更新于 08-18
模板7 页
移动端活动页
竖屏海报、抽奖转盘、倒计时与分享卡片，为投放场景准备。
更新于 08-15
模板11 页
会员与营销中心
等级权益、积分任务、优惠券与拉新海报，营销动作一站配齐。
更新于 08-12
模板6 页
设置与账户中心
资料、安全、通知、设备管理与注销流程，符合常见的合规要求。
更新于 08-09
深浅色幻灯片混排
同一轮播内交替深浅内容
Dark slide
深色品牌页
固定深色底不随主题变化，用于必须保持品牌观感的营销位，浅色模式下同样沉稳。
Light slide
浅色说明页
跟随主题变量的内容页，深色模式下自动转为深底浅字，无需为两套主题各写一份。
结构
.car 负责定位与裁切，.car-track 做位移，每个 .car-item 定宽 100% 与轨道同宽。
节奏
切换动画 0.5s、缓动为易出型曲线；自动间隔建议 4000–6000ms，文字多的幻灯片取更长值。
可访问性
箭头按钮带 aria-label，圆点由脚本生成且可点击；内容不依赖自动播放即可通过箭头完整浏览。