Compare commits
2 Commits
font
...
2cba81ebfe
| Author | SHA1 | Date | |
|---|---|---|---|
| 2cba81ebfe | |||
| 7863cd87ec |
@@ -82,8 +82,8 @@
|
||||
<a class="product-left" href="{$tc_first_section_lf.link}">
|
||||
<img src="{$tc_first_section_lf.image}" alt="{$tc_first_section_lf.title}" class="product-img">
|
||||
<!-- 公共类+定位类：尺寸统一，定位不同 -->
|
||||
<div class="product-img-hover product-img-1">
|
||||
<img src="{$tc_first_section_lf.extra_image}" alt="{$tc_first_section_lf.short_title}">
|
||||
<div class="product-img-hover top55">
|
||||
<img src="{$tc_first_section_lf.extra_image}" alt="{$tc_first_section_lf.short_title}" class="img1">
|
||||
</div>
|
||||
</a>
|
||||
{/notempty}
|
||||
@@ -160,8 +160,8 @@
|
||||
<a class="product-left" href="{$hc_first_section_lf.link}">
|
||||
<img src="{$hc_first_section_lf.image}" alt="{$hc_first_section_lf.title}" class="product-img">
|
||||
<!-- 公共类+定位类：尺寸统一，定位不同 -->
|
||||
<div class="product-img-hover product-img-1">
|
||||
<img src="{$hc_first_section_lf.extra_image}" alt="{$hc_first_section_lf.short_title}">
|
||||
<div class="product-img-hover">
|
||||
<img src="{$hc_first_section_lf.extra_image}" alt="{$hc_first_section_lf.short_title}" class="img2">
|
||||
</div>
|
||||
</a>
|
||||
{/notempty}
|
||||
@@ -237,8 +237,8 @@
|
||||
<a class="product-left" href="{$dc_first_section_lf.link}">
|
||||
<img src="{$dc_first_section_lf.image}" alt="{$dc_first_section_lf.short_title}" class="product-img">
|
||||
<!-- 公共类+定位类：尺寸和第一个完全一致，仅定位不同 -->
|
||||
<div class="product-img-hover product-img-2" >
|
||||
<img src="{$dc_first_section_lf.extra_image}" alt="{$dc_first_section_lf.short_title}">
|
||||
<div class="product-img-hover" >
|
||||
<img src="{$dc_first_section_lf.extra_image}" alt="{$dc_first_section_lf.short_title}" class="img3">
|
||||
</div>
|
||||
</a>
|
||||
{/notempty}
|
||||
@@ -274,27 +274,49 @@
|
||||
</div>
|
||||
{assign name="dc_second_section" value=":array_splice($data.desktop_charger, 0, 2)" /}
|
||||
{notempty name="dc_second_section"}
|
||||
<div class="product-card-box">
|
||||
<div class="product-card-container2">
|
||||
<!-- <div class="product-card-box">
|
||||
<div class="product-card-container">
|
||||
{volist name="dc_second_section" id="dcs"}
|
||||
<a class="product-card2" href="{$dcs.link}">
|
||||
<div class="product-text2">
|
||||
<!-- 新增内部容器，确保所有内容左对齐一致性 -->
|
||||
<div class="product-text-content2">
|
||||
<div class="product-card-title2">{$dcs.title}</div> <!-- 测试超出一行省略 -->
|
||||
<div class="product-card-desc2">{$dcs.short_title}</div> <!-- 测试超出2行省略 -->
|
||||
<div class="product-card-link2">
|
||||
<a class="product-card" href="{$dcs.link}">
|
||||
<div class="product-text">
|
||||
<div class="product-text-content">
|
||||
<div class="product-card-title">{$dcs.title}</div>
|
||||
<div class="product-card-desc">{$dcs.short_title}</div>
|
||||
<div class="product-card-link">
|
||||
<img src="__IMAGES__/ljgd.png" alt="了解更多">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-card-img2">
|
||||
<div class="product-card-img">
|
||||
<img src="{$dcs.image}" alt="{$dcs.title}">
|
||||
</div>
|
||||
</a>
|
||||
{/volist}
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
|
||||
<div class="product-card-box">
|
||||
<div class="product-card-container">
|
||||
{volist name="dc_second_section" id="dcs"}
|
||||
<a class="product-card-wrap" href="{$dcs.link}">
|
||||
<div class="product-card" href="#">
|
||||
<div class="product-card-img">
|
||||
<img src="{$dcs.image}" alt="{$dcs.short_title}">
|
||||
</div>
|
||||
<div class="product-card-text">
|
||||
<div class="product-card-title">{$dcs.title}</div>
|
||||
<div class="product-card-desc">{$dcs.short_title}</div>
|
||||
</div>
|
||||
<div class="product-card-link">
|
||||
<img src="__IMAGES__/ljgd.png" alt="查看更多">
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/volist}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/notempty}
|
||||
{assign name="dc_three_section" value=":array_shift($data.desktop_charger)" /}
|
||||
{notempty name="dc_three_section"}
|
||||
@@ -319,8 +341,8 @@
|
||||
<a class="product-left" href="{$wc_first_section_lf.link}">
|
||||
<img src="{$wc_first_section_lf.image}" alt="{$wc_first_section_lf.title}" class="product-img">
|
||||
<!-- 公共类+定位类：尺寸统一，定位不同 -->
|
||||
<div class="product-img-hover product-img-1">
|
||||
<img src="{$wc_first_section_lf.extra_image}" alt="{$wc_first_section_lf.title}">
|
||||
<div class="product-img-hover top70">
|
||||
<img src="{$wc_first_section_lf.extra_image}" alt="{$wc_first_section_lf.title}" class="img4">
|
||||
</div>
|
||||
</a>
|
||||
{/notempty}
|
||||
@@ -379,9 +401,9 @@
|
||||
<img src="{$cts_lf.image}" alt="{$cts_lf.title}" class="product-img">
|
||||
<!-- 公共类+定位类：尺寸统一，定位不同 -->
|
||||
<!--style="display:flex;justify-content: center;"-->
|
||||
<div class="product-img-hover product-img-1" >
|
||||
<div class="product-img-hover top40" >
|
||||
<!-- style="width:70%"-->
|
||||
<img src="{$cts_lf.extra_image}" alt="{$cts_lf.title}">
|
||||
<img src="{$cts_lf.extra_image}" alt="{$cts_lf.title}" class="img5">
|
||||
</div>
|
||||
</a>
|
||||
{/notempty}
|
||||
|
||||
@@ -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;
|
||||
font-size: clamp(10px, 1vw, 18px);
|
||||
line-height: 1.2;
|
||||
white-space: normal;
|
||||
overflow: hidden;
|
||||
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,27 +205,43 @@
|
||||
transform-origin: left center;
|
||||
}
|
||||
|
||||
/* iPad Pro适配：和移动端一样一行展示2个，最后一个隐藏，字体放大 */
|
||||
@media (max-width: 1024px) and (min-width: 768px) {
|
||||
/* 平板端和移动端统一布局：第一行2个，第二行3个 */
|
||||
@media (max-width: 1024px) {
|
||||
/* 列表容器：flex布局+换行，左对齐确保排列规则，仅保留列间距 */
|
||||
.advantage-section__list {
|
||||
display: block !important;
|
||||
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: hidden !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;
|
||||
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;
|
||||
}
|
||||
|
||||
/* 第二行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;
|
||||
}
|
||||
|
||||
/* 卡片核心：宽度继承父容器，高度自适应 */
|
||||
.advantage-card {
|
||||
width: 100% !important;
|
||||
min-width: 100% !important;
|
||||
@@ -225,96 +252,60 @@
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 只显示前4个卡片，最后一个隐藏 */
|
||||
.advantage-card-wrap:nth-child(n+5) {
|
||||
display: none !important;
|
||||
.advantage-card__img {
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
.advantage-card__content {
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
padding: clamp(1rem, 3vw, 1.5rem) 0;
|
||||
padding: clamp(1.2rem, 3vw, 2rem) 0;
|
||||
}
|
||||
|
||||
.advantage-card__img {
|
||||
aspect-ratio: 1 / 1;
|
||||
max-height: 330px;
|
||||
}
|
||||
|
||||
/* 平板端字体放大 */
|
||||
/* 平板端字体稍大 */
|
||||
.advantage-card__heading {
|
||||
font-size: clamp(1.1rem, 2vw, 1.6rem);
|
||||
font-size: clamp(16px, 3vw, 20px);
|
||||
}
|
||||
|
||||
.advantage-card__description {
|
||||
font-size: clamp(0.85rem, 1.3vw, 1.1rem);
|
||||
|
||||
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);
|
||||
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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -3,7 +3,7 @@
|
||||
padding: 3rem 0;
|
||||
}
|
||||
.prodline-footer-box-img {
|
||||
width: 90%;
|
||||
width: 93.5%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.prodline-footer-box-img img {
|
||||
|
||||
@@ -11,16 +11,29 @@ 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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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） */
|
||||
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; /* 高度自适应 */
|
||||
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端高度自适应，添加较小的底部内边距 */
|
||||
|
||||
@@ -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;
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 3.3 KiB |
Reference in New Issue
Block a user