jsasg/orico-official-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

头部底部
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 3s
Details

Browse Source
This commit is contained in:
liqian
2025-12-25 16:39:01 +08:00
parent 48e3d7f846
commit 48f3c2b312
7 changed files with 837 additions and 477 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/index/controller/TopicLaptop.php
View File

@@ -5,7 +5,6 @@ namespace app\index\controller;
use app\index\model\SysBannerModel;
use think\facade\View;
use think\Request;
class TopicLaptop extends Common
{
@@ -96,7 +95,7 @@ class TopicLaptop extends Common
// 产品检测介绍
$data['product_testing'] = data_get($banners_map, 'BANNER_693a2ff4629bd')?->items->toArray();
// 网页脚注
$data['webpage_footnotes'] = data_get($banners_map, 'BANNER_693a30e9e4572')?->items->first()?->toArray();
$data['webpage_footnotes'] = data_get($banners_map, 'BANNER_693a30e9e4572')?->items->first()?->toArray();
}
View::assign('data', $data);

23
app/index/lang/en-us/mobile.php
View File

@@ -92,9 +92,9 @@ return [
],
'attachment/video' => [
'软件和驱动程序' => 'Software and Drivers',
'您的浏览器不支持 video 标签。' => 'Your browser does not support HTML5 video.',
'您的浏览器不支持 video 标签。' => 'Your browser does not support HTML5 video.',
],
// 联系我们批量购买页面
'contactus/bulkbuy' => [
'批量购买' => 'Bulk Buy',
@@ -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",
],
];

935
app/index/view/mobile/topic_laptop/index.html
View File

@@ -1,6 +1,7 @@
{extend name="public/base" /}
{block name="style"}
<link rel="stylesheet" href="__CSS__/topic_laptop/index.css">
<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">
<link rel="stylesheet" href="__CSS__/topic_laptop/cpu.css">
@@ -41,501 +42,515 @@
})(document, window);
</script>
{/block}
{block name="header"}
<!-- 重置header头为空 -->
{/block}
{block name="main"}
<!-- 顶部轮播 -->
<div class="swiper-container auto-swiper-container" style="margin-top:60px;">
<div class="swiper-wrapper">
<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-img">
<a href="">
<img src="__IMAGES__/topic_laptop/ljgd.png" alt="">
</a>
</div>
{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">{$tfi.title}</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="">
</a>
</div>
<img src="__IMAGES__/topic_laptop/banner.png" alt="" />
</div>
<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">
{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">
{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">
{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-box">
<div class="amd-img-header">
<img src="__IMAGES__/topic_laptop/amd1.png" alt="" loading="lazy">
<div class="amd-img-footer">
{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">
{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">{$cpu_first_section.title|default=''}</div>
<p class="cpu-texts-p">{$cpu_first_section.short_title|default=''}</p>
</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">
<div class="cpu-footer">
<div class="cpu-footer-img">
{volist name="data.cpu" id="co"}
<img src="{$co.image}" alt="{$co.title}" loading="lazy">
{/volist}
</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">
</div>
</div>
<div class="amd-img-footer">
<img src="__IMAGES__/topic_laptop/amd10.png" alt="" loading="lazy">
<div class="cpu-footer-desc">{$cpu_first_section.desc|default=''|raw}</div>
</div>
</div>
<!-- 超能引擎 -->
<div class="cpu">
<div class="cpu-main" style="background: url('__IMAGES__/topic_laptop/cpu.png');background-size:100% auto">
<div class="cpu-texts">
<div class="cpu-texts-t">超能引擎 性能拉满</div>
<p class="cpu-texts-p">强悍「芯」实力 定义性能新标杆</p>
</div>
{/notempty}
<!-- 进度条 -->
<div class="progress">
<div class="progress-title">{:lang_i18n('CineBench R23 多核跑分')}</div>
<div class="progress-section">
<div class="progress-item">
<div class="progress-bar-container">
<div class="progress-bar">
<div class="progress-fill m4-max" data-value="100"></div>
</div>
</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">
</div>
<div class="cpu-footer-desc">
搭载高性能CPU与GPU，多任务并行流畅不卡顿
</div>
<div class="label ">
<span class="device-name colorLinearGradient font20">Ryzen7 7735HS:</span>
<span class="value m4-max colorLinearGradient font20">13766</span>
</div>
</div>
</div>
<!-- 进度条 -->
<div class="progress">
<div class="progress-title">CineBench R23 多核跑分</div>
<div class="progress-section">
<div class="progress-item">
<div class="progress-bar-container">
<div class="progress-bar">
<div class="progress-fill m4-max" data-value="100"></div>
</div>
</div>
<div class="label ">
<span class="device-name colorLinearGradient font20">Ryzen7 7735HS:</span>
<span class="value m4-max colorLinearGradient font20">13766</span>
<div class="progress-item w645">
<div class="progress-bar-container ">
<div class="progress-bar">
<div class="progress-fill m2-max" data-value="100"></div>
</div>
</div>
<div class="progress-item w645">
<div class="progress-bar-container ">
<div class="progress-bar">
<div class="progress-fill m2-max" data-value="100"></div>
</div>
</div>
<div class="label">
<span class="device-name colorCBCFD8 font18">Ryzen5 7640HS:</span>
<span class="value colorCBCFD8 font18">12950</span>
</div>
</div>
<div class="progress-item w585">
<div class="progress-bar-container ">
<div class="progress-bar">
<div class="progress-fill m2-max" data-value="100"></div>
</div>
</div>
<div class="label">
<span class="device-name font18 colorCBCFD8 font18">锐龙9 6900HX:</span>
<span class="value font18 colorCBCFD8 font18">13183</span>
</div>
</div>
<div class="progress-item w454">
<div class="progress-bar-container">
<div class="progress-bar">
<div class="progress-fill m2-max" data-value="100"></div>
</div>
</div>
<div class="label">
<span class="device-name font18 colorCBCFD8">酷睿i5-12450H:</span>
<span class="value font18 colorCBCFD8">10200</span>
</div>
</div>
<div class="progress-item w321">
<div class="progress-bar-container">
<div class="progress-bar">
<div class="progress-fill m2-max" data-value="100"></div>
</div>
</div>
<div class="label">
<span class="device-name m2-max font18 colorCBCFD8">Ryzen5 6600H:</span>
<span class="value font18 colorCBCFD8">10297</span>
</div>
<div class="label">
<span class="device-name colorCBCFD8 font18">Ryzen5 7640HS:</span>
<span class="value colorCBCFD8 font18">12950</span>
</div>
</div>
<div class="progress-p">*此跑分为ORICO实验室测定所得，请以实际使用为准</div>
</div>
<!-- 显卡 GPU -->
<div class="gpu">
<div class="gpu-texts">
<div class="gpu-texts-t">
Radeon 680M</br>
独显级显卡 低延迟 全能创作力
<div class="progress-item w585">
<div class="progress-bar-container ">
<div class="progress-bar">
<div class="progress-fill m2-max" data-value="100"></div>
</div>
</div>
<div class="gpu-texts-p">
搭配高效架构与先进制程，在低功耗下实现游戏创作场景的</br>
逼真光影渲染与流畅性能输出
<div class="label">
<span class="device-name font18 colorCBCFD8 font18">{:lang_i18n('锐龙9 6900HX')}:</span>
<span class="value font18 colorCBCFD8 font18">13183</span>
</div>
</div>
<div class="gpu-main-img"
style="background: url('__IMAGES__/topic_laptop/gpu-main.png');background-size:100% auto">
<div class="gpu-amd-img">
<img src="__IMAGES__/topic_laptop/gpu-amd.png" alt="" loading="lazy">
<div class="progress-item w454">
<div class="progress-bar-container">
<div class="progress-bar">
<div class="progress-fill m2-max" data-value="100"></div>
</div>
</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">
<div class="label">
<span class="device-name font18 colorCBCFD8">{:lang_i18n('酷睿i5-12450H')}:</span>
<span class="value font18 colorCBCFD8">10200</span>
</div>
</div>
</div>
<!-- 进度条 -->
<div class="progress">
<div class="progress-title">3DMARK Time Spy显卡得分</div>
<div class="progress-section">
<div class="progress-item">
<div class="progress-bar-container">
<div class="progress-bar">
<div class="progress-fill m4-max" data-value="100"></div>
</div>
</div>
<div class="label ">
<span class="device-name colorLinearGradient font20">Ryzen7 7735HS:</span>
<span class="value m4-max colorLinearGradient font20">1700</span>
<div class="progress-item w321">
<div class="progress-bar-container">
<div class="progress-bar">
<div class="progress-fill m2-max" data-value="100"></div>
</div>
</div>
<div class="progress-item w596">
<div class="progress-bar-container ">
<div class="progress-bar">
<div class="progress-fill m2-max" data-value="100"></div>
</div>
</div>
<div class="label">
<span class="device-name colorCBCFD8 font18">NVIDIA GTX 750:</span>
<span class="value colorCBCFD8 font18">1000</span>
</div>
</div>
<div class="progress-item w596">
<div class="progress-bar-container ">
<div class="progress-bar">
<div class="progress-fill m2-max" data-value="100"></div>
</div>
</div>
<div class="label">
<span class="device-name font18 colorCBCFD8 font18">i7-13620H:</span>
<span class="value font18 colorCBCFD8 font18">1000</span>
</div>
</div>
<div class="progress-item w467">
<div class="progress-bar-container">
<div class="progress-bar">
<div class="progress-fill m2-max" data-value="100"></div>
</div>
</div>
<div class="label">
<span class="device-name font18 colorCBCFD8">Ryzen5 6600H:</span>
<span class="value font18 colorCBCFD8">950</span>
</div>
</div>
</div>
<div class="progress-p">*此跑分为ORICO实验室测定所得，请以实际使用为准</div>
</div>
<!-- 内存 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 class="label">
<span class="device-name m2-max font18 colorCBCFD8">Ryzen5 6600H:</span>
<span class="value font18 colorCBCFD8">10297</span>
</div>
</div>
</div>
<!-- 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 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">{$gpu_first_section.title|default=''|raw}</div>
<div class="gpu-texts-p">{$gpu_first_section.short_title|default=''|raw}</div>
</div>
<div class="gpu-main-img" style="background: url('{$gpu_first_section.image|default=\'\'}');background-size:100% auto">
<div class="gpu-amd-img">
<img src="{$gpu_first_section.extra_image|default=''}" alt="" loading="lazy">
</div>
<div class="gpu-footer-imgs">
{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">{:lang_i18n('3DMARK Time Spy显卡得分')}</div>
<div class="progress-section">
<div class="progress-item">
<div class="progress-bar-container">
<div class="progress-bar">
<div class="progress-fill m4-max" data-value="100"></div>
</div>
</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">
<div class="label ">
<span class="device-name colorLinearGradient font20">Ryzen7 7735HS:</span>
<span class="value m4-max colorLinearGradient font20">1700</span>
</div>
</div>
<div class="progress-item w596">
<div class="progress-bar-container ">
<div class="progress-bar">
<div class="progress-fill m2-max" data-value="100"></div>
</div>
</div>
<div class="label">
<span class="device-name colorCBCFD8 font18">NVIDIA GTX 750:</span>
<span class="value colorCBCFD8 font18">1000</span>
</div>
</div>
<div class="progress-item w596">
<div class="progress-bar-container ">
<div class="progress-bar">
<div class="progress-fill m2-max" data-value="100"></div>
</div>
</div>
<div class="label">
<span class="device-name font18 colorCBCFD8 font18">i7-13620H:</span>
<span class="value font18 colorCBCFD8 font18">1000</span>
</div>
</div>
<div class="progress-item w467">
<div class="progress-bar-container">
<div class="progress-bar">
<div class="progress-fill m2-max" data-value="100"></div>
</div>
</div>
<div class="label">
<span class="device-name font18 colorCBCFD8">Ryzen5 6600H:</span>
<span class="value font18 colorCBCFD8">950</span>
</div>
</div>
</div>
<!-- fs -->
<div class="fs">
<div class="dl">
<div class="dl-t">
静享 45W强悍性能</br>
“飓冷”轻音散热系统
</div>
<p class="dl-p">
牛角形双热管架构搭配定制高性能涡轮风扇，超强的散热能力，长时</br>间运行不降频；在创作、游戏等高负载场景，性能拉满 全程高能
</p>
<div class="progress-p">{:lang_i18n('*此跑分为ORICO实验室测定所得，请以实际使用为准')}</div>
</div>
{notempty name="data.ram"}
<!-- 内存 memory-->
<div class="memory">
<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">
{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">
{volist name="data.hard_drive" id="ho"}
<img src="{$ho.image}" alt="{$ho.title}" loading="lazy">
{/volist}
</div>
<div class="fs-box">
</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">{$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="{$data.cooling_system.0.video|default=''}"
class="fs-video" muted loop playsinline autoplay
poster="{$data.cooling_system.0.image|default=''}"
preload="auto" style="width: 100%;">
您的浏览器不支持HTML5视频播放，请升级浏览器
</video>
<div class="fs-ts">{$data.cooling_system.0.desc|raw}</div>
{/notempty}
<div class="fs-box-img">
<div class="fs-h-img">
{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;">
{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">{$data.apps.title|default=''}</div>
<div class="xn-container">
<div class="xn-image-section">
<img src="{$data.apps.image|default=''}" alt="" class="zoom-image first-image">
</div>
</div>
<div class="xn-p">{$data.apps.desc|default=''|raw}</div>
</div>
{/notempty}
{notempty name="data.screen_soft_light"}
<!-- IPS -->
<div class="ips">
{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">
{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">
{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">
{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">{$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" 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">
{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">
{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="{$to.image}" alt="" loading="lazy">
</a>
{/volist}
</div>
</div>
</div>
</div>
{/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">{$wifi_first_section.title|default=''|raw}</div>
<div class="wifi-p">{$wifi_first_section.short_title|default=''|raw}</div>
</div>
<div class="wifi-img">
{volist name="data.network_card" id="co"}
<img src="{$co.image}" alt="" loading="lazy">
{/volist}
</div>
</div>
{/notempty}
{notempty name="data.battery_life"}
<!-- 长久续航 -->
{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">{$battery_first_section.title|default=''|raw}</div>
<div class="endurance-p">{$battery_first_section.short_title|default=''|raw}</div>
</div>
<div class="endurance-img">
{volist name="data.battery_life" id="lo"}
<img src="{$lo.image}" alt="" loading="lazy">
{/volist}
</div>
<div class="endurance-footer-p">{$battery_first_section.desc|default=''|raw}</div>
</div>
{/notempty}
<!-- 接口大满贯 -->
<div class="zoom-t">{:lang_i18n('接口大满贯')}</div>
<div class="zoom-container" id="zoomContainer">
<div class="img-wrapper">
<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;">{: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;">{: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: 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">
{volist name="data.scene_focus_images" id="fo"}
<div class="swiper-slide" style="width: 4.5rem;">
<img src="{$fo.image}" alt="" style="width: 4.5rem;">
<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">
{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="{$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/20251219/584940a4e2f48d0c08345ce84b93826a_dmlkZW9fcWluaXU=.mp4"
class="fs-video" muted loop playsinline autoplay
poster="https://dev.ow.f2b211.com/storage/images/banner/20251220/bd1f918627eecb7ff2898229e275729c.png"
preload="auto" style="width: 100%;">
src="{$security.video}"
id="securityVideo" class="content-video" muted loop playsinline autoplay
style="width: 100%;margin:0 auto;">
您的浏览器不支持HTML5视频播放，请升级浏览器
</video>
<div class="fs-ts">*散热图仅为示意，具体以实物为准</div>
<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="">
</div>
<div class="fs-b-img" style="min-height: 20px;">
<img src="__IMAGES__/topic_laptop/fs-img-3.png" alt="">
</div>
</div>
</div>
{/notempty}
</div>
<div class="tabs-header-box">
<div class="tabs-header">
{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="xn">
<div class="xn-t">性能大跃级 拿捏多场景</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">
</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>
<!-- 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>
</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="">
</div>
</div>
<!-- 色彩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>
</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="">
</div>
</div>
<!-- 对比图 -->
<div class="bly">
<div class="bly-texts">
<div class="bly-t">舒适不累眼</div>
<div class="bly-p">有效防眩光，显示清晰不刺眼，强光下依然表现出色</br>搭配类自然光护眼科技，呵护双眼，久看不累</div>
</div>
<div class="beforeafter ba-slider">
<img src="https://dev.ow.f2b211.com/storage/images/banner/20251215/70f84be28ec96250a7c44ae51ffecdf0.webp"
loading="lazy">
<div class="resize">
<img src="https://dev.ow.f2b211.com/storage/images/banner/20251215/09d2f45344a3f28db4e5f767888a845d.webp"
loading="lazy">
</div>
<span class="handle"></span>
</div>
</div>
<!-- 轮播图 -->
<div class="qb">
<div class="qb-text">
<div class="qb-t">轻薄有型 便捷随行</div>
<div class="qb-p">外观优雅简约 ，黄金比例机身，棱角分明，</br>
诠释利落风格。表面精密喷砂，复刻Mac级出众质感</div>
<div class="swiper-container auto-swiper-container">
<div class="swiper-wrapper">
<a class="swiper-slide auto-swiper-slide">
<img src="__IMAGES__/topic_laptop/qb-img-1.png" alt="" loading="lazy">
</a>
</div>
</div>
</div>
</div>
<!-- wift -->
<div class="wifi" style="background: url('__IMAGES__/topic_laptop/wifi-img-1.png');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>
<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">
</div>
</div>
<!-- 长久续航 -->
<div class="endurance"
style="background: url('__IMAGES__/topic_laptop/endurance-img-3.png');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>
<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">
</div>
<div class="endurance-footer-p">*此数据为ORICO实验室测定所得，请以实际使用为准；</div>
</div>
<!-- 接口大满贯 -->
<div class="zoom-t">接口大满贯</div>
<div class="zoom-container" id="zoomContainer">
<div class="img-wrapper">
<p class="zoom-p">标配多种接口，会议室连接电脑、</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>
</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>
<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>
<!-- 滑块 -->
<div class="swiper swiper-container-1" style="width: 6.82rem;margin: 0 auto;">
<div class="swiper-wrapper">
<!-- 滑块1 -->
<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>
</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>
</div>
</div>
</div>
<!-- tabs -->
<div class="tabs-container">
<div class="tab-t active" data-index="0">清晰通话 尽兴畅聊</div>
<div class="tab-t" data-index="1">更安全 更私密</div>
<div class="tab-content">
<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">
</div>
</div>
<div class="tab-panel">
<video
src="https://ow.static.f2b211.com/storage/videos/banner/20251215/f3223da3e06367fd417dd983a5382912_dmlkZW9fcWluaXU=.mp4"
id="securityVideo" class="content-video" muted loop playsinline autoplay
style="width: 100%;margin:0 auto;">
您的浏览器不支持HTML5视频播放，请升级浏览器
</video>
</div>
</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>
<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>
</div>
<!-- windows11-->
<div class="window">
<img src="__IMAGES__/topic_laptop/windows-1.png" alt="">
</div>
<!-- 六宫格 -->
<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">
</div>
<!-- 底部文字 -->
<div class="footer-texts">
</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="{$data.unified_preinstall.image}" alt="">
</div>
{/notempty}
{notempty name="data.product_testing"}
<!-- 六宫格 -->
<div class="footer-imgs">
{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>
@@ -1127,4 +1142,4 @@
window.dispatchEvent(new Event('scroll'));
});
</script>
{/block}
{/block}

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

@@ -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="" >

103
public/static/index/mobile/css/topic_laptop/footer.css
View File

@@ -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
View 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;
}

16
public/static/index/mobile/css/topic_laptop/xn.css
View File

@@ -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;
}