用响应式变量 selectedValue 记录选中值，@click 赋值并 :class 动态绑定选中态，确保 item.value 与 selectedValue 类型一致（字符串/数字），避免对象比较；hover-class 和 touchstart 多端不兼容，应坚持数据驱动。
直接用 v-model 绑定选中值 + 动态 class 控制样式，就能实现真正跨端兼容的单选卡片高亮，不需要依赖第三方组件或 hack 深度选择器。
怎么给卡片加点击响应和选中态？
uni-app 的卡片本身没有默认点击反馈，必须手动管理激活状态。核心是：用一个响应式变量（比如 selectedValue）记录当前选中项的唯一标识（value），再通过 :class 绑定判断逻辑。
- 每个卡片用
@click触发赋值：selectedValue = item.value - 卡片 class 写成
:class="{ 'card-selected': selectedValue === item.value }" - 确保
item.value是字符串或数字类型，避免用对象直接比较（会始终为 false）
为什么不能只靠 hover-class 或 touchstart？
hover-class 在 H5 有效，但在小程序和 App 端基本不生效；touchstart/touchend 手动切 class 虽然能用，但容易漏掉取消逻辑、状态不同步，且在列表滚动或快速连点时出错率高。
- 单选场景下，选中态本质是「数据驱动」，不是「事件驱动」
- 用
v-model或响应式变量统一收口，才能保证多端行为一致 - 尤其在微信小程序里，
hover-class对view不生效，只对button有限支持
如何写一个干净的卡片样式？
重点控制两个状态：默认态和选中态。不要用 border + background 叠加，优先用 box-shadow 或渐变背景营造“浮起”感，视觉更轻量。
- 默认卡片：设置浅灰边框、圆角、内边距，文字颜色用
#333 - 选中态类
.card-selected：移除边框，改用box-shadow: 0 2px 8px rgba(66, 185, 131, .3)，背景色设为#42b983，文字反白 - 避免用
!important强覆盖，scoped 样式下用:deep(.card-selected)即可穿透
遇到 uView 的 u-radio 或 u-button 怎么办？
它们自带选中样式，但定制自由度低。如果只是想换颜色，直接传 selectedColor 属性最省事；如果要改布局或加图标，就得放弃封装，手写卡片结构。
-
<u-radio :name="item.value" :checked="selectedValue === item.value">{{ item.label }}</u-radio>—— 这种写法能用，但无法改内部结构 - 想加渐变背景、图标、副文案？老老实实写
view+@click+:class，别套组件 -
u-button的plain和disabled属性容易和选中逻辑冲突，慎用
最易被忽略的是 value 类型一致性——后端返回的 id 是字符串，但你代码里写了 selectedValue = 123（数字），结果永远不匹配。每次赋值前打个 log，确认两边类型对得上，比调样式花的时间少得多。
