移动端
This commit is contained in:
@@ -82,8 +82,8 @@
|
|||||||
<a class="product-left" href="{$tc_first_section_lf.link}">
|
<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">
|
<img src="{$tc_first_section_lf.image}" alt="{$tc_first_section_lf.title}" class="product-img">
|
||||||
<!-- 公共类+定位类：尺寸统一，定位不同 -->
|
<!-- 公共类+定位类：尺寸统一，定位不同 -->
|
||||||
<div class="product-img-hover product-img-1">
|
<div class="product-img-hover top55">
|
||||||
<img src="{$tc_first_section_lf.extra_image}" alt="{$tc_first_section_lf.short_title}">
|
<img src="{$tc_first_section_lf.extra_image}" alt="{$tc_first_section_lf.short_title}" class="img1">
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
{/notempty}
|
{/notempty}
|
||||||
@@ -160,8 +160,8 @@
|
|||||||
<a class="product-left" href="{$hc_first_section_lf.link}">
|
<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">
|
<img src="{$hc_first_section_lf.image}" alt="{$hc_first_section_lf.title}" class="product-img">
|
||||||
<!-- 公共类+定位类：尺寸统一，定位不同 -->
|
<!-- 公共类+定位类：尺寸统一，定位不同 -->
|
||||||
<div class="product-img-hover product-img-1">
|
<div class="product-img-hover">
|
||||||
<img src="{$hc_first_section_lf.extra_image}" alt="{$hc_first_section_lf.short_title}">
|
<img src="{$hc_first_section_lf.extra_image}" alt="{$hc_first_section_lf.short_title}" class="img2">
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
{/notempty}
|
{/notempty}
|
||||||
@@ -237,8 +237,8 @@
|
|||||||
<a class="product-left" href="{$dc_first_section_lf.link}">
|
<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">
|
<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" >
|
<div class="product-img-hover" >
|
||||||
<img src="{$dc_first_section_lf.extra_image}" alt="{$dc_first_section_lf.short_title}">
|
<img src="{$dc_first_section_lf.extra_image}" alt="{$dc_first_section_lf.short_title}" class="img3">
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
{/notempty}
|
{/notempty}
|
||||||
@@ -274,27 +274,49 @@
|
|||||||
</div>
|
</div>
|
||||||
{assign name="dc_second_section" value=":array_splice($data.desktop_charger, 0, 2)" /}
|
{assign name="dc_second_section" value=":array_splice($data.desktop_charger, 0, 2)" /}
|
||||||
{notempty name="dc_second_section"}
|
{notempty name="dc_second_section"}
|
||||||
<div class="product-card-box">
|
<!-- <div class="product-card-box">
|
||||||
<div class="product-card-container2">
|
<div class="product-card-container">
|
||||||
{volist name="dc_second_section" id="dcs"}
|
{volist name="dc_second_section" id="dcs"}
|
||||||
<a class="product-card2" href="{$dcs.link}">
|
<a class="product-card" href="{$dcs.link}">
|
||||||
<div class="product-text2">
|
<div class="product-text">
|
||||||
<!-- 新增内部容器，确保所有内容左对齐一致性 -->
|
<div class="product-text-content">
|
||||||
<div class="product-text-content2">
|
<div class="product-card-title">{$dcs.title}</div>
|
||||||
<div class="product-card-title2">{$dcs.title}</div> <!-- 测试超出一行省略 -->
|
<div class="product-card-desc">{$dcs.short_title}</div>
|
||||||
<div class="product-card-desc2">{$dcs.short_title}</div> <!-- 测试超出2行省略 -->
|
<div class="product-card-link">
|
||||||
<div class="product-card-link2">
|
|
||||||
<img src="__IMAGES__/ljgd.png" alt="了解更多">
|
<img src="__IMAGES__/ljgd.png" alt="了解更多">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="product-card-img2">
|
<div class="product-card-img">
|
||||||
<img src="{$dcs.image}" alt="{$dcs.title}">
|
<img src="{$dcs.image}" alt="{$dcs.title}">
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
{/volist}
|
{/volist}
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
{/notempty}
|
{/notempty}
|
||||||
{assign name="dc_three_section" value=":array_shift($data.desktop_charger)" /}
|
{assign name="dc_three_section" value=":array_shift($data.desktop_charger)" /}
|
||||||
{notempty name="dc_three_section"}
|
{notempty name="dc_three_section"}
|
||||||
@@ -319,8 +341,8 @@
|
|||||||
<a class="product-left" href="{$wc_first_section_lf.link}">
|
<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">
|
<img src="{$wc_first_section_lf.image}" alt="{$wc_first_section_lf.title}" class="product-img">
|
||||||
<!-- 公共类+定位类：尺寸统一，定位不同 -->
|
<!-- 公共类+定位类：尺寸统一，定位不同 -->
|
||||||
<div class="product-img-hover product-img-1">
|
<div class="product-img-hover top70">
|
||||||
<img src="{$wc_first_section_lf.extra_image}" alt="{$wc_first_section_lf.title}">
|
<img src="{$wc_first_section_lf.extra_image}" alt="{$wc_first_section_lf.title}" class="img4">
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
{/notempty}
|
{/notempty}
|
||||||
@@ -379,9 +401,9 @@
|
|||||||
<img src="{$cts_lf.image}" alt="{$cts_lf.title}" class="product-img">
|
<img src="{$cts_lf.image}" alt="{$cts_lf.title}" class="product-img">
|
||||||
<!-- 公共类+定位类：尺寸统一，定位不同 -->
|
<!-- 公共类+定位类：尺寸统一，定位不同 -->
|
||||||
<!--style="display:flex;justify-content: center;"-->
|
<!--style="display:flex;justify-content: center;"-->
|
||||||
<div class="product-img-hover product-img-1" >
|
<div class="product-img-hover top40" >
|
||||||
<!-- style="width:70%"-->
|
<!-- 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>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
{/notempty}
|
{/notempty}
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
/* 核心模块：固定90%宽度（PC端），优化移动端边距 */
|
/* 核心模块：固定90%宽度（PC端），优化移动端边距 */
|
||||||
.advantage-section {
|
.advantage-section {
|
||||||
width: 90%;
|
width: 93.5%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 4rem 0 3rem 0;
|
padding: clamp(4rem, 5vw, 6rem) 0 clamp(1.8rem, 3vw, 3rem) 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
height: auto !important;
|
height: auto !important;
|
||||||
@@ -11,12 +11,15 @@
|
|||||||
|
|
||||||
/* 标题容器：恢复原有居中样式 */
|
/* 标题容器：恢复原有居中样式 */
|
||||||
.advantage-section__title {
|
.advantage-section__title {
|
||||||
font-size: clamp(1.5rem, 3vw, 2rem);
|
font-size: clamp(2rem, 3vw, 2.4rem);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #333;
|
color: #333;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
|
margin:0 auto;
|
||||||
margin-bottom: clamp(1.5rem, 2vw, 2.5rem);
|
margin-bottom: clamp(1.5rem, 2vw, 2.5rem);
|
||||||
|
width: 80%;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 列表容器：强制设置高度相关属性，确保内容正常显示 */
|
/* 列表容器：强制设置高度相关属性，确保内容正常显示 */
|
||||||
@@ -74,7 +77,7 @@
|
|||||||
/* 文字区域：flex垂直分布，确保标题和描述都垂直居中 */
|
/* 文字区域：flex垂直分布，确保标题和描述都垂直居中 */
|
||||||
.advantage-card__content {
|
.advantage-card__content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: clamp(0.3rem, 0.4vw, 0.75rem);
|
padding: clamp(1rem,3vw, 1.5rem);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -94,7 +97,7 @@
|
|||||||
|
|
||||||
/* 卡片标题：居左显示 */
|
/* 卡片标题：居左显示 */
|
||||||
.advantage-card__heading {
|
.advantage-card__heading {
|
||||||
font-size: clamp(0.85rem, 1.5vw, 1.4rem);
|
font-size: clamp(16px, 1.5vw, 32px);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #333;
|
color: #333;
|
||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
@@ -122,18 +125,26 @@
|
|||||||
transform: translateX(3px);
|
transform: translateX(3px);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 描述文字：水平+垂直居中，与标题容器对齐 */
|
/* 描述文字：水平+垂直居中，与标题容器对齐，设置最小高度统一占位 */
|
||||||
.advantage-card__description {
|
.advantage-card__description {
|
||||||
font-size: clamp(0.6rem, 0.9vw, 0.9rem);
|
font-size: clamp(10px, 1vw, 18px);
|
||||||
color: #78787a;
|
line-height: 1.2;
|
||||||
line-height: 1.2;
|
width: 80%;
|
||||||
white-space: normal;
|
color: #666666;
|
||||||
overflow: hidden;
|
/* 强制固定2行显示 */
|
||||||
width: 80%;
|
display: -webkit-box;
|
||||||
display: -webkit-box;
|
-webkit-line-clamp: 2;
|
||||||
-webkit-line-clamp: 2;
|
-webkit-box-orient: vertical;
|
||||||
-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效果 */
|
/* 卡片hover效果 */
|
||||||
@@ -194,127 +205,107 @@
|
|||||||
transform-origin: left center;
|
transform-origin: left center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* iPad Pro适配：和移动端一样一行展示2个，最后一个隐藏，字体放大 */
|
/* 平板端和移动端统一布局：第一行2个，第二行3个 */
|
||||||
@media (max-width: 1024px) and (min-width: 768px) {
|
@media (max-width: 1024px) {
|
||||||
.advantage-section__list {
|
/* 列表容器：flex布局+换行，左对齐确保排列规则，仅保留列间距 */
|
||||||
display: block !important;
|
.advantage-section__list {
|
||||||
width: 100% !important;
|
display: flex !important;
|
||||||
height: auto !important;
|
flex-wrap: wrap !important;
|
||||||
overflow: hidden !important;
|
justify-content: flex-start !important;
|
||||||
padding: 0 !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;
|
.advantage-card-wrap {
|
||||||
float: left !important;
|
display: block !important;
|
||||||
margin: 0 0 15px 0 !important;
|
height: auto !important;
|
||||||
height: auto !important;
|
min-height: 1px !important;
|
||||||
}
|
margin-bottom: 0 !important; /* 移除额外margin */
|
||||||
|
}
|
||||||
|
|
||||||
.advantage-card-wrap:nth-child(odd) {
|
/* 第一行2个卡片：宽度=(100% - 1个间距)/2 */
|
||||||
margin-right: 15px !important;
|
.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 {
|
/* 第二行3个卡片：宽度=(100% - 2个间距)/3 */
|
||||||
width: 100% !important;
|
.advantage-card-wrap:nth-child(3),
|
||||||
min-width: 100% !important;
|
.advantage-card-wrap:nth-child(4),
|
||||||
max-width: 100% !important;
|
.advantage-card-wrap:nth-child(5) {
|
||||||
flex: none !important;
|
width: calc((100% - 2 * clamp(0.3rem, 1.5vw, 0.8rem)) / 3) !important;
|
||||||
height: auto !important;
|
}
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 只显示前4个卡片，最后一个隐藏 */
|
/* 卡片核心：宽度继承父容器，高度自适应 */
|
||||||
.advantage-card-wrap:nth-child(n+5) {
|
.advantage-card {
|
||||||
display: none !important;
|
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 {
|
.advantage-card__img {
|
||||||
width: 100%;
|
aspect-ratio: 1 / 1;
|
||||||
flex-grow: 1;
|
}
|
||||||
padding: clamp(1rem, 3vw, 1.5rem) 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.advantage-card__img {
|
.advantage-card__content {
|
||||||
aspect-ratio: 1 / 1;
|
flex-grow: 1;
|
||||||
max-height: 330px;
|
padding: clamp(1.2rem, 3vw, 2rem) 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 平板端字体放大 */
|
/* 平板端字体稍大 */
|
||||||
.advantage-card__heading {
|
.advantage-card__heading {
|
||||||
font-size: clamp(1.1rem, 2vw, 1.6rem);
|
font-size: clamp(16px, 3vw, 20px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.advantage-card__description {
|
.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 {
|
.card-arrow {
|
||||||
width: clamp(1.2rem, 2vw, 1.7rem);
|
width: clamp(1.17rem, 2.5vw, 2.2rem);
|
||||||
height: clamp(1.2rem, 2vw, 1.7rem);
|
height: clamp(1.17rem, 2.5vw, 2.2rem);
|
||||||
font-size: clamp(0.9rem, 1.5vw, 1.3rem);
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 移动端布局调整：彻底修复高度为0问题 */
|
/* 移动端进一步优化间距 */
|
||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
/* 使用block布局+浮动确保高度正常 */
|
.advantage-section__list {
|
||||||
.advantage-section__list {
|
gap: clamp(0.2rem, 1vw, 0.5rem) !important; /* 进一步缩小列间距 */
|
||||||
display: block !important;
|
row-gap: clamp(0.3rem, 1.5vw, 0.8rem) !important; /* 进一步缩小行间距 */
|
||||||
width: 100% !important;
|
}
|
||||||
height: auto !important;
|
|
||||||
overflow: hidden !important;
|
|
||||||
padding: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 卡片包裹容器：使用浮动实现一行2个 */
|
.advantage-card-wrap:nth-child(1),
|
||||||
.advantage-card-wrap {
|
.advantage-card-wrap:nth-child(2) {
|
||||||
width: calc(50% - 7.5px) !important;
|
width: calc((100% - clamp(0.2rem, 1vw, 0.5rem)) / 2) !important;
|
||||||
float: left !important;
|
}
|
||||||
margin: 0 0 15px 0 !important;
|
|
||||||
height: auto !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 偶数个卡片添加右边距 */
|
.advantage-card-wrap:nth-child(3),
|
||||||
.advantage-card-wrap:nth-child(odd) {
|
.advantage-card-wrap:nth-child(4),
|
||||||
margin-right: 15px !important;
|
.advantage-card-wrap:nth-child(5) {
|
||||||
}
|
width: calc((100% - 2 * clamp(0.2rem, 1vw, 0.5rem)) / 3) !important;
|
||||||
|
}
|
||||||
|
|
||||||
/* 卡片尺寸调整 */
|
.advantage-card__description {
|
||||||
.advantage-card {
|
min-height: clamp(20px, 4.5vw, 26px);
|
||||||
width: 100% !important;
|
color:#666666;
|
||||||
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; /* 平板端底部内边距稍大 */
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 超小屏进一步优化 */
|
/* 超小屏优化 */
|
||||||
@media (max-width: 374px) {
|
@media (max-width: 374px) {
|
||||||
.advantage-card-wrap {
|
.advantage-card__description {
|
||||||
width: calc(50% - 5px) !important;
|
min-height: clamp(18px, 4vw, 24px);
|
||||||
}
|
color:#666666;
|
||||||
|
}
|
||||||
.advantage-card-wrap:nth-child(odd) {
|
|
||||||
margin-right: 10px !important;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@@ -3,7 +3,7 @@
|
|||||||
padding: 3rem 0;
|
padding: 3rem 0;
|
||||||
}
|
}
|
||||||
.prodline-footer-box-img {
|
.prodline-footer-box-img {
|
||||||
width: 90%;
|
width: 93.5%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
.prodline-footer-box-img img {
|
.prodline-footer-box-img img {
|
||||||
|
|||||||
@@ -11,17 +11,30 @@ html {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* 平板端（768px~1023px）：15px→16px（过渡，最小15px） */
|
/* 平板端（768px~1023px）：15px→16px（过渡，最小15px） */
|
||||||
@media (max-width: 1023px) and (min-width: 768px) {
|
@media (max-width: 1024px) and (min-width: 768px) {
|
||||||
html {
|
html {
|
||||||
font-size: calc(15px + (16 - 15) * (100vw - 768px) / (1023 - 768));
|
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） */
|
/* 移动端（320px~767px）：固定14px（不随屏幕缩小而变小，避免文字<12px） */
|
||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
html {
|
html {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
html body {
|
||||||
|
margin: 0 !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
width:100vw !important;
|
||||||
|
max-width: 100vw !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 超小屏（≤320px）：仍固定14px，彻底杜绝文字过小 */
|
/* 超小屏（≤320px）：仍固定14px，彻底杜绝文字过小 */
|
||||||
@@ -29,6 +42,12 @@ html {
|
|||||||
html {
|
html {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
html body {
|
||||||
|
margin: 0 !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
width:100vw !important;
|
||||||
|
max-width: 100vw !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
background: rgb(242, 243, 245);
|
background: rgb(242, 243, 245);
|
||||||
@@ -39,10 +58,10 @@ a {
|
|||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
.more {
|
.more {
|
||||||
width: 90%;
|
width: 93.5%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: center;
|
||||||
padding-top: clamp(1.5rem, 3vw, 3rem);
|
padding-top: clamp(1.5rem, 3vw, 3rem);
|
||||||
}
|
}
|
||||||
.more-img {
|
.more-img {
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
.nav-box {
|
.nav-box {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
width: 90%;
|
width: 93.5%;
|
||||||
/* 平板/PC端限制最大宽度 */
|
/* 平板/PC端限制最大宽度 */
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
@@ -11,9 +11,10 @@
|
|||||||
/* 2px→0.125rem，15px→0.9375rem */
|
/* 2px→0.125rem，15px→0.9375rem */
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
padding: 0.625rem 0;
|
/* padding: 0.625rem 0; */
|
||||||
/* 10px→0.625rem（原内边距不变） */
|
/* 10px→0.625rem（原内边距不变） */
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
|
padding: 0 clamp(21px, 5.6vw, 42px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-item {
|
.nav-item {
|
||||||
@@ -23,7 +24,7 @@
|
|||||||
gap: 0.625rem;
|
gap: 0.625rem;
|
||||||
/* 10px→0.625rem */
|
/* 10px→0.625rem */
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 0.625rem 0 1.25rem;
|
|
||||||
/* 10px→0.625rem，20px→1.25rem */
|
/* 10px→0.625rem，20px→1.25rem */
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
@@ -33,11 +34,14 @@
|
|||||||
max-width: 5rem;
|
max-width: 5rem;
|
||||||
/* 80px→5rem */
|
/* 80px→5rem */
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
padding: 0 c;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-item img {
|
.nav-item img {
|
||||||
width: 4rem;
|
width: 100%;
|
||||||
height: 4rem;
|
/* clamp(4rem, 5.6vw, 8rem) 4rem; */
|
||||||
|
/* height: 4rem; */
|
||||||
|
max-width: 98px;
|
||||||
/* 60px→3.75rem（16px基准），14px根字体下≈52.5px，仍清晰 */
|
/* 60px→3.75rem（16px基准），14px根字体下≈52.5px，仍清晰 */
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
border-radius: 0.75rem;
|
border-radius: 0.75rem;
|
||||||
@@ -65,23 +69,22 @@
|
|||||||
.nav-item p {
|
.nav-item p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
/* PC端：15px→0.9375rem（16px根字体） */
|
/* PC端：15px→0.9375rem（16px根字体） */
|
||||||
font-size: 0.9375rem;
|
font-size: clamp(12px, 3vw, 1.3125rem);
|
||||||
color: #37373e;
|
color: #1E1E1E;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
position: relative;
|
|
||||||
z-index: 3;
|
|
||||||
top: 1.125rem;
|
|
||||||
/* 18px→1.125rem */
|
/* 18px→1.125rem */
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
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） */
|
/* 平板端文字：14px→0.9375rem（15px根字体下=14px） */
|
||||||
@media (max-width: 1023px) and (min-width: 768px) {
|
@media (max-width: 1023px) and (min-width: 768px) {
|
||||||
.nav-item p {
|
.nav-item p {
|
||||||
font-size: 0.9375rem;
|
font-size: clamp(12px, 3vw, 1.3125rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.product-title {
|
.product-title {
|
||||||
width: 90%;
|
width: 93.5%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding-bottom: clamp(1.5rem, 3vw, 3rem);
|
padding-bottom: clamp(1.5rem, 3vw, 3rem);
|
||||||
}
|
}
|
||||||
@@ -26,7 +26,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
gap: clamp(0.4rem, 1vw, 0.71rem);
|
gap: clamp(0.4rem, 1vw, 0.71rem);
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
width: 90%;
|
width: 93.5%;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -46,28 +46,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* 悬浮图公共样式：两个产品尺寸完全一致（100%宽度） */
|
/* 悬浮图公共样式：两个产品尺寸完全一致（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 {
|
.product-img-2 {
|
||||||
@@ -139,10 +122,11 @@
|
|||||||
opacity: 1;
|
opacity: 1;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
/* PC端适配：仅微调定位参数，尺寸不变 */
|
|
||||||
@media (min-width: 1024px) {
|
/* PC端适配：仅1024px以上应用PC样式 */
|
||||||
|
@media (min-width: 1025px) {
|
||||||
.product-container {
|
.product-container {
|
||||||
width: 90%;
|
width: 93.5%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-left {
|
.product-left {
|
||||||
@@ -153,32 +137,142 @@
|
|||||||
flex: 5;
|
flex: 5;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 宽度保持一致，仅调定位偏移 */
|
|
||||||
.product-img-1 {
|
|
||||||
top: -11%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-img-2 {
|
.product-img-2 {
|
||||||
top: -12%;
|
top: -12%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 超小屏适配：尺寸不变，微调定位 */
|
/* 移动端+平板端适配（1024px以下）：统一样式表现 */
|
||||||
@media (max-width: 375px) {
|
@media (max-width: 1024px) {
|
||||||
.product-left {
|
.product-container {
|
||||||
flex: 1.5;
|
flex-direction: column-reverse; /* 反转列顺序，右在上左在下 */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.product-left, .product-right {
|
||||||
|
flex: none; /* 重置flex比例 */
|
||||||
|
width: 100%; /* 宽度铺满 */
|
||||||
|
}
|
||||||
|
|
||||||
.product-right {
|
.product-right {
|
||||||
flex: 3.5;
|
align-self: auto; /* 重置对齐方式 */
|
||||||
|
aspect-ratio: 16/9;
|
||||||
|
min-height: 194px;
|
||||||
}
|
}
|
||||||
|
.product-img {
|
||||||
/* 宽度仍保持一致 */
|
/* max-height: 202px;
|
||||||
.product-img-1 {
|
object-fit: contain; */
|
||||||
top: -6%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
/* 悬浮图容器宽高与图片一致 */
|
||||||
|
.product-img-hover {
|
||||||
|
width: auto; /* 宽度由图片决定 */
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 33;
|
||||||
|
}
|
||||||
.product-img-2 {
|
.product-img-2 {
|
||||||
top: -8%;
|
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 {
|
.product-card-box {
|
||||||
width: 90%;
|
width: 93.5%;
|
||||||
margin: clamp(1rem, 2vw, 1.5rem) auto 0;
|
margin: clamp(0.7rem, 2vw, 1.5rem) auto 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -24,7 +24,7 @@
|
|||||||
/* ######################################################################### */
|
/* ######################################################################### */
|
||||||
/* 移动端+平板样式（max-width: 1023px）- 后续修改仅改这里 */
|
/* 移动端+平板样式（max-width: 1023px）- 后续修改仅改这里 */
|
||||||
/* ######################################################################### */
|
/* ######################################################################### */
|
||||||
@media (max-width: 1023px) {
|
@media (max-width: 1024px) {
|
||||||
/* 卡片容器：移动端+平板特有 - 改为wrap换行，一行2个，高度自适应 */
|
/* 卡片容器：移动端+平板特有 - 改为wrap换行，一行2个，高度自适应 */
|
||||||
.product-card-container {
|
.product-card-container {
|
||||||
align-items: flex-start; /* 改为flex-start，避免拉伸 */
|
align-items: flex-start; /* 改为flex-start，避免拉伸 */
|
||||||
@@ -95,11 +95,12 @@
|
|||||||
padding-left: clamp(0.8rem, 2vw, 1.5rem);
|
padding-left: clamp(0.8rem, 2vw, 1.5rem);
|
||||||
padding-right: clamp(0.8rem, 2vw, 1.5rem);
|
padding-right: clamp(0.8rem, 2vw, 1.5rem);
|
||||||
height: auto !important; /* 高度自适应 */
|
height: auto !important; /* 高度自适应 */
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 标题样式：移动端+平板特有，高度自适应 */
|
/* 标题样式：移动端+平板特有，高度自适应 */
|
||||||
.product-card-title {
|
.product-card-title {
|
||||||
font-size: clamp(0.8rem, 1.3vw, 1.2rem);
|
font-size: clamp(15px, 1.5vw, 30px);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #333;
|
color: #333;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
@@ -108,11 +109,12 @@
|
|||||||
height: auto !important; /* 移除固定高度 */
|
height: auto !important; /* 移除固定高度 */
|
||||||
margin-bottom: clamp(0.2rem, 0.4vw, 0.3rem); /* 添加间距 */
|
margin-bottom: clamp(0.2rem, 0.4vw, 0.3rem); /* 添加间距 */
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 描述样式：移动端+平板高度自适应 */
|
/* 描述样式：移动端+平板高度自适应 */
|
||||||
.product-card-desc {
|
.product-card-desc {
|
||||||
font-size: clamp(0.7rem, 1.1vw, 0.9rem);
|
font-size: clamp(11px, 1.5vw,21px);
|
||||||
color: #656565;
|
color: #656565;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
height: auto !important; /* 移除固定高度 */
|
height: auto !important; /* 移除固定高度 */
|
||||||
@@ -121,23 +123,30 @@
|
|||||||
-webkit-line-clamp: 2;
|
-webkit-line-clamp: 2;
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 链接图标容器：移动端+平板高度自适应，添加较小的底部内边距 */
|
/* 链接图标容器：移动端+平板高度自适应，添加较小的底部内边距 */
|
||||||
.product-card-link {
|
.product-card-link {
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
width: 100%;
|
||||||
flex: 0 0 auto; /* 改为auto，高度自适应 */
|
display: flex;
|
||||||
padding: clamp(0.5rem, 1vw, 0.8rem); /* 减小上下内边距 */
|
align-items: center;
|
||||||
padding-bottom: clamp(1rem, 3vw, 1.5rem); /* 更小的底部内边距（约12px） */
|
justify-content: center; /* 水平居中 */
|
||||||
padding-left: clamp(0.8rem, 2vw, 1.5rem);
|
flex: 0 0 auto;
|
||||||
height: auto !important; /* 高度自适应 */
|
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 {
|
.product-card-link img {
|
||||||
width: clamp(2.5rem, 5vw, 4.5rem);
|
width: clamp(5.5rem, 5vw,8.5rem);
|
||||||
height: auto;
|
height: auto;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
@@ -154,15 +163,18 @@
|
|||||||
|
|
||||||
/* 平板端字体稍大 */
|
/* 平板端字体稍大 */
|
||||||
.product-card-title {
|
.product-card-title {
|
||||||
font-size: clamp(1rem, 1.5vw, 1.4rem);
|
font-size: clamp(15px, 1.5vw, 30px);
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-card-desc {
|
.product-card-desc {
|
||||||
font-size: clamp(0.85rem, 1.2vw, 1rem);
|
font-size: clamp(11px, 1.5vw,21px);
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 平板端底部内边距稍大但仍较小 */
|
/* 平板端底部内边距稍大但仍较小 */
|
||||||
.product-card-link {
|
.product-card-link {
|
||||||
|
min-width: 90px;
|
||||||
padding-bottom: clamp(1rem, 3vw, 1.5rem);
|
padding-bottom: clamp(1rem, 3vw, 1.5rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -238,9 +250,9 @@
|
|||||||
|
|
||||||
/* 标题样式：PC端特有，高度自适应 */
|
/* 标题样式：PC端特有，高度自适应 */
|
||||||
.product-card-title {
|
.product-card-title {
|
||||||
font-size: clamp(0.8rem, 1.3vw, 1.2rem);
|
font-size: clamp(15px, 1.5vw, 30px);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #333;
|
color: #101010;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
@@ -253,7 +265,7 @@
|
|||||||
|
|
||||||
/* 描述样式：PC端高度自适应 */
|
/* 描述样式：PC端高度自适应 */
|
||||||
.product-card-desc {
|
.product-card-desc {
|
||||||
font-size: clamp(0.7rem, 1.1vw, 0.9rem);
|
font-size: clamp(11px, 1.5vw,21px);
|
||||||
color: #656565;
|
color: #656565;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
height: auto !important; /* 高度自适应 */
|
height: auto !important; /* 高度自适应 */
|
||||||
@@ -262,6 +274,7 @@
|
|||||||
-webkit-line-clamp: 2;
|
-webkit-line-clamp: 2;
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 链接图标容器：PC端高度自适应，添加较小的底部内边距 */
|
/* 链接图标容器：PC端高度自适应，添加较小的底部内边距 */
|
||||||
|
|||||||
@@ -5,8 +5,8 @@
|
|||||||
.auto-swiper-container {
|
.auto-swiper-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
/* 关键：高度 = 视口高度的百分比（可调整，如60vh=屏幕高度60%） */
|
/* 关键：高度 = 视口高度的百分比（可调整，如60vh=屏幕高度60%） */
|
||||||
margin-bottom: 5.625rem;
|
margin-bottom: 5.7rem;
|
||||||
max-height: 900px;
|
/* max-height: 900px; */
|
||||||
min-height: 300px;
|
min-height: 300px;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-top:60px;
|
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