This commit is contained in:
2025-11-28 14:18:19 +08:00
parent ee86f7473c
commit 59a9749e31
13 changed files with 753 additions and 471 deletions

View File

@@ -25,9 +25,10 @@
/* 列表容器优化gap确保移动端5列不溢出 */
.advantage-section__list {
display: flex;
justify-content: center;
justify-content: space-between;
align-items: flex-start;
gap: clamp(0.1rem, 0.3vw, 0.8rem);
/* gap: clamp(0.1rem, 0.3vw, 0.8rem); */
width: 100%;
flex-wrap: nowrap;
overflow: hidden;
@@ -152,7 +153,7 @@
display: flex;
align-items: center;
justify-content: left;
margin-top:clamp(10px, 0.9vw, 30px)
margin-top:clamp(9px, 0.5vw, 18px)
}
/* 卡片hover效果仅保留缩放阴影移到外层 */

View File

@@ -43,9 +43,11 @@ a {
margin: 0 auto;
display: flex;
justify-content: flex-end;
padding: 40px 0;
max-width: 1690px;
/* padding: 40px 0; */
/* padding-top: clamp(1.5rem, 3vw, 3rem); */
}
.more-img {
background: #000;
color: #fff;

View File

@@ -15,7 +15,7 @@
/* 字体大小小屏最小30px大屏最大50px中间按视口宽度自适应 */
font-size: clamp(30px, 4vw, 50px);
/* 顶部内边距小屏最小80px大屏最大160px自适应缩放 */
padding-top: clamp(80px, 10vw, 160px);
padding-top: clamp(60px, 10vw, 110px);
/* 底部内边距小屏最小15px大屏最大30px自适应缩放 */
padding-bottom: clamp(15px, 2vw, 30px);
/* 可选:限制最大宽度并居中,优化大屏显示 */
@@ -45,6 +45,8 @@
flex: 1.8;
position: relative;
width: 100%;
max-width: 526px;
max-height: 680px;
}
.product-img {
@@ -52,6 +54,8 @@
height: auto;
border-radius: 10px;
display: block;
max-width: 526px;
max-height: 680px;
/* 取消图片底部空隙 */
}
@@ -105,12 +109,14 @@
width: 100%;
height: 100%;
object-fit: contain;
object-position: center; /* 内容居中显示(默认值) */
/* object-position: center; 内容居中显示(默认值) */
transition: opacity 0.3s ease;
}
.right-video {
display: none;
width: 100%;
object-fit: cover;
}
/* PC端适配仅微调定位参数尺寸不变 */
@@ -122,10 +128,14 @@
.product-left {
flex: 2;
max-width: 526px;
max-height: 680px;
}
.product-right {
flex: 5;
max-width: 1150px;
max-height: 680px;
}
/* 宽度保持一致,仅调定位偏移 */

View File

@@ -16,6 +16,9 @@
min-width: 180px;
max-width: 836px;
max-height:530px;
padding: 10px 0;
padding-left: clamp(30px, 3vw, 100px); ;
/* 保证图片显示 */
/* max-width: calc(50% - 10px); */
/* 适配gap */
@@ -93,7 +96,10 @@
justify-content: center;
align-items: center;
min-width: 70px; */
flex:1;
width: 100%;
/* flex:1; */
/* width:510px ;
height: 510px; */
max-width: 510px;
max-height:510px ;
/* 强制保留图片区域,避免被挤压 */
@@ -101,11 +107,11 @@
.product-card-img2 img {
width: 100%;
height: auto;
object-fit: contain
/* object-fit: contain;
/* object-fit: contain */
object-fit: contain;
max-width: 510px;
max-width: 510px; */
max-height: 510px;
/* 保持图片比例完整,不拉伸 */
}
@@ -118,8 +124,8 @@
}
.product-card-link2 img {
width: clamp(2.5rem, 5vw, 4.5rem);
height: auto;
max-width: 111px;
max-height: 19px;
object-fit: contain;
/* 清除居中margin */
}

View File

@@ -3,9 +3,11 @@
width: 90%;
/* margin: clamp(1rem, 2vw, 1.5rem) auto 0; */
margin:0 auto;
padding-top: 40px;
margin-top: 40px;
max-width: 1690px;
padding-bottom:45px;
margin-bottom:45px;
max-height: 560px;
}
.product-card-container {
@@ -18,6 +20,7 @@
/* gap: clamp(0.6rem, 1vw, 0.8rem); */
padding: 0; /* 保持无内边距,避免间距叠加 */
max-width: 1690px;
max-height: 560px;
}
/* 新增:外层容器(承载圆角、阴影、尺寸,避免缩放时圆角丢失) */
@@ -234,6 +237,7 @@
display: flex; /* 补充display: flex原代码遗漏 */
flex-direction: column;
justify-content: center;
padding-left: clamp(1.5rem, 2vw, 3rem);
}
@@ -248,6 +252,7 @@
line-height: 1.2;
display: flex;
align-items: center;
/* margin-top */
}
/* 描述样式PC端固定2行高度 clamp(0.7rem, 1.1vw, 0.9rem);*/
@@ -269,6 +274,8 @@
padding-left: clamp(1.5rem, 2vw, 3rem);
display: flex;
align-items: center;
/* max-width: 111px;
max-height:19px ; */
/* 1rem=16px3.125rem=50px */
/* padding-top: clamp(1rem, 2vw, 3.125rem);
padding-bottom: clamp(1rem, 5vw, 3.125rem); */
@@ -276,8 +283,9 @@
/* 链接图标PC端特有 */
.product-card-link img {
width: clamp(2.5rem, 5vw, 4.5rem);
height: auto;
/* width: clamp(2.5rem, 5vw, 4.5rem); */
max-width: 111px;
max-height: 19px;
object-fit: contain;
}
}