This commit is contained in:
@@ -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",
|
||||||
],
|
],
|
||||||
];
|
];
|
||||||
@@ -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>
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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";
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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-left:540高度的比例(假设原始宽710,高540 → 710/540≈1.31) */
|
|
||||||
.amd-img-3-1-left {
|
|
||||||
width: 100%;
|
|
||||||
aspect-ratio: 710/540;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 3-2-right:710:210比例 */
|
/* 3-2-right:710: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;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 统一处理其他图片容器的比例 */
|
/* 统一处理其他图片容器的比例 */
|
||||||
|
|||||||
150
public/static/index/pc/css/topic_laptop/amd1.css
Normal file
150
public/static/index/pc/css/topic_laptop/amd1.css
Normal 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-right:710: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;
|
||||||
|
}
|
||||||
@@ -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";
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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";
|
||||||
}
|
}
|
||||||
@@ -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);
|
||||||
|
|||||||
@@ -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;
|
|
||||||
} */
|
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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 */
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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
|
||||||
|
|
||||||
}
|
}
|
||||||
@@ -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;
|
||||||
}
|
}
|
||||||
@@ -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;
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user