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

调式
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 2s
Details

Browse Source
This commit is contained in:
liqian
2025-12-20 14:01:18 +08:00
parent e5ccd8d031
commit 4e3daa9eeb
5 changed files with 186 additions and 310 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
app/index/view/pc/topic_laptop/index.html
View File

@@ -30,14 +30,13 @@
<script type="text/javascript">
(function (doc, win)
{
var docEl = doc.documentElement;
var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
var designWidth = 2560;
var designRemPx = 100;
function setRootFontSize ()
{
console.log('触发')
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
var fontSize = (clientWidth / designWidth) * designRemPx;
@@ -55,15 +54,6 @@
{block name="main"}
{notempty name="data.top_focus_images"}
<div class="swiper-container auto-swiper-container" style="margin-top:60px;">
{eq name=":cookie('think_lang')" value="en-us"}
<div class="swiper-wrapper">
{volist name="data.top_focus_images" id="tfi"}
<a class="swiper-slide auto-swiper-slide" href="{$tfi.link}">
<img src="{$tfi.image}" alt="{$tfi.title}" />
</a>
{/volist}
</div>
{else/}
<div class="swiper-wrapper">
{volist name="data.top_focus_images" id="tfi"}
<div class="swiper-slide auto-swiper-slide">
@@ -72,15 +62,18 @@
<div class="swiper-container-texts-p">{$tfi.desc||raw|htmlspecialchars_decode}</div>
<div class="swiper-container-texts-img">
<a href="{$tfi.link}">
<img src="__IMAGES__/topic_laptop/ljgd.png" alt="" loading="lazy" >
{eq name=":cookie('think_lang')" value="en-us"}
<img src="__IMAGES__/topic_laptop/eljgd.png" alt="" >
{else/}
<img src="__IMAGES__/topic_laptop/ljgd.png" alt="" >
{/eq}
</a>
</div>
</div>
<img src="{$tfi.image}" alt="{$tfi.title}" loading="lazy" />
<img src="{$tfi.image}" alt="{$tfi.title}" />
</div>
{/volist}
</div>
{/eq}
</div>
{/notempty}
{notempty name="data.perf"}
@@ -214,7 +207,6 @@
<img src="{$gpu_first_section.extra_image|default=''}" alt="" loading="lazy" >
</div>
{/eq}
</div>
<div class="readon-img-box opacity0" data-order="11">
{volist name="data.gpu" id="go"}
@@ -275,7 +267,6 @@
</div>
{notempty name="data.ram"}
<div class="wift" >
<div class="wift-bg" style="background: url('{$data.ram.image}');background-size:100% auto;">
<div class="wift-test">
<div class="wift-t opacity0" data-order="12">{$data.ram.title|raw}</div>
@@ -290,7 +281,6 @@
<div class="wift-bg-img opacity0" data-order="14">
{$data.ram.desc|raw}
</div>
</div>
</div>
{/notempty}
@@ -311,7 +301,6 @@
</div>
</div>
{/notempty}
<div class="fs">
{notempty name="data.cooling_system"}
{notempty name="$data.cooling_system.0"}
@@ -332,13 +321,13 @@
</video>
<div class="fs-ts">{$data.cooling_system.0.desc|raw}</div>
{/notempty}
<div class="fs-box-img opacity0" data-order="18">
<div class="fs-box-img" >
<div class="fs-h-img">
{notempty name="data.cooling_system.1"}<img src="{$data.cooling_system.1.image}" alt="" loading="lazy" >{/notempty}
{notempty name="data.cooling_system.2"}<img src="{$data.cooling_system.2.image}" alt="" loading="lazy" >{/notempty}
{notempty name="data.cooling_system.1"}<img src="{$data.cooling_system.1.image}" alt="" >{/notempty}
{notempty name="data.cooling_system.2"}<img src="{$data.cooling_system.2.image}" alt="" >{/notempty}
</div>
<div class="fs-b-img" style="min-height: 20px;">
{notempty name="data.cooling_system.3"}<img src="{$data.cooling_system.3.image}" alt="" loading="lazy" >{/notempty}
{notempty name="data.cooling_system.3"}<img src="{$data.cooling_system.3.image}" alt="" >{/notempty}
</div>
</div>
</div>
@@ -346,10 +335,10 @@
{/notempty}
{notempty name="data.apps"}
<div class="xn">
<div class="xn-t opacity0" data-order="19">{$data.apps.title|default=''}</div>
<div class="xn-t" >{$data.apps.title|default=''}</div>
<div class="xn-container">
<div class="xn-image-section">
<img src="{$data.apps.image|default=''}" alt="" class="zoom-image first-image" loading="lazy">
<img src="{$data.apps.image|default=''}" alt="" class="zoom-image first-image" >
</div>
</div>
<div class="xn-p">{$data.apps.desc|default=''|raw}</div>
@@ -363,8 +352,6 @@
<div class="ips-t">{$soft_light_first.title|raw}</div>
<div class="ips-p">{$soft_light_first.short_title|raw}</div>
{/notempty}
{eq name=":cookie('think_lang')" value="en-us"}
<div class="ips-img1 opacity0" data-order="21">
{volist name="data.screen_soft_light" id="so"}
@@ -378,8 +365,6 @@
{/volist}
</div>
{/eq}
</div>
</div>
{/notempty}
@@ -1260,7 +1245,6 @@
const tabT = document.querySelectorAll('.tab-t');
const indicator = document.querySelector('.tab-indicator');
const securityVideo = document.getElementById('securityVideo');
console.log(tabT,'=========tabT=============')
let prevIndex = 0;
const tabRects = [];
@@ -1355,110 +1339,7 @@
resetVideo();
});
// document.addEventListener('DOMContentLoaded', () => {
// // 1. 获取元素（匹配你的结构）
// const carouselImgs = document.querySelector('.carousel-imgs');
// const imgItems = document.querySelectorAll('.carousel-img');
// const leftArrow = document.querySelector('.arrow-left');
// const rightArrow = document.querySelector('.arrow-right');
// const textItems = document.querySelectorAll('.carousel-text');
// const carouselContainer = document.querySelector('.carousel-container');
// // 容错处理
// if (!carouselImgs || imgItems.length === 0) {
// console.warn('轮播图片为空，初始化终止');
// return;
// }
// // 2. 核心变量（仅索引，无尺寸计算）
// const imgCount = imgItems.length;
// let currentIndex = 0;
// let autoPlayTimer = null;
// let isResizing = false; // 缩放锁，避免重复触发
// // 3. 切换到指定索引（核心：百分比偏移，无尺寸计算）
// const goToIndex = (index) => {
// // 边界处理
// if (index < 0) index = imgCount - 1;
// if (index >= imgCount) index = 0;
// // 关键：用百分比偏移，彻底避开rem/px计算误差
// carouselImgs.style.transform = `translateX(-${index * 100}%)`;
// currentIndex = index;
// // 更新文字激活态
// textItems.forEach((item, idx) => {
// item.classList.toggle('active', idx === currentIndex);
// });
// };
// // 4. 左右切换逻辑
// const slideNext = () => goToIndex(currentIndex + 1);
// const slidePrev = () => goToIndex(currentIndex - 1);
// // 5. 自动播放逻辑
// const autoPlay = () => {
// clearInterval(autoPlayTimer);
// autoPlayTimer = setInterval(slideNext, 3000); // 3秒切换，可改
// };
// // 6. 绑定事件
// // 箭头点击
// leftArrow?.addEventListener('click', () => {
// slidePrev();
// autoPlay(); // 点击后重启自动播放
// });
// rightArrow?.addEventListener('click', () => {
// slideNext();
// autoPlay();
// });
// // 文字指示器点击
// textItems.forEach((item, idx) => {
// item.addEventListener('click', () => {
// goToIndex(idx);
// autoPlay();
// });
// });
// // 鼠标悬停暂停
// carouselContainer?.addEventListener('mouseenter', () => {
// clearInterval(autoPlayTimer);
// });
// carouselContainer?.addEventListener('mouseleave', autoPlay);
// // 7. 窗口缩放响应（核心：仅重新定位，无计算）
// const handleResize = () => {
// if (isResizing) return;
// isResizing = true;
// // 缩放时直接重新定位当前索引（百分比偏移无需计算）
// goToIndex(currentIndex);
// // 解锁
// setTimeout(() => {
// isResizing = false;
// }, 100);
// };
// // 防抖监听窗口缩放
// let resizeTimer;
// window.addEventListener('resize', () => {
// clearTimeout(resizeTimer);
// resizeTimer = setTimeout(handleResize, 150);
// });
// // 8. 初始化
// goToIndex(0); // 初始定位到第一张
// autoPlay(); // 启动自动播放
// // 9. 页面卸载清理定时器
// window.addEventListener('beforeunload', () => {
// clearInterval(autoPlayTimer);
// });
// });
document.addEventListener('DOMContentLoaded', () => {
document.addEventListener('DOMContentLoaded', () => {
// 1. 获取元素
const carouselImgs = document.querySelector('.carousel-imgs');
const imgItems = document.querySelectorAll('.carousel-img');
@@ -1614,6 +1495,6 @@ document.addEventListener('DOMContentLoaded', () => {
window.addEventListener('beforeunload', () => {
clearInterval(autoPlayTimer);
});
});
});
</script>
{/block}

5
public/static/index/pc/css/topic_laptop/index.css
View File

@@ -43,8 +43,3 @@ body {
/* [data-order="19"] {
transition: all 0.3s ease-out 0.2s !important;
} */
[data-order], .annotation, .progress-fill, .zoom-image, .float-card {
transform: translateZ(0); /* 开启硬件加速，将元素交给 GPU 渲染 */
will-change: opacity, transform; /* 告诉浏览器提前优化这个元素 */
backface-visibility: hidden; /* 防止元素翻转时的闪烁 */
}

6
public/static/index/pc/css/topic_laptop/progress.css
View File

@@ -189,14 +189,14 @@
.progress-p {
color: #cbcfd8;
font-size: clamp(16px, 1vw, 0.22rem);
margin-top: 1.23rem;
margin-bottom: 5.04rem;
margin-top: 1.56rem;
margin-bottom: 2rem;
text-align: center;
}
.progress-p1 {
color: #cbcfd8;
font-size: clamp(16px, 1vw, 0.22rem);
margin-top: 1.56rem;
/* margin-bottom: 2.3rem; */
/* margin-bottom: 1.66rem; */
text-align: center;
}

2
public/static/index/pc/css/topic_laptop/wift.css
View File

@@ -39,7 +39,7 @@
color: #cbcfd8;
width: 100%;
text-align: center;
padding-top: 0.39rem;
padding-top: 0.43rem;
line-height: 1.8;
font-family: "HarmonyOS-Light";
}

BIN
public/static/index/pc/images/topic_laptop/eljgd.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB