→

也就是说：**品牌带在最上面，导航栏在它下面**，页面标题带再在导航下面。背景图由后台「Logo 与品牌」上传（--bb-h 控制带子高度，cover 铺满整行）；带内是 .wrap 里的两个 .slot —— 两个槽位**高度完全一样、可容纳宽度也一样**，图片用 object-fit:contain 居中，所以换上宽高比不同的 logo 也不会一大一小。 white-logo：把 logo 自动转成纯白（brightness(0) invert(1)），这样深色的院徽 / 文字直接放到深色背景带上也能看清，不用手工做白版。 ========================================================== */ .bbar{position:relative;background-color:#2d7dbc;background-position:center;background-size:cover; background-repeat:no-repeat;overflow:hidden} /* 上下压一点暗，让白色 logo 在浅色图案区也够清楚 */ .bbar::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(4,26,48,.16),rgba(4,26,48,.02) 46%,rgba(4,26,48,.20))} .bbar .wrap{position:relative;z-index:1;height:var(--bb-h,132px);display:flex;align-items:center; justify-content:center;gap:var(--bb-gap,56px)} .bbar.al-left .wrap{justify-content:flex-start} .bbar .slot{display:flex;align-items:center;justify-content:center; height:var(--bb-lh,64px);max-width:var(--bb-lw,300px);flex:0 1 auto;min-width:0} .bbar .slot img{display:block;height:100%;width:auto;max-width:100%;object-fit:contain; transition:transform .25s ease} .bbar .slot:hover img{transform:scale(1.03)} /* 自动转白：任意颜色的 logo 都能一键变成纯白剪影 */ .bbar.white-logo .slot img{filter:brightness(0) invert(1) drop-shadow(0 2px 6px rgba(0,10,25,.28))} /* 还没传 logo 时的占位：一个虚线框，提示这里要放什么 */ .bbar .slot.no-img{border:1px dashed rgba(255,255,255,.55);border-radius:10px;padding:0 16px; max-width:var(--bb-lw,300px)} .bbar .slot.no-img .ph{color:rgba(255,255,255,.9);font-size:13.5px;letter-spacing:.08em;white-space:nowrap} /* ========================================================== ② 全站背景水印（隐约的化工元素，不影响阅读） ---------------------------------------------------------- 一层固定在视口最底下的图案（position:fixed + z-index:-1），除了它别的元素都排在它上面；浓度由 --wm-op 控制（后台可调 0 – 16%）。带白底的内容卡片会自然盖住它，所以正文区域始终清爽。 ========================================================== */ .wm{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--wm-op,.05); background:url(../img/watermark.svg) repeat 0 0;background-size:620px 620px} /* ============ 详情页 · 子栏目横向导航 ============ */ .subnav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px; padding:9px 12px;background:#fff;border:1px solid var(--line);border-radius:12px; box-shadow:var(--sh-1)} .subnav .lb{flex:0 0 auto;font-size:12.5px;font-weight:700;color:var(--navy);letter-spacing:.05em; padding-right:10px;margin-right:2px;border-right:1px solid var(--line-2)} .subnav a{flex:0 0 auto;font-size:13.5px;color:var(--ink-2);text-decoration:none; padding:6px 13px;border-radius:8px;transition:.18s;border:1px solid transparent} .subnav a:hover{background:var(--blue-50);color:var(--blue);border-color:#cfe2f7} .subnav a.on{background:linear-gradient(135deg,var(--blue),var(--blue-2));color:#fff; font-weight:600;border-color:transparent;box-shadow:var(--sh-blue)} .subnav .sp{flex:1 1 auto;min-width:6px} .subnav a.home{color:var(--muted);font-size:13px} .subnav a.home:hover{color:var(--blue)} @media(max-width:600px){ .subnav{gap:6px;padding:8px 9px} .subnav a{padding:5px 10px;font-size:12.5px} .subnav .lb{width:100%;border-right:none;border-bottom:1px solid var(--line-2); padding:0 0 6px;margin:0 0 2px} } /* ============ 板块标题 ============ */ .sec{padding:34px 0 64px} .sec-h{display:flex;align-items:center;gap:11px;margin-bottom:22px} .sec-h:before{content:"";width:4px;height:19px;border-radius:3px; background:linear-gradient(180deg,var(--blue),var(--blue-2))} .sec-h h2{font-size:calc(20px * var(--fz-all,1) * var(--fz-sec,1));letter-spacing:-.01em} .sec-h .cnt{font-size:13px;color:var(--muted);font-weight:400;background:var(--line-2); padding:1px 9px;border-radius:20px} .sec-h .right{margin-left:auto;font-size:13.5px;color:var(--blue)} .sec-h .right:hover{text-decoration:underline} /* ============ 按钮 ============ */ .btn{display:inline-flex;align-items:center;gap:7px;padding:11px 22px;border-radius:10px; font-size:14.5px;border:1px solid transparent;transition:.22s;cursor:pointer;font-weight:500} .btn-p{background:linear-gradient(135deg,var(--blue),var(--blue-2));color:#fff;box-shadow:var(--sh-blue)} .btn-p:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(30,111,196,.32)} .btn-g{background:#fff;border-color:var(--line);color:var(--ink-2)} .btn-g:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-50)} /* ============ 标签 ============ */ .tag{display:inline-flex;align-items:center;font-size:12px;padding:2.5px 10px;border-radius:6px; background:var(--blue-100);color:var(--blue);font-weight:500;line-height:1.6} .tag.g{background:var(--gold-100);color:#a9701d} .tag.v{background:var(--violet-100);color:var(--violet)} .tag.n{background:var(--line-2);color:var(--ink-2)} .tag.on-img{position:absolute;top:12px;left:12px;z-index:3;background:rgba(255,255,255,.94); backdrop-filter:blur(6px);color:var(--navy);font-weight:600;box-shadow:0 2px 8px rgba(16,47,82,.14)} /* ========================================================== PI 卡片（首页 / 成员页） ========================================================== */ .pi-hero{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg); padding:28px;display:grid;grid-template-columns:400px 1fr;gap:36px;box-shadow:var(--sh-1)} /* 左列现在只有头像（原「联系方式」栏已去掉） */ .pi-col{display:flex;flex-direction:column;min-width:0} /* PI 头像：高度撑满右侧正文列（上下不再留白），高度不受限时（窄屏单列）退回 4.2 : 3.6（≈ 7:6）的自然比例 */ .pi-portrait{ border-radius:12px;overflow:hidden;position:relative; aspect-ratio:4.2/3.6;flex:1 1 auto; background:linear-gradient(160deg,#123a63 0%,#1c5288 55%,#2a6fa8 100%); display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#fff; } /* 头像下方的联系信息块，撑满剩余高度避免出现空白 */ .pi-side{flex:1;margin-top:14px;border:1px solid var(--line);border-radius:12px; background:var(--blue-50);padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px} .pi-side-h{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue); font-weight:700;padding-bottom:8px;border-bottom:1px solid #dbeafe} .pi-side .r{display:flex;gap:10px;font-size:13px;line-height:1.6} .pi-side .k{flex:0 0 42px;color:var(--muted);font-size:12.5px} .pi-side .v{flex:1;color:var(--ink-2);word-break:break-all} .pi-side .v a{color:var(--blue);text-decoration:none} .pi-side .v a:hover{text-decoration:underline} .pi-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%} /* 照片上不再压任何文字/蒙版，姓名挪到右侧正文列（见 .pi-name） */ .pi-main{display:flex;flex-direction:column} /* PI 姓名标题（原先是压在照片上的浮层，现移到照片右侧） */ .pi-name{font-family:var(--serif);font-size:32px;font-weight:700;color:var(--navy); line-height:1.15;letter-spacing:-.01em;margin-bottom:4px} .pi-name span{display:block;font-family:var(--sans);font-size:11.5px;font-weight:400; letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-top:6px} .pi-main .role{font-size:14px;color:var(--blue);font-weight:600;margin-bottom:6px} .pi-main h2{font-size:26px;margin-bottom:12px;letter-spacing:-.02em} .pi-main h2 small{font-family:var(--serif);font-size:17px;color:var(--ink-2);font-weight:400;margin-left:8px} /* 身份标签：由「副标题」拆分而来，替代原来重复出现的 role 行 + 职务 */ .pi-roles{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px} .role-chip{font-size:13px;font-weight:600;color:var(--blue);background:var(--blue-50); border:1px solid #dbeafe;border-radius:20px;padding:4px 13px;letter-spacing:.02em} .pi-intro{background:var(--blue-50);border:1px solid #dbeafe;border-radius:12px;padding:16px 18px; font-size:14.5px;line-height:1.9;color:var(--ink-2);margin:0 0 16px} .pi-field,.pi-tags{margin-bottom:18px} .pi-field .lb,.pi-tags .lb{display:block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--blue);font-weight:700;margin-bottom:9px} .pi-field .tags,.pi-tags .tags{display:flex;flex-wrap:wrap;gap:7px} .pi-field .tag{background:var(--blue-50);border:1px solid #dbeafe;color:#1a5fa8} /* 邮箱 / 电话标签：可点，样式跟「研究方向」的标签保持一致 */ .pi-field .tag-link{text-decoration:none;cursor:pointer;transition:.18s} .pi-field .tag-link:hover{background:#dbeafe;border-color:#b9d6f5;color:#124a89} .mail-sep{color:var(--muted);margin:0 3px} .pi-tags .tag.tg{background:linear-gradient(180deg,#fff8e6,#ffefc9);border-color:#f0d79a;color:#8a5b00} .kv{display:grid;grid-template-columns:112px 1fr;gap:9px 16px;font-size:14.5px;margin-bottom:18px} .kv dt{color:var(--muted);font-size:calc(13.5px * var(--fz-all,1) * var(--fz-kv,1))} .kv dd{font-size:calc(15.5px * var(--fz-all,1) * var(--fz-kv,1))} .kv dd{margin:0;color:var(--ink)} .kv dd a{color:var(--blue)} .pi-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:4px} /* ============ PI 详情双栏 ============ */ .pgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px} .card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 26px;box-shadow:var(--sh-1)} .card+.card{margin-top:22px} .card-h{display:flex;align-items:center;gap:9px;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--line-2)} .card-h:before{content:"";width:3px;height:16px;border-radius:2px;background:var(--blue)} .card-h h3{font-size:16px;letter-spacing:.01em} .card-h .en{font-size:12px;color:var(--muted);letter-spacing:.06em} /* 时间轴 */ .tl{position:relative;padding-left:24px} .tl:before{content:"";position:absolute;left:4.5px;top:9px;bottom:9px;width:1px;background:var(--line)} .tl li{position:relative;padding-bottom:20px} .tl li:last-child{padding-bottom:0} .tl li:before{content:"";position:absolute;left:-24px;top:7px;width:10px;height:10px;border-radius:50%; background:#fff;border:2.5px solid var(--blue-2)} .tl .t1{font-size:14.5px;color:var(--ink);font-weight:500;line-height:1.6} .tl .t2{font-size:13px;color:var(--muted);margin-top:3px;line-height:1.65} /* 荣誉 */ .aw li{display:flex;gap:16px;padding:13px 0;border-bottom:1px dashed var(--line)} .aw li:last-child{border-bottom:0;padding-bottom:0} .aw .yr{flex:0 0 62px;font-size:13.5px;font-weight:700;color:var(--blue);letter-spacing:.02em;padding-top:1px} .aw .c1{font-size:14.5px;color:var(--ink);line-height:1.65} .aw .c2{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.6} /* 项目 */ .fund{margin-bottom:18px} .fund:last-child{margin-bottom:0} .fund-h{display:inline-block;font-size:13px;font-weight:600;color:var(--blue); background:var(--blue-100);padding:3px 12px;border-radius:20px;margin-bottom:10px} .fund li{padding:11px 0;border-bottom:1px dashed var(--line);font-size:14.5px;color:var(--ink)} .fund li:last-child{border-bottom:0} .fund li .m{font-size:12.5px;color:var(--muted);margin-top:3px} .fund li .amt{float:right;font-size:12.5px;color:var(--blue);font-weight:600} /* 报告 / 兼职 */ .rp li{display:flex;gap:14px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:14px;align-items:baseline} .rp li:last-child{border-bottom:0} .rp .yr{flex:0 0 62px;color:var(--muted);font-size:12.5px;letter-spacing:.02em} .rp .c1{flex:1;color:var(--ink);line-height:1.6} .rp .c2{font-size:12px;color:var(--muted);flex:0 0 auto} .pt li{padding:10px 0 10px 18px;position:relative;border-bottom:1px dashed var(--line);font-size:14px;color:var(--ink);line-height:1.65} .pt li:last-child{border-bottom:0} .pt li:before{content:"";position:absolute;left:2px;top:18px;width:6px;height:6px;border-radius:50%;background:var(--blue-2)} .pt .c2{display:block;font-size:12.5px;color:var(--muted);margin-top:2px} /* ========================================================== 成员卡片（3:4 竖版） ========================================================== */ .mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} /* 团队导师 / 实验系列：一行 3 人。限宽避免卡片被拉伸过大，照片同步改为 1:1 */ .mgrid.c3{grid-template-columns:repeat(3,1fr);max-width:1080px;margin:0 auto} .mgrid.c3 .pcard .ph{aspect-ratio:1/1} .mgrid.c3 .pcard .ph img{object-position:center 18%} /* 博士 / 硕士：横向卡片 —— 照片在左（4:5），成员信息在右 */ .mgrid.mh{grid-template-columns:repeat(2,1fr);gap:18px 22px} .pcard.h{display:grid;grid-template-columns:126px 1fr;align-items:stretch} .pcard.h .ph{aspect-ratio:4/5;height:100%;min-height:158px} .pcard.h .ph img{object-position:center 18%} .pcard.h .bd{padding:16px 18px;justify-content:flex-start} .pcard.h .nm{font-size:calc(17px * var(--fz-all,1) * var(--fz-card,1))} .pcard.h .sub{margin-top:3px} .pcard.h .sp{margin:12px 0 10px} .pcard.h .rows{gap:8px;font-size:13.5px;flex:0 0 auto} .pcard.h .rows .k{flex:0 0 40px} .pcard.h:hover .ph img{transform:scale(1.05)} .pcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden; transition:.26s;cursor:pointer;box-shadow:var(--sh-1);display:flex;flex-direction:column} .pcard:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:#cfe2f7} .pcard .ph{position:relative;aspect-ratio:3/4;background:linear-gradient(160deg,#123a63,#245c92 60%,#33739f); overflow:hidden;display:grid;place-items:center} .pcard .ph img{width:100%;height:100%;object-fit:cover;object-position:center 20%;transition:.55s} .pcard:hover .ph img{transform:scale(1.05)} .pcard .ph .ini{font-family:var(--serif);font-size:46px;font-weight:700;letter-spacing:.06em; color:rgba(255,255,255,.9);text-shadow:0 2px 20px rgba(6,26,48,.45);user-select:none} .pcard .bd{padding:15px 16px 17px;display:flex;flex-direction:column;flex:1} .pcard .nm{font-size:16.5px;font-weight:700;color:var(--navy);line-height:1.4} .pcard .sub{font-size:12px;color:var(--muted);letter-spacing:.04em;margin-top:2px} .pcard .tag{margin-top:10px;align-self:flex-start} .pcard .sp{height:1px;background:var(--line-2);margin:13px 0 11px} .pcard .rows{display:flex;flex-direction:column;gap:7px;font-size:13px;line-height:1.55;flex:1} .pcard .rows .r{display:flex;gap:9px} .pcard .rows .k{flex:0 0 46px;color:var(--muted);font-size:12.5px} .pcard .rows .v{flex:1;color:var(--ink-2);word-break:break-all} .pcard .rows .v a{color:var(--blue)} .pcard .go{margin-top:13px;font-size:13px;color:var(--blue);display:flex;align-items:center;gap:4px} .pcard:hover .go{gap:8px} /* ========================================================== 论文列表（按年份分组 · 编号排版） ========================================================== */ .yearbar{display:flex;align-items:center;gap:14px;margin:34px 0 6px} .yearbar:first-child{margin-top:8px} .yearbar .y{font-family:var(--serif);font-size:24px;font-weight:700;color:var(--navy);letter-spacing:.01em} .yearbar .ln{flex:1;height:1px;background:var(--line)} .yearbar .n{font-size:12px;color:var(--muted)} .pub{display:grid;grid-template-columns:54px 1fr;gap:16px;padding:20px 4px;border-bottom:1px solid var(--line-2); cursor:pointer;transition:.2s;align-items:start} .pub:hover{background:var(--blue-50);border-radius:10px} .pub .idx{font-size:13px;color:var(--muted);padding-top:3px;letter-spacing:.02em} .pub .idx b{color:var(--blue)} .pub .ttl{font-size:16px;font-weight:700;color:var(--navy);line-height:1.5;display:flex;align-items:center;gap:9px;flex-wrap:wrap} .pub .ttl .a{color:var(--blue);opacity:0;transition:.2s;transform:translateX(-4px)} .pub:hover .ttl .a{opacity:1;transform:translateX(0)} .pub .sub{font-size:14px;color:var(--ink-2);margin-top:6px;line-height:1.7} .pub .meta{font-size:12.5px;color:var(--muted);margin-top:8px;letter-spacing:.02em;display:flex;gap:14px;flex-wrap:wrap} .pub .meta .pdf{color:var(--blue);font-weight:500} .pub.thm{grid-template-columns:54px 1fr} .pub .bb{display:flex;gap:10px;align-items:center;font-size:13px;padding:12px 4px;border-bottom:1px solid var(--line-2);cursor:pointer} .pub .bb:hover{background:var(--blue-50);border-radius:10px} /* 简易行（毕业/专利等） */ .rlist{qbackground:#fff} .rlist li{display:flex;align-items:center;gap:16px;padding:15px 6px;border-bottom:1px solid var(--line-2); cursor:pointer;transition:.2s} .rlist li:hover{background:var(--blue-50);border-radius:10px} .rlist .idx{flex:0 0 44px;font-size:13px;color:var(--muted)} .rlist .tx{flex:1;font-size:15px;color:var(--navy);font-weight:500;line-height:1.6} .rlist .dt{font-size:12.5px;color:var(--muted);flex:0 0 auto} .rlist .ar{color:var(--blue);opacity:0;transition:.2s} .rlist li:hover .ar{opacity:1} /* ============ 选项卡 ============ */ .tabs{display:flex;gap:8px;flex-wrap:wrap;background:#fff;border:1px solid var(--line); border-radius:14px;padding:7px;box-shadow:var(--sh-1);margin-bottom:26px} .tabs .tab{border:0;background:transparent;padding:10px 20px;border-radius:10px;font-size:14.5px; color:var(--ink-2);cursor:pointer;transition:.2s;display:flex;align-items:center;gap:7px;white-space:nowrap} .tabs .tab:hover{background:var(--blue-50);color:var(--blue)} .tabs .tab.on{background:linear-gradient(135deg,var(--blue),var(--blue-2));color:#fff;font-weight:600; box-shadow:var(--sh-blue)} .tabs .tab .n{font-size:12px;opacity:.72} /* ============ 新闻 / 相册 / 设施 ============ */ .ngrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .ncard{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden; display:flex;flex-direction:column;transition:.26s;cursor:pointer;box-shadow:var(--sh-1)} .ncard:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:#cfe2f7} .ncard .ph{aspect-ratio:16/10;background:var(--line-2);overflow:hidden;position:relative} .ncard .ph img{width:100%;height:100%;object-fit:cover;transition:.55s} .ncard:hover .ph img{transform:scale(1.05)} .ncard .bd{padding:15px 17px 18px;flex:1;display:flex;flex-direction:column} .ncard .dt{font-size:12px;color:var(--blue);letter-spacing:.05em;margin-bottom:7px;font-weight:500} /* 标题一律换行显示完整，不做行数截断（原来 clamp 到 2 行会把长标题吃掉） */ .ncard h4{font-size:15.5px;line-height:1.6;font-weight:600;color:var(--navy);word-break:break-word} .ncard:hover h4{color:var(--blue)} /* 组内动态：卡片样式保持不变，整条轨道由右向左无缝滚动 */ .mq-view{overflow:hidden;position:relative; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 44px,#000 calc(100% - 44px),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 44px,#000 calc(100% - 44px),transparent 100%)} .mq-track{display:flex;width:max-content;will-change:transform;animation:mqRoll linear infinite} .mq-track:hover{animation-play-state:paused} .ngrid.mq{display:flex;gap:20px;width:max-content;padding-right:20px} .ngrid.mq .ncard{width:400px;flex:0 0 400px} @keyframes mqRoll{from{transform:translateX(0)}to{transform:translateX(var(--mq-shift,-50%))}} @media(max-width:1100px){.ngrid.mq .ncard{width:326px;flex:0 0 326px}} @media(max-width:620px){.ngrid.mq .ncard{width:264px;flex:0 0 264px}} /* 首页「最新成果」固定 4 个，窄屏降为 2 列 / 1 列，避免出现落单的孤儿卡 */ @media(max-width:920px){.home-pub .tocgrid{grid-template-columns:repeat(2,1fr)}} @media(max-width:620px){.home-pub .tocgrid{grid-template-columns:1fr}} .ggrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .gitem{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:var(--line-2); cursor:pointer;border:1px solid var(--line)} .gitem img{width:100%;height:100%;object-fit:cover;transition:.55s} .gitem:hover img{transform:scale(1.06)} /* 相册标题同样完整换行，不截断 */ .gitem .cap{position:absolute;left:0;right:0;bottom:0;padding:30px 14px 12px;font-size:13.5px;color:#fff; line-height:1.55;background:linear-gradient(180deg,rgba(10,32,54,0),rgba(10,32,54,.82)); word-break:break-word} .fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .fcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden; cursor:pointer;transition:.26s;box-shadow:var(--sh-1)} .fcard:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:#cfe2f7} .fcard .ph{aspect-ratio:4/3;background:var(--line-2);overflow:hidden} .fcard .ph img{width:100%;height:100%;object-fit:cover;transition:.55s} .fcard:hover .ph img{transform:scale(1.05)} .fcard .nm{padding:13px 16px 16px;font-size:calc(14.5px * var(--fz-all,1) * var(--fz-card,1));color:var(--navy);font-weight:500;line-height:1.6} /* ---- 学术资源：一张图 + 名称 + 一行说明 ---- 图用 contain（logo / 网站截图不能被裁），底衬浅蓝，没图时用首字渐变块占位。 */ .rgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .rcard{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden; transition:.24s;box-shadow:var(--sh-1);text-decoration:none;color:inherit} .rcard:hover{border-color:#cfe2f7;box-shadow:var(--sh-2);transform:translateY(-4px)} .rcard .ph{aspect-ratio:16/10;display:grid;place-items:center;overflow:hidden; background:linear-gradient(160deg,#f4f8fd,#e7f0fa)} .rcard .ph img{width:100%;height:100%;object-fit:contain;padding:12px;transition:.4s} .rcard:hover .ph img{transform:scale(1.05)} .rcard .ph .ic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center; background:linear-gradient(145deg,var(--blue),var(--navy));color:#fff; font-size:19px;font-weight:700;letter-spacing:.02em;box-shadow:0 6px 16px rgba(30,111,196,.28)} .rcard .tx{padding:12px 15px 15px} .rcard .tx b{display:block;font-size:calc(15px * var(--fz-all,1) * var(--fz-card,1));color:var(--navy);font-weight:600;line-height:1.5; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rcard .tx small{display:block;margin-top:5px;font-size:calc(12.5px * var(--fz-all,1) * var(--fz-sub,1));color:var(--muted);line-height:1.6; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ---- 仪器预约 ---- */ .bkgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .bkcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden; transition:.26s;box-shadow:var(--sh-1);display:flex;flex-direction:column} .bkcard:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:#cfe2f7} .bkcard .ph{aspect-ratio:4/3;background:linear-gradient(160deg,#f4f8fd,#e7f0fa); display:grid;place-items:center;overflow:hidden} .bkcard .ph img{width:100%;height:100%;object-fit:cover;transition:.55s} .bkcard:hover .ph img{transform:scale(1.05)} .bkcard .ph .ic{width:64px;height:64px;border-radius:18px;display:grid;place-items:center; background:linear-gradient(145deg,var(--blue),var(--navy));color:#fff;font-size:24px;font-weight:700; box-shadow:0 6px 16px rgba(30,111,196,.28)} .bkcard .tx{padding:14px 17px 17px;display:flex;flex-direction:column;gap:7px;flex:1} .bkcard .tx b{font-size:calc(15.5px * var(--fz-all,1) * var(--fz-card,1));color:var(--navy);font-weight:600;line-height:1.55} .bkcard .tx p{margin:0;font-size:13px;color:var(--muted);line-height:1.7;flex:1} .bkcard .tx .bk-meta{font-size:12.5px;color:var(--muted);line-height:1.6} .bkcard .tx .bk-meta:before{content:"\1F551\00a0";font-size:11.5px} .bk-ops{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px} .bk-ops .btn.s{padding:7px 14px;font-size:13px} /* 预约须知：Tab 顶上的一条淡蓝提示 */ .bknote{margin:0 0 18px;padding:13px 16px;border-radius:12px;font-size:13.5px;line-height:1.75; color:#2b4d70;background:#f2f7fd;border:1px solid #d8e7f7;white-space:pre-wrap} .cgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .ccard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 16px;text-align:center; transition:.26s;box-shadow:var(--sh-1)} /* 合作交流的卡片只展示信息，不跳详情页，所以不做手势提示 */ .ccard.flat{cursor:default} .ccard.flat:hover{border-color:#cfe2f7;box-shadow:var(--sh-2);transform:none} .ccard .sub{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.7;word-break:break-word} .ccard:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:#cfe2f7} .ccard .ph{width:88px;height:88px;margin:2px auto 14px;border-radius:50%;overflow:hidden;background:var(--line-2); border:3px solid #fff;box-shadow:0 4px 14px rgba(16,47,82,.12)} .ccard .ph img{width:100%;height:100%;object-fit:cover} .ccard .tx{font-size:calc(14.5px * var(--fz-all,1) * var(--fz-card,1));color:var(--navy);font-weight:500;line-height:1.6} /* ============ 详情页 ============ */ .dwrap{max-width:900px;margin:0 auto} .dhead{padding:34px 0 22px;border-bottom:1px solid var(--line);margin-bottom:28px} .dhead h1{font-size:calc(29px * var(--fz-all,1) * var(--fz-dt,1));line-height:1.4;letter-spacing:-.015em;margin-bottom:14px} .dmeta{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--muted)} .dmeta .pill{background:var(--blue-100);color:var(--blue);padding:2px 11px;border-radius:20px;font-size:12.5px} .dbody{font-size:calc(16px * var(--fz-all,1) * var(--fz-body,1));line-height:2;color:var(--ink-2)} .dbody img{max-width:100%;height:auto;border-radius:12px;margin:16px 0;box-shadow:var(--sh-1)} .dbody a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;word-break:break-all} .dbody h3{font-size:calc(17px * var(--fz-all,1) * var(--fz-body,1));color:var(--navy);margin:24px 0 10px} .dbody b,.dbody strong{color:var(--ink)} .dbody u{text-decoration:none} .abstract{background:var(--blue-50);border:1px solid #dbeafe;border-radius:12px;padding:18px 20px; font-size:15px;line-height:1.95;color:var(--ink-2);margin-bottom:22px} .abstract .lb{font-size:12px;color:var(--blue);letter-spacing:.12em;font-weight:600; text-transform:uppercase;margin-bottom:8px} .actbar{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 6px} /* PDF 预览 */ .pdfbox{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; box-shadow:var(--sh-1);margin:26px 0 8px} .pdfbox .hd{display:flex;align-items:center;gap:11px;padding:14px 20px;border-bottom:1px solid var(--line); background:var(--blue-50)} .pdfbox .hd .ic{width:30px;height:30px;border-radius:8px;background:#e34b4b;color:#fff;display:grid; place-items:center;font-size:10px;font-weight:700;letter-spacing:.02em} .pdfbox .hd b{font-size:14.5px;color:var(--navy);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pdfbox .hd b em{font-style:normal;font-size:12.5px;color:var(--muted);margin-left:8px;font-weight:400} .pdfbox .hd .act{display:flex;gap:8px;flex:0 0 auto} .pdfbox .hd .act a,.pdfbox .hd .act .fsbtn{font-size:13px;color:var(--blue);padding:5px 13px;border:1px solid #cfe2f7; border-radius:8px;background:#fff;transition:.2s;white-space:nowrap;cursor:pointer; font-family:inherit;line-height:1.6} .pdfbox .hd .act a:hover,.pdfbox .hd .act .fsbtn:hover{background:var(--blue);color:#fff;border-color:var(--blue)} .pdfbox object,.pdfbox iframe{width:100%;height:78vh;min-height:560px;border:0;display:block;background:#fff} /* 全屏预览 */ .pdfbox:fullscreen{border-radius:0;border:0;height:100vh;display:flex;flex-direction:column;margin:0} .pdfbox:fullscreen .hd{flex:0 0 auto} .pdfbox:fullscreen object,.pdfbox:fullscreen iframe{flex:1;height:auto;min-height:0} .pdfbox:-webkit-full-screen{border-radius:0;border:0;height:100vh;display:flex;flex-direction:column;margin:0} .pdfbox:-webkit-full-screen object{flex:1;height:auto;min-height:0} .pdfbox .fb{height:78vh;min-height:300px;display:grid;place-items:center;padding:30px; text-align:center;color:var(--ink-2);font-size:14.5px;line-height:2; background:linear-gradient(180deg,#fff,#f4f8fc)} .pdfbox .fb a{color:var(--blue);text-decoration:underline;text-underline-offset:3px} /* ========================================================== 首页顶部 · 整行照片轮播 ---------------------------------------------------------- 内容与顺序都在后台「首页管理」里配。 --hb-h 是桌面端最大高度；窄屏按 34vw 自动变矮。只有一张照片时不显示箭头/圆点，也不自动切换。 ========================================================== */ .hb{position:relative;background:var(--navy)} .hb-vp{position:relative;width:100%;height:clamp(190px,32vw,var(--hb-h,420px));overflow:hidden} .hb-tr{position:absolute;inset:0} .hb-sl{position:absolute;inset:0;display:block;opacity:0;transition:opacity .7s ease} .hb-sl.on{opacity:1} /* 照片适配：默认「填满整行」，可在后台切成不裁切的两种 */ .hb-sl .hb-mn{display:block;width:100%;height:100%} .hb.fit-cover .hb-mn{object-fit:cover} .hb.fit-contain .hb-mn,.hb.fit-blur .hb-mn{object-fit:contain} .hb.fit-contain .hb-vp{background:#0d2242} .hb.fit-blur .hb-vp{background:#0d2242} /* 完整显示时，两侧空白用同一张图放大虚化补上 */ .hb.fit-blur .hb-bl{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover; transform:scale(1.25);filter:blur(30px) saturate(1.15);opacity:.5} .hb.fit-blur .hb-mn{position:relative;z-index:1} .hb-nv{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px; border:0;border-radius:50%;cursor:pointer;padding:0 0 3px;line-height:1; font-size:26px;font-family:var(--serif);color:var(--navy);background:rgba(255,255,255,.82); box-shadow:0 4px 14px rgba(16,47,82,.2);backdrop-filter:blur(6px);transition:.22s;opacity:.9} .hb-nv:hover{background:#fff;opacity:1} .hb-pv{left:22px} .hb-nx{right:22px} .hb-dots{position:absolute;left:0;right:0;bottom:16px;z-index:3;display:flex;justify-content:center;gap:9px} .hb-dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer; background:rgba(255,255,255,.55);box-shadow:0 1px 4px rgba(11,36,62,.35);transition:.22s} .hb-dots button.on{background:#fff;width:26px;border-radius:6px} /* ========================================================== 出版物 · 3:4 TOC 图卡片网格 ========================================================== */ .filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 20px} .filters .lb2{font-size:13px;color:var(--muted);margin-right:2px} .chip{border:1px solid var(--line);background:#fff;border-radius:20px;padding:6px 15px;font-size:13.5px; color:var(--ink-2);cursor:pointer;transition:.2s;line-height:1.6} .chip:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-50)} .chip.on{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:500} .tocgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .tcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden; display:flex;flex-direction:column;cursor:pointer;transition:.26s;box-shadow:var(--sh-1)} .tcard:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:#cfe2f7} /* 整块填充：上传的 TOC 图铺满整个 4:3 卡片，不再留白 / 不再被遮罩压暗 */ .tcard .ph{position:relative;aspect-ratio:4/3;background:#f4f8fc;overflow:hidden; display:grid;place-items:center} .tcard .ph.fill{display:block;background:#eef4fa} .tcard .ph.fill:before,.tcard .ph.fill:after{display:none} .tcard .ph img{position:relative;z-index:2;width:100%;height:100%;object-fit:cover; object-position:center;transition:.5s;display:block} .tcard:hover .ph img{transform:scale(1.035)} .tcard .ph .no{font-family:var(--serif);font-size:40px;color:#c9dced;letter-spacing:.02em} /* 重点推荐小黄星（后台可勾选） */ .stk{display:inline-block;vertical-align:middle;color:#f5b301;font-size:15px;line-height:1; text-shadow:0 1px 3px rgba(120,80,0,.28);margin-left:5px} .tcard .ph .stk{position:absolute;top:10px;right:11px;z-index:4;font-size:19px;margin:0; text-shadow:0 2px 8px rgba(0,0,0,.45);filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))} .stkc{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.04em;color:#8a5b00; background:linear-gradient(180deg,#fff5d6,#ffe9ab);border:1px solid #f2d489;border-radius:20px; padding:2px 9px;white-space:nowrap} .tcard .ft .stkc{margin-left:auto} .tcard .ft .dv{margin-left:8px} .dlinks .stkc,.dlinks a.stkc{color:#8a5b00;background:linear-gradient(180deg,#fff5d6,#ffe9ab); border:1px solid #f2d489;border-radius:8px;padding:5px 12px;font-size:13px} .pub .meta .stkc{margin-right:4px} .rlist .tx .stk{font-size:13px} .tcard .bd{padding:14px 15px 16px;flex:1;display:flex;flex-direction:column} .tcard .jr{font-size:15px;font-weight:700;color:var(--navy);line-height:1.45} .tcard:hover .jr{color:var(--blue)} .tcard .au{font-size:12.5px;color:var(--ink-2);line-height:1.65;margin-top:7px; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .tcard .ft{margin-top:auto;padding-top:12px;display:flex;align-items:center;gap:8px; font-size:12px;color:var(--muted);border-top:1px solid var(--line-2)} .tcard .ft .dv{margin-left:auto;color:var(--blue);font-weight:500;white-space:nowrap} /* ========================================================== 详情页 · TOC 图 + 元信息 ========================================================== */ /* 图片列放大一些（原来 300 / 320px 照片偏小），右侧文字相应右移。图片依旧按真实比例完整显示，不裁切。 */ .dtop{display:grid;grid-template-columns:420px 1fr;gap:34px;align-items:start;margin-bottom:8px} .dtop.mem{grid-template-columns:460px 1fr;gap:38px} .dtop .pcol{min-width:0} /* 详情页图片：容器比例由 JS 设为图片真实比例，图片整块铺满 —— 保证完整显示、不裁切 */ .dtop .toc{position:relative;border:1px solid var(--line);border-radius:var(--r); aspect-ratio:4/3;background:#f4f8fc;display:grid;place-items:center;overflow:hidden; box-shadow:var(--sh-1)} .dtop .toc.fill{display:block;background:#eef4fa} .dtop .toc.fill:before,.dtop .toc.fill:after{display:none} .dtop .toc img{position:relative;z-index:2;width:100%;height:100%;object-fit:cover; object-position:center;display:block} .dtop .toc .no{position:relative;z-index:2} .dtop .toc .no{font-family:var(--serif);font-size:44px;color:#c5d9ea} .dtip{margin-top:16px;font-size:14px;line-height:1.8;color:var(--muted); background:var(--blue-50);border:1px solid #dbeafe;border-radius:10px;padding:12px 14px} .dtop .tocl{margin-top:10px;text-align:center;font-size:11.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--muted)} .dinfo{min-width:0} .dinfo h1{font-size:calc(27px * var(--fz-all,1) * var(--fz-dt,1));line-height:1.42;letter-spacing:-.018em;margin-bottom:12px} .dinfo .kv{margin-bottom:14px} .dlinks{display:flex;gap:9px;flex-wrap:wrap;margin-top:4px} .dlinks a{font-size:13px;color:var(--blue);border:1px solid #cfe2f7;background:var(--blue-50); padding:5px 13px;border-radius:8px;transition:.2s} .dlinks a:hover{background:var(--blue);color:#fff;border-color:var(--blue)} /* 上下篇导航 */ .pnav{display:flex;gap:14px;margin:34px 0 6px} .pnav a{flex:1;min-width:0;background:#fff;border:1px solid var(--line);border-radius:var(--r); padding:14px 18px;transition:.22s;box-shadow:var(--sh-1)} .pnav a:hover{border-color:#cfe2f7;box-shadow:var(--sh-2)} .pnav a .k{font-size:11.5px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase} .pnav a .t{font-size:14.5px;color:var(--navy);font-weight:500;margin-top:4px;line-height:1.6; word-break:break-word} .pnav a.r{text-align:right} /* ============ 分页 / 空态 ============ */ .pager{display:flex;justify-content:center;align-items:center;gap:7px;flex-wrap:wrap;margin:34px 0 4px} .pager button{min-width:36px;height:36px;padding:0 12px;border:1px solid var(--line);background:#fff; border-radius:9px;font-size:14px;color:var(--ink-2);cursor:pointer;transition:.2s;line-height:1} .pager button:hover:not(:disabled):not(.on){border-color:var(--blue);color:var(--blue);background:var(--blue-50)} .pager button.on{background:linear-gradient(135deg,var(--blue),var(--blue-2));color:#fff; border-color:transparent;font-weight:600;box-shadow:var(--sh-blue)} .pager button:disabled{opacity:.4;cursor:default} .pager .pg-nav{padding:0 15px;font-size:13.5px} .pager .gap{color:var(--muted);padding:0 2px;user-select:none} .pager .info{font-size:12.5px;color:var(--muted);margin-left:8px} .more-wrap{text-align:center;margin:30px 0 6px} .more-btn{padding:11px 32px;border-radius:10px;border:1px solid var(--line);background:#fff; color:var(--ink-2);font-size:14.5px;cursor:pointer;transition:.22s} .more-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-50)} .empty{padding:70px 0;text-align:center;color:var(--muted)} .empty a{color:var(--blue);text-decoration:underline} /* ============ 统计条 ============ */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:26px} .stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;box-shadow:var(--sh-1)} .stat b{display:block;font-size:30px;font-weight:700;color:var(--navy);line-height:1.2; font-family:var(--serif);letter-spacing:-.01em} .stat b i{font-style:normal;font-size:14px;color:var(--muted);font-weight:400;margin-left:3px} .stat span{font-size:13.5px;color:var(--muted)} /* ============ 方向卡片 ============ */ .dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .dcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 24px 22px; position:relative;overflow:hidden;transition:.26s;box-shadow:var(--sh-1)} .dcard:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:#cfe2f7} .dcard .no{font-family:var(--serif);font-size:32px;font-weight:700;color:var(--blue-100);line-height:1;margin-bottom:10px} .dcard h4{font-size:16px;line-height:1.6;margin-bottom:7px} .dcard .en{font-size:12.5px;color:var(--muted);line-height:1.65;min-height:3.2em} .dcard p{font-size:14px;color:var(--ink-2);line-height:1.85;margin-top:10px;padding-top:12px; border-top:1px solid var(--line-2)} /* ============ 页脚 ============ */ .footer{background:var(--navy);color:rgba(255,255,255,.7);padding:52px 0 26px;margin-top:20px} .footer .fg{display:grid;grid-template-columns:1.5fr 1.1fr;gap:48px} .footer .fg.has-wx{grid-template-columns:1.32fr 1fr 1.1fr;gap:38px} .footer h5{margin:0 0 16px;font-size:16px;color:#fff;font-weight:600} /* 页脚标识：同样只放一张图、不垫白底，透明 PNG 直接压在深蓝页脚上 */ .footer .fl{display:flex;align-items:center;margin-bottom:18px} .footer .fl .mark{height:auto;width:auto;padding:0;border-radius:0;background:transparent; display:flex;align-items:center;flex:0 0 auto} .footer .fl .mark img{display:block;height:var(--foot-logo,46px);width:auto;max-width:300px;object-fit:contain} .footer .fl .mark.no-img{display:none} /* 页脚微信公众号：整图按比例放，给足宽度才扫得动 */ .footer .wx-img{display:block;width:100%;max-width:420px;border-radius:12px;overflow:hidden; background:transparent;padding:0;line-height:0;transition:.25s} .footer .wx-img:hover{transform:translateY(-2px);opacity:.92} .footer .wx-img img{display:block;width:100%;height:auto} .footer .wx-tip{margin-top:11px;font-size:13px;line-height:1.7;color:rgba(255,255,255,.6)} .footer .ct li{display:flex;gap:9px;font-size:14px;line-height:1.85;margin-bottom:10px;color:rgba(255,255,255,.72)} .footer .ct b{color:rgba(255,255,255,.95);font-weight:500;flex:0 0 42px} .footer .ct li span{flex:1;min-width:0} .footer .bot{margin-top:34px;padding-top:18px;border-top:1px solid rgba(255,255,255,.13); display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:rgba(255,255,255,.45)} .to-top{position:fixed;right:26px;bottom:30px;width:44px;height:44px;border-radius:12px;display:grid; place-items:center;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2);cursor:pointer; color:var(--navy);z-index:60;opacity:0;pointer-events:none;transition:.25s;font-size:17px} .to-top.on{opacity:1;pointer-events:auto} .to-top:hover{color:var(--blue)} /* 灯箱：必须用 #lb 限定，不能用 .lb —— .lb 这个类名同时被 .subnav .lb / .pi-field .lb / .pi-tags .lb / .abstract .lb 当作小标签使用，若在这里写成 .lb 会把那些标签也变成全屏遮罩，导致整页被盖住。 */ #lb{position:fixed;inset:0;background:rgba(10,28,48,.92);z-index:200;display:none; align-items:center;justify-content:center;padding:40px} #lb.on{display:flex} #lb img{max-width:92%;max-height:80%;border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.5)} #lb .cap{position:absolute;bottom:32px;left:0;right:0;text-align:center;color:#fff;font-size:15px;padding:0 30px} #lb .x{position:absolute;top:22px;right:30px;color:#fff;font-size:34px;cursor:pointer;opacity:.85;line-height:1} #lb .x:hover{opacity:1} /* ============ 响应式 ============ */ @media (max-width:1120px){ .mgrid,.ggrid,.rgrid,.cgrid,.tocgrid{grid-template-columns:repeat(3,1fr)} .pi-hero{grid-template-columns:340px 1fr;gap:28px} .dtop{grid-template-columns:340px 1fr;gap:26px} .dtop.mem{grid-template-columns:360px 1fr;gap:28px} } /* 导航单独一档：字号加大后 9 个栏目在 1200 以下就会开始挤 logo，这里先收一档 */ @media (max-width:1200px){ .header .wrap{gap:14px;height:84px} .brand .mark,.brand .mark img{height:calc(var(--nav-logo,48px) * .92)} .nav{gap:5px} .nav a{padding:10px 12px;font-size:calc(16px * var(--fz-all,1) * var(--fz-nav,1));letter-spacing:0} .nav a.on:after{left:12px;right:12px} } @media (max-width:920px){ .header .wrap{height:auto;padding:12px 0;flex-wrap:wrap} .burger{display:block} .nav{display:none;width:100%;flex-direction:column;align-items:stretch;margin:8px 0 4px;gap:3px} .nav.open{display:flex} .nav a{padding:13px 16px;font-size:calc(17px * var(--fz-all,1) * var(--fz-nav,1))} .nav a:hover{background:var(--head-hover)} .nav a.on:after{display:none} .nav a.on{background:var(--head-onbg)} /* 窄屏下品牌带收一档，别把首屏挤满；两个 logo 仍等高，只是间距缩小 */ .bbar .wrap{height:calc(var(--bb-h,132px) * .78);gap:calc(var(--bb-gap,56px) * .6)} .wrap{padding:0 22px} .pi-hero{grid-template-columns:1fr;gap:22px} .pi-col{max-width:460px;width:100%;margin:0 auto} .pgrid,.ngrid,.dgrid,.fgrid,.bkgrid{grid-template-columns:repeat(2,1fr)} .mgrid,.ggrid,.rgrid,.cgrid,.tocgrid{grid-template-columns:repeat(2,1fr)} .mgrid.c3{grid-template-columns:repeat(2,1fr);max-width:none} .mgrid.c3 .pcard .ph{aspect-ratio:3/4} .stats{grid-template-columns:repeat(2,1fr)} .hb-vp{height:clamp(180px,46vw,300px)} .hb-nv{width:38px;height:38px;font-size:22px} .hb-pv{left:12px} .hb-nx{right:12px} .dtop,.dtop.mem{grid-template-columns:1fr;gap:20px} .dtop .toc{max-width:560px;margin:0 auto} .mgrid.mh{grid-template-columns:1fr} .pb{padding:32px 0 8px} .pb h1{font-size:31px} .pb-en{font-size:15.5px;margin-left:10px} .pb .sub{font-size:16px;margin-top:10px} .dinfo h1{font-size:24px} .footer .fg,.footer .fg.has-wx{grid-template-columns:1fr;gap:26px} .dhead h1{font-size:24px} } @media (max-width:600px){ .mgrid,.ggrid,.rgrid,.cgrid,.ngrid,.dgrid,.fgrid,.pgrid,.tocgrid,.bkgrid{grid-template-columns:1fr} .mgrid.c3{grid-template-columns:1fr;max-width:none} .mgrid.c3 .pcard .ph{aspect-ratio:3/4} .tocgrid{gap:16px} .ggrid{grid-template-columns:repeat(2,1fr);gap:12px} .pub{grid-template-columns:34px 1fr;gap:10px} .kv{grid-template-columns:88px 1fr} .pi-name{font-size:26px} .pcard.h{grid-template-columns:104px 1fr} .pcard.h .ph{min-height:130px} .mgrid.mh{grid-template-columns:1fr} .footer .bot{flex-direction:column;gap:6px} /* 窄屏：logo 收一档，避免顶栏被长方形 logo 撑出横向滚动 */ .brand .mark,.brand .mark img{height:calc(var(--nav-logo,48px) * .8)} .brand .mark img{max-width:210px} .brand .mark.no-img{width:calc(var(--nav-logo,48px) * .8);font-size:10px;border-radius:9px} .footer .fl .mark img{height:calc(var(--foot-logo,46px) * .8);max-width:220px} .pb{padding:26px 0 6px} .pb h1{font-size:27px} .pb-en{display:block;margin:7px 0 0;font-size:15px} .pb .sub{font-size:15.5px} .pb .crumb{font-size:13.5px} .bbar .wrap{height:calc(var(--bb-h,132px) * .62);gap:calc(var(--bb-gap,56px) * .42)} .bbar .slot{max-width:46%} } /* ========================================================== 按钮的「小号 / 主色 / 次要」三种规格后台 admin.css 里一直有，前台之前只有基础 .btn；预约页、仪器卡片都要用小号按钮，这里补上（不影响已有页面）。 ========================================================== */ .btn.s{padding:7px 15px;font-size:13.5px;border-radius:9px} .btn.p{background:linear-gradient(135deg,var(--blue),var(--blue-2));color:#fff;border-color:transparent; box-shadow:0 6px 18px rgba(30,111,196,.2)} .btn.p:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(30,111,196,.3)} .btn.ghost{background:#fff;border-color:var(--line);color:var(--ink-2)} .btn.ghost:hover{border-color:var(--blue);color:var(--blue)} .btn.danger{background:linear-gradient(135deg,#d9463f,#e8665e);border-color:transparent; box-shadow:0 6px 18px rgba(217,70,63,.22)} .btn.danger:hover{box-shadow:0 10px 24px rgba(217,70,63,.3)} .btn.dis,.btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none} a.btn.dis{pointer-events:none} /* ========================================================== 仪器预约 ------------------------------------------------------------ .bktable 是一张真正的表格：行 = 时段，列 = 日期。格子四态：free 可约 / mine 我约的 / busy 别人约的 / past 已过期。窄屏时表格横向滚动，第一列（时段）吸在左边不动。 ========================================================== */ /* 顶栏：我是谁 + 可约规则 + 退出 */ .bkbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#fff;border:1px solid var(--line); border-radius:var(--r);padding:12px 18px;box-shadow:var(--sh-1);margin-bottom:18px} .bkbar-me{display:flex;align-items:center;gap:9px;font-weight:600;color:var(--navy)} .bkbar-me img{width:32px;height:32px;border-radius:50%;object-fit:cover;border:1px solid var(--line)} .bkbar-me em{font-style:normal;font-weight:400;font-size:13px;color:var(--muted)} .bk-adm{font-style:normal;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:6px; background:var(--gold-100);color:#a9701d} .bkback{font-weight:500;font-size:13.5px;color:var(--blue);margin-right:4px} .bkbar-meta{margin-left:auto;font-size:13px;color:var(--muted)} .bkbar-out{font-size:13px;color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:5px 12px;transition:.2s} .bkbar-out:hover{color:var(--blue);border-color:var(--blue)} /* 右上角两个入口：我的资料 / 退出 */ .bkbar-me2{display:flex;gap:8px;flex:none} .bkbar-me2 .bkbar-out{white-space:nowrap} /* 「姓名还没读到」的提醒条 */ .bkhelp{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;background:#fffaf0; border:1px solid #f0d9a8;border-radius:var(--r);padding:12px 18px;margin-bottom:18px; font-size:13.5px;line-height:1.7;color:var(--ink-2)} .bkhelp b{color:#a9701d;flex:none} .bkhelp code{background:#fff;border:1px solid #f0d9a8;border-radius:5px;padding:1px 7px;font-size:12.5px} /* 我的资料：改名卡片 */ .bkprof{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 22px; box-shadow:var(--sh-1);margin-bottom:26px} .bkprof h3{margin:0;font-size:16px;color:var(--navy)} .bkprof-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .bkprof-form input[type=text]{width:220px;padding:9px 12px;border:1px solid var(--line); border-radius:9px;font-size:14px;font-family:inherit;color:var(--ink)} .bkprof-form input[type=text]:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-50)} /* 我的资料：四张卡片两列排（窄屏自动单列） */ .bkprof-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:8px} @media (max-width:820px){.bkprof-grid{grid-template-columns:1fr}} .bkprof-grid .bkprof{margin-bottom:0} .bkprof-lock{display:inline-block;margin-left:8px;font-style:normal;font-size:12px;font-weight:400; background:#eef4fb;color:#2b5f96;border:1px solid #d6e8fb;border-radius:20px;padding:2px 10px} .bkprof-locked{background:var(--blue-50);border:1px dashed #c9dcf3;border-radius:10px;padding:14px 16px} .bkprof-locked .v{font-size:19px;font-weight:700;color:var(--navy);margin-bottom:6px} .bkprof-locked span{font-size:13px;color:var(--muted);line-height:1.85} .bkprof-locked b{color:#143d68} .bkprof-pass{flex-direction:column;align-items:stretch;gap:9px} .bkprof-pass input[type=password]{width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid var(--line); border-radius:9px;font-size:14px;font-family:inherit;color:var(--ink)} .bkprof-pass input[type=password]:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-50)} .bkprof-pass button{align-self:flex-start;margin-top:3px} /* 姓名锁定后的提示弹窗 */ .bkdlg h3{font-size:17px;margin-bottom:12px} .bkdlg-btns{display:flex;justify-content:flex-end;gap:10px;margin-top:18px} /* 图例 */ .bklegend{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px;color:var(--ink-2);margin-bottom:14px} .bklegend span{display:inline-flex;align-items:center;gap:7px} .bklegend .lg{width:16px;height:16px;border-radius:5px;border:1px solid;flex:none} .lg.free{background:#fafdff;border-color:#d9e8f8} .lg.mine{background:var(--blue-100);border-color:var(--blue)} .lg.busy{background:#e9edf2;border-color:#d7dee7} .lg.past{background:#eef1f5;border-color:#e0e5ec} /* 翻页条 */ .bkwk{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:14px} .bkwk-t{font-size:13.5px;color:var(--muted)} /* 表格本体 */ .bkscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line); border-radius:var(--r);background:#fff;box-shadow:var(--sh-1)} .bktable{border-collapse:separate;border-spacing:0;width:100%;min-width:640px;font-size:13.5px} .bktable th{border-bottom:1px solid var(--line);background:var(--blue-50);color:var(--ink-2);font-weight:600} .bktable thead th{padding:9px 6px;text-align:center;line-height:1.4} .bktable thead th b{display:block;color:var(--navy);font-size:14px} .bktable thead th em{display:block;font-style:normal;font-size:11.5px;font-weight:400;color:var(--muted)} .bktable thead th.we{background:var(--gold-100)} .bktable thead th.we b{color:#a9701d} .bktable thead th.we em{color:#b98a4a} /* 今天那一列给个明显标记：底色深一档 + 顶部蓝条 */ .bktable thead th.today{background:#d8eafb;box-shadow:inset 0 3px 0 var(--blue)} .bktable thead th.today b{color:var(--blue)} .bktable thead th.today em{color:var(--blue);font-weight:600} .bktable th.h{position:sticky;left:0;z-index:2;width:104px;min-width:104px;padding:8px 10px;text-align:center; background:var(--blue-50);color:var(--ink-2);font-variant-numeric:tabular-nums;border-right:1px solid var(--line)} .bktable tbody th.h{background:#fafcfe;color:var(--ink-2);font-weight:500} .bktable td{border-bottom:1px solid var(--line-2)} .bktable tbody tr:last-child td{border-bottom:0} /* 格子 */ .bkcell{height:46px;min-width:78px;text-align:center;vertical-align:middle;cursor:default; font-size:13px;color:var(--muted);transition:background .15s,border-color .15s; border-right:1px solid var(--line-2);position:relative} /* 可预约：淡蓝底 + 蓝边，一眼看出「这一格能点」 */ .bkcell.free{background:#fafdff;cursor:pointer;box-shadow:inset 0 0 0 1px #d9e8f8} .bkcell.free:hover{background:var(--blue-100);box-shadow:inset 0 0 0 2px var(--blue-2);color:var(--blue);font-weight:600} .bkcell.free:after{content:"+";position:absolute;inset:0;display:grid;place-items:center; color:#c2d9f0;font-size:17px;font-weight:400;opacity:0;transition:opacity .15s} .bkcell.free:hover:after{opacity:1} .bkcell.mine{background:var(--blue-100);color:var(--blue);font-weight:700;cursor:pointer; box-shadow:inset 0 0 0 1px var(--blue)} .bkcell.mine:hover{background:#d3e5f9} .bkcell.busy{background:#e9edf2;color:#7e8b9c;box-shadow:inset 0 0 0 1px #d7dee7} .bkcell.past{background:#eef1f5;color:#b3bcc7;box-shadow:inset 0 0 0 1px #e0e5ec;cursor:not-allowed} .bkcell.past:after{content:"";position:absolute;left:9px;right:9px;top:50%;height:1px;background:#c8d1dc} /* 说明 / 须知 */ .bktip{margin-top:14px;font-size:13.5px;color:var(--muted);line-height:1.8} .bktip b{color:var(--ink-2)} .bknote{background:var(--blue-50);border:1px solid #d6e8fb;border-radius:12px;color:#2b5f96; padding:12px 16px;font-size:14px;line-height:1.85;margin-bottom:18px;white-space:pre-wrap} /* 提示条：保存成功 / 出错 */ .msg{padding:11px 15px;border-radius:10px;margin-bottom:15px;font-size:13.5px;line-height:1.75} .msg.ok{background:#e8f8f1;border:1px solid #c3e8d9;color:#10754f} .msg.err{background:#fdeeee;border:1px solid #f5cdcd;color:#a8382f} .mini{font-size:12.5px;color:var(--muted);font-weight:400} /* ========================================================== 仪器管理员：在这台仪器的日程表上直接改开放设置 ========================================================== */ .bkadm{border:1px solid var(--line);border-radius:var(--r);background:#fff;margin:0 0 18px;overflow:hidden; box-shadow:var(--sh-1)} .bkadm>summary{cursor:pointer;padding:13px 18px;display:flex;flex-wrap:wrap;align-items:center;gap:9px; background:var(--blue-50);border-bottom:1px solid var(--line-2);font-size:14.5px;color:var(--navy); list-style:none;user-select:none} .bkadm>summary::-webkit-details-marker{display:none} .bkadm>summary:before{content:"\25B8";color:var(--blue);font-size:13px;transition:transform .18s;display:inline-block} .bkadm[open]>summary:before{transform:rotate(90deg)} .bkadm>summary b{font-weight:600} .bkadm-f{padding:18px} .bkadm-row{margin-bottom:14px;display:flex;flex-wrap:wrap;align-items:center;gap:10px} .bkadm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 16px;margin-bottom:12px} .bkfld{margin-bottom:13px} .bkfld>label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:6px} .bkfld>label .tip{font-weight:400;color:var(--muted);font-size:12px;margin-left:6px} .bkfld input[type=text],.bkfld input[type=number],.bkfld textarea{ width:100%;border:1px solid var(--line);border-radius:9px;padding:8px 11px;font-size:13.5px; font-family:inherit;background:#fff;color:var(--ink)} .bkfld input:focus,.bkfld textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,110,190,.12)} .bkfld input[type=checkbox]{width:auto;margin:0;flex:none;accent-color:var(--blue);cursor:pointer} .bkfld label.chk{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:400; color:var(--ink-2);margin:0;cursor:pointer} .bkadm-days{display:flex;flex-wrap:wrap;gap:9px 16px} .bkadm-days .chk{font-size:13px;color:var(--ink-2)} .bkadm-ops{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding-top:14px; border-top:1px dashed var(--line-2)} .bkadm-p{padding:13px 18px;background:var(--blue-50);border-top:1px solid var(--line-2);font-size:13px; color:var(--ink-2);display:flex;flex-wrap:wrap;align-items:center;gap:9px} .bkadm-p b{color:var(--navy)} .bkadm-p1{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line); border-radius:20px;padding:3px 12px 3px 4px;font-size:12.5px} .bkadm-p1 img{width:24px;height:24px;border-radius:50%;object-fit:cover;flex:none} .bkadm-p1 em{font-style:normal;color:var(--muted);font-size:11.5px} /* 一格内按「功能」分成几行（各功能可同时约时用） */ .bktable.multi{min-width:940px} .bktable.multi .bkcell.multi{min-width:118px} .bkcell.multi{padding:4px;text-align:left;vertical-align:top} .bkcell.multi.past{pointer-events:none} .bkm{display:flex;align-items:center;gap:5px;min-height:20px;margin-bottom:2px; padding:2px 7px;border-radius:6px;font-size:11px;line-height:1.25;cursor:default; border:1px solid transparent;overflow:hidden} .bkm:last-child{margin-bottom:0} .bkm .n{font-weight:600;flex:0 0 auto} .bkm .u{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;opacity:.92} .bkm.free{background:transparent;border-color:transparent;color:var(--muted);cursor:pointer} .bkm.free:hover{background:var(--blue-100);border-color:var(--blue-2);color:var(--blue);font-weight:600} .bkm.mine{background:var(--blue-100);border-color:var(--blue);color:var(--blue);font-weight:700;cursor:pointer} .bkm.mine:hover{background:#d3e5f9} .bkm.busy{background:#e9edf2;border-color:#d7dee7;color:#7e8b9c} .bkm.past{color:#b3bcc7} .bkcell.multi.past .bkm{border-color:transparent;background:transparent} /* 预约弹窗里的点选按钮：功能 / 常用用途，点一下就好，不用打字 */ .bkchips{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px} .bkchip{border:1px solid var(--line);background:#fff;color:var(--ink-2);border-radius:18px; padding:5px 13px;font-size:13px;font-family:inherit;cursor:pointer;transition:.15s;line-height:1.4} .bkchip:hover{border-color:var(--blue-2);color:var(--blue);background:var(--blue-50)} .bkchip.on{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600} /* 跳到某一天 */ .bkwk-jump{display:inline-flex} .bkwk-jump input[type=date]{border:1px solid var(--line);border-radius:9px;padding:5px 9px;font-size:13px; font-family:inherit;color:var(--ink-2);background:#fff} .bkwk-jump input:focus{outline:0;border-color:var(--blue)} /* 「我的预约」列表 */ .bkmine{border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden;box-shadow:var(--sh-1)} .bkmine-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:11px 16px;border-bottom:1px solid var(--line-2);font-size:14px} .bkmine-row:last-child{border-bottom:0} .bkmine-row .d{font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums} .bkmine-row .s{color:var(--blue);background:var(--blue-100);border-radius:7px;padding:2px 9px;font-size:12.5px; font-variant-numeric:tabular-nums} .bkmine-row .n{flex:1;min-width:120px;color:var(--ink);font-weight:500} .bkmine-row .t{color:var(--muted);font-size:13px} /* 仪器卡片上的「近 N 天已约 M 次」小标 */ .bk-busy{display:inline-block;margin-left:8px;font-size:11.5px;font-weight:500;padding:2px 8px; border-radius:6px;background:var(--gold-100);color:#a9701d;vertical-align:middle} /* 仪器卡片上的「功能」标签：这台仪器能做哪几种测试 */ .bk-modes{margin-top:8px;display:flex;flex-wrap:wrap;gap:5px} .bk-mode{display:inline-block;padding:2px 9px;border-radius:6px;font-size:11.5px;line-height:1.6; background:#eef4fb;color:#2b5f96;border:1px solid #d6e8fb;white-space:nowrap} .bk-mode.par{background:#fdf1e0;color:#96601a;border-color:#f2dcbb} /* ========================================================== 企业微信扫码登录页 ========================================================== */ .bklogin{max-width:520px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--sh-1);padding:32px 30px 26px;text-align:center} .bklogin-head h2{font-size:20px;margin-bottom:6px} .bklogin-head p{color:var(--muted);font-size:14px;margin-bottom:18px} .bklogin-qr{min-height:290px;display:grid;place-items:center;margin:6px 0 4px} .bklogin-qr iframe{width:100%;max-width:300px;height:290px;border:0} .qr-fail{color:var(--muted);font-size:13.5px;border:1px dashed var(--line);border-radius:12px;padding:22px; background:var(--blue-50);line-height:1.8} .bklogin-alt{margin-top:14px;font-size:13.5px;color:var(--muted);display:flex;align-items:center; justify-content:center;gap:10px;flex-wrap:wrap} .bklogin-tip{text-align:left;background:var(--blue-50);border:1px solid #d6e8fb;border-radius:12px; padding:16px 18px;color:#2b5f96;font-size:14px;line-height:1.85} .bklogin-tip b{color:#143d68} .bklogin-err{background:#fdecec;border:1px solid #f5c9c6;color:#a33c36;border-radius:12px;padding:12px 16px; font-size:14px;margin-bottom:16px} .bklogin-back{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);display:flex; justify-content:space-between;gap:12px;font-size:13.5px;color:var(--muted)} .bklogin-back a{color:var(--blue)} /* ---- 扫码确认登录：本站自己画的二维码 ---- */ .bklogin-qr{position:relative} .bklogin-qr img{width:220px;height:220px;display:block;margin:0 auto; border:1px solid var(--line);border-radius:14px;background:#fff;padding:6px} .qr-mask{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:232px;height:232px;border-radius:14px;background:rgba(255,255,255,.93); display:grid;place-items:center;cursor:pointer;z-index:2} .qr-mask span{font-size:14px;color:var(--ink);border-bottom:1px dashed var(--line);padding-bottom:3px} .qr-mask[hidden]{display:none} .qr-tip{margin-top:12px;font-size:14px;color:var(--muted)} .qr-tip-warn{color:#a33c36} .qr-hint{font-size:13px;color:var(--muted)} /* ---- 账号密码登录 ---- */ .bkpass{display:flex;flex-direction:column;gap:13px;margin-top:4px;text-align:left} .bkpass label{font-size:14px;font-weight:600;display:block} .bkpass input[type=text],.bkpass input[type=password]{ width:100%;box-sizing:border-box;margin-top:6px;padding:11px 13px;font-size:15px; border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)} .bkpass input[type=text]:focus,.bkpass input[type=password]:focus{ outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(21,101,192,.12)} /* .btn 是 inline-flex 且没设 justify-content，宽度撑满时文字会贴左边 —— 这里居中 */ .bkpass button{width:100%;box-sizing:border-box;padding:11px 0;font-size:15.5px;margin-top:2px; justify-content:center} .bkpass-rm{display:flex!important;align-items:center;gap:8px;font-weight:400!important; font-size:13.5px!important;color:var(--muted);cursor:pointer} .bkpass-rm input{width:15px;height:15px;margin:0;accent-color:var(--blue)} .bkpass-tip{margin:0;font-size:12.8px;line-height:1.85;color:var(--muted); background:var(--blue-50);border:1px solid #d6e8fb;border-radius:10px;padding:11px 13px} .bkpass-tip b{color:#143d68} /* two 种登录方式并存时的分隔线 */ .bklogin-or{position:relative;margin:22px 0 16px;text-align:center} .bklogin-or::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line)} .bklogin-or span{position:relative;display:inline-block;padding:0 14px;background:#fff; font-size:13.5px;color:var(--muted)} /* ---- 手机端确认页 ---- */ .bkqr-me{display:flex;align-items:center;gap:10px;justify-content:center; background:var(--blue-50);border:1px solid #d6e8fb;border-radius:12px; padding:12px 16px;margin-bottom:16px;font-size:14px;color:#2b5f96} .bkqr-me img{width:34px;height:34px;border-radius:50%;object-fit:cover;background:#e8f0f9} .bkqr-form{display:flex;flex-direction:column;gap:12px;margin-bottom:16px;text-align:left} .bkqr-form label{font-size:14px;font-weight:600;display:block;margin-bottom:6px} .bkqr-form label .tip{display:block;font-weight:400;font-size:12.5px;color:var(--muted);margin-top:3px} .bkqr-form input[type=text]{width:100%;box-sizing:border-box;padding:11px 13px;font-size:15px; border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)} .bkqr-form input[type=text]:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(21,101,192,.12)} .bkqr-form button{width:100%;box-sizing:border-box;padding:11px 0;font-size:15px;justify-content:center} /* 「扫码后才能看仪器」的引导块（科研设施 → 仪器预约页签里用） */ .bkgate{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:38px 30px;text-align:center; box-shadow:var(--sh-1)} .bkgate .ico{width:64px;height:64px;margin:0 auto 16px;border-radius:20px;display:grid;place-items:center; background:linear-gradient(160deg,var(--blue-100),#dbeaf9);font-size:30px} .bkgate h3{font-size:19px;margin-bottom:8px} .bkgate p{color:var(--muted);font-size:14px;line-height:1.9;max-width:440px;margin:0 auto 20px} .bkgate-desc{background:var(--blue-50);border:1px solid #d6e8fb;border-radius:10px; padding:11px 14px;margin:0 auto 14px!important;color:#2b5f96!important;font-size:13.5px} /* ========================================================== 预约弹窗 ========================================================== */ .bkmask{position:fixed;inset:0;background:rgba(14,47,82,.42);backdrop-filter:blur(2px); display:none;align-items:center;justify-content:center;z-index:300;padding:20px} .bkmask.on{display:flex} .bkdlg{background:#fff;border-radius:16px;width:100%;max-width:400px;padding:24px 24px 20px; box-shadow:0 24px 60px rgba(14,47,82,.28);animation:bkpop .18s ease} @keyframes bkpop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}} .bkdlg h4{font-size:17px;margin-bottom:14px} .bkd{font-size:14px;color:var(--ink-2);line-height:1.8} .bkd-l{display:flex;gap:10px;padding:5px 0;border-bottom:1px dashed var(--line-2)} .bkd-l:last-child{border-bottom:0} .bkd-l span{width:52px;flex:none;color:var(--muted);font-size:13px} .bkd-l b{font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums} .bkd-w{margin:12px 0 0;font-size:12.5px;color:var(--muted);line-height:1.7} .bkf{display:block;margin-top:14px} .bkf span{display:block;font-size:13px;color:var(--ink-2);margin-bottom:6px;font-weight:500} .bkf .tip{font-weight:400;color:var(--muted);margin-left:6px;font-size:12px} .bkf input{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:9px;font-size:14px; font-family:inherit;color:var(--ink);background:#fff} .bkf input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(30,111,196,.12)} .bkops{display:flex;justify-content:flex-end;gap:10px;margin-top:20px} /* 右下角轻提示 */ .bktoast{position:fixed;right:22px;bottom:22px;z-index:400;max-width:320px;padding:12px 18px;border-radius:12px; background:var(--navy);color:#fff;font-size:14px;line-height:1.6;box-shadow:0 12px 32px rgba(14,47,82,.28); opacity:0;transform:translateY(12px);pointer-events:none;transition:.24s} .bktoast.on{opacity:1;transform:none} .bktoast.bad{background:#b3352f} @media (max-width:700px){ .bkbar{padding:11px 14px;gap:9px} .bkbar-meta{margin-left:0;width:100%;order:3} .bkbar-out{margin-left:auto} .bkbar-me2{margin-left:auto} .bkbar-me2 a{padding:5px 10px;font-size:12.5px} .bkhelp{padding:11px 14px;font-size:13px} .bkprof{padding:16px 16px} .bkprof-form input[type=text]{width:100%} .bklegend{gap:6px 14px;font-size:12.5px} .bkcell{height:42px;min-width:66px;font-size:12.5px} .bktable th.h{width:84px;min-width:84px;padding:7px 6px;font-size:12.5px} .bklogin{padding:24px 18px 20px} .bklogin-qr{min-height:250px} .bkgate{padding:28px 18px} .bktoast{right:12px;left:12px;bottom:12px;max-width:none} }