diff --git a/app/index/view/mobile/topic_power_prodline/index.html b/app/index/view/mobile/topic_power_prodline/index.html index 8a9209f8..8e00ab89 100644 --- a/app/index/view/mobile/topic_power_prodline/index.html +++ b/app/index/view/mobile/topic_power_prodline/index.html @@ -486,6 +486,7 @@ ); // passive: false 必须,否则 preventDefault 无效 const allVideos = document.querySelectorAll('.right-video'); + let scrollTimer = null; // 防抖定时器 // 停止所有视频播放 function stopAllVideos() { allVideos.forEach((video) => { @@ -496,49 +497,56 @@ if (img) img.style.display = 'block'; }); } + // 处理视频/图片切换的核心逻辑(抽离为独立函数) +// 处理视频/图片切换的核心逻辑(抽离为独立函数) +function handleVideoActive() { + const productRights = document.querySelectorAll('.product-right'); + let activeVideo = null; + // 找出当前在视口中的视频容器 + productRights.forEach((rightContainer) => { + const img = rightContainer.querySelector('.right-img'); + const video = rightContainer.querySelector('.right-video'); + const videoSrc = video.src.trim(); + if (!img || !video || !videoSrc) return; - // 滚动切换图片/视频(核心逻辑) - window.addEventListener('scroll', function () { - const productRights = document.querySelectorAll('.product-right'); - let activeVideo = null; - // 找出当前在视口中的视频容器 - productRights.forEach((rightContainer) => { - const img = rightContainer.querySelector('.right-img'); - const video = rightContainer.querySelector('.right-video'); - const videoSrc = video.src.trim() - if (!img || !video) return; - if(!videoSrc) return; - const rect = rightContainer.getBoundingClientRect(); - // 视口判断:容器进入视口50%以上视为活跃 - const isInView = - rect.top < window.innerHeight * 0.7 && - rect.bottom > window.innerHeight * 0.3; + const rect = rightContainer.getBoundingClientRect(); + // 视口判断:容器进入视口50%以上视为活跃 + const isInView = + rect.top < window.innerHeight * 0.7 && + rect.bottom > window.innerHeight * 0.3; - if (isInView) { - activeVideo = video; - } - }); - - // 处理活跃视频 - if (activeVideo) { - stopAllVideos(); // 先停止其他视频 - const img = activeVideo.parentElement.querySelector('.right-img'); - img.style.display = 'none'; - activeVideo.style.display = 'block'; - - // 自动播放(兼容原生控制栏,用户手动暂停后不会强制播放) - if (activeVideo.paused) { - activeVideo.play().catch((err) => { - console.log('视频播放失败(浏览器限制):', err); - // 播放失败时回退到图片 - activeVideo.style.display = 'none'; - img.style.display = 'block'; - }); - } - } else { - stopAllVideos(); // 无活跃视频时停止所有播放 - } + if (isInView) { + activeVideo = video; + } }); + + // 处理活跃视频 + if (activeVideo) { + stopAllVideos(); // 先停止其他视频 + const img = activeVideo.parentElement.querySelector('.right-img'); + img.style.display = 'none'; + activeVideo.style.display = 'block'; + + // 自动播放(兼容原生控制栏,用户手动暂停后不会强制播放) + if (activeVideo.paused) { + activeVideo.play().catch((err) => { + console.log('视频播放失败(浏览器限制):', err); + // 播放失败时回退到图片 + activeVideo.style.display = 'none'; + img.style.display = 'block'; + }); + } + } else { + stopAllVideos(); // 无活跃视频时停止所有播放 + } +} + // 滚动事件:添加防抖(移动端推荐100-200ms延迟) +window.addEventListener('scroll', function () { + // 清除上一次的定时器 + clearTimeout(scrollTimer); + // 滚动停止后150ms再执行核心逻辑 + scrollTimer = setTimeout(handleVideoActive, 150); +}); window.onload = function () { @@ -549,10 +557,10 @@ swiper = new Swiper('.auto-swiper-container', { autoplay: { - delay: 113000, // 3秒切换 + delay: 3000, // 3秒切换 disableOnInteraction: false, }, - loop: true, + loop: false, slidesPerView: 1, spaceBetween: 0, // 启用分页指示标(核心配置) @@ -582,4 +590,4 @@ -{/block} \ No newline at end of file +{/block} diff --git a/app/index/view/pc/topic_power_prodline/index.html b/app/index/view/pc/topic_power_prodline/index.html index 595bbc99..4d7bd28d 100644 --- a/app/index/view/pc/topic_power_prodline/index.html +++ b/app/index/view/pc/topic_power_prodline/index.html @@ -549,10 +549,10 @@ swiper = new Swiper('.auto-swiper-container', { autoplay: { - delay: 113000, // 3秒切换 + delay: 3000, // 3秒切换 disableOnInteraction: false, }, - loop: true, + loop: false, slidesPerView: 1, spaceBetween: 0, // 启用分页指示标(核心配置) diff --git a/public/static/index/mobile/css/topic_power_prodline/advantage.css b/public/static/index/mobile/css/topic_power_prodline/advantage.css index 79274690..67dbfd1e 100644 --- a/public/static/index/mobile/css/topic_power_prodline/advantage.css +++ b/public/static/index/mobile/css/topic_power_prodline/advantage.css @@ -1,231 +1,254 @@ /* 核心模块:固定90%宽度(PC端),优化移动端边距 */ .advantage-section { - width: 90%; - margin: 0 auto; - padding: 4rem 0 3rem 0; - position: relative; - z-index: 1; + width: 90%; + margin: 0 auto; + padding: 2rem 0; + position: relative; + z-index: 1; } /* 标题容器:恢复原有居中样式 */ .advantage-section__title { - font-size: clamp(1.5rem, 3vw, 2rem); - font-weight: 700; - text-align: center; - color: #333; - line-height: 1.2; - margin-bottom: clamp(1.5rem, 2vw, 2.5rem); + font-size: clamp(1.5rem, 3vw, 2rem); + font-weight: 700; + text-align: center; + color: #333; + line-height: 1.2; + margin-bottom: clamp(1.5rem, 2vw, 2.5rem); } /* 列表容器:优化gap,确保移动端5列不溢出 */ .advantage-section__list { - display: flex; - justify-content: center; - align-items: flex-start; - gap: clamp(0.1rem, 0.3vw, 0.8rem); - width: 100%; - flex-wrap: nowrap; - overflow: hidden; - padding: 0 0.1rem; + display: flex; + justify-content: center; + align-items: flex-start; + gap: clamp(0.1rem, 0.3vw, 0.8rem); + width: 100%; + flex-wrap: nowrap; + overflow: hidden; + padding: 0 0.1rem; +} + +/* 新增:卡片外层容器(专门控制圆角,避免缩放时丢失) */ +.advantage-card-wrap { + flex: 0 0 calc((100% - 4 * clamp(0.1rem, 0.3vw, 0.8rem)) / 5); + min-width: calc((100% - 4 * clamp(0.1rem, 0.3vw, 0.8rem)) / 5); + max-width: calc((100% - 4 * clamp(0.1rem, 0.3vw, 0.8rem)) / 5); + border-radius: 0.5rem; /* 外层容器承担圆角 */ + overflow: hidden; /* 裁剪内部缩放的卡片 */ + box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1); /* 阴影移到外层,避免缩放时阴影变形 */ + position: relative; + z-index: 1; + aspect-ratio: 1 / 1.7; } /* 卡片核心:优化宽高比和尺寸计算 */ .advantage-card { - flex: 0 0 calc((100% - 4 * clamp(0.1rem, 0.3vw, 0.8rem)) / 5); - min-width: calc((100% - 4 * clamp(0.1rem, 0.3vw, 0.8rem)) / 5); - max-width: calc((100% - 4 * clamp(0.1rem, 0.3vw, 0.8rem)) / 5); - border-radius: 0.5rem; - overflow: hidden; - box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1); - transition: transform 0.3s ease; - cursor: pointer; - background: #fff; - position: relative; - z-index: 1; - aspect-ratio: 1 / 1.7; - /* PC端卡片高度略缩短,更紧凑 */ + width: 100%; + height: 100%; + cursor: pointer; + background: #fff; + position: relative; + z-index: 1; + /* 关键修复:添加will-change优化渲染,移除原圆角和阴影(移到外层) */ + will-change: transform; /* 告知浏览器准备变换,避免圆角渲染异常 */ + transition: transform 0.3s ease; } .advantage-card__img { - width: 100%; - height: 72%; - /* PC端图片占比提升至72%,文字区域压缩 */ - object-fit: cover; - background-color: #f9f9f9; - display: block; + width: 100%; + height: 72%; + /* PC端图片占比提升至72%,文字区域压缩 */ + object-fit: cover; + background-color: #f9f9f9; + display: block; } /* 文字区域:flex垂直分布,确保标题和描述都垂直居中 */ .advantage-card__content { - width: 100%; - height: 28%; - /* PC端文字区域占比降至28% */ - padding: clamp(0.3rem, 0.4vw, 0.75rem); - display: flex; - flex-direction: column; - justify-content: center; - /* 整体垂直居中 */ - align-items: center; - /* 子元素水平居中(关键) */ - /* text-align: center; */ - flex-shrink: 0; - gap: 4px; - /* 标题和描述之间的垂直间距,避免贴边 */ + width: 100%; + height: 28%; + /* PC端文字区域占比降至28% */ + padding: clamp(0.3rem, 0.4vw, 0.75rem); + display: flex; + flex-direction: column; + justify-content: center; + /* 整体垂直居中 */ + align-items: center; + /* 子元素水平居中(关键) */ + /* text-align: center; */ + flex-shrink: 0; + gap: 4px; + /* 标题和描述之间的垂直间距,避免贴边 */ } /* 标题容器:水平居中+内部两端对齐,同时垂直居中 */ .advantage-card__heading-wrap { - display: flex; - align-items: center; - /* 内部标题和箭头垂直对齐 */ - justify-content: space-between; - /* 文字左、箭头右 */ - gap: 8px; - width: 80%; - /* 限制宽度,体现居中效果 */ - /* 移除底部margin,通过父容器gap控制间距 */ + display: flex; + align-items: center; + /* 内部标题和箭头垂直对齐 */ + justify-content: space-between; + /* 文字左、箭头右 */ + gap: 8px; + width: 80%; + /* 限制宽度,体现居中效果 */ + /* 移除底部margin,通过父容器gap控制间距 */ } /* 卡片标题:居左显示 */ .advantage-card__heading { - font-size: clamp(0.85rem, 1.5vw, 1.4rem); - /* 比原尺寸放大,PC端更醒目,移动端自适应 */ - font-weight: 600; - color: #333; - line-height: 1.3; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + font-size: clamp(0.85rem, 1.5vw, 1.4rem); + /* 比原尺寸放大,PC端更醒目,移动端自适应 */ + font-weight: 600; + color: #333; + line-height: 1.3; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } /* 卡片标题右侧箭头:居右显示 */ .card-arrow { - color: #409eff; - - /* 箭头尺寸跟随标题放大,避免不协调 */ - transition: transform 0.3s ease; - display: inline-block; - width: 24px; - /* 箭头宽度同步增加 */ - text-align: center; + color: #409eff; + font-size: clamp(0.7rem, 1vw, 1rem); + /* 箭头尺寸跟随标题放大,避免不协调 */ + transition: transform 0.3s ease; + display: inline-block; + width: 16px; + /* 箭头宽度同步增加 */ + text-align: center; } /* 卡片hover时箭头动画 */ .advantage-card:hover .card-arrow { - transform: translateX(3px); + transform: translateX(3px); } /* 描述文字:水平+垂直居中,与标题容器对齐(仅添加最小高度修复对齐问题) */ .advantage-card__description { - font-size: clamp(0.6rem, 0.9vw, 0.9rem); - /* PC端描述文字略放大 */ - color: #78787a; - line-height: 1.2; - /* PC端行高略紧凑 */ - white-space: normal; - overflow: hidden; - width: 80%; - /* 与标题容器宽度一致 */ - display: -webkit-box; - -webkit-line-clamp: 2; - /* 最多2行,避免高度溢出 */ - -webkit-box-orient: vertical; - /* 核心修复:固定最小高度=2行文字高度,确保1行时也占满空间 */ - min-height: calc(clamp(0.6rem, 0.9vw, 0.9rem) * 2 * 1.4); - /* 确保文字垂直居中 */ - display: flex; - align-items: center; - justify-content: left; + font-size: clamp(0.6rem, 0.9vw, 0.9rem); + /* PC端描述文字略放大 */ + color: #666; + line-height: 1.2; + /* PC端行高略紧凑 */ + white-space: normal; + overflow: hidden; + width: 80%; + /* 与标题容器宽度一致 */ + display: -webkit-box; + -webkit-line-clamp: 2; + /* 最多2行,避免高度溢出 */ + -webkit-box-orient: vertical; + /* 核心修复:固定最小高度=2行文字高度,确保1行时也占满空间 */ + min-height: calc(clamp(0.6rem, 0.9vw, 0.9rem) * 2 * 1.4); + /* 确保文字垂直居中 */ + display: flex; + align-items: center; + justify-content: left; } -/* 卡片hover效果 */ +/* 卡片hover效果(仅保留缩放,阴影移到外层) */ .advantage-card:hover { - transform: scale(1.03); - /* z-index: 10; */ - /* box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15); */ + transform: scale(1.03); + z-index: 10; } -/* 移动端适配 */ +/* 外层容器hover时增强阴影(更自然的浮起效果) */ +.advantage-card-wrap:hover { + box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15); +} + +/* 移动端适配 - 核心修改:一行2个,显示2行,隐藏第5个 */ @media (max-width: 767px) { - .advantage-card:active { - transform: scale(1.01); - } + .advantage-card:active { + transform: scale(1.01); + } - .advantage-section { - width: 95%; - /* 移动端扩大容器宽度 */ - } + .advantage-section { + width: 95%; + /* 移动端扩大容器宽度 */ + } - .advantage-section__list { - gap: 0.1rem; - } + .advantage-section__list { + gap: 0.5rem; /* 优化间距,更美观 */ + flex-wrap: wrap; /* 允许换行 */ + overflow: visible; /* 取消溢出隐藏,显示多行 */ + justify-content: space-between; /* 两端对齐,确保2个卡片均匀分布 */ + } - .advantage-card { - aspect-ratio: 1 / 1.8; - /* 移动端恢复更高的卡片高度 */ - } + /* 移动端卡片宽度:一行2个 */ + .advantage-card-wrap { + flex: 0 0 calc(50% - 0.25rem); /* 50%宽度减去一半间距,避免溢出 */ + min-width: calc(50% - 0.25rem); + max-width: calc(50% - 0.25rem); + aspect-ratio: 1 / 1.8; + margin-bottom: 0.5rem; /* 行与行之间的间距 */ + } - .advantage-card__img { - height: 62%; - /* 移动端图片占比回到62% */ - } + /* 隐藏第5个卡片 */ + .advantage-card-wrap:nth-child(5) { + display: none; + } - .advantage-card__content { - height: 38%; - /* 移动端文字区域占比回到38% */ - padding: 0.2rem 0.15rem; - gap: 6px; - /* 移动端间距略大,易读性更好 */ - } + .advantage-card__img { + height: 62%; + /* 移动端图片占比回到62% */ + } - /* 移动端标题容器宽度放宽 */ - .advantage-card__heading-wrap { - width: 90%; - } + .advantage-card__content { + height: 38%; + /* 移动端文字区域占比回到38% */ + padding: 0.2rem 0.15rem; + gap: 6px; + /* 移动端间距略大,易读性更好 */ + } - .advantage-card__description { - line-height: 1.2; - width: 90%; - -webkit-line-clamp: 2; - /* 移动端同步添加最小高度 */ - min-height: calc(clamp(0.5rem, 0.8vw, 0.8rem) * 2 * 1.5); - display: flex; - align-items: flex-start; - } + /* 移动端标题容器宽度放宽 */ + .advantage-card__heading-wrap { + width: 90%; + } - /* 移动端箭头和文字尺寸缩小 */ - .card-arrow { - font-size: clamp(0.45rem, 0.7vw, 0.8rem); - width: 10px; - } + .advantage-card__description { + line-height: 1.2; + width: 90%; + -webkit-line-clamp: 2; + /* 移动端同步添加最小高度 */ + min-height: calc(clamp(0.5rem, 0.8vw, 0.8rem) * 2 * 1.5); + } - .advantage-card__heading { - font-size: clamp(0.6rem, 1vw, 1rem); - } + /* 移动端箭头和文字尺寸缩小 */ + .card-arrow { + font-size: clamp(0.45rem, 0.7vw, 0.8rem); + width: 10px; + } - .advantage-card__description { - font-size: clamp(0.5rem, 0.8vw, 0.8rem); - } + .advantage-card__heading { + font-size: clamp(0.6rem, 1vw, 1rem); + } + + .advantage-card__description { + font-size: clamp(0.5rem, 0.8vw, 0.8rem); + } } /* 超小屏适配 */ @media (max-width: 374px) { - .advantage-section { - width: 98%; - } + .advantage-section { + width: 98%; + } - .advantage-card__heading { - font-size: clamp(0.55rem, 0.9vw, 0.9rem); - } + .advantage-card__heading { + font-size: clamp(0.55rem, 0.9vw, 0.9rem); + } - .advantage-card__heading-wrap { - width: 95%; - gap: 5px; - } + .advantage-card__heading-wrap { + width: 95%; + gap: 5px; + } - .advantage-card__description { - width: 95%; - /* 超小屏保持最小高度 */ - min-height: calc(clamp(0.5rem, 0.8vw, 0.8rem) * 2 * 1.5); - } -} + .advantage-card__description { + width: 95%; + /* 超小屏保持最小高度 */ + min-height: calc(clamp(0.5rem, 0.8vw, 0.8rem) * 2 * 1.5); + } +} \ No newline at end of file diff --git a/public/static/index/mobile/css/topic_power_prodline/index.css b/public/static/index/mobile/css/topic_power_prodline/index.css index b3e9ad8d..6db6c42c 100644 --- a/public/static/index/mobile/css/topic_power_prodline/index.css +++ b/public/static/index/mobile/css/topic_power_prodline/index.css @@ -62,6 +62,7 @@ a { .header { width: 100%; background: #fff; + height: 60px; } .header-img { margin: 0 auto; diff --git a/public/static/index/mobile/css/topic_power_prodline/mask.css b/public/static/index/mobile/css/topic_power_prodline/mask.css index d389996c..64e961e2 100644 --- a/public/static/index/mobile/css/topic_power_prodline/mask.css +++ b/public/static/index/mobile/css/topic_power_prodline/mask.css @@ -13,6 +13,8 @@ overflow: hidden; /* 阻止蒙版自身滚动 */ touch-action: none; /* 禁止触摸行为 */ pointer-events: auto; /* 确保蒙版能接收事件 */ + backdrop-filter: blur(8px); /* 模糊半径,可调整(4px-15px为宜) */ + -webkit-backdrop-filter: blur(8px); /* 兼容Safari */ } /* 蒙版内容容器 - 新增触摸事件传递控制 */ diff --git a/public/static/index/mobile/css/topic_power_prodline/product_list.css b/public/static/index/mobile/css/topic_power_prodline/product_list.css index a630932a..e18841b6 100644 --- a/public/static/index/mobile/css/topic_power_prodline/product_list.css +++ b/public/static/index/mobile/css/topic_power_prodline/product_list.css @@ -11,7 +11,21 @@ display: flex; flex-wrap: nowrap; overflow: hidden; - padding: 0 clamp(0.2rem, 0.6vw, 0.3rem); + /* 关键修改1:增大间距值(原 clamp(0.3rem, 0.5vw, 0.36rem) → 现在放大2倍左右) */ + gap: clamp(0.6rem, 1vw, 0.8rem); + padding: 0; /* 保持无内边距,避免间距叠加 */ +} + +/* 新增:外层容器(承载圆角、阴影、尺寸,避免缩放时圆角丢失) */ +.product-card-wrap { + /* 原卡片的宽度计算逻辑移到外层 */ + width: calc(25% - (clamp(0.6rem, 1vw, 0.8rem) * 3 / 4)); + flex: none; + border-radius: clamp(0.375rem, 1vw, 0.5rem); /* 外层承载圆角 */ + overflow: hidden; /* 裁剪内层缩放的卡片 */ + box-shadow: 0 clamp(0.1rem, 0.2vw, 0.125rem) clamp(0.3rem, 0.8vw, 0.5rem) rgba(0, 0, 0, 0.05); /* 外层承载阴影 */ + position: relative; + z-index: 1; } /* ######################################################################### */ @@ -23,20 +37,22 @@ align-items: stretch; } - /* 卡片核心:移动端固定宽高比 */ + /* 外层容器移动端适配:宽高比移到外层 */ + .product-card-wrap { + aspect-ratio: 3 / 4.2; + } + + /* 卡片核心:移动端调整(移除圆角、阴影,添加will-change) */ .product-card { background: rgb(242, 243, 245); - border-radius: clamp(0.375rem, 1vw, 0.5rem); cursor: pointer; - width: calc(25% - clamp(0.3rem, 0.5vw, 0.36rem)); + width: 100%; /* 内层卡片占满外层容器 */ + height: 100%; flex: none; - box-shadow: 0 clamp(0.1rem, 0.2vw, 0.125rem) - clamp(0.3rem, 0.8vw, 0.5rem) rgba(0, 0, 0, 0.05); - margin: 0 clamp(0.16rem, 0.24vw, 0.2rem); + margin: 0; /* 保持无margin,间距由gap控制 */ display: flex; flex-direction: column; - aspect-ratio: 3 / 4.2; - /* 移动端固定宽高比 */ + will-change: transform; /* 优化渲染,避免圆角异常 */ } /* 卡片hover效果:移动端特有 */ @@ -45,59 +61,51 @@ transition: transform 0.3s ease; } - /* 图片容器:用视口单位固定高度,彻底不受图片影响 */ - .product-card-img { - display: flex; - justify-content: center; - align-items: center; - width: 100%; - /* 关键:用vw固定高度,基于屏幕宽度计算,和图片本身尺寸无关 */ - height: clamp(8rem, 28vw, 12rem); /* 移动端适配:小屏8rem,大屏12rem,中间按28vw缩放 */ - margin-bottom: clamp(0.4rem, 0.6vw, 0.5rem); - overflow: hidden; - border-radius: clamp(0.2rem, 0.4vw, 0.25rem); - } - /* 产品图片:强制填充容器,消除尺寸差异 */ - .product-card img { - width: 100%; - height: 100%; - object-fit: contain; /* 保留完整图片(如果需要裁剪用cover) */ - object-position: center; - /* 强制图片适应容器,不管原图尺寸 */ - min-width: 80%; /* 防止图片过窄(可选,根据需求调整) */ - max-width: 100%; + /* 外层容器hover增强阴影(更自然的浮起效果) */ + .product-card-wrap:hover { + box-shadow: 0 clamp(0.2rem, 0.4vw, 0.25rem) clamp(0.5rem, 1vw, 0.8rem) rgba(0, 0, 0, 0.08); } + /* 图片容器:移动端固定占比 */ + .product-card-img { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + flex: 0 0 72%; + margin-bottom: clamp(0.4rem, 0.6vw, 0.5rem); + overflow: hidden; + border-radius: clamp(0.2rem, 0.4vw, 0.25rem); + } + + /* 产品图片:移动端特有 */ + .product-card img { + width: 100%; + height: 100%; + object-fit: contain; + object-position: center; + } + /* 文字容器:移动端固定占比 */ - /*.product-card-text {*/ - /* flex: 0 0 20%;*/ - /* 移动端文字区占比 */ - /* display: flex;*/ - /* flex-direction: column;*/ - /* justify-content: center;*/ - /* padding-left: clamp(0.8rem, 2vw, 1.5rem);*/ - /* padding-right: clamp(0.8rem, 2vw, 1.5rem);*/ - /*}*/ - .product-card-text { - width: 100%; - /* 用vw固定文字区域高度,和图片容器高度解耦 */ - height: clamp(3rem, 10vw, 4.5rem); /* 小屏3rem,大屏4.5rem,中间按10vw缩放 */ - display: flex; - flex-direction: column; - justify-content: flex-start; - overflow: hidden; /* 防止文字溢出 */ - padding-left: clamp(0.8rem, 2vw, 1.5rem); + .product-card-text { + flex: 0 0 20%; + display: flex; + flex-direction: column; + justify-content: center; + padding-left: clamp(0.8rem, 2vw, 1.5rem); padding-right: clamp(0.8rem, 2vw, 1.5rem); - } + } + /* 标题样式:移动端特有 */ .product-card-title { - font-size: clamp(0.75rem, 1.2vw, 0.875rem); - color: #333; - margin-bottom: clamp(0.2rem, 0.3vw, 0.25rem); - /* 最多2行,溢出省略(避免文字过多挤压) */ - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + font-size: clamp(0.8rem, 1.3vw, 1.2rem); + font-weight: 600; + color: #333; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + height: 35%; + line-height: 1.2; } /* 描述样式:移动端固定2行高度 */ @@ -106,7 +114,6 @@ color: #656565; word-break: break-word; height: 65%; - /* 移动端描述固定高度(2行) */ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; @@ -120,7 +127,6 @@ display: flex; align-items: center; flex: 0 0 10%; - /* 移动端链接区占比 */ padding: clamp(0.8rem, 2vw, 1.5rem); } @@ -151,23 +157,27 @@ .product-card-container { align-items: stretch; height: clamp(30vw, 35vw, 480px); - /* PC端容器高度自适应 */ + /* 关键修改3:PC端同步增大gap间距(与通用容器一致) */ + gap: clamp(0.6rem, 1vw, 0.8rem); + padding: 0; } - /* 卡片核心:PC端高度自适应 */ + /* 外层容器PC端适配:高度占满容器 */ + .product-card-wrap { + height: 100%; + } + + /* 卡片核心:PC端调整(移除圆角、阴影,添加will-change) */ .product-card { background: rgb(242, 243, 245); - border-radius: clamp(0.375rem, 1vw, 0.5rem); cursor: pointer; - width: calc(25% - clamp(0.3rem, 0.5vw, 0.36rem)); + width: 100%; /* 内层卡片占满外层容器 */ + height: 100%; flex: none; - box-shadow: 0 clamp(0.1rem, 0.2vw, 0.125rem) - clamp(0.3rem, 0.8vw, 0.5rem) rgba(0, 0, 0, 0.05); - margin: 0 clamp(0.16rem, 0.24vw, 0.2rem); + margin: 0; /* 保持无margin */ display: flex; flex-direction: column; - height: 100%; - /* PC端卡片高度继承父容器 */ + will-change: transform; /* 优化渲染,避免圆角异常 */ } /* 卡片hover效果:PC端特有 */ @@ -176,6 +186,11 @@ transition: transform 0.3s ease; } + /* 外层容器hover增强阴影 */ + .product-card-wrap:hover { + box-shadow: 0 clamp(0.2rem, 0.4vw, 0.25rem) clamp(0.5rem, 1vw, 0.8rem) rgba(0, 0, 0, 0.08); + } + /* 图片容器:PC端固定占比 */ .product-card-img { display: flex; @@ -183,7 +198,6 @@ align-items: center; width: 100%; flex: 0 0 72%; - /* PC端图片区占比 */ margin-bottom: clamp(0.4rem, 0.6vw, 0.5rem); overflow: hidden; border-radius: clamp(0.2rem, 0.4vw, 0.25rem); @@ -200,8 +214,7 @@ /* 文字容器:PC端固定占比 */ .product-card-text { flex: 0 0 15%; - /* PC端文字区占比 */ - /* display: flex; */ + display: flex; /* 补充display: flex,原代码遗漏 */ flex-direction: column; justify-content: center; padding-left: clamp(0.8rem, 2vw, 1.5rem); @@ -216,8 +229,6 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - /* height: 35%; */ - /* PC端标题固定高度 */ line-height: 1.2; display: flex; align-items: center; @@ -228,8 +239,6 @@ font-size: clamp(0.7rem, 1.1vw, 0.9rem); color: #656565; word-break: break-word; - /* height: 65%; */ - /* PC端描述固定高度(2行) */ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; @@ -240,11 +249,10 @@ /* 链接图标容器:PC端固定占比 */ .product-card-link { width: 100%; - /* display: flex; */ - /* align-items: center; */ flex: 0 0 12%; - /* PC端链接区占比 */ padding-left: clamp(0.8rem, 2vw, 1.5rem); + display: flex; /* 补充display: flex,确保图标垂直居中 */ + align-items: center; } /* 链接图标:PC端特有 */ @@ -253,4 +261,4 @@ height: auto; object-fit: contain; } -} +} \ No newline at end of file diff --git a/public/static/index/mobile/css/topic_power_prodline/swiper.css b/public/static/index/mobile/css/topic_power_prodline/swiper.css index c6e4ad87..0bf2bc1e 100644 --- a/public/static/index/mobile/css/topic_power_prodline/swiper.css +++ b/public/static/index/mobile/css/topic_power_prodline/swiper.css @@ -1,29 +1,76 @@ +.swiper-container { + padding: 0 !important; +} /* 轮播容器 - 核心:基于视口高度自适应 */ .auto-swiper-container { width: 100%; /* 关键:高度 = 视口高度的百分比(可调整,如60vh=屏幕高度60%) */ - height: 60vh; - max-height: 800px; /* 限制最大高度(避免大屏过高) */ - min-height: 300px; /* 限制最小高度(避免小屏过低) */ - overflow: hidden; margin-bottom: 5.625rem; + max-height: 900px; + min-height: 300px; + position: relative; + margin-top:60px; + } - /* 轮播项 - 填充容器高度 */ .auto-swiper-slide { width: 100%; - height: 100%; + /*height: 100%;*/ display: flex; align-items: center; justify-content: center; - background: #333; /* 图片加载前占位 */ + } + /* 图片自适应核心:填充屏幕比例高度,保持比例 */ .auto-swiper-slide img { - width: 100%; - height: 100%; - object-fit: cover; /* 优先填充容器,裁剪超出部分(无拉伸) */ - /* object-fit: contain; 可选:完整显示图片,不裁剪(可能留黑边) */ - display: block; + width: 100%; + height: 100%; + object-fit: contain; /* 替换 cover 为 contain,完整显示图片 */ + display: block; + } + +/* 轮播容器保持相对定位 */ +.auto-swiper-container { + position: relative; + width: 100%; +} + +/* 轮播容器保持相对定位 */ +.auto-swiper-container { + position: relative; + width: 100%; +} + +/* 指示标容器:居中排列 */ +.swiper-pagination { + position: absolute; + bottom: 10%; /* 距离底部的距离,可调整 */ + left: 50%; + transform: translateX(-50%); + /* width:100%; + display: flex; */ + /* justify-content: center; */ + z-index: 10; +} + +/* 激活状态:白色长条 */ +.swiper-pagination-bullet-active { + background:#fff !important; +} + +/* 未激活状态:黑色透明圆点(可调整透明度) */ +.swiper-pagination-bullet { + display: inline-block; + width: 16px !important; + height: 16px !important; + border-radius: 8px; + /*background: #555;*/ + margin: 0 5px; + /*opacity: 0.8;*/ + border: 1px solid #fff; + /*cursor: pointer;*/ +} + diff --git a/public/static/index/pc/css/topic_power_prodline/index.css b/public/static/index/pc/css/topic_power_prodline/index.css index 1af85cf1..e567fe25 100644 --- a/public/static/index/pc/css/topic_power_prodline/index.css +++ b/public/static/index/pc/css/topic_power_prodline/index.css @@ -63,6 +63,7 @@ a { .header { width: 100%; background: #fff; + height: 60px; } .header-img { margin: 0 auto; diff --git a/public/static/index/pc/css/topic_power_prodline/product.css b/public/static/index/pc/css/topic_power_prodline/product.css index 6a9ea497..29be5ee3 100644 --- a/public/static/index/pc/css/topic_power_prodline/product.css +++ b/public/static/index/pc/css/topic_power_prodline/product.css @@ -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%; + } +} diff --git a/public/static/index/pc/css/topic_power_prodline/swiper.css b/public/static/index/pc/css/topic_power_prodline/swiper.css index 01857d28..a712a8e5 100644 --- a/public/static/index/pc/css/topic_power_prodline/swiper.css +++ b/public/static/index/pc/css/topic_power_prodline/swiper.css @@ -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; }