/* ============================================================================ 会员中心 vip.php —— 这一页自己的 CSS2（原版是 Tailwind，那套类名在 IE11 / 360 兼容模式下一条都不生效，所以这类名一律不许留在标记上）。 逐块对应原版的哪一段（原版 DOM 见 /tmp/ref/vip_main.txt）： 外壳 src/app/vip/page.tsx → InfoLayout → .page-info（公共词汇表） 正文 div.space-y-6.pb-6 → .ui-stack（公共词汇表） 顶部 other-views.tsx 里 VipView 的 Banner → .vp-hero*（本节） 套餐 div.grid.grid-cols-1.md:grid-cols-3.gap-4 → .vp-plans（表格实现） 权益 div.rounded-2xl.border.bg-card.overflow-hidden > div.overflow-x-auto > table → .vp-tbl-card / .vp-tbl-* ★ 数值全部按原版编译产物 .next/static/css/3a69b6a727df9455.css 的类定义换算， 不凭 Tailwind 记忆写。这个项目改过 --radius: 12px，刻度是 rounded-md 10 / rounded-lg 12 / rounded-xl 16 / rounded-2xl 16（走 1rem）。 ★ flex → table、gap → border-spacing/margin、items-center → vertical-align 这类 换法都写在每条的注释里；IE 里 flex 的 gap 实测为 0，绝不能留着。 ========================================================================== */ /* ---- 顶部 Banner：relative rounded-2xl overflow-hidden p-8 text-white ---- bg-gradient-to-br from-[#2A1A06] via-[#5C3A0A] to-[#8B6914] （同一组值 style.css 的 .vipm-banner 也用过，是照着它抄的） */ .vp-hero { position: relative; padding: 32px; /* p-8 */ border-radius: 16px; /* rounded-2xl */ overflow: hidden; /* overflow-hidden：两团柔光要裁在卡片里 */ color: #FFFFFF; /* text-white */ background-image: linear-gradient(to bottom right, #2A1A06 0%, #5C3A0A 50%, #8B6914 100%); } /* 两团装饰柔光：absolute inset-0 opacity-20 套两个 blur-3xl 的实心圆。 IE 没有 filter:blur()（style.css 头注释有实测记录），整层又压着 opacity:.2， 隔着它看换成同尺寸的径向渐变差不到一两级色阶 —— 这个换法和 .vipm-glow（style.css 3341 行）完全一致，那边已经在探针里量过了。 ★ 圆点本身的位置尺寸照抄原版（w-40/h-40、w-60/h-60、top-10 left-20、bottom-0 right-20），不放大外框去补那 64px 的模糊半径 —— 模糊是「外扩」的，盒子的 rect 仍是原版那个，探针按节点比对时才对得上。 */ .vp-hero-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.2; } .vp-hero-blob-a { position: absolute; top: 40px; left: 80px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(245, 215, 110, 0.40) 0%, rgba(245, 215, 110, 0.16) 45%, rgba(245, 215, 110, 0) 72%); } .vp-hero-blob-b { position: absolute; bottom: 0; right: 80px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(245, 215, 110, 0.30) 0%, rgba(245, 215, 110, 0.12) 45%, rgba(245, 215, 110, 0) 72%); } /* ---- 一行两格：relative flex items-center gap-5 ---- gap-5 = 20 在 CSS2 里走「第二格 padding-left」；两格都 vertical-align:middle （flex 的 items-center）。第一格 80 定宽，table-layout:fixed 锁死列宽， 窄屏也不会被里面那行字挤变形。 */ .vp-hero-row { position: relative; display: table; width: 100%; table-layout: fixed; } /* ★ 金色方块**不能**直接做在 table-cell 上：格子的 height 只是下限，同一行里 .vp-hero-tx 比它高（108）时，这个格子会被拉到 108 —— 量出来就是 80×108， 原版（flex items-center + 写死 w-20 h-20）是 80×80，方块会明显变长。 所以格子里再套一层 80×80 的方块，纵向靠格子的 vertical-align: middle 居中。 */ .vp-hero-ico { display: table-cell; width: 80px; vertical-align: middle; text-align: center; } .vp-hero-icobox { position: relative; display: block; width: 80px; height: 80px; border-radius: 16px; /* rounded-2xl */ background-image: linear-gradient(to bottom right, #F5D76E 0%, #C9962C 100%); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* shadow-xl */ } /* 图标 40×40（w-10 h-10）正中方块：绝对定位钉 (20,20) —— 80 减 40 上下左右各 20。 ★ 不能用 padding-top: 20 那种写法：全局 box-sizing 是 border-box（style.css 53 行）， 40 的高度里含 20 的 padding，图标会被压成 40×20；也不能用 line-height 居中， 那要掺进字体的度量，两个引擎算出来的位置不一样。绝对定位是纯算术的。 */ .vp-hero-icobox svg { position: absolute; top: 20px; left: 20px; width: 40px; height: 40px; color: #FFFFFF; } .vp-hero-tx { display: table-cell; vertical-align: middle; padding-left: 20px; } /* gap-5 */ /* 标题那一行：flex items-center gap-2 mb-1 —— 里面只有 h1 一个孩子，那层 flex 等于没写，只有 mb-1 = 4 有效。 */ .vp-hero-h1r { margin-bottom: 4px; } /* h1：text-3xl(30/36) font-bold，颜色走全局的 .text-gradient-gold（style.css 3464 行， IE 拿纯色 #E8B84B，老 Chromium 走渐变）。 */ .vp-hero-h1 { font-size: 30px; line-height: 36px; font-weight: 700; } /* text-sm text-[#F5D76E]/80 mt-1 */ .vp-hero-sub { margin-top: 4px; font-size: 14px; line-height: 20px; color: rgba(245, 215, 110, 0.8); } /* 未登录/已登录都由这一块切换，下面是 PHP 独有的「当前会员」一行 （原版这个位置只有按钮，没有这一行）：mt-2 text-xs text-white/80 */ .vp-hero-cur { margin-top: 8px; font-size: 12px; line-height: 16px; color: rgba(255, 255, 255, 0.8); } /* 金色按钮（原版：Button + mt-3 + gap-1.5 + font-bold + 渐变）。 ★ vertical-align 必须改回 baseline：原版这颗是块级容器里的行内 flex，行盒正好 36； .ui-btn 全局写的是 middle（跟别的行内元素混排时要用），单摆一行时会把按钮中心 对到「基线 + 半个 x-height」，行盒变 39 往上，整块跟着往下沉 —— 同 .rn-form > .ui-btn。 */ .vp-hero-buy { margin-top: 12px; vertical-align: baseline; } /* 原版这颗按钮的图标间距是 gap-1.5 = 6，不是基类的 gap-2 = 8（twMerge 里 size 的 gap 被调用方的 gap-1.5 顶掉了），就在这一颗上改，别动公共的 .ui-btn-ic。 */ .vp-hero-buy .ui-btn-ic { margin-right: 6px; } /* ---- 金色按钮的两态（原版 bg-gradient-to-r from-[#F5D76E] to-[#E8B84B]， hover 换成 from-[#E8B84B] to-[#C9962C]，文字 #5C3A0A、粗体、shadow-xs）。 值同 style.css 的 .btn-vip / .vipm-pay 那一组。 ---- */ .vp-gold { background-image: linear-gradient(to right, #F5D76E 0%, #E8B84B 100%); color: #5C3A0A; font-weight: 700; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .vp-gold:hover { background-image: linear-gradient(to right, #E8B84B 0%, #C9962C 100%); color: #5C3A0A; } /* ---- 我的会员状态（.vp-mine）与说明卡（.vp-note）在这里，已删 ---- 这两块是本站自己加的、原版没有；原版这一页到「VIP会员特权」表就结束、直接进 页脚，多出来的两块让整页比原版高一截。删块时对应的规则一并清掉了， 不要再照原版 VIP 弹窗那张卡把它加回来。 留这条注释是防止以后有人以为「漏写了」又补一遍。 */ /* ---- 小节标题：h2 的 text-xl font-bold mb-4 flex items-center gap-2 ---- 图标 20×20（w-5 h-5 text-primary）。CSS2 里不用 flex：图标做成行内块， vertical-align:top 对齐的是**行盒顶**（= 内容盒顶，跟字体度量无关）， 居中落点 = (28 − 20) / 2 = 4 —— 同 .ui-btn-ic 的算法。 */ .vp-h2 { margin-bottom: 16px; font-size: 20px; line-height: 28px; font-weight: 700; color: #111C22; } .vp-h2-ic { display: inline-block; width: 20px; height: 20px; margin-right: 8px; /* gap-2 */ vertical-align: top; position: relative; top: 4px; color: #608DA4; /* text-primary */ } .vp-h2-ic svg { display: block; width: 20px; height: 20px; } /* ---- 套餐三列：grid grid-cols-1 md:grid-cols-3 gap-4 ---- 等分栏用表格（float + 百分比有亚像素缝，规范里禁的）；列间距 16 = gap-4， 走 border-spacing，首尾各留一条所以宽度补 32 再左移 16 —— 同 .rn-grid3 / .ui-grid3。 */ .vp-plans { display: table; table-layout: fixed; width: 100%; width: calc(100% + 32px); border-collapse: separate; border-spacing: 16px 0; margin-left: -16px; } .vp-plan { display: table-cell; width: 33.3333%; vertical-align: top; } /* 卡片本体（原版 relative flex flex-col rounded-2xl border-2 p-5 transition-all cursor-pointer）。表头那一层只是分栏，视觉全在里面这层： ★ position:relative 必须挂在这一层、不能挂在 table-cell 上 —— 全站没有一条 「table-cell + relative」的规则（.rn-/.alb-/.ui-* 都把 relative 放在格子里的 普通块上），这里是同一个套路：角标要压在卡片上边框外面 8px，锚点得是卡片自己。 ★ 卡片等高：三格的 border-box 高度都是 88(名字+价格) + F(最高的那档权益块) + 16 + 36(按钮) + 40(内边距) + 4(边框)，一模一样 —— 多出来的那段由 PHP 算成 按钮的 margin-top 补（等价原版的 mt-auto 吃掉自由空间），见 vip.php 里的注释。 */ .vp-plan-in { position: relative; padding: 20px; /* p-5 */ border: 2px solid transparent; /* border-2，颜色交给下面两态 */ border-radius: 16px; cursor: pointer; -ms-transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); } .vp-plan-off { border-color: #FFFFFF; background-color: #FAFCFD; } /* border-white bg-card */ /* 选中态：border-[#F5D76E] bg-[#F5D76E]/5，光晕用全局的 .gold-glow（JS 也认这个类名） */ .vp-plan-on { border-color: #F5D76E; background-color: rgba(245, 215, 110, 0.05); } /* 角标：absolute -top-2.5 left-1/2 -translate-x-1/2 px-3 py-0.5 text-[11px] font-bold rounded-full whitespace-nowrap。 ★ top:-10 是相对**包含块的内边距盒**算的，卡片 border-2 所以外沿落在卡片 边框盒上方 −8，和原版一致。 ★ Tailwind v4 的 -translate-x-1/2 写的是 `translate:-50%`（IE 没有这个属性）， 必须换成 transform + -ms- 前缀 —— 同 .ui-slider-th 的写法。 */ .vp-flag { position: absolute; top: -10px; left: 50%; -ms-transform: translateX(-50%); transform: translateX(-50%); padding: 2px 12px; /* py-0.5 px-3 */ border-radius: 9999px; font-size: 11px; line-height: 16.5px; font-weight: 700; white-space: nowrap; } /* 两套配色（同 style.css .vipm-tipbadge.pop / .gold）： 超值推荐 := bg-gradient-to-r from-[#5B8FA8] to-[#3A6B8A] text-white 其余 := from-[#F5D76E] to-[#E8B84B] text-[#5C3A0A] */ .vp-flag-blue { background-image: linear-gradient(to right, #5B8FA8 0%, #3A6B8A 100%); color: #FFFFFF; } .vp-flag-gold { background-image: linear-gradient(to right, #F5D76E 0%, #E8B84B 100%); color: #5C3A0A; } /* 套餐名：font-bold text-lg = 18/28 粗体 */ .vp-plan-n { font-size: 18px; line-height: 28px; font-weight: 700; color: #111C22; } /* 价格行：flex items-baseline gap-1 mt-2 mb-4。 CSS2 里**不能**用 flex：容器 font-size:0 把所有空白节点压掉，三个 span 仍按 基线对齐（行内的默认行为 = items-baseline），间距走各自的 margin-left:4（gap-1）。 font-size:0 之后容器自己那层「strut」也归零，行盒只由三个 span 撑 —— 最高的 是 30/36 那个，行盒正好 36、落点和原版一样（基线位置用 24/32 那组实测值验过）。 */ .vp-price { margin: 8px 0 16px; font-size: 0; } .vp-price-now { font-size: 30px; line-height: 36px; font-weight: 700; color: #C9962C; } /* text-3xl */ .vp-price-old { margin-left: 4px; font-size: 14px; line-height: 20px; color: #616B70; /* text-sm 灰 + 删除线 */ text-decoration: line-through; } .vp-price-per { margin-left: 4px; font-size: 12px; line-height: 16px; color: #616B70; } /* text-xs */ /* 权益清单：div.space-y-2 mb-4 —— 相邻兄弟补 8，最后一个不留（同 .ui-fld 那套） */ .vp-feats { margin-bottom: 16px; } .vp-feats > * + * { margin-top: 8px; } /* 单条：flex items-start gap-1.5 text-sm。 同样用 font-size:0 消空白，两个行内块并排：勾的圆点 16×16（w-4 h-4 rounded-full bg-[#F5D76E]/30 text-[#C9962C] text-[10px] mt-0.5）走 vertical-align:top 顶到行盒顶， 再加 mt-0.5 = 2；文字是 14/20，于是两块的顶差 2 —— 和原版 items-start + mt-0.5 同解。 ★ 勾的间距 6（gap-1.5）写在 margin-right；勾自己用 line-height:16 把那一行压进 16 的圆里（原版是 flex 居中，基线位置两边算出来一样）。 */ .vp-feat { font-size: 0; } .vp-feat-ic { display: inline-block; width: 16px; height: 16px; margin: 2px 6px 0 0; border-radius: 9999px; background-color: rgba(245, 215, 110, 0.3); color: #C9962C; font-size: 10px; line-height: 16px; text-align: center; vertical-align: top; } .vp-feat-t { font-size: 14px; line-height: 20px; color: rgba(17, 28, 34, 0.8); } /* text-foreground/80 */ /* 开通按钮：w-full mt-auto（mt-auto 在 CSS2 里没法表达，等高那段由 PHP 算成 margin-top 写在 style 上；这里只留 0 的兜底）。宽度写 100% ——