diff --git a/app/index/controller/TopicLaptop.php b/app/index/controller/TopicLaptop.php index a54d3ec1..1cba3335 100644 --- a/app/index/controller/TopicLaptop.php +++ b/app/index/controller/TopicLaptop.php @@ -3,6 +3,7 @@ declare (strict_types = 1); namespace app\index\controller; +use app\index\model\SysBannerModel; use think\facade\View; use think\Request; @@ -13,7 +14,91 @@ class TopicLaptop extends Common */ public function index() { - + + $banners = SysBannerModel::with([ + 'items' => function ($query) { + $query->withoutField(['sort', 'created_at', 'updated_at', 'deleted_at']) + ->order(['sort' => 'asc', 'id' => 'desc']) + ->enabled(true); + } + ]) + ->atPlatform(request()->from) + ->uniqueLabel([ + 'BANNER_693a268c8aa5f', // 专题 - 笔记本首页 - 焦点图 + 'BANNER_693a26b1ad252', // 专题 - 笔记本首页 - 性能介绍 + 'BANNER_693a27b767c8c', // 专题 - 笔记本首页 - CPU介绍 + 'BANNER_693a28740b8a7', // 专题 - 笔记本首页 - 显卡介绍 + 'BANNER_693a28aa8412d', // 专题 - 笔记本首页 - 运行内存介绍 + 'BANNER_693a29009fa72', // 专题 - 笔记本首页 - 硬盘介绍 + 'BANNER_693a29263c609', // 专题 - 笔记本首页 - 散热系统介绍 + 'BANNER_693a2959958bc', // 专题 - 笔记本首页 - 行业App运行介绍 + 'BANNER_693a298342b38', // 专题 - 笔记本首页 - 柔光屏介绍 + 'BANNER_693a2ad31fbe8', // 专题 - 笔记本首页 - 色域介绍 + 'BANNER_693a2b0327ac3', // 专题 - 笔记本首页 - 防眩光介绍 + 'BANNER_693a2cc70c762', // 专题 - 笔记本首页 - 外形质感介绍 + 'BANNER_693a2d3113d14', // 专题 - 笔记本首页 - 网卡介绍 + 'BANNER_693a2d53ac247', // 专题 - 笔记本首页 - 电池续航介绍 + 'BANNER_693a2d7f5fa21', // 专题 - 笔记本首页 - 接口介绍 + 'BANNER_693a2f2114eb3', // 专题 - 笔记本首页 - 使用场景焦点图 + 'BANNER_693a2f92baaa3', // 专题 - 笔记本首页 - 摄像头/麦克风/安全介绍 + 'BANNER_693a2fad26f55', // 专题 - 笔记本首页 - 系统预装介绍 + 'BANNER_693a2ff4629bd', // 专题 - 笔记本首页 - 产品检测介绍 + 'BANNER_693a30e9e4572', // 专题 - 笔记本首页 - 网页脚注 + ]) + ->language($this->lang_id) + ->enabled(true) + ->order(['sort' => 'asc', 'id' => 'desc']) + ->select(); + + $data = []; + if (!$banners->isEmpty()) { + $banners_map = []; + foreach ($banners as $banner) { + $banners_map[$banner->unique_label] = $banner; + } + + // 焦点图轮播图 + $data['top_focus_images'] = data_get($banners_map, 'BANNER_693a268c8aa5f')?->items->toArray(); + // 性能介绍 + $data['perf'] = data_get($banners_map, 'BANNER_693a26b1ad252')?->items->toArray(); + // CPU介绍 + $data['cpu'] = data_get($banners_map, 'BANNER_693a27b767c8c')?->items->toArray(); + // 显卡介绍 + $data['gpu'] = data_get($banners_map, 'BANNER_693a28740b8a7')?->items->toArray(); + // 运行内存介绍 + $data['ram'] = data_get($banners_map, 'BANNER_693a28aa8412d')?->items->first()?->toArray(); + // 硬盘介绍 + $data['hard_drive'] = data_get($banners_map, 'BANNER_693a29009fa72')?->items->toArray(); + // 散热系统介绍 + $data['cooling_system'] = data_get($banners_map, 'BANNER_693a29263c609')?->items->toArray(); + // 行业App运行介绍 + $data['apps'] = data_get($banners_map, 'BANNER_693a2959958bc')?->items->first()?->toArray(); + // 柔光屏介绍 + $data['screen_soft_light'] = data_get($banners_map, 'BANNER_693a298342b38')?->items->toArray(); + // 色域介绍 + $data['screen_color_gamut'] = data_get($banners_map, 'BANNER_693a2ad31fbe8')?->items->toArray(); + // 防眩光介绍 + $data['screen_anti_glare'] = data_get($banners_map, 'BANNER_693a2b0327ac3')?->items->toArray(); + // 外形质感介绍 + $data['exterior_texture'] = data_get($banners_map, 'BANNER_693a2cc70c762')?->items->toArray(); + // 网卡介绍 + $data['network_card'] = data_get($banners_map, 'BANNER_693a2d3113d14')?->items->toArray(); + // 电池续航介绍 + $data['battery_life'] = data_get($banners_map, 'BANNER_693a2d53ac247')?->items->toArray(); + // 接口介绍 + $data['interface'] = data_get($banners_map, 'BANNER_693a2d7f5fa21')?->items->toArray(); + // 使用场景焦点图 + $data['scene_focus_images'] = data_get($banners_map, 'BANNER_693a2f2114eb3')?->items->toArray(); + // 摄像头/麦克风/安全介绍 + $data['camare_microphone_security'] = data_get($banners_map, 'BANNER_693a2f92baaa3')?->items->toArray(); + // 系统预装介绍 + $data['unified_preinstall'] = data_get($banners_map, 'BANNER_693a2fad26f55')?->items->first()?->toArray(); + // 产品检测介绍 + $data['product_testing'] = data_get($banners_map, 'BANNER_693a2ff4629bd')?->items->toArray(); + // 网页脚注 + $data['webpage_footnotes'] = data_get($banners_map, 'BANNER_693a30e9e4572')?->items->first()?->toArray(); + } + View::assign('data', $data); return View::fetch('index'); } diff --git a/app/index/lang/en-us/pc.php b/app/index/lang/en-us/pc.php index 51368639..10bab74a 100644 --- a/app/index/lang/en-us/pc.php +++ b/app/index/lang/en-us/pc.php @@ -224,4 +224,17 @@ 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
Lock Slot', + '千兆网口' => 'Gigabit
Ethernet', + 'USB-A
(5Gbps)' => 'USB-A
(5Gbps)', + '3.5mm
耳麦合一' => '3.5mm
Combo Audio', + 'TF口3.0' => 'TF 3.0
Card Slot', + '全功能
USB-C' => 'All-in-One
USB-C', + ], ]; \ No newline at end of file diff --git a/app/index/view/pc/topic_laptop/index.html b/app/index/view/pc/topic_laptop/index.html index e081145f..54620728 100644 --- a/app/index/view/pc/topic_laptop/index.html +++ b/app/index/view/pc/topic_laptop/index.html @@ -1,23 +1,566 @@ {extend name="public/base" /} {block name="style"} + + + + + + + + + + + + + + + + + + + + + + + + + + + {/block} {block name="main"} +{notempty name="data.top_focus_images"} -测试 -
+
- - 测试 + {volist name="data.top_focus_images" id="tfi"} + + {$tfi.title} + {/volist}
+{/notempty} +{notempty name="data.perf"} + +
+
+
+ {notempty name="data.perf.0"}{$data.perf.0.title}{/notempty} +
+
+
{notempty name="data.perf.1"}{$data.perf.1.title}{/notempty}
+
{notempty name="data.perf.2"}{$data.perf.2.title}{/notempty}
+
+
+
+ {notempty name="data.perf.3"}{$data.perf.3.title}{/notempty} +
+
+
+ {notempty name="data.perf.4"}{$data.perf.4.title}{/notempty} +
+
+ {notempty name="data.perf.5"}{$data.perf.5.title}{/notempty} +
+
+
+
+ {notempty name="data.perf.6"}{$data.perf.6.title}{/notempty} +
+
+ {notempty name="data.perf.7"}{$data.perf.7.title}{/notempty} + {notempty name="data.perf.8"}{$data.perf.8.title}{/notempty} +
+
+ {notempty name="data.perf.9"}{$data.perf.9.title}{/notempty} +
+
+
+{/notempty} +{notempty name="data.cpu"} + +{assign name="cpu_first_section" value=":array_shift($data.cpu)" /} +
+
+

{$cpu_first_section.title|default=''}

+

{$cpu_first_section.short_title|default=''}

+
+
+ {volist name="data.cpu" id="co"} + {$co.title} + {/volist} +
+
+ +
+ {$cpu_first_section.desc|default=''|raw} +
+{/notempty} + +
+

{:lang_i18n('CineBench R23 多核跑分')}

+
+
+
+
+
+
+
+
+ Ryzen7 7735HS: + 13766 +
+
+
+
+
+
+
+
+
+ Ryzen5 7640HS: + 12950 +
+
+
+
+
+
+
+
+
+ {:lang_i18n('锐龙9 6900HX')}: + 13183 +
+
+
+
+
+
+
+
+
+ {:lang_i18n('酷睿i5-12450H')}: + 10200 +
+
+
+
+
+
+
+
+
+ Ryzen5 6600H: + 10297 +
+
+
+
{:lang_i18n('*此跑分为ORICO实验室测定所得，请以实际使用为准')}
+
+{notempty name="data.gpu"} + +{assign name="gpu_first_section" value=":array_shift($data.gpu)"/} +
+
+
{$gpu_first_section.title|default=''|raw}
+
{$gpu_first_section.short_title|default=''|raw}
+
+ +
+
+
+ {volist name="data.gpu" id="go"} + + {/volist} +
+
+{/notempty} + +
+

{:lang_i18n('3DMARK Time Spy显卡得分')}

+
+
+
+
+
+
+
+
+ Ryzen7 7735HS: + 13766 +
+
+
+
+
+
+
+
+
+ Ryzen7 7735HS: + 1000 +
+
+
+
+
+
+
+
+
+ NVIDIA GTX 750: + 1000 +
+
+ +
+
+
+
+
+
+
+ Ryzen5 6600H: + 950 +
+
+
+
{:lang_i18n('*此跑分为ORICO实验室测定所得，请以实际使用为准')}
+
+{notempty name="data.ram"} + +
+
{$data.ram.title|raw}
+
+
+
{$data.ram.short_title|raw}
+
+
+ {$data.ram.desc|raw} +
+
+
+{/notempty} +{notempty name="data.hard_drive"} + +
+ {assign name="hard_drive_first" value=":array_shift($data.hard_drive)"/} +
+
{$hard_drive_first.title|default=''|raw}
+
+ {volist name="data.hard_drive" id="ho"} + + {/volist} +
+
+
+{/notempty} +{notempty name="data.cooling_system"} +{notempty name="$data.cooling_system.0"} + +
+
{$data.cooling_system.0.title|raw}
+

{$data.cooling_system.0.short_title|raw}

+
+{/notempty} + +
+
+ {notempty name="data.cooling_system.0"} + + +
{$data.cooling_system.0.desc|raw}
+ {/notempty} +
+ {notempty name="data.cooling_system.1"}{/notempty} + {notempty name="data.cooling_system.2"}{/notempty} +
+
+
+ {notempty name="data.cooling_system.3"}{/notempty} +
+
+{/notempty} +{notempty name="data.apps"} + +
+
{$data.apps.title|default=''}
+
+ +
+ + +
+
+
{$data.apps.desc|default=''|raw}
+
+{/notempty} +{notempty name="data.screen_soft_light"} + +{assign name="soft_light_first" value=":array_shift($data.screen_soft_light)"/} +
+
+ {notempty name="soft_light_first"} +
{$soft_light_first.title|raw}
+
{$soft_light_first.short_title|raw}
+ {/notempty} +
+ {volist name="data.screen_soft_light" id="so"} + + {/volist} +
+
+
+{/notempty} +{notempty name="data.screen_color_gamut"} + +{assign name="color_gamut_first" value=":array_shift($data.screen_color_gamut)"/} +
+ {notempty name="color_gamut_first"} +
+
{$color_gamut_first.title|raw}
+
{$color_gamut_first.short_title|raw}
+
+ {/notempty} +
+ {volist name="data.screen_color_gamut" id="so"} + + {/volist} +
+
+{/notempty} +{notempty name="data.screen_anti_glare"} + +
+ {assign name="anti_glare_first" value=":array_shift($data.screen_anti_glare)"/} + {notempty name="anti_glare_first"} +
+
{$anti_glare_first.title|raw}
+
{$anti_glare_first.short_title|raw}
+
+ {/notempty} +
+ + {assign name="anti_glare_left" value=":array_shift($data.screen_anti_glare)"/} + +
+ + {assign name="anti_glare_right" value=":array_shift($data.screen_anti_glare)"/} + +
+ + +
+
+{/notempty} +{notempty name="data.exterior_texture"} + +
+
+ {assign name="exterior_texture_first" value=":array_shift($data.exterior_texture)"/} +
{$exterior_texture_first.title|default=''|raw}
+
{$exterior_texture_first.short_title|default=''|raw}
+
+
+ {volist name="data.exterior_texture" id="eo"} + + {$eo.title} + + {/volist} +
+
+
+
+{/notempty} +{notempty name="data.network_card"} + +{assign name="netword_card_first" value=":array_shift($data.network_card)"/} +
+
+
{$netword_card_first.title|default=''|raw}
+
{$netword_card_first.short_title|default=''|raw}
+
+
+ {volist name="data.network_card" id="no"} + + {/volist} +
+
+{/notempty} +{notempty name="data.battery_life"} + +{assign name="battery_life_first" value=":array_shift($data.battery_life)"/} +
+
+
{$battery_life_first.title|default=''|raw}
+
{$battery_life_first.short_title|default=''|raw}
+
+
+ {volist name="data.battery_life" id="bo"} + + {/volist} +
+
{$battery_life_first.desc|default=''|raw}
+
+{/notempty} + +
+ +
+ 接口图 +
+ +
{:lang_i18n('肯幸通锁孔')}
+
{:lang_i18n('千兆网口')}
+
{:lang_i18n('USB-A
(5Gbps)')}
+
{:lang_i18n('USB-A
(480Mbps)')}
+
{:lang_i18n('3.5mm
耳麦合一')}
+
{:lang_i18n('TF口3.0')}
+ +
{:lang_i18n('USB-A
(5Gbps)')}
+
{:lang_i18n('USB-C
(5Gbps)')}
+
{:lang_i18n('HDMI')}
+
{:lang_i18n('全功能
USB-C')}
+
+{notempty name="data.scene_focus_images"} + +
+
+ +
+ 左箭头 +
+ +
+
+ {volist name="data.scene_focus_images" id="so"} + {$so.title} + {/volist} +
+
+ +
+ 右箭头 +
+
+ +
+ {volist name="data.scene_focus_images" id="so"} +
+
{$so.title}
+
{$so.short_title}
+
+ {/volist} +
+
+{/notempty} +{notempty name="data.camare_microphone_security"} + +{assign name="cms_section_title" value=":array_shift($data.camare_microphone_security)"/} + +{assign name="camare_microphone" value=":array_shift($data.camare_microphone_security)"/} + +{assign name="security" value=":array_shift($data.camare_microphone_security)"/} +
+
{$cms_section_title.title|default=''}
+
+ + {notempty name="camare_microphone"} +
+ {$camare_microphone.title} +
+ {/notempty} + + {notempty name="security"} +
+ +
+ {/notempty} +
+
+
+ {notempty name="camare_microphone"}
{$camare_microphone.title}
{/notempty} + {notempty name="security"}
{$security.title}
{/notempty} +
+
+
+ {notempty name="camare_microphone"} +
{$camare_microphone.short_title}
+ {/notempty} + {notempty name="security"} +
{$security.short_title}
+ {/notempty} +
+{/notempty} +{notempty name="data.unified_preinstall"} + +
+{/notempty} +{notempty name="data.product_testing"} + +
+
+ {volist name="data.product_testing" id="po"} + {$po.title} + {/volist} +
+
+{/notempty} +{notempty name="data.webpage_footnotes"} + +
+
{$data.webpage_footnotes.desc|raw}
+
+{/notempty} {/block} {block name="script"} + {/block} \ No newline at end of file diff --git a/public/static/index/mobile/css/public.css b/public/static/index/mobile/css/public.css index 23e43f7f..17e71736 100755 --- a/public/static/index/mobile/css/public.css +++ b/public/static/index/mobile/css/public.css @@ -22,7 +22,7 @@ * { margin: 0; padding: 0; - /* font-family: 'HarmonyOS'; */ + font-family: 'HarmonyOS'; -ms-overflow-style: none; /* IE 和 Edge */ scrollbar-width: none; diff --git a/public/static/index/pc/css/topic_laptop/45w.css b/public/static/index/pc/css/topic_laptop/45w.css new file mode 100644 index 00000000..06db6743 --- /dev/null +++ b/public/static/index/pc/css/topic_laptop/45w.css @@ -0,0 +1,18 @@ +.dl { + width: 100%; + padding-top: 1.89rem; +} +.dl-t { + color: #cbcfd8; + font-size: 0.63rem; + width: 100%; + text-align: center; +} +.dl-p { + color: #cbcfd8; + font-size: clamp(16px, 1vw, 0.22rem); + width: 100%; + text-align: center; + padding-top: 0.63rem; + padding-bottom: 0.37rem; +} diff --git a/public/static/index/pc/css/topic_laptop/amd.css b/public/static/index/pc/css/topic_laptop/amd.css new file mode 100644 index 00000000..1f562b89 --- /dev/null +++ b/public/static/index/pc/css/topic_laptop/amd.css @@ -0,0 +1,145 @@ +.amd-box { + width: 100%; + background: #000; + overflow: hidden; + max-width: 1440px; + min-width: 1280px; + margin: 0 auto; +} + +.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.2rem; +} +.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: 710/210; + 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, +.amd-img-3-right { + flex: 1; + width: 50%; + height: 100%; +} + +/* 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: 20px; + 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; +} diff --git a/public/static/index/pc/css/topic_laptop/bly.css b/public/static/index/pc/css/topic_laptop/bly.css new file mode 100644 index 00000000..a8c10bc6 --- /dev/null +++ b/public/static/index/pc/css/topic_laptop/bly.css @@ -0,0 +1,47 @@ +.bly { + max-width: 1440px; + min-width: 1280px; + margin: 0 auto; + aspect-ratio: 1437/679; + /* max-height: 6.97rem; */ + padding-top: 4.02rem; +} + +.bly .ba-slider .handle:after { + position: absolute; + top: 50%; + width: 48px; + height: 48px; + margin: -24px 0 0 -24px; + content: ''; + display: flex; + align-items: center; + justify-content: center; + background: #fff + url('https://dev.ow.f2b211.com/static/index/pc/images/ba-arrow.png') + center center / 22px 22px no-repeat; + border: 1px solid #fff; + border-radius: 50%; + transition: all 0.3s ease; + transform: scale(1); + z-index: 5; + box-shadow: none; +} + +.bly .ba-slider .handle.ba-draggable:after { + transform: scale(0.8); +} +.bly-t { + font-size: 0.63rem; + color: #cbcfd8; + text-align: center; + width: 100%; +} +.bly-p { + font-size: clamp(16px, 1vw, 0.22rem); + color: #cbcfd8; + text-align: center; + width: 100%; + padding-top: 0.51rem; + padding-bottom: 2.17rem; +} diff --git a/public/static/index/pc/css/topic_laptop/bottom.css b/public/static/index/pc/css/topic_laptop/bottom.css new file mode 100644 index 00000000..625881db --- /dev/null +++ b/public/static/index/pc/css/topic_laptop/bottom.css @@ -0,0 +1,41 @@ +.bottom-img-box { + width: 100%; + min-width: 1280px; + padding: 4rem 0; +} +.bottom-img { + /* width: 14.416rem; */ + width: 1440px; + min-width: 1280px; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin: 0 auto; +} +.bottom-img img { + width: 33%; + /* flex:1; */ + height: auto; + +} +.bottom-img img:nth-child(4) { + padding-top: 8px; +} +.bottom-img img:nth-child(5) { + padding-top: 8px; +} +.bottom-img img:nth-child(6) { + padding-top: 8px; +} +.bottom-text { + width: 100%; + margin-bottom: 4.3rem; +} +.bottom-p { + max-width: 1440px; + min-width: 1280px; + margin:0 auto; + font-size:clamp(16px, 1vw, 0.22rem); + color:#cbcfd8; + white-space: normal; +} \ No newline at end of file diff --git a/public/static/index/pc/css/topic_laptop/footer.css b/public/static/index/pc/css/topic_laptop/footer.css new file mode 100644 index 00000000..ae495159 --- /dev/null +++ b/public/static/index/pc/css/topic_laptop/footer.css @@ -0,0 +1,162 @@ +.orico_footer { + background: #000; + font-size: 16px; /* 1rem*16=16px */ + } + .orico_footer .fotter { + margin: 0 auto; + overflow: hidden; + padding-bottom: 88px; /* 5.5rem*16=88px */ + padding-top: 36px; /* 2.25rem*16=36px */ + position: relative; + } + .orico_footer .fotter .footerico { + position: absolute; + height: 50px; /* 3.125rem*16=50px */ + left: 8%; + top: 5%; + } + .orico_footer .fotter .footerMain { + min-width: 1024px; + max-width: 1200px; /* 75rem*16=1200px */ + margin: 0 auto; + display: flex; + flex-direction: column; + } + .orico_footer .fotter .footerMain .foottxttop { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; + } + .orico_footer .fotter .footerMain .foottxttop .foootCt { + /* gap: 1.5rem; + display: grid; */ + display: flex; + flex-direction: column; + margin-bottom: 20px; /* 原px保留 */ + } + .orico_footer .fotter .footerMain .foottxttop .foootCt .ftitle { + font-weight: 700; + color: #fff; + font-size: 20px; /* 1.25rem*16=20px */ + margin-bottom: 30px; /* 原px保留 */ + } + .orico_footer .fotter .footerMain .foottxttop .foootCt ul { + /* display: grid; + gap: 0.75rem; */ + display: flex; + flex-direction: column; + } + .orico_footer .fotter .footerMain .foottxttop .foootCt ul li { + margin-bottom: 15px; /* 原px保留 */ + } + .orico_footer .fotter .footerMain .foottxttop .foootCt ul .fline { + color: #fff; + opacity: 0.7; + transition: opacity 0.2s ease-in-out; + overflow-wrap: anywhere; + font-size: 16px; /* 兜底确保16px */ + } + .orico_footer .fotter .footerMain .foottxtbottom { + padding-left: 14%; + display: grid; + padding-top: 4%; + } + .orico_footer .fotter .footerMain .foottxtbottom .ftopicos { + display: flex; + justify-content: space-between; + align-items: center; + padding-bottom: 1%; + gap: 32px; /* 2rem*16=32px */ + } + .orico_footer .fotter .footerMain .foottxtbottom .ftopicos ul { + /* gap: 0.75rem 1.5rem; */ + flex-wrap: wrap; + display: flex; + } + .orico_footer .fotter .footerMain .foottxtbottom .ftopicos ul a { + margin-right: 32px; /* 2rem*16=32px */ + } + .orico_footer .fotter .footerMain .foottxtbottom .ftopicos ul img { + height: 30px; /* 原px保留 */ + width: 30px; /* 原px保留 */ + } + .orico_footer .fotter .footerMain .foottxtbottom .ftcopyright { + color: #b3b3b3; + font-size: 16px; /* 原0.875rem=14px → 提升至16px */ + } + .orico_footer .fotter .footerMain .foottxtbottom .ftcopyright a { + color: #b3b3b3; + font-size: 16px; /* 兜底确保16px */ + } + .orico_footer .fotter .footerMain .foottxtbottom .batext { + color: #fff; + font-size: 16px; /* 原14px → 提升至16px */ + margin-top: 5px; /* 原px保留 */ + } + + .oricoCont { + width: 100%; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 56px 0; /* 3.5rem*16=56px */ + background: transparent; + background: #f2f2f2; + } + .oricoCont .ctitem { + width: 45%; + display: flex; + flex-direction: column; + align-items: center; + } + .oricoCont .ctitem .ctimg { + max-width: 100px; /* 6.25rem*16=100px */ + width: 60px; /* 3.75rem*16=60px */ + height: 60px; /* 3.75rem*16=60px */ + margin-top: 2%; + display: block; + margin-left: auto; + margin-right: auto; + } + .oricoCont .ctitem .cttitle { + font-size: 20px; /* 1.25rem*16=20px */ + text-align: center; + font-weight: 600; + line-height: 40px; /* 2.5rem*16=40px */ + } + .oricoCont .ctitem .ctdec { + font-size: 16px; /* 原0.875rem=14px → 提升至16px */ + text-align: center; + line-height: 16px; /* 1rem*16=16px */ + margin: auto; + } + .backtop { + position: fixed; + right: 20px; /* 1.25rem*16=20px */ + padding: 10px 5px; /* 原px值保留 */ + bottom: 10%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + color: #666; + font-size: 16px; /* 原0.75rem=12px → 提升至16px保障可读性 */ + background: #fff; + cursor: pointer; + border: 1px solid rgb(241, 241, 241); +} + +.backtop .ictop { + height: 18px; /* 1.125rem*16=18px */ + width: 15px; /* 0.9375rem*16=15px */ + margin-bottom: 4px; /* 0.25rem*16=4px */ +} + @media screen and (max-width: 1777px) { + .footerico { + top: 65% !important; + bottom: 24%; + left: 50% !important; + } + } \ No newline at end of file diff --git a/public/static/index/pc/css/topic_laptop/fs.css b/public/static/index/pc/css/topic_laptop/fs.css new file mode 100644 index 00000000..4237446a --- /dev/null +++ b/public/static/index/pc/css/topic_laptop/fs.css @@ -0,0 +1,41 @@ +.fs { + min-width: 1280px; +} +.fs-box { + width: 100%; + aspect-ratio: 16/9; /* 2560/1440=16/9，核心比例约束 */ + position: relative; +} +.fs-box img { + width: 100%; +} +.fs-box-img { + display: flex; + /* width: 100%; + position: absolute; + bottom: -60px; */ + display: flex; + justify-content: center; + gap: 0.2rem; + min-width: 1280px; +} +.fs-box-img img { + max-width: 7.1rem; +} +.fs-b-img { + width: 100%; + display: flex; + justify-content: center; + margin-top: 0.2rem; + min-width: 1280px; +} +.fs-b-img img { + width: 100%; + max-width: 14.4rem; +} +.fs-ts { + font-size: clamp(16px, 1vw, 0.22rem); + text-align: center; + color:#cbcfd8; + padding:0.4rem 0; +} \ No newline at end of file diff --git a/public/static/index/pc/css/topic_laptop/header.css b/public/static/index/pc/css/topic_laptop/header.css new file mode 100644 index 00000000..36dfbc51 --- /dev/null +++ b/public/static/index/pc/css/topic_laptop/header.css @@ -0,0 +1,398 @@ +@charset "UTF-8"; +/* 全局文字最小尺寸兜底 */ +.header-PC { + width: 100%; + font-size: 0; /* 清除行内块间隙 */ +} +.header-PC * { + min-font-size: 16px !important; /* 强制最小16px */ + box-sizing: border-box; +} + +.header-PC #header { + margin: 0 auto; + height: 60px; /* 0.6rem*100=60px */ + max-width: var(--max-width); + position: fixed; + top: 0; + display: flex; + flex-direction: row; + align-items: center; + z-index: 999; + background: white; + color: black; + width: 100%; + font-size: 16px; /* 基础字号16px */ +} +.header-PC #header .nav1 { + position: relative; + width: 20%; +} +.header-PC #header .nav1 img { + width: 45%; + margin-left: 40%; +} +.header-PC #header .nav2 { + position: relative; + width: 60%; +} +.header-PC #header .nav2 .navItem { + font-size: 16px; /* 强制16px */ + position: relative; + display: flex; + flex-direction: row; + align-items: center; + flex-wrap: wrap; + justify-content: center; + width: 12.5%; + height: 60px; /* 0.6rem*100=60px */ + text-align: center; + float: left; + text-decoration: none; + transition: all 0.3s ease; + -webkit-transition: all 0.5s ease; +} +.header-PC #header .nav2 .navItem a { + padding-right: 5px; /* 0.05rem*100=5px */ + padding-left: 20px; /* 0.2rem*100=20px */ + text-decoration: none; + word-break: keep-all; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + word-wrap: break-word; + text-wrap: nowrap; + font-size: 16px; /* 确保16px */ +} +.header-PC #header .nav2 .navItem .downimg { + height: 12px; /* 0.12rem*100=12px */ +} +.header-PC #header .nav2 .navItem .navItemConten { + width: 100%; + z-index: 999; + background-color: #f2f2f2; + max-height: 660px; /* 6.6rem*100=660px */ + box-shadow: 3px 5px 60px -20px #88909a; /* 0.03/0.05/0.6/-0.2rem 转px */ + position: fixed; + border: 1px solid lightgray; + top: 60px; /* 0.6rem*100=60px */ + transition: max-height 0.5s ease-out, opacity 0.5s ease-out; + left: 0; + display: none; + font-size: 16px; /* 基础字号16px */ +} +.header-PC #header .nav2 .navItem .navItemConten .navItem_cyleft { + float: left; + text-align: center; + width: 20%; + max-height: 660px; /* 6.6rem*100=660px */ + font-size: 16px; /* 强制16px */ +} +.header-PC #header .nav2 .navItem .navItemConten .navItem_cyleft li { + cursor: pointer; + zoom: 1; + clear: both; + border: 1px solid transparent; +} +.header-PC #header .nav2 .navItem .navItemConten .navItem_cyleft li a { + line-height: 44px; /* 0.44rem*100=44px */ + color: #656a6d; + font-size: 16px; /* 确保16px */ +} +.header-PC #header .nav2 .navItem .navItemConten .navItem_cyleft li a:hover { + color: #004bfa; +} +.header-PC #header .nav2 .navItem .navItemConten .navItem_cyleft li.it_active { + border-color: #dddddd; + background-color: #ffffff; +} +.header-PC #header .nav2 .navItem .navItemConten .navItem_cyright { + max-height: 660px; /* 6.6rem*100=660px */ + min-height: 460px; /* 4.6rem*100=460px */ + overflow-y: auto; + border-left: 1px solid #dddddd; + font-weight: normal; + background-color: #fff; + margin: 0 auto; + box-shadow: -3px 0 0px #f3f3f3; /* -0.03rem*100=-3px */ + text-align: left; +} +.header-PC #header .nav2 .navItem .navItemConten .navItem_cyright .nav_cyrightit dt { + font-size: 16px; /* 原0.14rem=14px → 提升至16px */ + line-height: 16px; /* 0.16rem*100=16px */ + margin-inline-start: 20px; /* 0.2rem*100=20px */ + font-weight: 600; + border-bottom: 1px solid rgba(225, 225, 225, 0.5); + padding-bottom: 13px; /* 0.13rem*100=13px */ + padding-top: 16px; /* 0.16rem*100=16px */ +} +.header-PC #header .nav2 .navItem .navItemConten .navItem_cyright .nav_cyrightit dt img { + height: 16px; /* 0.16rem*100=16px */ + max-width: 100%; +} +.header-PC #header .nav2 .navItem .navItemConten .navItem_cyright .nav_cyrightit dt a { + color: #333; + text-decoration: none; + word-break: keep-all; + overflow: hidden; + text-overflow: ellipsis; + word-wrap: break-word; + text-wrap: nowrap; + font-size: 16px; /* 确保16px */ +} +.header-PC #header .nav2 .navItem .navItemConten .navItem_cyright .nav_cyrightit dd { + font-size: 16px; /* 原0.14rem=14px → 提升至16px */ + line-height: 40px; /* 0.4rem*100=40px */ + padding-top: 0vw; + font-weight: 100; + display: inline-block; + margin-right: 3%; + margin-inline-start: 40px; /* 0.4rem*100=40px */ +} +.header-PC #header .nav2 .navItem .navItemConten .navItem_cyright .nav_cyrightit dd a { + font-size: 16px; /* 确保16px */ +} +.header-PC #header .nav2 .navItem .navItemConten .navItem_cyright .nav_cyrightit dd a:hover { + color: #004bf9; + font-weight: 600; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transition: all 0.2s linear; +} +.header-PC #header .nav2 .navItem .navItemConten.active { + max-height: 660px; /* 6.6rem*100=660px */ + opacity: 1; +} +.header-PC #header .nav2 .navItem .navItemConten1 { + background-color: #fff; + color: black; + position: absolute; + top: 60px; /* 0.6rem*100=60px */ + left: 20px; /* 0.2rem*100=20px */ + width: auto; + height: auto; + z-index: 9999; + border-radius: 5px; /* 0.05rem*100=5px */ + box-shadow: 0 0 1px 0 #88909a; /* 0.01rem*100=1px */ + display: none; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 8px 0; /* 0.08rem*100=8px */ + font-size: 16px; /* 基础字号16px */ +} +.header-PC #header .nav2 .navItem .navItemConten1 li { + color: #fff; + float: left; + text-align: center; + line-height: 24px; /* 0.24rem*100=24px */ + padding: 8px 32px; /* 0.08/0.32rem*100=8/32px */ + display: list-item; +} +.header-PC #header .nav2 .navItem .navItemConten1 li a { + cursor: pointer; + padding-left: 0; + white-space: nowrap; + font-size: 16px; /* 确保16px */ +} +.header-PC #header .nav2 .navItem > a.active, +.header-PC #header .nav2 .navItem .navItemConten1 li a:hover { + color: #004bfa; +} +.header-PC #header .nav3 { + position: relative; + width: 20%; + background-color: transparent; + display: flex; + align-items: center; + cursor: pointer; + font-size: 16px; /* 基础字号16px */ +} +.header-PC #header .nav3 .searchimg { + margin-left: 10%; +} +.header-PC #header .nav3 .storetopbt { + background: #004cfa; + color: #fff; + padding: 0 15px; /* 0.15rem*100=15px */ + border-radius: 20px; /* 0.2rem*100=20px */ + height: 38px; /* 0.38rem*100=38px */ + line-height: 40px; /* 0.4rem*100=40px */ + margin-left: 15%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + font-size: 16px; /* 强制16px */ +} +.header-PC #header .nav3 .storetopbt .storeImgico { + width: 20px; /* 0.2rem*100=20px */ + margin-right: 8px; /* 0.08rem*100=8px */ +} +.header-PC #header .nav3 .choesCountry { + position: relative; + margin-left: 15%; + display: flex; +} +.header-PC #header .nav3 .choesCountry .topCountry { + display: none; + width: 340px; /* 3.4rem*100=340px */ + background-color: white; + position: fixed; + right: 5%; + top: 80px; /* 0.8rem*100=80px */ + border-radius: 15px; /* 0.15rem*100=15px */ + box-shadow: 2px 2px 10px 1px #88909a; /* 0.02/0.02/0.1/0.01rem 转px */ + font-size: 16px; /* 基础字号16px */ +} +.header-PC #header .nav3 .choesCountry .topCountry li { + width: 100%; + height: 50px; /* 0.5rem*100=50px */ + line-height: 50px; /* 0.5rem*100=50px */ + text-align: center; + display: flex; +} +.header-PC #header .nav3 .choesCountry .topCountry li .countryName { + width: 70%; + text-align: left; + margin-left: 10px; /* 0.1rem*100=10px */ + font-size: 16px; /* 强制16px */ +} +.header-PC #header .nav3 .choesCountry .topCountry li .cico { + width: 18%; + margin-left: 0; +} +.header-PC #header .nav3 .choesCountry .topCountry li .cico .countryimg { + margin-left: 0; + margin-left: 20px; /* 0.2rem*100=20px */ + margin-top: 15px; /* 0.15rem*100=15px */ + vertical-align: top; +} +.header-PC #header .nav3 .choesCountry .topCountry li.closec { + display: flex; + flex-direction: row; + justify-content: end; + height: 30px; /* 0.3rem*100=30px */ +} +.header-PC #header .nav3 .choesCountry .topCountry .closecountrybt { + color: #aaa; + margin-top: -5px; /* 0.05rem*100=5px */ + cursor: pointer; + height: 20px; /* 0.2rem*100=20px */ + width: 20px; /* 0.2rem*100=20px */ + margin-right: 10px; /* 0.1rem*100=10px */ + font-size: 16px; /* 确保关闭按钮文字16px */ +} +.header-PC .searchmodalMian { + position: fixed; + z-index: 999; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.7); + z-index: 998; + display: none; +} +.header-PC .searchmodalMian .searchmodalct { + background-color: #fff; + padding: 20px; /* 0.2rem*100=20px */ + border-radius: 20px; /* 0.2rem*100=20px */ + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 0.04/0.08rem 转px */ + border: 1px solid rgba(0, 0, 0, 0.2); + position: fixed; + right: 2%; + width: 33%; + top: 80px; /* 0.8rem*100=80px */ + height: 80%; + overflow-y: auto; + z-index: 998; + font-size: 16px; /* 基础字号16px */ +} +.header-PC .searchmodalMian .searchmodalct .close-btn { + color: #aaa; + float: right; + font-size: 24px; /* 0.24rem*100=24px */ + cursor: pointer; +} +.header-PC .searchmodalMian .searchmodalct #serrchinput { + margin-left: 10%; + margin-top: 5%; + width: 80%; + height: 44px; /* 0.44rem*100=44px */ + border: 1px solid grey; + border-radius: 22px; /* 0.22rem*100=22px */ + background-position: 95% 50%; + padding-left: 5%; + font-size: 16px; /* 输入框文字16px */ +} +.header-PC .searchmodalMian .searchmodalct .searchhistory, +.header-PC .searchmodalMian .searchmodalct .popProduct { + margin-top: 5%; + margin-left: 10%; + width: 80%; + display: flex; + position: relative; +} +.header-PC .searchmodalMian .searchmodalct .searchhistory .h_title, +.header-PC .searchmodalMian .searchmodalct .popProduct .h_title { + position: absolute; + left: 0; + top: 1%; + font-size: 16px; /* 保持16px */ + color: #989898; +} +.header-PC .searchmodalMian .searchmodalct .searchhistory ul, +.header-PC .searchmodalMian .searchmodalct .popProduct ul { + margin-top: 10%; + margin-left: 1%; +} +.header-PC .searchmodalMian .searchmodalct .popProduct .popmain{ + width: 100%; +} +.header-PC .searchmodalMian .searchmodalct .searchhistory .popmain, +.header-PC .searchmodalMian .searchmodalct .popProduct .popmain { + display: flex; + flex-direction: row; + flex-wrap: wrap; +} +.header-PC .searchmodalMian .searchmodalct .searchhistory .popmain .popitem, +.header-PC .searchmodalMian .searchmodalct .popProduct .popmain .popitem { + text-align: center; + margin-top: 7%; + margin-left: 1%; + display: flex; + flex-direction: column; + justify-content: center; + width: 30%; + align-items: center; + overflow: hidden; +} +.header-PC .searchmodalMian .searchmodalct .searchhistory .popmain .popitem .popimg, +.header-PC .searchmodalMian .searchmodalct .popProduct .popmain .popitem .popimg { + width: 115px; /* 1.15rem*100=115px */ + height: 115px; /* 1.15rem*100=115px */ + margin: 0 auto; +} +.header-PC .searchmodalMian .searchmodalct .searchhistory .popmain .popitem .productName, +.header-PC .searchmodalMian .searchmodalct .popProduct .popmain .popitem .productName { + font-weight: 600; + display: -webkit-box; + -webkit-line-clamp: 1; + text-overflow: ellipsis; + font-size: 16px; /* 原0.128rem=12.8px → 提升至16px */ + margin-top: 10%; +} +.header-PC .searchmodalMian .searchmodalct .popProduct .popmain .popitem .productName + { + width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + font-size: 16px; /* 原14px → 提升至16px */ + } + .header-PC .searchmodalMian .searchmodalct .popProduct .popmain .popitem .produc-dec{ + font-size: 16px; /* 原10px → 提升至16px */ + color: #000000; + margin-top: 1%; + } \ No newline at end of file diff --git a/public/static/index/pc/css/topic_laptop/index.css b/public/static/index/pc/css/topic_laptop/index.css new file mode 100644 index 00000000..5a154401 --- /dev/null +++ b/public/static/index/pc/css/topic_laptop/index.css @@ -0,0 +1,20 @@ + +body { + /* width: 100vw; + height: 100vh; */ + background: #000; + overflow-x: hidden; + padding: 0 !important; + margin:0 !important; +} +.opacity0 { + opacity: 0; + transform: translateY(0.5rem); + visibility: hidden; + /* margin-top: 20px; */ + will-change: opacity, transform; + backface-visibility: hidden; + perspective: 1000px; + transition: opacity 0.8s ease-out, transform 0.8s ease-out, + visibility 0.8s ease-out; +} diff --git a/public/static/index/pc/css/topic_laptop/ips.css b/public/static/index/pc/css/topic_laptop/ips.css new file mode 100644 index 00000000..6e99d8a5 --- /dev/null +++ b/public/static/index/pc/css/topic_laptop/ips.css @@ -0,0 +1,58 @@ +.ips { + position: relative; + width: 100%; + aspect-ratio: 2560/1657; /* 2560/1440=16/9，核心比例约束 */ + /* background: url('../img/ips1.png'); + background-repeat: no-repeat; + background-size: 100% auto; 宽度铺满，高度自动 */ + min-width: 1280px; + margin-top: 2.7rem; +} +.ips-text { + color: #cbcfd8; + /* width: 1440px; */ + min-width: 1280px; + /* max-width: 1440px; */ + /* margin-left: 6rem; */ + width: 100%; +} +.ips-t { + font-size: 0.63rem; + padding-top: 3.19rem; + padding-left: 6rem; +} +.ips-p { + font-size: clamp(16px, 1vw, 0.22rem); + padding-top: 0.86rem; + padding-left: 6rem; +} + +.ips-img { + display: flex; + flex-wrap: wrap; /* 允许换行 */ + justify-content: space-between; /* 左对齐，也可设为center（居中） */ + margin-left: 6rem; + width: 6.8rem; + gap: 2.5rem; + padding-top: 2.6rem; +} + +.ips-img img { + max-width: 2.15rem; + max-height: 1.82rem; +} + +/* .ips-img { + width: 100%; + display: flex; + padding-left: 7rem; + padding-top: 1.35rem; +} +.ips-img img { + width: 100%; + max-width: 2.15rem; + max-height: 1.82rem; +} +.ips-img img:nth-child(2) { + padding-left: 2rem; +} */ diff --git a/public/static/index/pc/css/topic_laptop/jk.css b/public/static/index/pc/css/topic_laptop/jk.css new file mode 100644 index 00000000..a7010e48 --- /dev/null +++ b/public/static/index/pc/css/topic_laptop/jk.css @@ -0,0 +1,110 @@ +/* 图片容器：100vw宽，最小宽度1440px，按图片原始比例（2560:1857）定高 */ +.zoom-container { + width: 100%; + min-width: 1440px; + overflow: hidden; + position: relative; + /* 固定比例：高度 = 宽度 * 1857/2560，确保图片不裁切 */ + aspect-ratio: 2560 / 1857; + height: auto; /* 替代原max计算，用aspect-ratio保证比例 */ +} + +/* 图片包裹层：与容器同尺寸，定位参考系，承接缩放变换 */ +.img-wrapper { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: hidden; +} + +/* 图片：按原始比例填充包裹层，不裁切，初始放大+过渡动画 */ +.bg-img { + width: 100%; + height: 100%; + object-fit: contain; /* 改为contain，确保图片完整显示，不裁切 */ + display: block; + transform: scale(1.5); + transition: transform 1.8s ease; + transform-origin: center center; +} + +/* 图片缩小后的状态 */ +.bg-img.zoom-out { + transform: scale(1); +} + +/* 标注样式：关键修正 - 基于容器绝对定位，百分比参考图片原始比例 */ +.annotation { + position: absolute; + color: #48494D; + font-size: calc(12px + 0.3vw); + opacity: 0; + transform: translateY(calc(10px + 0.5vw)); + transition: opacity 0.8s ease, transform 0.8s ease; + pointer-events: none; + z-index: 10; + white-space: nowrap; + /* 关键：标注的定位参考系是容器（与图片同比例），而非缩放后的图片 */ + top: 0; + left: 0; + /* 重置默认值，依赖内联style的百分比定位 */ +} + +/* 标注显示状态 */ +.annotation.anno-show { + opacity: 1; + transform: translateY(0); +} + +.annotation span { + position: relative; + display: inline-block; + /* 确保文字居中对齐 */ + text-align: center; +} + +/* 标注线条样式：基于文字定位，适配缩放 */ +.annotation span::before { + content: ''; + position: absolute; + left: 50%; + transform: translateX(-50%); + width: 1px; + height: 0; + bottom: calc(100% + 6px); + background-color: #48494D; + transition: height 0.8s ease; + transform-origin: bottom center; +} + +/* 标注显示时，设置线条最终高度 */ +.annotation.anno-show span::before { + height:clamp(50px,3vw,0.6rem); + /* 最终高度（vw单位） */ +} + +/* 响应式适配：1280px以下固定尺寸 */ +@media (max-width: 1280px) { + .zoom-container { + min-width: 1280px; /* 最小宽度适配 */ + } + .annotation span::before { + bottom: calc(100% + 6px); + } + .annotation.anno-show span::before { + height: 38px; /* 固定高度 */ + } + .annotation { + font-size: 14px; /* 固定字体大小，避免过小 */ + } +} + +/* 标注延迟类 */ +.anno-delay-1 { + transition-delay: 0.8s; +} +.anno-delay-1 span::before { + transition-delay: 0.8s; +} \ No newline at end of file diff --git a/public/static/index/pc/css/topic_laptop/lb.css b/public/static/index/pc/css/topic_laptop/lb.css new file mode 100644 index 00000000..6dfca21d --- /dev/null +++ b/public/static/index/pc/css/topic_laptop/lb.css @@ -0,0 +1,119 @@ +/* 外层容器：改用Flex布局承载轮播图+箭头（核心修改） */ +.carousel-wrapper { + width: 100%; + margin: 0 auto; + /* 移除position: relative（无需定位） */ + display: flex; /* 核心：Flex布局 */ + align-items: center; /* 箭头与轮播图垂直居中 */ + justify-content: center; /* 整体水平居中 */ + gap: 0; /* 初始间距为0，后续通过箭头margin控制更灵活 */ + padding: 0; /* 可选：清除默认内边距 */ + padding-top: 0.4rem; +} + +/* 轮播容器整体样式（仅承载图片） */ +.carousel-container { + width: 1440px; + max-width: 1440px; + min-width: 1280px; + /* 移除margin: 0 auto（Flex容器已居中） */ + overflow: hidden; + border-radius: 8px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + flex-shrink: 0; /* 防止轮播图容器被Flex挤压 */ +} + +/* 轮播图片列表 */ +.carousel-imgs { + width: 100%; + height: 100%; + display: flex; + transition: transform 0.5s ease; +} + +/* 单张轮播图样式 */ +.carousel-img { + width: 100%; + height: 100%; + flex-shrink: 0; + object-fit: cover; +} + +/* 图片版箭头样式（Flex版，移除定位相关属性） */ +.carousel-arrow { + /* 箭头容器尺寸（保留原有） */ + width: 0.77rem; + height: 0.77rem; + background: transparent; + border: none; + border-radius: 50%; + cursor: pointer; + z-index: 10; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s ease; + opacity: 0.85; + user-select: none; + flex-shrink: 0; /* 防止箭头被Flex挤压 */ + /* 控制箭头与轮播图的间距（核心：替代定位的left/right） */ + margin: 0 20px; /* 可自定义箭头与轮播图的左右间距，比如改10px/30px */ +} + +/* 箭头图片样式（保留原有） */ +.carousel-arrow img { + width: 100%; + height: 100%; + object-fit: contain; + border-radius: 50%; +} + +/* hover动效（修改transform，移除translateY(-50%)） */ +.carousel-arrow:hover { + opacity: 1; + transform: scale(1.1); /* 仅保留缩放，无需 translateY */ + box-shadow: 0 6px 20px rgba(0, 120, 255, 0.4); +} + +/* 移除定位相关的箭头位置控制（Flex布局无需） */ +.arrow-left { + margin-right: 2.32rem; +} +.arrow-right { + margin-left: 2.32rem; +} + +/* 轮播下方文字区域（保留原有） */ +.carousel-texts { + max-width: 1440px; + min-width: 1280px; + margin: 0 auto; + display: flex; + justify-content: space-between; + padding-top: 1rem; + color: #555; +} + +/* 文字高亮样式（保留原有） */ +.carousel-text { + border-bottom: 3px solid transparent; + transition: all 0.3s ease; + cursor: pointer; + border-radius: 4px; +} + +.carousel-text.active { + font-weight: bold; + transform: translateY(-3px); + color: #fff; +} + +.carousel-text-t { + font-size: 0.32rem; + text-align: center; +} +.carousel-text-p { + font-size:clamp(16px, 1vw, 0.22rem); + padding-top: 0.3rem; + text-align: center; +} diff --git a/public/static/index/pc/css/topic_laptop/m2.css b/public/static/index/pc/css/topic_laptop/m2.css new file mode 100644 index 00000000..960371e0 --- /dev/null +++ b/public/static/index/pc/css/topic_laptop/m2.css @@ -0,0 +1,27 @@ +.m2 { + width: 100%; +} +.m2-bg { + position: relative; + width: 100%; + aspect-ratio: 2560/1800; /* 2560/1440=16/9，核心比例约束 */ + /* background: url('../img/m2.png'); + background-repeat: no-repeat; + background-size: 100% auto; 宽度铺满，高度自动 */ + min-width: 1280px; +} +.m2-bg-t { + font-size: 0.63rem; + color: #cbcfd8; + width: 100%; + text-align: center; + margin-top: 1.78rem; +} +.m2-img-box { + position: absolute; + bottom: 2.19rem; + width: 100%; + display: flex; + justify-content: center; + gap: 0.2rem; +} diff --git a/public/static/index/pc/css/topic_laptop/progress.css b/public/static/index/pc/css/topic_laptop/progress.css new file mode 100644 index 00000000..5083e99b --- /dev/null +++ b/public/static/index/pc/css/topic_laptop/progress.css @@ -0,0 +1,187 @@ +.container { + max-width: 1440px; + min-width: 1280px; + margin: 0 auto; + border-radius: 12px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); +} +.progress-section { + max-width: 1440px; + min-width: 1280px; +} +.progress-title { + font-size: 0.48rem; + color: #cbcfd8; + padding: 2.13rem 0 0.78rem 0; +} + +.progress-item .label { + font-size: 0.4rem; + color: #cbcfd8; + margin-bottom: 0.08rem; + display: flex; + justify-content: space-between; + align-items: baseline; + line-height: 1; + margin-top: 0.3rem; + margin-bottom: 0.76rem; +} + +.progress-item .label .device-name { + flex: 1; +} + +.progress-item .label .baseline { + color: #cbcfd8; + font-size: 0.6rem; +} + +.progress-item .label .value { + font-size: 0.4rem; + font-weight: 600; + min-width: 0.8rem; + text-align: right; + margin-left: 0.16rem; +} +.colorLinearGradient { + background: linear-gradient(90deg, #7e51ff, #d5dfff); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} +.progress-item .label .value.m4-max { + color: #5e5ce6; +} + +.progress-item .label .value.gray { + color: #86868b; +} + +.progress-bar-container { + display: flex; + align-items: center; + gap: 0.16rem; +} + +.progress-bar { + flex: 1; + height: 0.2rem; + max-height: 20px; + min-height: 10px; + border-radius: 10px; + overflow: hidden; + position: relative; +} + +.progress-fill { + height: 100%; + border-radius: 0.05rem; + transition: width 1.2s ease-out; + width: 0; + position: relative; +} + +.progress-fill.m4-max { + background: linear-gradient(40deg, #7e51ff, #e1d5ff); +} + +.progress-fill.m2-max { + background: #cbcfd8; +} + +.progress-fill.m1-max { + background: #cbcfd8; +} + +.progress-fill.baseline { + background: #cbcfd8; +} + +/* 流光动效 */ +/* .progress-fill::after { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 50%; + height: 100%; + background: linear-gradient( + 90deg, + transparent, + rgba(255, 255, 255, 0.3), + transparent + ); + animation: shimmer 1.5s infinite; +} */ + +@keyframes shimmer { + 100% { + left: 150%; + } +} + +/* 基准说明 */ +.baseline-note { + margin-top: 0.3rem; + font-size: 0.13rem; + color: #86868b; + padding-top: 0.15rem; + border-top: 1px solid #e9e9eb; +} + +.baseline-note sup { + font-size: 0.1rem; + vertical-align: top; +} +.w1440 { + width: 14.4rem; + max-width: 1440px; + min-width: 1280px; +} +.w1368 { + width: 1368px; + min-width: 1280px; +} +.w1243 { + width: 1243px; +} +.w964 { + width: 964px; +} +.w681 { + width: 681px; +} +.w1274 { + width: 1274px; +} +.w1000 { + width: 1000px; +} +/* .w1368 { + width: 13.68rem; + min-width: 1280px; +} +.w1243 { + width: 12.43rem; +} +.w964 { + width: 9.64rem; +} +.w681 { + width: 6.81rem; +} */ +.font32 { + font-size: 0.32rem !important; +} +.colorCBCFD8 { + color: #cbcfd8 !important; +} +.color8A8787 { + color: #8a8787 !important; +} +.progress-p { + color: #cbcfd8; + font-size: 0.24rem; + margin-top: 1.23rem; + text-align: center; +} diff --git a/public/static/index/pc/css/topic_laptop/qb.css b/public/static/index/pc/css/topic_laptop/qb.css new file mode 100644 index 00000000..be00d5d0 --- /dev/null +++ b/public/static/index/pc/css/topic_laptop/qb.css @@ -0,0 +1,21 @@ +/* .qb .auto-swiper-container { + background: none; +} */ +.qb-t { + width: 100%; + font-size: 0.63rem; + color: #cbcfd8; + text-align: center; + padding-top: 4.04rem; +} +.qb-p { + font-size: clamp(16px, 1vw, 0.22rem); + color: #cbcfd8; + text-align: center; + padding-top: 0.51rem; + padding-bottom: 0.72rem; +} +.qb-bg-img1 { + max-width: 16.43rem; + min-height: 13.31rem; +} diff --git a/public/static/index/pc/css/topic_laptop/readon.css b/public/static/index/pc/css/topic_laptop/readon.css new file mode 100644 index 00000000..05d2cac0 --- /dev/null +++ b/public/static/index/pc/css/topic_laptop/readon.css @@ -0,0 +1,61 @@ +.readon-box { + position: relative; + width: 100%; + aspect-ratio: 16/9; /* 2560/1440=16/9，核心比例约束 */ + + background-repeat: no-repeat; + background-size: 100% auto; /* 宽度铺满，高度自动 */ + + margin-bottom: 2.63rem; +} + +/* 背景图适配：铺满比例容器 */ +/* .bg-img { + width: 100%; + height: 100%; + min-width: 1280px; +} +.bg-img img { + width: 100%; + height: 100%; +} */ +.readon-text { + max-width: 1440px; + min-width: 1280px; + margin: 0 auto; +} +.readon-t { + color: #cbcfd8; + font-size: 0.64rem; + line-height: 1.4; + padding-top: 1.34rem; + padding-bottom: 0.43rem; +} +.readon-p { + color: #cbcfd8; + font-size: 0.64rem; +} +.readon-js { + color: #cbcfd8; + font-size: 0.27rem; + margin-top: 0.72rem; +} +.readon-img { + width: 100%; + max-width: 1440px; + min-width: 1280px; + margin-top: 10%; +} +.readon-img img { + max-width: 3.78rem; +} +.readon-img-box { + width: 100%; + min-width: 1280px; + position: absolute; + margin: 0 auto; + bottom: -30px; + display: flex; + justify-content: center; + gap: 0.2rem; +} diff --git a/public/static/index/pc/css/topic_laptop/rgb.css b/public/static/index/pc/css/topic_laptop/rgb.css new file mode 100644 index 00000000..cfa9b757 --- /dev/null +++ b/public/static/index/pc/css/topic_laptop/rgb.css @@ -0,0 +1,45 @@ +.rgb { + position: relative; + width: 100%; + aspect-ratio: 2560/1440; /* 2560/1440=16/9，核心比例约束 */ + /* background: url('../img/rgb.png'); + background-repeat: no-repeat; + background-size: 100% auto; */ + min-width: 1280px; + margin-top: 2.7rem; +} +.rgb-text { + position: absolute; + top: -50px; + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; +} +.rgb-t { + width: 100%; + font-size: 0.63rem; + color: #cbcfd8; + text-align: center; +} +.rgb-p { + font-size: clamp(16px, 1vw, 0.22rem); + color: #cbcfd8; + text-align: center; + padding-top: 0.73rem; + line-height: 2.5; +} +.rgb-img { + width: 100%; + min-width: 1280px; + position: absolute; + bottom: -80px; + display: flex; + justify-content: center; + gap: 0.2rem; +} +.rgb-img img { + max-width: 4.66rem; + max-height: 2.6rem; + display: block; +} diff --git a/public/static/index/pc/css/topic_laptop/swiper.css b/public/static/index/pc/css/topic_laptop/swiper.css new file mode 100644 index 00000000..016fe04d --- /dev/null +++ b/public/static/index/pc/css/topic_laptop/swiper.css @@ -0,0 +1,27 @@ +/* 轮播容器 - 核心：基于视口高度自适应 */ +.auto-swiper-container { + width: 100%; + /* 关键：高度 = 视口高度的百分比（可调整，如60vh=屏幕高度60%） */ + /* height: 60vh; */ + /* max-height: 800px; + min-height: 300px; */ + overflow: hidden; +} + +/* 轮播项 - 填充容器高度 */ +.auto-swiper-slide { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +/* 图片自适应核心：填充屏幕比例高度，保持比例 */ +.auto-swiper-slide img { + width: 100%; + height: 100%; + object-fit: cover; /* 优先填充容器，裁剪超出部分（无拉伸） */ + /* object-fit: contain; 可选：完整显示图片，不裁剪（可能留黑边） */ + display: block; +} diff --git a/public/static/index/pc/css/topic_laptop/th.css b/public/static/index/pc/css/topic_laptop/th.css new file mode 100644 index 00000000..dd827825 --- /dev/null +++ b/public/static/index/pc/css/topic_laptop/th.css @@ -0,0 +1,106 @@ +.tabs-container { + width: 100%; + /* color: #fff; + width: 1440px; + max-width: 1440px; + min-width: 1280px; + margin: 0 auto; */ + margin-bottom: 4rem; +} +.tabs-header-box { + width: 100%; + display: flex; + justify-content: center; + margin-top: 1rem; +} +.tabs-header { + display: inline-flex; + /* 改为inline-flex，宽度由子元素决定 */ + position: relative; + border-bottom: 1px solid #cbcfd8; + margin: 0 auto; + width: 2.33rem; + display: flex; +} + +.tab-item { + /* padding: 12px 24px; */ + font-size: clamp(16px, 1vw, 0.22rem); + cursor: pointer; + transition: color 0.2s ease; + white-space: nowrap; + color: #cbcfd8; + flex: 1; + text-align: center; +} + +.tab-item:nth-child(1) { + margin-bottom: 24px; +} + +.tab-item:nth-child(2) { + margin-bottom: 24px; +} + +.tab-indicator { + position: absolute; + bottom: 0; + height: 2px; + background-color: #fff; + transform: translateX(0); + width: 80px; + transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), + width 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); + will-change: transform, width; + backface-visibility: hidden; + perspective: 1000px; +} + +.tab-content { + width: 1440px; + max-width: 1440px; + min-width: 1280px; + margin: 0 auto; +} + +/* 新增样式 */ +.content-image { + max-width: 100%; + height: auto; + border-radius: 8px; +} +.content-image img { + max-width: 14.4rem; +} + +.content-video { + max-width: 100%; + height: auto; + border-radius: 8px; +} +.tabs-p { + width: 100%; + font-size: clamp(16px, 1vw, 0.22rem); + color: #cbcfd8; + text-align: center; + margin-top: 1rem; + display: none; +} +.tabs-p.active { + display: block; +} +.tab-panel { + display: none; +} + +.tab-panel.active { + display: block; +} +.tab-t { + font-size: 0.63rem; + color: #cbcfd8; + width: 100%; + text-align: center; + margin-top: 3.97rem; + margin-bottom: 0.6rem; +} diff --git a/public/static/index/pc/css/topic_laptop/wift.css b/public/static/index/pc/css/topic_laptop/wift.css new file mode 100644 index 00000000..70d9e685 --- /dev/null +++ b/public/static/index/pc/css/topic_laptop/wift.css @@ -0,0 +1,44 @@ + +.wift-bg { + position: relative; + width: 100%; + aspect-ratio: 2560/1913; /* 2560/1440=16/9，核心比例约束 */ + /* background: url('../img/w1.png'); + background-repeat: no-repeat; + background-size: 100% auto; */ + min-width: 1280px; + margin-bottom: 0.71rem; +} +.wift-bg-t { + font-size: 0.63rem; + color: #cbcfd8; + width: 100%; + text-align: center; +} +.wift-bg-p { + font-size: clamp(16px, 1vw, 0.22rem); + color: #cbcfd8; + width: 100%; + text-align: center; + padding-top: 0.74rem; +} +.wift-bg-img { + width: 100%; + display: flex; + justify-content: center; + max-height: 3.11rem; + position: absolute; + bottom: 1.46rem; +} +.wift-bg-img img { + max-width: 14.4rem; + width: 100%; +} +.wift-t { + width: 100%; + color: #cbcfd8; + font-size: 0.72rem; + text-align: center; + margin-top: 3.93rem; + margin-bottom: 0.35rem; +} \ No newline at end of file diff --git a/public/static/index/pc/css/topic_laptop/wift6.css b/public/static/index/pc/css/topic_laptop/wift6.css new file mode 100644 index 00000000..cc4bdd60 --- /dev/null +++ b/public/static/index/pc/css/topic_laptop/wift6.css @@ -0,0 +1,45 @@ +.wift6 { + position: relative; + width: 100%; + aspect-ratio: 2560/1440; /* 2560/1440=16/9，核心比例约束 */ + /* background: url('../img/rgb.png'); + background-repeat: no-repeat; + background-size: 100% auto; */ + min-width: 1280px; + margin-top: 5.7rem; +} +.wift6-text { + position: absolute; + top: -50px; + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; +} +.wift6-t { + width: 100%; + font-size: 0.63rem; + color: #cbcfd8; + text-align: center; +} +.wift6-p { + font-size: clamp(16px, 1vw, 0.22rem); + color: #cbcfd8; + text-align: center; + padding-top: 0.73rem; + line-height: 2.5; +} +.wift6-img { + width: 100%; + min-width: 1280px; + position: absolute; + bottom: -30px; + display: flex; + justify-content: center; + gap: 0.2rem; +} +.wift6-img img { + max-width: 7.15rem; + max-height: 3.09rem; + display: block; +} diff --git a/public/static/index/pc/css/topic_laptop/windows.css b/public/static/index/pc/css/topic_laptop/windows.css new file mode 100644 index 00000000..5990c0cc --- /dev/null +++ b/public/static/index/pc/css/topic_laptop/windows.css @@ -0,0 +1,12 @@ +.windows { + max-width: 1440px; + min-width: 1280px; + position: relative; + width: 100%; + aspect-ratio: 1440/1399; /* 2560/1440=16/9，核心比例约束 */ + /* background: url('../img/windows1.png'); + background-repeat: no-repeat; + background-size: 100% auto; */ + min-width: 1280px; + margin: 0 auto; +} diff --git a/public/static/index/pc/css/topic_laptop/xh.css b/public/static/index/pc/css/topic_laptop/xh.css new file mode 100644 index 00000000..facddc96 --- /dev/null +++ b/public/static/index/pc/css/topic_laptop/xh.css @@ -0,0 +1,53 @@ +.xh { + position: relative; + width: 100%; + aspect-ratio: 2560/2236; /* 2560/1440=16/9，核心比例约束 */ + /* background: url('../img/rgb.png'); + background-repeat: no-repeat; + background-size: 100% auto; */ + min-width: 1280px; + margin-top: 3.45rem; +} +.xh-text { + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + padding-top: 1.06rem; +} +.xh-t { + width: 100%; + font-size: 0.63rem; + color: #cbcfd8; + text-align: center; +} +.xh-p { + font-size: clamp(16px, 1vw, 0.22rem); + color: #cbcfd8; + text-align: center; + padding-top: 0.73rem; + line-height: 2.5; +} +.xh-img { + width: 100%; + min-width: 1280px; + position: absolute; + bottom: 1.8rem; + display: flex; + justify-content: center; + gap: 0.2rem; +} +.xh-img img { + max-width: 7.1rem; + max-height: 3.08rem; + display: block; +} +.xh-b-p { + color: #ffffff; + font-size: clamp(16px, 1vw, 0.22rem); + position: absolute; + bottom: 0; + text-align: center; + left: 50%; + transform: translateX(-50%); +} diff --git a/public/static/index/pc/css/topic_laptop/xn.css b/public/static/index/pc/css/topic_laptop/xn.css new file mode 100644 index 00000000..4899fcdb --- /dev/null +++ b/public/static/index/pc/css/topic_laptop/xn.css @@ -0,0 +1,53 @@ +/* 页面容器（模拟官网宽屏布局） */ +.xn-container { + min-width: 1280px; + max-width: 1440px; + width: 100%; + margin: 0 auto; +} + +/* 图片容器样式（核心） */ +.xn-image-section { + overflow: hidden; + border-radius: 16px; + /* 官网图片圆角风格 */ + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); + max-width: 1440px; + min-width: 1280px; + margin: 0 auto; +} + +.zoom-image { + width: 100%; + height: auto; + display: block; + /* 调整transform过渡时间为2s，opacity为1.5s，可按需修改 */ + transition: transform 2s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 1.5s ease; + transform: scale(0.8); + /* 初始缩放比例 */ + opacity: 0.9; + /* 初始透明度（略暗，放大后变亮） */ +} + +/* 滚动触发后的放大状态 */ +.zoom-image.active { + transform: scale(1.1); + /* 放大5%（官网常用比例，不夸张） */ + opacity: 1; +} +.xn-t { + font-size: 0.67rem; + color: #cbcfd8; + text-align: center; + margin-top: 4.7rem; + margin-bottom: 1.26rem; +} +.xn-p { + padding-top: 0.6rem; +} +.xn-p p { + font-size: clamp(16px, 1vw, 0.22rem); + color: #fff; + text-align: center; + line-height: 2.4; +} diff --git a/public/static/index/pc/css/topic_laptop/yq.css b/public/static/index/pc/css/topic_laptop/yq.css new file mode 100644 index 00000000..fca813cc --- /dev/null +++ b/public/static/index/pc/css/topic_laptop/yq.css @@ -0,0 +1,59 @@ +/* 容器高度完全跟随图片真实高度 */ +.fullscreen-img-container { + position: relative; + width: 100%; + min-width: 1280px; + margin-top: 2.49rem; + aspect-ratio: 16/9; /* 2560/1440=16/9，核心比例约束 */ + /* background: url('../img/yq1.png'); */ + background-size: cover; + /* 去掉所有强制高度，高度=图片真实高度 */ +} + +/* 图片按真实比例显示，不拉伸/裁剪（可选cover，看需求） */ +.fullscreen-img { + width: 100%; + height: auto; + display: block; + /* 如需填满容器，保留cover；如需显示完整图片，改为contain */ + object-fit: cover; +} + +/* 文字：修复宽幅+居中生效（仅改定位行） */ +.overlay-text { + /* 宽幅限制生效 */ + width: 100%; + min-width: 1280px; + padding-top: 1.47rem; +} + +.overlay-text h2 { + width: 100%; + font-size: 0.63rem; + color: #cbcfd8; + text-align: center; + line-height: 1; +} + +.overlay-text p { + font-size: clamp(16px, 1vw, 0.22rem); + color: #cbcfd8; + text-align: center; + padding-top: 0.43rem; +} +.float-cards { + display: flex; + width: 100%; + justify-content: center; + position: absolute; + bottom: -50px; + gap: 0.2rem; +} +.bottom-desc { + text-align: center; + color: #cbcfd8; + font-size: clamp(16px, 1vw, 0.22rem); + padding-top: 1.9rem; + width: 100%; + min-width: 1280px; +} diff --git a/public/static/index/pc/images/topic_laptop/amd1.png b/public/static/index/pc/images/topic_laptop/amd1.png new file mode 100644 index 00000000..323cb641 Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/amd1.png differ diff --git a/public/static/index/pc/images/topic_laptop/amd10.png b/public/static/index/pc/images/topic_laptop/amd10.png new file mode 100644 index 00000000..edbb5314 Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/amd10.png differ diff --git a/public/static/index/pc/images/topic_laptop/amd2.png b/public/static/index/pc/images/topic_laptop/amd2.png new file mode 100644 index 00000000..e69605a3 Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/amd2.png differ diff --git a/public/static/index/pc/images/topic_laptop/amd3.png b/public/static/index/pc/images/topic_laptop/amd3.png new file mode 100644 index 00000000..86c170d2 Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/amd3.png differ diff --git a/public/static/index/pc/images/topic_laptop/amd4.png b/public/static/index/pc/images/topic_laptop/amd4.png new file mode 100644 index 00000000..a12684b0 Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/amd4.png differ diff --git a/public/static/index/pc/images/topic_laptop/amd5.png b/public/static/index/pc/images/topic_laptop/amd5.png new file mode 100644 index 00000000..ebd82bb4 Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/amd5.png differ diff --git a/public/static/index/pc/images/topic_laptop/amd6.png b/public/static/index/pc/images/topic_laptop/amd6.png new file mode 100644 index 00000000..7f2e2fc8 Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/amd6.png differ diff --git a/public/static/index/pc/images/topic_laptop/amd7.png b/public/static/index/pc/images/topic_laptop/amd7.png new file mode 100644 index 00000000..7454c675 Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/amd7.png differ diff --git a/public/static/index/pc/images/topic_laptop/amd8.png b/public/static/index/pc/images/topic_laptop/amd8.png new file mode 100644 index 00000000..a4ab5504 Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/amd8.png differ diff --git a/public/static/index/pc/images/topic_laptop/amd9.png b/public/static/index/pc/images/topic_laptop/amd9.png new file mode 100644 index 00000000..49ee2359 Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/amd9.png differ diff --git a/public/static/index/pc/images/topic_laptop/banner1.png b/public/static/index/pc/images/topic_laptop/banner1.png new file mode 100644 index 00000000..82eaf940 Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/banner1.png differ diff --git a/public/static/index/pc/images/topic_laptop/bottom1.png b/public/static/index/pc/images/topic_laptop/bottom1.png new file mode 100644 index 00000000..65c98456 Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/bottom1.png differ diff --git a/public/static/index/pc/images/topic_laptop/cj1.png b/public/static/index/pc/images/topic_laptop/cj1.png new file mode 100644 index 00000000..eccbb467 Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/cj1.png differ diff --git a/public/static/index/pc/images/topic_laptop/clq.png b/public/static/index/pc/images/topic_laptop/clq.png new file mode 100644 index 00000000..310fb1e8 Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/clq.png differ diff --git a/public/static/index/pc/images/topic_laptop/fs.png b/public/static/index/pc/images/topic_laptop/fs.png new file mode 100644 index 00000000..bfa31998 Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/fs.png differ diff --git a/public/static/index/pc/images/topic_laptop/gab.png b/public/static/index/pc/images/topic_laptop/gab.png new file mode 100644 index 00000000..64ea343b Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/gab.png differ diff --git a/public/static/index/pc/images/topic_laptop/ips1.png b/public/static/index/pc/images/topic_laptop/ips1.png new file mode 100644 index 00000000..6f7d311c Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/ips1.png differ diff --git a/public/static/index/pc/images/topic_laptop/ips2.png b/public/static/index/pc/images/topic_laptop/ips2.png new file mode 100644 index 00000000..6b4df767 Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/ips2.png differ diff --git a/public/static/index/pc/images/topic_laptop/jk.png b/public/static/index/pc/images/topic_laptop/jk.png new file mode 100644 index 00000000..6ff85dc3 Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/jk.png differ diff --git a/public/static/index/pc/images/topic_laptop/jq.png b/public/static/index/pc/images/topic_laptop/jq.png new file mode 100644 index 00000000..339ac851 Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/jq.png differ diff --git a/public/static/index/pc/images/topic_laptop/l1.png b/public/static/index/pc/images/topic_laptop/l1.png new file mode 100644 index 00000000..be2fe146 Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/l1.png differ diff --git a/public/static/index/pc/images/topic_laptop/m2-1.png b/public/static/index/pc/images/topic_laptop/m2-1.png new file mode 100644 index 00000000..9fc68393 Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/m2-1.png differ diff --git a/public/static/index/pc/images/topic_laptop/m2-2.png b/public/static/index/pc/images/topic_laptop/m2-2.png new file mode 100644 index 00000000..a1e0c582 Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/m2-2.png differ diff --git a/public/static/index/pc/images/topic_laptop/m2-3.png b/public/static/index/pc/images/topic_laptop/m2-3.png new file mode 100644 index 00000000..e13a271f Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/m2-3.png differ diff --git a/public/static/index/pc/images/topic_laptop/m2.png b/public/static/index/pc/images/topic_laptop/m2.png new file mode 100644 index 00000000..5c262d13 Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/m2.png differ diff --git a/public/static/index/pc/images/topic_laptop/qb1.png b/public/static/index/pc/images/topic_laptop/qb1.png new file mode 100644 index 00000000..9a227437 Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/qb1.png differ diff --git a/public/static/index/pc/images/topic_laptop/qb2.png b/public/static/index/pc/images/topic_laptop/qb2.png new file mode 100644 index 00000000..77e4dcc3 Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/qb2.png differ diff --git a/public/static/index/pc/images/topic_laptop/r1.png b/public/static/index/pc/images/topic_laptop/r1.png new file mode 100644 index 00000000..f2661ee7 Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/r1.png differ diff --git a/public/static/index/pc/images/topic_laptop/readon1.png b/public/static/index/pc/images/topic_laptop/readon1.png new file mode 100644 index 00000000..c8f66069 Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/readon1.png differ diff --git a/public/static/index/pc/images/topic_laptop/readon2.png b/public/static/index/pc/images/topic_laptop/readon2.png new file mode 100644 index 00000000..0495a8d0 Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/readon2.png differ diff --git a/public/static/index/pc/images/topic_laptop/readon3.png b/public/static/index/pc/images/topic_laptop/readon3.png new file mode 100644 index 00000000..764fd5da Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/readon3.png differ diff --git a/public/static/index/pc/images/topic_laptop/readon4.png b/public/static/index/pc/images/topic_laptop/readon4.png new file mode 100644 index 00000000..b12748e6 Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/readon4.png differ diff --git a/public/static/index/pc/images/topic_laptop/rgb.png b/public/static/index/pc/images/topic_laptop/rgb.png new file mode 100644 index 00000000..64ea343b Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/rgb.png differ diff --git a/public/static/index/pc/images/topic_laptop/rgb1.png b/public/static/index/pc/images/topic_laptop/rgb1.png new file mode 100644 index 00000000..437738f6 Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/rgb1.png differ diff --git a/public/static/index/pc/images/topic_laptop/rgb2.png b/public/static/index/pc/images/topic_laptop/rgb2.png new file mode 100644 index 00000000..945ed795 Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/rgb2.png differ diff --git a/public/static/index/pc/images/topic_laptop/sjdb.png b/public/static/index/pc/images/topic_laptop/sjdb.png new file mode 100644 index 00000000..f0800f19 Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/sjdb.png differ diff --git a/public/static/index/pc/images/topic_laptop/w1.png b/public/static/index/pc/images/topic_laptop/w1.png new file mode 100644 index 00000000..c7cf87a9 Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/w1.png differ diff --git a/public/static/index/pc/images/topic_laptop/wifi6-2.png b/public/static/index/pc/images/topic_laptop/wifi6-2.png new file mode 100644 index 00000000..3ce631d5 Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/wifi6-2.png differ diff --git a/public/static/index/pc/images/topic_laptop/wifi6-3.png b/public/static/index/pc/images/topic_laptop/wifi6-3.png new file mode 100644 index 00000000..e3774787 Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/wifi6-3.png differ diff --git a/public/static/index/pc/images/topic_laptop/wift61.png b/public/static/index/pc/images/topic_laptop/wift61.png new file mode 100644 index 00000000..1d3b060b Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/wift61.png differ diff --git a/public/static/index/pc/images/topic_laptop/windows1.png b/public/static/index/pc/images/topic_laptop/windows1.png new file mode 100644 index 00000000..d13e495e Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/windows1.png differ diff --git a/public/static/index/pc/images/topic_laptop/xh1.png b/public/static/index/pc/images/topic_laptop/xh1.png new file mode 100644 index 00000000..5ebcb8ca Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/xh1.png differ diff --git a/public/static/index/pc/images/topic_laptop/xh2.png b/public/static/index/pc/images/topic_laptop/xh2.png new file mode 100644 index 00000000..f5e58e9a Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/xh2.png differ diff --git a/public/static/index/pc/images/topic_laptop/xkbg.png b/public/static/index/pc/images/topic_laptop/xkbg.png new file mode 100644 index 00000000..14ede7d9 Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/xkbg.png differ diff --git a/public/static/index/pc/images/topic_laptop/xn1.png b/public/static/index/pc/images/topic_laptop/xn1.png new file mode 100644 index 00000000..bcdc538c Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/xn1.png differ diff --git a/public/static/index/pc/images/topic_laptop/yq1.png b/public/static/index/pc/images/topic_laptop/yq1.png new file mode 100644 index 00000000..ae5363a7 Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/yq1.png differ diff --git a/public/static/index/pc/images/topic_laptop/yq2.png b/public/static/index/pc/images/topic_laptop/yq2.png new file mode 100644 index 00000000..6a1242f3 Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/yq2.png differ diff --git a/public/static/index/pc/images/topic_laptop/yq3.png b/public/static/index/pc/images/topic_laptop/yq3.png new file mode 100644 index 00000000..4e6937f2 Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/yq3.png differ diff --git a/public/static/index/pc/images/topic_laptop/yq4.png b/public/static/index/pc/images/topic_laptop/yq4.png new file mode 100644 index 00000000..710b6b84 Binary files /dev/null and b/public/static/index/pc/images/topic_laptop/yq4.png differ