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 3s
Details

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

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

@@ -30,14 +30,13 @@
<script type="text/javascript"> <script type="text/javascript">
(function (doc, win) (function (doc, win)
{ {
var docEl = doc.documentElement; var docEl = doc.documentElement;
var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'; var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
var designWidth = 2560; var designWidth = 2560;
var designRemPx = 100; var designRemPx = 100;
function setRootFontSize () function setRootFontSize ()
{ {
console.log('触发')
var clientWidth = docEl.clientWidth; var clientWidth = docEl.clientWidth;
if (!clientWidth) return; if (!clientWidth) return;
var fontSize = (clientWidth / designWidth) * designRemPx; var fontSize = (clientWidth / designWidth) * designRemPx;
@@ -55,32 +54,26 @@
{block name="main"} {block name="main"}
{notempty name="data.top_focus_images"} {notempty name="data.top_focus_images"}
<div class="swiper-container auto-swiper-container" style="margin-top:60px;"> <div class="swiper-container auto-swiper-container" style="margin-top:60px;">
{eq name=":cookie('think_lang')" value="en-us"} <div class="swiper-wrapper">
<div class="swiper-wrapper"> {volist name="data.top_focus_images" id="tfi"}
{volist name="data.top_focus_images" id="tfi"} <div class="swiper-slide auto-swiper-slide">
<a class="swiper-slide auto-swiper-slide" href="{$tfi.link}"> <div class="swiper-container-texts" style="color:#fff">
<img src="{$tfi.image}" alt="{$tfi.title}" /> <div class="swiper-container-texts-t">{$tfi.title}</div>
</a> <div class="swiper-container-texts-p">{$tfi.desc||raw|htmlspecialchars_decode}</div>
{/volist} <div class="swiper-container-texts-img">
</div> <a href="{$tfi.link}">
{else/} {eq name=":cookie('think_lang')" value="en-us"}
<div class="swiper-wrapper"> <img src="__IMAGES__/topic_laptop/eljgd.png" alt="" >
{volist name="data.top_focus_images" id="tfi"} {else/}
<div class="swiper-slide auto-swiper-slide"> <img src="__IMAGES__/topic_laptop/ljgd.png" alt="" >
<div class="swiper-container-texts" style="color:#fff"> {/eq}
<div class="swiper-container-texts-t">{$tfi.title}</div> </a>
<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" >
</a>
</div>
</div> </div>
<img src="{$tfi.image}" alt="{$tfi.title}" loading="lazy" />
</div> </div>
{/volist} <img src="{$tfi.image}" alt="{$tfi.title}" />
</div> </div>
{/eq} {/volist}
</div>
</div> </div>
{/notempty} {/notempty}
{notempty name="data.perf"} {notempty name="data.perf"}
@@ -214,7 +207,6 @@
<img src="{$gpu_first_section.extra_image|default=''}" alt="" loading="lazy" > <img src="{$gpu_first_section.extra_image|default=''}" alt="" loading="lazy" >
</div> </div>
{/eq} {/eq}
</div> </div>
<div class="readon-img-box opacity0" data-order="11"> <div class="readon-img-box opacity0" data-order="11">
{volist name="data.gpu" id="go"} {volist name="data.gpu" id="go"}
@@ -275,7 +267,6 @@
</div> </div>
{notempty name="data.ram"} {notempty name="data.ram"}
<div class="wift" > <div class="wift" >
<div class="wift-bg" style="background: url('{$data.ram.image}');background-size:100% auto;"> <div class="wift-bg" style="background: url('{$data.ram.image}');background-size:100% auto;">
<div class="wift-test"> <div class="wift-test">
<div class="wift-t opacity0" data-order="12">{$data.ram.title|raw}</div> <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"> <div class="wift-bg-img opacity0" data-order="14">
{$data.ram.desc|raw} {$data.ram.desc|raw}
</div> </div>
</div> </div>
</div> </div>
{/notempty} {/notempty}
@@ -299,19 +289,18 @@
{assign name="hard_drive_first" value=":array_shift($data.hard_drive)"/} {assign name="hard_drive_first" value=":array_shift($data.hard_drive)"/}
<div class="m2-bg" style="background: url('{$hard_drive_first.image|default=\'\'}');background-size:100% auto"> <div class="m2-bg" style="background: url('{$hard_drive_first.image|default=\'\'}');background-size:100% auto">
{eq name=":cookie('think_lang')" value="en-us"} {eq name=":cookie('think_lang')" value="en-us"}
<div class="m2-bg-t1 opacity0" data-order="15">{$hard_drive_first.title|default=''|raw}</div> <div class="m2-bg-t1 opacity0" data-order="15">{$hard_drive_first.title|default=''|raw}</div>
{else/} {else/}
<div class="m2-bg-t opacity0" data-order="15">{$hard_drive_first.title|default=''|raw}</div> <div class="m2-bg-t opacity0" data-order="15">{$hard_drive_first.title|default=''|raw}</div>
{/eq} {/eq}
<div class="m2-img-box opacity0" data-order="16"> <div class="m2-img-box opacity0" data-order="16">
{volist name="data.hard_drive" id="ho"} {volist name="data.hard_drive" id="ho"}
<img src="{$ho.image}" alt="" loading="lazy" > <img src="{$ho.image}" alt="" loading="lazy" >
{/volist} {/volist}
</div> </div>
</div> </div>
</div> </div>
{/notempty} {/notempty}
<div class="fs"> <div class="fs">
{notempty name="data.cooling_system"} {notempty name="data.cooling_system"}
{notempty name="$data.cooling_system.0"} {notempty name="$data.cooling_system.0"}
@@ -332,13 +321,13 @@
</video> </video>
<div class="fs-ts">{$data.cooling_system.0.desc|raw}</div> <div class="fs-ts">{$data.cooling_system.0.desc|raw}</div>
{/notempty} {/notempty}
<div class="fs-box-img opacity0" data-order="18"> <div class="fs-box-img" >
<div class="fs-h-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.1"}<img src="{$data.cooling_system.1.image}" alt="" >{/notempty}
{notempty name="data.cooling_system.2"}<img src="{$data.cooling_system.2.image}" alt="" loading="lazy" >{/notempty} {notempty name="data.cooling_system.2"}<img src="{$data.cooling_system.2.image}" alt="" >{/notempty}
</div> </div>
<div class="fs-b-img" style="min-height: 20px;"> <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> </div>
</div> </div>
@@ -346,10 +335,10 @@
{/notempty} {/notempty}
{notempty name="data.apps"} {notempty name="data.apps"}
<div class="xn"> <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-container">
<div class="xn-image-section"> <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> </div>
<div class="xn-p">{$data.apps.desc|default=''|raw}</div> <div class="xn-p">{$data.apps.desc|default=''|raw}</div>
@@ -363,23 +352,19 @@
<div class="ips-t">{$soft_light_first.title|raw}</div> <div class="ips-t">{$soft_light_first.title|raw}</div>
<div class="ips-p">{$soft_light_first.short_title|raw}</div> <div class="ips-p">{$soft_light_first.short_title|raw}</div>
{/notempty} {/notempty}
{eq name=":cookie('think_lang')" value="en-us"} {eq name=":cookie('think_lang')" value="en-us"}
<div class="ips-img1 opacity0" data-order="21"> <div class="ips-img1 opacity0" data-order="21">
{volist name="data.screen_soft_light" id="so"} {volist name="data.screen_soft_light" id="so"}
<img src="{$so.image}" alt="" loading="lazy" > <img src="{$so.image}" alt="" loading="lazy" >
{/volist} {/volist}
</div> </div>
{else/} {else/}
<div class="ips-img opacity0" data-order="21"> <div class="ips-img opacity0" data-order="21">
{volist name="data.screen_soft_light" id="so"} {volist name="data.screen_soft_light" id="so"}
<img src="{$so.image}" alt="" loading="lazy" > <img src="{$so.image}" alt="" loading="lazy" >
{/volist} {/volist}
</div> </div>
{/eq} {/eq}
</div> </div>
</div> </div>
{/notempty} {/notempty}
@@ -1260,7 +1245,6 @@
const tabT = document.querySelectorAll('.tab-t'); const tabT = document.querySelectorAll('.tab-t');
const indicator = document.querySelector('.tab-indicator'); const indicator = document.querySelector('.tab-indicator');
const securityVideo = document.getElementById('securityVideo'); const securityVideo = document.getElementById('securityVideo');
console.log(tabT,'=========tabT=============')
let prevIndex = 0; let prevIndex = 0;
const tabRects = []; const tabRects = [];
@@ -1581,7 +1565,7 @@ document.addEventListener('DOMContentLoaded', () => {
item.addEventListener('click', () => { item.addEventListener('click', () => {
if (isTransitioning || currentRealIndex === idx) return; if (isTransitioning || currentRealIndex === idx) return;
isTransitioning = true; isTransitioning = true;
// 直接滑到目标图片 // 直接滑到目标图片
carouselImgs.style.transform = `translateX(-${idx * 100}%)`; carouselImgs.style.transform = `translateX(-${idx * 100}%)`;
currentRealIndex = idx; currentRealIndex = idx;

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

@@ -43,8 +43,3 @@ body {
/* [data-order="19"] { /* [data-order="19"] {
transition: all 0.3s ease-out 0.2s !important; 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 { .progress-p {
color: #cbcfd8; color: #cbcfd8;
font-size: clamp(16px, 1vw, 0.22rem); font-size: clamp(16px, 1vw, 0.22rem);
margin-top: 1.23rem; margin-top: 1.56rem;
margin-bottom: 5.04rem; margin-bottom: 2rem;
text-align: center; text-align: center;
} }
.progress-p1 { .progress-p1 {
color: #cbcfd8; color: #cbcfd8;
font-size: clamp(16px, 1vw, 0.22rem); font-size: clamp(16px, 1vw, 0.22rem);
margin-top: 1.56rem; margin-top: 1.56rem;
/* margin-bottom: 2.3rem; */ /* margin-bottom: 1.66rem; */
text-align: center; text-align: center;
} }

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

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