/* ========================================================================== 解决方案「左目录 + 右详情」面板 —— 共用样式（单一来源） 方案页与首页经 view/common/solpanel.html 各自引入本文件； 选择器全部以 .so-tabs 起头（该元素由 panel.js 生成）， 脚本未执行时本文件不产生任何效果，原网格/瓷片保持不变。 改样式只改这里，两个页面同时生效。 ========================================================================== */ /* ================= 2026-11-11 方案页：左目录 + 右详情面板（追加段，勿删） ================= */ /* ========================================================================== 解决方案页 · 左目录 + 右详情切换（纯前端增强） 依赖：solutions.css 已加载；本文件须在其后引入 回退：脚本未执行时本文件不生效（选择器全部以 .so-tabs 起头） ========================================================================== */ /* 面板外壳 */ .if-page .so-tabs, #hxSolutions .so-tabs{position:relative;display:grid;grid-template-columns:238px minmax(0,1fr); background:#fff;border-radius:18px;overflow:hidden; box-shadow:0 18px 48px rgba(12,61,36,.09),inset 0 0 0 1px rgba(25,173,94,.09); min-height:470px;margin:34px 0 56px} /* 被接管后的两个分区只剩标题描述，视觉隐藏保留 DOM */ body.so-tabs-on .so-cat-sec{display:none} /* ===== 左目录 ===== */ .if-page .so-tabs .so-nav, #hxSolutions .so-tabs .so-nav{background:linear-gradient(180deg,#F4FAF7,#FBFDFC);padding:26px 0 22px; border-right:1px solid rgba(25,173,94,.1);min-width:0} .if-page .so-tabs .so-nav-g, #hxSolutions .so-tabs .so-nav-g{padding:0 14px;margin-bottom:16px} .if-page .so-tabs .so-nav-g:last-child, #hxSolutions .so-tabs .so-nav-g:last-child{margin-bottom:0} .if-page .so-tabs .so-nav-t, #hxSolutions .so-tabs .so-nav-t{position:relative;font-family:inherit;font-size:12.5px;line-height:1; font-weight:700;letter-spacing:.08em;color:#0C7A3C;margin:0 0 12px 12px;padding-left:11px} .if-page .so-tabs .so-nav-t::before, #hxSolutions .so-tabs .so-nav-t::before{content:"";position:absolute;left:0;top:50%; transform:translateY(-50%);width:3px;height:10px;border-radius:2px; background:linear-gradient(180deg,#3DFFA2,#19AD5E)} .if-page .so-tabs .so-nav-i, #hxSolutions .so-tabs .so-nav-i{display:block;width:100%;text-align:left;border:0;background:none; cursor:pointer;padding:10px 12px;border-radius:9px; font-family:inherit;font-size:15px;line-height:1.5;font-weight:400;color:#2F4C3D; transition:background .18s,color .18s,box-shadow .18s;position:relative} .if-page .so-tabs .so-nav-i:hover, #hxSolutions .so-tabs .so-nav-i:hover{background:#E9F5EE;color:#0C7A3C} .if-page .so-tabs .so-nav-i.on, #hxSolutions .so-tabs .so-nav-i.on{background:#fff;color:#0C7A3C;font-weight:600; box-shadow:0 2px 12px rgba(12,61,36,.08),inset 0 0 0 1px rgba(25,173,94,.18)} .if-page .so-tabs .so-nav-i.on::before, #hxSolutions .so-tabs .so-nav-i.on::before{content:"";position:absolute;left:0;top:50%; transform:translateY(-50%);width:3px;height:15px;border-radius:2px; background:linear-gradient(180deg,#19AD5E,#0C7A3C)} /* ===== 右侧面板：一次只显示一个方案 ===== */ .if-page .so-tabs ul.so-sols, #hxSolutions .so-tabs ul.so-sols{display:block;grid-template-columns:none;gap:0;padding:0;margin:0; grid-column:2;grid-row:1;min-width:0} .if-page .so-tabs ul.so-sols li, #hxSolutions .so-tabs ul.so-sols li{display:none;height:100%;margin:0} .if-page .so-tabs ul.so-sols li.on, #hxSolutions .so-tabs ul.so-sols li.on{display:block} .if-page .so-tabs li .so-sol, #hxSolutions .so-tabs li .so-sol{position:relative;display:flex;flex-direction:row-reverse;height:100%; min-height:470px;background:#fff;border-radius:0;box-shadow:none;transform:none;overflow:hidden; border:0} .if-page .so-tabs li .so-sol::before, #hxSolutions .so-tabs li .so-sol::before, .if-page .so-tabs li .so-sol::after, #hxSolutions .so-tabs li .so-sol::after{display:none} .if-page .so-tabs li .so-sol:hover, #hxSolutions .so-tabs li .so-sol:hover{transform:none;box-shadow:none;border:0} /* 图区：右侧 42%，左缘白渐变过渡 */ .if-page .so-tabs li .im, #hxSolutions .so-tabs li .im{position:relative;inset:auto;width:42%;flex:none;height:auto; min-height:470px;aspect-ratio:auto;background:#F2F8F4;border-radius:0;overflow:hidden} .if-page .so-tabs li .im img, #hxSolutions .so-tabs li .im img{width:100%;height:100%;object-fit:cover; filter:saturate(.95) contrast(1.03);transform:none;transition:transform 7s ease-out} .if-page .so-tabs li.on .im img, #hxSolutions .so-tabs li.on .im img{transform:scale(1.04)} .if-page .so-tabs li .im::after, #hxSolutions .so-tabs li .im::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.9) 8%,rgba(255,255,255,.5) 26%, rgba(255,255,255,.12) 44%,rgba(255,255,255,0) 56%)} .if-page .so-tabs li .im .tag, #hxSolutions .so-tabs li .im .tag{display:inline-block;border-radius:999px; background:rgba(255,255,255,.94);color:#0C7A3C; font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.02em;font-style:normal; line-height:1;padding:6px 12px; box-shadow:0 2px 10px rgba(12,61,36,.1)} /* 文字区 */ .if-page .so-tabs li .bd, #hxSolutions .so-tabs li .bd{position:relative;z-index:2;width:58%;max-width:none;min-height:470px; display:flex;flex-direction:column;justify-content:center;padding:44px 26px 44px 52px} .if-page .so-tabs li h3, #hxSolutions .so-tabs li h3{font-family:inherit;font-size:27px;line-height:1.34;color:#0F2419;margin:0 0 16px; padding:0 0 0 15px;font-weight:700;letter-spacing:-.01em} .if-page .so-tabs li h3::before, #hxSolutions .so-tabs li h3::before{content:"";position:absolute;width:4px;height:24px;top:.2em; background:linear-gradient(180deg,#19AD5E,#0C7A3C);border-radius:2px} .if-page .so-tabs li p, #hxSolutions .so-tabs li p{font-family:inherit;font-size:14.8px;line-height:1.9;color:#4E6659;margin:0 0 22px; display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden} /* 能力标签 */ .if-page .so-tabs .so-pts, #hxSolutions .so-tabs .so-pts{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 26px} .if-page .so-tabs .so-pts span, #hxSolutions .so-tabs .so-pts span{font-family:inherit;font-size:12.5px;line-height:1;font-weight:600; letter-spacing:.01em;color:#0C7A3C;background:#E8F6EE;border-radius:999px;padding:8px 14px; box-shadow:inset 0 0 0 1px rgba(25,173,94,.16);white-space:nowrap} /* 按钮：与站内「免费试用」(.btn-trial) 同款绿渐变胶囊 + 扫光动效 */ .if-page .so-tabs li .more, #hxSolutions .so-tabs li .more{position:relative;overflow:hidden;align-self:flex-start;margin:0; display:inline-flex;align-items:center;gap:6px;padding:10px 24px;border-radius:999px; font-family:inherit;font-size:14px;font-weight:700;letter-spacing:.02em;color:#fff;line-height:1.2; background:linear-gradient(135deg,#2EE68B,#0FA55F); box-shadow:0 8px 24px rgba(25,173,94,.4),inset 0 1px 0 rgba(255,255,255,.35); border:1px solid rgba(255,255,255,.4); transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1)} .if-page .so-tabs li .more::after, #hxSolutions .so-tabs li .more::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%; background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-20deg);transition:left .55s cubic-bezier(.4,0,.2,1)} .if-page .so-tabs li .more em, #hxSolutions .so-tabs li .more em{font-style:normal;font-size:14px;line-height:1;color:#fff; transition:transform .25s cubic-bezier(.4,0,.2,1)} .if-page .so-tabs li .so-sol:hover .more, #hxSolutions .so-tabs li .so-sol:hover .more, .if-page .so-tabs li .more:hover, #hxSolutions .so-tabs li .more:hover{transform:translateY(-1px) scale(1.02); box-shadow:0 12px 32px rgba(25,173,94,.55)} .if-page .so-tabs li .so-sol:hover .more::after, #hxSolutions .so-tabs li .so-sol:hover .more::after, .if-page .so-tabs li .more:hover::after, #hxSolutions .so-tabs li .more:hover::after{left:130%} .if-page .so-tabs li .so-sol:hover .more em, #hxSolutions .so-tabs li .so-sol:hover .more em{transform:translateX(3px)} /* 桌面端不显示圆点 / 分组分隔 / 手风琴箭头与分组标签（后两者仅手机手风琴形态用） */ .so-nav-dv,.so-dots,.so-chev,.so-acc-lb{display:none} /* ===== 移动端 / 平板 ≤900：顶部横滑胶囊 + 上图下文 ===== */ @media (max-width:900px){ .if-page .so-tabs, #hxSolutions .so-tabs{display:block;min-height:0;border-radius:14px;margin:22px 0 40px} .if-page .so-tabs ul.so-sols, #hxSolutions .so-tabs ul.so-sols{grid-column:auto;grid-row:auto} .if-page .so-tabs .so-nav, #hxSolutions .so-tabs .so-nav{display:flex;overflow-x:auto;padding:11px 10px;border-right:0; border-bottom:1px solid rgba(25,173,94,.1);-webkit-overflow-scrolling:touch; scrollbar-width:none;background:#fff;position:relative;z-index:6} .if-page .so-tabs .so-nav::-webkit-scrollbar, #hxSolutions .so-tabs .so-nav::-webkit-scrollbar{display:none} .if-page .so-tabs .so-nav-g, #hxSolutions .so-tabs .so-nav-g{padding:0;margin:0;display:flex;align-items:center;flex:none} .if-page .so-tabs .so-nav-t, #hxSolutions .so-tabs .so-nav-t{display:none} .so-nav-dv{display:block;flex:none;width:1px;height:18px;margin:0 9px; background:rgba(25,173,94,.22)} .if-page .so-tabs .so-nav-i, #hxSolutions .so-tabs .so-nav-i{white-space:nowrap;width:auto;font-size:13.5px;padding:8px 14px; border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px rgba(25,173,94,.14);margin-right:8px} .if-page .so-tabs .so-nav-i.on::before, #hxSolutions .so-tabs .so-nav-i.on::before{display:none} .if-page .so-tabs li .so-sol, #hxSolutions .so-tabs li .so-sol{min-height:0;display:flex;flex-direction:column} .if-page .so-tabs li .im, #hxSolutions .so-tabs li .im{position:relative;inset:auto;width:100%;height:190px;min-height:0} .if-page .so-tabs li .im::after, #hxSolutions .so-tabs li .im::after{background:linear-gradient(180deg,rgba(255,255,255,0) 55%, rgba(255,255,255,.8))} .if-page .so-tabs li .bd, #hxSolutions .so-tabs li .bd{width:100%;max-width:100%;min-height:0;padding:20px 18px 24px} .if-page .so-tabs li h3, #hxSolutions .so-tabs li h3{font-size:20px;padding-left:13px} .if-page .so-tabs li h3::before, #hxSolutions .so-tabs li h3::before{height:18px} .if-page .so-tabs li p, #hxSolutions .so-tabs li p{font-size:14px;line-height:1.85;-webkit-line-clamp:4;margin-bottom:16px} .if-page .so-tabs .so-pts, #hxSolutions .so-tabs .so-pts{gap:7px;margin-bottom:18px} .if-page .so-tabs .so-pts span, #hxSolutions .so-tabs .so-pts span{font-size:11.5px;padding:7px 11px} .if-page .so-tabs li .more, #hxSolutions .so-tabs li .more{padding:10px 20px;font-size:13.5px} .so-dots{display:flex;justify-content:center;gap:6px;padding:0 0 16px} .so-dots i{width:6px;height:6px;border-radius:50%;background:rgba(25,173,94,.22); transition:width .2s,background .2s} .so-dots i.on{width:16px;border-radius:3px;background:#19AD5E} } /* ===== 移动端手风琴形态（≤900，panel.js 按视口给 .so-tabs 加 .so-acc 类） ===== 10 个方案名竖排一次看全，点击行内展开详情；无横滑、无手势冲突 */ @media (max-width:900px){ .if-page .so-tabs.so-acc, #hxSolutions .so-tabs.so-acc{display:block;margin:14px 0 24px;border-radius:0; box-shadow:none;background:transparent;overflow:visible} .if-page .so-tabs.so-acc .so-nav, #hxSolutions .so-tabs.so-acc .so-nav{display:none} .if-page .so-tabs.so-acc .so-dots, #hxSolutions .so-tabs.so-acc .so-dots{display:none} .if-page .so-tabs.so-acc .so-acc-lb, #hxSolutions .so-tabs.so-acc .so-acc-lb{display:block;font-family:inherit;font-size:12px; font-weight:600;color:#5C8770;letter-spacing:.04em;margin:0;padding:16px 12px 6px} .if-page .so-tabs.so-acc ul.so-sols, #hxSolutions .so-tabs.so-acc ul.so-sols{display:block;padding:0} .if-page .so-tabs.so-acc ul.so-sols>li, #hxSolutions .so-tabs.so-acc ul.so-sols>li{display:block;border-bottom:1px solid rgba(25,173,94,.12)} .if-page .so-tabs.so-acc ul.so-sols>li:last-child, #hxSolutions .so-tabs.so-acc ul.so-sols>li:last-child{border-bottom:0} /* 折叠行：小图 + 名称 + 箭头 */ .if-page .so-tabs.so-acc li .so-sol, #hxSolutions .so-tabs.so-acc li .so-sol{display:flex;flex-direction:row;align-items:center; gap:12px;min-height:0;padding:13px 12px} .if-page .so-tabs.so-acc li .im, #hxSolutions .so-tabs.so-acc li .im{position:static;inset:auto;width:46px;height:46px;min-height:0; flex:none;border-radius:8px;overflow:hidden} .if-page .so-tabs.so-acc li .im img, #hxSolutions .so-tabs.so-acc li .im img{width:100%;height:100%;object-fit:cover; transform:none;transition:none;filter:none} .if-page .so-tabs.so-acc li .im .tag, #hxSolutions .so-tabs.so-acc li .im .tag, .if-page .so-tabs.so-acc li .im::after, #hxSolutions .so-tabs.so-acc li .im::after{display:none} .if-page .so-tabs.so-acc li .bd, #hxSolutions .so-tabs.so-acc li .bd{flex:1;min-width:0;width:auto;max-width:none;margin:0; padding:0;display:flex;flex-direction:column;justify-content:center} .if-page .so-tabs.so-acc li h3, #hxSolutions .so-tabs.so-acc li h3{font-size:16px;line-height:1.3;margin:0;padding:0; font-weight:500;color:#22382B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .if-page .so-tabs.so-acc li h3::before, #hxSolutions .so-tabs.so-acc li h3::before{display:none} .if-page .so-tabs.so-acc li p, #hxSolutions .so-tabs.so-acc li p, .if-page .so-tabs.so-acc li .so-pts, #hxSolutions .so-tabs.so-acc li .so-pts, .if-page .so-tabs.so-acc li .more, #hxSolutions .so-tabs.so-acc li .more{display:none} .so-chev{display:block;flex:none;width:8px;height:8px;margin-left:auto;margin-right:8px; border-right:1.5px solid #8FAA9B;border-bottom:1.5px solid #8FAA9B;transform:rotate(-45deg)} .if-page .so-tabs.so-acc li.on .so-chev, #hxSolutions .so-tabs.so-acc li.on .so-chev{display:none} /* 展开卡：白瓷底 + 薄荷光晕投影，上图下文 */ .if-page .so-tabs.so-acc li.on, #hxSolutions .so-tabs.so-acc li.on{display:block;background:#fff;border-radius:14px; box-shadow:0 10px 30px rgba(12,61,36,.09),inset 0 0 0 1px rgba(25,173,94,.12); margin:6px 0 10px;padding:0 12px 16px;border-bottom:0} .if-page .so-tabs.so-acc li.on .so-sol, #hxSolutions .so-tabs.so-acc li.on .so-sol{display:block;padding:12px 0 0} .if-page .so-tabs.so-acc li.on .im, #hxSolutions .so-tabs.so-acc li.on .im{width:100%;height:186px;border-radius:10px;position:relative} .if-page .so-tabs.so-acc li.on .im .tag, #hxSolutions .so-tabs.so-acc li.on .im .tag{display:block;position:absolute;left:10px;top:10px;z-index:2; font-style:normal;font-size:12px;font-weight:600;letter-spacing:.02em;line-height:1; padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.94);color:#0C7A3C; box-shadow:0 2px 10px rgba(12,61,36,.1)} .if-page .so-tabs.so-acc li.on .bd, #hxSolutions .so-tabs.so-acc li.on .bd{padding:16px 2px 0;display:block} .if-page .so-tabs.so-acc li.on h3, #hxSolutions .so-tabs.so-acc li.on h3{font-size:20px;font-weight:600;color:#0F2419;padding-left:13px; position:relative;margin:0 0 10px;white-space:normal} .if-page .so-tabs.so-acc li.on h3::before, #hxSolutions .so-tabs.so-acc li.on h3::before{display:block;content:"";position:absolute;left:0;top:2px; width:3px;height:18px;border-radius:2px;background:linear-gradient(180deg,#3DFFA2,#0C7A3C)} .if-page .so-tabs.so-acc li.on p, #hxSolutions .so-tabs.so-acc li.on p{display:-webkit-box;-webkit-line-clamp:3; -webkit-box-orient:vertical;overflow:hidden;font-size:14px;line-height:1.8;color:#4E6659;margin:0 0 12px} .if-page .so-tabs.so-acc li.on .so-pts, #hxSolutions .so-tabs.so-acc li.on .so-pts{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px} .if-page .so-tabs.so-acc li.on .more, #hxSolutions .so-tabs.so-acc li.on .more{display:inline-flex;padding:10px 20px;font-size:13.5px} } /* 平板区间：图加高、正文收窄居中，避免一行过长 */ @media (min-width:561px) and (max-width:900px){ .if-page .so-tabs li .im, #hxSolutions .so-tabs li .im{height:clamp(220px,34vw,320px)} .if-page .so-tabs li .bd, #hxSolutions .so-tabs li .bd{width:100%;max-width:660px;margin:0 auto;padding:26px 26px 30px} .if-page .so-tabs li h3, #hxSolutions .so-tabs li h3{font-size:24px} .if-page .so-tabs li p, #hxSolutions .so-tabs li p{font-size:15px;line-height:1.9} .if-page .so-tabs .so-pts span, #hxSolutions .so-tabs .so-pts span{font-size:12.5px;padding:8px 13px} } /* ===== 首页专属：接管原瓷片 / 间距节奏 / 补齐基础规则（首页不加载 solutions.css） ===== */ #hxSolutions.hx-sol-on .g-row{display:none} #hxSolutions .so-tabs{margin:4px 0 14px} #hxSolutions .so-tabs li h3{position:relative} #hxSolutions .so-tabs li h3::before{left:0} #hxSolutions .so-tabs li .im .tag{position:absolute;left:12px;top:12px;z-index:2; font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.02em;font-style:normal}