笔记本

2025-12-10 15:34:03 +08:00
parent db1ad0f88a
commit 5740437cf5
74 changed files with 3097 additions and 9 deletions
--- a/app/index/view/pc/topic_laptop/index.html
+++ b/app/index/view/pc/topic_laptop/index.html
--- a/public/static/index/pc/css/topic_laptop/45w.css
+++ 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;
+}
--- a/public/static/index/pc/css/topic_laptop/amd.css
+++ 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;
+}
--- a/public/static/index/pc/css/topic_laptop/bly.css
+++ 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;
+}
--- a/public/static/index/pc/css/topic_laptop/bottom.css
+++ 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;
+}
--- a/public/static/index/pc/css/topic_laptop/footer.css
+++ 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;
+    }
+  }
--- a/public/static/index/pc/css/topic_laptop/fs.css
+++ 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;
+}
--- a/public/static/index/pc/css/topic_laptop/header.css
+++ 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%;
+ }
--- a/public/static/index/pc/css/topic_laptop/index.css
+++ 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;
+}
--- a/public/static/index/pc/css/topic_laptop/ips.css
+++ 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;
+} */
--- a/public/static/index/pc/css/topic_laptop/jk.css
+++ 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;
+            
+        } */
--- a/public/static/index/pc/css/topic_laptop/lb.css
+++ 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;
+}
--- a/public/static/index/pc/css/topic_laptop/m2.css
+++ 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;
+}
--- a/public/static/index/pc/css/topic_laptop/progress.css
+++ 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;
+}
--- a/public/static/index/pc/css/topic_laptop/qb.css
+++ 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;
+}
--- a/public/static/index/pc/css/topic_laptop/readon.css
+++ 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;
+}
--- a/public/static/index/pc/css/topic_laptop/rgb.css
+++ 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;
+}
--- a/public/static/index/pc/css/topic_laptop/swiper.css
+++ 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;
+}
--- a/public/static/index/pc/css/topic_laptop/th.css
+++ 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;
+}
--- a/public/static/index/pc/css/topic_laptop/wift.css
+++ 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;
+}
--- a/public/static/index/pc/css/topic_laptop/wift6.css
+++ 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;
+}
--- a/public/static/index/pc/css/topic_laptop/windows.css
+++ 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;
+}
--- a/public/static/index/pc/css/topic_laptop/xh.css
+++ 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%);
+}
--- a/public/static/index/pc/css/topic_laptop/xn.css
+++ 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;
+}
--- a/public/static/index/pc/css/topic_laptop/yq.css
+++ 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;
+}
--- a/public/static/index/pc/images/topic_laptop/amd1.png
+++ b/public/static/index/pc/images/topic_laptop/amd1.png
--- a/public/static/index/pc/images/topic_laptop/amd10.png
+++ b/public/static/index/pc/images/topic_laptop/amd10.png
--- a/public/static/index/pc/images/topic_laptop/amd2.png
+++ b/public/static/index/pc/images/topic_laptop/amd2.png
--- a/public/static/index/pc/images/topic_laptop/amd3.png
+++ b/public/static/index/pc/images/topic_laptop/amd3.png
--- a/public/static/index/pc/images/topic_laptop/amd4.png
+++ b/public/static/index/pc/images/topic_laptop/amd4.png
--- a/public/static/index/pc/images/topic_laptop/amd5.png
+++ b/public/static/index/pc/images/topic_laptop/amd5.png
--- a/public/static/index/pc/images/topic_laptop/amd6.png
+++ b/public/static/index/pc/images/topic_laptop/amd6.png
--- a/public/static/index/pc/images/topic_laptop/amd7.png
+++ b/public/static/index/pc/images/topic_laptop/amd7.png
--- a/public/static/index/pc/images/topic_laptop/amd8.png
+++ b/public/static/index/pc/images/topic_laptop/amd8.png
--- a/public/static/index/pc/images/topic_laptop/amd9.png
+++ b/public/static/index/pc/images/topic_laptop/amd9.png
--- a/public/static/index/pc/images/topic_laptop/banner1.png
+++ b/public/static/index/pc/images/topic_laptop/banner1.png
--- a/public/static/index/pc/images/topic_laptop/bottom1.png
+++ b/public/static/index/pc/images/topic_laptop/bottom1.png
--- a/public/static/index/pc/images/topic_laptop/cj1.png
+++ b/public/static/index/pc/images/topic_laptop/cj1.png
--- a/public/static/index/pc/images/topic_laptop/clq.png
+++ b/public/static/index/pc/images/topic_laptop/clq.png
--- a/public/static/index/pc/images/topic_laptop/fs.png
+++ b/public/static/index/pc/images/topic_laptop/fs.png
--- a/public/static/index/pc/images/topic_laptop/gab.png
+++ b/public/static/index/pc/images/topic_laptop/gab.png
--- a/public/static/index/pc/images/topic_laptop/ips1.png
+++ b/public/static/index/pc/images/topic_laptop/ips1.png
--- a/public/static/index/pc/images/topic_laptop/ips2.png
+++ b/public/static/index/pc/images/topic_laptop/ips2.png
--- a/public/static/index/pc/images/topic_laptop/jk.png
+++ b/public/static/index/pc/images/topic_laptop/jk.png
--- a/public/static/index/pc/images/topic_laptop/jq.png
+++ b/public/static/index/pc/images/topic_laptop/jq.png
--- a/public/static/index/pc/images/topic_laptop/l1.png
+++ b/public/static/index/pc/images/topic_laptop/l1.png
--- a/public/static/index/pc/images/topic_laptop/m2-1.png
+++ b/public/static/index/pc/images/topic_laptop/m2-1.png
--- a/public/static/index/pc/images/topic_laptop/m2-2.png
+++ b/public/static/index/pc/images/topic_laptop/m2-2.png
--- a/public/static/index/pc/images/topic_laptop/m2-3.png
+++ b/public/static/index/pc/images/topic_laptop/m2-3.png
--- a/public/static/index/pc/images/topic_laptop/m2.png
+++ b/public/static/index/pc/images/topic_laptop/m2.png
--- a/public/static/index/pc/images/topic_laptop/qb1.png
+++ b/public/static/index/pc/images/topic_laptop/qb1.png
--- a/public/static/index/pc/images/topic_laptop/qb2.png
+++ b/public/static/index/pc/images/topic_laptop/qb2.png
--- a/public/static/index/pc/images/topic_laptop/r1.png
+++ b/public/static/index/pc/images/topic_laptop/r1.png
--- a/public/static/index/pc/images/topic_laptop/readon1.png
+++ b/public/static/index/pc/images/topic_laptop/readon1.png
--- a/public/static/index/pc/images/topic_laptop/readon2.png
+++ b/public/static/index/pc/images/topic_laptop/readon2.png
--- a/public/static/index/pc/images/topic_laptop/readon3.png
+++ b/public/static/index/pc/images/topic_laptop/readon3.png
--- a/public/static/index/pc/images/topic_laptop/readon4.png
+++ b/public/static/index/pc/images/topic_laptop/readon4.png
--- a/public/static/index/pc/images/topic_laptop/rgb.png
+++ b/public/static/index/pc/images/topic_laptop/rgb.png
--- a/public/static/index/pc/images/topic_laptop/rgb1.png
+++ b/public/static/index/pc/images/topic_laptop/rgb1.png
--- a/public/static/index/pc/images/topic_laptop/rgb2.png
+++ b/public/static/index/pc/images/topic_laptop/rgb2.png
--- a/public/static/index/pc/images/topic_laptop/sjdb.png
+++ b/public/static/index/pc/images/topic_laptop/sjdb.png
--- a/public/static/index/pc/images/topic_laptop/w1.png
+++ b/public/static/index/pc/images/topic_laptop/w1.png
--- a/public/static/index/pc/images/topic_laptop/wifi6-2.png
+++ b/public/static/index/pc/images/topic_laptop/wifi6-2.png
--- a/public/static/index/pc/images/topic_laptop/wifi6-3.png
+++ b/public/static/index/pc/images/topic_laptop/wifi6-3.png
--- a/public/static/index/pc/images/topic_laptop/wift61.png
+++ b/public/static/index/pc/images/topic_laptop/wift61.png
--- a/public/static/index/pc/images/topic_laptop/windows1.png
+++ b/public/static/index/pc/images/topic_laptop/windows1.png
--- a/public/static/index/pc/images/topic_laptop/xh1.png
+++ b/public/static/index/pc/images/topic_laptop/xh1.png
--- a/public/static/index/pc/images/topic_laptop/xh2.png
+++ b/public/static/index/pc/images/topic_laptop/xh2.png
--- a/public/static/index/pc/images/topic_laptop/xkbg.png
+++ b/public/static/index/pc/images/topic_laptop/xkbg.png
--- a/public/static/index/pc/images/topic_laptop/xn1.png
+++ b/public/static/index/pc/images/topic_laptop/xn1.png
--- a/public/static/index/pc/images/topic_laptop/yq1.png
+++ b/public/static/index/pc/images/topic_laptop/yq1.png
--- a/public/static/index/pc/images/topic_laptop/yq2.png
+++ b/public/static/index/pc/images/topic_laptop/yq2.png
--- a/public/static/index/pc/images/topic_laptop/yq3.png
+++ b/public/static/index/pc/images/topic_laptop/yq3.png
--- a/public/static/index/pc/images/topic_laptop/yq4.png
+++ b/public/static/index/pc/images/topic_laptop/yq4.png