From 1a43ad30fb8d3754c88dc0276b6680d08e8aff13 Mon Sep 17 00:00:00 2001 From: liqian <735273025@qq.com> Date: Tue, 2 Dec 2025 16:11:12 +0800 Subject: [PATCH] =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../mobile/topic_power_prodline/index.html | 62 +++-- .../css/topic_power_prodline/advantage.css | 233 +++++++++--------- .../css/topic_power_prodline/footer.css | 2 +- .../mobile/css/topic_power_prodline/index.css | 25 +- .../mobile/css/topic_power_prodline/nav.css | 27 +- .../css/topic_power_prodline/product.css | 174 ++++++++++--- .../css/topic_power_prodline/product_list.css | 51 ++-- .../css/topic_power_prodline/swiper.css | 4 +- public/static/index/mobile/images/ljgd.png | Bin 1287 -> 3388 bytes 9 files changed, 360 insertions(+), 218 deletions(-) diff --git a/app/index/view/mobile/topic_power_prodline/index.html b/app/index/view/mobile/topic_power_prodline/index.html index 28b1309a..1f720c6d 100644 --- a/app/index/view/mobile/topic_power_prodline/index.html +++ b/app/index/view/mobile/topic_power_prodline/index.html @@ -82,8 +82,8 @@ {$tc_first_section_lf.title} -
- {$tc_first_section_lf.short_title} +
+ {$tc_first_section_lf.short_title}
{/notempty} @@ -160,8 +160,8 @@ {$hc_first_section_lf.title} -
- {$hc_first_section_lf.short_title} +
+ {$hc_first_section_lf.short_title}
{/notempty} @@ -237,8 +237,8 @@ {$dc_first_section_lf.short_title} -
- {$dc_first_section_lf.short_title} +
+ {$dc_first_section_lf.short_title}
{/notempty} @@ -274,27 +274,49 @@
{assign name="dc_second_section" value=":array_splice($data.desktop_charger, 0, 2)" /} {notempty name="dc_second_section"} -
-
+ -
-
{$dcs.title}
-
{$dcs.short_title}
-
+ +
+
+
{$dcs.title}
+
{$dcs.short_title}
+
了解更多
-
+
{$dcs.title}
{/volist}
+
--> + + +
+
+ {volist name="dc_second_section" id="dcs"} + +
+
+ {$dcs.short_title} +
+
+
{$dcs.title}
+
{$dcs.short_title}
+
+
+ 查看更多 +
+
+ + {/volist} +
+ {/notempty} {assign name="dc_three_section" value=":array_shift($data.desktop_charger)" /} {notempty name="dc_three_section"} @@ -319,8 +341,8 @@ {$wc_first_section_lf.title} -
- {$wc_first_section_lf.title} +
+ {$wc_first_section_lf.title}
{/notempty} @@ -379,9 +401,9 @@ {$cts_lf.title} -
+
- {$cts_lf.title} + {$cts_lf.title}
{/notempty} diff --git a/public/static/index/mobile/css/topic_power_prodline/advantage.css b/public/static/index/mobile/css/topic_power_prodline/advantage.css index 79c71172..7d5d56f1 100644 --- a/public/static/index/mobile/css/topic_power_prodline/advantage.css +++ b/public/static/index/mobile/css/topic_power_prodline/advantage.css @@ -1,8 +1,8 @@ /* 核心模块：固定90%宽度（PC端），优化移动端边距 */ .advantage-section { - width: 90%; + width: 93.5%; margin: 0 auto; - padding: 4rem 0 3rem 0; + padding: clamp(4rem, 5vw, 6rem) 0 clamp(1.8rem, 3vw, 3rem) 0; position: relative; z-index: 1; height: auto !important; @@ -11,12 +11,15 @@ /* 标题容器：恢复原有居中样式 */ .advantage-section__title { - font-size: clamp(1.5rem, 3vw, 2rem); + font-size: clamp(2rem, 3vw, 2.4rem); font-weight: 700; text-align: center; color: #333; line-height: 1.2; + margin:0 auto; margin-bottom: clamp(1.5rem, 2vw, 2.5rem); + width: 80%; + } /* 列表容器：强制设置高度相关属性，确保内容正常显示 */ @@ -74,7 +77,7 @@ /* 文字区域：flex垂直分布，确保标题和描述都垂直居中 */ .advantage-card__content { width: 100%; - padding: clamp(0.3rem, 0.4vw, 0.75rem); + padding: clamp(1rem,3vw, 1.5rem); display: flex; flex-direction: column; justify-content: center; @@ -94,7 +97,7 @@ /* 卡片标题：居左显示 */ .advantage-card__heading { - font-size: clamp(0.85rem, 1.5vw, 1.4rem); + font-size: clamp(16px, 1.5vw, 32px); font-weight: 600; color: #333; line-height: 1.3; @@ -122,18 +125,26 @@ transform: translateX(3px); } -/* 描述文字：水平+垂直居中，与标题容器对齐 */ +/* 描述文字：水平+垂直居中，与标题容器对齐，设置最小高度统一占位 */ .advantage-card__description { - font-size: clamp(0.6rem, 0.9vw, 0.9rem); - color: #78787a; - line-height: 1.2; - white-space: normal; - overflow: hidden; - width: 80%; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - + font-size: clamp(10px, 1vw, 18px); + line-height: 1.2; + width: 80%; + color: #666666; + /* 强制固定2行显示 */ + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + /* 非webkit内核浏览器降级方案 */ + display: block; + height: calc(1.2em * 2); /* 行高 × 行数，确保高度刚好容纳2行 */ + /* 最小高度兜底，适配不同字体大小 */ + min-height: clamp(24px, 2.4vw, 43.2px); /* 1.2em×2换算，对应字体范围的最小/最大高度 */ + /* 防止内容溢出 */ + white-space: normal; + word-wrap: break-word; } /* 卡片hover效果 */ @@ -194,127 +205,107 @@ transform-origin: left center; } -/* iPad Pro适配：和移动端一样一行展示2个，最后一个隐藏，字体放大 */ -@media (max-width: 1024px) and (min-width: 768px) { - .advantage-section__list { - display: block !important; - width: 100% !important; - height: auto !important; - overflow: hidden !important; - padding: 0 !important; - } +/* 平板端和移动端统一布局：第一行2个，第二行3个 */ +@media (max-width: 1024px) { + /* 列表容器：flex布局+换行，左对齐确保排列规则，仅保留列间距 */ + .advantage-section__list { + display: flex !important; + flex-wrap: wrap !important; + justify-content: flex-start !important; + gap: clamp(0.3rem, 1.5vw, 0.8rem) !important; /* 列间距 */ + row-gap: clamp(0.5rem, 2vw, 1rem) !important; /* 行间距 */ + width: 100% !important; + height: auto !important; + overflow: visible !important; + padding: 0 !important; + } - .advantage-card-wrap { - width: calc(50% - 7.5px) !important; - float: left !important; - margin: 0 0 15px 0 !important; - height: auto !important; - } + /* 卡片包裹容器：基础样式 */ + .advantage-card-wrap { + display: block !important; + height: auto !important; + min-height: 1px !important; + margin-bottom: 0 !important; /* 移除额外margin */ + } - .advantage-card-wrap:nth-child(odd) { - margin-right: 15px !important; - } + /* 第一行2个卡片：宽度=(100% - 1个间距)/2 */ + .advantage-card-wrap:nth-child(1), + .advantage-card-wrap:nth-child(2) { + width: calc((100% - clamp(0.3rem, 1.5vw, 0.8rem)) / 2) !important; + } - .advantage-card { - width: 100% !important; - min-width: 100% !important; - max-width: 100% !important; - flex: none !important; - height: auto !important; - display: flex; - flex-direction: column; - } + /* 第二行3个卡片：宽度=(100% - 2个间距)/3 */ + .advantage-card-wrap:nth-child(3), + .advantage-card-wrap:nth-child(4), + .advantage-card-wrap:nth-child(5) { + width: calc((100% - 2 * clamp(0.3rem, 1.5vw, 0.8rem)) / 3) !important; + } - /* 只显示前4个卡片，最后一个隐藏 */ - .advantage-card-wrap:nth-child(n+5) { - display: none !important; - } + /* 卡片核心：宽度继承父容器，高度自适应 */ + .advantage-card { + width: 100% !important; + min-width: 100% !important; + max-width: 100% !important; + flex: none !important; + height: auto !important; + display: flex; + flex-direction: column; + } - .advantage-card__content { - width: 100%; - flex-grow: 1; - padding: clamp(1rem, 3vw, 1.5rem) 0; - } + .advantage-card__img { + aspect-ratio: 1 / 1; + } - .advantage-card__img { - aspect-ratio: 1 / 1; - max-height: 330px; - } + .advantage-card__content { + flex-grow: 1; + padding: clamp(1.2rem, 3vw, 2rem) 0; + } - /* 平板端字体放大 */ - .advantage-card__heading { - font-size: clamp(1.1rem, 2vw, 1.6rem); - } + /* 平板端字体稍大 */ + .advantage-card__heading { + font-size: clamp(16px, 3vw, 20px); + } - .advantage-card__description { - font-size: clamp(0.85rem, 1.3vw, 1.1rem); - - } + .advantage-card__description { + font-size: clamp(10px, 2vw, 14px); + min-height: clamp(24px, 4vw, 30px); + color:#666666; + } - .card-arrow { - width: clamp(1.2rem, 2vw, 1.7rem); - height: clamp(1.2rem, 2vw, 1.7rem); - font-size: clamp(0.9rem, 1.5vw, 1.3rem); - } + .card-arrow { + width: clamp(1.17rem, 2.5vw, 2.2rem); + height: clamp(1.17rem, 2.5vw, 2.2rem); + } } -/* 移动端布局调整：彻底修复高度为0问题 */ +/* 移动端进一步优化间距 */ @media (max-width: 767px) { - /* 使用block布局+浮动确保高度正常 */ - .advantage-section__list { - display: block !important; - width: 100% !important; - height: auto !important; - overflow: hidden !important; - padding: 0 !important; - } + .advantage-section__list { + gap: clamp(0.2rem, 1vw, 0.5rem) !important; /* 进一步缩小列间距 */ + row-gap: clamp(0.3rem, 1.5vw, 0.8rem) !important; /* 进一步缩小行间距 */ + } - /* 卡片包裹容器：使用浮动实现一行2个 */ - .advantage-card-wrap { - width: calc(50% - 7.5px) !important; - float: left !important; - margin: 0 0 15px 0 !important; - height: auto !important; - } + .advantage-card-wrap:nth-child(1), + .advantage-card-wrap:nth-child(2) { + width: calc((100% - clamp(0.2rem, 1vw, 0.5rem)) / 2) !important; + } - /* 偶数个卡片添加右边距 */ - .advantage-card-wrap:nth-child(odd) { - margin-right: 15px !important; - } + .advantage-card-wrap:nth-child(3), + .advantage-card-wrap:nth-child(4), + .advantage-card-wrap:nth-child(5) { + width: calc((100% - 2 * clamp(0.2rem, 1vw, 0.5rem)) / 3) !important; + } - /* 卡片尺寸调整 */ - .advantage-card { - width: 100% !important; - min-width: 100% !important; - max-width: 100% !important; - flex: none !important; - height: auto !important; - display: flex; - flex-direction: column; - } - - /* 只显示前4个卡片 */ - .advantage-card-wrap:nth-child(n+5) { - display: none !important; - } - - .advantage-card__img { - aspect-ratio: 1 / 1; - } - - .advantage-card__content { - flex-grow: 1; - padding: clamp(1rem, 3vw, 1.5rem) 0; /* 平板端底部内边距稍大 */ - } + .advantage-card__description { + min-height: clamp(20px, 4.5vw, 26px); + color:#666666; + } } -/* 超小屏进一步优化 */ +/* 超小屏优化 */ @media (max-width: 374px) { - .advantage-card-wrap { - width: calc(50% - 5px) !important; - } - - .advantage-card-wrap:nth-child(odd) { - margin-right: 10px !important; - } + .advantage-card__description { + min-height: clamp(18px, 4vw, 24px); + color:#666666; + } } \ No newline at end of file diff --git a/public/static/index/mobile/css/topic_power_prodline/footer.css b/public/static/index/mobile/css/topic_power_prodline/footer.css index 297e2ddf..608a87cd 100644 --- a/public/static/index/mobile/css/topic_power_prodline/footer.css +++ b/public/static/index/mobile/css/topic_power_prodline/footer.css @@ -3,7 +3,7 @@ padding: 3rem 0; } .prodline-footer-box-img { - width: 90%; + width: 93.5%; margin: 0 auto; } .prodline-footer-box-img img { diff --git a/public/static/index/mobile/css/topic_power_prodline/index.css b/public/static/index/mobile/css/topic_power_prodline/index.css index cf0b7a55..edb2f68c 100644 --- a/public/static/index/mobile/css/topic_power_prodline/index.css +++ b/public/static/index/mobile/css/topic_power_prodline/index.css @@ -11,17 +11,30 @@ html { } /* 平板端（768px~1023px）：15px→16px（过渡，最小15px） */ -@media (max-width: 1023px) and (min-width: 768px) { +@media (max-width: 1024px) and (min-width: 768px) { html { font-size: calc(15px + (16 - 15) * (100vw - 768px) / (1023 - 768)); } + html body { + margin: 0 !important; + padding: 0 !important; + width:100vw !important; + max-width: 100vw !important; + } } /* 移动端（320px~767px）：固定14px（不随屏幕缩小而变小，避免文字<12px） */ @media (max-width: 767px) { html { font-size: 14px; + } + html body { + margin: 0 !important; + padding: 0 !important; + width:100vw !important; + max-width: 100vw !important; + } } /* 超小屏（≤320px）：仍固定14px，彻底杜绝文字过小 */ @@ -29,6 +42,12 @@ html { html { font-size: 14px; } + html body { + margin: 0 !important; + padding: 0 !important; + width:100vw !important; + max-width: 100vw !important; + } } body { background: rgb(242, 243, 245); @@ -39,10 +58,10 @@ a { display: block; } .more { - width: 90%; + width: 93.5%; margin: 0 auto; display: flex; - justify-content: flex-end; + justify-content: center; padding-top: clamp(1.5rem, 3vw, 3rem); } .more-img { diff --git a/public/static/index/mobile/css/topic_power_prodline/nav.css b/public/static/index/mobile/css/topic_power_prodline/nav.css index b0d2342d..6182548d 100644 --- a/public/static/index/mobile/css/topic_power_prodline/nav.css +++ b/public/static/index/mobile/css/topic_power_prodline/nav.css @@ -1,7 +1,7 @@ .nav-box { display: flex; justify-content: space-around; - width: 90%; + width: 93.5%; /* 平板/PC端限制最大宽度 */ margin: 0 auto; background-color: #fff; @@ -11,9 +11,10 @@ /* 2px→0.125rem，15px→0.9375rem */ position: relative; z-index: 1; - padding: 0.625rem 0; + /* padding: 0.625rem 0; */ /* 10px→0.625rem（原内边距不变） */ overflow: visible; + padding: 0 clamp(21px, 5.6vw, 42px); } .nav-item { @@ -23,7 +24,7 @@ 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; @@ -33,11 +34,14 @@ max-width: 5rem; /* 80px→5rem */ text-align: center; + padding: 0 c; } .nav-item img { - width: 4rem; - height: 4rem; + width: 100%; + /* clamp(4rem, 5.6vw, 8rem) 4rem; */ + /* height: 4rem; */ + max-width: 98px; /* 60px→3.75rem（16px基准），14px根字体下≈52.5px，仍清晰 */ object-fit: contain; border-radius: 0.75rem; @@ -65,23 +69,22 @@ .nav-item p { margin: 0; /* PC端：15px→0.9375rem（16px根字体） */ - font-size: 0.9375rem; - color: #37373e; + font-size: clamp(12px, 3vw, 1.3125rem); + color: #1E1E1E; 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; + padding-top:6vw; + padding-bottom:1.4vw; + /* padding: clamp(1.5rem, 6vw, 3.86rem) 0 clamp(0.7rem, 2.67vw, 1.43rem); */ } /* 平板端文字：14px→0.9375rem（15px根字体下=14px） */ @media (max-width: 1023px) and (min-width: 768px) { .nav-item p { - font-size: 0.9375rem; + font-size: clamp(12px, 3vw, 1.3125rem); } } diff --git a/public/static/index/mobile/css/topic_power_prodline/product.css b/public/static/index/mobile/css/topic_power_prodline/product.css index e02139b4..4165b729 100644 --- a/public/static/index/mobile/css/topic_power_prodline/product.css +++ b/public/static/index/mobile/css/topic_power_prodline/product.css @@ -5,7 +5,7 @@ } .product-title { - width: 90%; + width: 93.5%; margin: 0 auto; padding-bottom: clamp(1.5rem, 3vw, 3rem); } @@ -26,7 +26,7 @@ display: flex; gap: clamp(0.4rem, 1vw, 0.71rem); margin: 0 auto; - width: 90%; + width: 93.5%; align-items: flex-start; } @@ -46,28 +46,11 @@ } /* 悬浮图公共样式：两个产品尺寸完全一致（100%宽度） */ -.product-img-hover { - position: absolute; - width: 100%; - /* 两个产品悬浮图宽度相同 */ - z-index: 1; -} -.product-img-hover img { - width: 100%; - max-width: 300px; - /* 图片尺寸100%，无区别 */ - height: auto; - border-radius: 10px; -} -/* 第一个产品：悬浮图居中上移（仅定位差异） */ -.product-img-1 { - top: -10%; - left: 50%; - transform: translateX(-50%); -} + + /* 第二个产品：悬浮图上右超出（仅定位差异） */ .product-img-2 { @@ -139,10 +122,11 @@ opacity: 1; display: block; } -/* PC端适配：仅微调定位参数，尺寸不变 */ -@media (min-width: 1024px) { + +/* PC端适配：仅1024px以上应用PC样式 */ +@media (min-width: 1025px) { .product-container { - width: 90%; + width: 93.5%; } .product-left { @@ -153,32 +137,142 @@ flex: 5; } - /* 宽度保持一致，仅调定位偏移 */ - .product-img-1 { - top: -11%; - } + .product-img-2 { top: -12%; } } -/* 超小屏适配：尺寸不变，微调定位 */ -@media (max-width: 375px) { - .product-left { - flex: 1.5; +/* 移动端+平板端适配（1024px以下）：统一样式表现 */ +@media (max-width: 1024px) { + .product-container { + flex-direction: column-reverse; /* 反转列顺序，右在上左在下 */ } - + + .product-left, .product-right { + flex: none; /* 重置flex比例 */ + width: 100%; /* 宽度铺满 */ + } + .product-right { - flex: 3.5; + align-self: auto; /* 重置对齐方式 */ + aspect-ratio: 16/9; + min-height: 194px; } - - /* 宽度仍保持一致 */ - .product-img-1 { - top: -6%; - } - + .product-img { + /* max-height: 202px; + object-fit: contain; */ + width: 100%; + } + /* 悬浮图容器宽高与图片一致 */ + .product-img-hover { + width: auto; /* 宽度由图片决定 */ + position: absolute; + right: 0; + bottom: 0; + z-index: 33; + } .product-img-2 { top: -8%; + width: auto; + right: 0; + left: auto; } + .img1 { + + width:356px; + /* 或者保持原有width:100%，只设置max-width */ + max-width:356px; + } + .img2 { + + width:356px; + /* 或者保持原有width:100%，只设置max-width */ + max-width:356px; + } + .img3 { + width:356px; + /* 或者保持原有width:100%，只设置max-width */ + max-width:356px; + } + .img4 { + width:356px; + /* 或者保持原有width:100%，只设置max-width */ + max-width:356px; + } + .img5 { + width:356px; + /* 或者保持原有width:100%，只设置max-width */ + max-width:356px; + } + } + +/* 超小屏适配（375px以下） */ +/* @media (max-width: 768px) and (min-width: 375px) */ +@media (min-width: 375px) and (max-width: 767px){ + .img1 { + + width: clamp(138px, 20vw, 276px); + /* 或者保持原有width:100%，只设置max-width */ + max-width: clamp(138px, 20vw, 276px) !important; + } + .img2 { + + width: clamp(135px, 20vw, 270px); + /* 或者保持原有width:100%，只设置max-width */ + max-width: clamp(135px, 20vw, 270px) !important; + } + .img3 { + width: clamp(129px, 20vw, 258px); + /* 或者保持原有width:100%，只设置max-width */ + max-width: clamp(129px, 20vw, 258px) !important; + } + .img4 { + width: clamp(125px, 20vw,250px); + /* 或者保持原有width:100%，只设置max-width */ + max-width: clamp(125px, 20vw,250px) !important; + } + .img5 { + width: clamp(129px, 20vw,258px); + max-width: clamp(129px, 20vw,258px)!important; + } + + .product-right { + min-height: 194px; + } + .product-img-hover { + width:auto; + } + +} +@media (min-width: 768px) and (max-width: 1023px) { + .img1 { + + width:100%; + /* 或者保持原有width:100%，只设置max-width */ + max-width:276px; + } + .img2 { + + width:100%; + /* 或者保持原有width:100%，只设置max-width */ + max-width:270px; + } + .img3 { + width:258px; + /* 或者保持原有width:100%，只设置max-width */ + max-width: 258px; + } + .img4 { + width:250px; + /* 或者保持原有width:100%，只设置max-width */ + max-width: 250px; + } + .img5 { + width: 258px; + max-width: 258px; + } + +} \ No newline at end of file diff --git a/public/static/index/mobile/css/topic_power_prodline/product_list.css b/public/static/index/mobile/css/topic_power_prodline/product_list.css index 2ccc0502..28983ec8 100644 --- a/public/static/index/mobile/css/topic_power_prodline/product_list.css +++ b/public/static/index/mobile/css/topic_power_prodline/product_list.css @@ -1,7 +1,7 @@ /* 容器布局：通用基础样式（仅宽度、外边距，不涉及高度） */ .product-card-box { - width: 90%; - margin: clamp(1rem, 2vw, 1.5rem) auto 0; + width: 93.5%; + margin: clamp(0.7rem, 2vw, 1.5rem) auto 0; padding: 0; } @@ -24,7 +24,7 @@ /* ######################################################################### */ /* 移动端+平板样式（max-width: 1023px）- 后续修改仅改这里 */ /* ######################################################################### */ -@media (max-width: 1023px) { +@media (max-width: 1024px) { /* 卡片容器：移动端+平板特有 - 改为wrap换行，一行2个，高度自适应 */ .product-card-container { align-items: flex-start; /* 改为flex-start，避免拉伸 */ @@ -95,11 +95,12 @@ padding-left: clamp(0.8rem, 2vw, 1.5rem); padding-right: clamp(0.8rem, 2vw, 1.5rem); height: auto !important; /* 高度自适应 */ + align-items: center; } /* 标题样式：移动端+平板特有，高度自适应 */ .product-card-title { - font-size: clamp(0.8rem, 1.3vw, 1.2rem); + font-size: clamp(15px, 1.5vw, 30px); font-weight: 600; color: #333; white-space: nowrap; @@ -108,11 +109,12 @@ height: auto !important; /* 移除固定高度 */ margin-bottom: clamp(0.2rem, 0.4vw, 0.3rem); /* 添加间距 */ line-height: 1.2; + text-align: center; } /* 描述样式：移动端+平板高度自适应 */ .product-card-desc { - font-size: clamp(0.7rem, 1.1vw, 0.9rem); + font-size: clamp(11px, 1.5vw,21px); color: #656565; word-break: break-word; height: auto !important; /* 移除固定高度 */ @@ -121,23 +123,30 @@ -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.4; + text-align: center; } /* 链接图标容器：移动端+平板高度自适应，添加较小的底部内边距 */ .product-card-link { - width: 100%; - display: flex; - align-items: center; - flex: 0 0 auto; /* 改为auto，高度自适应 */ - padding: clamp(0.5rem, 1vw, 0.8rem); /* 减小上下内边距 */ - padding-bottom: clamp(1rem, 3vw, 1.5rem); /* 更小的底部内边距（约12px） */ - padding-left: clamp(0.8rem, 2vw, 1.5rem); - height: auto !important; /* 高度自适应 */ + + + width: 100%; + display: flex; + align-items: center; + justify-content: center; /* 水平居中 */ + flex: 0 0 auto; + padding: clamp(0.5rem, 1vw, 0.8rem); + padding-bottom: clamp(1rem, 3vw, 1.5rem); + padding-left: clamp(0.8rem, 2vw, 1.5rem); + height: auto !important; + text-align: center; /* 针对inline元素的居中 */ + + } /* 链接图标：移动端+平板特有 */ .product-card-link img { - width: clamp(2.5rem, 5vw, 4.5rem); + width: clamp(5.5rem, 5vw,8.5rem); height: auto; object-fit: contain; } @@ -154,15 +163,18 @@ /* 平板端字体稍大 */ .product-card-title { - font-size: clamp(1rem, 1.5vw, 1.4rem); + font-size: clamp(15px, 1.5vw, 30px); + text-align: center; } .product-card-desc { - font-size: clamp(0.85rem, 1.2vw, 1rem); + font-size: clamp(11px, 1.5vw,21px); + text-align: center; } /* 平板端底部内边距稍大但仍较小 */ .product-card-link { + min-width: 90px; padding-bottom: clamp(1rem, 3vw, 1.5rem); } } @@ -238,9 +250,9 @@ /* 标题样式：PC端特有，高度自适应 */ .product-card-title { - font-size: clamp(0.8rem, 1.3vw, 1.2rem); + font-size: clamp(15px, 1.5vw, 30px); font-weight: 600; - color: #333; + color: #101010; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -253,7 +265,7 @@ /* 描述样式：PC端高度自适应 */ .product-card-desc { - font-size: clamp(0.7rem, 1.1vw, 0.9rem); + font-size: clamp(11px, 1.5vw,21px); color: #656565; word-break: break-word; height: auto !important; /* 高度自适应 */ @@ -262,6 +274,7 @@ -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.4; + text-align: center; } /* 链接图标容器：PC端高度自适应，添加较小的底部内边距 */ diff --git a/public/static/index/mobile/css/topic_power_prodline/swiper.css b/public/static/index/mobile/css/topic_power_prodline/swiper.css index ddec1bd3..cf7fdfc7 100644 --- a/public/static/index/mobile/css/topic_power_prodline/swiper.css +++ b/public/static/index/mobile/css/topic_power_prodline/swiper.css @@ -5,8 +5,8 @@ .auto-swiper-container { width: 100%; /* 关键：高度 = 视口高度的百分比（可调整，如60vh=屏幕高度60%） */ - margin-bottom: 5.625rem; - max-height: 900px; + margin-bottom: 5.7rem; + /* max-height: 900px; */ min-height: 300px; position: relative; margin-top:60px; diff --git a/public/static/index/mobile/images/ljgd.png b/public/static/index/mobile/images/ljgd.png index b55297def763991569512167fa742095f24ac812..eb31210a4d09225d4bdae6399abefbeed613cdf4 100644 GIT binary patch literal 3388 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