From 2df5c929d6b1abaacac51a1695c59a5585e56645 Mon Sep 17 00:00:00 2001 From: jsasg <735273025@qq.com> Date: Mon, 24 Nov 2025 15:58:22 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=B8=BB=E9=A2=98=20-=20=E7=94=B5?= =?UTF-8?q?=E5=8A=9B=E5=93=81=E7=BA=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../mobile/topic_power_prodline/index.html | 455 ++++++++++++++- .../view/pc/topic_power_prodline/index.html | 543 +++++++++++++++++- .../pc/css/topic_power_prodline/advantage.css | 229 ++++++++ .../pc/css/topic_power_prodline/footer.css | 11 + .../pc/css/topic_power_prodline/index.css | 73 +++ .../pc/css/topic_power_prodline/mask.css | 120 ++++ .../index/pc/css/topic_power_prodline/nav.css | 96 ++++ .../pc/css/topic_power_prodline/product.css | 146 +++++ .../css/topic_power_prodline/product_card.css | 206 +++++++ .../css/topic_power_prodline/product_list.css | 246 ++++++++ 10 files changed, 2122 insertions(+), 3 deletions(-) create mode 100644 public/static/index/pc/css/topic_power_prodline/advantage.css create mode 100644 public/static/index/pc/css/topic_power_prodline/footer.css create mode 100644 public/static/index/pc/css/topic_power_prodline/index.css create mode 100644 public/static/index/pc/css/topic_power_prodline/mask.css create mode 100644 public/static/index/pc/css/topic_power_prodline/nav.css create mode 100644 public/static/index/pc/css/topic_power_prodline/product.css create mode 100644 public/static/index/pc/css/topic_power_prodline/product_card.css create mode 100644 public/static/index/pc/css/topic_power_prodline/product_list.css diff --git a/app/index/view/mobile/topic_power_prodline/index.html b/app/index/view/mobile/topic_power_prodline/index.html index 78dd8a38..57667f9c 100644 --- a/app/index/view/mobile/topic_power_prodline/index.html +++ b/app/index/view/mobile/topic_power_prodline/index.html @@ -1,16 +1,467 @@ {extend name="public/nas_base" /} {block name="style"} - + + + + + + + + + + {/block} {block name="header"} {/block} {block name="main"} + +
+ +
+ + +
+
+ + 测试 + + + 测试 + +
+
+ +
+ + 差旅充 +

差旅充

+ + + 居家充 +

居家充

+ + + 桌面充 +

桌面充

+ + + 墙墙插 +

墙墙插

+ + + 转换器 +

转换器

+ +
+ +
+

为什么500万+消费者 选择奥睿科?

+
+ +
+ 设计：岂止于满电，处处皆美学 +
+ +
+
设计
+ + +
+

岂止于满电,处处皆美学

+
+
+ +
+ 随行：陪你看世界 +
+
+
随行
+ +
+

陪你看世界

+
+
+ +
+ 快充：低温快充，氮化镓黑科技 +
+
+
快充
+ +
+

低温快充,氮化镓黑科技

+
+
+ +
+ 安全：12年安全快充技术沉淀 +
+
+
安全
+ +
+

12年安全快充技术沉淀

+
+
+ +
+ 引领：USB插排开创者 +
+
+
引领
+ +
+

USB插排开创者

+
+
+
+
+ +
+
+ × + 设计详情 +
+

设计：岂止于满电，处处皆美学

+

+ 奥睿科坚持"科技与美学融合"的设计理念，每一款产品都经过数百次打磨。从极简主义的外观设计，到人体工学的握持手感，再到多彩配色的个性化选择，让充电设备不再是冰冷的工具，而是生活中的美学单品。无论是办公场景的沉稳大气，还是户外出行的时尚便携，都能完美适配你的生活方式。 +

+

产品设计团队荣获多项国际设计大奖，将细节做到极致：圆润的边角处理、细腻的磨砂质感、隐藏式接口设计，兼顾美观与实用性，让充电体验更具仪式感。

+
+
+ × + 引领详情 +
+ + +
+
+

差旅充

+

出差旅行, 一收就走

+
+ +
+ 65W快充插座 + +
+ 产品细节图 +
+
+
+ 使用场景 + +
+ +
+
+ +
+ 12口合1分控插排 +
+
+
安全 精准掌控
+
12口合1 分控插排 安全可靠 多设备适配
+
+
+ 查看更多 +
+ + +
+ 10口合1双向取电插排 +
+
+
双向取电 高效又整洁
+
10口合1 双向取电（仅1行文字）
+
+
+ 查看更多 +
+ + +
+ 7口合1多向取电插排 +
+
+
1秒收纳 秩序美学
+
7口合1 多向取电 便携小巧 居家必备 超长描述测试（截断为2行）
+
+
+ 查看更多 +
+ + +
+ 10口合1独立开关插排 +
+
+
独立开关 10口合1
+
少插拔 更安心（仅1行文字）
+
+
+ 查看更多 +
+ +
+
+ +
+ 查看更多 +
+ +
+ +
+
+

家居充

+

自在充能, 邂逅生活美学

+
+
+
+ 65W快充插座 + +
+ 产品细节图 +
+
+
+ 使用场景 + +
+
+ +
+
+ +
+ 12口合1分控插排 +
+
+
安全 精准掌控
+
12口合1 分控插排 安全可靠 多设备适配
+
+
+ 查看更多 +
+ + +
+ 10口合1双向取电插排 +
+
+
双向取电 高效又整洁
+
10口合1 双向取电（仅1行文字）
+
+
+ 查看更多 +
+ + +
+ 7口合1多向取电插排 +
+
+
1秒收纳 秩序美学
+
7口合1 多向取电 便携小巧 居家必备 超长描述测试（截断为2行）
+
+
+ 查看更多 +
+ + +
+ 10口合1独立开关插排 +
+
+
独立开关 10口合1
+
少插拔 更安心（仅1行文字）
+
+
+ 查看更多 +
+ +
+
+ +
+ 查看更多 +
+ +
+ +
+
+

墙插

+

1转多

+
+
+
+ 墙插 + +
+ 墙插细节图 +
+
+
+ 使用场景 + +
+
+
+
+ +
+ +
+
安全 精准掌控 超长标题测试示例内容
+
12口合1 分控插排 支持多设备同时供电 安全防护更放心 过载保护不跳闸
+
+ 了解更多 +
+
+
+
+ 10口合1双向取电插排 +
+ + +
+ +
+
安全 精准掌控 超长标题测试示例内容
+
12口合1 分控插排 支持多设备同时供电 安全防护更放心 过载保护不跳闸
+
+ 了解更多 +
+
+
+
+ 10口合1双向取电插排 +
+ +
+
+ +
+ 查看更多 +
+ +
+ +
+
+

墙插

+

1转多

+
+
+
+ 65W快充插座 + +
+ 产品细节图 +
+
+
+ 使用场景 + +
+
+ +
+ 查看更多 +
+ + +
+ +
+
+

转换器

+

随你看世界

+
+
+
+ 65W快充插座 + +
+ 产品细节图 +
+
+
+ 使用场景 + +
+
+
+
+
+ 65W快充插座 + +
+ 产品细节图 +
+
+
+ 使用场景 + +
+
+ +
+ 查看更多 +
+ +
+ +
+
+ +
+ +
{/block} {block name="footer"} {/block} {block name="script"} - + + + + {/block} diff --git a/app/index/view/pc/topic_power_prodline/index.html b/app/index/view/pc/topic_power_prodline/index.html index 78dd8a38..b5e287a0 100644 --- a/app/index/view/pc/topic_power_prodline/index.html +++ b/app/index/view/pc/topic_power_prodline/index.html @@ -1,16 +1,557 @@ {extend name="public/nas_base" /} {block name="style"} - + + + + + + + + {/block} {block name="header"} {/block} {block name="main"} + +
+ +
+ + +
+
+ + 测试 + + + 测试 + +
+
+ +
+ + 差旅充 +

差旅充

+ + + 居家充 +

居家充

+ + + 桌面充 +

桌面充

+ + + 墙墙插 +

墙墙插

+ + + 转换器 +

转换器

+ +
+ +
+

为什么500万+消费者 选择奥睿科?

+
+ +
+ 设计：岂止于满电，处处皆美学 +
+ +
+
设计
+ + +
+

岂止于满电,处处皆美学

+
+
+ +
+ 随行：陪你看世界 +
+
+
随行
+ +
+

陪你看世界

+
+
+ +
+ 快充：低温快充，氮化镓黑科技 +
+
+
快充
+ +
+

低温快充,氮化镓黑科技

+
+
+ +
+ 安全：12年安全快充技术沉淀 +
+
+
安全
+ +
+

12年安全快充技术沉淀

+
+
+ +
+ 引领：USB插排开创者 +
+
+
引领
+ +
+

USB插排开创者

+
+
+
+
+ +
+
+ × + 设计详情 +
+

设计：岂止于满电，处处皆美学

+

+ 奥睿科坚持"科技与美学融合"的设计理念，每一款产品都经过数百次打磨。从极简主义的外观设计，到人体工学的握持手感，再到多彩配色的个性化选择，让充电设备不再是冰冷的工具，而是生活中的美学单品。无论是办公场景的沉稳大气，还是户外出行的时尚便携，都能完美适配你的生活方式。 +

+

产品设计团队荣获多项国际设计大奖，将细节做到极致：圆润的边角处理、细腻的磨砂质感、隐藏式接口设计，兼顾美观与实用性，让充电体验更具仪式感。

+
+
+ × + 引领详情 +
+ + +
+
+

差旅充

+

出差旅行, 一收就走

+
+ +
+ 65W快充插座 + +
+ 产品细节图 +
+
+
+ 使用场景 + +
+ +
+
+ +
+ 12口合1分控插排 +
+
+
安全 精准掌控
+
12口合1 分控插排 安全可靠 多设备适配
+
+
+ 查看更多 +
+ + +
+ 10口合1双向取电插排 +
+
+
双向取电 高效又整洁
+
10口合1 双向取电（仅1行文字）
+
+
+ 查看更多 +
+ + +
+ 7口合1多向取电插排 +
+
+
1秒收纳 秩序美学
+
7口合1 多向取电 便携小巧 居家必备 超长描述测试（截断为2行）
+
+
+ 查看更多 +
+ + +
+ 10口合1独立开关插排 +
+
+
独立开关 10口合1
+
少插拔 更安心（仅1行文字）
+
+
+ 查看更多 +
+ +
+
+ +
+ 查看更多 +
+ +
+ +
+
+

家居充

+

自在充能, 邂逅生活美学

+
+
+
+ 65W快充插座 + +
+ 产品细节图 +
+
+
+ 使用场景 + +
+
+ +
+
+ +
+ 12口合1分控插排 +
+
+
安全 精准掌控
+
12口合1 分控插排 安全可靠 多设备适配
+
+
+ 查看更多 +
+ + +
+ 10口合1双向取电插排 +
+
+
双向取电 高效又整洁
+
10口合1 双向取电（仅1行文字）
+
+
+ 查看更多 +
+ + +
+ 7口合1多向取电插排 +
+
+
1秒收纳 秩序美学
+
7口合1 多向取电 便携小巧 居家必备 超长描述测试（截断为2行）
+
+
+ 查看更多 +
+ + +
+ 10口合1独立开关插排 +
+
+
独立开关 10口合1
+
少插拔 更安心（仅1行文字）
+
+
+ 查看更多 +
+ +
+
+ +
+ 查看更多 +
+ +
+ +
+
+

墙插

+

1转多

+
+
+
+ 墙插 + +
+ 墙插细节图 +
+
+
+ 使用场景 + +
+
+
+
+ +
+ +
+
安全 精准掌控 超长标题测试示例内容
+
12口合1 分控插排 支持多设备同时供电 安全防护更放心 过载保护不跳闸
+
+ 了解更多 +
+
+
+
+ 10口合1双向取电插排 +
+ + +
+ +
+
安全 精准掌控 超长标题测试示例内容
+
12口合1 分控插排 支持多设备同时供电 安全防护更放心 过载保护不跳闸
+
+ 了解更多 +
+
+
+
+ 10口合1双向取电插排 +
+ +
+
+ +
+ 查看更多 +
+ +
+ +
+
+

墙插

+

1转多

+
+
+
+ 65W快充插座 + +
+ 产品细节图 +
+
+
+ 使用场景 + +
+
+ +
+ 查看更多 +
+ + +
+ +
+
+

转换器

+

随你看世界

+
+
+
+ 65W快充插座 + +
+ 产品细节图 +
+
+
+ 使用场景 + +
+
+
+
+
+ 65W快充插座 + +
+ 产品细节图 +
+
+
+ 使用场景 + +
+
+ +
+ 查看更多 +
+ +
+ +
+
+ +
+ +
{/block} {block name="footer"} {/block} {block name="script"} + {/block} diff --git a/public/static/index/pc/css/topic_power_prodline/advantage.css b/public/static/index/pc/css/topic_power_prodline/advantage.css new file mode 100644 index 00000000..36ea9c81 --- /dev/null +++ b/public/static/index/pc/css/topic_power_prodline/advantage.css @@ -0,0 +1,229 @@ +/* 核心模块：固定90%宽度（PC端），优化移动端边距 */ +.advantage-section { + width: 90%; + margin: 0 auto; + padding: 4rem 0 3rem 0; + position: relative; + z-index: 1; +} + +/* 标题容器：恢复原有居中样式 */ +.advantage-section__title { + font-size: clamp(1.5rem, 3vw, 2rem); + font-weight: 700; + text-align: center; + color: #333; + line-height: 1.2; + margin-bottom: clamp(1.5rem, 2vw, 2.5rem); +} + +/* 列表容器：优化gap，确保移动端5列不溢出 */ +.advantage-section__list { + display: flex; + justify-content: center; + align-items: flex-start; + gap: clamp(0.1rem, 0.3vw, 0.8rem); + width: 100%; + flex-wrap: nowrap; + overflow: hidden; + padding: 0 0.1rem; +} + +/* 卡片核心：优化宽高比和尺寸计算 */ +.advantage-card { + flex: 0 0 calc((100% - 4 * clamp(0.1rem, 0.3vw, 0.8rem)) / 5); + min-width: calc((100% - 4 * clamp(0.1rem, 0.3vw, 0.8rem)) / 5); + max-width: calc((100% - 4 * clamp(0.1rem, 0.3vw, 0.8rem)) / 5); + border-radius: 0.5rem; + overflow: hidden; + box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease; + cursor: pointer; + background: #fff; + position: relative; + z-index: 1; + aspect-ratio: 1 / 1.7; + /* PC端卡片高度略缩短，更紧凑 */ +} + +.advantage-card__img { + width: 100%; + height: 72%; + /* PC端图片占比提升至72%，文字区域压缩 */ + object-fit: cover; + background-color: #f9f9f9; + display: block; +} + +/* 文字区域：flex垂直分布，确保标题和描述都垂直居中 */ +.advantage-card__content { + width: 100%; + height: 28%; + /* PC端文字区域占比降至28% */ + padding: clamp(0.3rem, 0.4vw, 0.75rem); + display: flex; + flex-direction: column; + justify-content: center; + /* 整体垂直居中 */ + align-items: center; + /* 子元素水平居中（关键） */ + /* text-align: center; */ + flex-shrink: 0; + gap: 4px; + /* 标题和描述之间的垂直间距，避免贴边 */ +} + +/* 标题容器：水平居中+内部两端对齐，同时垂直居中 */ +.advantage-card__heading-wrap { + display: flex; + align-items: center; + /* 内部标题和箭头垂直对齐 */ + justify-content: space-between; + /* 文字左、箭头右 */ + gap: 8px; + width: 80%; + /* 限制宽度，体现居中效果 */ + /* 移除底部margin，通过父容器gap控制间距 */ +} + +/* 卡片标题：居左显示 */ +.advantage-card__heading { + font-size: clamp(0.85rem, 1.5vw, 1.4rem); + /* 比原尺寸放大，PC端更醒目，移动端自适应 */ + font-weight: 600; + color: #333; + line-height: 1.3; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +/* 卡片标题右侧箭头：居右显示 */ +.card-arrow { + color: #409eff; + + /* 箭头尺寸跟随标题放大，避免不协调 */ + transition: transform 0.3s ease; + display: inline-block; + width: 24px; + /* 箭头宽度同步增加 */ + text-align: center; +} + +/* 卡片hover时箭头动画 */ +.advantage-card:hover .card-arrow { + transform: translateX(3px); +} + +/* 描述文字：水平+垂直居中，与标题容器对齐（仅添加最小高度修复对齐问题） */ +.advantage-card__description { + font-size: clamp(0.6rem, 0.9vw, 0.9rem); + /* PC端描述文字略放大 */ + color: #78787a; + line-height: 1.2; + /* PC端行高略紧凑 */ + white-space: normal; + overflow: hidden; + width: 80%; + /* 与标题容器宽度一致 */ + display: -webkit-box; + -webkit-line-clamp: 2; + /* 最多2行，避免高度溢出 */ + -webkit-box-orient: vertical; + /* 核心修复：固定最小高度=2行文字高度，确保1行时也占满空间 */ + min-height: calc(clamp(0.6rem, 0.9vw, 0.9rem) * 2 * 1.4); + /* 确保文字垂直居中 */ + display: flex; + align-items: center; + justify-content: left; +} + +/* 卡片hover效果 */ +.advantage-card:hover { + transform: scale(1.03); + /* z-index: 10; */ + /* box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15); */ +} + +/* 移动端适配 */ +@media (max-width: 767px) { + .advantage-card:active { + transform: scale(1.01); + } + + .advantage-section { + width: 95%; + /* 移动端扩大容器宽度 */ + } + + .advantage-section__list { + gap: 0.1rem; + } + + .advantage-card { + aspect-ratio: 1 / 1.8; + /* 移动端恢复更高的卡片高度 */ + } + + .advantage-card__img { + height: 62%; + /* 移动端图片占比回到62% */ + } + + .advantage-card__content { + height: 38%; + /* 移动端文字区域占比回到38% */ + padding: 0.2rem 0.15rem; + gap: 6px; + /* 移动端间距略大，易读性更好 */ + } + + /* 移动端标题容器宽度放宽 */ + .advantage-card__heading-wrap { + width: 90%; + } + + .advantage-card__description { + line-height: 1.2; + width: 90%; + -webkit-line-clamp: 2; + /* 移动端同步添加最小高度 */ + min-height: calc(clamp(0.5rem, 0.8vw, 0.8rem) * 2 * 1.5); + } + + /* 移动端箭头和文字尺寸缩小 */ + .card-arrow { + font-size: clamp(0.45rem, 0.7vw, 0.8rem); + width: 10px; + } + + .advantage-card__heading { + font-size: clamp(0.6rem, 1vw, 1rem); + } + + .advantage-card__description { + font-size: clamp(0.5rem, 0.8vw, 0.8rem); + } +} + +/* 超小屏适配 */ +@media (max-width: 374px) { + .advantage-section { + width: 98%; + } + + .advantage-card__heading { + font-size: clamp(0.55rem, 0.9vw, 0.9rem); + } + + .advantage-card__heading-wrap { + width: 95%; + gap: 5px; + } + + .advantage-card__description { + width: 95%; + /* 超小屏保持最小高度 */ + min-height: calc(clamp(0.5rem, 0.8vw, 0.8rem) * 2 * 1.5); + } +} diff --git a/public/static/index/pc/css/topic_power_prodline/footer.css b/public/static/index/pc/css/topic_power_prodline/footer.css new file mode 100644 index 00000000..2f41ada5 --- /dev/null +++ b/public/static/index/pc/css/topic_power_prodline/footer.css @@ -0,0 +1,11 @@ +.footer { + width: 100%; + padding: 3rem 0; +} +.footer-img { + width: 90%; + margin: 0 auto; +} +.footer-img img { + width: 100%; +} diff --git a/public/static/index/pc/css/topic_power_prodline/index.css b/public/static/index/pc/css/topic_power_prodline/index.css new file mode 100644 index 00000000..f812eb17 --- /dev/null +++ b/public/static/index/pc/css/topic_power_prodline/index.css @@ -0,0 +1,73 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* 1. 根字体适配：限制最小根字体为14px，从源头避免文字过小 */ +html { + /* PC端（≥1024px）：1rem=16px（原尺寸） */ + font-size: 16px; +} + +/* 平板端（768px~1023px）：15px→16px（过渡，最小15px） */ +@media (max-width: 1023px) and (min-width: 768px) { + html { + font-size: calc(15px + (16 - 15) * (100vw - 768px) / (1023 - 768)); + } +} + +/* 移动端（320px~767px）：固定14px（不随屏幕缩小而变小，避免文字<12px） */ +@media (max-width: 767px) { + html { + font-size: 14px; + } +} + +/* 超小屏（≤320px）：仍固定14px，彻底杜绝文字过小 */ +@media (max-width: 320px) { + html { + font-size: 14px; + } +} +body { + background: rgb(242, 243, 245); +} +a { + text-decoration: none; + display: block; +} +.more { + width: 90%; + margin: 0 auto; + display: flex; + justify-content: flex-end; + padding-top: clamp(1.5rem, 3vw, 3rem); +} +.more-img { + background: #000; + color: #fff; + font-size: clamp(0.6rem, 0.9vw, 0.9rem); + border-radius: clamp(0.875rem, 1.5vw, 1.125rem); + padding: clamp(0.1rem, 0.3vw, 0.2rem); + width: 5rem; + display: flex; + justify-content: center; +} + +.line { + width: 100%; + height: clamp(1.5rem, 3vw, 3rem); +} +.header { + width: 100%; + background: #fff; +} +.header-img { + margin: 0 auto; + width: 90%; + display: flex; + align-items: center; + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} diff --git a/public/static/index/pc/css/topic_power_prodline/mask.css b/public/static/index/pc/css/topic_power_prodline/mask.css new file mode 100644 index 00000000..9234c024 --- /dev/null +++ b/public/static/index/pc/css/topic_power_prodline/mask.css @@ -0,0 +1,120 @@ +/* 蒙版样式 */ +.mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.7); + /* 半透明黑色蒙版 */ + display: none; + /* 默认隐藏 */ + justify-content: center; + align-items: center; + z-index: 9999; + /* 确保在最上层 */ +} + +/* 蒙版内容容器 */ +.mask-content { + width: 80%; + background-color: #fff; + border-radius: 12px; + overflow: hidden; + position: relative; + animation: popIn 0.3s ease; + /* 弹窗动画 */ + max-height: 90vh; + /* 限制弹窗最大高度为视口的90% */ + display: flex; + flex-direction: column; +} + +/* 弹窗动画 */ +@keyframes popIn { + from { + transform: scale(0.8); + opacity: 0; + } + + to { + transform: scale(1); + opacity: 1; + } +} + +/* 详情图 - 固定高度 */ +.detail-img { + width: 100%; + height: 100%; + object-fit: cover; + flex-shrink: 0; + /* 防止图片被压缩 */ +} + +/* 详情内容 - 可滚动 */ +.detail-info { + padding: 30px; + overflow-y: auto; + /* 垂直滚动 */ + flex: 1; + /* 占满剩余空间 */ + /* 滚动条样式优化（可选） */ + scrollbar-width: thin; + scrollbar-color: #409eff #f5f5f5; +} + +/* 滚动条样式（Chrome/Safari） */ +.detail-info::-webkit-scrollbar { + width: 6px; +} + +.detail-info::-webkit-scrollbar-track { + background: #f5f5f5; + border-radius: 3px; +} + +.detail-info::-webkit-scrollbar-thumb { + background-color: #409eff; + border-radius: 3px; +} + +.detail-title { + font-size: 28px; + font-weight: bold; + color: #333; + margin-bottom: 20px; + border-left: 4px solid #409eff; + padding-left: 15px; +} + +.detail-desc { + font-size: 16px; + color: #555; + line-height: 1.8; + margin-bottom: 20px; +} + +/* 关闭按钮 */ +.close-btn { + position: absolute; + top: 20px; + right: 20px; + width: 40px; + height: 40px; + background-color: rgba(0, 0, 0, 0.3); + border-radius: 50%; + color: #fff; + font-size: 20px; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + transition: background-color 0.3s ease; + z-index: 10; + /* 确保按钮在图片上方 */ +} + +.close-btn:hover { + background-color: #ff4d4f; +} diff --git a/public/static/index/pc/css/topic_power_prodline/nav.css b/public/static/index/pc/css/topic_power_prodline/nav.css new file mode 100644 index 00000000..b0d2342d --- /dev/null +++ b/public/static/index/pc/css/topic_power_prodline/nav.css @@ -0,0 +1,96 @@ +.nav-box { + display: flex; + justify-content: space-around; + width: 90%; + /* 平板/PC端限制最大宽度 */ + margin: 0 auto; + background-color: #fff; + border-radius: 3.125rem; + /* 50px→3.125rem */ + box-shadow: 0 0.125rem 0.9375rem rgba(0, 0, 0, 0.05); + /* 2px→0.125rem，15px→0.9375rem */ + position: relative; + z-index: 1; + padding: 0.625rem 0; + /* 10px→0.625rem（原内边距不变） */ + overflow: visible; +} + +.nav-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.625rem; + /* 10px→0.625rem */ + cursor: pointer; + padding: 0.625rem 0 1.25rem; + /* 10px→0.625rem，20px→1.25rem */ + position: relative; + z-index: 2; + flex: 1; + min-width: 3rem; + /* 48px→3rem（适配14px根字体） */ + max-width: 5rem; + /* 80px→5rem */ + text-align: center; +} + +.nav-item img { + width: 4rem; + height: 4rem; + /* 60px→3.75rem（16px基准），14px根字体下≈52.5px，仍清晰 */ + object-fit: contain; + border-radius: 0.75rem; + /* 12px→0.75rem */ + position: absolute; + top: -3.125rem; + /* -50px→-3.125rem（14px根字体下≈43.75px，超出效果不变） */ + transform: translateY(0.625rem); + /* 10px→0.625rem */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.nav-item:hover img { + transform: translateY(0.3125rem); + /* 5px→0.3125rem */ +} + +.nav-item:active img { + transform: translateY(0.4375rem); + /* 7px→0.4375rem */ + box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.06); +} + +/* 关键：文字单独控制，确保最小12px */ +.nav-item p { + margin: 0; + /* PC端：15px→0.9375rem（16px根字体） */ + font-size: 0.9375rem; + color: #37373e; + font-weight: 500; + position: relative; + z-index: 3; + top: 1.125rem; + /* 18px→1.125rem */ + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + padding: 0 0.125rem; +} + +/* 平板端文字：14px→0.9375rem（15px根字体下=14px） */ +@media (max-width: 1023px) and (min-width: 768px) { + .nav-item p { + font-size: 0.9375rem; + } +} + +/* 移动端文字：强制12px（用px兜底，避免rem计算后过小） */ +@media (max-width: 767px) { + .nav-item p { + font-size: 12px; + /* 直接用px固定最小尺寸，优先级最高 */ + font-size: clamp(12px, 0.857rem, 0.9375rem); + /* 增强版：最小12px，默认0.857rem（14px根字体下≈12px），最大0.9375rem */ + } +} diff --git a/public/static/index/pc/css/topic_power_prodline/product.css b/public/static/index/pc/css/topic_power_prodline/product.css new file mode 100644 index 00000000..f409356c --- /dev/null +++ b/public/static/index/pc/css/topic_power_prodline/product.css @@ -0,0 +1,146 @@ +.product-box { + background: #fff; + padding: clamp(1.5rem, 3vw, 3rem) 0; + /* 产品块之间留间距 */ +} + +.product-title { + width: 90%; + margin: 0 auto; + padding-bottom: clamp(1.5rem, 3vw, 3rem); +} + +.product-title-h2 { + font-size: clamp(1.5rem, 3vw, 2.25rem); + /* padding-top: clamp(1.5rem, 3vw, 3rem); */ +} + +.product-title-p { + font-size: clamp(0.875rem, 1.5vw, 1.125rem); + color: #646464; + margin-top: clamp(0.5rem, 1vw, 0.75rem); +} + +/* 容器布局：两个产品通用 */ +.product-container { + display: flex; + gap: clamp(0.4rem, 1vw, 0.71rem); + margin: 0 auto; + width: 90%; + align-items: flex-start; +} + +/* 左侧容器：两个产品通用 */ +.product-left { + flex: 1.8; + position: relative; + width: 100%; +} + +.product-img { + width: 100%; + height: auto; + border-radius: 10px; + display: block; + /* 取消图片底部空隙 */ +} + +/* 悬浮图公共样式：两个产品尺寸完全一致（100%宽度） */ +.product-img-hover { + position: absolute; + width: 100%; + /* 两个产品悬浮图宽度相同 */ + z-index: 1; +} + +.product-img-hover img { + width: 100%; + /* 图片尺寸100%，无区别 */ + height: auto; + border-radius: 10px; +} + +/* 第一个产品：悬浮图居中上移（仅定位差异） */ +.product-img-1 { + top: -10%; + left: 50%; + transform: translateX(-50%); +} + +/* 第二个产品：悬浮图上右超出（仅定位差异） */ +.product-img-2 { + top: -10%; + /* 上超出 */ + transform: none; + width: 108%; + /* 取消居中 */ +} + +/* 右侧容器：两个产品通用 */ +.product-right { + flex: 3.2; + position: relative; + border-radius: 10px; + overflow: hidden; + width: 100%; + background-color: #f5f5f5; + align-self: stretch; +} + +.right-content { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + transition: opacity 0.3s ease; +} + +.right-video { + display: none; +} + +/* PC端适配：仅微调定位参数，尺寸不变 */ +@media (min-width: 1024px) { + .product-container { + width: 90%; + } + + .product-left { + flex: 2; + } + + .product-right { + flex: 5; + } + + /* 宽度保持一致，仅调定位偏移 */ + .product-img-1 { + top: -11%; + } + + .product-img-2 { + top: -12%; + } +} + +/* 超小屏适配：尺寸不变，微调定位 */ +@media (max-width: 375px) { + .product-left { + flex: 1.5; + } + + .product-right { + flex: 3.5; + } + + /* 宽度仍保持一致 */ + .product-img-1 { + top: -6%; + } + + .product-img-2 { + top: -8%; + } +} diff --git a/public/static/index/pc/css/topic_power_prodline/product_card.css b/public/static/index/pc/css/topic_power_prodline/product_card.css new file mode 100644 index 00000000..36753ce6 --- /dev/null +++ b/public/static/index/pc/css/topic_power_prodline/product_card.css @@ -0,0 +1,206 @@ +.product-card-container2 { + display: flex; + flex-wrap: nowrap; + gap: 10px; + align-items: stretch; +} + +/* 产品卡片样式 */ +.product-card2 { + box-sizing: border-box; + background: rgb(242, 243, 245); + border-radius: 8px; + cursor: pointer; + flex: 1 1 50%; + /* 一行2个 */ + min-width: 180px; + /* 保证图片显示 */ + /* max-width: calc(50% - 10px); */ + /* 适配gap */ + height: 240px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); + display: flex; + text-decoration: none; + transition: transform 0.3s ease, box-shadow 0.3s ease; + overflow: hidden; +} + +/* 核心修改：文字区域相对于父盒子居中，内部内容左对齐 */ +.product-text2 { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + /* 文字区域整体水平居中（相对于product-card1） */ + justify-content: center; + /* 文字区域整体垂直居中（相对于product-card1） */ + text-align: left; + /* 内部文字左对齐 */ + min-width: 70px; + box-sizing: border-box; + width: 100%; +} + +/* 内部内容容器：统一承载标题、描述、链接，确保左对齐一致性 */ +.product-text-content2 { + width: 100%; + /* 继承product-text的宽度，确保左对齐范围完整 */ + max-width: 280px; + /* 新增：限制最大宽度，避免PC端父容器过宽时内容排版松散 */ +} + +/* 标题：超出一行显示省略号（左对齐） */ +.product-card-title2 { + font-size: clamp(12px, 2vw, 18px); + font-weight: 600; + color: #333; + margin-bottom: 5px; + letter-spacing: 0.2px; + /* 超出一行省略号核心样式 */ + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + width: 100%; + /* 基于内部容器左对齐，省略号生效 */ +} + +/* 描述：超出2行显示省略号（左对齐） */ +.product-card-desc2 { + font-size: clamp(12px, 1.8vw, 14px); + color: #656565; + margin-bottom: 15px; + letter-spacing: 0.1px; + /* 超出2行显示省略号核心样式 */ + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + white-space: normal; + overflow: hidden; + text-overflow: ellipsis; + width: 100%; + /* 基于内部容器左对齐 */ + line-height: 1.4; + /* 优化行高，2行高度适中 */ +} + +/* 图片容器：确保移动端显示 */ +.product-card-img2 { + flex: 1; + display: flex; + justify-content: center; + align-items: center; + min-width: 70px; + /* 强制保留图片区域，避免被挤压 */ +} + +.product-card-img2 img { + width: 100%; + height: auto; + max-height: 144px; + min-height: 80px; + object-fit: contain; + /* 保持图片比例完整，不拉伸 */ +} + +/* 链接图标：左对齐（基于内部容器） */ +.product-card-link2 { + width: 100%; + display: flex; + justify-content: flex-start; + /* 图标左对齐 */ +} + +.product-card-link2 img { + width: clamp(60px, 4vw, 76px); + margin: 0; + /* 清除居中margin */ +} + +/* hover效果 */ +.product-card2:hover { + transform: scale(1.03); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12); +} + +/* 媒体查询：平板端（768px ~ 1023px） */ +@media (max-width: 1023px) and (min-width: 768px) { + .product-card2 { + height: 224px; + min-width: 170px; + } + .product-text2 { + padding-left: 20px; + } + .product-card-img2 img { + max-height: 128px; + } +} + +/* 媒体查询：移动端（≤767px） */ +@media (max-width: 767px) { + .product-card-box2 { + margin-top: 19px; + } + + .product-card2 { + padding: 0 8px; + } + + .product-card-container2 { + gap: 8px; + } + + .product-card2 { + height: 208px; + min-width: 160px; + } + + .product-card-img2 img { + max-height: 120px; + min-height: 72px; + } +} + +/* 媒体查询：小屏手机（≤375px） */ +@media (max-width: 375px) { + .product-card2 { + height: 192px; + min-width: 140px; + } + + /* 强制文字最小12px，保证可读性 */ + .product-card-title2, + .product-card-desc2 { + font-size: 12px; + } + + .product-card-img2 img { + max-height: 104px; + min-height: 64px; + } + + .product-card2 { + padding: 0 5px; + } + + .product-card-link2 img { + width: 40px; + /* 固定图标尺寸，节省空间 */ + } +} + +/* 媒体查询：超小屏手机（≤320px） */ +@media (max-width: 320px) { + .product-card2 { + min-width: 120px; + } + + .product-text2 { + padding: 0 5px; + } + + .product-card-img2 { + min-width: 60px; + /* 缩小图片区域最小宽度，平衡文字空间 */ + } +} diff --git a/public/static/index/pc/css/topic_power_prodline/product_list.css b/public/static/index/pc/css/topic_power_prodline/product_list.css new file mode 100644 index 00000000..7dbf8968 --- /dev/null +++ b/public/static/index/pc/css/topic_power_prodline/product_list.css @@ -0,0 +1,246 @@ +/* 容器布局：通用基础样式（仅宽度、外边距，不涉及高度） */ +.product-card-box { + width: 90%; + margin: clamp(1rem, 2vw, 1.5rem) auto 0; + padding: 0; +} + +.product-card-container { + width: 100%; + margin: 0 auto; + display: flex; + flex-wrap: nowrap; + overflow: hidden; + padding: 0 clamp(0.2rem, 0.6vw, 0.3rem); +} + +/* ######################################################################### */ +/* 移动端样式（单独配置，max-width: 1023px）- 后续修改仅改这里 */ +/* ######################################################################### */ +@media (max-width: 1023px) { + /* 卡片容器：移动端特有 */ + .product-card-container { + align-items: stretch; + } + + /* 卡片核心：移动端固定宽高比 */ + .product-card { + background: rgb(242, 243, 245); + border-radius: clamp(0.375rem, 1vw, 0.5rem); + cursor: pointer; + width: calc(25% - clamp(0.3rem, 0.5vw, 0.36rem)); + flex: none; + box-shadow: 0 clamp(0.1rem, 0.2vw, 0.125rem) + clamp(0.3rem, 0.8vw, 0.5rem) rgba(0, 0, 0, 0.05); + margin: 0 clamp(0.16rem, 0.24vw, 0.2rem); + display: flex; + flex-direction: column; + aspect-ratio: 3 / 4.2; + /* 移动端固定宽高比 */ + } + + /* 卡片hover效果：移动端特有 */ + .product-card:hover { + transform: scale(clamp(1.01, 1.02, 1.03)); + transition: transform 0.3s ease; + } + + /* 图片容器：移动端固定占比 */ + .product-card-img { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + flex: 0 0 72%; + /* 移动端图片区占比 */ + margin-bottom: clamp(0.4rem, 0.6vw, 0.5rem); + overflow: hidden; + border-radius: clamp(0.2rem, 0.4vw, 0.25rem); + } + + /* 产品图片：移动端特有 */ + .product-card img { + width: 100%; + height: 100%; + object-fit: contain; + object-position: center; + } + + /* 文字容器：移动端固定占比 */ + .product-card-text { + flex: 0 0 20%; + /* 移动端文字区占比 */ + display: flex; + flex-direction: column; + justify-content: center; + padding-left: clamp(0.8rem, 2vw, 1.5rem); + padding-right: clamp(0.8rem, 2vw, 1.5rem); + } + + /* 标题样式：移动端特有 */ + .product-card-title { + font-size: clamp(0.8rem, 1.3vw, 1.2rem); + font-weight: 600; + color: #333; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + height: 35%; + /* 移动端标题固定高度 */ + line-height: 1.2; + } + + /* 描述样式：移动端固定2行高度 */ + .product-card-desc { + font-size: clamp(0.7rem, 1.1vw, 0.9rem); + color: #656565; + word-break: break-word; + height: 65%; + /* 移动端描述固定高度（2行） */ + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + line-height: 1.4; + } + + /* 链接图标容器：移动端固定占比 */ + .product-card-link { + width: 100%; + display: flex; + align-items: center; + flex: 0 0 10%; + /* 移动端链接区占比 */ + padding: clamp(0.8rem, 2vw, 1.5rem); + } + + /* 链接图标：移动端特有 */ + .product-card-link img { + width: clamp(2.5rem, 5vw, 4.5rem); + height: auto; + object-fit: contain; + } + + /* 移动端768px以上补充样式 */ + @media (min-width: 768px) and (max-width: 1023px) { + .product-card-img { + flex: 0 0 72%; + } + + .product-card-link img { + width: clamp(5rem, 4vw, 6rem); + } + } +} + +/* ######################################################################### */ +/* PC端样式（单独配置，min-width: 1024px）- 后续修改仅改这里 */ +/* ######################################################################### */ +@media (min-width: 1024px) { + /* 卡片容器：PC端特有（高度自适应） */ + .product-card-container { + align-items: stretch; + height: clamp(30vw, 35vw, 480px); + /* PC端容器高度自适应 */ + } + + /* 卡片核心：PC端高度自适应 */ + .product-card { + background: rgb(242, 243, 245); + border-radius: clamp(0.375rem, 1vw, 0.5rem); + cursor: pointer; + width: calc(25% - clamp(0.3rem, 0.5vw, 0.36rem)); + flex: none; + box-shadow: 0 clamp(0.1rem, 0.2vw, 0.125rem) + clamp(0.3rem, 0.8vw, 0.5rem) rgba(0, 0, 0, 0.05); + margin: 0 clamp(0.16rem, 0.24vw, 0.2rem); + display: flex; + flex-direction: column; + height: 100%; + /* PC端卡片高度继承父容器 */ + } + + /* 卡片hover效果：PC端特有 */ + .product-card:hover { + transform: scale(clamp(1.01, 1.02, 1.03)); + transition: transform 0.3s ease; + } + + /* 图片容器：PC端固定占比 */ + .product-card-img { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + flex: 0 0 72%; + /* PC端图片区占比 */ + margin-bottom: clamp(0.4rem, 0.6vw, 0.5rem); + overflow: hidden; + border-radius: clamp(0.2rem, 0.4vw, 0.25rem); + } + + /* 产品图片：PC端特有 */ + .product-card img { + width: 100%; + height: 100%; + object-fit: contain; + object-position: center; + } + + /* 文字容器：PC端固定占比 */ + .product-card-text { + flex: 0 0 15%; + /* PC端文字区占比 */ + /* display: flex; */ + flex-direction: column; + justify-content: center; + padding-left: clamp(0.8rem, 2vw, 1.5rem); + padding-right: clamp(0.8rem, 2vw, 1.5rem); + } + + /* 标题样式：PC端特有 */ + .product-card-title { + font-size: clamp(0.8rem, 1.3vw, 1.2rem); + font-weight: 600; + color: #333; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + /* height: 35%; */ + /* PC端标题固定高度 */ + line-height: 1.2; + display: flex; + align-items: center; + } + + /* 描述样式：PC端固定2行高度 */ + .product-card-desc { + font-size: clamp(0.7rem, 1.1vw, 0.9rem); + color: #656565; + word-break: break-word; + /* height: 65%; */ + /* PC端描述固定高度（2行） */ + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + line-height: 1.4; + } + + /* 链接图标容器：PC端固定占比 */ + .product-card-link { + width: 100%; + /* display: flex; */ + /* align-items: center; */ + flex: 0 0 12%; + /* PC端链接区占比 */ + padding-left: clamp(0.8rem, 2vw, 1.5rem); + } + + /* 链接图标：PC端特有 */ + .product-card-link img { + width: clamp(2.5rem, 5vw, 4.5rem); + height: auto; + object-fit: contain; + } +}