ARTICLE · 959493
一天一个SKILL——uniapp+移动端APP卡片升级:8种不同场景卡片布局 + 固定底部悬浮按钮,功能网格支持4种风格切换,Token光速下降!
童鞋们好，我是【考拉搞AI】，一个专注于 VibeCoding 分享 & AI 工程化 的博主，今天是 2026年08月22日，搞定了一天的 项目任务 之后，外面不知不觉已经天色一片漆黑了。
从每次重复重复再重复的提示词以及与AI 反复拉扯的过程中，博主可算是越来越深刻体会到AI 时代 规范工程开发的重要性了。
每天都提醒，即使在同一个文件夹里做同样的事情无数次，但就是每次的结果就是不一样；
每次提示词写了几百个字甚至精确到标点符号，就是为了告诉AI ，要这么做这么做，就像一个刚入职的想要干一番成绩的新老师，给一个很聪明却不听话、容易忘事的 学生 反复叮嘱：这个题要这么做、这个作文这里要点题和分段，这里的化学公式要加符号……
但一个简简单单的 修改 border 下划线 就改了三五次……心累
牢骚发完。
上一期我们介绍了 base-input 通用输入框和 6 种搜索栏，接踵而来是下面几个需求：
输入框统一了，那卡片能不能也统一？
每次做个人中心都要自己写九宫格菜单，能不能直接生成？
商品详情页底部的悬浮按钮怎么每次都不一样？
各种业务场景下，卡片是最基础也最核心的组件：
个人中心：封面卡片 + 头像 + 统计 + VIP + 功能网格 列表页：好友卡片、设置卡片、评论卡片、通知卡片 详情页：商品卡片、图片卡片、VIP卡片 底部悬浮：确认订单、提交表单、立即购买
当然 base-input 输入输入组件，其本身属于非常独立的一个组件，任何需要输入的地方都会使用，同时有输入表单中的一部分。一个完整的表单包含：下拉、多选、单选、滑动切换、输入框 等等。
咱们的 标准 组件 base-card， 其中最常用的一套组件就是 base-form了，而base-form其中最频繁使用的 那当然就是 base-input了，当然还有base-button。
但本期不去推出base-form~~~~~~~，而是针对具体一些业务场景的卡片，即将base-card升级：
8 种卡片布局独立成 HTML + MD，按形态检索复用 功能网格卡片4 种风格一键切换 固定底部悬浮按钮全宽度 + 圆角 + 内边距 每个场景独立成案例，参数化配置
组合技：
uniapp-theme-skill —— 统一样式变量，换风格一行搞定 icon-catch-skill —— 抓专业图标，拒绝 emoji image-forge-skill —— 生成图标，压缩图片 uniapp-style-skill —— 设计系统审查，保证合规
还是那句老话，与直接让 AI 手搓相比，用技能来写这些页面有这些优势：
风格统一：全站卡片一套参数调到底 节省 Token：省去 AI 反复思考边框、圆角、阴影 技能矩阵：结合主题、样式、图片/icon 技能，效果显著
废话不多说，开整。
一、base-card 继续升级
前面我们一直强调：一切皆卡片。
页面 = 多个卡片 + 布局卡片 = 容器属性 + 内容base-card 就是这个容器，负责：
背景色 background圆角 radius边框 border阴影 shadow内边距 padding
内容由业务决定——可以是文字、图片、按钮、图标、统计数字……
这次我们把最常见的 8 种卡片布局独立出来，每个都是 base-card + 不同内容的组合：
二、8 种卡片布局
1. card-basic 基础卡片
特点：纯文字 + 标签 + 操作栏
┌─────────────────────────────────────┐│ 标题文字 ││ 这是卡片的描述内容，可以是多行文字。 ││ [标签一] [标签二] ││ 2小时前 查看详情 > │└─────────────────────────────────────┘适用场景：公告、通知、文章摘要、活动介绍
核心参数：
radius: var(--radius-md) = 12px shadow: shadow-sm padding: var(--spacing-lg) = 16px
2. card-profile 个人中心卡片
特点：封面图 + 头像 + 昵称 + 统计
┌─────────────────────────────────────┐│ [封面图片区域] ││ ││ [头像○] ││ 用户昵称 ││ ID: 888888 [编辑资料] ││ ──────────────────────────────── ││ 关注 粉丝 获赞 ││ 1,234 5,678 999+ │└─────────────────────────────────────┘适用场景：个人主页、用户主页、个人中心顶部
核心参数：
padding: 0（内容自行控制） shadow: shadow-md
3. card-friend 好友卡片
特点：圆形头像 + 昵称 + 签名 + 箭头
┌─────────────────────────────────────┐│ [头像○] 产品经理 ││ 每天进步一点点 ✨ ││ [>] │└─────────────────────────────────────┘适用场景：好友列表、联系人列表、粉丝列表
核心参数：
radius: 8px 头像圆形
4. card-set 设置卡片
特点：图标 + 标签 + 开关/箭头
┌─────────────────────────────────────┐│ [icon] 消息通知 [开关]││ [icon] 隐私设置 [>] ││ [icon] 通用设置 [>] │└─────────────────────────────────────┘适用场景：设置页、偏好配置、个人中心功能入口
核心参数：
radius: 0（面板式）
5. card-info 信息卡片
特点：统计网格 + 详情信息 + 进度条
┌─────────────────────────────────────┐│ 我的资产 ││ ──────────────────────────────── ││ 余额 积分 优惠券 ││ ¥888 1234 5张 │└─────────────────────────────────────┘适用场景：数据展示、个人中心资产区域
核心参数：
网格布局 grid
6. card-menu 菜单卡片
特点：九宫格图标 + 标签
┌─────────────────────────────────────┐│ ┌───┐ ┌───┐ ┌───┐ ┌───┐ ││ │订单│ │收藏│ │足迹│ │钱包│ ││ └───┘ └───┘ └───┘ └───┘ ││ ┌───┐ ┌───┐ ┌───┐ ┌───┐ ││ │设置│ │帮助│ │消息│ │分享│ ││ └───┘ └───┘ └───┘ └───┘ │└─────────────────────────────────────┘适用场景：个人中心功能菜单、首页功能入口
核心参数：
columns: 4 grid 布局
7. card-product 商品卡片
特点：商品图 + 标题 + 价格 + 按钮
┌─────────────────────────────────────┐│ ┌─────────────────────────────┐ ││ │ │ ││ │ 商品图片 │ ││ │ │ ││ └─────────────────────────────┘ ││ 商品名称 ││ 商品描述简短介绍 ││ ¥132.0 [加入购物车] │└─────────────────────────────────────┘适用场景：电商列表、商品详情页
核心参数：
imageHeight: 160px padding: 0（图片区域）
8. card-vip VIP 会员卡片
特点：深色渐变 + 头像 + 等级 + 权益
┌─────────────────────────────────────┐│ [头像○] 考拉搞AI ││ 👑 SVIP ││ 开通VIP享专属权益，限时优惠中 ││ ──────────────────────────────── ││ 🎁专属礼包 ⚡极速下载 🎨专属主题 ││ ──────────────────────────────── ││ [ 立即开通 ] │└─────────────────────────────────────┘适用场景：个人中心 VIP 区域、会员权益展示
核心参数：
background: linear-gradient shadow: shadow-md
三、功能网格卡片（重点！）
这是本次更新的核心——3 列功能网格，支持 4 种风格切换！
为什么需要？
看看这些页面：
# 个人中心┌─────────────────────────────────────┐│ ┌───┐ ┌───┐ ┌───┐ ││ │订单│ │收藏│ │足迹│ ← 有边框 ││ └───┘ └───┘ └───┘ ││ ┌───┐ ┌───┐ ┌───┐ ││ │钱包│ │设置│ │帮助│ ││ └───┘ └───┘ └───┘ │└─────────────────────────────────────┘# 设置页┌─────────────────────────────────────┐│ 配置 客服 设置 │───────────────────────────────────── ← 只有行分隔线│ 关于 协议 退出 │└─────────────────────────────────────┘有的要边框（格子之间都要有） 有的只要行分隔线（像设置页那样） 有的不要边框（纯色背景） 有的还要显示徽标（右上角红点）
这次直接给你 4 种风格，满足所有场景！
1. 行分隔线（默认）
特点：只有行与行之间有分隔线，两侧留边距
┌─────────────────────────────────────┐│ 配置 客服 设置 │──────────────────────────────────────│ 关于 协议 退出 │└─────────────────────────────────────┘适用：设置页、功能菜单
参数：lineStyle: 'row'
2. 格子内部分割线
特点：每个格子右下角都有边框
┌──┬──┬──┐│订单│商品│好友│├──┼──┼──┤│关注│浏览│足迹│└──┴──┴──┘适用：需要明确区分每个功能项
参数：lineStyle: 'inner'
3. 无分隔线
特点：纯色背景，无边框
┌─────────────────────────┐│ ││ 收藏 钱包 历史 ││ │└─────────────────────────┘适用：背景色已区分明显
参数：lineStyle: 'none'
4. 徽标支持
每个图标右上角可以显示红点数字：
┌─────────────────────────┐│ [订单●3] [商品] [好友] │├─────────────────────────┤│ [关注] [浏览] [足迹]│└─────────────────────────┘参数：showBadge: true, badge: number
数据结构
// gridData: 二维数组，每行一个数组const gridData = [// 第1行 [ { id: 1, icon: '/icons/order.png', label: '订单', bg: '#e8f5e9', badge: 3 }, { id: 2, icon: '/icons/shop.png', label: '商品', bg: '#fff3e0' }, { id: 3, icon: '/icons/friend.png', label: '好友', bg: '#e3f2fd' } ],// 第2行 [ { id: 4, icon: '/icons/heart.png', label: '关注', bg: '#fce4ec' }, { id: 5, icon: '/icons/eye.png', label: '浏览', bg: '#f3e5f5' }, { id: 6, icon: '/icons/history.png', label: '足迹', bg: '#e0f7fa' } ]]
四、固定底部悬浮按钮
商品详情页、订单确认页、提交表单页……底部总是需要一个或两个按钮。
每次都重新写？烦不烦？
这次直接给你固定底部悬浮按钮模板：
默认参数
全宽度： left: 0; right: 0内部容器 padding： 16px按钮弧度： border-radius: 22px按钮高度： 44px
card-grid 功能网格
card-button 固定底部
七、唤醒一下
# 卡片布局/uniapp-base-skill 做一个基础卡片，带标题、描述、标签、操作栏/uniapp-base-skill 做一个好友卡片，圆形头像、昵称、签名、箭头/uniapp-base-skill 做一个设置卡片，图标+标签+开关/uniapp-base-skill 做一个信息卡片，资产统计网格/uniapp-base-skill 做一个菜单卡片，九宫格功能图标/uniapp-base-skill 做一个商品卡片，商品图、标题、价格、按钮/uniapp-base-skill 做一个VIP卡片，深色渐变、头像、等级、权益/uniapp-base-skill 做一个评论卡片，头像、昵称、内容、时间、互动/uniapp-base-skill 做一个通知卡片，图标、标题、时间、状态# 功能网格/uniapp-base-skill 做一个功能网格卡片，三列，带行分隔线/uniapp-base-skill 做一个网格卡片，格子内部分割线/uniapp-base-skill 做一个功能网格，无分隔线纯色背景# 固定底部按钮/uniapp-base-skill 做一个固定底部按钮，全宽度、圆角、底部悬浮/uniapp-base-skill 做一个提交按钮，确认订单页底部# 按钮风格/uniapp-base-skill 做一个主色实心按钮/uniapp-base-skill 做一个主色描边按钮/uniapp-base-skill 做一个幽灵按钮/uniapp-base-skill 做一个胶囊按钮/uniapp-base-skill 做一个圆角方形按钮/uniapp-base-skill 做一个渐变按钮# 组合案例/uniapp-base-skill 做一个商品详情页，轮播图、标题价格、功能网格、固定底部购买按钮/uniapp-base-skill 做一个个人中心，渐变头部、头像统计、VIP卡片、功能网格、固定底部导航做个枪战小游戏
下次仍然会修正&迭代更多卡片布局，都是熔炼了具体的古法时代的 实战项目，标准且精细！
当然，这个技能会不断持续迭代和更新其他内容，让小伙伴在VibeCoding 中省去很多烦恼！
有的童鞋会问：直接将这些demo html 截图丢给AI ，直接就生成出来了，哪需要这么麻烦呀~ 这的确是一个办法，但不可忽视的几点：
不是所有模型都有识图功能，而且识图功能有强有弱； 直接让AI识图非常适合在有 原型图技能规范的第一个目标是 效率开发，节省Token，第二个目标是可迭代可持续个性化的一种模式，当童鞋们反复跟AI 拉扯 要将某个 字体变色、某个 border加粗、某个 padding加大，就知道这套规范的核心价值了！
因为当你沉浸在VibeCoding时候，这些看似简单的 一次调整，可能被AI 疯狂的忽略、搞混、甚至错改！最终留给自己的是无尽的崩溃！
当然咯，还有很多情况是：小伙伴们都不知道咋描述去修改！
本期到此为止，点赞关注，持续更新，更多 VibeCoding 技术 和 AI 实战经验，以及有任何自行开发遇到的问题或者需要学习，无论是小白还是老白，都欢迎私信发送VibeCoding~
uniapp+移动端APP表单输入框大升级：14 种输入场景 + 6 种搜索栏，登录页技能全面接入 base-input，Token 再降 50%！
一天一个 SKILL—— uniapp-theme-skill主题深度迭代：多主题/命名规范统一/色阶生成优化/APP兼容/预设主题全覆盖
一天一个SKILL—— uniapp-style-skill 版本迭代：9阶默认配色 + 6个 动画 + 5套页面布局 页面布局更加精细