/* ============================================================ 补充样式 原主题 style.css 已覆盖页头、页脚、栏目页、产品卡片、图集与分页等布局， 这里只补它没有的部分：列表摘要、标签、在线预约、联系卡片、错误页。 配色全部复用主题的 CSS 变量，改主题色时此文件无需修改。 ============================================================ */ /* ---------- 消除主题遗留的无效请求 ---------- 原主题 .about-section 引用了 assets/images/map-bg.png，但该文件从未上传， 线上每次打开首页都会产生一次 404。视觉上本来就是纯色底，这里直接关掉请求。 */ .about-section { background-image: none; } /* ---------- 入场动画的降级保护 ---------- 原主题把 .reveal-item 和 .about-text 的 opacity 直接写成 0， 完全依赖 JS 的 IntersectionObserver 加 class 才显示。 一旦脚本加载失败，首页"服务和优势"与"关于我们"就会整块空白。 这里改成：默认可见，只有确认 JS 可用（ 带 js-reveal）时才隐藏做动画。 */ .reveal-item, .about-text, .about-image { opacity: 1; } .js-reveal .reveal-item:not(.active) { opacity: 0; } .js-reveal .about-section:not(.animate) .about-text, .js-reveal .about-section:not(.animate) .about-image { opacity: 0; } /* ---------- 列表页 ---------- */ .archive-item { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px dashed var(--border-color); } .archive-item h2 { font-size: 18px; margin-bottom: 8px; line-height: 1.5; } .archive-item h2 a { color: var(--text-color); transition: color .25s; } .archive-item h2 a:hover { color: var(--primary-color); } .archive-item .entry-meta { color: #999; font-size: 13px; } .archive-item .entry-summary { margin-top: 8px; color: #666; font-size: 14px; line-height: 1.8; } .list-empty { width: 100%; padding: 60px 0; text-align: center; color: #999; font-size: 15px; } .search-summary { margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid var(--border-color); color: #666; font-size: 14px; } .page-count { margin-left: 12px; color: #999; font-size: 13px; } /* ---------- 详情页 ---------- */ .product-spec-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: 20px 0; padding: 18px 22px; background: var(--light-bg); border-left: 4px solid var(--primary-color); } .product-spec-bar .spec-price { color: #e4393c; font-size: 26px; font-weight: 700; } .product-spec-bar .spec-price em { font-size: 14px; font-style: normal; font-weight: 400; color: #999; } .product-spec-bar .spec-item { color: #666; font-size: 14px; } .product-spec-bar .spec-booking { margin-left: auto; padding: 10px 26px; border: none; border-radius: 2px; background: var(--primary-color); color: var(--secondary-color); font-size: 15px; font-weight: 700; cursor: pointer; transition: background .25s; } .product-spec-bar .spec-booking:hover { background: #d99f18; } .post-navigation .tags { margin-bottom: 12px; color: #666; font-size: 13px; } .post-navigation .tags a { color: #666; transition: color .25s; } .post-navigation .tags a:hover { color: var(--primary-color); } .article-meta { margin: 12px 0 20px; padding-bottom: 15px; border-bottom: 1px solid var(--border-color); color: #999; font-size: 13px; } .article-meta span { margin-right: 18px; } .case-detail-cover { margin: 20px 0; text-align: center; } .case-detail-cover img { max-width: 100%; height: auto; } /* ---------- 联系我们 ---------- */ .contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 35px; } .contact-card { padding: 30px 20px; background: var(--light-bg); text-align: center; transition: transform .25s, box-shadow .25s; } .contact-card:hover { transform: translateY(-4px); box-shadow: 0 6px 20px rgba(0, 0, 0, .08); } .contact-card i { display: block; margin-bottom: 12px; color: var(--primary-color); font-size: 32px; } .contact-card h3 { margin-bottom: 8px; font-size: 16px; color: var(--secondary-color); } .contact-card p { color: #666; font-size: 14px; line-height: 1.8; } .contact-card .contact-qr { width: 120px; height: 120px; object-fit: cover; } /* ---------- 错误页 ---------- */ .error-block { padding: 90px 20px; text-align: center; } .error-block h1 { color: var(--primary-color); font-size: 84px; line-height: 1; } .error-block h2 { margin: 12px 0; color: var(--secondary-color); font-size: 22px; } .error-block p { margin-bottom: 26px; color: #999; } /* ---------- 在线预约 ---------- */ .booking-float { position: fixed; right: 0; top: 55%; z-index: 900; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 52px; padding: 16px 0; border-radius: 6px 0 0 6px; background: var(--primary-color); color: var(--secondary-color); font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .15); transition: background .25s; } .booking-float:hover { background: #d99f18; } .booking-float i { font-size: 18px; } .booking-float span { writing-mode: vertical-rl; letter-spacing: 2px; } .booking-mask { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, .55); } .booking-mask.active { display: flex; } .booking-dialog { width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto; border-radius: 4px; background: #fff; } .booking-head { position: relative; padding: 22px 24px 18px; background: var(--primary-color); color: var(--secondary-color); } .booking-head h3 { font-size: 20px; margin-bottom: 6px; } .booking-head p { font-size: 13px; opacity: .8; } .booking-close { position: absolute; top: 18px; right: 20px; font-size: 18px; cursor: pointer; } .booking-form { padding: 22px 24px 26px; } .booking-row { margin-bottom: 14px; } .booking-row label { display: block; margin-bottom: 6px; color: #555; font-size: 13px; } .booking-row label em { color: #e4393c; font-style: normal; } .booking-row input, .booking-row textarea { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 2px; font-size: 14px; font-family: inherit; outline: none; transition: border-color .25s; } .booking-row input:focus, .booking-row textarea:focus { border-color: var(--primary-color); } .booking-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; } .booking-submit { flex: 1; padding: 12px; border: none; border-radius: 2px; background: var(--primary-color); color: var(--secondary-color); font-size: 15px; font-weight: 700; cursor: pointer; transition: background .25s; } .booking-submit:hover { background: #d99f18; } .booking-submit:disabled { background: #ddd; cursor: not-allowed; } .booking-tel { color: #666; font-size: 13px; white-space: nowrap; } .booking-message { margin-top: 12px; font-size: 13px; text-align: center; min-height: 18px; } .booking-message.ok { color: #27ae60; } .booking-message.err { color: #e4393c; } @media (max-width: 768px) { .booking-float { top: auto; bottom: 76px; width: 46px; padding: 12px 0; } .product-spec-bar .spec-booking { margin-left: 0; width: 100%; } } /* ============================================================ 管理员预览：编辑角标 + 顶部提示条 这一整套样式只在管理员登录后才有对应的 HTML 节点。 访客的页面里不会出现 .ht-edit-pin / .ht-admin-bar， 因此这些规则对访客而言是空转的，不影响任何渲染。 ============================================================ */ /* 角标宿主：高度为 0 的定位锚点，不参与布局、不挤动原主题元素 */ .ht-pin-host { position: relative; height: 0; z-index: 60; } .ht-edit-pin { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; font-size: 12px; line-height: 1.4; white-space: nowrap; color: #fff; background: rgba(20, 24, 32, .82); border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; text-decoration: none; box-shadow: 0 2px 10px rgba(0, 0, 0, .28); opacity: .5; transition: opacity .18s, background .18s, transform .18s; } .ht-edit-pin:hover { opacity: 1; background: #e8a33d; border-color: #e8a33d; color: #fff; transform: translateY(-1px); } .ht-edit-pin i { font-size: 11px; } /* 鼠标移到区块上时，该区块的角标变明显——不用满屏找按钮 */ section:hover > .ht-pin-host > .ht-edit-pin, div:hover > .ht-pin-host > .ht-edit-pin, article:hover > .ht-pin-host > .ht-edit-pin { opacity: .95; } /* 顶部管理员提示条 */ .ht-admin-bar { position: sticky; top: 0; z-index: 999; background: linear-gradient(90deg, #23272f, #2f3540); color: #e9edf3; font-size: 13px; border-bottom: 2px solid #e8a33d; } .ht-admin-bar-inner { max-width: 1200px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; } .ht-admin-bar-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; background: #e8a33d; color: #2b2f38; border-radius: 3px; font-weight: 700; white-space: nowrap; } .ht-admin-bar-text { flex: 1; min-width: 220px; color: #b9c2ce; line-height: 1.7; } .ht-admin-bar-text strong { color: #7fd18e; font-weight: 600; } .ht-admin-bar-actions { display: flex; gap: 14px; white-space: nowrap; } .ht-admin-bar-actions a { color: #e9edf3; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; } .ht-admin-bar-actions a:hover { color: #e8a33d; } @media (max-width: 768px) { .ht-edit-pin span { display: none; } .ht-edit-pin { padding: 6px 8px; opacity: .85; } .ht-admin-bar-text { display: none; } } /* ============================================================ 富文本正文的前台呈现 编辑器允许客户拖拽调整图片尺寸，会写入行内 width/height。 这里兜底约束，避免客户把图片拉得过宽后手机端出现横向滚动条。 ============================================================ */ .entry-content img, .detail-content img, .page-content img { max-width: 100%; height: auto; } .entry-content table, .detail-content table { max-width: 100%; border-collapse: collapse; } .entry-content table td, .entry-content table th, .detail-content table td, .detail-content table th { border: 1px solid #ddd; padding: 8px 10px; } /* 表格在窄屏可横向滚动，不撑破页面 */ .entry-content, .detail-content { overflow-x: auto; }