互联网医院18：前端进阶——CSS“父相子绝”打造专业级卡片交互

[1. 前言：从"能用"到"好用"](#1. 前言：从“能用”到“好用”)
[2. 布局拆解：庖丁解牛](#2. 布局拆解：庖丁解牛)
[3. 核心实战：搭建步骤](#3. 核心实战：搭建步骤)
- [3.1 基础骨架搭建](#3.1 基础骨架搭建)
- [3.2 难点攻克一：右上角"状态三角标"](#3.2 难点攻克一：右上角“状态三角标”)
- [3.3 难点攻克二："更多操作"悬浮菜单](#3.3 难点攻克二：“更多操作”悬浮菜单)
[4 最终效果](#4 最终效果)
[5. 总结](#5. 总结)

1. 前言：从"能用"到"好用"

在上一篇中，我们通过一个状态变量实现了"表格视图"与"卡片视图"的无缝切换。表格适合批量查阅，而卡片则更具视觉冲击力，能直观展示医生的形象与状态。

本篇我们将深入前端样式的核心------布局与定位。我们将手动搭建一个包含"状态角标"（CSS 三角形）和"更多操作菜单"（绝对定位弹窗）的专业医生卡片。

这不仅是UI搭建，更是对"父相子绝"（父元素相对定位，子元素绝对定位）这一经典CSS理论的实战演练。

2. 布局拆解：庖丁解牛

在动手拖拽组件前，我们先看设计稿，将卡片拆解为三个层级：

容器层：白色背景，圆角，阴影。
顶部：左侧头像 + 右侧信息（姓名/职称/科室）。
中部：擅长疾病的标签组。
底部：诊室位置 + 价格 + 操作按钮栏。
右上角标：展示"出诊/停诊"状态。
更多菜单：点击"..."后弹出的操作面板。

3. 核心实战：搭建步骤

3.1 基础骨架搭建

卡片容器：

先将原来列容器里的内容清掉

添加普通容器

设置样式，这里主要配置了背景色为白色，圆角，和外阴影

bash 复制代码

:root {
  background: rgb(255, 255, 255);
  border-radius: 12px 12px;
  box-shadow: 0px 4px 2px 0px rgba(0, 0, 0, 0.05);
}

然后设置定位，设为相对定位。这是实现"父相子绝"的基础！

内部排版：

使用普通容器将内部划分为上、中、下三部分。

上部：左侧放「图片」（头像），右侧放「文本」（姓名、职称）。

布局搭建好之后，依次绑定对应的字段

中部：放入标签组件

绑定选项，我们将文本内容用字符串分割的API拆分为数组，并且将数组的元素格式化为组件需要的label、value形式

bash 复制代码

$w.item_listView1.good_at.split("、").map(item=>({
  label:item,
  value:item
}))

下部：左侧显示挂号费，放置「按钮」（编辑）和「图标」（...）。

3.2 难点攻克一：右上角"状态三角标"

设计稿中，卡片右上角有一个倾斜的色块展示状态。在Web开发中，这通常是一个旋转了45度的矩形。

实现原理： "父相子绝" + Overflow: Hidden。

在卡片容器内（最外层），拖入一个「普通容器」

定位：Absolute (绝对定位)。
位置：Top: -32px, Right: 0。
尺寸：宽 60px, 高 60px。
旋转：在样式面板 -> 变换 (Transform) -> 旋转 (Rotate) 输入 45deg
层级 (Z-index)：10 (保证在最上层)。

bash 复制代码

:root {
  position: absolute;
  top: -32px;
  right: -32px;
  width: 60px;
  height: 60px;
  z-index: 10;
  transform: rotate(45deg);
  background: rgb(7, 193, 96);
}

需要把最外层容器的溢出设置成影藏，这样可以裁掉多余的部分

3.3 难点攻克二："更多操作"悬浮菜单

点击"..."图标，弹出一个菜单。这里最大的挑战是：如何控制只显示当前点击的那个卡片的菜单？

实现逻辑：

定义状态变量：

在页面变量中新增 activeMenuId (字符串，默认空)。用来记录当前哪个医生的菜单被打开了。

搭建菜单容器：

在"..."图标的同级（或者卡片容器的最外层），放入一个「普通容器」作为菜单。
定位：Absolute。
位置：根据图标位置调整，例如 Bottom: 40px, Right: 10px。
样式：白底，阴影，圆角 4px，Z-index: 100。
内容：放入"查看排班"、"停诊管理"、"删除档案"等文本或按钮。

bash 复制代码

:root {
  background: rgb(255, 255, 255);
  border-radius: 12px 12px;
  padding: 20px;
  position: absolute;
  right: 10px;
  bottom: 60px;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
}

交互逻辑 (点击事件)：

点击"..."图标 ：执行"赋值"操作，将 $page.dataset.state.activeMenuId 设为当前行的 item._id。
点击菜单项 ：执行对应逻辑后，将 activeMenuId 设为 null (关闭菜单)。
全局关闭 ：通常需要在页面最外层加一个透明遮罩，点击遮罩时清空 activeMenuId，或者简单的做法是点击菜单内按钮后就关闭。

条件展示 (核心)：

选中"菜单容器"，在**"条件展示"**中绑定：

javascript 复制代码

$page.dataset.state.activeMenuId === $w.item_listView1._id

解释：只有当页面变量里的 ID 等于当前这行数据的 ID 时，这个菜单才渲染出来。

4 最终效果

切换到卡片视图，可以看到医生的列表

点击三个点，弹出菜单

5. 总结

通过本篇教程，我们攻克了低代码UI开发中两个经典的CSS场景：

状态角标：利用绝对定位和旋转的技巧，实现了纯CSS的三角形标签。
上下文菜单 ：利用 activeMenuId 状态变量配合 Absolute 定位，实现了精准的菜单唤起与定位。

当然其实设置这么多，其实是有违低代码的初衷，通过拖拽就可以配置效果。但是没办法，有时候产品发展的过程中就会偏离目标，总是把困难留给客户，把方便留给自己。

这也是低代码产品在发展过程中左右摇摆的地方，他很难定位自己的客户，究竟是业务人员，企业的老板，还是专业的服务商。

互联网医院18：前端进阶——CSS“父相子绝”打造专业级卡片交互

目录

1. 前言：从"能用"到"好用"

2. 布局拆解：庖丁解牛

3. 核心实战：搭建步骤

3.1 基础骨架搭建

3.2 难点攻克一：右上角"状态三角标"

3.3 难点攻克二："更多操作"悬浮菜单

4 最终效果

5. 总结