jsasg/orico-official-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

修复bug

Browse Source
This commit is contained in:
liqian
2025-11-27 09:42:18 +08:00
parent 0ff0b17f7a
commit 1c2d09fa6c
10 changed files with 546 additions and 459 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/static/index/pc/css/topic_power_prodline/index.css
View File

@@ -63,6 +63,7 @@ a {
.header {
width: 100%;
background: #fff;
height: 60px;
}
.header-img {
margin: 0 auto;

298
public/static/index/pc/css/topic_power_prodline/product.css
View File

@@ -1,151 +1,147 @@
.product-box {
background: #fff;
padding: clamp(1.5rem, 3vw, 3rem) 0;
/* 产品块之间留间距 */
}
.product-title {
width: 90%;
margin: 0 auto;
padding-bottom: clamp(1.5rem, 3vw, 3rem);
}
.product-title-h2 {
font-size: clamp(1.5rem, 3vw, 2.25rem);
/* padding-top: clamp(1.5rem, 3vw, 3rem); */
}
.product-title-p {
font-size: clamp(0.875rem, 1.5vw, 1.125rem);
color: #646464;
margin-top: clamp(0.5rem, 1vw, 0.75rem);
}
/* 容器布局：两个产品通用 */
.product-container {
display: flex;
gap: clamp(0.4rem, 1vw, 0.71rem);
margin: 0 auto;
width: 90%;
align-items: flex-start;
}
/* 左侧容器：两个产品通用 */
.product-left {
flex: 1.8;
position: relative;
width: 100%;
}
.product-img {
width: 100%;
height: auto;
border-radius: 10px;
display: block;
/* 取消图片底部空隙 */
}
/* 悬浮图公共样式：两个产品尺寸完全一致（100%宽度） */
.product-img-hover {
position: absolute;
width: 100%;
/* 两个产品悬浮图宽度相同 */
z-index: 1;
}
.product-img-hover img {
width: 100%;
/*max-width: 340px;*/
/* 图片尺寸100%，无区别 */
height: auto;
/* max-height: 70%; */
border-radius: 10px;
}
/* 第一个产品：悬浮图居中上移（仅定位差异） */
.product-img-1 {
top: -10%;
left: 50%;
transform: translateX(-50%);
}
/* 第二个产品：悬浮图上右超出（仅定位差异） */
.product-img-2 {
top: -10%;
/* 上超出 */
transform: none;
width: 108%;
/* 取消居中 */
}
/* 右侧容器：两个产品通用 */
.product-right {
flex: 3.2;
position: relative;
border-radius: 10px;
overflow: hidden;
width: 100%;
background-color: #f5f5f5;
align-self: stretch;
}
.right-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.3s ease;
}
.right-video {
display: none;
}
/* PC端适配：仅微调定位参数，尺寸不变 */
@media (min-width: 1024px) {
.product-container {
width: 90%;
}
.product-left {
flex: 2;
}
.product-right {
flex: 5;
}
/* 宽度保持一致，仅调定位偏移 */
.product-img-1 {
top: -11%;
}
.product-img-2 {
top: -12%;
}
}
/* 超小屏适配：尺寸不变，微调定位 */
@media (max-width: 375px) {
.product-left {
flex: 1.5;
}
.product-right {
flex: 3.5;
}
/* 宽度仍保持一致 */
.product-img-1 {
top: -6%;
}
.product-img-2 {
top: -8%;
}
}
.product-box {
background: #fff;
padding: clamp(1.5rem, 3vw, 3rem) 0;
/* 产品块之间留间距 */
}
.product-title {
width: 90%;
margin: 0 auto;
padding-bottom: clamp(1.5rem, 3vw, 3rem);
}
.product-title-h2 {
font-size: clamp(1.5rem, 3vw, 2.25rem);
/* padding-top: clamp(1.5rem, 3vw, 3rem); */
}
.product-title-p {
font-size: clamp(0.875rem, 1.5vw, 1.125rem);
color: #646464;
margin-top: clamp(0.5rem, 1vw, 0.75rem);
}
/* 容器布局：两个产品通用 */
.product-container {
display: flex;
gap: clamp(0.4rem, 1vw, 0.71rem);
margin: 0 auto;
width: 90%;
align-items: flex-start;
}
/* 左侧容器：两个产品通用 */
.product-left {
flex: 1.8;
position: relative;
width: 100%;
}
.product-img {
width: 100%;
height: auto;
border-radius: 10px;
display: block;
/* 取消图片底部空隙 */
}
/* 悬浮图公共样式：两个产品尺寸完全一致（100%宽度） */
.product-img-hover {
position: absolute;
width: 100%;
/* 两个产品悬浮图宽度相同 */
z-index: 1;
}
.product-img-hover img {
width: 100%;
/* 图片尺寸100%，无区别 */
height: auto;
/* max-height: 70%; */
border-radius: 10px;
}
/* 第一个产品：悬浮图居中上移（仅定位差异） */
.product-img-1 {
top: -10%;
left: 50%;
transform: translateX(-50%);
}
/* 第二个产品：悬浮图上右超出（仅定位差异） */
.product-img-2 {
top: -10%;
/* 上超出 */
transform: none;
width: 108%;
/* 取消居中 */
}
/* 右侧容器：两个产品通用 */
.product-right {
flex: 3.2;
position: relative;
border-radius: 10px;
overflow: hidden;
width: 100%;
background-color: #f5f5f5;
align-self: stretch;
}
.right-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.3s ease;
}
.right-video {
display: none;
}
/* PC端适配：仅微调定位参数，尺寸不变 */
@media (min-width: 1024px) {
.product-container {
width: 90%;
}
.product-left {
flex: 2;
}
.product-right {
flex: 5;
}
/* 宽度保持一致，仅调定位偏移 */
.product-img-1 {
top: -11%;
}
.product-img-2 {
top: -12%;
}
}
/* 超小屏适配：尺寸不变，微调定位 */
@media (max-width: 375px) {
.product-left {
flex: 1.5;
}
.product-right {
flex: 3.5;
}
/* 宽度仍保持一致 */
.product-img-1 {
top: -6%;
}
.product-img-2 {
top: -8%;
}
}

13
public/static/index/pc/css/topic_power_prodline/swiper.css
View File

@@ -1,12 +1,13 @@
/* 轮播容器 - 核心：基于视口高度自适应 */
.auto-swiper-container {
width: 100%;
/* 关键：高度 = 视口高度的百分比（可调整，如60vh=屏幕高度60%） */
margin-bottom: 5.625rem;
max-height: 900px;
min-height: 300px;
position: relative;
}
/* 轮播项 - 填充容器高度 */
.auto-swiper-slide {
width: 100%;
@@ -24,7 +25,7 @@
height: 100%;
object-fit: contain; /* 替换 cover 为 contain，完整显示图片 */
display: block;
background-color: #f5f5f5; /* 图片未填充区域用浅色背景，避免黑边 */
}
/* 轮播容器保持相对定位 */
@@ -45,9 +46,9 @@
bottom: 10%; /* 距离底部的距离，可调整 */
left: 50%;
transform: translateX(-50%);
width:100%;
display: flex;
justify-content: center;
/* width:100%;
display: flex; */
/* justify-content: center; */
z-index: 10;
}