zcode/dusuniot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.10.5 首页 H2 产品线入口 ×6:ImageBoxWidget 重构为 Elementor 忠实 DOM + slim 白名单补齐 + H2 scoped CSS(post-18 对齐,桌面/移动/hover 实测一致)

Browse Source
This commit is contained in:
BigCode
2026-11-01 00:15:29 +08:00
commit 5b83e71ad9
128 changed files with 20008 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/app.css
+280
View File
@@ -0,0 +1,280 @@
/* # 文件 前台样式入口（Tailwind CSS v4 + shadcn/ui 主题令牌）
* 配色保持原模板：品牌橙 #ed6c00 / 墨蓝 #1c2b3a / 分隔线 #e3e9f0 / 浅底 #f5f8fb。
* 刻意不引入 preflight（按需引入 theme + utilities），保留浏览器默认排版，
* 使数据库导入的 Elementor / 正文 HTML 视觉与迁移前完全一致。
* 末尾「内容兼容样式」仅服务于数据库导入的 HTML（ele-ban-* 等）与带状态
* 过渡的 Elementor 结构（轮播/ticker），React 组件一律使用 Tailwind 工具类。
*/
@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities);
/* tw-animate-css：shadcn/ui 动画工具类（animate-in/fade-in/zoom-in 等），
* NavigationMenu 巨幕面板的 data-[motion=…] 切换动画依赖它 */
@import "tw-animate-css";
/* # 成员变量 Roboto（原站 Elementor kit 全局字体，自托管可变字重 latin 子集） **/
@font-face {
font-family: "Roboto";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("/fonts/roboto-var-latin.woff2") format("woff2");
}
/* # 成员变量 Tailwind 主题令牌（与原 website.css 配色一一对应） **/
@theme {
--font-sans: Roboto, system-ui, -apple-system, "Segoe UI", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
--color-brand: #ed6c00;
--color-brand-dark: #c85600;
--color-ink: #1c2b3a;
--color-muted-foreground: #5f7183;
--color-line: #e3e9f0;
--color-soft: #f5f8fb;
--color-footer: #3e3e3f;
--color-footer-dark: #333334;
--color-primary: #ed6c00;
--color-primary-foreground: #ffffff;
--color-background: #ffffff;
--color-foreground: #1c2b3a;
--color-border: #e3e9f0;
--color-input: #e3e9f0;
--color-ring: #ed6c00;
--color-destructive: #b91c1c;
/* 原站 Max Mega Menu 主题色（megamenu 内联 CSS 实测值） */
--color-panel: #fcfbfa;
--color-panel-grey: #f4f5f8;
--color-panel-line: #f5b279;
--color-group-line: #fad3b3;
--color-subline: #e0e5f9;
--radius: 0.25rem;
}
/* # 成员变量 兼容变量：数据库 HTML 兼容样式与少量内联 style 仍引用旧变量名 **/
:root {
--brand: #ed6c00;
--brand-dark: #c85600;
--ink: #1c2b3a;
--muted: #5f7183;
--line: #e3e9f0;
--bg-soft: #f5f8fb;
--footer-bg: #0b1c2c;
}
@layer base {
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
/* 基准取原站实测（2026-10-31 headless）：16px / #333 / 行高 24px（hello-elementor 默认） */
font-family: var(--font-sans);
font-size: 16px;
line-height: 24px;
color: #333333;
background: #fff;
}
img { max-width: 100%; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); }
}
/* # 函数 站点容器（1200px 居中 + 两侧 16px） **/
@utility site-container {
margin-inline: auto;
max-width: 1200px;
padding-inline: 16px;
}
@layer components {
/* ===== 内容排版（Elementor / 正文 HTML，数据库导入内容） ===== */
.content-html img { max-width: 100%; height: auto; }
.content-html table { border-collapse: collapse; }
.content-html td, .content-html th { border: 1px solid var(--line); padding: 6px 10px; }
.content-html h1, .content-html h2, .content-html h3 { line-height: 1.35; }
/* ===== Elementor slides 轮播（首页 hero；全部数值取自原站实测）
* 取证链（1436px 视口 headless-Chrome 计算样式 + 原站 post-18.css）：
* - 轮播高 560px（≤767px 为 340px，原站 per-widget 规则）；背景图 cover 居中；
* - inner 为 flex 行容器：align-items:center（垂直居中实测 active slide
* contents y=169 = (560-439)/2）、左内边距 10%（实测 143.6px）；
* - 内容块 max-width 720px + fit-content（SoM 实测 720 / 图标列实测 669）；
* - 字号/行高：slide 描述基准 17px/1.4（实测继承值，标题/细节另有显式字号）；
* - 箭头：40px eicon 实心 V、无底色、rgba(237,237,237,.9)、距边 10px、≤768 隐藏；
* - 圆点：12×12 圆、未激活黑 20% 透明度、激活 #ed6c00（e-global-color-primary）、
* 左右边距 6px、容器距底 5px（实测 pag y639..663，slide 底 668）；
* - 切换：swiper transition=slide（水平推移 500ms）+ 内容 fadeInUp
* （data-animation=fadeInUp）；自动播放 5000ms、悬停暂停（pause_on_hover）。
*/
.el-slides { position: relative; overflow: hidden; background: #bbbbbb; }
.el-slide {
position: absolute; inset: 0; transition: transform .5s ease;
background-size: cover; background-position: 50% 50%; pointer-events: none;
}
.el-slide.active { pointer-events: auto; }
.el-slide-inner {
position: relative; display: flex; align-items: center; height: 100%;
padding: 0 0 0 10%; text-align: start;
}
.el-slide-contents { width: fit-content; max-width: 720px; }
.el-slide-desc { font-size: 17px; line-height: 1.4; animation: el-fade-up 1s ease both; }
@keyframes el-fade-up {
from { opacity: 0; transform: translateY(40px); }
to { opacity: 1; transform: none; }
}
.el-slide-arrow {
position: absolute; top: 50%; transform: translateY(-50%); left: 10px; z-index: 3;
width: 40px; height: 40px; border: 0; background: transparent; color: rgba(237,237,237,.9);
display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
}
.el-slide-arrow:hover { color: #fff; }
.el-slide-arrow.next { left: auto; right: 10px; }
.el-slide-arrow svg { width: 40px; height: 40px; fill: currentColor; }
.el-slide-dots {
position: absolute; bottom: 5px; left: 0; right: 0; display: flex; justify-content: center; z-index: 3;
}
.el-slide-dots button {
width: 12px; height: 12px; border-radius: 50%; border: 0; background: #000; opacity: .2;
margin: 0 6px; padding: 0; cursor: pointer;
}
.el-slide-dots button.on { background: #ed6c00; opacity: 1; }
/* ===== hero description 内嵌的 ele-ban-* 结构（原站 post-18.css 全量转写，数据库 HTML） ===== */
.ele-ban-tit-color-1 { color: #000000; }
.ele-ban-tit-color-2 { color: #ffffff; }
.ele-ban-tit-color-3 { color: #a5a5a5; }
.ele-ban-tit-color-4 { color: #5b5b5b; }
.ele-ban-title div { font-size: 48px !important; padding: 0; margin: 0 0 1rem; color: inherit; font-weight: bold; }
.ele-ban-details { font-size: 20px; margin-bottom: 1.5rem; }
/* note：原站含 hello-elementor reset（ul 默认 margin 全清零），本项目无 preflight，须显式 margin:0 */
.ele-ban1-ul ul { list-style: none; padding-left: 0; padding-bottom: 4rem; margin: 0; }
.ele-ban-slide-1 .ele-ban1-ul li { display: inline-block; max-width: 164px; text-align: center; }
.ele-ban-slide-1 .ele-ban1-li1 { background: url('/uploads/2023/09/ban-line-gray.png') no-repeat center right; padding: 0 10px 0 0; }
.ele-ban-slide-1 .ele-ban1-li2 { background: url('/uploads/2023/09/ban-line-gray.png') no-repeat center right; padding: 0 10px 0 0; }
.ele-ban-slide-1 .ele-ban1-li3 { background: url('/uploads/2023/09/ban-line-gray.png') no-repeat center right; padding: 0 10px 0 0; }
.ele-ban-slide-1 .ele-ban1-ul li img { margin: 0 auto 10px; }
.ele-ban-slide-1 .ele-ban1-ul li div { color: #5c5d5f; font-size: 18px; }
.ele-ban-btn a { background-color: transparent; background-image: linear-gradient(90deg, #f78400 0%, #fd5300 100%); color: #ffffff; font-size: 20px; font-weight: bold; text-decoration: none; padding: 1rem 3rem; border-radius: 4px; transition: all 0.3s ease; }
.ele-ban-btn a:hover { color: #ffffff !important; box-shadow: 0 10px 20px rgba(237,108,0,0.5); background-color: transparent; background-image: linear-gradient(90deg, #f78400 50%, #fd5300 100%); }
.ele-ban-slide-4 .ele-ban1-ul li { display: inline-block; text-align: center; }
.ele-ban-slide-4 .ele-ban1-li1, .ele-ban-slide-4 .ele-ban1-li2, .ele-ban-slide-4 .ele-ban1-li3 { color: #ffffff; border-radius: 20px; padding: 10px 16px; border: 1px solid #ffffff; margin-right: 10px; }
.ele-ban-bBox ul { list-style: none; padding-left: 0; padding-bottom: 4rem; margin: 0; }
.ele-ban-bBox li { display: inline-block; text-align: center; margin-right: 10px; }
.ele-ban-btn2 a { color: #ffffff; font-size: 20px; font-weight: bold; text-decoration: none; padding: 0.875rem 3rem; border-radius: 4px; transition: all 0.3s ease; border: 1px solid #ffffff; box-sizing: border-box; }
.ele-ban-btn2 a:hover { background: #ffffff; color: #ed6c00; }
.ele-ban-slide-2 .ele-ban-title { overflow: hidden; }
.ele-silde3-det { width: 473px; height: 44px; background: url('/uploads/2023/09/dusun-orange-line.png') no-repeat center center; color: #ffffff; font-size: 24px !important; line-height: 44px; display: inline-block; }
.ele-ban-slide-3 .ele-ban1-ul li { display: inline-block; text-align: center; padding: 0 2rem 0.5rem 0; }
.ele-ban-slide-3 .ele-ban1-ul li img { margin: 0 10px 0 0; display: inline-block; float: left; }
.ele-ban-slide-3 .ele-ban1-ul li div { color: #5c5d5f; font-size: 18px; display: inline-block; float: left; line-height: 58px; color: #000000; }
.ele-ban-slide-3 .ele-ban-btn2 a { color: #000000; border: 1px solid #000000; }
.ele-ban-slide-3 .ele-ban-btn2 a:hover { background: #000000; color: #ed6c00; }
.ele-ban-slide-1 .ele-ban-btn2 a { color: #000000; border: 1px solid #000000; padding: 0.875rem 1rem; }
.ele-ban-slide-1 .ele-ban-btn2 a:hover { background: #000000; color: #ed6c00; }
.ele-ban-bt-top3 { margin-top: 3rem; }
.ele-ban-bt-top1 { margin-top: 1rem; }
/* reason：原站 @media(max-width:767px) 覆写（343340 高、6% 左距、隐藏箭头、
* 字号收缩、logo 图 90% 宽、隐藏图标列、按钮 padding 收缩） */
@media only screen and (max-width: 768px) {
.ele-ban-title div { font-size: 2rem !important; font-weight: bold; }
.ele-ban-details { font-size: 1.125rem; clear: both; }
.ele-ban-bBox li { margin-right: 8px; margin-bottom: 10px; }
.ele-ban-slide-4 .ele-ban1-ul li { margin-right: 10px; margin-bottom: 10px; }
.ele-ban-slide-4 .ele-ban1-li1, .ele-ban-slide-4 .ele-ban1-li2, .ele-ban-slide-4 .ele-ban1-li3 { padding: 10px 6px; }
.ele-ban-slide-1 .ele-ban1-ul li { max-width: 150px; }
.ele-ban1-ul ul { padding-bottom: 2rem; }
.ele-ban-btn a { padding: 0.75rem 1.5rem; }
.ele-ban-btn2 a { padding: 0.75rem 1.25rem; }
.ele-ban-slide-2 .ele-ban1-ul img { width: 90%; margin-bottom: 3rem; }
.ele-silde3-det { width: 300px; height: 44px; font-size: 1rem !important; padding-left: 0.5rem; margin: 0.5rem 0 0 0; float: none; }
.ele-ban-slide-3 .ele-ban1-ul li { display: inline-block; text-align: center; padding: 0 1rem 0.5rem 0; }
.ele-ban-slide-3 .ele-ban1-ul li img { width: 40px; margin-right: 6px; }
.ele-ban1-ul { display: none; }
.ele-ban-bBox ul { padding-bottom: 0; }
.el-slides { height: 340px !important; }
.el-slide-inner { padding-left: 6%; }
.el-slide-arrow { display: none; }
}
/* ===== content ticker（首页 H1 公告滚动条；数值取原站 2026-10-31 headless 实测）
* 原站渲染： .eael-ticker-wrap（flex 行）> .ticker-badge(span "Latest Products:") +
* .eael-ticker > .content-ticker(fade swiper) ；外层高 45px（badge 27px 行盒 + 16px 内边距）。
* badge 透明底、文字 18px/600 #000；内容链接 16px #222 hover #ED6C00（--e-global-color-primary）；
* badge 与 ticker-content 同 padding 8px 12px；ticker-content 行高 1.8（EAEL 默认）；
* 交叉淡入淡出时长 200ms（data-speed）、自动轮播 5000ms（data-autoplay）、不暂停（无 pause 属性）。
* slide 层：grid 叠放（grid-area 1/1）实现容器高按最高条目自适应,替代 swiper 绝对定位。
*/
.eael-ticker-wrap {
display: flex; flex-flow: row nowrap; align-items: center; width: 100%;
position: relative; overflow: hidden;
}
.eael-ticker-wrap .ticker-badge { flex: 0 0 auto; padding: 8px 12px; }
.eael-ticker-wrap .ticker-badge span { color: #000000; font-size: 18px; font-weight: 600; line-height: 1.5; }
.eael-ticker-wrap .eael-ticker { overflow: hidden; flex: 1 1 auto; min-width: 0; }
.eael-ticker-wrap .eael-ticker .content-ticker { width: 100%; }
.eael-ticker-wrap .content-ticker .swiper-wrapper {
display: grid; grid-template-columns: 1fr;
}
.eael-ticker-wrap .content-ticker .swiper-wrapper .swiper-slide {
grid-area: 1 / 1; opacity: 0; transition: opacity .2s ease;
}
.eael-ticker-wrap .content-ticker .swiper-wrapper .swiper-slide.active { opacity: 1; }
.eael-ticker-wrap .ticker-content { padding: 8px 12px; line-height: 1.8; }
.eael-ticker-wrap .ticker-content a { color: #222222; text-decoration: none; }
.eael-ticker-wrap .ticker-content a:hover { color: #ed6c00; }
/* ===== Elementor image-box widget（复刻原站 widget-image-box.min.css，数值 2026-10-31 实测）
* 结构：.el-imagebox > .el-imagebox-wrapper(块、text-align center) >
* figure.el-imagebox-img（inline-block；≥768 且图定位 top 时 margin auto 水平居中）
* > [a > img（block、line-height 0、max-width 100%——native 56px 图按原始尺寸呈现）]
* + .el-imagebox-content > .el-imagebox-title（标签随 title_size，默认 h3）+ p 描述（margin 0）；
* title 颜色继承 body（原站 .elementor-image-box-title a color:inherit，实测 #333/16px/400），
* 因此标题不落品牌橙；figure 与标题间约 7px inline-block 基线空隙由排版自然形成。
* hover 滤镜（首页 H2 等页面级）放在 [data-el] 范围规则里，不在通用层。
*/
.el-imagebox-wrapper { text-align: center; }
/* margin:0 复位 UA figure 默认（原站 hello-elementor reset 后实测 figure margin 0px，
* 水平居中靠 wrapper text-align:center 的 inline-block 排版） */
.el-imagebox-img { display: inline-block; margin: 0; }
.el-imagebox-img img { display: block; max-width: 100%; line-height: 0; }
.el-imagebox-title a { color: inherit; }
.el-imagebox-description { margin: 0; }
.el-imagebox-img img { transition: filter 0.3s ease; }
@media (min-width: 768px) {
/* 图在左/右的横向布局（原站 min-width:768px 分支） */
.el-imagebox-pos-left .el-imagebox-wrapper { display: flex; text-align: start; }
.el-imagebox-pos-left .el-imagebox-img { margin-right: 0; }
.el-imagebox-pos-right .el-imagebox-wrapper { display: flex; flex-direction: row-reverse; text-align: end; }
.el-imagebox-pos-right .el-imagebox-img { margin-left: 0; }
}
@media (max-width: 767px) {
.el-imagebox-img { margin-inline: auto !important; margin-bottom: 15px; }
}
/* ===== 首页 H2 产品线入口（post-18.css 对应块；1436px 实测 2026-10-31）
* 外层 section：白→#F4F5F8 线性渐变（180deg）+ 1360 容器（SectionNode 背景已渲染）；
* 中列 0.5rem 内边距；内层 e38a898 六列均分 224px，列内容 wrap padding 10px（高 107）；
* 前五列右侧 v-line.png(2×50) 细竖线分隔（background-position center right，末列无线）；
* 图占 figure 30% 宽、hover 亮度降至 90%（0.3s 过渡）；≤767 列改 50% 宽两列三行。
*/
[data-el="0cfea23"], [data-el="91befe3"], [data-el="5ecac70"],
[data-el="bf3c723"], [data-el="13275e9"] {
background-image: url("/uploads/2023/09/v-line.png");
background-repeat: no-repeat;
background-position: center right;
}
[data-el="e38a898"] > div > [data-el] { padding: 10px; }
[data-el="e38a898"] .el-imagebox-img { width: 30%; }
[data-el="e38a898"] .el-imagebox:hover .el-imagebox-img img {
filter: brightness(90%) contrast(100%) saturate(100%) blur(0px) hue-rotate(0deg);
}
@media (max-width: 767px) {
[data-el="91befe3"], [data-el="bf3c723"] { background-position: -2px 0; }
/* 列宽是行内样式，需 !important 压写在声明层之后 */
[data-el="e38a898"] > div > [data-el] { flex: 0 0 50% !important; max-width: 50% !important; }
/* post-18.css 对六个 widget 各有 margin-bottom:0，特异性高于基础 CSS 的 15px（实测原站 0px） */
[data-el="e38a898"] .el-imagebox-img { margin-bottom: 0 !important; }
}
}
@media (max-width: 900px) {
.ele-ban-title div { font-size: 30px; }
}