This commit is contained in:
@@ -5,7 +5,6 @@ namespace app\index\controller;
|
||||
|
||||
use app\index\model\SysBannerModel;
|
||||
use think\facade\View;
|
||||
use think\Request;
|
||||
|
||||
class TopicLaptop extends Common
|
||||
{
|
||||
|
||||
@@ -219,4 +219,21 @@ return [
|
||||
'联系我们' => 'Contact US',
|
||||
'目录' => 'Content'
|
||||
],
|
||||
|
||||
// 笔记本专题 - 首页
|
||||
'topiclaptop/index' => [
|
||||
'CineBench R23 多核跑分' => 'Outperforms Ryzen 5 & Intel i5',
|
||||
'*此跑分为ORICO实验室测定所得，请以实际使用为准' => '*Data measured by ORICO Lab. Actual performance may vary.',
|
||||
'3DMARK Time Spy显卡得分' => 'Handles Office & Gaming with Ease',
|
||||
'肯辛通锁孔' => 'Kensington <br/> Lock Slot',
|
||||
'千兆网口' => 'Gigabit <br/> Ethernet',
|
||||
'USB-A<br/>(5Gbps)' => 'USB-A <br/> (5Gbps)',
|
||||
'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",
|
||||
],
|
||||
];
|
||||
@@ -1,5 +1,6 @@
|
||||
{extend name="public/base" /}
|
||||
{block name="style"}
|
||||
<link rel="stylesheet" href="__CSS__/topic_laptop/header.css">
|
||||
<link rel="stylesheet" href="__CSS__/topic_laptop/index.css">
|
||||
<link rel="stylesheet" href="__CSS__/topic_laptop/swiper.css">
|
||||
<link rel="stylesheet" href="__CSS__/topic_laptop/amd.css">
|
||||
@@ -41,80 +42,97 @@
|
||||
})(document, window);
|
||||
</script>
|
||||
{/block}
|
||||
{block name="header"}
|
||||
<!-- 重置header头为空 -->
|
||||
{/block}
|
||||
|
||||
{block name="main"}
|
||||
{notempty name="data.top_focus_images"}
|
||||
<!-- 顶部轮播 -->
|
||||
<div class="swiper-container auto-swiper-container" style="margin-top:60px;">
|
||||
<div class="swiper-wrapper">
|
||||
{volist name="data.top_focus_images" id="tfi"}
|
||||
<div class="swiper-slide auto-swiper-slide">
|
||||
<div class="swiper-container-texts" style="color:#fff">
|
||||
<div class="swiper-container-texts-t">轻启强大 跃级体验</div>
|
||||
<div class="swiper-container-texts-p">
|
||||
<div>锐龙R7 7735HS标压处理器</div>
|
||||
<div style="width: 1px; height: 0.16rem;background: #fff;margin: 0 0.15rem;"></div>
|
||||
<div>IPS柔光舒适屏</div>
|
||||
<div style="width: 1px; height: 0.16rem;background: #fff;margin: 0 0.15rem;"></div>
|
||||
<div>轻至1.45kg</div>
|
||||
</div>
|
||||
<div class="swiper-container-texts-t">{$tfi.title}</div>
|
||||
<div class="swiper-container-texts-p">{$tfi.desc|raw|htmlspecialchars_decode}</div>
|
||||
<div class="swiper-container-texts-img">
|
||||
<a href="">
|
||||
<img src="__IMAGES__/topic_laptop/ljgd.png" alt="">
|
||||
<a href="{$tfi.link}">
|
||||
<img src="{$tfi.extra_image}" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<img src="__IMAGES__/topic_laptop/banner.png" alt="" />
|
||||
<img src="{$tfi.image}" alt="{$tfi.title}" />
|
||||
</div>
|
||||
|
||||
{/volist}
|
||||
</div>
|
||||
</div>
|
||||
{/notempty}
|
||||
{notempty name="data.perf"}
|
||||
<!-- 笔记本配置图 -->
|
||||
<div class="amd-box">
|
||||
<div class="amd-img-header">
|
||||
<img src="__IMAGES__/topic_laptop/amd1.png" alt="" loading="lazy">
|
||||
{notempty name="data.perf.0"}
|
||||
<img src="{$data.perf.0.image}" alt="{$data.perf.0.title}" loading="lazy">
|
||||
{/notempty}
|
||||
</div>
|
||||
<div class="amd-img-main " data-order="2" data-name="">
|
||||
<div class="amd-img-main-left">
|
||||
<img src="__IMAGES__/topic_laptop/amd-l-1-1.png" alt="" loading="lazy">
|
||||
<img src="__IMAGES__/topic_laptop/amd-l-1-2.png" alt="" loading="lazy">
|
||||
<img src="__IMAGES__/topic_laptop/amd-l-1-3.png" alt="" loading="lazy">
|
||||
<img src="__IMAGES__/topic_laptop/amd-l-1-4.png" alt="" loading="lazy">
|
||||
{notempty name="data.perf.1"}
|
||||
<img src="{$data.perf.1.image}" alt="{$data.perf.1.title}" loading="lazy">
|
||||
{/notempty}
|
||||
{notempty name="data.perf.2"}
|
||||
<img src="{$data.perf.2.image}" alt="{$data.perf.2.title}" loading="lazy">
|
||||
{/notempty}
|
||||
{notempty name="data.perf.3"}
|
||||
<img src="{$data.perf.3.image}" alt="{$data.perf.3.title}" loading="lazy">
|
||||
{/notempty}
|
||||
{notempty name="data.perf.4"}
|
||||
<img src="{$data.perf.4.image}" alt="{$data.perf.4.title}" loading="lazy">
|
||||
{/notempty}
|
||||
</div>
|
||||
<div class="amd-img-main-right">
|
||||
<img src="__IMAGES__/topic_laptop/amd-r-1-1.png" alt="" loading="lazy">
|
||||
<img src="__IMAGES__/topic_laptop/amd-r-1-2.png" alt="" loading="lazy">
|
||||
<img src="__IMAGES__/topic_laptop/amd-r-1-3.png" alt="" loading="lazy">
|
||||
<img src="__IMAGES__/topic_laptop/amd-r-1-4.png" alt="" loading="lazy">
|
||||
{notempty name="data.perf.5"}
|
||||
<img src="{$data.perf.5.image}" alt="{$data.perf.5.title}" loading="lazy">
|
||||
{/notempty}
|
||||
{notempty name="data.perf.6"}
|
||||
<img src="{$data.perf.6.image}" alt="{$data.perf.6.title}" loading="lazy">
|
||||
{/notempty}
|
||||
{notempty name="data.perf.7"}
|
||||
<img src="{$data.perf.7.image}" alt="{$data.perf.7.title}" loading="lazy">
|
||||
{/notempty}
|
||||
{notempty name="data.perf.8"}
|
||||
<img src="{$data.perf.8.image}" alt="{$data.perf.8.title}" loading="lazy">
|
||||
{/notempty}
|
||||
</div>
|
||||
</div>
|
||||
<div class="amd-img-footer">
|
||||
<img src="__IMAGES__/topic_laptop/amd10.png" alt="" loading="lazy">
|
||||
{notempty name="data.perf.9"}
|
||||
<img src="{$data.perf.9.image}" alt="{$data.perf.9.title}" loading="lazy">
|
||||
{/notempty}
|
||||
</div>
|
||||
</div>
|
||||
{/notempty}
|
||||
{notempty name="data.cpu"}
|
||||
<!-- 超能引擎 -->
|
||||
<div class="cpu">
|
||||
<div class="cpu-main" style="background: url('__IMAGES__/topic_laptop/cpu.png');background-size:100% auto">
|
||||
{assign name="cpu_first_section" value=":array_shift($data.cpu)"/}
|
||||
<div class="cpu-main" style="background: url('{$cpu_first_section.image|default=\'\'}');background-size:100% auto">
|
||||
<div class="cpu-texts">
|
||||
<div class="cpu-texts-t">超能引擎 性能拉满</div>
|
||||
<p class="cpu-texts-p">强悍「芯」实力 定义性能新标杆</p>
|
||||
<div class="cpu-texts-t">{$cpu_first_section.title|default=''}</div>
|
||||
<p class="cpu-texts-p">{$cpu_first_section.short_title|default=''}</p>
|
||||
</div>
|
||||
<div class="cpu-footer">
|
||||
<div class="cpu-footer-img">
|
||||
<img src="__IMAGES__/topic_laptop/cpu-1.png" alt="" loading="lazy">
|
||||
<img src="__IMAGES__/topic_laptop/cpu-2.png" alt="" loading="lazy">
|
||||
<img src="__IMAGES__/topic_laptop/cpu-3.png" alt="" loading="lazy">
|
||||
{volist name="data.cpu" id="co"}
|
||||
<img src="{$co.image}" alt="{$co.title}" loading="lazy">
|
||||
{/volist}
|
||||
</div>
|
||||
<div class="cpu-footer-desc">
|
||||
搭载高性能CPU与GPU，多任务并行流畅不卡顿
|
||||
<div class="cpu-footer-desc">{$cpu_first_section.desc|default=''|raw}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{/notempty}
|
||||
<!-- 进度条 -->
|
||||
<div class="progress">
|
||||
<div class="progress-title">CineBench R23 多核跑分</div>
|
||||
<div class="progress-title">{:lang_i18n('CineBench R23 多核跑分')}</div>
|
||||
<div class="progress-section">
|
||||
<div class="progress-item">
|
||||
<div class="progress-bar-container">
|
||||
@@ -145,7 +163,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="label">
|
||||
<span class="device-name font18 colorCBCFD8 font18">锐龙9 6900HX:</span>
|
||||
<span class="device-name font18 colorCBCFD8 font18">{:lang_i18n('锐龙9 6900HX')}:</span>
|
||||
<span class="value font18 colorCBCFD8 font18">13183</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -156,7 +174,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="label">
|
||||
<span class="device-name font18 colorCBCFD8">酷睿i5-12450H:</span>
|
||||
<span class="device-name font18 colorCBCFD8">{:lang_i18n('酷睿i5-12450H')}:</span>
|
||||
<span class="value font18 colorCBCFD8">10200</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -172,37 +190,31 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-p">*此跑分为ORICO实验室测定所得，请以实际使用为准</div>
|
||||
<div class="progress-p">{:lang_i18n('*此跑分为ORICO实验室测定所得，请以实际使用为准')}</div>
|
||||
</div>
|
||||
{notempty name="data.gpu"}
|
||||
<!-- 显卡 GPU -->
|
||||
<div class="gpu">
|
||||
{assign name="gpu_first_section" value=":array_shift($data.gpu)"/}
|
||||
<div class="gpu-texts">
|
||||
<div class="gpu-texts-t">
|
||||
Radeon 680M</br>
|
||||
独显级显卡 低延迟 全能创作力
|
||||
<div class="gpu-texts-t">{$gpu_first_section.title|default=''|raw}</div>
|
||||
<div class="gpu-texts-p">{$gpu_first_section.short_title|default=''|raw}</div>
|
||||
</div>
|
||||
<div class="gpu-texts-p">
|
||||
搭配高效架构与先进制程，在低功耗下实现游戏创作场景的</br>
|
||||
逼真光影渲染与流畅性能输出
|
||||
</div>
|
||||
</div>
|
||||
<div class="gpu-main-img"
|
||||
style="background: url('__IMAGES__/topic_laptop/gpu-main.png');background-size:100% auto">
|
||||
<div class="gpu-main-img" style="background: url('{$gpu_first_section.image|default=\'\'}');background-size:100% auto">
|
||||
<div class="gpu-amd-img">
|
||||
<img src="__IMAGES__/topic_laptop/gpu-amd.png" alt="" loading="lazy">
|
||||
<img src="{$gpu_first_section.extra_image|default=''}" alt="" loading="lazy">
|
||||
</div>
|
||||
<div class="gpu-footer-imgs">
|
||||
<img src="__IMAGES__/topic_laptop/gpu-imgs-1.png" alt="" loading="lazy">
|
||||
<img src="__IMAGES__/topic_laptop/gpu-imgs-2.png" alt="" loading="lazy">
|
||||
<img src="__IMAGES__/topic_laptop/gpu-imgs-3.png" alt="" loading="lazy">
|
||||
<img src="__IMAGES__/topic_laptop/gpu-imgs-4.png" alt="" loading="lazy">
|
||||
{volist name="data.gpu" id="go"}
|
||||
<img src="{$go.image}" alt="{$go.title}" loading="lazy">
|
||||
{/volist}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{/notempty}
|
||||
<!-- 进度条 -->
|
||||
<div class="progress">
|
||||
<div class="progress-title">3DMARK Time Spy显卡得分</div>
|
||||
<div class="progress-title">{:lang_i18n('3DMARK Time Spy显卡得分')}</div>
|
||||
<div class="progress-section">
|
||||
<div class="progress-item">
|
||||
<div class="progress-bar-container">
|
||||
@@ -249,293 +261,296 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-p">*此跑分为ORICO实验室测定所得，请以实际使用为准</div>
|
||||
<div class="progress-p">{:lang_i18n('*此跑分为ORICO实验室测定所得，请以实际使用为准')}</div>
|
||||
</div>
|
||||
{notempty name="data.ram"}
|
||||
<!-- 内存 memory-->
|
||||
<div class="memory">
|
||||
<div class="memory-t">
|
||||
6400MT/s</br>高频狂飙 超大带宽，游戏创作飞快
|
||||
</div>
|
||||
<div class="memory-img"
|
||||
style="background: url('__IMAGES__/topic_laptop/memory-1.png'); background-size:100% auto">
|
||||
<div class="memory-p">
|
||||
搭载新一代DDR5架构，性能频率跃升至6400MHz，
|
||||
</br>16GB/32GB运行内存，双通道高带宽设计叠加低延迟优化，大型软件秒加</br>载;多任务多窗口同步并行也能流程无卡顿,尽情释放你的创作潜能。
|
||||
</div>
|
||||
<div class="memory-footer-img">
|
||||
<img src="__IMAGES__/topic_laptop/memory-2.png">
|
||||
</div>
|
||||
<div class="memory-t">{$data.ram.title|raw}</div>
|
||||
<div class="memory-img" style="background: url('{$data.ram.image|default=\'\'}'); background-size:100% auto">
|
||||
<div class="memory-p">{$data.ram.short_title|raw}</div>
|
||||
<div class="memory-footer-img">{$data.ram.desc|raw}</div>
|
||||
</div>
|
||||
</div>
|
||||
{/notempty}
|
||||
{notempty name="data.hard_drive"}
|
||||
<!-- ssd -->
|
||||
<div class="m2">
|
||||
<div class="m2-bg" style="background: url('__IMAGES__/topic_laptop/ssd-img-1.png');background-size:100% auto">
|
||||
<div class="m2-bg-t1">
|
||||
支持PCle 4.0 M.2 扩容</br>释放存储潜能
|
||||
</div>
|
||||
|
||||
{assign name="ssd_first_section" value=":array_shift($data.hard_drive)"/}
|
||||
<div class="m2-bg" style="background: url('{$ssd_first_section.image|default=\'\'}');background-size:100% auto">
|
||||
<div class="m2-bg-t1">{$ssd_first_section.title|default=''|raw}</div>
|
||||
<div class="m2-img-box">
|
||||
<img src="__IMAGES__/topic_laptop/ssd-img-2.png" alt="" loading="lazy">
|
||||
<img src="__IMAGES__/topic_laptop/ssd-img-3.png" alt="" loading="lazy">
|
||||
<img src="__IMAGES__/topic_laptop/ssd-img-4.png" alt="" loading="lazy">
|
||||
|
||||
{volist name="data.hard_drive" id="ho"}
|
||||
<img src="{$ho.image}" alt="{$ho.title}" loading="lazy">
|
||||
{/volist}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/notempty}
|
||||
{notempty name="data.cooling_system"}
|
||||
<!-- fs -->
|
||||
<div class="fs">
|
||||
{notempty name="data.cooling_system.0"}
|
||||
<div class="dl">
|
||||
<div class="dl-t">
|
||||
静享 45W强悍性能</br>
|
||||
“飓冷”轻音散热系统
|
||||
</div>
|
||||
<p class="dl-p">
|
||||
牛角形双热管架构搭配定制高性能涡轮风扇，超强的散热能力，长时</br>间运行不降频；在创作、游戏等高负载场景，性能拉满 全程高能
|
||||
</p>
|
||||
<div class="dl-t">{$data.cooling_system.0.title|raw}</div>
|
||||
<p class="dl-p">{$data.cooling_system.0.short_title|raw}</p>
|
||||
</div>
|
||||
{/notempty}
|
||||
<div class="fs-box">
|
||||
{notempty name="data.cooling_system.0"}
|
||||
<video
|
||||
src="https://ow.static.f2b211.com/storage/videos/banner/20251219/584940a4e2f48d0c08345ce84b93826a_dmlkZW9fcWluaXU=.mp4"
|
||||
src="{$data.cooling_system.0.video|default=''}"
|
||||
class="fs-video" muted loop playsinline autoplay
|
||||
poster="https://dev.ow.f2b211.com/storage/images/banner/20251220/bd1f918627eecb7ff2898229e275729c.png"
|
||||
poster="{$data.cooling_system.0.image|default=''}"
|
||||
preload="auto" style="width: 100%;">
|
||||
您的浏览器不支持HTML5视频播放，请升级浏览器
|
||||
</video>
|
||||
<div class="fs-ts">*散热图仅为示意，具体以实物为准</div>
|
||||
<div class="fs-ts">{$data.cooling_system.0.desc|raw}</div>
|
||||
{/notempty}
|
||||
<div class="fs-box-img">
|
||||
<div class="fs-h-img">
|
||||
<img src="__IMAGES__/topic_laptop/fs-img-1.png" alt="">
|
||||
<img src="__IMAGES__/topic_laptop/fs-img-2.png" alt="">
|
||||
{notempty name="data.cooling_system.1"}<img src="{$data.cooling_system.1.image}" alt="">{/notempty}
|
||||
{notempty name="data.cooling_system.2"}<img src="{$data.cooling_system.2.image}" alt="">{/notempty}
|
||||
</div>
|
||||
<div class="fs-b-img" style="min-height: 20px;">
|
||||
<img src="__IMAGES__/topic_laptop/fs-img-3.png" alt="">
|
||||
{notempty name="data.cooling_system.3"}<img src="{$data.cooling_system.3.image}" alt="">{/notempty}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/notempty}
|
||||
{notempty name="data.apps"}
|
||||
<!-- 性能大拿 -->
|
||||
<div class="xn">
|
||||
<div class="xn-t">性能大跃级 拿捏多场景</div>
|
||||
<div class="xn-t">{$data.apps.title|default=''}</div>
|
||||
<div class="xn-container">
|
||||
<div class="xn-image-section">
|
||||
<img src="https://dev.ow.f2b211.com/storage/images/banner/20251215/60cac336860c8b69e34bb7de81cc9c17.png"
|
||||
alt="" class="zoom-image first-image">
|
||||
<img src="{$data.apps.image|default=''}" alt="" class="zoom-image first-image">
|
||||
</div>
|
||||
</div>
|
||||
<div class="xn-p">
|
||||
<p>游戏软件: ELDÀ、逆水寒、DIABLO、AION、无悔华夏、E- sports Game、原神</p>
|
||||
<p>设计/编程: python、C语言、CAD、mysql、PS、Pr、DW、3Dmax、C4D、Ai、Au、Ae、Fw、En</p>
|
||||
<p> 办公/娱乐: 钉钉、WPS、XMind、有道云笔记、爱奇艺、音乐软件、同花顺</p>
|
||||
</div>
|
||||
<div class="xn-p">{$data.apps.desc|default=''|raw}</div>
|
||||
</div>
|
||||
{/notempty}
|
||||
{notempty name="data.screen_soft_light"}
|
||||
<!-- IPS -->
|
||||
<div class="ips">
|
||||
<div class="ips-t">
|
||||
14寸IPS 柔光舒适屏</br>
|
||||
细腻 真实 沉浸
|
||||
</div>
|
||||
<div class="ips-bg" style="background: url('__IMAGES__/topic_laptop/ips-img-1.png');background-size:100% auto">
|
||||
<p>超清IPS屏，专业级色彩表现，画面显示生动细腻。 </br>办公、学习、创作、游戏、观影，长时间专注眼部依然舒适</p>
|
||||
{assign name="ips_fisrt_section" value=":array_shift($data.screen_soft_light)"/}
|
||||
<div class="ips-t">{$ips_fisrt_section.title|default=''|raw}</div>
|
||||
<div class="ips-bg" style="background: url('{$ips_fisrt_section.image|default=\'\'}');background-size:100% auto">
|
||||
<p>{$ips_fisrt_section.short_title|default=''|raw}</p>
|
||||
</div>
|
||||
<div class="ips-imgs">
|
||||
<img src="__IMAGES__/topic_laptop/ips-img-2.png" alt="">
|
||||
<img src="__IMAGES__/topic_laptop/ips-img-3.png" alt="">
|
||||
<img src="__IMAGES__/topic_laptop/ips-img-4.png" alt="">
|
||||
<img src="__IMAGES__/topic_laptop/ips-img-5.png" alt="">
|
||||
{volist name="data.screen_soft_light" id="lo"}
|
||||
<img src="{$lo.image}" alt="">
|
||||
{/volist}
|
||||
</div>
|
||||
</div>
|
||||
{/notempty}
|
||||
{notempty name="data.screen_color_gamut"}
|
||||
<!-- 色彩RGB -->
|
||||
<div class="rgb">
|
||||
<div class="rgb-t">100%sRGB超广色域</br>斑斓色彩跃然眼前</div>
|
||||
<div class="rgb-bg" style="background: url('__IMAGES__/topic_laptop/rgb-img-1.png');background-size:100% auto">
|
||||
<p class="rgb-p">色彩丰富真实、细节生动逼真，还原万物本色， </br>画面更出彩。每台电脑出厂前专业调校，算法硬件助力，色彩精准度高。</p>
|
||||
{assign name="gamut_first_section" value=":array_shift($data.screen_color_gamut)"/}
|
||||
<div class="rgb-t">{$gamut_first_section.title|default=''|raw}</div>
|
||||
<div class="rgb-bg" style="background: url('{$gamut_first_section.image|default=\'\'}');background-size:100% auto">
|
||||
<p class="rgb-p">{$gamut_first_section.short_title|default=''|raw}</p>
|
||||
</div>
|
||||
<div class="rgb-imgs">
|
||||
<img src="__IMAGES__/topic_laptop/rgb-img-2.png" alt="">
|
||||
<img src="__IMAGES__/topic_laptop/rgb-img-3.png" alt="">
|
||||
<img src="__IMAGES__/topic_laptop/rgb-img-4.png" alt="">
|
||||
{volist name="data.screen_color_gamut" id="go"}
|
||||
<img src="{$go.image}" alt="">
|
||||
{/volist}
|
||||
</div>
|
||||
</div>
|
||||
{/notempty}
|
||||
{notempty name="data.screen_anti_glare"}
|
||||
<!-- 对比图 -->
|
||||
<div class="bly">
|
||||
{assign name="glare_first_section" value=":array_shift($data.screen_anti_glare)"/}
|
||||
<div class="bly-texts">
|
||||
<div class="bly-t">舒适不累眼</div>
|
||||
<div class="bly-p">有效防眩光，显示清晰不刺眼，强光下依然表现出色</br>搭配类自然光护眼科技，呵护双眼，久看不累</div>
|
||||
<div class="bly-t">{$glare_first_section.title|default=''|raw}</div>
|
||||
<div class="bly-p">{$glare_first_section.short_title|default=''|raw}</div>
|
||||
</div>
|
||||
<div class="beforeafter ba-slider">
|
||||
|
||||
<img src="https://dev.ow.f2b211.com/storage/images/banner/20251215/70f84be28ec96250a7c44ae51ffecdf0.webp"
|
||||
loading="lazy">
|
||||
<div class="beforeafter ba-slider" style="border-radius: 0.14rem;height: 3.4rem;">
|
||||
{assign name="glare_left" value=":array_shift($data.screen_anti_glare)"/}
|
||||
<img src="{$glare_left.image|default=''}" loading="lazy">
|
||||
<div class="resize">
|
||||
|
||||
<img src="https://dev.ow.f2b211.com/storage/images/banner/20251215/09d2f45344a3f28db4e5f767888a845d.webp"
|
||||
loading="lazy">
|
||||
{assign name="glare_right" value=":array_shift($data.screen_anti_glare)"/}
|
||||
<img src="{$glare_right.image|default=''}" loading="lazy">
|
||||
</div>
|
||||
<span class="handle"></span>
|
||||
</div>
|
||||
</div>
|
||||
{/notempty}
|
||||
{notempty name="data.exterior_texture"}
|
||||
<!-- 轮播图 -->
|
||||
<div class="qb">
|
||||
<div class="qb-text">
|
||||
<div class="qb-t">轻薄有型 便捷随行</div>
|
||||
<div class="qb-p">外观优雅简约 ，黄金比例机身，棱角分明，</br>
|
||||
诠释利落风格。表面精密喷砂，复刻Mac级出众质感</div>
|
||||
{assign name="texture_first_section" value=":array_shift($data.exterior_texture)"/}
|
||||
<div class="qb-t">{$texture_first_section.title|default=''|raw}</div>
|
||||
<div class="qb-p">{$texture_first_section.short_title|default=''|raw}</div>
|
||||
<div class="swiper-container auto-swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
{volist name="data.exterior_texture" id="to"}
|
||||
<a class="swiper-slide auto-swiper-slide">
|
||||
<img src="__IMAGES__/topic_laptop/qb-img-1.png" alt="" loading="lazy">
|
||||
<img src="{$to.image}" alt="" loading="lazy">
|
||||
</a>
|
||||
|
||||
{/volist}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- wift -->
|
||||
<div class="wifi" style="background: url('__IMAGES__/topic_laptop/wifi-img-1.png');background-size:100% auto">
|
||||
{/notempty}
|
||||
{notempty name="data.network_card"}
|
||||
<!-- wifi -->
|
||||
{assign name="wifi_first_section" value=":array_shift($data.network_card)"/}
|
||||
<div class="wifi" style="background: url('{$wifi_first_section.image|default=\'\'}');background-size:100% auto">
|
||||
<div class="wifi-texts">
|
||||
<div class="wifi-t">网速时刻在线 跃级流畅 </br>千兆有线网+WiFi6</div>
|
||||
<div class="wifi-p">折叠式千兆有线网口和Wi-Fi6无线超能网卡，速度快、抗干扰、低延时，满</br>足多种学习和办公场合需要，带来前所未有的畅连体验，学习,办公流畅不</br>卡顿,拒绝掉线尴尬
|
||||
</div>
|
||||
<div class="wifi-t">{$wifi_first_section.title|default=''|raw}</div>
|
||||
<div class="wifi-p">{$wifi_first_section.short_title|default=''|raw}</div>
|
||||
</div>
|
||||
<div class="wifi-img">
|
||||
|
||||
<img src="__IMAGES__/topic_laptop/wifi-img-2.png" alt="" loading="lazy">
|
||||
<img src="__IMAGES__/topic_laptop/wifi-img-3.png" alt="" loading="lazy">
|
||||
|
||||
{volist name="data.network_card" id="co"}
|
||||
<img src="{$co.image}" alt="" loading="lazy">
|
||||
{/volist}
|
||||
</div>
|
||||
</div>
|
||||
{/notempty}
|
||||
{notempty name="data.battery_life"}
|
||||
<!-- 长久续航 -->
|
||||
<div class="endurance"
|
||||
style="background: url('__IMAGES__/topic_laptop/endurance-img-3.png');background-size:100% auto">
|
||||
|
||||
{assign name="battery_first_section" value=":array_shift($data.battery_life)"/}
|
||||
<div class="endurance" style="background: url('{$battery_first_section.image|default=\'\'|raw}');background-size:100% auto">
|
||||
<div class="endurance-texts">
|
||||
<div class="endurance-t">
|
||||
<span>11.4h</span>
|
||||
<span>长久续航 电量满满</span>
|
||||
</div>
|
||||
<div class="endurance-p">配备57.5Wh大电池，续航长达11.4h，搭配100W闪充充电器，充一次，用一天</div>
|
||||
<div class="endurance-t">{$battery_first_section.title|default=''|raw}</div>
|
||||
<div class="endurance-p">{$battery_first_section.short_title|default=''|raw}</div>
|
||||
</div>
|
||||
<div class="endurance-img">
|
||||
|
||||
<img src="__IMAGES__/topic_laptop/endurance-img-1.png" alt="" loading="lazy">
|
||||
<img src="__IMAGES__/topic_laptop/endurance-img-2.png" alt="" loading="lazy">
|
||||
{volist name="data.battery_life" id="lo"}
|
||||
<img src="{$lo.image}" alt="" loading="lazy">
|
||||
{/volist}
|
||||
</div>
|
||||
<div class="endurance-footer-p">*此数据为ORICO实验室测定所得，请以实际使用为准；</div>
|
||||
<div class="endurance-footer-p">{$battery_first_section.desc|default=''|raw}</div>
|
||||
</div>
|
||||
|
||||
{/notempty}
|
||||
<!-- 接口大满贯 -->
|
||||
<div class="zoom-t">接口大满贯</div>
|
||||
<div class="zoom-t">{:lang_i18n('接口大满贯')}</div>
|
||||
<div class="zoom-container" id="zoomContainer">
|
||||
<div class="img-wrapper">
|
||||
<p class="zoom-p">标配多种接口，会议室连接电脑、</br>U盘传输文件、TF卡读取等，全都轻松搞定</p>
|
||||
<p class="zoom-p">{:lang_i18n('标配多种接口，会议室连接电脑、</br>U盘传输文件、TF卡读取等，全都轻松搞定')}</p>
|
||||
<img src="__IMAGES__/topic_laptop/zoom-img-1.png" alt="接口图" class="bg-img" id="bgImg" loading="lazy">
|
||||
</div>
|
||||
<!-- 左边 -->
|
||||
<div class="annotation anno-delay-1" style="top:60%; left: 37.5%;">
|
||||
<span style="text-align: center; font-size: 0.18rem;">肯辛通锁孔</span>
|
||||
<span style="text-align: center; font-size: 0.18rem;">{:lang_i18n('肯辛通锁孔')}</span>
|
||||
</div>
|
||||
<div class="annotation anno-delay-1 anno-up" style="top: 31.5%; left: 32%;"><span
|
||||
style="text-align: center; font-size: 0.18rem;">千兆网口</span>
|
||||
<div class="annotation anno-delay-1 anno-up" style="top: 31.5%; left: 32%;">
|
||||
<span style="text-align: center; font-size: 0.18rem;">{:lang_i18n('千兆网口')}</span>
|
||||
</div>
|
||||
<div class="annotation anno-delay-1" style="top: 68%; left: 26%;">
|
||||
<span style="text-align: center; font-size: 0.16rem;">{:lang_i18n('USB-A<br />(5Gbps)')}</span>
|
||||
</div>
|
||||
<div class="annotation anno-delay-1 anno-up1" style="top:35.5%; left:18%;">
|
||||
<span style="text-align: center; font-size: 0.18rem;">{:lang_i18n('USB-A<br />(480Mbps)')}</span>
|
||||
</div>
|
||||
<div class="annotation anno-delay-1" style="top: 73%; left: 14.5%;">
|
||||
<span style="text-align: center; font-size: 0.18rem;">{:lang_i18n('3.5mm<br />耳麦合一')}</span>
|
||||
</div>
|
||||
<div class="annotation anno-delay-1 anno-up" style="top: 43%; left: 9%;">
|
||||
<span style="text-align: center; font-size: 0.18rem;">{:lang_i18n('TF口3.0')}</span>
|
||||
</div>
|
||||
<div class="annotation anno-delay-1" style="top: 68%; left: 26%;"><span
|
||||
style="text-align: center; font-size: 0.16rem;">USB-A<br />(5Gbps)</span></div>
|
||||
<div class="annotation anno-delay-1 anno-up1" style="top:35.5%; left:18%;"><span
|
||||
style="text-align: center; font-size: 0.18rem;">USB-A<br />(480Mbps)</span></div>
|
||||
<div class="annotation anno-delay-1" style="top: 73%; left: 14.5%;"><span
|
||||
style="text-align: center; font-size: 0.18rem;">3.5mm<br />耳麦合一</span></div>
|
||||
<div class="annotation anno-delay-1 anno-up" style="top: 43%; left: 9%;"><span
|
||||
style="text-align: center; font-size: 0.18rem;">TF口3.0</span></div>
|
||||
<!-- 右边 -->
|
||||
<div class="annotation anno-delay-1" style="top: 64%; left: 58%;"><span
|
||||
style="text-align: center; font-size: 0.18rem;">全功能<br />USB-C</span></div>
|
||||
<div class="annotation anno-up anno-delay-1" style="top: 34%; left: 65%;"><span
|
||||
style="text-align: center; font-size: 0.18rem;">HDMI</span></div>
|
||||
<div class="annotation anno-delay-1" style="top: 70.5%; left: 70.5%;"><span
|
||||
style="text-align: center; font-size: 0.18rem;">USB-A<br />(5Gbps)</span></div>
|
||||
<div class="annotation anno-up1 anno-delay-1" style="top:38.5%; left: 77%;"><span
|
||||
style="text-align: center; font-size: 0.18rem;">USB-C<br />(5Gbps)</span></div>
|
||||
<div class="annotation anno-delay-1" style="top: 64%; left: 58%;">
|
||||
<span style="text-align: center; font-size: 0.18rem;">{:lang_i18n('全功能<br />USB-C')}</span>
|
||||
</div>
|
||||
<div class="annotation anno-up anno-delay-1" style="top: 34%; left: 65%;">
|
||||
<span style="text-align: center; font-size: 0.18rem;">{:lang_i18n('HDMI')}</span>
|
||||
</div>
|
||||
<div class="annotation anno-delay-1" style="top: 70.5%; left: 70.5%;">
|
||||
<span style="text-align: center; font-size: 0.18rem;">{:lang_i18n('USB-A<br />(5Gbps)')}</span>
|
||||
</div>
|
||||
<div class="annotation anno-up1 anno-delay-1" style="top:38.5%; left: 77%;">
|
||||
<span style="text-align: center; font-size: 0.18rem;">{:lang_i18n('USB-C<br />(5Gbps)')}</span>
|
||||
</div>
|
||||
</div>
|
||||
{notempty name="data.scene_focus_images"}
|
||||
<!-- 滑块 -->
|
||||
<div class="swiper swiper-container-1" style="width: 6.82rem;margin: 0 auto;">
|
||||
<div class="swiper-wrapper">
|
||||
<!-- 滑块1 -->
|
||||
{volist name="data.scene_focus_images" id="fo"}
|
||||
<div class="swiper-slide" style="width: 4.5rem;">
|
||||
<img src="__IMAGES__/topic_laptop/hk-img-1.png" alt="" style="width: 4.5rem;">
|
||||
<img src="{$fo.image}" alt="" style="width: 4.5rem;">
|
||||
<div>
|
||||
<div class="swiper-slide-t">高效 时刻在线</div>
|
||||
<div class="swiper-slide-p">长续航, 随时随地自在办公
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 滑块2 -->
|
||||
<div class="swiper-slide" style="width: 4.5rem;">
|
||||
<img src="__IMAGES__/topic_laptop/hk-img-1.png" alt="图片2" style="width: 4.5rem;">
|
||||
<div>
|
||||
<div class="swiper-slide-t">高效 时刻在线</div>
|
||||
<div class="swiper-slide-p">长续航, 随时随地自在办公
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 滑块3 -->
|
||||
<div class="swiper-slide" style="width: 4.5rem;">
|
||||
<img src="__IMAGES__/topic_laptop/hk-img-1.png" alt="" style="width: 4.5rem;">
|
||||
<div>
|
||||
<div class="swiper-slide-t">高效 时刻在线</div>
|
||||
<div class="swiper-slide-p">长续航, 随时随地自在办公
|
||||
</div>
|
||||
<div class="swiper-slide-t">{$fo.title}</div>
|
||||
<div class="swiper-slide-p">{$fo.short_title}</div>
|
||||
</div>
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
</div>
|
||||
{/notempty}
|
||||
{notempty name="data.camare_microphone_security"}
|
||||
<!-- tabs -->
|
||||
{assign name="camare_microphone" value=":array_shift($data.camare_microphone_security)"/}
|
||||
{assign name="security" value=":array_shift($data.camare_microphone_security)"/}
|
||||
<div class="tabs-container">
|
||||
<div class="tab-t active" data-index="0">清晰通话 尽兴畅聊</div>
|
||||
<div class="tab-t" data-index="1">更安全 更私密</div>
|
||||
{notempty name="camare_microphone"}<div class="tab-t active" data-index="0">{$camare_microphone.title|default=''}</div>{/notempty}
|
||||
{notempty name="security"}<div class="tab-t" data-index="1">{$security.title|default=''}</div>{/notempty}
|
||||
<div class="tab-content">
|
||||
|
||||
{notempty name="camare_microphone"}
|
||||
<div class="tab-panel active">
|
||||
<div class="tab-panel-img">
|
||||
<img src="__IMAGES__/topic_laptop/tabs-img-1.png" alt="" class="content-image" loading="lazy">
|
||||
<img src="{$camare_microphone.image}" alt="" class="content-image" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/notempty}
|
||||
{notempty name="security"}
|
||||
<div class="tab-panel">
|
||||
<video
|
||||
src="https://ow.static.f2b211.com/storage/videos/banner/20251215/f3223da3e06367fd417dd983a5382912_dmlkZW9fcWluaXU=.mp4"
|
||||
src="{$security.video}"
|
||||
id="securityVideo" class="content-video" muted loop playsinline autoplay
|
||||
style="width: 100%;margin:0 auto;">
|
||||
您的浏览器不支持HTML5视频播放，请升级浏览器
|
||||
</video>
|
||||
</div>
|
||||
{/notempty}
|
||||
</div>
|
||||
<div class="tabs-header-box">
|
||||
<div class="tabs-header">
|
||||
<div class="tab-item active" data-index="0">清晰通话</div>
|
||||
<div class="tab-item" data-index="1">安护密收</div>
|
||||
{notempty name="camare_microphone"}
|
||||
<div class="tab-item active" data-index="0">{$camare_microphone.short_title|default=''|raw}</div>
|
||||
{/notempty}
|
||||
{notempty name="security"}
|
||||
<div class="tab-item" data-index="1">{$security.short_title|default=''|raw}</div>
|
||||
{/notempty}
|
||||
<div class="tab-indicator"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tabs-p active" data-index="0">配置1080p前置高清摄像头, 矩阵式降噪麦克风, 噪音环境亦享受清晰通话</div>
|
||||
<div class="tabs-p" data-index="1">物理防窥拨片，防止软件恶意开启摄像头</div>
|
||||
{notempty name="camare_microphone"}
|
||||
<div class="tabs-p active" data-index="0">{$camare_microphone.desc|default=''|raw}</div>
|
||||
{/notempty}
|
||||
{notempty name="security"}
|
||||
<div class="tabs-p" data-index="1">{$security.desc|default=''|raw}</div>
|
||||
{/notempty}
|
||||
</div>
|
||||
{/notempty}
|
||||
{notempty name="data.unified_preinstall"}
|
||||
<!-- windows11-->
|
||||
<div class="window">
|
||||
<img src="__IMAGES__/topic_laptop/windows-1.png" alt="">
|
||||
<img src="{$data.unified_preinstall.image}" alt="">
|
||||
</div>
|
||||
{/notempty}
|
||||
{notempty name="data.product_testing"}
|
||||
<!-- 六宫格 -->
|
||||
<div class="footer-imgs">
|
||||
<img src="__IMAGES__/topic_laptop/footer-img-1.png">
|
||||
<img src="__IMAGES__/topic_laptop/footer-img-2.png">
|
||||
<img src="__IMAGES__/topic_laptop/footer-img-3.png">
|
||||
<img src="__IMAGES__/topic_laptop/footer-img-4.png">
|
||||
<img src="__IMAGES__/topic_laptop/footer-img-5.png">
|
||||
<img src="__IMAGES__/topic_laptop/footer-img-6.png">
|
||||
{volist name="data.product_testing" id="to"}
|
||||
<img src="{$to.image}">
|
||||
{/volist}
|
||||
</div>
|
||||
{/notempty}
|
||||
{notempty name="data.webpage_footnotes"}
|
||||
<!-- 底部文字 -->
|
||||
<div class="footer-texts">
|
||||
|
||||
{$data.webpage_footnotes.desc|raw|htmlspecialchars_decode}
|
||||
</div>
|
||||
{/notempty}
|
||||
{/block}
|
||||
{block name="script"}
|
||||
<script src="__JS__/before-after.min.js" type="text/javascript"></script>
|
||||
|
||||
@@ -18,7 +18,6 @@
|
||||
<link rel="stylesheet" href="__CSS__/topic_laptop/ips.css">
|
||||
<link rel="stylesheet" href="__CSS__/topic_laptop/rgb.css">
|
||||
<link rel="stylesheet" href="__CSS__/topic_laptop/bly.css">
|
||||
<link rel="stylesheet" href="__CSS__/topic_laptop/bly.css">
|
||||
<link rel="stylesheet" href="__CSS__/topic_laptop/qb.css">
|
||||
<link rel="stylesheet" href="__CSS__/topic_laptop/xh.css">
|
||||
<link rel="stylesheet" href="__CSS__/topic_laptop/jk.css">
|
||||
@@ -59,7 +58,7 @@
|
||||
<div class="swiper-slide auto-swiper-slide">
|
||||
<div class="swiper-container-texts" style="color:#fff">
|
||||
<div class="swiper-container-texts-t">{$tfi.title}</div>
|
||||
<div class="swiper-container-texts-p">{$tfi.desc||raw|htmlspecialchars_decode}</div>
|
||||
<div class="swiper-container-texts-p">{$tfi.desc|raw|htmlspecialchars_decode}</div>
|
||||
<div class="swiper-container-texts-img">
|
||||
<a href="{$tfi.link}">
|
||||
<img src="{$tfi.extra_image}" alt="" >
|
||||
|
||||
@@ -17,14 +17,19 @@
|
||||
|
||||
.footer-texts {
|
||||
width: 6.8rem;
|
||||
margin: 0 auto;
|
||||
font-size: 0.16rem;
|
||||
margin: 1.5rem 0.35rem;
|
||||
/* font-size: 0.16rem; */
|
||||
color: #cbcfd8;
|
||||
white-space: normal;
|
||||
margin-top: 1.5rem;
|
||||
/* white-space: normal; */
|
||||
/* margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem; */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.footer-texts p {
|
||||
text-indent: clamp(-16px, -1vw, -0.22rem);
|
||||
width: 6.8rem;
|
||||
font-size: 0.16rem;
|
||||
padding-left: 0.05rem;
|
||||
text-indent: -0.1rem;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 0.1rem;
|
||||
font-family: 'HarmonyOS-Light';
|
||||
@@ -41,3 +46,91 @@
|
||||
text-indent: clamp(-16px, -1vw, -0.22rem);
|
||||
font-family: 'HarmonyOS-Light';
|
||||
}
|
||||
|
||||
|
||||
.oircoEgapp-foot .logo-white img {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.oircoEgapp-foot .m_footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.oircoEgapp-foot .m_footer .left,
|
||||
.oircoEgapp-foot .foot-con {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.oircoEgapp-foot .m_footer .right {
|
||||
max-width: 55%;
|
||||
}
|
||||
.oircoEgapp-foot .m_footer .left {
|
||||
max-width: 40%;
|
||||
justify-content: end;
|
||||
margin-right: 4%;
|
||||
}
|
||||
.oircoEgapp-foot .foot-con span {
|
||||
width: auto;
|
||||
padding: 0 0.625rem;
|
||||
}
|
||||
.oircoEgapp-foot .foot-cate .clearfix li h3 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.oircoEgapp-foot .foot-cate .clearfix li p,
|
||||
.oircoEgapp-foot .foot-cate .clearfix li p a {
|
||||
font-size: 12px;
|
||||
}
|
||||
.logo-white {
|
||||
text-align: center;
|
||||
padding: 1rem 0 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.foot-cate {
|
||||
padding: 0 0.16rem;
|
||||
}
|
||||
.foot-cate h3 {
|
||||
font-size: 0.28rem;
|
||||
}
|
||||
.foot-cate li {
|
||||
padding: 0.7rem 0;
|
||||
min-height: 1.8rem;
|
||||
}
|
||||
.foot-cate li p {
|
||||
line-height: 0.8rem;
|
||||
}
|
||||
.m_footer .right {
|
||||
float: right;
|
||||
width: 57%;
|
||||
text-align: left;
|
||||
}
|
||||
.foot-con span {
|
||||
font-size:0.28rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 1;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
cursor: pointer;
|
||||
font-family: 'HarmonyOS-Medium';
|
||||
}
|
||||
.oircoEgapp-foot .foot-con span {
|
||||
width: auto;
|
||||
padding: 0 0.125rem;
|
||||
}
|
||||
.m_footer .left a{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
.m_footer .left img {
|
||||
width: 0.55rem;
|
||||
padding-right: 0.2rem;
|
||||
padding-top: 0;
|
||||
}
|
||||
.oircoEgapp-foot .m_footer .right {
|
||||
max-width: 50%;
|
||||
}
|
||||
231
public/static/index/mobile/css/topic_laptop/header.css
Normal file
231
public/static/index/mobile/css/topic_laptop/header.css
Normal file
@@ -0,0 +1,231 @@
|
||||
.oircoEgapp-head {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
width: -webkit-fill-available;
|
||||
}
|
||||
.oircoEgapp-head .headtop {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 0.16rem;
|
||||
height:60px;
|
||||
background: #fff;
|
||||
}
|
||||
.oircoEgapp-head .headtop .headerlogimg {
|
||||
width: 2.25rem !important;
|
||||
height: auto !important;
|
||||
display: block;
|
||||
/* height: 2.25rem; */
|
||||
}
|
||||
.oircoEgapp-head .top-menu {
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
color: #000;
|
||||
display: none;
|
||||
}
|
||||
.oircoEgapp-head .top-menu .it-ct {
|
||||
font-family: "HarmonyOS-SemiBold";
|
||||
font-weight: bold;
|
||||
}
|
||||
.oircoEgapp-head .top-menu .it-ct .it-1 {
|
||||
padding: 0.16rem 3.5% 0.2rem;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
}
|
||||
.oircoEgapp-head .top-menu .it-ct .it-1-more {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 1.5%;
|
||||
}
|
||||
.oircoEgapp-head .top-menu .it-ct .it-1-more i {
|
||||
font-weight: bold;
|
||||
}
|
||||
.oircoEgapp-head .top-menu .it-ct .it-1-2 {
|
||||
padding-left: 0.16rem;
|
||||
font-size: 13px;
|
||||
line-height: 1.8;
|
||||
font-weight: 100;
|
||||
font-weight: bold;
|
||||
display: none;
|
||||
}
|
||||
.oircoEgapp-head .top-menu .it-ct .it-1-2 a {
|
||||
color: #666;
|
||||
}
|
||||
.cursor_p span {
|
||||
font-size: 0.38rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 1;
|
||||
width: 100%;
|
||||
/* height: 1.2rem; */
|
||||
padding-left: 0.2rem;
|
||||
}
|
||||
.cursor_p span:hover {
|
||||
font-size: 0.38rem;
|
||||
white-space: normal;
|
||||
width: 100%;
|
||||
overflow: inherit;
|
||||
line-height: 1.5;
|
||||
}
|
||||
/* .cursor_p {
|
||||
height: 0.38rem !important;
|
||||
} */
|
||||
.img-responsive {
|
||||
display: flex !important;
|
||||
justify-content: center !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
.img-responsive span {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
.action-sheet {
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
display: none;
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: 11111;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.menu-name {
|
||||
text-indent: 0.2rem;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
}
|
||||
.action-sheet ul li {
|
||||
margin: 0 10px;
|
||||
color: #333;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 12px 14px;
|
||||
}
|
||||
.action-sheet ul li a {
|
||||
color: #333;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.action-sheet ul li img {
|
||||
margin-right: 14px;
|
||||
}
|
||||
.menu-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 10px;
|
||||
justify-content: space-between;
|
||||
background: #fff;
|
||||
border-top-left-radius: 6px;
|
||||
border-top-right-radius:6px;
|
||||
padding: 5px 0;
|
||||
}
|
||||
.close-icon {
|
||||
width: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.close-icon img {
|
||||
width: 24px !important;
|
||||
}
|
||||
.title-text {
|
||||
padding-top: 0.24rem;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
}
|
||||
.title-text p {
|
||||
line-height: 2;
|
||||
}
|
||||
.title-text p a {
|
||||
color: #989898;
|
||||
|
||||
}
|
||||
.title-text p a:hover {
|
||||
color: #989898;
|
||||
}
|
||||
.marsk-container {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
display: none;
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0px;
|
||||
z-index: 9999;
|
||||
}
|
||||
.marsk-container-detail {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
display: none;
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0px;
|
||||
z-index: 9999;
|
||||
}
|
||||
.search-in {
|
||||
margin-top:0.8rem;
|
||||
}
|
||||
.search-in input {
|
||||
width: 70% !important;
|
||||
height: 0.8rem;
|
||||
background: #ffffff;
|
||||
border: 1px solid #d6d6d6;
|
||||
opacity: 1;
|
||||
border-radius: 20px;
|
||||
padding: 0 14px;
|
||||
font-size: 14px;
|
||||
}
|
||||
::-webkit-input-placeholder {
|
||||
color: #989898;
|
||||
}
|
||||
.search-button {
|
||||
border: none;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
cursor: pointer;
|
||||
background: #0060ff;
|
||||
height:0.7rem;
|
||||
border-radius: 20px;
|
||||
padding: 0 14px;
|
||||
width: 22%;
|
||||
}
|
||||
.search-in form{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.search-in .title-text p a{
|
||||
font-size: 14px;
|
||||
}
|
||||
/*头部搜索弹窗*/
|
||||
.popup-quick {
|
||||
width: 86%;
|
||||
background-color: #fff;
|
||||
z-index: 9999;
|
||||
box-shadow: 0px 2px 5px rgba(255, 255, 255, 0.2);
|
||||
color: #333;
|
||||
padding: 14px;
|
||||
border-radius: 5px;
|
||||
margin: 14px auto 0;
|
||||
position: relative;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
@@ -37,16 +37,22 @@
|
||||
text-align: center;
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 0.6rem;
|
||||
|
||||
}
|
||||
.xn-p {
|
||||
width: 6.8rem;
|
||||
padding-top: 0.6rem;
|
||||
padding-left: 0.11rem;
|
||||
font-size: 0.16rem;
|
||||
margin: 0 auto;
|
||||
margin-left: 0.47rem;
|
||||
}
|
||||
.xn-p p {
|
||||
width: 5.84rem;
|
||||
color: #cbcfd8;
|
||||
text-align: left;
|
||||
line-height: 1.5;
|
||||
/* 核心：左内边距控制第二行缩进量 */
|
||||
padding-left: 0.8rem;
|
||||
/* 首行向左偏移，抵消左内边距，实现第二行缩进 */
|
||||
text-indent: -0.8rem;
|
||||
/* 确保p标签是块级，且换行正常 */
|
||||
display: block;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
Reference in New Issue
Block a user