/* ============================================================ 产品中心 · 详情页 cp_wz.html 复用 cp.css 的设计令牌与公共组件（Hero / 区块头 / 按钮 / CTA），本文件只补详情页专有区块：产品概览、产品介绍正文、上下篇、相关产品。页面，需同时引入 cp.css + cp-wz.css。注：本站 html 根字号为 calc(100vw/19.2)，1920 下 1rem = 100px。 ============================================================ */ .cp-wz-page { background: #f6f8f8; } /* ---------- 产品概览 ---------- */ .cp-wz-main { align-items: center; background: #fff; display: grid; gap: .6rem; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); padding: .8rem 0; } .cp-wz-media { align-items: center; background: linear-gradient(160deg, #fff 0%, #eef2f3 100%); border: 1px solid #eef1f2; border-radius: .12rem; display: flex; height: 4.6rem; justify-content: center; overflow: hidden; padding: .4rem; position: relative; } .cp-wz-media img { display: block; max-height: 100%; max-width: 100%; object-fit: contain; transition: transform .5s; width: auto; } .cp-wz-media:hover img { transform: scale(1.03); } .cp-wz-media-corner { border-color: var(--brand-primary, #E73216) transparent transparent var(--brand-primary, #E73216); border-style: solid; border-width: 1px; height: .34rem; left: .2rem; position: absolute; top: .2rem; width: .34rem; z-index: 1; } .cp-wz-overview h2 { color: #231815; font-size: clamp(26px, 2.2vw, 38px); font-weight: 700; letter-spacing: -.01em; line-height: 1.22; margin: .14rem 0 .18rem; } .cp-wz-desc { color: #625F5D; font-size: 15px; line-height: 1.85; margin: 0; } .cp-wz-points { display: grid; gap: .18rem; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: .34rem 0 0; padding: 0; } .cp-wz-points li { background: #f6f8f8; border: 1px solid #f0f2f3; border-left: 2px solid var(--brand-primary, #E73216); border-radius: .1rem; box-sizing: border-box; padding: .22rem .26rem; transition: background .3s, border-color .3s, box-shadow .3s, transform .3s; } .cp-wz-points li:hover { background: #fff; border-color: rgba(231, 50, 22, .2); border-left-color: var(--brand-primary, #E73216); box-shadow: 0 14px 28px rgba(35, 24, 21, .08); transform: translateY(-3px); } .cp-wz-points b { color: #231815; display: block; font-size: 16px; font-weight: 700; line-height: 1.4; } .cp-wz-points small { color: #9A9591; display: block; font-size: 12px; line-height: 1.5; margin-top: .04rem; } .cp-wz-actions { align-items: center; display: flex; flex-wrap: wrap; gap: .2rem; margin-top: .36rem; } .cp-wz-actions .cp-text-action { border-color: rgba(35, 24, 21, .18); color: #625F5D; } .cp-wz-actions .cp-text-action:hover { background: #f6f8f8; border-color: rgba(231, 50, 22, .4); color: var(--brand-primary, #E73216); } .cp-wz-date { color: #9A9591; font-size: 13px; line-height: 1.6; } /* ---------- 产品介绍正文 ---------- */ .cp-wz-detail { background: #f6f8f8; padding: .8rem 0; } /* CMS 富文本正文：统一排版层次 */ .cp-wz-content { background: #fff; border: 1px solid #f0f2f3; border-radius: .12rem; box-sizing: border-box; color: #625F5D; font-size: 15px; line-height: 1.9; padding: .5rem .56rem; } .cp-wz-content > *:first-child { margin-top: 0; } .cp-wz-content > *:last-child { margin-bottom: 0; } .cp-wz-content p { color: #625F5D; font-size: 15px; line-height: 1.9; margin: 0 0 .22rem; } .cp-wz-content h2, .cp-wz-content h3, .cp-wz-content h4 { color: #231815; font-weight: 700; letter-spacing: -.01em; line-height: 1.35; } .cp-wz-content h2 { font-size: clamp(22px, 1.8vw, 28px); margin: .46rem 0 .18rem; padding-left: .22rem; position: relative; } .cp-wz-content h3 { font-size: clamp(18px, 1.4vw, 22px); margin: .38rem 0 .14rem; } .cp-wz-content h4 { font-size: clamp(16px, 1.2vw, 18px); margin: .3rem 0 .12rem; } .cp-wz-content h2::before, .cp-wz-content h3::before { background: var(--brand-primary, #E73216); border-radius: 2px; content: ""; height: 1em; left: 0; position: absolute; top: .18em; width: 3px; } .cp-wz-content h2 { padding-left: .22rem; } .cp-wz-content h3 { padding-left: .2rem; } .cp-wz-content img { border-radius: .1rem; display: block; height: auto; margin: .3rem auto; max-width: 100%; } .cp-wz-content ul, .cp-wz-content ol { margin: 0 0 .22rem; padding-left: .28rem; } .cp-wz-content ul { list-style: none; padding-left: 0; } .cp-wz-content ol { list-style: decimal; } .cp-wz-content li { font-size: 15px; line-height: 1.9; margin-bottom: .1rem; padding-left: .22rem; position: relative; } .cp-wz-content ul > li::before { background: var(--brand-primary, #E73216); border-radius: 50%; content: ""; height: 6px; left: 0; position: absolute; top: .68em; width: 6px; } .cp-wz-content ol > li { padding-left: .06rem; } .cp-wz-content strong { color: #231815; font-weight: 700; } .cp-wz-content a { color: var(--brand-primary, #E73216); } .cp-wz-content blockquote { background: #f6f8f8; border-left: 3px solid var(--brand-primary, #E73216); border-radius: 0 .1rem .1rem 0; color: #625F5D; margin: .3rem 0; padding: .24rem .3rem; } .cp-wz-content blockquote p:last-child { margin-bottom: 0; } .cp-wz-content table { border-collapse: collapse; font-size: 14px; margin: .3rem 0; width: 100%; } .cp-wz-content th, .cp-wz-content td { border: 1px solid #eef1f2; line-height: 1.7; padding: .14rem .18rem; text-align: left; } .cp-wz-content th { background: #f6f8f8; color: #231815; font-weight: 700; } .cp-wz-content tr:hover td { background: #fbfcfc; } /* ---------- 上一个 / 下一个 ---------- */ .cp-wz-prevnext { background: #f6f8f8; display: grid; gap: .24rem; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 0 .8rem; } .cp-wz-pn a { align-items: center; background: #fff; border: 1px solid #f0f2f3; border-radius: .12rem; box-sizing: border-box; display: flex; flex-direction: column; gap: .06rem; padding: .3rem .34rem; text-decoration: none; transition: border-color .3s, box-shadow .3s, transform .3s; } .cp-wz-pn a:hover { border-color: rgba(231, 50, 22, .24); box-shadow: 0 16px 32px rgba(35, 24, 21, .08); transform: translateY(-3px); } .cp-wz-pn-label { color: #9A9591; font-size: 12px; letter-spacing: .06em; line-height: 1.5; } .cp-wz-pn-title { color: #231815; font-size: clamp(15px, 1.1vw, 17px); font-style: normal; font-weight: 700; line-height: 1.45; } .cp-wz-pn a:hover .cp-wz-pn-title { color: var(--brand-primary, #E73216); } .cp-wz-next a { text-align: right; } /* ---------- 相关产品 ---------- */ .cp-wz-related { background: #fff; padding: .8rem 0; } .cp-wz-related-grid { display: grid; gap: .34rem; grid-template-columns: repeat(3, minmax(0, 1fr)); } .cp-wz-related-card { background: #f6f8f8; border: 1px solid #f0f2f3; border-radius: .12rem; box-sizing: border-box; overflow: hidden; text-decoration: none; transition: border-color .3s, box-shadow .3s, transform .3s; } .cp-wz-related-card:hover { border-color: rgba(231, 50, 22, .2); box-shadow: 0 18px 38px rgba(35, 24, 21, .1); transform: translateY(-4px); } .cp-wz-related-media { align-items: center; background: linear-gradient(160deg, #fff 0%, #eef2f3 100%); display: flex; height: 2.1rem; justify-content: center; overflow: hidden; padding: .26rem; position: relative; } .cp-wz-related-media img { display: block; max-height: 100%; max-width: 100%; object-fit: contain; transition: transform .5s; width: auto; } .cp-wz-related-card:hover .cp-wz-related-media img { transform: scale(1.04); } .cp-wz-related-body { padding: .28rem .3rem .32rem; } .cp-wz-related-body h3 { color: #231815; font-size: clamp(17px, 1.3vw, 20px); font-weight: 700; line-height: 1.4; margin: 0 0 .1rem; } .cp-wz-related-body p { color: #625F5D; font-size: 14px; line-height: 1.75; margin: 0 0 .18rem; } .cp-wz-related-more { color: var(--brand-primary, #E73216); display: inline-flex; font-size: 14px; font-weight: 600; gap: .08rem; } .cp-wz-related-more i { display: inline-flex; transition: transform .3s; } .cp-wz-related-more img { height: 12px; width: 12px; } .cp-wz-related-card:hover .cp-wz-related-more i { transform: translateX(3px); } /* ---------- 响应式 ---------- */ @media (max-width: 991px) { .cp-wz-main { grid-template-columns: 1fr; } .cp-wz-related-grid { grid-template-columns: 1fr; } } @media (max-width: 767px) { .cp-wz-main, .cp-wz-detail, .cp-wz-related { padding: .62rem 0; } .cp-wz-prevnext { padding: 0 0 .62rem; grid-template-columns: 1fr; } .cp-wz-media { height: 3rem; } .cp-wz-points { grid-template-columns: 1fr; } .cp-wz-content { padding: .34rem .3rem; } .cp-wz-related-media { height: 1.8rem; } .cp-wz-next a { text-align: left; } } /* ===== 产品详情表格响应式 ===== */ .cp-wz-table-wrap { -webkit-overflow-scrolling: touch; margin: .26rem 0; overflow-x: auto; width: 100%; } .cp-wz-table-wrap table { border-collapse: collapse; min-width: 100%; width: auto; } .cp-wz-table-wrap th, .cp-wz-table-wrap td { padding: .12rem .18rem; vertical-align: middle; white-space: normal; word-break: break-word; } @media (max-width: 640px) { .cp-wz-table-wrap table { min-width: 100%; width: max-content; } .cp-wz-table-wrap th, .cp-wz-table-wrap td { padding: .1rem .14rem; white-space: nowrap; } }