:root{ --bg:#F4F6FA; --panel:#FFFFFF; --panel2:#F8FAFC; --line:rgba(15,35,65,.08); --line2:rgba(15,35,65,.16); --txt:#17253D; --sub:#5D6B80; --faint:#8B98AC; --accent:#2563EB; --accent2:#1D4FD8; --gold:#B98A2F; --serif:Georgia,"Times New Roman","Songti SC","SimSun",serif; --mono:"SF Mono",Consolas,Menlo,monospace; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ background:linear-gradient(180deg,#F2F5FB 0%,#EEF2F9 50%,#F5F7FC 100%); color:var(--txt); font-family:-apple-system,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif; font-size:14px;line-height:1.6;min-height:100vh; } .wrap{position:relative;z-index:1} /* ===== 头部深色科技面板（装饰层） ===== */ .hero{ position:relative;overflow:hidden;text-align:center; padding:84px 24px 96px; background: radial-gradient(ellipse 75% 95% at 50% 118%,rgba(56,132,255,.30),transparent 62%), radial-gradient(ellipse 42% 55% at 88% -12%,rgba(56,189,248,.14),transparent 60%), radial-gradient(ellipse 38% 50% at 8% 8%,rgba(37,99,235,.14),transparent 60%), linear-gradient(180deg,#0A1730 0%,#10254A 58%,#0D1F3E 100%); color:#fff; } .hero .deco{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden} .hero .deco svg{position:absolute} .hero .hero-inner{position:relative;z-index:2} .hero .deco .bg-grid{ position:absolute;left:-25%;right:-25%;bottom:-2%;height:56%; background-image: linear-gradient(rgba(126,176,255,.16) 1px,transparent 1px), linear-gradient(90deg,rgba(126,176,255,.16) 1px,transparent 1px); background-size:50px 50px; transform:perspective(620px) rotateX(60deg); transform-origin:50% 100%; -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.9) 68%,rgba(0,0,0,.9) 100%); mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.9) 68%,rgba(0,0,0,.9) 100%); } .hero .deco .bg-beam{ position:absolute;top:-40%;left:-60%;width:220%;height:180%; background:linear-gradient(112deg,transparent 44%,rgba(126,176,255,.10) 47%,rgba(56,189,248,.14) 50%,rgba(126,176,255,.10) 53%,transparent 56%); animation:beam 15s ease-in-out infinite; } @keyframes beam{0%,100%{transform:translateX(-5%)}50%{transform:translateX(5%)}} .hero .deco .bg-horizon{ position:absolute;left:0;right:0;bottom:30%;height:2px; background:linear-gradient(90deg,transparent,rgba(126,176,255,.55) 30%,rgba(56,189,248,.7) 50%,rgba(126,176,255,.55) 70%,transparent); filter:blur(1px);opacity:.6; } .hero .deco .halo{ position:absolute;top:-150px;left:50%;transform:translateX(-50%); width:820px;height:430px;border-radius:50%; background:radial-gradient(ellipse at center,rgba(56,132,255,.24),rgba(56,189,248,.10) 55%,transparent 72%); filter:blur(8px); } .hero .deco .node{animation:pulse 3.6s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}} .hero .deco .flow{stroke-dasharray:14 120;animation:flow 6s linear infinite} @keyframes flow{from{stroke-dashoffset:0}to{stroke-dashoffset:-268}} /* ===== 顶栏 ===== */ .topbar{ display:flex;align-items:center;justify-content:space-between; padding:16px 32px;border-bottom:1px solid rgba(126,176,255,.16); /* S-03：backdrop-filter 需 Safari18? 实为 Safari9+/Chrome76+ 但微信 X5/UC 部分内核不支持， 不支持时半透明底会让文字对比度不足。用 @supports 只在支持时叠加毛玻璃 + 稍低不透明度， 不支持时保持原 .92 实色（文字可读）。加 -webkit- 前缀覆盖旧 WebKit。 */ position:sticky;top:0;background:rgba(10,23,48,.92);z-index:20; } @supports ((backdrop-filter:blur(12px)) or (-webkit-backdrop-filter:blur(12px))){ .topbar{background:rgba(10,23,48,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)} } .logo{display:flex;align-items:center;gap:10px} /* 2026-09-07 品牌升级：主站白色logo（122×37 PNG透明底，深色顶栏直用）替代字符占位方块 */ .logo-img{height:30px;width:auto;display:block} .logo-mark{ width:30px;height:30px;border-radius:8px;display:grid;place-items:center; background:linear-gradient(135deg,var(--accent),#2A5DB0); font-weight:700;font-size:13px;color:#fff;letter-spacing:0; } .logo-name{font-weight:700;font-size:15px;color:#fff} .logo-name span{color:rgba(196,214,238,.75);font-weight:400;font-size:12px;margin-left:8px;letter-spacing:.14em} .topbar-note{font-size:12px;color:rgba(160,185,220,.7);letter-spacing:.08em} /* ===== 名片库视图 ===== */ .eyebrow{ font-size:12px;letter-spacing:.32em;color:#9EC3FF; text-transform:uppercase;margin-bottom:14px;font-weight:600; } .hero h1{font-family:var(--serif);font-size:42px;font-weight:700;letter-spacing:.08em;color:#fff;text-shadow:0 2px 24px rgba(56,132,255,.35)} .hero .slogan{font-family:var(--serif);font-size:22px;color:#E9CE8F;letter-spacing:.22em;margin-top:18px;font-weight:600} .hero .herosub{color:rgba(196,214,238,.85);margin-top:12px;font-size:13.5px} .hero-count{ margin-top:16px;font-size:14px;color:rgba(196,214,238,.7); display:flex;align-items:center;justify-content:center;gap:8px; } .hero-count b{ font-family:var(--mono);font-size:20px;font-weight:700; color:#F59E0B;letter-spacing:.02em; } .searchbox{ max-width:660px;margin:34px auto 0;display:flex;gap:10px; } .searchbox input{ flex:1;background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.25);border-radius:10px; padding:14px 18px;color:var(--txt);font-size:15px;outline:none;transition:all .2s; } .searchbox input:focus{border-color:rgba(255,255,255,.6);box-shadow:0 0 0 3px rgba(255,255,255,.15)} .searchbox input::placeholder{color:var(--sub)} .searchbox input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.28)} .searchbox button{ background:linear-gradient(135deg,#3B82F6,#1D4FD8);color:#fff;border:none;border-radius:10px; padding:0 28px;font-size:15px;font-weight:600;cursor:pointer;transition:.2s;box-shadow:0 6px 18px rgba(37,99,235,.4); } .searchbox button:hover{filter:brightness(1.08)} .hot{margin-top:16px;font-size:12.5px;color:rgba(160,185,220,.8)} .hot a{color:#9EC3FF;cursor:pointer;margin-left:10px;text-decoration:none;transition:color .15s} .hot a:hover{color:#fff;text-decoration:underline} .hot a:hover{color:#fff;text-decoration:underline} /* ===== 筛选区 ===== */ .filters{max-width:1080px;margin:0 auto;padding:26px 24px 6px;border-top:1px solid var(--line)} .fgroup{display:flex;gap:16px;padding:9px 0;align-items:flex-start} .flabel{ flex:0 0 88px;font-size:12px;color:var(--sub);letter-spacing:.18em; padding-top:6px;text-transform:uppercase; } .fchips{flex:1;display:flex;flex-wrap:wrap;gap:8px} .fchips.collapsed{overflow:hidden;max-height:74px;transition:max-height .3s ease} .fchips.expanded{max-height:2000px;transition:max-height .4s ease} .chip{ border:1px solid var(--line2);background:transparent;color:var(--sub); border-radius:999px;padding:5px 14px;font-size:12.5px;cursor:pointer;transition:.15s; } .chip:hover{border-color:var(--accent);color:var(--accent);background:rgba(37,99,235,.04)} .chip.on{background:rgba(37,99,235,.16);border-color:var(--accent);color:var(--accent2)} .fmore{ display:inline-flex;align-items:center;gap:4px; background:none;border:none;color:var(--accent);font-size:12px; cursor:pointer;padding:4px 0;margin-top:4px;letter-spacing:.02em;transition:color .15s; } .fmore:hover{color:var(--accent2)} .fmore .arrow{display:inline-block;transition:transform .25s;font-size:10px} .fmore.open .arrow{transform:rotate(180deg)} /* ===== 结果区 ===== */ .results{max-width:1080px;margin:0 auto;padding:20px 24px 70px} .rhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px} .rcount{font-size:13px;color:var(--sub)} .rcount b{color:var(--txt);font-family:var(--mono);font-size:15px} .rclear{ display:none;background:none;border:none;color:var(--accent2);font-size:12.5px; cursor:pointer;letter-spacing:.05em; } .rclear.show{display:block} .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px} /* 2026-09-28 T-02：300px 下限在 320px 屏会把 track 撑成 300px 而容器只有 272px， 页级横向溢出 4px。min(300px,100%) 让下限收到可用宽度；@supports 分支保证 不支持 min() 的老内核维持原 300px 行为不变。桌面 100%>>300px，结果逐像素相同。 */ @supports (width: min(1px, 100%)){ .grid{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))} } .card{ position:relative;overflow:hidden; background:var(--panel);border:1px solid var(--line); border-radius:14px;padding:20px;cursor:pointer;transition:all .2s; } .card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 10px 34px rgba(37,99,235,.14)} .card-top{display:flex;gap:13px;align-items:center;margin-bottom:14px} .avatar{ width:48px;height:48px;border-radius:50%;flex:0 0 48px; background:linear-gradient(135deg,#274B8F,#4F8EF7); display:grid;place-items:center;font-family:var(--serif); font-size:20px;color:#fff;font-weight:700; } /* 2026-09-06 缺陷修复：真实头像图受容器约束（基准页纯文字头像无此规则；接入真实API后img原始尺寸撑爆48px圆） */ /* 2026-09-07 补充：grid place-items:center 下 height:100% 解析为 auto（按原图比例出高→48×72椭圆），加 aspect-ratio:1 强制正圆 */ /* 2026-09-28 S-02a：aspect-ratio 需 Safari15+/Chrome88+。旧内核下 height:100% 仍解析为 auto， 故把 img 脱出 grid 流（position:absolute），height:100% 改为按 .avatar 定位容器的 padding box 解析—— 所有内核下都拿得到确定高度，aspect-ratio 降为增强声明。.avatar 已补 position:relative;overflow:hidden。 */ .avatar{position:relative;overflow:hidden} .card .avatar img{position:absolute;top:0;left:0;width:100%;height:100%;aspect-ratio:1;object-fit:cover;object-position:50% 22%;border-radius:50%;display:block} .cname{font-family:var(--serif);font-size:18px;font-weight:700;letter-spacing:.02em} .cfirm{font-size:12px;color:var(--sub);margin-top:2px} .badge{ position:absolute;top:16px;right:16px; font-size:10.5px;color:var(--gold); border:1px solid rgba(185,138,47,.5);border-radius:4px; padding:2px 7px;letter-spacing:.08em; background:transparent;z-index:10;pointer-events:none; } .badge.unjoined{ color:var(--sub);border-color:rgba(138,160,192,.5); } /* 07文档 P-2A：列表卡片「毕业院校」小字行（擅长领域行上方，与详情页 📚 教育背景呼应） */ .cedu{font-size:12px;color:var(--sub);margin:10px 0 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ctags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;min-height:24px} .tag{ font-size:11.5px;color:var(--sub);border:1px solid var(--line); border-radius:6px;padding:3px 10px;transition:all .15s; } .tag:hover{border-color:var(--accent);color:var(--accent)} .cstats{display:grid;grid-template-columns:1fr 1fr 1fr;border-top:1px solid var(--line);padding-top:14px;margin-top:14px} .cstats .n{font-family:var(--mono);font-size:18px;font-weight:600;color:var(--txt)} .cstats .n em{font-style:normal;font-size:12px;color:var(--sub);margin-left:2px} .cstats .l{font-size:11px;color:var(--faint);margin-top:2px} .cstats .n{font-family:var(--mono);font-size:19px;font-weight:600;color:var(--txt)} .cstats .n em{font-style:normal;font-size:11px;color:var(--sub);margin-left:2px} .cstats .l{font-size:11px;color:var(--sub);margin-top:2px} .empty{display:none;text-align:center;padding:80px 24px;color:var(--sub)} .empty .ico{font-size:48px;margin-bottom:16px;opacity:.5} .empty button{margin-top:20px;padding:10px 24px;background:var(--accent);color:#fff;border:none;border-radius:8px;cursor:pointer;transition:background .15s} .empty button:hover{background:var(--accent2)} .empty.show{display:block} .empty .ico{font-size:34px;margin-bottom:12px;opacity:.55} .empty button{ margin-top:18px;background:none;border:1px solid var(--accent);color:var(--accent2); border-radius:8px;padding:8px 26px;font-size:13.5px;cursor:pointer; } .empty button:hover{background:rgba(37,99,235,.12)} /* ===== 个人展示视图 ===== */ .profile{max-width:960px;margin:0 auto;padding:34px 24px 80px;display:none} .profile.show{display:block} .backbtn{ background:none;border:1px solid var(--line2);color:var(--sub);border-radius:8px; padding:7px 16px;font-size:13px;cursor:pointer;transition:.15s;margin-bottom:26px; } .backbtn:hover{border-color:var(--accent);color:var(--txt)} .phead{ position:relative;overflow:hidden; background:var(--panel);border:1px solid var(--line);border-radius:16px; padding:30px;display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap; } /* 等级徽章 - 简约角标效果 */ .level-badge { position: absolute; top: 10px; left: 10px; padding: 3px 10px; font-size: 10px; font-weight: 600; color: #fff; letter-spacing: .05em; background: linear-gradient(135deg, #D97706, #F59E0B); border-radius: 4px; transform: rotate(-5deg); z-index: 10; pointer-events: none; box-shadow: 0 1px 4px rgba(0,0,0,.15); } .level-10 { background: linear-gradient(135deg, #D97706, #F59E0B); } /* 严选-橙金色 */ .level-20 { background: linear-gradient(135deg, #B8860B, #FFD700); } /* 精选-金色 */ .level-30 { background: linear-gradient(135deg, #2563EB, #3B82F6); } /* 优选-蓝色 */ /* 头像容器需要相对定位 */ .pavatar{position:relative;overflow:hidden; width:86px;height:86px;border-radius:50%;flex:0 0 86px; background:linear-gradient(135deg,#274B8F,#4F8EF7); display:grid;place-items:center;font-family:var(--serif);font-size:36px;color:#fff;font-weight:700; } /* 2026-09-28 S-02b：同 S-02a —— img 脱出 grid 流，height:100% 按 .pavatar padding box 解析。 .pavatar 本身已 position:relative;overflow:hidden（:254），无需再改。 */ .pavatar img{position:absolute;top:0;left:0;width:100%;height:100%;aspect-ratio:1;object-fit:cover;object-position:50% 22%;border-radius:50%;display:block} .pinfo{flex:1;min-width:240px} .pname{font-family:var(--serif);font-size:30px;font-weight:700;letter-spacing:.02em} .ptitle{color:var(--sub);font-size:13.5px;margin-top:6px} .phonors{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .pindrow{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:12px} .pindrow .pindlabel{font-size:12px;color:var(--sub);letter-spacing:.06em} .pindrow .pind{ font-size:12px;color:var(--accent2);background:rgba(37,99,235,.09); border:1px solid rgba(37,99,235,.28);border-radius:999px;padding:3px 12px; } .honor{ font-size:11.5px;color:var(--gold);border:1px solid rgba(185,138,47,.45); border-radius:5px;padding:3px 10px;letter-spacing:.04em;background:rgba(185,138,47,.07); } .pactions{display:flex;flex-direction:column;gap:9px;min-width:170px} .btn{ border-radius:9px;padding:11px 18px;font-size:13.5px;cursor:pointer; transition:.18s;text-align:center;border:1px solid transparent; } .btn-primary{background:var(--accent);color:#fff;font-weight:600} .btn-primary:hover{background:var(--accent2)} .btn-ghost{background:none;border-color:var(--line2);color:var(--txt)} .btn-ghost:hover{border-color:var(--accent)} .statband{ display:grid;grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));gap:1px;margin-top:18px; background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden; } .statband .cell{background:var(--panel2);padding:20px 10px;text-align:center} .statband .v{font-family:var(--mono);font-size:26px;font-weight:600} .statband .v em{font-style:normal;font-size:12px;color:var(--sub)} .statband .k{font-size:12px;color:var(--sub);margin-top:4px;letter-spacing:.1em} .section{margin-top:48px} .section .eyebrow{margin-bottom:6px} .section h2{font-family:var(--serif);font-size:22px;font-weight:700;margin-bottom:18px} .panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:32px} .intro p{color:var(--txt);font-size:15px;line-height:1.8} .intro .motto{ margin-top:24px;padding:16px 20px; background:linear-gradient(135deg,rgba(37,99,235,.04),rgba(37,99,235,.08)); border-left:3px solid var(--accent);border-radius:0 8px 8px 0; font-family:var(--serif);font-size:15px;font-style:italic; color:var(--txt);letter-spacing:.03em;line-height:1.7; } /* 亮点列表样式 */ .intro-highlights{ margin:24px 0 0;padding:0;list-style:none; border-top:1px solid var(--line);padding-top:20px; } .intro-highlights li{ position:relative;padding-left:16px;margin-bottom:12px; font-size:14px;line-height:1.7;color:var(--txt); } .intro-highlights li::before{ content:'';position:absolute;left:0;top:8px; width:6px;height:6px;border-radius:50%;background:var(--accent); } .casetabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px} .casetab{ border:1px solid var(--line2);background:none;color:var(--sub); border-radius:6px;padding:5px 14px;font-size:12px;font-weight:500; cursor:pointer;transition:.15s; } .casetab.on{background:rgba(37,99,235,.16);border-color:var(--accent);color:var(--accent2)} .caseitem{ border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin-bottom:10px; display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap; } .caseyear{font-family:var(--mono);color:var(--accent2);font-size:13px;flex:0 0 46px;padding-top:2px} .casebody{flex:1;min-width:220px} .casename{font-weight:600;font-size:14px} .casemeta{color:var(--sub);font-size:12.5px;margin-top:4px} .case-level{font-size:10.5px;color:var(--gold);border:1px solid rgba(185,138,47,.4);border-radius:4px;padding:1px 6px;margin-left:8px;vertical-align:1px} .case-verdict{color:var(--accent2)} .case-amount{color:#2e7d32} .caseresult{ font-size:12px;color:var(--accent2);background:rgba(37,99,235,.1); border-radius:5px;padding:2px 9px;margin-left:auto;align-self:center;white-space:nowrap; } /* 2026-09-28 G1 案件业绩：按 md 领域（lawyer_case.case_domain）分组，组内复用 .caseitem */ .casenote{color:var(--sub);font-size:12.5px;margin:0 0 18px;line-height:1.7} .casegroup{margin-bottom:22px} .casegroup-h{ display:flex;align-items:baseline;gap:10px; font-size:15px;font-weight:600;color:var(--txt); margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line); } /* 2026-09-30 用户反馈：专业背景内「教育背景」标题紧跟执业经历末行太贴，补呼吸间距 （仅命中紧跟在时间线列表之后的组标题，即教育背景；不影响案件业绩分组标题） */ .timeline + .casegroup-h{margin-top:26px;} .casegroup-n{ font-family:var(--mono);font-size:11.5px;font-weight:500;color:var(--accent2); background:rgba(37,99,235,.1);border-radius:5px;padding:1px 8px; } .timeline{list-style:none;padding:0;margin:0} .timeline li{ position:relative;padding:0 0 24px 24px; border-left:2px solid var(--line); } .timeline li:last-child{ border-left-color:transparent;padding-bottom:0; } .timeline li::before{ content:'';position:absolute;left:-5px;top:4px; width:8px;height:8px;border-radius:50%; background:var(--accent);border:2px solid var(--panel); } .timeline li:last-child{border-bottom:none} .tyear{font-family:var(--mono);font-size:12px;color:var(--accent2);margin-bottom:8px;letter-spacing:.05em} .ttext{font-size:14px;color:var(--txt);line-height:1.6} .ttext .tdesc{font-size:13px;color:var(--sub);margin-top:6px;line-height:1.5} /* 荣誉奖项 - 紧凑标签式 */ .honors-list{display:flex;flex-direction:column;gap:0} .honor-item{ display:flex;gap:12px;align-items:flex-start; padding:12px 0;border-bottom:1px dashed var(--line,#e3e9f4); } .honor-item:last-child{border-bottom:none} .honor-tag{ font-size:10.5px;color:var(--gold,#b98a2f);background:rgba(185,138,47,.08); border:1px solid rgba(185,138,47,.2);border-radius:6px; padding:3px 10px;white-space:nowrap;flex:none;margin-top:1px; } .honor-text{flex:1;font-size:13.5px;color:var(--txt,#1a2a42);line-height:1.6} .honor-org{font-size:12px;color:var(--sub,#5a6d8f);margin-top:2px} .honor-desc{font-size:12.5px;color:var(--sub,#5a6d8f);margin-top:3px;line-height:1.55} /* 2026-09-28 G2：荣誉年份（含 D2 区间/枚举由 description 承载时的补充时间） */ .honor-time{font-family:var(--mono);font-size:11px;color:var(--accent2,#8aa0c0);margin-top:3px;letter-spacing:.04em} /* ===== 著述成果 ===== */ .pub-list{display:flex;flex-direction:column;gap:10px} .pub-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid var(--line);border-radius:10px;transition:.15s} .pub-item:hover{border-color:var(--accent)} .book-item{flex-wrap:wrap;align-items:flex-start} .pub-cover{width:48px;height:48px;border-radius:6px;object-fit:cover;flex:none} .pub-item-body{flex:1;min-width:0} .pub-tag{font-size:10.5px;color:#fff;background:var(--accent);border-radius:4px;padding:2px 8px;white-space:nowrap;flex:none} .pub-tag.book{background:var(--gold)} .pub-title{flex:1;font-size:13.5px;color:var(--txt);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pub-link{font-size:12px;color:var(--accent);text-decoration:none;white-space:nowrap;flex:none} .pub-link:hover{text-decoration:underline} .pub-link.none{color:var(--faint);cursor:default} .pub-empty{font-size:12.5px;color:var(--faint);padding:10px 0;text-align:center} .bars{display:flex;align-items:flex-end;gap:14px;height:160px;padding:10px 6px 0} .bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end} .bar .bval{font-family:var(--mono);font-size:12px;color:var(--accent2)} .bar .bcol{ width:70%;max-width:46px;border-radius:5px 5px 0 0; background:linear-gradient(180deg,var(--accent),#2A5DB0); } .bar .blab{font-size:11px;color:var(--sub)} .reviews{display:grid;grid-template-columns:1fr 1fr;gap:16px} .review-item{ padding:20px;background:var(--panel2); border:1px solid var(--line);border-radius:12px; transition:border-color .15s; } .review-item:hover{border-color:var(--accent)} .review-content{ font-size:14px;color:var(--txt);line-height:1.7; margin-bottom:12px;font-style:italic; } .review-content::before{content:"\201C";font-size:24px;color:var(--accent);margin-right:4px} .review-meta{font-size:12px;color:var(--sub);display:flex;align-items:center;gap:8px} .review-meta .review-author{font-weight:600;color:var(--txt)} .review-meta .review-company{color:var(--sub)} .review-stars{color:#F59E0B;font-size:12px;letter-spacing:2px} .review{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px} .review p{color:#46536B;font-size:13px;line-height:1.8} .review .rfrom{margin-top:12px;color:var(--sub);font-size:12px} .cta{ margin-top:52px;text-align:center; background:linear-gradient(135deg,#12234A,#0E3A8F); border-radius:16px;padding:40px 32px; } .cta h3{color:#fff;font-size:20px;margin-bottom:10px} .cta p{color:rgba(255,255,255,.8);font-size:14px;line-height:1.7;margin-bottom:24px} .cta .btn{background:#fff;color:#2563EB;font-weight:600;border:none} .cta .btn:hover{background:#E0EAFF} .cta h3{font-family:var(--serif);font-size:20px;margin-bottom:8px} .cta p{color:var(--sub);font-size:13px;margin-bottom:18px} footer{ border-top:1px solid var(--line);padding:32px 24px;text-align:center; background:var(--panel2);color:var(--sub);font-size:13px;letter-spacing:.04em;line-height:1.9; } .toast{ position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(20px); background:#1B2740;border:1px solid var(--accent);color:#FFFFFF; padding:11px 24px;border-radius:10px;font-size:13.5px;opacity:0; transition:.25s;pointer-events:none;z-index:99;box-shadow:0 8px 30px rgba(0,0,0,.4); } .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} .hidden{display:none} /* ===== 入驻入口 ===== */ .hero-join{margin-top:28px;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap} .hj-text{color:rgba(196,214,238,.85);font-size:13px;letter-spacing:.04em} .hero-join button{ background:linear-gradient(135deg,#DDB672,#B98A2F);color:#1A1206;border:none;border-radius:999px; padding:10px 28px;font-size:14px;font-weight:600;cursor:pointer;letter-spacing:.08em; box-shadow:0 6px 20px rgba(185,138,47,.42);transition:.2s; } .hero-join button:hover{filter:brightness(1.08);transform:translateY(-1px)} .topbar-right{display:flex;align-items:center;gap:14px} .topbar-join{ border:1px solid rgba(221,182,114,.6);color:#E9CE8F;background:rgba(185,138,47,.12); border-radius:999px;padding:6px 16px;font-size:12.5px;cursor:pointer;transition:.15s;letter-spacing:.05em; } .topbar-join:hover{background:rgba(185,138,47,.26)} /* ===== 律师入驻页 ===== */ .join{max-width:880px;margin:0 auto;padding:34px 24px 80px;display:none} .join.show{display:block} .join-hero{text-align:center;margin-bottom:34px} .join-title{font-family:var(--serif);font-size:30px;font-weight:700;margin-bottom:10px} .join-hero p{color:var(--sub);font-size:13.5px} .form-panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px;margin-bottom:18px} .form-group-title{font-family:var(--serif);font-size:17px;font-weight:700;margin-bottom:4px} .form-group-sub{font-size:12px;color:var(--sub);margin-bottom:18px} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px} .field{display:flex;flex-direction:column} .field.full{grid-column:1/-1} .field label{font-size:12.5px;color:var(--sub);margin-bottom:6px;letter-spacing:.02em} .req{color:#D9534F} .field input,.field select,.field textarea{ border:1px solid var(--line2);border-radius:8px;padding:10px 12px;font-size:13.5px; color:var(--txt);background:#fff;outline:none;transition:.15s;font-family:inherit; } .field textarea{resize:vertical;min-height:76px} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.15)} .field.err input,.field.err select,.field.err textarea{border-color:#D9534F;background:rgba(217,83,79,.04)} .field.err .chip{border-color:rgba(217,83,79,.4)} .ferr{display:none;font-size:11.5px;color:#D9534F;margin-top:5px} .field.err .ferr{display:block} .fchips2{display:flex;flex-wrap:wrap;gap:8px} .submit-row{text-align:center;margin-top:6px} .join-submit{ background:linear-gradient(135deg,#3B82F6,#1D4FD8);color:#fff;border:none;border-radius:10px; padding:13px 60px;font-size:15px;font-weight:600;cursor:pointer;letter-spacing:.06em; box-shadow:0 6px 18px rgba(37,99,235,.35);transition:.2s; } .join-submit:hover{filter:brightness(1.08)} .join-note{text-align:center;color:var(--faint);font-size:11.5px;margin-top:14px;letter-spacing:.03em} .join-success{text-align:center;padding:56px 0 20px} .success-icon{ width:74px;height:74px;border-radius:50%;margin:0 auto 22px; background:linear-gradient(135deg,#3B82F6,#1D4FD8);color:#fff;font-size:36px; display:grid;place-items:center;box-shadow:0 10px 30px rgba(37,99,235,.35); } .join-success h3{font-family:var(--serif);font-size:24px;margin-bottom:10px} .join-success p{color:var(--sub);font-size:13.5px;max-width:480px;margin:0 auto 28px;line-height:1.9} /* ===== 点赞条 ===== */ .likebar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 26px;margin:22px 0} .like-tip{font-size:14px;color:var(--txt)} .like-tip em{font-style:normal;color:var(--sub);font-size:12.5px;margin-left:8px} .likebtn{display:inline-flex;align-items:center;gap:10px;padding:12px 30px;border-radius:999px;border:1.5px solid var(--accent); background:#EFF4FE;color:var(--accent);font-size:14.5px;font-weight:600;cursor:pointer;transition:all .18s;font-family:inherit} .likebtn .thumb{font-size:17px} .likebtn b{font-family:var(--mono);font-weight:600;font-size:15px} .likebtn:hover{background:#E0EAFF;transform:translateY(-1px)} .likebtn.on{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 8px 20px -8px rgba(37,99,235,.55)} /* 收藏按钮（V2.1）：与点赞并列，金色系区分 */ .like-ops{display:inline-flex;align-items:center;gap:12px;flex:none} .collectbtn{display:inline-flex;align-items:center;gap:10px;padding:12px 26px;border-radius:999px;border:1.5px solid #E8A23D; background:#FDF6E9;color:#B97E14;font-size:14.5px;font-weight:600;cursor:pointer;transition:all .18s;font-family:inherit} .collectbtn .star{font-size:16px;line-height:1} .collectbtn b{font-family:var(--mono);font-weight:600;font-size:15px} .collectbtn:hover{background:#FAECD2;transform:translateY(-1px)} .collectbtn.on{background:#F0A32B;border-color:#F0A32B;color:#fff;box-shadow:0 8px 20px -8px rgba(240,163,43,.55)} .collectbtn:disabled,.likebtn:disabled{opacity:.6;cursor:wait;transform:none} /* ===== 浏览痕迹面板（小程序端视角） ===== */ .trace{max-width:1000px;margin:0 auto;padding:26px 32px 80px;display:none} .trace.show{display:block} .trace-head{background:linear-gradient(135deg,#12234A 0%,#0E3A8F 100%);border-radius:16px;padding:30px 34px;position:relative;overflow:hidden} .trace-head::before{content:"";position:absolute;top:-60px;right:-60px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(56,189,248,.28),transparent 70%)} .trace-head .who{color:#9DB6E8;font-size:12.5px;letter-spacing:.18em} .trace-head h1{font-family:var(--serif);color:#fff;font-size:26px;margin:8px 0 6px;position:relative} .trace-head p{color:#B8C8E8;font-size:13px;position:relative} .trace-note{font-size:12px;color:var(--sub);margin:14px 2px 0} .trace-ov{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:24px 0 8px} .tov{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px 18px;text-align:center;box-shadow:var(--shadow)} .tov .v{font-family:var(--mono);font-size:27px;font-weight:700;color:var(--accent)} .tov .k{color:var(--sub);font-size:12.5px;margin-top:7px} .trace .panel{margin-top:24px} .trace h2{font-family:var(--serif);font-size:19px;color:var(--txt);margin-bottom:14px} .table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px} .trace-table{width:100%;border-collapse:collapse;background:var(--panel);min-width:720px} .trace-table th{background:linear-gradient(135deg,#12234A,#0E3A8F);color:#EAF0FF;padding:13px 16px;font-size:12.5px;text-align:left;font-weight:600;white-space:nowrap} .trace-table td{padding:14px 16px;border-top:1px solid var(--line);font-size:13px;color:var(--txt2);vertical-align:middle} .trace-table tr:hover td{background:#F4F8FF} /* C-03 同类泄漏：裸 .vname 曾全局 nowrap，把视频列表卡片标题压成单行截断（2026-10-14 反馈）。 限定到 .trace 作用域后，视频卡片 .vname（:756）恢复两行截断。 */ .trace .vname{color:var(--txt);font-weight:600;white-space:nowrap} .vtime{font-family:var(--mono);font-size:12.5px;color:var(--sub);white-space:nowrap} .vdur{font-family:var(--mono);color:var(--accent);font-weight:600;white-space:nowrap} .sectag{display:inline-block;font-size:11.5px;padding:3px 9px;border-radius:999px;background:#EFF4FE;border:1px solid var(--line2);color:var(--accent);margin:2px 4px 2px 0;white-space:nowrap} .heat-row{display:flex;align-items:center;gap:14px;padding:10px 0} .heat-name{width:92px;font-size:13.5px;color:var(--txt2);flex:none} .heat-track{flex:1;height:11px;border-radius:999px;background:#EDF1F8;overflow:hidden} .heat-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent3))} .heat-num{width:70px;text-align:right;font-family:var(--mono);font-size:13px;color:var(--txt);flex:none} /* ===== 预约 / 分享弹窗 ===== */ .modal-mask{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(10,23,48,.55);z-index:60;display:none;align-items:center;justify-content:center;padding:20px} .modal-mask.show{display:flex} .modal{background:var(--panel);border-radius:16px;max-width:480px;width:100%;max-height:88vh;overflow-y:auto;padding:28px;box-shadow:0 20px 60px rgba(0,0,0,.25);position:relative} .modal-title{font-family:var(--serif);font-size:20px;margin-bottom:6px} .modal-sub{font-size:12.5px;color:var(--sub);margin-bottom:18px} .modal-close{position:absolute;top:14px;right:14px;background:none;border:none;font-size:18px;color:var(--sub);cursor:pointer;padding:6px;line-height:1} .m-field{margin-bottom:14px} .m-field label{display:block;font-size:12.5px;color:var(--sub);margin-bottom:6px} .m-field input,.m-field select,.m-field textarea{width:100%;border:1px solid var(--line2);border-radius:8px;padding:9px 12px;font-size:13.5px;font-family:inherit;outline:none;background:#fff;color:var(--txt)} .m-field textarea{min-height:60px;resize:vertical} .m-field.err input,.m-field.err select{border-color:#D9534F} .m-err{display:none;color:#D9534F;font-size:11.5px;margin-top:4px} .m-field.err .m-err{display:block} .slots{display:flex;flex-wrap:wrap;gap:8px} .slot{border:1px solid var(--line2);background:#fff;border-radius:8px;padding:6px 14px;font-size:12.5px;cursor:pointer;color:var(--sub)} .slot.on{background:rgba(37,99,235,.14);border-color:var(--accent);color:var(--accent);font-weight:600} .share-qr{display:grid;grid-template-columns:repeat(21,1fr);gap:1px;width:190px;height:190px;margin:6px auto 14px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:10px} .share-qr i{background:transparent} .share-qr i.d{background:var(--txt)} .share-name{text-align:center;font-family:var(--serif);font-size:16px;font-weight:700;margin-bottom:4px} .share-sub{text-align:center;font-size:12px;color:var(--sub);margin-bottom:16px} .share-btns{display:flex;gap:10px} .share-btns .btn{flex:1} /* ===== 视频上传区域 ===== */ .video-upload-area { display: flex; align-items: center; gap: 8px; margin-left: 8px; } .video-preview { display: flex; align-items: center; gap: 8px; } .video-url { font-size: 12px; color: #6b7280; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .btn-sm { padding: 4px 10px; font-size: 12px; } /* 上传进度弹窗样式 */ #uploadProgressModal .modal { padding: 24px; } #uploadProgressModal .modal-title { font-size: 16px; font-weight: 600; margin-bottom: 8px; } #uploadProgressModal .modal-sub { font-size: 13px; color: #6b7280; margin-bottom: 16px; word-break: break-all; } /* 添加视频按钮区域 */ .item-add { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed #e5e7eb; } .item-tip { font-size: 12px; color: #9ca3af; } .row-video { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid #f3f4f6; } .row-video:last-of-type { border-bottom: none; } .row-tag { font-size: 11px; padding: 2px 6px; background: #eff6ff; color: #2563eb; border-radius: 4px; white-space: nowrap; } .row-del { background: none; border: none; color: #9ca3af; cursor: pointer; padding: 4px; font-size: 14px; line-height: 1; } .row-del:hover { color: #ef4444; } /* ===== 视频介绍 ===== */ /* 2026-10-14 用户反馈「视频宽度太窄」：原 1.7fr:1fr 视频列仅约 520px。 改为视频独占整行（约 880px），播放列表横排到视频下方。 */ .video-wrap{display:grid;grid-template-columns:1fr;gap:14px} .vplayer{background:#0E1A33;border-radius:14px;overflow:hidden} /* S-02c：aspect-ratio 需 Safari15+/Chrome88+。旧内核无父级固定高可依，用 padding-top hack 兜底。 .vscreen 的全部子元素（img/video/.vchip/.vdur/.vbig）均已是 position:absolute， 故 display:block / grid 对子元素无差异，@supports 分支与原桌面行为完全一致。 */ .vscreen{position:relative;width:100%;height:0;padding-top:56.25%;background:linear-gradient(135deg,#0E1A33,#16294F);display:block} @supports (aspect-ratio:16/9){ .vscreen{height:auto;padding-top:0;aspect-ratio:16/9;display:grid;place-items:center} } .vscreen img{width:100%;height:100%;object-fit:cover;opacity:.72;display:block;position:absolute;top:0;right:0;bottom:0;left:0} .vscreen .vbig{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:rgba(37,99,235,.92);color:#fff;border:none;font-size:22px;cursor:pointer;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:.18s;z-index:2} .vscreen .vbig:hover{background:var(--accent);transform:translate(-50%,-50%) scale(1.06)} /* 播放中隐藏中央按钮（用户反馈：一直存在挡住画面），暂停/结束时恢复 */ .vscreen .vbig.hide{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.85)} .vchip{position:absolute;top:12px;left:12px;background:rgba(10,23,48,.75);color:#9EC3FF;font-size:11.5px;padding:4px 11px;border-radius:999px;letter-spacing:.05em;z-index:2} /* C-03 修复：.vdur 原为全局类名，与 :547 表格时长列冲突（本条 position:absolute 覆盖了表格 .vdur）。 限定到 .vscreen 作用域后，表格 （center.js:1091）恢复文档流，视频角标行为不变。 */ .vscreen .vdur{position:absolute;right:12px;bottom:12px;background:rgba(10,23,48,.75);color:#fff;font-family:var(--mono);font-size:12px;padding:3px 9px;border-radius:6px;z-index:2} .vbar{display:flex;align-items:center;gap:12px;padding:12px 16px} .vbar .vplay{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;border:none;cursor:pointer;font-size:13px;flex:none;display:grid;place-items:center} .vtrack{flex:1;height:6px;border-radius:999px;background:rgba(255,255,255,.16);overflow:hidden} .vtrack i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--accent),#38BDF8);border-radius:999px;transition:width .3s linear} .vtime{font-family:var(--mono);font-size:12px;color:#9EC3FF;flex:none} .vscreen .vfull{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:8px;background:rgba(10,23,48,.75);color:#9EC3FF;border:none;cursor:pointer;font-size:16px;display:grid;place-items:center;z-index:2} .vscreen .vfull:hover{background:rgba(10,23,48,.95);color:#fff} /* 放大（全屏）展示：清掉 16:9 占位，视频铺满屏幕且完整显示（contain 不裁切） */ .vscreen:fullscreen,.vscreen:-webkit-full-screen{height:100%;padding-top:0;aspect-ratio:auto;background:#000} .vscreen:fullscreen video,.vscreen:-webkit-full-screen video{object-fit:contain} .vlist{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px} .vitem{display:flex;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;cursor:pointer;transition:.15s;text-align:left;flex:1 1 300px;min-width:260px;font-family:inherit} .vitem:hover{border-color:var(--accent)} .vitem.on{border-color:var(--accent);background:#F2F7FF;box-shadow:0 6px 18px rgba(37,99,235,.10)} .vthumb{width:96px;height:56px;border-radius:10px;overflow:hidden;position:relative;flex:none;background:linear-gradient(135deg,#0E1A33,#16294F);box-shadow:0 2px 8px rgba(0,0,0,.1)} .vthumb img{width:100%;height:100%;object-fit:cover;display:block} .vthumb::after{content:"▶";position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;color:#fff;font-size:13px;background:rgba(10,23,48,.35)} .vitem.on .vthumb::after{content:"❚❚";background:rgba(37,99,235,.45)} .vmeta{flex:1;min-width:0} .vname{font-size:13.5px;font-weight:600;color:var(--txt);line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;word-break:break-all} .vsub{font-size:11.5px;color:var(--sub);margin-top:4px;display:flex;gap:8px;align-items:center} .vtag{font-size:10.5px;color:var(--accent);background:rgba(37,99,235,.1);border-radius:4px;padding:1.5px 7px} /* ===== 个人中心（律师编辑视图） ===== */ .center{max-width:860px;margin:0 auto;padding:26px 32px 80px;display:none} .center.show{display:block} .center-hero{display:flex;align-items:center;gap:18px;margin-bottom:22px;flex-wrap:wrap} .center-avatar{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#12234A,#2563EB);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:26px} .center-name{font-family:var(--serif);font-size:22px;font-weight:700} .center-sub{font-size:12.5px;color:var(--sub);margin-top:4px} .completeness{margin-bottom:22px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 20px} .completeness-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:13px} .completeness-row b{font-family:var(--mono);color:var(--accent);font-size:16px} .completeness-track{height:8px;border-radius:4px;background:#EDF0F7;overflow:hidden} .completeness-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,#2563EB,#7C3AED);transition:width .4s} .completeness-hint{font-size:11.5px;color:var(--faint);margin-top:8px} .tag-editor{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px} .tag-editor .tagopt{font-size:12px;padding:6px 13px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--sub);cursor:pointer;transition:.15s} .tag-editor .tagopt.on{border-color:var(--accent);color:var(--accent);background:rgba(37,99,235,.07);font-weight:600} .center-actions{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap} .item-list{display:flex;flex-direction:column;gap:10px} .item-row{display:grid;grid-template-columns:auto 1fr 1fr auto;gap:10px;align-items:center;background:#F7F9FD;border:1px solid var(--line);border-radius:10px;padding:10px 12px} .item-row .row-tag{font-size:10.5px;color:var(--accent);background:rgba(37,99,235,.08);border-radius:4px;padding:2px 8px;white-space:nowrap} .item-row input{border:1px solid var(--line2);border-radius:7px;padding:8px 10px;font-size:12.5px;color:var(--txt);background:#fff;outline:none;font-family:inherit;width:100%} .item-row input:focus{border-color:var(--accent)} .item-row .row-del{border:none;background:none;color:var(--faint);font-size:16px;cursor:pointer;padding:4px 8px;line-height:1} .item-row .row-del:hover{color:#D9534F} .item-row.row-case{grid-template-columns:1.8fr 1fr 78px 96px auto} .item-row.row-video{grid-template-columns:auto 1fr 1fr} .item-row.row-link{grid-template-columns:1fr 1fr auto} .item-row.row-two{grid-template-columns:1fr 1fr auto} .add-item{margin-top:10px;border:1px dashed var(--line2);background:none;border-radius:8px;padding:8px 16px;font-size:12.5px;color:var(--accent);cursor:pointer;width:100%;transition:.15s} .add-item:hover{border-color:var(--accent);background:rgba(37,99,235,.04)} .item-tip{font-size:11.5px;color:var(--faint);margin-top:8px} /* ===== 收费方案 ===== */ .plan-panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px;margin-bottom:18px} .plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px} .plan-card{border:1.5px solid var(--line);border-radius:12px;padding:20px 18px;cursor:pointer;position:relative;background:#fff;transition:.2s;display:flex;flex-direction:column} .plan-card:hover{border-color:var(--accent)} .plan-card.on{border-color:var(--accent);box-shadow:0 6px 18px rgba(37,99,235,.12)} .plan-card.on::after{content:"已选择";position:absolute;top:-9px;right:12px;font-size:10.5px;color:#fff;background:var(--accent);padding:2.5px 9px;border-radius:999px} .plan-name{font-family:var(--serif);font-size:16px;font-weight:700} .plan-price{font-family:var(--mono);font-size:24px;font-weight:700;color:var(--accent);margin:8px 0 2px} .plan-price span{font-size:11px;color:var(--faint);font-weight:400} .plan-free .plan-price{color:#16A34A} .plan-desc{font-size:12px;color:var(--sub);line-height:1.7;margin:10px 0;flex:1} .plan-desc li{list-style:none;padding-left:14px;position:relative;margin-bottom:4px} .plan-desc li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700} .plan-diamond{background:linear-gradient(160deg,#FFFBF0 0%,#fff 60%)} .plan-diamond .plan-name{color:var(--accent2)} .plan-diamond.plan-card.on{border-color:var(--accent2)} .plan-diamond.plan-card.on::after{background:var(--accent2)} .plan-diamond .plan-desc li::before{color:var(--accent2)} .plan-qrbox{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);display:none} .plan-card.on .plan-qrbox{display:block} .plan-qrbox .qr-title{font-size:11.5px;color:var(--sub);margin-bottom:8px;text-align:center} .qr-frame{width:112px;height:112px;margin:0 auto;border:1px solid var(--line);border-radius:10px;padding:6px;background:#fff} .qr-frame svg{width:100%;height:100%;display:block} .qr-note{font-size:10.5px;color:var(--faint);text-align:center;margin-top:8px} .plan-tip{font-size:12px;color:var(--faint);margin-top:14px} .plan-tip b{color:var(--accent)} @media (max-width:720px){ .hero h1{font-size:28px} .hero{padding:56px 18px 64px} .fgroup{flex-direction:column;gap:8px} .flabel{flex:none} .phead{padding:22px} .pactions{flex-direction:row;width:100%;flex-wrap:wrap} .pactions .btn{flex:1;min-width:140px} .statband{grid-template-columns:repeat(2,1fr)} .reviews{grid-template-columns:1fr} .topbar{padding:14px 18px;flex-wrap:wrap;gap:10px 12px;justify-content:flex-start} .topbar-note{display:none} /* T-02 补遗（2026-09-28 冒烟实测）：登录态下 .topbar-right 三枚胶囊在 320px 被撑到 right=371，页面级横向溢出 51px。根因同 .grid：flex 子项的 min-content 下限不可压缩， .topbar-join 是胶囊 + letter-spacing，三枚加 gap 必然超过 284px 可用宽。 ① .topbar-right 允许换行并可收缩（min-width:0）； ② justify-content:flex-end + margin-left:auto：同排时仍靠右（等价原来的 space-between），换行成两排时也靠右，而不是被 space-between 甩到左端； （写 flex-end 而非 flex-start：flex-start 会把换行后的第二排甩到左端） ③ 胶囊内边距收到 11px 14px、字号 12px，命中区仍 ≥44px（S-14 口径）。 */ .topbar-right{flex-wrap:wrap;justify-content:flex-end;gap:8px;min-width:0;margin-left:auto} .topbar-join{padding:11px 14px;font-size:12px} .form-grid{grid-template-columns:1fr} .likebar{flex-direction:column;align-items:stretch;text-align:center} .trace-ov{grid-template-columns:repeat(2,1fr)} .trace{padding:20px 18px 60px} .video-wrap{grid-template-columns:1fr} /* 窄屏视频 panel 收内边距，视频可用宽度 +36px（用户反馈：视频太窄） */ .panel-video{padding:16px 14px} .plan-grid{grid-template-columns:1fr} .center{padding:20px 18px 60px} } /* ===== 个人中心布局 ===== */ .uc-layout{display:flex;gap:24px;max-width:1100px;margin:0 auto;padding:0 24px} .uc-menu{width:200px;flex-shrink:0} .uc-menu a{display:block;padding:10px 16px;border-radius:8px;color:var(--sub);font-size:14px;cursor:pointer;transition:all .2s} .uc-menu a:hover{background:rgba(37,99,235,.06);color:var(--txt)} .uc-menu a.on{background:var(--accent);color:#fff;font-weight:600} .uc-menu .uc-group{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.08em;padding:16px 16px 6px;margin-top:8px} .uc-content{flex:1;min-width:0} .uc-page .panel{margin-bottom:24px} .uc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:20px 0} .uc-stat{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:20px;text-align:center;transition:border-color .15s} .uc-stat:hover{border-color:var(--accent)} .uc-stat .v{font-size:28px;font-weight:700;color:var(--accent)} .uc-stat .k{font-size:12px;color:var(--faint);margin-top:4px} .uc-quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:20px} .uc-quick a,.uc-quick button{display:block;padding:16px 20px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;text-align:left;cursor:pointer;transition:all .2s} .uc-quick a{text-decoration:none;color:inherit;font-family:inherit;font-size:inherit} .uc-quick a:hover,.uc-quick button:hover{border-color:var(--accent);box-shadow:0 4px 12px rgba(37,99,235,.1)} .uc-quick .qk-t{font-weight:600;color:var(--txt)} .uc-quick .qk-d{font-size:12px;color:var(--faint);margin-top:4px} .uc-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--gold);border:1px solid rgba(185,138,47,.5);border-radius:4px;padding:2px 8px;letter-spacing:.06em;vertical-align:2px;margin-left:8px} .uc-empty{padding:26px 10px;text-align:center;color:var(--faint);font-size:13px} @media (max-width:720px){ .uc-layout{flex-direction:column;gap:16px;padding:0} .uc-menu{width:100%;display:flex;flex-wrap:wrap;gap:6px} .uc-menu .uc-group{display:none} .uc-menu a{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:7px 10px;font-size:12.5px;white-space:nowrap} .uc-menu a.on{border-color:var(--accent)} .uc-page .panel{padding:20px 18px} .uc-stats{grid-template-columns:repeat(2,1fr);gap:12px} .uc-stat{padding:14px 10px} .uc-stat .v{font-size:22px} } .completeness-bar{height:8px;background:var(--line);border-radius:4px;overflow:hidden;margin:12px 0} .completeness-fill{height:100%;background:linear-gradient(90deg,var(--accent),#60a5fa);border-radius:4px;transition:width .3s} .completeness-text{font-size:12px;color:var(--faint);margin-bottom:16px} .edit-header{display:flex;align-items:center;gap:16px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--line)} .edit-header .avatar{width:60px;height:60px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:24px;font-weight:700} /* ===== 编辑表单样式 ===== */ .form-section{margin-bottom:28px} .form-section h3{font-size:16px;font-weight:600;color:var(--txt);margin-bottom:8px} .form-section .req{color:#e74c3c} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .field{margin-bottom:16px} .field label{display:block;font-size:13px;color:var(--txt);margin-bottom:8px;font-weight:500} .field input,.field select,.field textarea{width:100%;padding:10px 14px;border:1px solid var(--line);border-radius:8px;font-size:14px;background:var(--panel);color:var(--txt);transition:border-color .2s} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.1)} .field.full{grid-column:1/-1} .form-group-sub{font-size:12px;color:var(--faint);margin-bottom:12px} .tag-grid{display:flex;flex-wrap:wrap;gap:8px} .tagopt{display:inline-flex;align-items:center;padding:6px 14px;border-radius:20px;border:1px solid var(--line);font-size:13px;color:var(--sub);cursor:pointer;transition:all .2s} .tagopt:hover{border-color:var(--accent);color:var(--accent)} .tagopt.on{background:var(--accent);border-color:var(--accent);color:#fff} .content-blocks{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .block-btn{padding:16px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;font-size:14px;cursor:pointer;transition:all .2s;text-align:left} .block-btn:hover{border-color:var(--accent);box-shadow:0 4px 12px rgba(37,99,235,.1)} /* ===== 内容板块弹窗 ===== */ /* C-02a 修复：.modal-mask 的 z-index 原为 1000，与另两处 .modal-mask 的 60、 .reject-modal 的 ID 补丁不一致，导致弹窗层互相压盖。 统一口径（低→高）topbar 20 < modal 60 < toast 99 < mockBadge 200 < reject 1100； mockBadge 高于 modal 是刻意的——演示徽标在弹窗之上仍可见。 布局收口（拆 .modal-mask.top）留阶段二。 */ .modal-mask{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.5);z-index:60;justify-content:center;align-items:flex-start;padding:60px 20px;overflow-y:auto} .modal-mask.show{display:flex} .modal-box{background:var(--panel);border-radius:16px;max-width:640px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.3)} .modal-head{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--line)} .modal-head h3{font-size:18px;font-weight:600} .modal-close{background:none;border:none;font-size:24px;color:var(--faint);cursor:pointer;padding:4px 8px} .modal-close:hover{color:var(--txt)} .modal-body{padding:24px} .modal-foot{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--line)} .content-item{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--panel2);border-radius:10px;margin-bottom:8px} .content-item .ci-info{flex:1;min-width:0} .content-item .ci-title{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .content-item .ci-meta{font-size:12px;color:var(--faint);margin-top:2px} .content-item .ci-actions{display:flex;gap:8px;flex-shrink:0} .content-item .ci-btn{padding:6px 12px;border-radius:6px;border:1px solid var(--line);font-size:12px;cursor:pointer;background:var(--panel);color:var(--sub);transition:all .2s} .content-item .ci-btn:hover{border-color:var(--accent);color:var(--accent)} .content-item .ci-btn.danger{color:#e74c3c;border-color:rgba(231,76,60,.3)} .content-item .ci-btn.danger:hover{background:rgba(231,76,60,.1)} .item-modal .field{margin-bottom:16px} .item-modal .field label{display:block;font-size:13px;color:var(--txt);margin-bottom:8px;font-weight:500} .item-modal .field input,.item-modal .field textarea,.item-modal .field select{width:100%;padding:10px 14px;border:1px solid var(--line);border-radius:8px;font-size:14px;background:var(--panel);color:var(--txt)} .item-modal .field input:focus,.item-modal .field textarea:focus{outline:none;border-color:var(--accent)} .item-modal .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} /* ===== 表单校验样式 ===== */ .field input.err,.field select.err,.field textarea.err{border-color:#e74c3c;box-shadow:0 0 0 3px rgba(231,76,60,.1)} .field .err-msg{font-size:12px;color:#e74c3c;margin-top:4px;display:none} .field .err-msg.show{display:block} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.1)} .toast-ok{background:#10b981!important} .toast-err{background:#e74c3c!important} /* ===== 预约管理 ===== */ .appt-tabs{display:flex;gap:8px;margin-bottom:20px;border-bottom:1px solid var(--line);padding-bottom:12px} .appt-tab{padding:8px 18px;border-radius:8px;border:1px solid var(--line);font-size:13px;cursor:pointer;background:var(--panel);color:var(--sub);transition:all .15s} .appt-tab:hover{border-color:var(--accent);color:var(--accent)} .appt-tab.on{background:var(--accent);border-color:var(--accent);color:#fff} .appt-card{background:var(--panel2);border-radius:12px;padding:16px 20px;margin-bottom:12px;border:1px solid var(--line);transition:border-color .15s} .appt-card:hover{border-color:var(--accent)} .appt-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px} .appt-date{font-size:18px;font-weight:700;color:var(--txt)} .appt-slot{font-size:14px;color:var(--sub);margin-left:8px} .appt-status{font-size:12px;padding:4px 12px;border-radius:20px;font-weight:600;display:inline-block} .appt-status.s0{background:#fff3cd;color:#856404;border:1px solid #ffc107} .appt-status.s1{background:#d1ecf1;color:#0c5460;border:1px solid #17a2b8} .appt-status.s2{background:#f8d7da;color:#721c24;border:1px solid #dc3545} .appt-status.s3{background:#d4edda;color:#155724;border:1px solid #28a745} .appt-status.s4{background:#e2e3e5;color:#383d41;border:1px solid #6c757d} .appt-body{margin-bottom:12px} .appt-row{display:flex;gap:8px;margin-bottom:6px;font-size:13px;color:var(--sub)} .appt-row .label{min-width:70px;color:var(--faint)} .appt-row .value{color:var(--txt)} .appt-desc{font-size:14px;color:var(--txt);line-height:1.6;margin-top:8px;padding:12px;background:var(--panel);border-radius:8px} .appt-actions{display:flex;gap:8px;justify-content:flex-end} .appt-btn{padding:8px 20px;border-radius:8px;font-size:13px;cursor:pointer;border:1px solid var(--line);background:var(--panel);color:var(--sub);transition:all .2s} .appt-btn:hover{border-color:var(--accent);color:var(--accent)} .appt-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff} .appt-btn.primary:hover{background:var(--accent2)} .appt-btn.danger{color:#e74c3c;border-color:rgba(231,76,60,.3)} .appt-btn.danger:hover{background:rgba(231,76,60,.1)} .reject-modal{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.5);z-index:1100;display:none;justify-content:center;align-items:center} .reject-modal.show{display:flex} .reject-box{background:var(--panel);border-radius:16px;padding:24px;max-width:400px;width:90%} .reject-box h3{margin-bottom:16px} .reject-box textarea{width:100%;height:80px;padding:12px;border:1px solid var(--line);border-radius:8px;font-size:14px;resize:none;margin-bottom:16px} .reject-box .btns{display:flex;gap:8px;justify-content:flex-end} /* ===== 2026-09-05 真实数据版新增（PC-W1） ===== */ .badge.unjoined{color:#8aa0c0;border-color:rgba(138,160,192,.5)} .grid.loading{opacity:.6;transition:opacity .2s} .grid-more{grid-column:1/-1;text-align:center;padding:26px;color:var(--sub);font-size:13px} /* 详情页来源标注（PRD F3/L1） */ /* 执业证号核验标签 */ .verify-tag { color: #22C55E; font-weight: 500; font-size: 13px; } .src-note{font-size:11.5px;color:var(--sub);margin-top:8px;display:flex;align-items:center;gap:6px} .src-note a{color:var(--accent);text-decoration:none;border-bottom:1px dashed var(--accent)} /* 详情页信息行（证号/联系方式） */ /* 视频真实播放器 */ .vscreen video{width:100%;height:100%;object-fit:cover;display:block;position:absolute;top:0;right:0;bottom:0;left:0;background:#000} /* 案例来源标签 */ .casesrc{font-size:10.5px;color:var(--gold);border:1px solid rgba(185,138,47,.4);border-radius:4px;padding:1px 6px;margin-left:8px;vertical-align:1px} /* 预约弹窗表单样式见上方 .m-field input/select/textarea。 2026-09-28 核对：此处原有一段无选择器的残留声明尾（.m-field 规则的早期 --line 草稿）。 顶层多余右花括号会被浏览器拼进下一条规则的 prelude，导致其后的 .field.bad .ferr 规则 整条被吞——入驻表单校验提示因此从不显示。已删除该残留，恢复 .field.bad / .err-show 生效。 */ /* 入驻表单校验态（2026-09-05）：与既有 .field.err 体系并存的补充选择器 */ .field.bad .ferr{display:block} .field.bad input,.field.bad select,.field.bad textarea{border-color:#D9534F} .field.err-show .ferr{display:block} .fchips2{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px} .fchips2 .chip{font-size:12px;color:var(--sub);border:1px solid var(--line);border-radius:14px;padding:4px 12px;background:#fff;cursor:pointer} .fchips2 .chip.on{color:#fff;background:var(--accent);border-color:var(--accent)} .form-panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px;margin-bottom:20px} .form-group-title{font-size:16px;font-weight:700;color:var(--txt);margin-bottom:6px} .form-group-sub{font-size:13px;color:var(--faint);margin-bottom:20px} .plan-panel{margin-top:8px} /* ===== 2026-09-05 视觉还原：详情页预约/分享弹窗原型样式（id 覆盖 center 通用 modal-mask/modal-close） ===== */ #bookMask.modal-mask,#shareMask.modal-mask{background:rgba(10,23,48,.55);align-items:center;padding:20px;z-index:60} #bookMask .modal-close,#shareMask .modal-close{position:absolute;top:14px;right:14px;background:none;border:none;font-size:18px;color:var(--sub);cursor:pointer;padding:6px;line-height:1} /* ================= 登录页双栏（2026-09-05 账号打通：主站统一登录/微信扫码） ================= */ /* 2026-09-07 对齐主站 login 布局：深蓝主视觉底 + 浮起白卡（此前 .login-box 无卡片样式，表单裸浮在浅灰页上） */ .login-page{min-height:calc(100vh - 64px);display:flex;align-items:center;justify-content:center;padding:48px 24px; background:linear-gradient(150deg,#0E1A33 0%,#12234A 58%,#1D4FD8 145%)} .login-box{background:#fff;border-radius:14px;box-shadow:0 24px 60px rgba(10,23,48,.45);padding:34px 38px 26px;width:100%} .login-box-wide { max-width: 880px; } .login-head { margin-bottom: 18px; } .login-head h1{font-family:var(--serif);font-size:24px;font-weight:700;letter-spacing:.02em} .login-sub{font-size:12.5px;color:var(--sub);margin-top:6px} .login-note{font-size:12.5px;color:var(--faint);margin-top:12px} .login-error{font-size:12.5px;color:#c0564f;margin-top:10px} .login-back{display:inline-block;margin-top:16px;font-size:13px;color:var(--sub);text-decoration:none} .login-back:hover{color:var(--accent)} /* S-19：断点统一 720px（2026-09-28，原 760px 与全站口径不一致） */ @media(max-width:720px){.login-box{padding:26px 22px}} .login-cols { display: grid; grid-template-columns: 1fr 328px; gap: 0; } .login-main { padding-right: 28px; } .login-wx { border-left: 1px solid rgba(122,150,192,.25); padding-left: 14px; text-align: center; } .login-wx-title { font-size: 15px; font-weight: 600; margin-bottom: 12px; } .wx-qr { min-height: 240px; display: flex; align-items: center; justify-content: center; } /* 2026-09-07 修复：微信qrconnect内页按300px设计，width:100%拉伸到271px致标题/二维码裁切——锁定官方标准尺寸 */ .wx-qr iframe { width: 300px !important; height: 400px; } .wx-tip { font-size: 12px; color: var(--sub); line-height: 1.8; margin-top: 10px; } .wx-err { font-size: 12.5px; color: #c0564f; background: rgba(192,86,79,.08); border-radius: 8px; padding: 8px 10px; margin-top: 8px; } .wx-err a { color: #2b6cb0; } @media (max-width: 720px) { .login-cols { grid-template-columns: 1fr; } .login-wx { border-left: none; border-top: 1px solid rgba(122,150,192,.25); padding: 20px 0 0; margin-top: 8px; } .login-main { padding-right: 0; } } /* 2026-09-28 T-02 实测 320px 溢出修复： ① grid 的 1fr 等价 minmax(auto,1fr)，auto 下限取内容 min-content。微信 qrconnect iframe 被锁死 300px（见上方 09-07 注释，不可改回 width:100%，会裁切二维码）， 于是整条 track 被撑到 300px，.login-main/.login-wx 一起超宽。 min-width:0 打掉 auto 下限，让 1fr 可以收到可用宽度。 ② iframe 本身仍 300px，超出部分由 .wx-qr 自己横向滚动收口，不传导到页面级。 */ .login-main,.login-wx{min-width:0} .wx-qr{overflow-x:auto} @media (max-width:360px){ /* 极窄屏再挤出边距，尽量让 300px 二维码整块可见 */ .login-page{padding-left:8px;padding-right:8px} .login-box{padding-left:8px;padding-right:8px} } /* ===== 2026-09-06 S1-S4：登录注册入口 / mock 演示层 / 个人中心整站功能 ===== */ .topbar-right .topbar-ghost{border:1px solid rgba(126,176,255,.45);color:#9EC3FF;background:rgba(37,99,235,.10);border-radius:999px;padding:6px 16px;font-size:12.5px;cursor:pointer;letter-spacing:.05em;transition:.15s} .topbar-right .topbar-ghost:hover{background:rgba(37,99,235,.22)} #mockBadge{position:fixed;right:14px;bottom:14px;z-index:200;background:#7C3AED;color:#fff;font-size:12px;padding:7px 14px;border-radius:999px;box-shadow:0 6px 18px rgba(124,58,237,.45);cursor:pointer;user-select:none} .mock-panel{margin-top:16px;border:1px dashed rgba(124,58,237,.5);background:rgba(124,58,237,.06);border-radius:12px;padding:14px 16px;font-size:12.5px} .mock-panel .mp-title{font-weight:600;color:#6D28D9;margin-bottom:8px} .mock-panel .mp-row{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0} .mock-panel button{border:1px solid rgba(124,58,237,.5);background:#fff;color:#6D28D9;border-radius:8px;padding:6px 12px;font-size:12px;cursor:pointer} .mock-panel button:hover{background:rgba(124,58,237,.08)} .mock-panel .mp-form{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px} .mock-panel input{border:1px solid var(--line2);border-radius:8px;padding:7px 10px;font-size:12.5px;width:130px;outline:none} .mock-panel .mp-note{color:var(--faint);font-size:11.5px;margin-top:8px} .uc-dot{display:inline-block;min-width:18px;text-align:center;background:#D9534F;color:#fff;border-radius:999px;font-size:10.5px;padding:1px 6px;margin-left:6px;vertical-align:1px} .notice-item{border:1px solid var(--line);border-radius:12px;padding:16px 20px;margin-bottom:12px;background:var(--panel2);transition:border-color .15s} .notice-item:hover{border-color:var(--accent)} .notice-item.unread{border-color:rgba(37,99,235,.35);background:#F2F7FF} .notice-item.unread .notice-title{font-weight:600} .notice-item .uc-dot{margin-right:6px;margin-left:0;min-width:8px;width:8px;height:8px;padding:0;border-radius:50%} .notice-title{font-size:13.5px;color:var(--txt);display:flex;align-items:center;gap:6px} .notice-time{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--faint);white-space:nowrap} .notice-content{font-size:12.5px;color:var(--sub);margin-top:6px;line-height:1.7} .notice-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px} .notice-head span{font-size:12.5px;color:var(--sub)} .fav-grid{display:grid;grid-template-columns:1fr;gap:10px} .fav-card{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:12px;padding:16px 20px;background:var(--panel2);transition:border-color .15s} .fav-card:hover{border-color:var(--accent)} .fav-card .avatar{width:44px;height:44px;flex:0 0 44px;font-size:18px} .fav-info{flex:1;min-width:0} .fav-time{font-size:11.5px;color:var(--faint);margin-top:3px} .fav-ops{display:flex;gap:8px;flex-shrink:0} .plan-cur{font-size:13.5px;color:var(--txt);margin-bottom:12px} .plan-cur b{color:var(--accent)} .sec-rows{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:16px} .sec-row{display:flex;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:13px} .sec-row:last-child{border-bottom:none} .sec-row .label{flex:0 0 90px;color:var(--faint)} .sec-row .value{color:var(--txt)} .sec-ops{display:flex;gap:10px;flex-wrap:wrap} .prev-frame{width:100%;height:640px;border:1px solid var(--line);border-radius:12px;background:#fff} .prev-ops{display:flex;gap:10px;margin-bottom:12px} .uc-lawyer-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;background:linear-gradient(135deg,#12234A,#0E3A8F);color:#EAF0FF;border-radius:12px;padding:14px 20px;font-size:13.5px;margin-bottom:18px;flex-wrap:wrap} /* ===== 2026-09-07 center 基本资料页签统一样式（pf-* 头部卡 + 中性身份徽标 + 值列 mono/链接） ===== */ .pf-head{display:flex;align-items:center;gap:16px;padding:4px 0 18px;border-bottom:1px solid var(--line);margin-bottom:18px} .pf-avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#12234A,#2563EB);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:24px;font-weight:700;flex-shrink:0} .pf-name{font-family:var(--serif);font-size:18px;font-weight:700;color:var(--txt);display:flex;align-items:center;gap:10px;flex-wrap:wrap} .pf-sub{font-size:12.5px;color:var(--faint);margin-top:6px} .pf-tag{display:inline-flex;align-items:center;font-size:11px;color:var(--sub);border:1px solid var(--line2);border-radius:4px;padding:2px 8px;letter-spacing:.06em} .sec-row .value.mono{font-family:var(--mono)} .sec-row .value a{color:var(--accent);text-decoration:none} .sec-row .value a:hover{text-decoration:underline} /* ===== 2026-09-07 个人简介富文本编辑器（richtext.js）+ 详情页富文本排版 ===== */ .rt{border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden;transition:border-color .15s,box-shadow .15s} .rt:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.12)} .rt-toolbar{display:flex;align-items:center;gap:2px;padding:7px 10px;border-bottom:1px solid var(--line);background:var(--panel2);flex-wrap:wrap} .rt-btn{border:none;background:transparent;cursor:pointer;font-size:13px;color:var(--sub);padding:4px 9px;border-radius:6px;line-height:1.4} .rt-btn:hover{background:rgba(37,99,235,.08);color:var(--accent)} .rt-sep{width:1px;height:16px;background:var(--line2);margin:0 6px} .rt-area{min-height:150px;padding:12px 14px;font-size:14px;line-height:1.9;color:var(--txt);outline:none;overflow-y:auto;max-height:420px;word-break:break-word} .rt-area:empty:before{content:attr(data-ph);color:var(--faint)} .rt-area p{margin:0 0 8px} .rt-area ul,.rt-area ol{margin:4px 0 8px;padding-left:22px} .rt-area li{margin:2px 0} .rt-count{padding:6px 12px;border-top:1px solid var(--line);font-size:11px;color:var(--faint);text-align:right} /* 详情页 .intro 内富文本排版（2026-09-07 双态统一：与编辑器 .rt-area 逐属性一致—— 14px/行高1.9/正文--txt/段距8/列表缩进22/列表纵向4·2/同色加粗；所见即所得） */ .intro .rt-view p{margin:0 0 8px;line-height:1.9;white-space:pre-wrap;color:var(--txt)} .intro .rt-view p:last-child{margin-bottom:0} .intro .rt-view ul,.intro .rt-view ol{margin:4px 0 8px;padding-left:22px;line-height:1.9} .intro .rt-view li{margin:2px 0} .intro .rt-view:last-child{margin-bottom:0} /* ===== 展示配置页（2026-09-08） ===== */ .dc-sec{margin-bottom:20px} .dc-sec-t{font-size:14px;font-weight:600;color:var(--txt);margin-bottom:12px;padding-left:12px;border-left:3px solid var(--accent)} .dc-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid var(--line);border-radius:10px;margin-bottom:10px;background:var(--panel)} .dc-row-t{flex:1;min-width:0} .dc-row-label{font-size:13.5px;color:var(--txt)} .dc-row-tip{font-size:11.5px;color:var(--faint);margin-top:2px} .dc-loading{font-size:13px;color:var(--sub);padding:20px 0;text-align:center} .dc-sw{position:relative;display:inline-block;width:38px;height:22px;flex:0 0 38px} .dc-sw input{opacity:0;width:0;height:0} .dc-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#C6CEDB;border-radius:22px;transition:.2s} .dc-slider:before{content:"";position:absolute;height:16px;width:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 2px rgba(0,0,0,.2)} .dc-sw input:checked + .dc-slider{background:var(--accent)} .dc-sw input:checked + .dc-slider:before{transform:translateX(16px)} .dc-order{display:flex;gap:6px} .dc-order button{width:26px;height:26px;border:1px solid var(--line);background:#fff;border-radius:6px;cursor:pointer;font-size:12px;color:var(--sub);line-height:1} .dc-order button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)} .dc-order button:disabled{opacity:.3;cursor:default} .dc-actions{display:flex;align-items:center;gap:14px;margin-top:6px} .dc-note{font-size:12.5px;color:var(--accent)} .dc-board{position:relative} /* ===== 视频上传组件样式 ===== */ .video-upload-list{display:flex;flex-direction:column;gap:16px} .video-upload-item{ display:flex;gap:16px;padding:16px; background:var(--panel2);border:1px solid var(--line); border-radius:12px;transition:border-color .15s; } .video-upload-item:hover{border-color:var(--accent)} .video-cover-upload{ width:160px;height:90px;flex-shrink:0; border:2px dashed var(--line);border-radius:8px; display:flex;flex-direction:column;align-items:center;justify-content:center; cursor:pointer;transition:all .15s;overflow:hidden;position:relative; } .video-cover-upload:hover{border-color:var(--accent);background:rgba(37,99,235,.04)} .video-cover-upload img{width:100%;height:100%;object-fit:cover} .video-cover-upload .upload-placeholder{text-align:center;font-size:12px;color:var(--sub)} .video-cover-upload .upload-placeholder .icon{font-size:24px;margin-bottom:4px} .video-info{flex:1;display:flex;flex-direction:column;gap:12px} .video-info-row{display:flex;align-items:center;gap:12px} .video-info-row label{width:60px;font-size:13px;color:var(--sub);flex-shrink:0} .video-info-row input,.video-info-row select{ flex:1;padding:8px 12px;border:1px solid var(--line); border-radius:6px;font-size:13px;background:var(--panel); } .video-file-upload{ flex:1;padding:12px;border:2px dashed var(--line);border-radius:8px; text-align:center;cursor:pointer;transition:all .15s; } .video-file-upload:hover{border-color:var(--accent);background:rgba(37,99,235,.04)} .video-file-upload .file-name{font-size:13px;color:var(--txt);margin-bottom:4px} .video-file-upload .file-size{font-size:12px;color:var(--sub)} .video-actions{display:flex;gap:8px;margin-top:auto} .video-actions button{padding:6px 12px;font-size:12px;border-radius:6px;cursor:pointer} .video-actions .btn-delete{background:none;color:#e74c3c;border:1px solid rgba(231,76,60,.3)} .video-actions .btn-delete:hover{background:rgba(231,76,60,.1)} .upload-progress{width:100%;height:4px;background:var(--line);border-radius:2px;overflow:hidden;margin-top:8px} .upload-progress-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:2px;transition:width .3s} /* ===== 2026-09-15 个人中心·专业背景时间线（对齐名片详情页 .timeline 视觉，所见即所得） ===== */ .tl-list{display:flex;flex-direction:column} .tl-item{position:relative;padding:0 0 18px 22px;border-left:2px solid var(--line)} .tl-item:last-child{border-left-color:transparent;padding-bottom:0} .tl-item::before{content:'';position:absolute;left:-5px;top:3px;width:8px;height:8px;border-radius:50%;background:var(--accent);border:2px solid var(--panel)} .tl-head{display:flex;align-items:center;gap:8px;margin-bottom:4px} .tl-type{font-size:10.5px;color:var(--accent);background:rgba(37,99,235,.08);border-radius:4px;padding:2px 8px;white-space:nowrap} .tl-type.edu{color:var(--gold);background:rgba(185,138,47,.10)} .tl-year{font-family:var(--mono);font-size:12px;color:var(--accent2);letter-spacing:.05em} .tl-org{font-size:14px;color:var(--txt);line-height:1.6} .tl-desc{font-size:13px;color:var(--sub);margin-top:4px;line-height:1.5} .tl-ops{position:absolute;right:0;top:0;display:flex;gap:8px;opacity:0;transition:opacity .2s} .tl-item:hover .tl-ops,.tl-item:focus-within .tl-ops{opacity:1} .tl-btn{padding:5px 12px;border-radius:6px;border:1px solid var(--line);font-size:12px;cursor:pointer;background:var(--panel);color:var(--sub);transition:all .2s} .tl-btn:hover{border-color:var(--accent);color:var(--accent)} .tl-btn.danger{color:#e74c3c;border-color:rgba(231,76,60,.3)} .tl-btn.danger:hover{background:rgba(231,76,60,.1)} /* ===== 2026-09-15 修复：板块只读行 .row-ro 系列样式漏配（09-13 引入），其余四板块恢复正常布局 ===== */ .item-row.row-ro{grid-template-columns:1fr auto auto;gap:8px} .row-ro-main{min-width:0} .row-ro-a{font-size:13.5px;color:var(--txt);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .row-ro-b{font-size:12.5px;color:var(--sub);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .item-row .ci-btn{padding:5px 12px;border-radius:6px;border:1px solid var(--line);font-size:12px;cursor:pointer;background:var(--panel);color:var(--sub);transition:all .2s} .item-row .ci-btn:hover{border-color:var(--accent);color:var(--accent)} .item-row .ci-btn.danger{color:#e74c3c;border-color:rgba(231,76,60,.3)} .item-row .ci-btn.danger:hover{background:rgba(231,76,60,.1)} /* ===== 10文档（2026-09-15）：自定义标签 chip 与「＋ 自定义」输入框 ===== */ .tagopt.custom{border-style:dashed;border-color:var(--accent);color:var(--accent);background:rgba(37,99,235,.05);font-weight:600} .tagopt.custom::after{content:"✕";margin-left:7px;font-size:11px;opacity:.55;font-weight:400} .chip-custom-wrap{display:inline-flex;align-items:center;margin-left:4px} .chip-custom-input{width:88px;font-size:12px;border:1px dashed var(--line);border-radius:14px;padding:4px 9px;outline:none;background:transparent;color:var(--text);transition:border-color .15s} .chip-custom-input:focus{border-color:var(--accent)} .chip.custom{border-style:dashed} /* 书籍封面图片样式 */ .book-cover { width: 48px; height: 64px; object-fit: cover; margin-right: 12px; border-radius: 4px; } .img-upload-box { margin-bottom: 8px; } .img-preview { max-width: 120px; max-height: 80px; margin-bottom: 8px; display: block; border-radius: 4px; } /* ===================================================================== 2026-09-28 阶段一：移动端自适应改造（对应《16_阶段一移动端自适应改造_逐文件逐行改动清单》） 原则：PC 零回归 —— 以下规则一律写在 @media 内，桌面端不受影响。 z-index 口径（低→高）：topbar 20 < modal 60 < toast 99 < mockBadge 200 < reject 1100 ===================================================================== */ /* ---- C-01 修复：.form-grid 移动端降级原为死规则 ---- 原 :776 的 @media{.form-grid{1fr}} 被后置的 .form-grid{1fr 1fr} 同特异性覆盖， 导致手机端表单仍两列挤爆。此处后置重申，桌面端 grid-template-columns 与 gap 完全不动。 */ @media (max-width:720px){ .form-grid{grid-template-columns:1fr} } /* ---- S-05 ~ S-12 零降级网格补齐 ---- */ @media (max-width:720px){ /* S-05 名片统计带：保持 3 列，缩字号防溢出 */ .cstats .n{font-size:15px} .cstats .n em{font-size:11px} .cstats .l{font-size:10.5px} /* S-06 编辑行基础网格 → 单列 */ .item-row{grid-template-columns:1fr;gap:8px;align-items:stretch} .item-row .row-del{justify-self:end} /* S-07 / S-08 四种行变体全部单列（row-case 原 5 列、其余 3 列零降级） */ .item-row.row-case, .item-row.row-video, .item-row.row-link, .item-row.row-two{grid-template-columns:1fr} /* S-11 只读行：主行 + 操作，长文本换行不撑破 */ .item-row.row-ro{grid-template-columns:1fr auto} .row-ro-a,.row-ro-b{white-space:normal} /* S-09 内容板块按钮 → 2 列 */ .content-blocks{grid-template-columns:1fr 1fr;gap:10px} /* S-10 板块弹窗表单 → 单列 */ .item-modal .form-row{grid-template-columns:1fr} /* S-12 律师头部：解除 min-width 硬底；.phead 已 flex-wrap:wrap，可自然换行 */ .pinfo{min-width:0} .pactions{min-width:0;width:100%;flex-direction:row;flex-wrap:wrap} .pactions .btn{flex:1 1 140px} } /* ---- S-13 表格：保留横滑，边缘渐变滚动提示（卡片式留阶段二） ---- 滚动阴影用 background-attachment: local/scroll 技法，仅在可滚动时显示， 比 sticky/float 兼容性更稳。.trace-table 背景改透明，露出 .table-wrap 的渐变。 */ @media (max-width:720px){ .table-wrap{ background: linear-gradient(90deg,#fff 30%,rgba(255,255,255,0)) left center / 42px 100% no-repeat local, linear-gradient(270deg,#fff 30%,rgba(255,255,255,0)) right center / 42px 100% no-repeat local, radial-gradient(farthest-side at 0 50%,rgba(15,35,65,.10),rgba(15,35,65,0)) left center / 14px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%,rgba(15,35,65,.10),rgba(15,35,65,0)) right center / 14px 100% no-repeat scroll; } .trace-table{min-width:560px;background:transparent} .trace-table th,.trace-table td{padding:10px 12px;font-size:12px} .vname,.vtime,.sectag{white-space:normal} } /* ---- S-14 触摸目标 ≥ 44px ---- */ @media (max-width:720px){ .dc-order button{width:44px;height:44px;font-size:14px} .chip{padding:9px 16px;font-size:13px} .slot{padding:10px 18px;font-size:13px} .modal-close{padding:10px 12px} .tl-btn{padding:9px 14px;font-size:12.5px} .item-row .row-del{padding:10px 12px;min-width:44px;min-height:44px} .chip-custom-input{width:auto;min-width:88px;font-size:16px;padding:8px 12px} } /* ---- S-15 触控可见性：hover-only 操作在触屏常显 ---- 基础规则 .tl-ops{opacity:0} 依赖 :hover/:focus-within，触屏上不可发现、实际不可达。 */ @media (hover:none){ .tl-ops{opacity:1;position:static;margin-top:8px} } /* ---- S-16 iOS 输入框 16px，防聚焦自动缩放整页 ---- */ @media (max-width:720px){ .m-field input,.m-field select,.m-field textarea, .item-row input,.field input,.field select,.field textarea, .reject-box textarea, .chip-custom-input{font-size:16px} } /* ---- T-02 补遗（2026-09-29 冒烟实测）：著述成果书名横向溢出 ---- 详情页 320/375 两条 T2 红：scrollWidth=393，culprit=.pub-title right=393 （两个视口 right 相同 = 内容定宽撑出，与视口无关）。 **只有书目路径有病，文章路径本来就没病**（2026-09-29 几何探针证实）： - 书目：.pub-title 是内联 span，父 .pub-item-body 是普通块容器， 于是 flex:1 / min-width:0 / overflow:hidden / text-overflow:ellipsis 对非替换内联盒**全部不生效**，nowrap 的「书名+ISBN」整行内联盒直接 撑出已正确收缩的 .pub-item-body（overflow-x:visible）。 - 文章：.pub-title 是 .pub-item（flex）的直接子项 → **已被块化**， 且自身带 overflow:hidden，实测即使 min-width:auto 也能收缩到 524px 而内容 836px（721 视口，截断+省略号正常）。故 ④ 的 min-width:0 是 **保险丝、不是承重墙**——留着防将来把 overflow 改掉，别当必需品读。 修法①：.pub-item-body 改 flex+wrap，书名成一行可收缩的 flex 行（ flex:1 1 0 + min-width:0），省略号才真正生效；出版信息 flex:1 0 100% 强制占满整行，查看链接 flex:none 顺延下一行。 ⚠️ 块级形态与改前**不完全一致**：变 flex 会把内联的 .pub-tag/.pub-title 块化，且 align-items:center 让基线对齐变中线对齐（实测约 2px 垂直位移、 父高随之 -2px 级联）。这是窄屏改版接受的代价，不是「逐像素不变」。 **严禁把本组规则提升出 @media**：A/B 几何指纹实测（_pub_promote_ab.js） 全宽度生效时 1366/1920/1024/721 均 20/91 节点不一致（标题盒 318.72→775、 块化、2px 位移级联），桌面零回归即被打破。 为什么不必堵 721–1365：真实数据实测（_bookpath_geom.js / _realdata_overflow.js） 库内最长书目「书名+ISBN」内联盒 502px，而该处 .pub-item-body 有 573–812px， 320→1920 八档视口**横向溢出 0 次**。721–800 的余量约 70px（+13% 书名长度）， 超出部分才需另议；矩阵 M7 的合成标题已远超库内上限，不代表现状。 本组规则一律写在 @media 内，PC 零回归（口径见本节抬头注释）。 */ @media (max-width:720px){ .book-item .pub-item-body{display:flex;flex-wrap:wrap;align-items:center} .book-item .pub-title{flex:1 1 0;min-width:0} .book-item .pub-publisher{flex:1 0 100%} .pub-item > .pub-title{min-width:0} } /* ---- H-02 配套：替代 HTML/JS 内联固定尺寸的类 ---- */ .btn-lg{padding:14px 32px;font-size:15px} .modal-wide{max-width:520px} .modal-narrow{max-width:400px} @media (max-width:720px){ .btn-lg{width:100%;padding:14px 20px} .modal,.modal-wide,.modal-narrow{max-width:100%;margin:0 12px} } /* ---- H-01 配套：刘海屏 / 底部工具栏安全区 ---- */ @media (max-width:720px){ .toast{bottom:calc(34px + env(safe-area-inset-bottom,0px))} } #mockBadge{bottom:calc(14px + env(safe-area-inset-bottom,0px))} /* ===================================================================== S-18：rank.html 榜单页样式整块迁入（2026-09-28） 原位于 rank.html 内嵌