按功能与层级组织 · 同一组件提供多框架代码,复制即用
三档并排,用边框粗细与阴影把推荐档抬起来,价格用等宽数字(tabular-nums)对齐——不加这条,¥0 和 ¥399 的小数点会错位,三张卡的价签看起来像没对齐。billing 参数让月付与年付共用同一套 DOM:年付只换数字与角标,不另做一套卡片。
一次性扫过的高光,不是循环呼吸。按钮底色固定、只有高光色跟着参数走——这两件事分开,才不会出现「拖了半天整颗按钮变色、那道光纹丝不动」的假参数。扫动用 ::before 的位移实现,不额外挂 DOM 节点,也不干扰 :active 的按压反馈。