调整
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 3s

This commit is contained in:
2025-12-17 17:57:10 +08:00
parent 91661b6bb4
commit b7e09aeb04
24 changed files with 632 additions and 288 deletions

View File

@@ -236,5 +236,9 @@ return [
'3.5mm<br/>耳麦合一' => '3.5mm <br/> Combo Audio', '3.5mm<br/>耳麦合一' => '3.5mm <br/> Combo Audio',
'TF口3.0' => 'TF 3.0 <br/> Card Slot', 'TF口3.0' => 'TF 3.0 <br/> Card Slot',
'全功能<br/>USB-C' => 'All-in-One <br/> USB-C', '全功能<br/>USB-C' => 'All-in-One <br/> USB-C',
"接口大满贯" => "Full-Featured Ports",
"酷睿i5-12450H" => "Core i5-12450H",
"锐龙9 6900HX" => "Ryzen9 6900HX",
"标配多种接口会议室连接电脑、U盘传输文件、TF卡读取等全都轻松搞定" => "Versatile Ports for Easy Connectivity. Effortlessly link to pro",
], ],
]; ];

View File

@@ -27,21 +27,17 @@
<link rel="stylesheet" href="__CSS__/topic_laptop/windows.css"> <link rel="stylesheet" href="__CSS__/topic_laptop/windows.css">
<link rel="stylesheet" href="__CSS__/topic_laptop/bottom.css"> <link rel="stylesheet" href="__CSS__/topic_laptop/bottom.css">
<link rel="stylesheet" href="__CSS__/topic_laptop/wift6.css"> <link rel="stylesheet" href="__CSS__/topic_laptop/wift6.css">
<style>
</style>
<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 = 1920; 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;
@@ -86,6 +82,7 @@
<div class="amd-img-3-1-right"> <div class="amd-img-3-1-right">
{notempty name="data.perf.4"}<img src="{$data.perf.4.image}" alt="{$data.perf.4.title}">{/notempty} {notempty name="data.perf.4"}<img src="{$data.perf.4.image}" alt="{$data.perf.4.title}">{/notempty}
</div> </div>
<!-- {notempty name="data.perf.4"}<img src="{$data.perf.4.image}" alt="{$data.perf.4.title}">{/notempty} -->
<div class="amd-img-3-2-right"> <div class="amd-img-3-2-right">
{notempty name="data.perf.5"}<img src="{$data.perf.5.image}" alt="{$data.perf.5.title}">{/notempty} {notempty name="data.perf.5"}<img src="{$data.perf.5.image}" alt="{$data.perf.5.title}">{/notempty}
</div> </div>
@@ -187,7 +184,11 @@
<div class="readon-box" style="background: url('{$gpu_first_section.image|default=\'\'}');background-size:100% auto"> <div class="readon-box" style="background: url('{$gpu_first_section.image|default=\'\'}');background-size:100% auto">
<div class="readon-text opacity0" data-order="9"> <div class="readon-text opacity0" data-order="9">
<div class="readon-t">{$gpu_first_section.title|default=''|raw}</div> <div class="readon-t">{$gpu_first_section.title|default=''|raw}</div>
{eq name=":cookie('think_lang')" value="en-us"}
<div class="readon-js1">{$gpu_first_section.short_title|default=''|raw}</div>
{else/}
<div class="readon-js">{$gpu_first_section.short_title|default=''|raw}</div> <div class="readon-js">{$gpu_first_section.short_title|default=''|raw}</div>
{/eq}
<div class="readon-img opacity0" data-order="10"> <div class="readon-img opacity0" data-order="10">
<img src="{$gpu_first_section.extra_image|default=''}" alt=""> <img src="{$gpu_first_section.extra_image|default=''}" alt="">
</div> </div>
@@ -200,7 +201,7 @@
</div> </div>
{/notempty} {/notempty}
<div class="container"> <div class="container">
<h1 class="progress-title" style="padding-top: 0;">{:lang_i18n('3DMARK Time Spy显卡得分')}</h1> <div class="progress-title" style="padding-top: 0;">{:lang_i18n('3DMARK Time Spy显卡得分')}</div>
<div class="progress-section"> <div class="progress-section">
<div class="progress-item"> <div class="progress-item">
<div class="progress-bar-container"> <div class="progress-bar-container">
@@ -247,14 +248,18 @@
</div> </div>
</div> </div>
</div> </div>
<div class="progress-p">{:lang_i18n('*此跑分为ORICO实验室测定所得请以实际使用为准')}</div> <div class="progress-p1">{:lang_i18n('*此跑分为ORICO实验室测定所得请以实际使用为准')}</div>
</div> </div>
{notempty name="data.ram"} {notempty name="data.ram"}
<div class="wift" > <div class="wift" >
<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>
<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="opacity0" data-order="13"> <div class="opacity0" data-order="13">
{eq name=":cookie('think_lang')" value="en-us"}
<div class="wift-bg-p1">{$data.ram.short_title|raw}</div>
{else/}
<div class="wift-bg-p">{$data.ram.short_title|raw}</div> <div class="wift-bg-p">{$data.ram.short_title|raw}</div>
{/eq}
</div> </div>
<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}
@@ -266,7 +271,11 @@
<div class="m2"> <div class="m2">
{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"}
<div class="m2-bg-t1 opacity0" data-order="15">{$hard_drive_first.title|default=''|raw}</div>
{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}
<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=""> <img src="{$ho.image}" alt="">
@@ -326,11 +335,23 @@
<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"}
<div class="ips-img1 opacity0" data-order="21">
{volist name="data.screen_soft_light" id="so"}
<img src="{$so.image}" alt="">
{/volist}
</div>
{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=""> <img src="{$so.image}" alt="">
{/volist} {/volist}
</div> </div>
{/eq}
</div> </div>
</div> </div>
{/notempty} {/notempty}
@@ -418,6 +439,10 @@
</div> </div>
{/notempty} {/notempty}
<div class="zoom-container" id="zoomContainer"> <div class="zoom-container" id="zoomContainer">
<div class="zoom-text">
<div>{:lang_i18n("接口大满贯")}</div>
<p>{:lang_i18n("标配多种接口会议室连接电脑、U盘传输文件、TF卡读取等全都轻松搞定")}</p>
</div>
<div class="img-wrapper"> <div class="img-wrapper">
<img src="__IMAGES__/topic_laptop/jk.png" alt="接口图" class="bg-img" id="bgImg"> <img src="__IMAGES__/topic_laptop/jk.png" alt="接口图" class="bg-img" id="bgImg">
</div> </div>
@@ -452,8 +477,13 @@
<div class="carousel-texts"> <div class="carousel-texts">
{volist name="data.scene_focus_images" id="so"} {volist name="data.scene_focus_images" id="so"}
<div class="carousel-text {if $key == 0}active{/if}" data-index="{$key}"> <div class="carousel-text {if $key == 0}active{/if}" data-index="{$key}">
{eq name=":cookie('think_lang')" value="en-us"}
<div class="carousel-text-t1">{$so.title}</div>
<div class="carousel-text-p1">{$so.short_title}</div>
{else/}
<div class="carousel-text-t">{$so.title}</div> <div class="carousel-text-t">{$so.title}</div>
<div class="carousel-text-p">{$so.short_title}</div> <div class="carousel-text-p">{$so.short_title}</div>
{/eq}
</div> </div>
{/volist} {/volist}
</div> </div>

View File

@@ -1,24 +1,41 @@
@font-face { @font-face {
font-family: "HarmonyOS"; font-family: "HarmonyOS";
src: url("//ow.static.f2b211.com/static/fonts/HarmonyOS-Regular.otf") format("opentype"); src: url("//ow.static.f2b211.com/static/fonts/HarmonyOS_Sans_SC_Regular.ttf") format("opentype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "HarmonyOS-Regular";
src: url("//ow.static.f2b211.com/static/fonts/HarmonyOS_Sans_SC_Regular.ttf") format("opentype");
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: "HarmonyOS-Bold"; font-family: "HarmonyOS-Bold";
src: url("//ow.static.f2b211.com/static/fonts/HarmonyOS-Bold.otf") format("opentype"); src: url("//ow.static.f2b211.com/static/fonts/HarmonyOS_Sans_SC_Bold.ttf") format("opentype");
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: "HarmonyOS-Medium"; font-family: "HarmonyOS-Medium";
src: url("//ow.static.f2b211.com/static/fonts/HarmonyOS-Medium.otf") format("opentype"); src: url("//ow.static.f2b211.com/static/fonts/HarmonyOS_Sans_SC_Medium.ttf") format("opentype");
font-weight: normal;
font-style: normal;
}
/* HarmonyOS-SemiBold1 */
@font-face {
font-family: "HarmonyOS-SemiBold";
src: url("//ow.static.f2b211.com/static/fonts/HarmonyOS_Sans_SC_Bold.ttf") format("opentype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "HarmonyOS-Light";
src: url("//ow.static.f2b211.com/static/fonts/HarmonyOS_Sans_SC_Light.ttf") format("opentype");
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;

View File

@@ -20,32 +20,38 @@
} */ } */
@font-face { @font-face {
font-family: "HarmonyOS"; font-family: "HarmonyOS";
src: url("//ow.static.f2b211.com/static/fonts/HarmonyOS_Sans_SC_Regular.woff2") format("woff2"); src: url("//ow.static.f2b211.com/static/fonts/HarmonyOS_Sans_SC_Regular.ttf") format("opentype");
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: "HarmonyOS-Regular"; font-family: "HarmonyOS-Regular";
src: url("//ow.static.f2b211.com/static/fonts/HarmonyOS_Sans_SC_Regular.woff2") format("woff2"); src: url("//ow.static.f2b211.com/static/fonts/HarmonyOS_Sans_SC_Regular.ttf") format("opentype");
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: "HarmonyOS-Bold"; font-family: "HarmonyOS-Bold";
src: url("//ow.static.f2b211.com/static/fonts/HarmonyOS_Sans_SC_Bold.woff2") format("woff2"); src: url("//ow.static.f2b211.com/static/fonts/HarmonyOS_Sans_SC_Bold.ttf") format("opentype");
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: "HarmonyOS-Medium"; font-family: "HarmonyOS-Medium";
src: url("//ow.static.f2b211.com/static/fonts/HarmonyOS_Sans_SC_Medium.woff2") format("woff2"); src: url("//ow.static.f2b211.com/static/fonts/HarmonyOS_Sans_SC_Medium.ttf") format("opentype");
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
/* HarmonyOS-SemiBold1 */ /* HarmonyOS-SemiBold1 */
@font-face { @font-face {
font-family: "HarmonyOS-SemiBold"; font-family: "HarmonyOS-SemiBold";
src: url("//ow.static.f2b211.com/static/fonts/HarmonyOS_Sans_SC_Bold.woff2") format("woff2"); src: url("//ow.static.f2b211.com/static/fonts/HarmonyOS_Sans_SC_Bold.ttf") format("opentype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "HarmonyOS-Light";
src: url("//ow.static.f2b211.com/static/fonts/HarmonyOS_Sans_SC_Light.ttf") format("opentype");
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }

View File

@@ -1,10 +1,10 @@
.dl { .dl {
width: 100%; width: 100%;
padding-top: 1.42rem; padding-top: 1.89rem;
} }
.dl-t { .dl-t {
color: #cbcfd8; color: #cbcfd8;
font-size: 0.5rem; font-size: 0.63rem;
width: 100%; width: 100%;
text-align: center; text-align: center;
} }
@@ -13,6 +13,8 @@
font-size: clamp(16px, 1vw, 0.22rem); font-size: clamp(16px, 1vw, 0.22rem);
width: 100%; width: 100%;
text-align: center; text-align: center;
padding-top: 0.47rem; padding-top: 0.63rem;
padding-bottom: 0.27rem; padding-bottom: 0.37rem;
line-height: 1.8;
font-family: "HarmonyOS-Light";
} }

View File

@@ -23,9 +23,7 @@
.amd-img-6 { .amd-img-6 {
width: 100%; width: 100%;
} }
/* .amd-img-1 {
margin-top: 0.06rem;
} */
.amd-img-2, .amd-img-2,
.amd-img-3, .amd-img-3,
.amd-img-4, .amd-img-4,
@@ -41,11 +39,12 @@
/* 原有图片样式(重点修改) */ /* 原有图片样式(重点修改) */
.amd-img-1-1 { .amd-img-1-1 {
max-width: 14.4rem;
width: 100%; width: 100%;
/* 移除height:100%改用auto保持比例 */ /* 移除height:100%改用auto保持比例 */
height: auto; height: auto;
max-height: 4.28rem; /* 保留最大高度限制 */
/* aspect-ratio: 1440/429; */
display: block; display: block;
} }
@@ -60,7 +59,7 @@
flex: 1; flex: 1;
width: 50%; width: 50%;
/* 固定宽高比710/210 ≈ 3.38反向则210/710≈29.58% */ /* 固定宽高比710/210 ≈ 3.38反向则210/710≈29.58% */
aspect-ratio: 711/260; /* aspect-ratio: 711/261; */
overflow: hidden; /* 裁剪超出部分(可选) */ overflow: hidden; /* 裁剪超出部分(可选) */
} }
@@ -69,42 +68,44 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
display: block; display: block;
aspect-ratio: 711/261;
} }
.amd-img-3 { .amd-img-3 {
display: flex; display: flex;
height: auto;
gap: 0.2rem; gap: 0.2rem;
} }
/* .amd-img-3-left {
max-height:5.4rem;
} */
.amd-img-3-left,.amd-img-3-right { .amd-img-3-left,.amd-img-3-right {
flex: 1; flex: 1;
height: auto;
width: 50%; width: 50%;
max-height:5.4rem; }
.amd-img-3-right {
display: flex;
flex-direction: column;
justify-content: space-between
}
.amd-img-3-left img {
display: block;
aspect-ratio: 711/541;
} }
/* 3-1-left540高度的比例假设原始宽710高540 → 710/540≈1.31 */
.amd-img-3-1-left {
width: 100%;
aspect-ratio: 710/540;
overflow: hidden;
}
/* 3-2-right710:210比例 */ /* 3-2-right710:210比例 */
.amd-img-3-2-right { .amd-img-3-1-right,.amd-img-3-2-right {
width: 100%; width: 100%;
aspect-ratio: 710/261;
margin-top: 0.15rem;
overflow: hidden;
} }
.amd-img-3-1-right img, .amd-img-3-1-right img,
.amd-img-3-2-right img { .amd-img-3-2-right img {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: block; display: block;
aspect-ratio: 711/261;
} }
/* 统一处理其他图片容器的比例 */ /* 统一处理其他图片容器的比例 */

View File

@@ -0,0 +1,150 @@
.amd-box {
width: 100%;
background: #000;
overflow: hidden;
max-width: 1440px;
min-width: 1280px;
margin: 0 auto;
margin-top:-2rem;
}
.amd-img-box {
width: 100%;
/* 移除height:100%,避免继承高度导致比例失效 */
}
/* 动画基础样式(保留,仅微调) */
.amd-img-1,
.amd-img-2,
.amd-img-3,
.amd-img-4,
.amd-img-5,
.amd-img-6 {
width: 100%;
}
.amd-img-2,
.amd-img-3,
.amd-img-4,
.amd-img-5,
.amd-img-6 {
margin-top:0.15rem;
}
.fade-in {
opacity: 1 !important;
transform: translateY(0) !important;
visibility: visible !important;
}
/* 原有图片样式(重点修改) */
.amd-img-1-1 {
max-width: 14.4rem;
width: 100%;
/* 移除height:100%改用auto保持比例 */
height: auto;
/* aspect-ratio: 1440/429; */
display: block;
}
.amd-img-2 {
display: flex;
gap: 0.2rem;
}
/* 710:210比例的容器核心修改 */
.amd-img-2-1,
.amd-img-2-2 {
flex: 1;
width: 50%;
/* 固定宽高比710/210 ≈ 3.38反向则210/710≈29.58% */
/* aspect-ratio: 711/261; */
overflow: hidden; /* 裁剪超出部分(可选) */
}
.amd-img-2-1 img,
.amd-img-2-2 img {
width: 100%;
height: 100%;
display: block;
aspect-ratio: 711/261;
}
.amd-img-3 {
display: flex;
height: auto;
gap: 0.2rem;
}
.amd-img-3-left,.amd-img-3-right {
flex: 1;
height: auto;
width: 50%;
}
.amd-img-3-right {
display: flex;
flex-direction: column;
justify-content: space-between
}
.amd-img-3-left img {
display: block;
aspect-ratio: 711/541;
}
/* 3-2-right710:210比例 */
.amd-img-3-1-right,.amd-img-3-2-right {
width: 100%;
}
.amd-img-3-1-right img,
.amd-img-3-2-right img {
width: 100%;
height: 100%;
display: block;
aspect-ratio: 711/261;
}
/* 统一处理其他图片容器的比例 */
.amd-img-4 {
max-width: 1440px;
aspect-ratio: 1440/178; /* 按原始1440:178比例固定 */
}
.amd-img-4 img {
width: 100%;
height: 100%;
/* object-fit: cover; */
display: block;
}
.amd-img-5 {
max-width: 1440px;
display: flex;
gap: 0.2rem;
aspect-ratio: 1440/260; /* 1440:260比例 */
}
.amd-img-5 img {
flex: 1;
width: 50%;
height: 100%;
/* object-fit: cover; */
display: block;
}
.amd-img-6 {
max-width: 1440px;
aspect-ratio: 1440/260; /* 1440:260比例 */
overflow: hidden;
}
.amd-img-6 img {
width: 100%;
height: 100%;
/* object-fit: cover; */
display: block;
}

View File

@@ -4,7 +4,7 @@
margin: 0 auto; margin: 0 auto;
aspect-ratio: 1437/679; aspect-ratio: 1437/679;
/* max-height: 6.97rem; */ /* max-height: 6.97rem; */
padding-top: 4.02rem; padding-top:5.43rem;
} }
.bly .ba-slider .handle:after { .bly .ba-slider .handle:after {
@@ -32,7 +32,7 @@
transform: scale(0.8); transform: scale(0.8);
} }
.bly-t { .bly-t {
font-size: 0.5rem; font-size: 0.63rem;
color: #cbcfd8; color: #cbcfd8;
text-align: center; text-align: center;
width: 100%; width: 100%;
@@ -42,6 +42,7 @@
color: #cbcfd8; color: #cbcfd8;
text-align: center; text-align: center;
width: 100%; width: 100%;
padding-top: 0.38rem; padding-top: 0.51rem;
padding-bottom: 1.63rem; padding-bottom: 1.65rem;
font-family: "HarmonyOS-Light";
} }

View File

@@ -41,4 +41,7 @@
} }
.bottom-p p { .bottom-p p {
text-indent: -10px; text-indent: -10px;
line-height: 1.8;
margin-bottom: 0.1rem;
font-family: "HarmonyOS-Light";
} }

View File

@@ -11,11 +11,21 @@ body {
-webkit-overflow-scrolling: touch !important; -webkit-overflow-scrolling: touch !important;
/* padding: 0 !important; /* padding: 0 !important;
margin:0 !important; */ margin:0 !important; */
max-width:100vw; /* max-width:100% !important;
width: 100vw !important; width: 100vw !important;
margin:0 auto; */
/* max-width:100vw !important */ /* max-width:100vw !important */
/* margin:0 auto !important; */ /* margin:0 auto !important; */
} }
/* 当视口宽度大于1920px时生效 */
@media screen and (min-width: 1920px) {
/* 这里写你的样式 */
body {
max-width:100% !important;
width: 100vw !important;
}
}
.opacity0 { .opacity0 {
opacity: 0; opacity: 0;
transform: translateY(0.5rem); transform: translateY(0.5rem);

View File

@@ -6,7 +6,7 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% auto; 宽度铺满,高度自动 */ background-size: 100% auto; 宽度铺满,高度自动 */
min-width: 1280px; min-width: 1280px;
margin-top: 2.02rem; margin-top: 2.69rem;
} }
.ips-text { .ips-text {
color: #cbcfd8; color: #cbcfd8;
@@ -17,51 +17,71 @@
width: 100%; width: 100%;
} }
.ips-t { .ips-t {
font-size: 0.5rem; font-size: 0.63rem;
padding-top: 2.39rem; padding-top: 3.19rem;
padding-left: 4.21rem; padding-left: 5.63rem;
} }
.ips-p { .ips-p {
font-size: clamp(16px, 1vw, 0.22rem); font-size: clamp(16px, 1vw, 0.22rem);
padding-top: 0.86rem; padding-top: 0.86rem;
padding-left: 4.21rem; padding-left: 5.63rem;
line-height: 1.8; line-height: 1.8;
color:#cbcfd8;
font-family: "HarmonyOS-Light";
} }
.ips-img { .ips-img {
display: flex; display: flex;
flex-wrap: wrap; /* 允许换行 */ flex-wrap: wrap; /* 允许换行 */
justify-content: space-between; /* 左对齐也可设为center居中 */ justify-content: space-between; /* 左对齐也可设为center居中 */
margin-left: 4.21rem; margin-left: 5.63rem;
width: 5.1rem; width: 6.9rem;
padding-top: 1.7rem; padding-top: 2.65rem;
} }
.ips-img img { .ips-img img {
width: 1.61rem; max-width: 2.2rem;
} }
.ips-img img:nth-child(2) { .ips-img img:nth-child(2) {
margin-left: 1.88rem; margin-left: 2.5rem;
} }
.ips-img img:nth-child(4) { .ips-img img:nth-child(4) {
margin-left: 1.88rem; margin-left: 2.5rem;
padding-top: 0.92rem; margin-top: 1.22rem;
} }
.ips-img img:nth-child(3) { .ips-img img:nth-child(3) {
margin-top: 1.22rem;
}
padding-top: 0.92rem; .ips-img1 {
}
/* .ips-img {
width: 100%;
display: flex; display: flex;
padding-left: 7rem; flex-wrap: wrap; /* 允许换行 */
padding-top: 1.35rem; justify-content: space-between; /* 左对齐也可设为center居中 */
margin-left: 5.63rem;
width: 7.35rem;
padding-top: 2.03rem;
} }
.ips-img img {
.ips-img1 img:nth-child(1) {
width: 100%; width: 100%;
max-width: 2.15rem; max-width: 2.76rem;
max-height: 1.82rem; aspect-ratio: 276/168;
}
.ips-img1 img:nth-child(2) {
width: 100%;
max-width: 3.35rem;
aspect-ratio: 335/130;
}
.ips-img1 img:nth-child(3) {
width: 100%;
max-width: 2.67rem;
aspect-ratio: 267/118;
margin-top: 1.36rem;
}
.ips-img1 img:nth-child(4) {
width: 100%;
max-width: 3.39rem;
aspect-ratio: 339/122;
margin-top: 1.36rem;
} }
.ips-img img:nth-child(2) {
padding-left: 2rem;
} */

View File

@@ -17,6 +17,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
z-index: -10;
} }
/* 图片:按原始比例填充包裹层,不裁切,初始放大+过渡动画 */ /* 图片:按原始比例填充包裹层,不裁切,初始放大+过渡动画 */
@@ -84,7 +85,24 @@
height:clamp(50px,3vw,0.6rem); height:clamp(50px,3vw,0.6rem);
/* 最终高度vw单位 */ /* 最终高度vw单位 */
} }
.zoom-text {
padding-top: 1.68rem;
padding-bottom: 2rem;
}
.zoom-text div{
width: 100%;
text-align: center;
font-size:0.63rem;
color:#CBCFD8
}
.zoom-text p{
width: 100%;
text-align: center;
font-size:clamp(16px,1vw,0.22rem);
color:#cbcfd8;
padding-top: 0.55rem;
font-family: "HarmonyOS-Light";
}
/* 响应式适配1280px以下固定尺寸 */ /* 响应式适配1280px以下固定尺寸 */
@media (max-width: 1280px) { @media (max-width: 1280px) {
.zoom-container { .zoom-container {

View File

@@ -91,7 +91,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding-top: 1rem; padding-top: 1rem;
color: #555;
} }
/* 文字高亮样式(保留原有) */ /* 文字高亮样式(保留原有) */
@@ -100,20 +100,35 @@
transition: all 0.3s ease; transition: all 0.3s ease;
cursor: pointer; cursor: pointer;
border-radius: 4px; border-radius: 4px;
color:#48494D
} }
.carousel-text.active { .carousel-text.active {
font-weight: bold; /* font-weight: bold; */
transform: translateY(-3px); transform: translateY(-3px);
color: #fff; color: #fff !important;
} }
.carousel-text-t { .carousel-text-t {
font-size: 0.32rem; font-size: 0.32rem;
text-align: center; text-align: center;
/* color:#48494D */
}
.carousel-text-t1{
font-size: clamp(18px, 1vw, 0.26rem);
text-align: center;
/* color:#48494D */
}
.carousel-text-p1 {
font-size:clamp(16px, 1vw, 0.22rem);
padding-top: 0.28rem;
text-align: center;
font-family: "HarmonyOS-Light";
} }
.carousel-text-p { .carousel-text-p {
font-size:clamp(16px, 1vw, 0.22rem); font-size:clamp(16px, 1vw, 0.22rem);
padding-top: 0.3rem; padding-top: 0.3rem;
text-align: center; text-align: center;
font-family: "HarmonyOS-Light";
/* color:#48494D */
} }

View File

@@ -11,11 +11,19 @@
min-width: 1280px; min-width: 1280px;
} }
.m2-bg-t { .m2-bg-t {
font-size: 0.5rem; font-size: 0.63rem;
color: #cbcfd8; color: #cbcfd8;
width: 100%; width: 100%;
text-align: center; text-align: center;
margin-top: 1.78rem; padding-top: 1.78rem;
/* margin-top: 1.78rem; */
}
.m2-bg-t1 {
font-size: 0.36rem;
color: #cbcfd8;
width: 100%;
text-align: center;
padding-top: 1.78rem;
} }
.m2-img-box { .m2-img-box {
position: absolute; position: absolute;
@@ -26,5 +34,7 @@
gap: 0.2rem; gap: 0.2rem;
} }
.m2-img-box img { .m2-img-box img {
width: 3.5rem; max-width: 4.66rem;
aspect-ratio: 466/249
} }

View File

@@ -12,7 +12,8 @@
.progress-title { .progress-title {
font-size: 0.48rem; font-size: 0.48rem;
color: #cbcfd8; color: #cbcfd8;
padding: 1.6rem 0 0.78rem 0; padding: 2.13rem 0 0.78rem 0;
font-family: "HarmonyOS-Medium";
} }
.progress-item .label { .progress-item .label {
@@ -29,6 +30,7 @@
.progress-item .label .device-name { .progress-item .label .device-name {
flex: 1; flex: 1;
font-family: "HarmonyOS-Medium";
} }
.progress-item .label .baseline { .progress-item .label .baseline {
@@ -38,10 +40,10 @@
.progress-item .label .value { .progress-item .label .value {
font-size: 0.4rem; font-size: 0.4rem;
font-weight: 600;
min-width: 0.8rem; min-width: 0.8rem;
text-align: right; text-align: right;
margin-left: 0.16rem; margin-left: 0.16rem;
font-family: "HarmonyOS-Medium";
} }
.colorLinearGradient { .colorLinearGradient {
background: linear-gradient(90deg, #7e51ff, #d5dfff); background: linear-gradient(90deg, #7e51ff, #d5dfff);
@@ -174,15 +176,22 @@
font-size: 0.32rem !important; font-size: 0.32rem !important;
} }
.colorCBCFD8 { .colorCBCFD8 {
color: #cbcfd8 !important; color: #646778 !important;
} }
.color8A8787 { .color8A8787 {
color: #8a8787 !important; color: #646778 !important;
} }
.progress-p { .progress-p {
color: #cbcfd8; color: #cbcfd8;
font-size: 0.24rem; font-size: clamp(16px, 1vw, 0.22rem);
margin-top: 0.92rem; margin-top: 1.23rem;
margin-bottom: 1.52rem; margin-bottom: 5.04rem;
text-align: center;
}
.progress-p1 {
color: #cbcfd8;
font-size: clamp(16px, 1vw, 0.22rem);
margin-top: 1.56rem;
margin-bottom: 3.93rem;
text-align: center; text-align: center;
} }

View File

@@ -3,17 +3,18 @@
} */ } */
.qb-t { .qb-t {
width: 100%; width: 100%;
font-size: 0.5rem; font-size: 0.63rem;
color: #cbcfd8; color: #cbcfd8;
text-align: center; text-align: center;
padding-top: 3.03rem; padding-top: 4.52rem;
} }
.qb-p { .qb-p {
font-size: clamp(16px, 1vw, 0.22rem); font-size: clamp(16px, 1vw, 0.22rem);
color: #cbcfd8; color: #cbcfd8;
text-align: center; text-align: center;
padding-top: 0.38rem; padding-top: 0.54rem;
padding-bottom: 0.56rem; padding-bottom: 0.56rem;
font-family: "HarmonyOS-Light";
} }
.qb-bg-img1 { .qb-bg-img1 {
max-width: 16.43rem; max-width: 16.43rem;

View File

@@ -26,40 +26,58 @@
} }
.readon-t { .readon-t {
color: #cbcfd8; color: #cbcfd8;
font-size: 0.5rem; font-size: 0.68rem;
line-height: 1.4; /* line-height: 1.4; */
padding-top: 1.01rem; /* padding-top: 1.01rem;
padding-bottom: 0.50rem; padding-bottom: 0.50rem; */
}
.readon-t div:nth-child(1) {
padding-top: 1.34rem;
padding-bottom: 0.41rem;
}
.readon-t div:nth-child(2),.readon-t div:nth-child(3){
font-size:0.63rem;
} }
.readon-p { .readon-p {
color: #cbcfd8; color: #cbcfd8;
font-size: 0.64rem; font-size: 0.64rem;
} }
.readon-js { .readon-js {
color: #cbcfd8;
font-size: 0.27rem;
line-height: 1.8;
margin-top: 0.72rem;
font-family: "HarmonyOS-Light";
}
.readon-js1 {
color: #cbcfd8; color: #cbcfd8;
font-size: 0.22rem; font-size: 0.22rem;
line-height: 1.8; line-height: 1.8;
/* margin-top: 0.72rem; */ margin-top: 0.72rem;
font-family: "HarmonyOS-Light";
} }
.readon-img { .readon-img {
width: 100%; width: 100%;
max-width: 1440px; max-width: 1440px;
min-width: 1280px; min-width: 1280px;
margin-top: 12%; margin-top:2.37rem;
} }
.readon-img img { .readon-img img {
max-width: 2.84rem; width: 100%;
max-width: 3.78rem;
aspect-ratio: 378/218;
} }
.readon-img-box { .readon-img-box {
width: 100%; width: 100%;
min-width: 1280px; min-width: 1280px;
position: absolute; position: absolute;
margin: 0 auto; margin: 0 auto;
bottom: -30px; bottom: -0.61rem;
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 0.2rem; gap: 0.2rem;
} }
.readon-img-box img { .readon-img-box img {
width: 2.59rem; max-width: 3.45rem;
aspect-ratio:345/245;
} }

View File

@@ -6,7 +6,7 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% auto; */ background-size: 100% auto; */
min-width: 1280px; min-width: 1280px;
margin-top: 2.03rem; margin-top: 2.7rem;
} }
.rgb-text { .rgb-text {
position: absolute; position: absolute;
@@ -18,7 +18,7 @@
} }
.rgb-t { .rgb-t {
width: 100%; width: 100%;
font-size: 0.5rem; font-size: 0.63rem;
color: #cbcfd8; color: #cbcfd8;
text-align: center; text-align: center;
} }
@@ -26,20 +26,21 @@
font-size: clamp(16px, 1vw, 0.22rem); font-size: clamp(16px, 1vw, 0.22rem);
color: #cbcfd8; color: #cbcfd8;
text-align: center; text-align: center;
padding-top: 0.55rem; padding-top: 0.73rem;
line-height: 2.5; line-height: 1.8;
font-family: "HarmonyOS-Light";
} }
.rgb-img { .rgb-img {
width: 100%; width: 100%;
min-width: 1280px; min-width: 1280px;
position: absolute; position: absolute;
bottom: -1rem; bottom: -1.41rem;
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 0.2rem; gap: 0.2rem;
} }
.rgb-img img { .rgb-img img {
max-width:3.5rem; max-width:4.66rem;
aspect-ratio: 466/261;
display: block; display: block;
} }

View File

@@ -104,7 +104,7 @@
display: block; display: block;
} }
.tab-t { .tab-t {
font-size: 0.5rem; font-size: 0.63rem;
color: #cbcfd8; color: #cbcfd8;
width: 100%; width: 100%;
text-align: center; text-align: center;

View File

@@ -7,7 +7,7 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% auto; */ background-size: 100% auto; */
min-width: 1280px; min-width: 1280px;
margin-bottom: 0.53rem; margin-bottom: 0.71rem;
} }
.wift-bg-t { .wift-bg-t {
font-size: 0.5rem; font-size: 0.5rem;
@@ -20,26 +20,43 @@
color: #cbcfd8; color: #cbcfd8;
width: 100%; width: 100%;
text-align: center; text-align: center;
padding-top: 0.56rem; padding-top: 0.73rem;
line-height: 1.8; line-height: 1.8;
font-family: "HarmonyOS-Light";
}
.wift-bg-p1 {
font-size: clamp(16px, 1vw, 0.22rem);
color: #cbcfd8;
width: 100%;
text-align: center;
padding-top: 0.39rem;
line-height: 1.8;
font-family: "HarmonyOS-Light";
} }
.wift-bg-img { .wift-bg-img {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
max-height: 3.11rem;
position: absolute; position: absolute;
bottom: 1.46rem; bottom: 1.46rem;
} }
.wift-bg-img img { .wift-bg-img img {
width: 14.41rem;
width:10.1rem;
} }
.wift-t { .wift-t {
width: 100%; width: 100%;
color: #cbcfd8; color: #cbcfd8;
font-size: 0.5rem;
text-align: center; text-align: center;
margin-top: 2.95rem; margin-top: 2.95rem;
}
.wift-t div:nth-child(1) {
font-size: 0.72rem;
line-height: 1;
padding-bottom: 0.33rem;
}
.wift-t div:nth-child(2) {
font-size: 0.63rem;
line-height: 1;
} }

View File

@@ -18,7 +18,7 @@
} }
.wift6-t { .wift6-t {
width: 100%; width: 100%;
font-size: 0.5rem; font-size: 0.63rem;
color: #cbcfd8; color: #cbcfd8;
text-align: center; text-align: center;
} }
@@ -26,20 +26,21 @@
font-size: clamp(16px, 1vw, 0.22rem); font-size: clamp(16px, 1vw, 0.22rem);
color: #cbcfd8; color: #cbcfd8;
text-align: center; text-align: center;
padding-top: 0.56rem; padding-top: 0.74rem;
line-height: 1.8; line-height: 1.8;
font-family: "HarmonyOS-Light";
} }
.wift6-img { .wift6-img {
width: 100%; width: 100%;
min-width: 1280px; min-width: 1280px;
position: absolute; position: absolute;
bottom: -30px; bottom: -0.56rem;
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 0.2rem; gap: 0.4rem;
} }
.wift6-img img { .wift6-img img {
max-width: 5.36rem; max-width:7.15rem;
aspect-ratio: 715/309;
display: block; display: block;
} }

View File

@@ -6,7 +6,7 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% auto; */ background-size: 100% auto; */
min-width: 1280px; min-width: 1280px;
margin-top: 2.59rem; margin-top: 3.45rem;
} }
.xh-text { .xh-text {
width: 100%; width: 100%;
@@ -21,26 +21,32 @@
color: #cbcfd8; color: #cbcfd8;
text-align: center; text-align: center;
} }
.xh-t span:nth-child(1) {
font-size: 0.72rem;
}
.xh-t span:nth-child(2) {
font-size: 0.63rem;
margin-left: 0.13rem;
}
.xh-p { .xh-p {
font-size: clamp(16px, 1vw, 0.22rem); font-size: clamp(16px, 1vw, 0.22rem);
color: #cbcfd8; color: #cbcfd8;
text-align: center; text-align: center;
padding-top: 0.5rem; padding-top: 0.67rem;
font-family: "HarmonyOS-Light";
line-height: 2.5;
} }
.xh-img { .xh-img {
width: 100%; width: 100%;
min-width: 1280px; min-width: 1280px;
position: absolute; position: absolute;
bottom: 1.7rem; bottom: 1.8rem;
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 0.2rem; gap: 0.2rem;
} }
.xh-img img { .xh-img img {
max-width: 5.33rem; max-width: 7.1rem;
aspect-ratio: 710/308;
display: block; display: block;
} }
.xh-b-p { .xh-b-p {

View File

@@ -38,18 +38,18 @@
opacity: 1; opacity: 1;
} }
.xn-t { .xn-t {
font-size:0.5rem; font-size:0.63rem;
color: #cbcfd8; color: #cbcfd8;
text-align: center; text-align: center;
margin-top: 3.56rem; margin-top: 4.74rem;
margin-bottom: 0.95rem; margin-bottom: 1.26rem;
} }
.xn-p { .xn-p {
padding-top: 0.45rem; padding-top: 0.6rem;
} }
.xn-p p { .xn-p p {
font-size: clamp(16px, 1vw, 0.22rem); font-size: clamp(16px, 1vw, 0.22rem);
color: #fff; color: #CBCFD8;
text-align: center; text-align: center;
line-height: 2.4; line-height: 2.4;
} }

View File

@@ -3,7 +3,7 @@
position: relative; position: relative;
width: 100%; width: 100%;
min-width: 1280px; min-width: 1280px;
margin-top:1.87rem; margin-top:2.49rem;
aspect-ratio: 16/9; /* 2560/1440=16/9核心比例约束 */ aspect-ratio: 16/9; /* 2560/1440=16/9核心比例约束 */
/* background: url('../img/yq1.png'); */ /* background: url('../img/yq1.png'); */
background-size: cover; background-size: cover;
@@ -24,12 +24,12 @@
/* 宽幅限制生效 */ /* 宽幅限制生效 */
width: 100%; width: 100%;
min-width: 1280px; min-width: 1280px;
padding-top: 1.1rem; padding-top: 1.47rem;
} }
.overlay-text div { .overlay-text div {
width: 100%; width: 100%;
font-size: 0.47rem; font-size: 0.63rem;
color: #cbcfd8; color: #cbcfd8;
text-align: center; text-align: center;
line-height: 1; line-height: 1;
@@ -37,27 +37,31 @@
} }
.overlay-text p { .overlay-text p {
font-size: 0.17rem; font-size: clamp(16px,1vw,0.22rem);
color: #cbcfd8; color: #cbcfd8;
text-align: center; text-align: center;
padding-top: 0.43rem; padding-top: 0.43rem;
font-family: "HarmonyOS-Light";
} }
.float-cards { .float-cards {
display: flex; display: flex;
width: 100%; width: 100%;
justify-content: center; justify-content: center;
position: absolute; position: absolute;
bottom: -0.71rem; bottom: -1.05rem;
gap: 0.2rem; gap: 0.2rem;
} }
.float-cards img { .float-cards img {
width: 2.22rem; /* width: 2.96rem; */
/* width: 100%; */
max-width: 2.96rem;
aspect-ratio:296/215
} }
.bottom-desc { .bottom-desc {
text-align: center; text-align: center;
color: #cbcfd8; color: #cbcfd8;
font-size: clamp(16px, 1vw, 0.22rem); font-size: clamp(16px, 1vw, 0.22rem);
padding-top: 1.43rem; padding-top: 1.9rem;
width: 100%; width: 100%;
min-width: 1280px; min-width: 1280px;
} }