This commit is contained in:
@@ -236,5 +236,9 @@ return [
|
||||
'3.5mm<br/>耳麦合一' => '3.5mm <br/> Combo Audio',
|
||||
'TF口3.0' => 'TF 3.0 <br/> Card Slot',
|
||||
'全功能<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/bottom.css">
|
||||
<link rel="stylesheet" href="__CSS__/topic_laptop/wift6.css">
|
||||
<style>
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
(function (doc, win)
|
||||
{
|
||||
|
||||
var docEl = doc.documentElement;
|
||||
var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
|
||||
var designWidth = 1920;
|
||||
var designWidth = 2560;
|
||||
var designRemPx = 100;
|
||||
|
||||
function setRootFontSize ()
|
||||
{
|
||||
console.log('触发')
|
||||
var clientWidth = docEl.clientWidth;
|
||||
if (!clientWidth) return;
|
||||
var fontSize = (clientWidth / designWidth) * designRemPx;
|
||||
@@ -79,13 +75,14 @@
|
||||
<div class="amd-img-2-2">{notempty name="data.perf.2"}<img src="{$data.perf.2.image}" alt="{$data.perf.2.title}">{/notempty}</div>
|
||||
</div>
|
||||
<div class="amd-img-3 opacity0" data-order="3" data-name="">
|
||||
<div class="amd-img-3-left">
|
||||
<div class="amd-img-3-left">
|
||||
{notempty name="data.perf.3"}<img src="{$data.perf.3.image}" alt="{$data.perf.3.title}" class="amd-img-3-1-left">{/notempty}
|
||||
</div>
|
||||
<div class="amd-img-3-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}
|
||||
</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">
|
||||
{notempty name="data.perf.5"}<img src="{$data.perf.5.image}" alt="{$data.perf.5.title}">{/notempty}
|
||||
</div>
|
||||
@@ -187,7 +184,11 @@
|
||||
<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-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>
|
||||
{/eq}
|
||||
<div class="readon-img opacity0" data-order="10">
|
||||
<img src="{$gpu_first_section.extra_image|default=''}" alt="">
|
||||
</div>
|
||||
@@ -200,7 +201,7 @@
|
||||
</div>
|
||||
{/notempty}
|
||||
<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-item">
|
||||
<div class="progress-bar-container">
|
||||
@@ -247,14 +248,18 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-p">{:lang_i18n('*此跑分为ORICO实验室测定所得，请以实际使用为准')}</div>
|
||||
<div class="progress-p1">{:lang_i18n('*此跑分为ORICO实验室测定所得，请以实际使用为准')}</div>
|
||||
</div>
|
||||
{notempty name="data.ram"}
|
||||
<div class="wift" >
|
||||
<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="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>
|
||||
{/eq}
|
||||
</div>
|
||||
<div class="wift-bg-img opacity0" data-order="14">
|
||||
{$data.ram.desc|raw}
|
||||
@@ -266,12 +271,16 @@
|
||||
<div class="m2">
|
||||
{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-t opacity0" data-order="15">{$hard_drive_first.title|default=''|raw}</div>
|
||||
<div class="m2-img-box opacity0" data-order="16">
|
||||
{volist name="data.hard_drive" id="ho"}
|
||||
<img src="{$ho.image}" alt="">
|
||||
{/volist}
|
||||
</div>
|
||||
{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>
|
||||
{/eq}
|
||||
<div class="m2-img-box opacity0" data-order="16">
|
||||
{volist name="data.hard_drive" id="ho"}
|
||||
<img src="{$ho.image}" alt="">
|
||||
{/volist}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/notempty}
|
||||
@@ -326,11 +335,23 @@
|
||||
<div class="ips-t">{$soft_light_first.title|raw}</div>
|
||||
<div class="ips-p">{$soft_light_first.short_title|raw}</div>
|
||||
{/notempty}
|
||||
<div class="ips-img opacity0" data-order="21">
|
||||
{volist name="data.screen_soft_light" id="so"}
|
||||
<img src="{$so.image}" alt="">
|
||||
{/volist}
|
||||
</div>
|
||||
|
||||
|
||||
{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">
|
||||
{volist name="data.screen_soft_light" id="so"}
|
||||
<img src="{$so.image}" alt="">
|
||||
{/volist}
|
||||
</div>
|
||||
{/eq}
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{/notempty}
|
||||
@@ -418,6 +439,10 @@
|
||||
</div>
|
||||
{/notempty}
|
||||
<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">
|
||||
<img src="__IMAGES__/topic_laptop/jk.png" alt="接口图" class="bg-img" id="bgImg">
|
||||
</div>
|
||||
@@ -451,9 +476,14 @@
|
||||
</div>
|
||||
<div class="carousel-texts">
|
||||
{volist name="data.scene_focus_images" id="so"}
|
||||
<div class="carousel-text {if $key == 0}active{/if}" data-index="{$key}">
|
||||
<div class="carousel-text-t">{$so.title}</div>
|
||||
<div class="carousel-text-p">{$so.short_title}</div>
|
||||
<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-p">{$so.short_title}</div>
|
||||
{/eq}
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
@@ -1024,7 +1054,7 @@
|
||||
const img = video.parentElement.querySelector('.fs-img');
|
||||
img.style.display = 'none';
|
||||
video.style.display = 'block';
|
||||
|
||||
|
||||
// 强制静音+播放
|
||||
video.muted = true;
|
||||
video.play().then(() => {
|
||||
@@ -1424,4 +1454,4 @@
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{/block}
|
||||
{/block}
|
||||
|
||||
@@ -1,24 +1,41 @@
|
||||
|
||||
@font-face {
|
||||
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-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
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-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
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-style: normal;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
@@ -20,32 +20,38 @@
|
||||
} */
|
||||
@font-face {
|
||||
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-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
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-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
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-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
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-style: normal;
|
||||
}
|
||||
/* HarmonyOS-SemiBold1 */
|
||||
@font-face {
|
||||
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-style: normal;
|
||||
}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
.dl {
|
||||
width: 100%;
|
||||
padding-top: 1.42rem;
|
||||
padding-top: 1.89rem;
|
||||
}
|
||||
.dl-t {
|
||||
color: #cbcfd8;
|
||||
font-size: 0.5rem;
|
||||
font-size: 0.63rem;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -13,6 +13,8 @@
|
||||
font-size: clamp(16px, 1vw, 0.22rem);
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding-top: 0.47rem;
|
||||
padding-bottom: 0.27rem;
|
||||
padding-top: 0.63rem;
|
||||
padding-bottom: 0.37rem;
|
||||
line-height: 1.8;
|
||||
font-family: "HarmonyOS-Light";
|
||||
}
|
||||
|
||||
@@ -1,149 +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-1 {
|
||||
margin-top: 0.06rem;
|
||||
} */
|
||||
.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 {
|
||||
width: 100%;
|
||||
/* 移除height:100%，改用auto保持比例 */
|
||||
height: auto;
|
||||
max-height: 4.28rem; /* 保留最大高度限制 */
|
||||
|
||||
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/260;
|
||||
overflow: hidden; /* 裁剪超出部分（可选） */
|
||||
}
|
||||
|
||||
.amd-img-2-1 img,
|
||||
.amd-img-2-2 img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.amd-img-3 {
|
||||
display: flex;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
/* .amd-img-3-left {
|
||||
max-height:5.4rem;
|
||||
} */
|
||||
.amd-img-3-left,.amd-img-3-right {
|
||||
flex: 1;
|
||||
width: 50%;
|
||||
max-height:5.4rem;
|
||||
}
|
||||
|
||||
/* 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比例 */
|
||||
.amd-img-3-2-right {
|
||||
width: 100%;
|
||||
aspect-ratio: 710/261;
|
||||
margin-top: 0.15rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.amd-img-3-1-right img,
|
||||
.amd-img-3-2-right img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 统一处理其他图片容器的比例 */
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
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;
|
||||
aspect-ratio: 1437/679;
|
||||
/* max-height: 6.97rem; */
|
||||
padding-top: 4.02rem;
|
||||
padding-top:5.43rem;
|
||||
}
|
||||
|
||||
.bly .ba-slider .handle:after {
|
||||
@@ -32,7 +32,7 @@
|
||||
transform: scale(0.8);
|
||||
}
|
||||
.bly-t {
|
||||
font-size: 0.5rem;
|
||||
font-size: 0.63rem;
|
||||
color: #cbcfd8;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
@@ -42,6 +42,7 @@
|
||||
color: #cbcfd8;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
padding-top: 0.38rem;
|
||||
padding-bottom: 1.63rem;
|
||||
padding-top: 0.51rem;
|
||||
padding-bottom: 1.65rem;
|
||||
font-family: "HarmonyOS-Light";
|
||||
}
|
||||
|
||||
@@ -41,4 +41,7 @@
|
||||
}
|
||||
.bottom-p p {
|
||||
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;
|
||||
/* padding: 0 !important;
|
||||
margin:0 !important; */
|
||||
max-width:100vw;
|
||||
/* max-width:100% !important;
|
||||
width: 100vw !important;
|
||||
margin:0 auto; */
|
||||
/* max-width:100vw !important */
|
||||
/* margin:0 auto !important; */
|
||||
}
|
||||
/* 当视口宽度大于1920px时生效 */
|
||||
@media screen and (min-width: 1920px) {
|
||||
/* 这里写你的样式 */
|
||||
body {
|
||||
max-width:100% !important;
|
||||
width: 100vw !important;
|
||||
}
|
||||
|
||||
}
|
||||
.opacity0 {
|
||||
opacity: 0;
|
||||
transform: translateY(0.5rem);
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% auto; 宽度铺满，高度自动 */
|
||||
min-width: 1280px;
|
||||
margin-top: 2.02rem;
|
||||
margin-top: 2.69rem;
|
||||
}
|
||||
.ips-text {
|
||||
color: #cbcfd8;
|
||||
@@ -17,51 +17,71 @@
|
||||
width: 100%;
|
||||
}
|
||||
.ips-t {
|
||||
font-size: 0.5rem;
|
||||
padding-top: 2.39rem;
|
||||
padding-left: 4.21rem;
|
||||
font-size: 0.63rem;
|
||||
padding-top: 3.19rem;
|
||||
padding-left: 5.63rem;
|
||||
}
|
||||
.ips-p {
|
||||
font-size: clamp(16px, 1vw, 0.22rem);
|
||||
padding-top: 0.86rem;
|
||||
padding-left: 4.21rem;
|
||||
padding-left: 5.63rem;
|
||||
line-height: 1.8;
|
||||
color:#cbcfd8;
|
||||
font-family: "HarmonyOS-Light";
|
||||
}
|
||||
|
||||
.ips-img {
|
||||
display: flex;
|
||||
flex-wrap: wrap; /* 允许换行 */
|
||||
justify-content: space-between; /* 左对齐，也可设为center（居中） */
|
||||
margin-left: 4.21rem;
|
||||
width: 5.1rem;
|
||||
padding-top: 1.7rem;
|
||||
margin-left: 5.63rem;
|
||||
width: 6.9rem;
|
||||
padding-top: 2.65rem;
|
||||
}
|
||||
|
||||
.ips-img img {
|
||||
width: 1.61rem;
|
||||
max-width: 2.2rem;
|
||||
}
|
||||
.ips-img img:nth-child(2) {
|
||||
margin-left: 1.88rem;
|
||||
margin-left: 2.5rem;
|
||||
}
|
||||
.ips-img img:nth-child(4) {
|
||||
margin-left: 1.88rem;
|
||||
padding-top: 0.92rem;
|
||||
margin-left: 2.5rem;
|
||||
margin-top: 1.22rem;
|
||||
}
|
||||
.ips-img img:nth-child(3) {
|
||||
|
||||
padding-top: 0.92rem;
|
||||
margin-top: 1.22rem;
|
||||
}
|
||||
/* .ips-img {
|
||||
width: 100%;
|
||||
|
||||
.ips-img1 {
|
||||
display: flex;
|
||||
padding-left: 7rem;
|
||||
padding-top: 1.35rem;
|
||||
flex-wrap: wrap; /* 允许换行 */
|
||||
justify-content: space-between; /* 左对齐，也可设为center（居中） */
|
||||
margin-left: 5.63rem;
|
||||
width: 7.35rem;
|
||||
padding-top: 2.03rem;
|
||||
}
|
||||
.ips-img img {
|
||||
width: 100%;
|
||||
max-width: 2.15rem;
|
||||
max-height: 1.82rem;
|
||||
|
||||
|
||||
.ips-img1 img:nth-child(1) {
|
||||
width: 100%;
|
||||
max-width: 2.76rem;
|
||||
aspect-ratio: 276/168;
|
||||
}
|
||||
.ips-img img:nth-child(2) {
|
||||
padding-left: 2rem;
|
||||
} */
|
||||
.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;
|
||||
}
|
||||
@@ -17,6 +17,7 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
z-index: -10;
|
||||
}
|
||||
|
||||
/* 图片：按原始比例填充包裹层，不裁切，初始放大+过渡动画 */
|
||||
@@ -84,7 +85,24 @@
|
||||
height:clamp(50px,3vw,0.6rem);
|
||||
/* 最终高度（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以下固定尺寸 */
|
||||
@media (max-width: 1280px) {
|
||||
.zoom-container {
|
||||
|
||||
@@ -91,7 +91,7 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: 1rem;
|
||||
color: #555;
|
||||
|
||||
}
|
||||
|
||||
/* 文字高亮样式（保留原有） */
|
||||
@@ -100,20 +100,35 @@
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
color:#48494D
|
||||
}
|
||||
|
||||
.carousel-text.active {
|
||||
font-weight: bold;
|
||||
/* font-weight: bold; */
|
||||
transform: translateY(-3px);
|
||||
color: #fff;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.carousel-text-t {
|
||||
font-size: 0.32rem;
|
||||
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 {
|
||||
font-size:clamp(16px, 1vw, 0.22rem);
|
||||
padding-top: 0.3rem;
|
||||
text-align: center;
|
||||
font-family: "HarmonyOS-Light";
|
||||
/* color:#48494D */
|
||||
}
|
||||
|
||||
@@ -11,11 +11,19 @@
|
||||
min-width: 1280px;
|
||||
}
|
||||
.m2-bg-t {
|
||||
font-size: 0.5rem;
|
||||
font-size: 0.63rem;
|
||||
color: #cbcfd8;
|
||||
width: 100%;
|
||||
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 {
|
||||
position: absolute;
|
||||
@@ -26,5 +34,7 @@
|
||||
gap: 0.2rem;
|
||||
}
|
||||
.m2-img-box img {
|
||||
width: 3.5rem;
|
||||
max-width: 4.66rem;
|
||||
aspect-ratio: 466/249
|
||||
|
||||
}
|
||||
@@ -12,7 +12,8 @@
|
||||
.progress-title {
|
||||
font-size: 0.48rem;
|
||||
color: #cbcfd8;
|
||||
padding: 1.6rem 0 0.78rem 0;
|
||||
padding: 2.13rem 0 0.78rem 0;
|
||||
font-family: "HarmonyOS-Medium";
|
||||
}
|
||||
|
||||
.progress-item .label {
|
||||
@@ -29,6 +30,7 @@
|
||||
|
||||
.progress-item .label .device-name {
|
||||
flex: 1;
|
||||
font-family: "HarmonyOS-Medium";
|
||||
}
|
||||
|
||||
.progress-item .label .baseline {
|
||||
@@ -38,10 +40,10 @@
|
||||
|
||||
.progress-item .label .value {
|
||||
font-size: 0.4rem;
|
||||
font-weight: 600;
|
||||
min-width: 0.8rem;
|
||||
text-align: right;
|
||||
margin-left: 0.16rem;
|
||||
font-family: "HarmonyOS-Medium";
|
||||
}
|
||||
.colorLinearGradient {
|
||||
background: linear-gradient(90deg, #7e51ff, #d5dfff);
|
||||
@@ -174,15 +176,22 @@
|
||||
font-size: 0.32rem !important;
|
||||
}
|
||||
.colorCBCFD8 {
|
||||
color: #cbcfd8 !important;
|
||||
color: #646778 !important;
|
||||
}
|
||||
.color8A8787 {
|
||||
color: #8a8787 !important;
|
||||
color: #646778 !important;
|
||||
}
|
||||
.progress-p {
|
||||
color: #cbcfd8;
|
||||
font-size: 0.24rem;
|
||||
margin-top: 0.92rem;
|
||||
margin-bottom: 1.52rem;
|
||||
font-size: clamp(16px, 1vw, 0.22rem);
|
||||
margin-top: 1.23rem;
|
||||
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;
|
||||
}
|
||||
@@ -3,17 +3,18 @@
|
||||
} */
|
||||
.qb-t {
|
||||
width: 100%;
|
||||
font-size: 0.5rem;
|
||||
font-size: 0.63rem;
|
||||
color: #cbcfd8;
|
||||
text-align: center;
|
||||
padding-top: 3.03rem;
|
||||
padding-top: 4.52rem;
|
||||
}
|
||||
.qb-p {
|
||||
font-size: clamp(16px, 1vw, 0.22rem);
|
||||
color: #cbcfd8;
|
||||
text-align: center;
|
||||
padding-top: 0.38rem;
|
||||
padding-top: 0.54rem;
|
||||
padding-bottom: 0.56rem;
|
||||
font-family: "HarmonyOS-Light";
|
||||
}
|
||||
.qb-bg-img1 {
|
||||
max-width: 16.43rem;
|
||||
|
||||
@@ -26,10 +26,17 @@
|
||||
}
|
||||
.readon-t {
|
||||
color: #cbcfd8;
|
||||
font-size: 0.5rem;
|
||||
line-height: 1.4;
|
||||
padding-top: 1.01rem;
|
||||
padding-bottom: 0.50rem;
|
||||
font-size: 0.68rem;
|
||||
/* line-height: 1.4; */
|
||||
/* padding-top: 1.01rem;
|
||||
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 {
|
||||
color: #cbcfd8;
|
||||
@@ -37,29 +44,40 @@
|
||||
}
|
||||
.readon-js {
|
||||
color: #cbcfd8;
|
||||
font-size: 0.27rem;
|
||||
line-height: 1.8;
|
||||
margin-top: 0.72rem;
|
||||
font-family: "HarmonyOS-Light";
|
||||
}
|
||||
.readon-js1 {
|
||||
color: #cbcfd8;
|
||||
font-size: 0.22rem;
|
||||
line-height: 1.8;
|
||||
/* margin-top: 0.72rem; */
|
||||
margin-top: 0.72rem;
|
||||
font-family: "HarmonyOS-Light";
|
||||
}
|
||||
.readon-img {
|
||||
width: 100%;
|
||||
max-width: 1440px;
|
||||
min-width: 1280px;
|
||||
margin-top: 12%;
|
||||
margin-top:2.37rem;
|
||||
}
|
||||
.readon-img img {
|
||||
max-width: 2.84rem;
|
||||
width: 100%;
|
||||
max-width: 3.78rem;
|
||||
aspect-ratio: 378/218;
|
||||
}
|
||||
.readon-img-box {
|
||||
width: 100%;
|
||||
min-width: 1280px;
|
||||
position: absolute;
|
||||
margin: 0 auto;
|
||||
bottom: -30px;
|
||||
bottom: -0.61rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
.readon-img-box img {
|
||||
width: 2.59rem;
|
||||
max-width: 3.45rem;
|
||||
aspect-ratio:345/245;
|
||||
}
|
||||
@@ -6,7 +6,7 @@
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% auto; */
|
||||
min-width: 1280px;
|
||||
margin-top: 2.03rem;
|
||||
margin-top: 2.7rem;
|
||||
}
|
||||
.rgb-text {
|
||||
position: absolute;
|
||||
@@ -18,7 +18,7 @@
|
||||
}
|
||||
.rgb-t {
|
||||
width: 100%;
|
||||
font-size: 0.5rem;
|
||||
font-size: 0.63rem;
|
||||
color: #cbcfd8;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -26,20 +26,21 @@
|
||||
font-size: clamp(16px, 1vw, 0.22rem);
|
||||
color: #cbcfd8;
|
||||
text-align: center;
|
||||
padding-top: 0.55rem;
|
||||
line-height: 2.5;
|
||||
padding-top: 0.73rem;
|
||||
line-height: 1.8;
|
||||
font-family: "HarmonyOS-Light";
|
||||
}
|
||||
.rgb-img {
|
||||
width: 100%;
|
||||
min-width: 1280px;
|
||||
position: absolute;
|
||||
bottom: -1rem;
|
||||
bottom: -1.41rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
.rgb-img img {
|
||||
max-width:3.5rem;
|
||||
|
||||
max-width:4.66rem;
|
||||
aspect-ratio: 466/261;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -104,7 +104,7 @@
|
||||
display: block;
|
||||
}
|
||||
.tab-t {
|
||||
font-size: 0.5rem;
|
||||
font-size: 0.63rem;
|
||||
color: #cbcfd8;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% auto; */
|
||||
min-width: 1280px;
|
||||
margin-bottom: 0.53rem;
|
||||
margin-bottom: 0.71rem;
|
||||
}
|
||||
.wift-bg-t {
|
||||
font-size: 0.5rem;
|
||||
@@ -20,26 +20,43 @@
|
||||
color: #cbcfd8;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding-top: 0.56rem;
|
||||
padding-top: 0.73rem;
|
||||
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 {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
max-height: 3.11rem;
|
||||
|
||||
position: absolute;
|
||||
bottom: 1.46rem;
|
||||
}
|
||||
.wift-bg-img img {
|
||||
|
||||
width:10.1rem;
|
||||
width: 14.41rem;
|
||||
|
||||
}
|
||||
.wift-t {
|
||||
width: 100%;
|
||||
color: #cbcfd8;
|
||||
font-size: 0.5rem;
|
||||
text-align: center;
|
||||
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 {
|
||||
width: 100%;
|
||||
font-size: 0.5rem;
|
||||
font-size: 0.63rem;
|
||||
color: #cbcfd8;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -26,20 +26,21 @@
|
||||
font-size: clamp(16px, 1vw, 0.22rem);
|
||||
color: #cbcfd8;
|
||||
text-align: center;
|
||||
padding-top: 0.56rem;
|
||||
padding-top: 0.74rem;
|
||||
line-height: 1.8;
|
||||
font-family: "HarmonyOS-Light";
|
||||
}
|
||||
.wift6-img {
|
||||
width: 100%;
|
||||
min-width: 1280px;
|
||||
position: absolute;
|
||||
bottom: -30px;
|
||||
bottom: -0.56rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.2rem;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
.wift6-img img {
|
||||
max-width: 5.36rem;
|
||||
|
||||
max-width:7.15rem;
|
||||
aspect-ratio: 715/309;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% auto; */
|
||||
min-width: 1280px;
|
||||
margin-top: 2.59rem;
|
||||
margin-top: 3.45rem;
|
||||
}
|
||||
.xh-text {
|
||||
width: 100%;
|
||||
@@ -21,26 +21,32 @@
|
||||
color: #cbcfd8;
|
||||
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 {
|
||||
font-size: clamp(16px, 1vw, 0.22rem);
|
||||
color: #cbcfd8;
|
||||
text-align: center;
|
||||
padding-top: 0.5rem;
|
||||
|
||||
line-height: 2.5;
|
||||
padding-top: 0.67rem;
|
||||
font-family: "HarmonyOS-Light";
|
||||
}
|
||||
.xh-img {
|
||||
width: 100%;
|
||||
min-width: 1280px;
|
||||
position: absolute;
|
||||
bottom: 1.7rem;
|
||||
bottom: 1.8rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
.xh-img img {
|
||||
max-width: 5.33rem;
|
||||
|
||||
max-width: 7.1rem;
|
||||
aspect-ratio: 710/308;
|
||||
display: block;
|
||||
}
|
||||
.xh-b-p {
|
||||
|
||||
@@ -38,18 +38,18 @@
|
||||
opacity: 1;
|
||||
}
|
||||
.xn-t {
|
||||
font-size:0.5rem;
|
||||
font-size:0.63rem;
|
||||
color: #cbcfd8;
|
||||
text-align: center;
|
||||
margin-top: 3.56rem;
|
||||
margin-bottom: 0.95rem;
|
||||
margin-top: 4.74rem;
|
||||
margin-bottom: 1.26rem;
|
||||
}
|
||||
.xn-p {
|
||||
padding-top: 0.45rem;
|
||||
padding-top: 0.6rem;
|
||||
}
|
||||
.xn-p p {
|
||||
font-size: clamp(16px, 1vw, 0.22rem);
|
||||
color: #fff;
|
||||
color: #CBCFD8;
|
||||
text-align: center;
|
||||
line-height: 2.4;
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-width: 1280px;
|
||||
margin-top:1.87rem;
|
||||
margin-top:2.49rem;
|
||||
aspect-ratio: 16/9; /* 2560/1440=16/9，核心比例约束 */
|
||||
/* background: url('../img/yq1.png'); */
|
||||
background-size: cover;
|
||||
@@ -24,12 +24,12 @@
|
||||
/* 宽幅限制生效 */
|
||||
width: 100%;
|
||||
min-width: 1280px;
|
||||
padding-top: 1.1rem;
|
||||
padding-top: 1.47rem;
|
||||
}
|
||||
|
||||
.overlay-text div {
|
||||
width: 100%;
|
||||
font-size: 0.47rem;
|
||||
font-size: 0.63rem;
|
||||
color: #cbcfd8;
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
@@ -37,27 +37,31 @@
|
||||
}
|
||||
|
||||
.overlay-text p {
|
||||
font-size: 0.17rem;
|
||||
font-size: clamp(16px,1vw,0.22rem);
|
||||
color: #cbcfd8;
|
||||
text-align: center;
|
||||
padding-top: 0.43rem;
|
||||
font-family: "HarmonyOS-Light";
|
||||
}
|
||||
.float-cards {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
bottom: -0.71rem;
|
||||
bottom: -1.05rem;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
.float-cards img {
|
||||
width: 2.22rem;
|
||||
/* width: 2.96rem; */
|
||||
/* width: 100%; */
|
||||
max-width: 2.96rem;
|
||||
aspect-ratio:296/215
|
||||
}
|
||||
.bottom-desc {
|
||||
text-align: center;
|
||||
color: #cbcfd8;
|
||||
font-size: clamp(16px, 1vw, 0.22rem);
|
||||
padding-top: 1.43rem;
|
||||
padding-top: 1.9rem;
|
||||
width: 100%;
|
||||
min-width: 1280px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user