diff --git a/app/index/view/pc/topic_laptop/index.html b/app/index/view/pc/topic_laptop/index.html index e081145f..b8a7925b 100644 --- a/app/index/view/pc/topic_laptop/index.html +++ b/app/index/view/pc/topic_laptop/index.html @@ -1,23 +1,516 @@ {extend name="public/base" /} {block name="style"} + + + + + + + + + + + + + + + + + + + + + + + + + + + {/block} {block name="main"} -测试
- 测试 + 测试
+ +
+
+
+ amd图片 +
+
+
飓风图片
+
显卡图片
+
+
+
飓风图片
+
+
飓风图片
+
飓风图片
+
+
+
+ +
+
+ + +
+
+ +
+
+
+ +
+
+

超能引擎 性能拉满

+

强悍「芯」实力 定义性能新标杆

+
+
+ 核心卡片 + 线程卡片 + 频率卡片 +
+
+ +
+ 搭载高性能CPU与GPU，多任务并行流畅不卡顿 +
+ +
+

CineBench R23 多核跑分

+
+
+
+
+
+
+
+
+ Ryzen7 7735HS: + 13766 +
+
+ +
+
+
+
+
+
+
+ Ryzen5 7640HS: + 12950 +
+
+ +
+
+
+
+
+
+
+ 锐龙9 6900HX: + 13183 +
+
+ +
+
+
+
+
+
+
+ 酷睿i5-12450H: + 10200 +
+
+
+
+
+
+
+
+
+ Ryzen5 6600H: + 10297 +
+
+
+
*此跑分为ORICO实验室测定所得，请以实际使用为准
+
+ +
+
+
Radeon 680M
+
独显级显卡 低延迟
全能创作力
+
搭配高效架构与先进制程，在低功耗下实现游戏
创作场景的逼真光影渲染与流畅性能输出
+
+ +
+
+
+ + + + +
+
+ +
+

3DMARK Time Spy显卡得分

+
+
+
+
+
+
+
+
+ Ryzen7 7735HS: + 13766 +
+
+
+
+
+
+
+
+
+ Ryzen7 7735HS: + 1000 +
+
+
+
+
+
+
+
+
+ NVIDIA GTX 750: + 1000 +
+
+ +
+
+
+
+
+
+
+ Ryzen5 6600H: + 950 +
+
+
+
*此跑分为ORICO实验室测定所得，请以实际使用为准
+
+ +
+
6400MT/s
+
+
+
高频狂飙 超大带宽，游戏创作飞快
+
+ 搭载新一代DDR5架构，性能频率跃升至6400MHz，16GB/32GB运行内存，双通道高带宽设计叠加低延迟优化，大型软件
秒加载;多任务多窗口同步并行也能流畅无卡顿,尽情释放你的创作潜能。 +
+
+
+ +
+ +
+
+ +
+
+
支持PCle 4.0 M.2扩容
释放存储潜能
+
+ + + +
+
+
+ +
+
静享 45W强悍性能
“飓冷”轻音散热系统
+

牛角形双热管架构搭配定制高性能涡轮风扇，超强的散热能力，长时间运行不降频；
在创作、游戏等高负载场景，性能拉满 全程高能

+
+ +
+
+ 使用场景 + +
* 散热图仅为示意, 具体以实物为准
+
+ + +
+
+
+ +
+
+ +
+
性能大跃级 拿捏多场景
+
+ +
+ + +
+
+
+

游戏软件: ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ

+

设计/编程: + ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ +

+

办公/娱乐: ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ、ELDÀ

+
+
+ +
+
+
+ 14寸 IPS 柔光舒适屏
细腻 真实 沉浸 +
+
+ 超清IPS屏，专业级色彩表现，画面显示生动细腻。
办公、学习、创作、游戏、观影，长时间专注眼部依然舒适 + +
+
+ + + + +
+
+
+ +
+
+
100%sRGB超广色域
斑斓色彩跃然眼前
+
色彩丰富真实、细节生动逼真，还原万物本色，画面更出彩。每台电脑出厂前专业调校，
算法硬件助力，色彩精准度高。
+
+ +
+ + + +
+
+ +
+
+
舒适不累眼
+
有效防眩光，显示清晰不刺眼，强光下依然表现出色；搭配类自然光护眼科技，呵护双眼，久看不累
+
+
+ + +
+ + +
+ + +
+
+ +
+
+
轻薄有型 便捷随行
+
外观优雅简约 ，黄金比例机身，棱角分明，诠释利落风格。表面精密喷砂，复刻Mac级出众质感
+
+
+ + 测试 + + + 测试 + +
+
+
+
+ +
+
+
网速时刻在线 跃级流畅
千兆有线网+WiFi6
+
+ 折叠式千兆有线网口和Wi-Fi6无线超能网卡，速度快、抗干扰、低延时，满足多种学习和办公
场合需要，带来前所未有的畅连体验，学习、办公流畅不卡顿，拒绝掉线尴尬 +
+
+
+ + +
+
+ +
+
+
11.4h长久续航 电量满满
+
+ 配备57.5Wh大电池，续航长达11.4h，搭配100W闪充充电器，充一次，用一天 +
+
+
+ + +
+
*此数据为ORICO实验室测定所得，请以实际使用为准；
+
+ +
+ 接口图 + +
肯幸通锁孔
+
千兆网口
+
USB-A
(5Gbps)
+
3.5mm耳麦合一
+
TF口3.0
+
USB-A
(5Gbps)
+
USB-C
(5Gbps)
+
HDMI
+
全功能
USB-C
+
+ +
+
+ +
+ 左箭头 +
+ +
+
+ 轮播图1 + 轮播图2 +
+
+ + +
+ 右箭头 +
+
+ +
+
+
自然风光 - 山川湖海
+
轻薄长续航，随时随地自在办公
+
+
+
自然风光 - 山川湖海
+
轻薄长续航，随时随地自在办公
+
+
+
自然风光 - 山川湖海
+
轻薄长续航，随时随地自在办公
+
+
+
+ +
+
清晰通话 尽兴畅聊
+
+ +
+ 清晰通话展示图 +
+ +
+ +
+
+
+
+
清晰通话
+
安护密守
+
+
+
+
+ 配置1080p前置高清摄像头, 矩阵式降噪麦克风, 噪音环境亦享受清晰通话 +
+
+ +
+
+ +
+
+ + + + + + +
+
+ +
+
· 由于产品批次和生成供应因素实时变化, 为尽可能提供准确的产品信息,规格参数,产品特性等,可能会调整和修订以上页面中的文字描述,图片效果等内容,一球与实际产品性能,规格,直属,零部件等信息相匹配.
+
{/block} {block name="script"} + {/block} \ No newline at end of file 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..837a2f95 --- /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..687dea07 --- /dev/null +++ b/public/static/index/pc/css/topic_laptop/bottom.css @@ -0,0 +1,32 @@ +.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; + gap: 0.2rem; + margin: 0 auto; +} +.bottom-img img { + width: 33%; + flex:1; + height: auto; + +} +.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..32b7ca88 --- /dev/null +++ b/public/static/index/pc/css/topic_laptop/jk.css @@ -0,0 +1,151 @@ +/* 图片容器：100vw宽，最小宽度1280px，按图片比例定高（vw单位） */ +.zoom-container { + width: 100%; + min-width: 1280px; + overflow: hidden; + position: relative; + height: max(calc(1857 / 2560 * 1280px), calc(1857 / 2560 * 100vw)); +} + +/* 图片：占满容器，最小宽度1280px，初始放大+过渡动画 */ +.bg-img { + width: 100%; + height: 100%; + min-width: 1280px; + object-fit: cover; + display: block; + transform: scale(1.5); + transition: transform 1.8s ease; + transform-origin: center center; +} + +/* 图片缩小后的状态 */ +.bg-img.zoom-out { + transform: scale(1); +} + +/* 标注样式：使用vw单位定义字体和位移，添加最小尺寸限制 */ +.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; + min-width: 1280px; +} + +/* 标注显示状态 */ +.annotation.anno-show { + opacity: 1; + transform: translateY(0); +} + +.annotation span { + position: relative; + display: inline-block; +} + +/* 标注线条样式：初始高度为0，添加过渡动画，调整定位原点 */ +/* .annotation span::before { + content: ''; + position: absolute; + left: 50%; + transform: translateX(-50%); + width: 1px; + height: 0; + top: calc(-3vw - 6px); + background-color: #fff; + transition: height 0.8s ease; + transform-origin: bottom center; + } */ +.annotation span::before { + content: ''; + position: absolute; + left: 50%; + transform: translateX(-50%); + width: 1px; + height: 0; + /* 初始高度为0 */ + bottom: calc(100% + 6px); + /* 改为从文字底部向上延伸，替代top */ + background-color: #48494D; + transition: height 0.8s ease; + /* 高度过渡动画 */ + transform-origin: bottom center; + /* 动画原点为底部（从下往上变长） */ +} + +/* 标注显示时，设置线条最终高度 */ +.annotation.anno-show span::before { + height: 3vw; + /* 最终高度（vw单位） */ +} + +/* 1280px以下固定线条尺寸和6px边距 */ + +/* 1280px以下固定线条尺寸和6px边距 */ +@media (max-width: 1280px) { + .annotation span::before { + bottom: calc(100% + 6px); + /* 固定从文字底部向上 */ + } + + .annotation.anno-show span::before { + height: 38px; + /* 固定最终高度 */ + } +} + +/* @media (max-width: 1280px) { + .annotation span::before { + top: calc(-38px - 6px); + + } + + .annotation.anno-show span::before { + height: 38px; + + } + } */ + +/* 标注延迟类（线条动画延迟与标注文字同步） */ +.anno-delay-1 { + transition-delay: 0.8s; +} + +.anno-delay-1 span::before { + transition-delay: 0.8s; + /* 线条动画延迟同步 */ +} + +/* + .anno-delay-2 { + transition-delay: 0.6s; + } + + .anno-delay-2 span::before { + transition-delay: 0.6s; + + } + + .anno-delay-3 { + transition-delay: 0.9s; + } + + .anno-delay-3 span::before { + transition-delay: 0.9s; + + } + + .anno-delay-4 { + transition-delay: 1.2s; + } + + .anno-delay-3 span::before { + transition-delay: 1.2s; + + } */ 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..16fd9f7c --- /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; + 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..90c3c7dd --- /dev/null +++ b/public/static/index/pc/css/topic_laptop/th.css @@ -0,0 +1,102 @@ +.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; +} +.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