电力
This commit is contained in:
@@ -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效果(仅保留缩放,阴影移到外层) */
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
/* 宽度保持一致,仅调定位偏移 */
|
||||
|
||||
@@ -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 */
|
||||
}
|
||||
|
||||
@@ -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=16px,3.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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user