/* ai-new.css — 51yaoke.net 耀美云科（pc-index 完整重跑，2026-09-15） 注：此前两轮的 seed 计算均有误（分别误用了旧域名 shenzhenzxyy.com 与错误拼写的 01zxmr.cn 字符集参与运算），本轮已忽略此前所有记录，用真正域名重新计算： domain = "51yaoke.net"（11 字符，含两个 '.' 前的数字与 TLD） 逐字符 ASCII：'5'=53 '1'=49 'y'=121 'a'=97 'o'=111 'k'=107 'e'=101 '.'=46 'n'=110 'e'=101 't'=116 seed = Σ charcode[i]×(i+1) = 53+98+363+388+555+642+707+368+990+1010+1276 = 6450 逐区块 pick(i) = (seed + domain[i%len]×prime[i]) % count_i： 标题 seed%7 = 6450%7 = 3 → T-D 淡色圆角卡片 医院 i=1 p=3 domain[1]='1'(49) (6450+49×3)%8 = 6597%8 = 5 → H6 实底名称条+右侧热门榜 医生 i=2 p=7 domain[2]='y'(121) (6450+121×7)%7 = 7297%7 = 3 → D4 名片式横向卡片 资讯 i=3 p=11 domain[3]='a'(97) (6450+97×11)%9 = 7517%9 = 2 → N3 3列等宽卡片（与既有实现一致，未变） 分享 i=4 p=13 domain[4]='o'(111) (6450+111×13)%9 = 7893%9 = 0 → S1 4列画廊叠层（与既有实现一致，未变） 项目 i=5 p=17 domain[5]='k'(107) (6450+107×17)%6 = 8269%6 = 1 → P2 主色实底突出价 问答 i=6 p=19 domain[6]='e'(101) (6450+101×19)%9 = 8369%9 = 8 → Q9，数据受限（无 $right_wenda_*， 禁止改 .php 新增查询）→ 按库内兜底规则降级为「Q9 去侧栏」横向卡列表 热词 i=7 p=23 domain[7]='.'(46) (6450+46×23)%6 = 7508%6 = 2 → T3 方格色块网格（与既有实现一致，未变） Footer i=8 p=29 domain[8]='n'(110) (6450+110×29)%5 = 9640%5 = 0 → F1 深色渐变3列Grid（与既有实现一致，未变） Header i=9 p=31 domain[9]='e'(101) (6450+101×31)%6 = 9581%6 = 5 → HE6 上下双行+专属Nav（跳过 NA 独立选型） Banner (seed+11)%9 = 6461%9 = 8 → BN9 玻璃拟态悬浮筛选面板（暖调重构版） GD1/GD2/GD3 浮层引导：BN9 不强绑定，本轮未叠加（默认不选）。 TAB1/TAB2 次级分类 Tab、MQ1 底部知名轮播：均为可选叠加组件，本轮聚焦 11 项核心区块选型，未叠加。 主题色已按 logo111.png 实际画面重新提取（深藏青文字为主色，珊瑚橙花卉为辅色）， 与此前两轮遗留的青绿主色/橙色辅色数值不同，属本轮修正。 END 之后为列表页/详情页样式，未做改动。 */ body { background: var(--color-bg); color: var(--color-text-normal); } .filter_img { filter: blur(15px) !important; } .camp1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .camp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ===== PC首页区块 BEGIN ===== */ /* === AI 主题色（logo111.png 实际画面重新提取：深藏青文字为主色 + 珊瑚橙花卉为辅色）=== */ :root { /* ① 品牌主色系（结构：标题栏/导航/链接/竖条/描边） */ --color-primary:#1B2E45; --color-primary-dark:#101D2C; --color-primary-light:#E2E7ED; --color-primary-rgb:27,46,69; --color-primary-dark-rgb:16,29,44; /* ② 辅助/强调色（logo 花卉珊瑚橙，与深藏青主色形成冷暖对比） */ --color-accent:#E8804C; --color-accent-dark:#B85A2E; --color-accent-rgb:232,128,76; /* ③ 中性底与正文 */ --color-bg:#f4f5f7; --color-bg-white:#fff; --color-text-dark:#1f2328; --color-text-normal:#333940; --color-text-light:#6b7280; --color-text-lighter:#9aa3ad; --color-border:rgba(31,35,40,.12); --color-border-light:rgba(31,35,40,.08); /* ④ 功能色 */ --color-promo:#E53935; --color-success:#2fae66; --color-success-rgb:47,174,102; } body { margin: 0; padding: 0; } /* === Tab 隐藏契约（功能性 CSS，必须留在 header 实际加载的这张表里，检查清单① ）=== */ .news-mode { display: none !important; } .ind-yh-list.news-mode, .ind-doc-list.news-mode, .ind-zx-list.news-mode, .ind-hos-list.news-mode, .ind-xm-list.news-mode, .ind-wd-list.news-mode, .ind-rc-list.news-mode { display: none !important; } /* === 首页通用骨架 === */ .container { max-width: 1240px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; } .index-hos-con { margin: 34px 0; } .index-hos-box { background: transparent; } /* ========================================================================== Header HE6 上下双行 · 标语搜索行（无标语变体，Grid 三栏绝对居中）+ 层叠描边 tab 导航条 本站无 biaoyu.png / search.png 素材，采用文档给出的"无标语 + 内联 SVG 搜索钮"变体； HE6 自带专属 Nav（导航条+右端上浮二维码），选中本档已跳过 Nav 库独立选型（pick=5）。 ========================================================================== */ /* 作用域内 reset（缺了会顶歪，见文档 HE6 坑1） */ .header, .header-nav-box { font-size: 16px; } .header h1, .header p, .header ul, .header ol, .header li, .header-nav-box ul, .header-nav-box ol, .header-nav-box li { margin: 0; padding: 0; } .header ul, .header ol, .header-nav-box ul, .header-nav-box ol { list-style: none; } .header a, .header-nav-box a { text-decoration: none; } .header img, .header-nav-box img { max-width: 100%; height: auto; border: 0 none; vertical-align: top; } .header input { background: none; outline: none; border: 0; } /* 上行：Logo（左）｜ 搜索框（绝对居中）｜ 咨询电话（右），Grid 1fr auto 1fr 保证左右两栏等宽居中 */ .header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 24px; background: var(--color-bg-white); } .header.public-content { position: relative; margin: 0 auto; max-width: 1240px; padding: 16px 20px; box-sizing: border-box; } .hearder-box { justify-self: start; text-align: center; } .header .logo_head { width: 190px; height: auto; display: inline-block; image-rendering: -webkit-optimize-contrast; } .header-search { justify-self: center; color: #000; } .header .input { position: relative; height: 34px; border-top: #ccc solid 1px; border-right: none; border-bottom: #ccc solid 1px; border-left: #ccc solid 1px; border-radius: 4px 0 0 4px; } .header .input input { outline: none; border: none; padding: 0 14px; margin: 0; width: 330px; height: 34px; color: #333; font-size: 14px; border-radius: 4px 0 0 4px; box-sizing: border-box; background: #fff; } .header .search { position: absolute; top: 0; right: -46px; width: 46px; height: 34px; background-color: var(--color-primary-dark); border-radius: 0 4px 4px 0; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; transition: background-color .2s; } .header .search:hover { background-color: var(--color-primary); } .header .search svg { width: 17px; height: 17px; } .lxwm400 { justify-self: end; position: relative; white-space: nowrap; display: flex; align-items: center; gap: 6px; } .lxwm400 .header-tel-label { font-size: 12px; color: var(--color-text-light); } .lxwm400 .header-tel { color: var(--color-primary-dark); font-weight: 700; font-size: 15px; } /* 下行：通栏层叠描边 tab 导航条（canonical 版本，含末项上浮二维码） */ .header-nav-box { width: 100%; background: #fff; border-bottom: 4px solid var(--color-primary-dark); display: flex; align-items: flex-end; justify-content: center; } .header-nav-box .header-nav { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; display: flex; align-items: flex-end; justify-content: space-between; } .header-nav > a { flex: 1 1 0; min-width: 0; color: #000; } .header-nav li { height: 40px; line-height: 40px; margin: 7px 0px 0px 0px; padding: 0px 22px; cursor: pointer; background-color: var(--color-primary); color: #fff; border-top: 4px solid var(--color-primary-dark); border-left: 4px solid var(--color-primary-dark); border-right: 1px solid var(--color-primary-dark); white-space: nowrap; text-align: center; transition: background-color .2s, color .2s; } .header-nav > a > li { padding: 0 12px; text-align: center; } .header-nav .header-xiangmu { border-right: 4px solid var(--color-primary-dark); } .header-nav > li.erweima { flex: 0 0 auto; } .header-nav .erweima { background-color: unset; border: unset; cursor: unset; } .header-nav .erweima img { width: 60px; height: 60px; object-fit: cover; border-radius: 4px; position: relative; top: -20px; left: -8px; box-shadow: 0 4px 12px rgba(0,0,0,.18); } .header-nav > a:hover li { background-color: var(--color-primary-dark); } .header-nav .active { color: #fff; background-color: var(--color-primary-dark); } @media (max-width: 960px) { .header { grid-template-columns: 1fr; row-gap: 10px; padding: 12px 20px; } .hearder-box { justify-self: center; } .header-search { justify-self: stretch; width: 100%; } .header .input { width: 100%; } .header .input input { width: 100%; } .lxwm400 { justify-self: center; } .header-nav-box .header-nav { flex-wrap: wrap; justify-content: flex-start; } .header-nav > a { flex: 0 0 auto; } .header-nav .erweima img { top: 0; left: 0; } } /* ========================================================================== Banner BN9 玻璃拟态悬浮筛选面板 + 辅色排行榜 + 辅色热门横条（暖调重构，pick=8） 数据：$banner_images_arr / get_province_hos() / get_city_hos() / $formal_hos_list ========================================================================== */ .ai-home-swiper { overflow: hidden; } .ai-home-swiper img { width: 100%; display: block; } .bn9-wrap { position: relative; background: var(--color-primary-dark); } .bn9-wrap .ai-home-swiper { width: 100%; height: 460px; overflow: hidden; margin: 0; } .bn9-wrap .ai-home-swiper .swiper-slide { height: 460px; } .bn9-wrap .ai-home-swiper .swiper-slide img { width: 100%; height: 460px; object-fit: cover; display: block; } .bn9-wrap .ai-home-swiper .swiper-pagination { z-index: 20; } .bn9-wrap .ai-home-swiper .swiper-pagination-bullet { width: 9px; height: 9px; background: rgba(255,255,255,.55); opacity: 1; transition: width .25s, background .25s; } .bn9-wrap .ai-home-swiper .swiper-pagination-bullet-active { width: 22px; border-radius: 5px; background: var(--color-accent); } .bn9-wrap .ai-home-swiper::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.16) 34%, rgba(0,0,0,.16) 66%, rgba(0,0,0,.5) 100%); pointer-events: none; z-index: 5; } .bn9-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; max-width: 1240px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 20px; pointer-events: none; z-index: 10; box-sizing: border-box; padding: 0 20px; } .bn9-aside { pointer-events: all; width: 140px; display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.9)); -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%); height: 100%; box-sizing: border-box; overflow: hidden; border-radius: 14px; box-shadow: 0 12px 34px rgba(0,0,0,.32); border: 1px solid rgba(255,255,255,.6); } .bn9-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 4px 0; } .bn9-panel + .bn9-panel { border-top: 1px solid rgba(var(--color-accent-rgb), .16); } .bn9-hd { font-size: 13px; font-weight: 800; color: var(--color-text-dark); padding: 5px 10px; letter-spacing: .5px; display: flex; align-items: center; gap: 7px; position: relative; } .bn9-hd::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--color-accent), var(--color-accent-dark)); } .bn9-ico { width: 15px; height: 15px; flex-shrink: 0; color: var(--color-accent-dark); } .bn9-bd { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-around; } .bn9-bd a { display: block; padding: 4px 14px; font-size: 13px; color: #3a4046; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 6px; margin: 0 6px; transition: color .2s, background .2s; } .bn9-bd a:hover { color: var(--color-accent-dark); background: rgba(var(--color-accent-rgb), .14); } .bn9-more { text-align: center; padding: 6px 0 8px; } .bn9-more a { font-size: 12px; font-weight: 800; color: var(--color-accent-dark); text-decoration: none; display: inline-flex; align-items: center; gap: 3px; padding: 4px 14px; border: 1px solid rgba(var(--color-accent-rgb), .4); border-radius: 999px; transition: color .2s, background .2s; } .bn9-more a:hover { color: #fff; background: var(--color-accent-dark); border-color: var(--color-accent-dark); } .bn9-rank-box { pointer-events: all; width: 236px; background: #fff; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; padding-bottom: 8px; height: 84%; box-shadow: 0 12px 34px rgba(0,0,0,.32); border: 1px solid rgba(255,255,255,.6); } .bn9-rank-hd { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 800; letter-spacing: .5px; color: #fff; background: linear-gradient(120deg, var(--color-accent) 0%, var(--color-accent-dark) 100%); padding: 12px 14px; margin: 0 0 4px; } .bn9-rank-hd__line { flex: 0 0 24px; height: 1px; background: rgba(255,255,255,.55); display: block; } .bn9-rank-hd__text { flex-shrink: 0; white-space: nowrap; } .bn9-rank-hd__hot { font-style: normal; color: #fff; background: rgba(255,255,255,.24); padding: 1px 7px; border-radius: 5px; margin-right: 2px; font-size: 12px; } .bn9-rank { list-style: none; margin: 0; padding: 2px 12px; flex: 1; display: flex; flex-direction: column; justify-content: space-around; counter-reset: rank-counter; } .bn9-rank__item { display: flex; align-items: center; gap: 10px; counter-increment: rank-counter; } .bn9-rank__num { font-style: normal; font-size: 12px; font-weight: 800; width: 20px; height: 20px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; color: #fff; background: #c4ccd4; } .bn9-rank__num::before { content: counter(rank-counter); } .bn9-rank__item:nth-child(1) .bn9-rank__num { background: linear-gradient(135deg, #f6cf6b, var(--color-accent-dark)); box-shadow: 0 2px 6px rgba(var(--color-accent-rgb), .5); } .bn9-rank__item:nth-child(2) .bn9-rank__num { background: linear-gradient(135deg, #cdd3da, #a7b0ba); } .bn9-rank__item:nth-child(3) .bn9-rank__num { background: linear-gradient(135deg, #e0b088, #c08b5a); } .bn9-rank__item:nth-child(n+4) .bn9-rank__num { background: #eef0f2; color: #9aa3ad; } .bn9-rank__link { font-size: 13px; color: #333; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; transition: color .2s; } .bn9-rank__link:hover { color: var(--color-accent-dark); } @media (max-width: 900px) { .bn9-overlay { display: none; } .bn9-wrap .ai-home-swiper::after { display: none; } } .bn9-hotbar { background: transparent; padding: 0; margin: 18px 0; } .bn9-hotbar__inner { max-width: 1240px; margin: 0 auto; box-sizing: border-box; display: flex; align-items: center; overflow: hidden; border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.1); background: #fff; } .bn9-hotbar__label { flex-shrink: 0; background: linear-gradient(120deg, var(--color-accent) 0%, var(--color-accent-dark) 100%); color: #fff; font-size: 14px; font-weight: 800; letter-spacing: .5px; padding: 0 22px; height: 46px; display: flex; align-items: center; white-space: nowrap; border-radius: 10px 0 0 10px; } .bn9-hotbar__track-wrap { flex: 1; overflow: hidden; display: flex; align-items: center; } .bn9-hotbar__list { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; gap: 0; flex-shrink: 0; animation: bn9-hotbar-scroll 22s linear infinite; } .bn9-hotbar__track-wrap:hover .bn9-hotbar__list { animation-play-state: paused; } @keyframes bn9-hotbar-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .bn9-hotbar__item { display: flex; align-items: center; gap: 6px; padding: 0 16px; height: 46px; border-right: 1px solid #f0f0f0; flex-shrink: 0; } .bn9-hotbar__item:last-child { border-right: none; } .bn9-hotbar__img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1.5px solid rgba(var(--color-accent-rgb), .4); } .bn9-hotbar__name { font-size: 13px; color: #333; text-decoration: none; max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; transition: color .2s; } .bn9-hotbar__name:hover { color: var(--color-accent-dark); } @media (max-width: 768px) { .bn9-hotbar__item { padding: 0 8px; } .bn9-hotbar__name { max-width: 80px; } } /* ========================================================================== 板块标题风格 T-D 淡色圆角卡片（全站 7 个板块统一，seed%7=3） Tab 切换原结构（.tab / data-type）折入标题容器内，siblings 关系与 .index-hos-con 归属均未改变，不影响现有 handleTabSwitch 逻辑。 ========================================================================== */ .mod-title-td { display: flex; align-items: center; gap: 14px; padding: 16px 28px; border-radius: 24px; background: color-mix(in srgb, var(--color-primary) 8%, #fff); margin-bottom: 20px; flex-wrap: wrap; } .mod-title-td .td-icon { font-size: 30px; flex-shrink: 0; line-height: 1; } .mod-title-td .td-text { flex-shrink: 0; } .mod-title-td .td-title { font-size: 19px; font-weight: 700; color: var(--color-primary); margin: 0; line-height: 1.3; } .mod-title-td .td-en { font-size: 11px; color: rgba(0,0,0,.35); text-transform: uppercase; letter-spacing: .16em; margin: 3px 0 0; } .mod-title-td .td-desc { font-size: 12px; color: var(--color-text-light); margin: 3px 0 0; } .mod-title-td .tab { display: flex; gap: 8px; margin-left: 24px; flex-wrap: wrap; } .mod-title-td .tab a { font-size: 13px; color: var(--color-primary); background: rgba(255,255,255,.7); border-radius: 20px; padding: 5px 14px; text-decoration: none; transition: background .2s, color .2s; white-space: nowrap; } .mod-title-td .tab a:hover { background: #fff; } .mod-title-td .tab a.current { background: var(--color-primary); color: #fff; } .mod-title-td .td-more { margin-left: auto; font-size: 13px; color: var(--color-primary); background: rgba(255,255,255,.7); border-radius: 20px; padding: 4px 14px; flex-shrink: 0; text-decoration: none; white-space: nowrap; transition: background .2s; } .mod-title-td .td-more:hover { background: #fff; } @media (max-width: 900px) { .mod-title-td { padding: 14px 18px; } .mod-title-td .tab { margin-left: 0; order: 3; width: 100%; } .mod-title-td .td-more { order: 2; } } /* ========================================================================== 医院 H6 实底名称条卡片 + 右侧热门榜侧栏（矩形网格·实底名称条·带侧栏，pick=5） 字段：封面图/机构名(实底条)/地址/关联项目标签(独立可跳转)/更新时间；侧栏 $right_hospital_* ========================================================================== */ .h6-layout { display: flex; align-items: flex-start; gap: 20px; } .h6-main { flex: 1; min-width: 0; } .h6-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; } .h6-card { background: var(--color-bg-white); border-radius: 10px; overflow: hidden; box-shadow: 0 2px 12px rgba(31,35,40,.07); transition: transform .25s ease, box-shadow .25s ease; } .h6-card:hover { transform: translateY(-5px); box-shadow: 0 16px 30px rgba(var(--color-primary-rgb),.16); } .h6-card__hero { display: block; position: relative; text-decoration: none; } .h6-card__media { position: relative; width: 100%; aspect-ratio: 4/3; overflow: hidden; background: #eef0f2; } .h6-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .h6-card:hover .h6-card__media img { transform: scale(1.06); } .h6-card__band { background: linear-gradient(120deg, var(--color-primary), var(--color-primary-dark)); color: #fff; font-size: 15px; font-weight: 700; text-align: center; padding: 9px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .h6-card__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; } .h6-card__addr { font-size: 12px; color: var(--color-text-light); text-decoration: none; } .h6-card__tags { display: flex; flex-wrap: wrap; gap: 4px; max-height: 40px; overflow: hidden; } .h6-card__tag { font-size: 11px; line-height: 18px; color: var(--color-primary); background: rgba(var(--color-primary-rgb), .08); border-radius: 4px; padding: 0 8px; text-decoration: none; transition: color .2s, background .2s; } .h6-card__tag:hover { color: #fff; background: var(--color-primary); } .h6-card__time { font-size: 11px; color: var(--color-text-lighter); text-decoration: none; } .h6-side { flex-shrink: 0; width: 262px; border: 1px solid var(--color-border); border-radius: 8px; padding: 14px 16px; background: #fff; } .h6-side__hd { font-size: 16px; font-weight: 800; color: var(--color-text-dark); padding-left: 10px; border-left: 4px solid var(--color-primary); margin-bottom: 12px; } .h6-side__list { list-style: none; margin: 0; padding: 0; counter-reset: h6rank; } .h6-side__item { counter-increment: h6rank; border-bottom: 1px dashed var(--color-border-light); } .h6-side__item:last-child { border-bottom: none; } .h6-side__item a { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; padding: 9px 0; text-decoration: none; } .h6-side__num { grid-row: 1 / 3; font-size: 24px; font-style: italic; font-weight: 800; line-height: 1; color: var(--color-primary); } .h6-side__num::before { content: counter(h6rank); } .h6-side__item:nth-child(1) .h6-side__num { color: #e6403b; } .h6-side__item:nth-child(2) .h6-side__num { color: #ff8c00; } .h6-side__item:nth-child(3) .h6-side__num { color: #f0b400; } .h6-side__t { font-size: 13px; font-weight: 600; color: var(--color-text-normal); } .h6-side__item a:hover .h6-side__t { color: var(--color-primary); } .h6-side__d { font-size: 11px; color: var(--color-text-lighter); } @media (max-width: 1080px) { .h6-side { display: none; } } @media (max-width: 960px) { .h6-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 640px) { .h6-grid { grid-template-columns: minmax(0,1fr); } } /* ========================================================================== 医生 D4 名片式横向卡片（名片·横排，pick=3） 字段：头像/姓名/职称/所属医院/简介/更新时间 + 立即预约按钮（专科按当前 tab 路由 open_swt） ========================================================================== */ .d4-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; } .d4-card { display: flex; align-items: stretch; gap: 12px; background: var(--color-bg-white); border-radius: 10px; padding: 14px; box-shadow: 0 2px 10px rgba(31,35,40,.06); transition: transform .25s ease, box-shadow .25s ease; } .d4-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(var(--color-primary-rgb),.14); } .d4-card__avatar { display: block; width: 80px; min-width: 80px; height: 80px; border-radius: 10px; overflow: hidden; position: relative; background: #eef0f2; flex-shrink: 0; } .d4-card__avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; } .d4-card:hover .d4-card__avatar img { transform: scale(1.06); } .d4-card__body { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 10px; row-gap: 3px; } .d4-card__head { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 6px; min-width: 0; } .d4-card__name { font-size: 15px; font-weight: 700; color: var(--color-text-dark); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .d4-card:hover .d4-card__name { color: var(--color-primary); } .d4-card__badge { font-size: 10px; font-weight: 700; color: #fff; background: var(--color-accent-dark); border-radius: 4px; padding: 1px 6px; flex-shrink: 0; } .d4-card__intro { grid-column: 1; grid-row: 2; display: flex; align-items: center; gap: 8px; min-width: 0; } .d4-card__zc { font-size: 12px; color: var(--color-primary); text-decoration: none; flex-shrink: 0; } .d4-card__hos { font-size: 12px; color: var(--color-text-light); text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .d4-card__meta { grid-column: 1; grid-row: 3; display: flex; align-items: baseline; gap: 10px; min-width: 0; } .d4-card__desc { flex: 1; min-width: 0; font-size: 12px; color: var(--color-text-light); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .d4-card__time { flex-shrink: 0; font-size: 11px; color: var(--color-text-lighter); text-decoration: none; } .d4-card__btn { grid-column: 2; grid-row: 1 / span 3; align-self: center; justify-self: end; border: none; cursor: pointer; font-family: inherit; white-space: nowrap; padding: 9px 16px; border-radius: 20px; font-size: 12.5px; font-weight: 700; color: #fff; background: linear-gradient(120deg, var(--color-accent), var(--color-accent-dark)); box-shadow: 0 4px 12px rgba(var(--color-accent-rgb),.35); transition: transform .2s, box-shadow .2s; } .d4-card__btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(var(--color-accent-rgb),.45); } @media (max-width: 768px) { .d4-grid { grid-template-columns: minmax(0,1fr); } } @media (max-width: 480px) { .d4-card { flex-direction: column; } .d4-card__avatar { width: 100%; height: 140px; } .d4-card__btn { grid-row: auto; grid-column: 1 / -1; justify-self: stretch; text-align: center; margin-top: 6px; } } /* ========================================================================== 资讯 N3 深色叠层全宽条（叠层·深色，pick=2，与既有实现一致，未变） ========================================================================== */ .n3-grid { display: flex; flex-direction: column; gap: 14px; } .n3-card { position: relative; display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 21/7; text-decoration: none; } .n3-card__media { position: absolute; inset: 0; } .n3-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .n3-card:hover .n3-card__media img { transform: scale(1.05); } .n3-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.3) 55%, transparent 100%); } .n3-card__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 24px; } .n3-card__title { display: block; font-size: 20px; font-weight: 800; color: #fff; margin: 0 0 6px; text-shadow: 0 2px 6px rgba(0,0,0,.4); } .n3-card__desc { display: block; font-size: 13px; color: rgba(255,255,255,.85); margin: 0 0 8px; } .n3-card__date { display: inline-block; font-size: 12px; color: #fff; background: rgba(var(--color-primary-rgb), .85); padding: 3px 12px; border-radius: 999px; } @media (max-width: 768px) { .n3-card { aspect-ratio: 16/10; } .n3-card__title { font-size: 16px; } } /* ========================================================================== 分享 S1 4列画廊叠层（叠层·深色，pick=0，与既有实现一致，未变） ========================================================================== */ .s1-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; } .s1-card { position: relative; display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 3/4; text-decoration: none; } .s1-card__media { position: absolute; inset: 0; } .s1-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .s1-card:hover .s1-card__media img { transform: scale(1.06); } .s1-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.78) 0%, transparent 62%); } .s1-card__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px; } .s1-card__title { display: block; font-size: 13px; font-weight: 700; color: #fff; margin: 0 0 4px; } .s1-card__date { display: block; font-size: 11px; color: rgba(255,255,255,.78); } @media (max-width: 960px) { .s1-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } /* ========================================================================== 项目 P2 主色实底突出价（矩形·主色实底，pick=1） 字段：封面图/标题/简介/优惠价(固定红色#E53935)/原价(划线)/更新时间 ========================================================================== */ .p2-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; } .p2-card { position: relative; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); box-shadow: 0 8px 22px rgba(var(--color-primary-rgb),.24); transition: transform .25s ease, box-shadow .25s ease; } .p2-card:hover { transform: translateY(-5px); box-shadow: 0 18px 34px rgba(var(--color-primary-rgb),.34); } .p2-card__hero { display: block; position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; } .p2-card__hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .p2-card:hover .p2-card__hero img { transform: scale(1.06); } .p2-card__body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 8px; } .p2-card__title { font-size: 17px; font-weight: 800; color: #fff; text-decoration: none; } .p2-card__desc { font-size: 12.5px; color: rgba(255,255,255,.78); line-height: 1.5; text-decoration: none; } .p2-card__pricebar { display: flex; align-items: baseline; gap: 10px; text-decoration: none; margin-top: 4px; } .p2-card__price { font-size: 30px; font-weight: 900; color: #E53935 !important; text-shadow: 0 2px 6px rgba(0,0,0,.2); } .p2-card__old { font-size: 13px; color: rgba(255,255,255,.6); text-decoration: line-through; } .p2-card__time { font-size: 11px; color: rgba(255,255,255,.65); text-decoration: none; } @media (max-width: 768px) { .p2-grid { grid-template-columns: minmax(0,1fr); } } /* ========================================================================== 问答 Q9 横向卡列表（去侧栏降级版，横向卡·数据受限，pick=8） 原公式命中 Q9「左70%横向卡+右30%侧栏」，但本站问答无 $right_wenda_* 备用列表 （禁止改 .php 新增查询），按库内兜底规则退化为「去侧栏、图片按 {if} 条件渲染」的 横向卡整宽列表，字段（标题/简介/更新时间）全部保留，卡片始终整卡渲染不因缺图空缺。 ========================================================================== */ .q9-list { display: flex; flex-direction: column; gap: 14px; } .q9-card { display: flex; gap: 16px; background: var(--color-bg-white); border-radius: 10px; overflow: hidden; box-shadow: 0 2px 10px rgba(31,35,40,.06); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; } .q9-card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(var(--color-primary-rgb),.14); } .q9-card__media { position: relative; flex-shrink: 0; width: 200px; height: 140px; background: linear-gradient(135deg, var(--color-primary-light), #fff); overflow: hidden; } .q9-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; } .q9-card:hover .q9-card__media img { transform: scale(1.06); } .q9-card__badge { position: absolute; left: 10px; top: 10px; font-size: 11px; font-weight: 700; color: #fff; background: var(--color-accent); padding: 2px 9px; border-radius: 4px; z-index: 2; } .q9-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 14px 16px 14px 0; } .q9-card__title { font-size: 15px; font-weight: 700; color: var(--color-text-dark); } .q9-card:hover .q9-card__title { color: var(--color-primary); } .q9-card__desc { font-size: 12.5px; color: var(--color-text-light); line-height: 1.55; } .q9-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; } .q9-card__date { font-size: 11.5px; color: var(--color-text-lighter); flex-shrink: 0; } .q9-card__btn { flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--color-primary); display: inline-flex; align-items: center; gap: 3px; } .q9-card__btn i { font-style: normal; transition: transform .2s; } .q9-card:hover .q9-card__btn i { transform: translateX(3px); } @media (max-width: 640px) { .q9-card { flex-direction: column; } .q9-card__media { width: 100%; height: 180px; } .q9-card__body { padding: 12px 14px 14px; } } /* ========================================================================== 热词 T3 方格色块网格（矩形网格·主色实底，pick=2，与既有实现一致，未变） ========================================================================== */ .t3-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; } .t3-item { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; aspect-ratio: 1/1; border-radius: 4px; background: linear-gradient(150deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); padding: 8px; transition: transform .2s ease, box-shadow .2s ease; } .t3-item:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(var(--color-primary-rgb),.28); } .t3-item__tag { color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .t3-item__d { display: block; font-size: 10px; color: rgba(255,255,255,.72); margin-top: 4px; text-decoration: none; } @media (max-width: 768px) { .t3-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } } @media (max-width: 480px) { .t3-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } /* ========================================================================== Footer F1 深色渐变3列Grid：Logo + 导航 + 二维码三列（pick=0，与既有实现一致，未变） 备案号：footer.html 中原有备案号展示已用 HTML 注释包裹，前端不显示。 ========================================================================== */ #footer.footer--f1 { background: linear-gradient(160deg, var(--color-primary-dark) 0%, #0d2f30 100%); color: #fff; } #footer.footer--f1 .containers { max-width: 1240px; margin: 0 auto; padding: 32px 20px 20px; box-sizing: border-box; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 30px; } #footer.footer--f1 .logo { width: 180px; height: auto; display: block; filter: brightness(0) invert(1); opacity: .95; } #footer.footer--f1 .footer-copyright-con { text-align: center; } #footer.footer--f1 .footer-nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 18px; margin-bottom: 10px; } #footer.footer--f1 .footer-nav-links a { font-size: 13px; font-weight: 600; color: #fff; text-decoration: none; transition: color .2s; } #footer.footer--f1 .footer-nav-links a:hover { color: var(--color-accent); } #footer.footer--f1 .footer-copyright-con p { margin: 6px 0; font-size: 12px; line-height: 1.7; color: rgba(255,255,255,.82); } #footer.footer--f1 .footer-copyright-con p a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); } #footer.footer--f1 .footer-copyright-con .beizhu { color: rgba(255,255,255,.65); font-size: 11px; } #footer.footer--f1 .code { width: 100px; height: 100px; object-fit: cover; display: block; background: #fff; padding: 5px; border-radius: 8px; } #footer.footer--f1 .footer-bottom { background: rgba(0,0,0,.28); text-align: center; padding: 12px 20px; font-size: 12px; color: rgba(255,255,255,.8); } @media (max-width: 900px) { #footer.footer--f1 .containers { grid-template-columns: 1fr; justify-items: center; gap: 18px; } } /* ===== PC首页区块 END ===== */ /* ===== 列表页 / 详情页样式（非首页，保留不动） ===== */ .regional-filter, .regionalFiltering { background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(var(--color-primary-dark-rgb), 0.05); padding: 2px 20px; margin: 18px 0; border: 1px solid var(--color-border-light); } .regional-filter__row, .regionalFilteringBox { display: flex; align-items: baseline; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--color-border-light); } .regional-filter__row:last-child, .regionalFilteringBox:last-child { border-bottom: none; } .regional-filter__label, .regionalFilteringLeft { flex-shrink: 0; width: 44px; display: inline-flex; align-items: baseline; padding-top: 5px; } .regional-filter__label-text, .regionalFilteringLeft > span { position: relative; display: inline-block; font-size: 14px; font-weight: 700; color: var(--color-text-dark); padding-left: 10px; letter-spacing: .04em; line-height: 1.4; } .regional-filter__label-text::before, .regionalFilteringLeft > span::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 14px; border-radius: 2px; background: var(--color-primary); } .regional-filter__options, .regionalFilteringRight { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; padding: 2px 0; } .regional-filter__link, .regional-filter__options a, .regionalFilteringRight a { display: inline-flex; align-items: center; padding: 5px 15px; font-size: 13px; color: var(--color-text-normal); text-decoration: none; border: 1px solid transparent; border-radius: 16px; white-space: nowrap; line-height: 1.6; transition: color .2s, background .2s, border-color .2s, transform .15s, box-shadow .2s; } .regional-filter__link:hover, .regional-filter__options a:hover, .regionalFilteringRight a:hover { color: var(--color-primary-dark); background: var(--color-primary-light); border-color: rgba(var(--color-primary-rgb), 0.25); transform: translateY(-1px); } .regional-filter__link.cursorActive, .regional-filter__options a.cursorActive, .regionalFilteringRight a.cursorActive { color: #fff; background: linear-gradient(120deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); border-color: transparent; font-weight: 600; box-shadow: 0 3px 10px rgba(var(--color-primary-dark-rgb), 0.22); } .regional-filter__link.cursorActive:hover, .regional-filter__options a.cursorActive:hover, .regionalFilteringRight a.cursorActive:hover { filter: brightness(1.06); color: #fff; transform: translateY(-1px); background: linear-gradient(120deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); } /* ============================== .hospital-tabs — 列表页标题条（底线分割 + 描边咨询） 结构：.hospital-tabs > .hospital-tab-item--title (.badge + .text) + button.hospital-tab-item--consult ============================== */ .hospital-tabs, .yy-list-tabs { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: linear-gradient(180deg, rgba(var(--color-primary-light-rgb), 0.55) 0%, #fff 100%); border-radius: 0; padding: 14px 4px 12px; margin: 14px 0 18px; box-shadow: none; border: none; border-bottom: 2px solid rgba(var(--color-primary-rgb), 0.18); overflow: visible; width: 100%; box-sizing: border-box; } .hospital-tabs::before, .yy-list-tabs::before { content: ""; position: absolute; left: 0; bottom: -2px; width: 72px; height: 3px; border-radius: 2px 2px 0 0; background: var(--color-primary); } .hospital-tabs::after, .yy-list-tabs::after { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 1px; background: linear-gradient(90deg, rgba(var(--color-primary-rgb), 0.35) 0%, transparent 55%); } .hospital-tab-item--title { display: inline-flex; align-items: baseline; gap: 12px; flex: 1; min-width: 0; padding-left: 2px; } .hospital-tab-item__badge { display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--color-primary); font-size: 12px; font-weight: 700; padding: 0 0 0 10px; border-radius: 0; letter-spacing: .12em; box-shadow: none; flex-shrink: 0; white-space: nowrap; position: relative; line-height: 1.2; } .hospital-tab-item__badge::before { content: ""; position: absolute; left: 0; top: 0.15em; bottom: 0.15em; width: 3px; border-radius: 1px; background: var(--color-accent); } .hospital-tab-item__text { font-size: 18px; font-weight: 700; color: var(--color-text-dark); letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } .hospital-tab-item--consult { display: inline-flex; align-items: center; justify-content: center; gap: 0; border: 1.5px solid var(--color-primary); cursor: pointer; font-size: 13px; font-weight: 700; padding: 8px 18px; border-radius: 4px; color: var(--color-primary-dark); background: #fff; box-shadow: none; transition: color .2s ease, background .2s ease, border-color .2s ease, transform .15s ease; white-space: nowrap; position: relative; flex-shrink: 0; line-height: 1.2; } .hospital-tab-item--consult::before { content: none; } .hospital-tab-item--consult:hover { color: #fff; background: var(--color-primary); border-color: var(--color-primary); transform: translateY(-1px); box-shadow: none; filter: none; } .hospital-tab-item--consult:active { transform: translateY(0); background: var(--color-primary-dark); border-color: var(--color-primary-dark); box-shadow: none; } /* ============================== .yycard — 医院/医生列表页卡片（list_hospital / list_doctor） ============================== */ .content_con { gap: 0; } .content_con .yycard.card_con, .content_con .yycard.yylist_acrdcon { height: auto; min-height: 0; align-items: stretch; justify-content: flex-start; gap: 0; margin: 0 0 16px; padding: 0; border: none; border-bottom: none; background: #fff; border-radius: 12px; box-shadow: 0 2px 12px rgba(var(--color-primary-dark-rgb), 0.07); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; } .content_con .yycard:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(var(--color-primary-dark-rgb), 0.14); } .content_con .yycard__media { flex: 0 0 200px; width: 200px; max-width: 200px; align-self: stretch; display: block; position: relative; overflow: hidden; background: var(--color-primary-light); } .content_con .yycard__img, .content_con .yycard .card_img { width: 100% !important; height: 100% !important; min-height: 148px; max-height: none; object-fit: cover; filter: none !important; transition: transform .35s ease; } .content_con .yycard:hover .yycard__img { transform: scale(1.05); } .content_con .yycard__body, .content_con .yycard .card_textcon { flex: 1; min-width: 0; width: auto; margin: 0; padding: 16px 18px; display: flex; flex-direction: column; justify-content: center; gap: 10px; box-sizing: border-box; } .content_con .yycard__title-link { text-decoration: none; } .content_con .yycard__title, .content_con .yycard .list_tit { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.45; color: var(--color-text-dark); transition: color .2s ease; } .content_con .yycard:hover .yycard__title { color: var(--color-primary-dark); } .content_con .yycard__projects, .content_con .yycard .xm_con { display: flex; align-items: flex-start; gap: 10px; width: 100%; } .content_con .yycard__projects-label, .content_con .yycard .xm_tex { flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--color-primary-dark); background: var(--color-primary-light); padding: 3px 10px; border-radius: 4px; line-height: 1.5; min-width: auto; } .content_con .yycard__tags { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; max-height: 52px; overflow: hidden; } .content_con .yycard__tag, .content_con .yycard .xm_but { display: inline-block; max-width: 120px; padding: 3px 10px; font-size: 11px; line-height: 1.4; color: var(--color-primary-dark); background: #fff; border: 1px solid var(--color-border-light); border-radius: 12px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .2s ease, color .2s ease, border-color .2s ease; } .content_con .yycard__tag:hover, .content_con .yycard .xm_but:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .content_con .yycard__meta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .content_con .yycard__meta-item { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.5; color: var(--color-text-light); } .content_con .yycard__meta-ico { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; background-size: contain; background-repeat: no-repeat; background-position: center; opacity: .85; } .content_con .yycard__meta-ico--addr { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a0dbdc'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E"); } .content_con .yycard__meta-ico--time { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a0dbdc'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E"); } .content_con .yycard__meta-ico--intro { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a0dbdc'%3E%3Cpath d='M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z'/%3E%3C/svg%3E"); } .content_con .yycard__meta-text { flex: 1; min-width: 0; } .content_con .yycard__meta-text--intro { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .content_con .yycard__actions, .content_con .yycard .card_button { flex: 0 0 auto; width: auto; min-width: 108px; height: auto; margin: 0; padding: 16px 18px 16px 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; box-sizing: border-box; } .content_con .yycard__actions .but_item { width: 100%; min-width: 96px; height: 38px; margin: 0; font-size: 13px; font-weight: 600; border-radius: 8px; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; } .content_con .yycard__actions .but_item--primary { border: none; color: #fff; background: linear-gradient(120deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); box-shadow: 0 4px 12px rgba(var(--color-primary-dark-rgb), 0.25); } .content_con .yycard__actions .but_item--primary:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 6px 16px rgba(var(--color-primary-dark-rgb), 0.32); } .content_con .yycard__actions .but_item--outline, .content_con .yycard__actions .but_yh { border: 1px solid var(--color-primary); background: #fff; color: var(--color-primary-dark); } .content_con .yycard__actions .but_item--outline:hover, .content_con .yycard__actions .but_yh:hover { background: var(--color-primary-light); transform: translateY(-1px); } /* ============================== .aside-head — 侧边栏栏目标题（底线分割 + 文字「更多」） 与 .hospital-tabs 同系：无卡片壳 / 左短横标记 / 描边交互 ============================== */ .aside_con { padding: 10px 12px 16px; gap: 0; } .aside_con .aside_titcon.aside-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 10px 2px 11px; border: none; border-bottom: 2px solid rgba(var(--color-primary-rgb), 0.16); border-radius: 0; background: transparent; box-shadow: none; font-size: inherit; font-weight: normal; color: inherit; } .aside_con .aside_titcon.aside-head::before { content: ""; position: absolute; left: 0; bottom: -2px; width: 48px; height: 3px; border-radius: 2px 2px 0 0; background: var(--color-primary); } .aside_con .aside-head:not(:first-of-type) { margin-top: 18px; } .aside_con .aside-head__title, .aside_con .aside_tit.aside-head__title { position: relative; margin: 0; flex: 1; min-width: 0; padding-left: 11px; font-size: 16px; font-weight: 700; color: var(--color-text-dark); letter-spacing: .03em; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .aside_con .aside-head__title::before, .aside_con .aside_tit.aside-head__title::before { content: ""; position: absolute; left: 0; top: 0.2em; bottom: 0.2em; width: 3px; border-radius: 1px; background: var(--color-accent); } .aside_con .aside-head__more, .aside_con a.aside_more.aside-head__more { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; padding: 4px 0; font-size: 12px; font-weight: 600; line-height: 1; color: var(--color-primary); background: transparent; border: none; border-radius: 0; text-decoration: none; box-shadow: none; transition: color .2s ease, transform .15s ease; } .aside_con .aside-head__more:hover, .aside_con a.aside_more.aside-head__more:hover { color: var(--color-primary-dark); background: transparent; border-color: transparent; box-shadow: none; transform: none; } .aside_con .aside-head__more-ico { display: inline-block; font-size: 13px; line-height: 1; transition: transform .2s ease; } .aside_con .aside-head__more:hover .aside-head__more-ico { transform: translateX(3px); } .aside_con .aside-head + .card_con, .aside_con .aside-head + a.card_rightcon { margin-top: 12px; } /* 空结果提示 */ .none_yy { background: linear-gradient(135deg, var(--color-primary-light) 0%, #fff 100%); border: 1px dashed var(--color-primary-accent); color: var(--color-primary-dark); font-size: 13.5px; font-weight: 600; text-align: center; padding: 14px 18px; margin: 14px 0; border-radius: 8px; position: relative; } .none_yy::before { content: 'ℹ️ '; margin-right: 4px; } /* ============================== 响应式（≤960px） ============================== */ @media (max-width: 960px) { .regional-filter, .regionalFiltering { padding: 2px 14px; } .regional-filter__row, .regionalFilteringBox { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 0; } .regional-filter__label, .regionalFilteringLeft { width: auto; padding-top: 0; } .regional-filter__options, .regionalFilteringRight { gap: 8px; } .regional-filter__link, .regional-filter__options a, .regionalFilteringRight a { padding: 6px 14px; } .content_con .yycard.card_con, .content_con .yycard.yylist_acrdcon { flex-direction: column; } .content_con .yycard__media { flex: none; width: 100%; max-width: none; aspect-ratio: 16 / 10; height: 150px; } .content_con .yycard__img, .content_con .yycard .card_img { min-height: 0; } .content_con .yycard__actions, .content_con .yycard .card_button { flex-direction: row; width: 100%; min-width: 0; padding: 0 16px 16px; border-left: none; border-top: 1px solid var(--color-border-light); } .content_con .yycard__actions .but_item { flex: 1; } .page_con.page-nav { gap: 6px; padding: 14px 10px; } .page_con.page-nav a, .page_con.page-nav span { min-width: 34px; height: 34px; padding: 0 10px; font-size: 13px; } .page_con.page-nav a.a1 { padding: 0 12px; font-size: 12px; } } /* 资讯详情：标题区项目标签 */ .zx_detcon .zx_projects { display: flex; align-items: flex-start; width: 100%; flex-basis: 100%; margin-top: 8px; gap: 8px; } .zx_detcon .zx_projects__label { flex-shrink: 0; line-height: 28px; white-space: nowrap; color: #666; } .zx_detcon .zx_projects__track { margin: 0; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; flex: 1; min-width: 0; max-height: 96px; overflow-y: auto; padding-right: 4px; line-height: 1.5; color: #666; } .zx_detcon .zx_projects__track .zx_projects__tag, .zx_detcon .zx_projects__track a.zx_projects__tag, .zx_detcon .zx_projects__track span.zx_projects__tag { display: inline-block; max-width: 160px; padding: 2px 10px; font-size: 12px; line-height: 22px; color: var(--color-primary-dark, #08646A); background: #fff; border: 1px solid var(--color-primary-light, #DCF2F3); border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; box-sizing: border-box; } .zx_detcon .zx_projects__track a.zx_projects__tag:hover { background: var(--color-primary, #0B7C82); border-color: var(--color-primary, #0B7C82); color: #fff; } .zx_detcon .zx_projects__track span.zx_projects__tag { cursor: default; }