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

refactor: 专题 - 电力品线 修改

Browse Source
This commit is contained in:
liqian
2025-11-26 17:46:09 +08:00
parent 368c810821
commit 72f5d18545
8 changed files with 1135 additions and 879 deletions
Download Patch File Download Diff File Expand all files Collapse all files

252
app/index/view/pc/topic_power_prodline/index.html
View File

@@ -20,22 +20,23 @@
</div>
</a>
<!-- 轮播核心容器 -->
<div class="swiper-container auto-swiper-container">
<div class="swiper-container auto-swiper-container" >
{notempty name="data.focus_image"}
<div class="swiper-wrapper">
{volist name="data.focus_image" id="fo"}
<a class="swiper-slide auto-swiper-slide">
<img src="{$fo.image}" alt="{$fo.title}" href="{$fo.link}" />
<a class="swiper-slide auto-swiper-slide" href="{$fo.link}">
<img src="{$fo.image}" alt="{$fo.title}" />
</a>
{/volist}
</div>
<div class="swiper-pagination"></div>
{/notempty}
</div>
<!-- 分类 -->
{notempty name="data.category"}
<div class="nav-box">
{volist name="data.category" id="ca"}
<a class="nav-item" href="https://www.baidu.com">
<a class="nav-item" href="{$ca.link}">
<img src="{$ca.image}" alt="{$ca.title}">
<p {:style(['color'=>$ca.title_txt_color])}>{$ca.title}</p>
</a>
@@ -45,21 +46,25 @@
<!-- 500万 -->
{notempty name="data.why_choose"}
<div class="advantage-section">
<h2 class="advantage-section__title">为什么500万+消费者 选择奥睿科?</h2>
{assign name="why_choose_title" value=":array_shift($data.why_choose)" /}
<h2 class="advantage-section__title">{$why_choose_title.title|default=''}</h2>
<div class="advantage-section__list">
{volist name="data.why_choose" id="ch"}
<div class="advantage-card" data-target="design">
<img src="{$ch.image}" alt="{$ch.title}:{$ch.short_title}" class="advantage-card__img">
<div class="advantage-card__content">
<!-- 标题+箭头容器：水平+垂直双居中，内部文字左、箭头右 -->
<div class="advantage-card__heading-wrap">
<div class="advantage-card__heading" {:style(['color'=>$ch.title_txt_color])}>{$ch.title}</div>
<img src="__IMAGES__/jiant.png" alt="" class="card-arrow">
<div class="advantage-card-wrap">
<div class="advantage-card" data-target="design">
<img src="{$ch.image}" alt="{$ch.title}:{$ch.short_title}" class="advantage-card__img">
<div class="advantage-card__content">
<!-- 标题+箭头容器：水平+垂直双居中，内部文字左、箭头右 -->
<div class="advantage-card__heading-wrap">
<div class="advantage-card__heading" {:style(['color'=>$ch.title_txt_color])}>{$ch.title}</div>
<img src="__IMAGES__/jiant.png" alt="" class="card-arrow">
</div>
<div class="advantage-card__description" {:style(['color'=>$ch.short_title_txt_color])}>{$ch.short_title}</div>
<div style="display:none;" class="mack-conten-text">{$ch.desc|raw}</div>
</div>
<div class="advantage-card__description" {:style(['color'=>$ch.short_title_txt_color])}>{$ch.short_title}</div>
<div style="display:none;" class="mack-conten-text">{$ch.desc|raw}</div>
</div>
</div>
</div>
{/volist}
</div>
</div>
@@ -67,9 +72,10 @@
<!-- 产品差旅充 -->
{notempty name="data.travel_charger"}
<div class="product-box">
{assign name="tc_title" value=":array_shift($data.travel_charger)" /}
<div class="product-title">
<h2 class="product-title-h2">差旅充</h2>
<p class="product-title-p">出差旅行, 一收就走</p>
<h2 class="product-title-h2">{$tc_title.title|default=''}</h2>
<p class="product-title-p">{$tc_title.short_title|default=''}</p>
</div>
<div class="product-container" >
{assign name="tc_first_section_lf" value=":array_shift($data.travel_charger)" /}
@@ -97,16 +103,18 @@
<div class="product-card-box">
<div class="product-card-container">
{volist name="tc_second_section" id="tss"}
<a class="product-card" href="{$tss.link}">
<div class="product-card-img">
<img src="{$tss.image}" alt="{$tss.title}">
</div>
<div class="product-card-text">
<div class="product-card-title" {:style(['color'=>$tss.title_txt_color])}>{$tss.title}</div>
<div class="product-card-desc" {:style(['color'=>$tss.short_title_txt_color])}>{$tss.short_title}</div>
</div>
<div class="product-card-link">
<img src="__IMAGES__/ljgd.png" alt="查看更多">
<a class="product-card-wrap" href="{$tss.link}">
<div class="product-card" >
<div class="product-card-img">
<img src="{$tss.image}" alt="{$tss.title}">
</div>
<div class="product-card-text">
<div class="product-card-title" {:style(['color'=>$tss.title_txt_color])}>{$tss.title}</div>
<div class="product-card-desc" {:style(['color'=>$tss.short_title_txt_color])}>{$tss.short_title}</div>
</div>
<div class="product-card-link">
<img src="__IMAGES__/ljgd.png" alt="查看更多">
</div>
</div>
</a>
{/volist}
@@ -126,9 +134,10 @@
<!-- 产品 家居充-->
{notempty name="data.home_charger"}
<div class="product-box">
{assign name="hc_title" value=":array_shift($data.home_charger)" /}
<div class="product-title">
<h2 class="product-title-h2">家居充</h2>
<p class="product-title-p">自在充能, 邂逅生活美学</p>
<h2 class="product-title-h2">{$hc_title.title|default=''}</h2>
<p class="product-title-p">{$hc_title.short_title|default=''}</p>
</div>
<div class="product-container">
{assign name="hc_first_section_lf" value=":array_shift($data.home_charger)" /}
@@ -156,16 +165,18 @@
<div class="product-card-box">
<div class="product-card-container">
{volist name="hc_second_section" id="hcs"}
<a class="product-card" href="#">
<div class="product-card-img">
<img src="{$hcs.image}" alt="{$hcs.short_title}">
</div>
<div class="product-card-text">
<div class="product-card-title">{$hcs.title}</div>
<div class="product-card-desc">{$hcs.short_title}</div>
</div>
<div class="product-card-link">
<img src="__IMAGES__/ljgd.png" alt="查看更多">
<a class="product-card-wrap" href="{$tss.link}">
<div class="product-card" href="#">
<div class="product-card-img">
<img src="{$hcs.image}" alt="{$hcs.short_title}">
</div>
<div class="product-card-text">
<div class="product-card-title">{$hcs.title}</div>
<div class="product-card-desc">{$hcs.short_title}</div>
</div>
<div class="product-card-link">
<img src="__IMAGES__/ljgd.png" alt="查看更多">
</div>
</div>
</a>
{/volist}
@@ -184,9 +195,10 @@
{/notempty}
<!-- 产品 桌面充（悬浮图上右超出）底部列表样式不一样(左文右图) -->
<div class="product-box">
{assign name="dc_title" value=":array_shift($data.desktop_charger)" /}
<div class="product-title">
<h2 class="product-title-h2">桌面充</h2>
<p class="product-title-p">精致桌面 高效美学</p>
<h2 class="product-title-h2">{$dc_title.title|default=''}</h2>
<p class="product-title-p">{$dc_title.short_title|default=''}</p>
</div>
<div class="product-container">
{assign name="dc_first_section_lf" value=":array_shift($data.desktop_charger)" /}
@@ -204,9 +216,10 @@
<div class="product-right">
<img src="{$dc_first_section_lr.image}"
alt="使用场景" class="right-content right-img">
<!--muted loop playsinline controls-->
<video
src="https://www.orico.com.cn/storage/videos/banner/20250712/403305b404b4b46f5ef6b43e3f2e8761.mp4"
class="right-content right-video" muted loop playsinline controls style="display: none;">
src="{$dc_first_section_lr.video}"
class="right-content right-video" style="display: none;">
您的浏览器不支持HTML5视频播放，请升级浏览器
</video>
</div>
@@ -248,9 +261,10 @@
<!-- 墙插 -->
{notempty name="data.wall_charger"}
<div class="product-box">
{assign name="wc_title" value=":array_shift($data.wall_charger)" /}
<div class="product-title">
<h2 class="product-title-h2">墙插</h2>
<p class="product-title-p">1转多</p>
<h2 class="product-title-h2">{$wc_title.title|default=''}</h2>
<p class="product-title-p">{$wc_title.short_title|default=''}</p>
</div>
<div class="product-container">
{assign name="wc_first_section_lf" value=":array_shift($data.wall_charger)" /}
@@ -286,9 +300,10 @@
{notempty name="data.converter"}
<!-- 转换器 -->
<div class="product-box">
{assign name="ct_title" value=":array_shift($data.converter)" /}
<div class="product-title">
<h2 class="product-title-h2">转换器</h2>
<p class="product-title-p">随你看世界</p>
<h2 class="product-title-h2">{$ct_title.title|default=''}</h2>
<p class="product-title-p">{$ct_title.short_title|default=''}</p>
</div>
{assign name="ct_more_section" value=":array_pop($data.converter)" /}
{assign name="ct_chunk_section" value=":array_chunk($data.converter, 2)" /}
@@ -342,65 +357,90 @@
<div class="mask" id="mask">
<div class="mask-content" >
<span class="close-btn">&times;</span>
<div class="mask-scroll-content"></div>
</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
let swiper=null;
const advantageItems = document.querySelectorAll('.advantage-card');
const mask = document.getElementById('mask');
const closeBtn = document.querySelector('.close-btn');
const maskContent = document.querySelector('.mask-content');
const mackContentText = document.querySelector('.mack-conten-text');
let closeBtnHtml = null
let scrollTop = 0; // 保存页面滚动位置
// 显示蒙版：禁止滚动 + 保存滚动位置
function createCloseBtn() {
let closeBtnHtml = null; // 关闭按钮元素（全局变量，避免重复创建）
const mask = document.getElementById('mask');
const maskContent = document.querySelector('.mask-content');
const maskScrollContent = document.querySelector('.mask-scroll-content'); // 滚动容器（关键！）
const closeBtn = document.querySelector('.close-btn')
// 初始化：确保 maskScrollContent 存在于 maskContent 中（避免被清空）
if (!maskScrollContent) {
// 如果页面没有 mask-scroll-content，动态创建（确保结构稳定）
const scrollContent = document.createElement('div');
scrollContent.className = 'mask-scroll-content';
maskContent.appendChild(scrollContent);
}
function createCloseBtn() {
if (closeBtnHtml) {
closeBtnHtml.remove();
}
// 创建关闭按钮元素
closeBtnHtml = document.createElement('span');
closeBtnHtml.className = 'close-btn';
closeBtnHtml.innerHTML = '&times;'; // 关闭符号（×）
// 绑定关闭事件
closeBtnHtml.innerHTML = '&times;';
closeBtnHtml.addEventListener('click', hideMask);
// 添加到maskScrollContent（作为第一个子元素）
// 挂载到 maskContent（而非 scrollContent），避免被滚动影响位置
maskContent.prepend(closeBtnHtml);
}
function showMask(contentHtml) {
// 保存当前页面滚动位置（避免 fixed 导致页面跳顶）
scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
maskContent.innerHTML = contentHtml;
createCloseBtn()
// 显示蒙版
mask.style.display = 'flex';
// 保存页面滚动位置
scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
// 禁止 html + body 滚动
document.documentElement.classList.add('no-scroll');
document.body.classList.add('no-scroll');
// 强制让页面停留在原滚动位置（关键！）
document.body.style.top = `-${scrollTop}px`;
// 关键：将内容填充到 scrollContent 中（而非直接替换 maskContent）
maskScrollContent.innerHTML = contentHtml;
createCloseBtn();
// 显示蒙版
mask.style.display = 'flex';
// 禁止滚动（复用你的逻辑）
document.documentElement.classList.add('no-scroll');
document.body.classList.add('no-scroll');
document.body.style.top = `-${scrollTop}px`;
// 额外：打开蒙版时就重置滚动位置（避免残留上次滚动状态）
maskScrollContent.scrollTop = 0;
}
// 隐藏蒙版：恢复滚动 + 还原滚动位置
function hideMask() {
// 隐藏蒙版
mask.style.display = 'none';
// 恢复 html + body 滚动
document.documentElement.classList.remove('no-scroll');
document.body.classList.remove('no-scroll');
maskContent.innerHTML = ""
// 还原页面到之前的滚动位置
window.scrollTo(0, scrollTop);
document.body.style.top = ''; // 清除临时样式
}
// 关键步骤 1：先重置 scrollContent 的滚动位置（此时元素还未被销毁）
maskScrollContent.scrollTop = 0;
// 点击卡片显示详情
// 关键步骤 2：清空 scrollContent 的内容（而非 maskContent）
maskScrollContent.innerHTML = "";
// 隐藏蒙版
mask.style.display = 'none';
// 恢复滚动（复用你的逻辑）
document.documentElement.classList.remove('no-scroll');
document.body.classList.remove('no-scroll');
document.body.style.top = '';
// 还原页面滚动位置
window.scrollTo(0, scrollTop);
// 移除关闭按钮（可选，避免残留）
if (closeBtnHtml) {
closeBtnHtml.remove();
closeBtnHtml = null;
}
}
// 点击卡片显示详情
advantageItems.forEach((item) => {
item.addEventListener('click', (e) => {
// 获取当前点击卡片内的.mack-conten-text元素
@@ -499,5 +539,47 @@
stopAllVideos(); // 无活跃视频时停止所有播放
}
});
window.onload = function () {
if (typeof Swiper === 'undefined') {
console.error('Swiper加载失败，请刷新页面重试');
return;
}
swiper = new Swiper('.auto-swiper-container', {
autoplay: {
delay: 113000, // 3秒切换
disableOnInteraction: false,
},
loop: true,
slidesPerView: 1,
spaceBetween: 0,
// 启用分页指示标（核心配置）
pagination: {
el: '.swiper-pagination', // 对应 HTML 中的指示标容器
clickable: true, // 允许点击指示标切换
// dynamicBullets: true, // 动态指示标（当前激活放大）
//dynamicMainBullets: 3, // 动态模式显示3个核心指示标
},
navigation: false,
scrollbar: false,
on: {
resize: function () {
this.update();
},
},
});
window.addEventListener('resize', function () {
swiper.update();
});
// 初始化时触发滚动事件，确保状态正确
window.dispatchEvent(new Event('scroll'));
};
</script>
{/block}