调整

app/index/controller/Common.php

@@ -107,6 +107,13 @@ abstract class Common extends BaseController
                 'status'       => 1
             ])
             ->where('status', '=', 1)
+            ->where(function($query) {
+                // 临时代码，移动端暂时不显示 "AI PC"
+                if (request()->from == 'mobile') {
+                    $table_name = SysNavigationItemModel::getTable();
+                    $query->whereNotIn($table_name . ".id", [77, 78]);
+                }
+            })
             ->order(['sort' => 'asc', 'id' => 'asc'])
             ->select();
         if ($nav->isEmpty()) {
@@ -210,7 +217,7 @@ abstract class Common extends BaseController
             ];
         }
         unset($current);
-        
+
         return $data;
     }
 }

app/index/view/pc/topic_laptop/index.html

@@ -30,7 +30,7 @@
 <script type="text/javascript">
     (function (doc, win)
     {
-      
+
         var docEl = doc.documentElement;
         var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
         var designWidth = 2560;
@@ -81,7 +81,7 @@
             <div class="amd-img-3-right">
                 <div class="amd-img-3-1-right">
                     {notempty name="data.perf.4"}<img src="{$data.perf.4.image}" alt="{$data.perf.4.title}">{/notempty}
-                </div> 
+                </div>
                 <!-- {notempty name="data.perf.4"}<img src="{$data.perf.4.image}" alt="{$data.perf.4.title}">{/notempty} -->
                 <div class="amd-img-3-2-right">
                     {notempty name="data.perf.5"}<img src="{$data.perf.5.image}" alt="{$data.perf.5.title}">{/notempty}
@@ -186,12 +186,16 @@
         <div class="readon-t">{$gpu_first_section.title|default=''|raw}</div>
         {eq name=":cookie('think_lang')" value="en-us"}
         <div class="readon-js1">{$gpu_first_section.short_title|default=''|raw}</div>
+        <div class="readon-img1 opacity0" data-order="10">
+            <img src="{$gpu_first_section.extra_image|default=''}" alt="">
+        </div>
         {else/}
         <div class="readon-js">{$gpu_first_section.short_title|default=''|raw}</div>
-        {/eq}
         <div class="readon-img opacity0" data-order="10">
             <img src="{$gpu_first_section.extra_image|default=''}" alt="">
         </div>
+        {/eq}
+        
     </div>
     <div class="readon-img-box opacity0" data-order="11">
         {volist name="data.gpu" id="go"}
@@ -299,7 +303,7 @@
             src="{$data.cooling_system.0.video|default=''}"
             class="fs-video" muted loop playsinline autoplay
             preload="auto"
-            style="display: none;width:1440px;height: 100%;margin:0 auto;">
+            style="display: none;width: 100%;">
             您的浏览器不支持HTML5视频播放，请升级浏览器
         </video>
         <div class="fs-ts">{$data.cooling_system.0.desc|raw}</div>
@@ -490,11 +494,11 @@
 </div>
 {/notempty}
 {notempty name="data.camare_microphone_security"}
-{assign name="cms_section_title" value=":array_shift($data.camare_microphone_security)"/}
 {assign name="camare_microphone" value=":array_shift($data.camare_microphone_security)"/}
 {assign name="security" value=":array_shift($data.camare_microphone_security)"/}
 <div class="tabs-container">
-    <div class="tab-t opacity0" data-order="30">{$cms_section_title.title|default=''}</div>
+    <div class="tab-t active opacity0" data-index="0"  data-order="30">{$camare_microphone.title|default=''}</div>
+    <div class="tab-t opacity0" data-index="1"  data-order="30">{$security.title|default=''}</div>
     <div class="tab-content">
         {notempty name="camare_microphone"}
         <div class="tab-panel active">
@@ -508,7 +512,7 @@
             <video
                 src="{$security.video}"
                 id="securityVideo" class="content-video" muted loop playsinline autoplay
-                style="width: 100%;margin:0 auto;max-width: 1440px;min-width: 1280px">
+                style="width: 100%;margin:0 auto;max-width: 1440px;">
                 您的浏览器不支持HTML5视频播放，请升级浏览器
             </video>
         </div>
@@ -516,16 +520,16 @@
     </div>
     <div class="tabs-header-box">
         <div class="tabs-header">
-            {notempty name="camare_microphone"}<div class="tab-item active" data-index="0">{$camare_microphone.title}</div>{/notempty}
-            {notempty name="security"}<div class="tab-item" data-index="1">{$security.title}</div>{/notempty}
+            {notempty name="camare_microphone"}<div class="tab-item active" data-index="0">{$camare_microphone.short_title|default=''}</div>{/notempty}
+            {notempty name="security"}<div class="tab-item" data-index="1">{$security.short_title|default=''}</div>{/notempty}
             <div class="tab-indicator"></div>
         </div>
     </div>
     {notempty name="camare_microphone"}
-    <div class="tabs-p active" data-index="0">{$camare_microphone.short_title}</div>
+    <div class="tabs-p active" data-index="0">{$camare_microphone.desc|default=''|raw}</div>
     {/notempty}
     {notempty name="security"}
-    <div class="tabs-p" data-index="1">{$security.short_title}</div>
+    <div class="tabs-p" data-index="1">{$security.desc|default=''|raw}</div>
     {/notempty}
 </div>
 {/notempty}
@@ -543,7 +547,11 @@
 {/notempty}
 {notempty name="data.webpage_footnotes"}
 <div class="bottom-text">
+    {eq name=":cookie('think_lang')" value="en-us"}
+    <div class="bottom-p1">{$data.webpage_footnotes.desc|raw|htmlspecialchars_decode}</div>
+    {else/}
     <div class="bottom-p">{$data.webpage_footnotes.desc|raw|htmlspecialchars_decode}</div>
+    {/eq}
 </div>
 {/notempty}
 {/block}
@@ -1225,9 +1233,10 @@
     const tabItems = document.querySelectorAll('.tab-item');
     const tabPanels = document.querySelectorAll('.tab-panel');
     const tabPs = document.querySelectorAll('.tabs-p');
+    const tabT = document.querySelectorAll('.tab-t');
     const indicator = document.querySelector('.tab-indicator');
     const securityVideo = document.getElementById('securityVideo');
-
+    console.log(tabT,'=========tabT=============')
     let prevIndex = 0;
     const tabRects = [];
 
@@ -1279,9 +1288,13 @@
 
             tabPanels[prevIndex].classList.remove('active');
             tabPanels[index].classList.add('active');
+
             tabPs[prevIndex].classList.remove('active');
             tabPs[index].classList.add('active');
 
+            tabT[prevIndex].classList.remove('active');
+            tabT[index].classList.add('active');
+            console.log(tabT,'=tabT=')
             if (index === 1) {
                 playVideo();
             } else if (prevIndex === 1) {
@@ -1318,140 +1331,108 @@
         resetVideo();
     });
 
-    // 自定义轮播
-    document.addEventListener('DOMContentLoaded', () => {
-        const carouselImgs = document.querySelector('.carousel-imgs');
-        const imgItems = document.querySelectorAll('.carousel-img');
-        const leftArrow = document.querySelector('.arrow-left');
-        const rightArrow = document.querySelector('.arrow-right');
-        const textItems = document.querySelectorAll('.carousel-text');
-        const carouselWrapper = document.querySelector('.carousel-wrapper');
 
-        if (!carouselImgs || imgItems.length === 0) {
-            console.warn('轮播图片为空，初始化终止');
-            return;
-        }
+document.addEventListener('DOMContentLoaded', () => {
+    // 1. 获取元素（匹配你的结构）
+    const carouselImgs = document.querySelector('.carousel-imgs');
+    const imgItems = document.querySelectorAll('.carousel-img');
+    const leftArrow = document.querySelector('.arrow-left');
+    const rightArrow = document.querySelector('.arrow-right');
+    const textItems = document.querySelectorAll('.carousel-text');
+    const carouselContainer = document.querySelector('.carousel-container');
 
-        const imgCount = imgItems.length;
-        const imgWidth = 1440;
-        let currentOffset = -imgWidth;
-        let autoPlayTimer = null;
-        let isAnimating = false;
+    // 容错处理
+    if (!carouselImgs || imgItems.length === 0) {
+        console.warn('轮播图片为空，初始化终止');
+        return;
+    }
 
-        const firstImgClone = imgItems[0].cloneNode(true);
-        carouselImgs.appendChild(firstImgClone);
-        const lastImgClone = imgItems[imgCount - 1].cloneNode(true);
-        carouselImgs.insertBefore(lastImgClone, imgItems[0]);
-        const allImgItems = document.querySelectorAll('.carousel-img');
+    // 2. 核心变量（仅索引，无尺寸计算）
+    const imgCount = imgItems.length;
+    let currentIndex = 0;
+    let autoPlayTimer = null;
+    let isResizing = false; // 缩放锁，避免重复触发
 
-        carouselImgs.style.transform = `translateX(-${imgWidth}px)`;
-        carouselImgs.style.transition = 'transform 0.5s ease-out';
+    // 3. 切换到指定索引（核心：百分比偏移，无尺寸计算）
+    const goToIndex = (index) => {
+        // 边界处理
+        if (index < 0) index = imgCount - 1;
+        if (index >= imgCount) index = 0;
 
-        const slideToRight = () => {
-            if (isAnimating) return;
-            isAnimating = true;
+        // 关键：用百分比偏移，彻底避开rem/px计算误差
+        carouselImgs.style.transform = `translateX(-${index * 100}%)`;
+        currentIndex = index;
 
-            currentOffset -= imgWidth;
-            carouselImgs.style.transform = `translateX(${currentOffset}px)`;
+        // 更新文字激活态
+        textItems.forEach((item, idx) => {
+            item.classList.toggle('active', idx === currentIndex);
+        });
+    };
 
-            if (currentOffset <= -(imgWidth * (imgCount + 1))) {
-                setTimeout(() => {
-                    carouselImgs.style.transition = 'none';
-                    currentOffset = -imgWidth;
-                    carouselImgs.style.transform = `translateX(${currentOffset}px)`;
-                    setTimeout(() => {
-                        carouselImgs.style.transition = 'transform 0.5s ease-out';
-                        isAnimating = false;
-                    }, 50);
-                }, 500);
-            } else {
-                setTimeout(() => {
-                    isAnimating = false;
-                }, 500);
-            }
+    // 4. 左右切换逻辑
+    const slideNext = () => goToIndex(currentIndex + 1);
+    const slidePrev = () => goToIndex(currentIndex - 1);
 
-            updateTextActive();
-        };
-
-        const slideToLeft = () => {
-            if (isAnimating) return;
-            isAnimating = true;
-
-            currentOffset += imgWidth;
-            carouselImgs.style.transform = `translateX(${currentOffset}px)`;
-
-            if (currentOffset >= 0) {
-                setTimeout(() => {
-                    carouselImgs.style.transition = 'none';
-                    currentOffset = -(imgWidth * imgCount);
-                    carouselImgs.style.transform = `translateX(${currentOffset}px)`;
-                    setTimeout(() => {
-                        carouselImgs.style.transition = 'transform 0.5s ease-out';
-                        isAnimating = false;
-                    }, 50);
-                }, 500);
-            } else {
-                setTimeout(() => {
-                    isAnimating = false;
-                }, 500);
-            }
-
-            updateTextActive();
-        };
-
-        const updateTextActive = () => {
-            let currentIndex = Math.abs(Math.round(currentOffset / imgWidth)) - 1;
-            currentIndex = currentIndex % imgCount;
-            if (currentIndex < 0) currentIndex = imgCount - 1;
-
-            textItems.forEach((item, idx) => {
-                item.classList.toggle('active', idx === currentIndex);
-            });
-        };
-
-        const autoPlay = () => {
-            clearInterval(autoPlayTimer);
-            autoPlayTimer = setInterval(() => {
-                slideToRight();
-            }, 2500);
-        };
-
-        const restartAutoPlay = () => {
-            clearInterval(autoPlayTimer);
-            autoPlay();
-        };
-
-        if (leftArrow) {
-            leftArrow.addEventListener('click', () => {
-                slideToLeft();
-                restartAutoPlay();
-            });
-        }
-        if (rightArrow) {
-            rightArrow.addEventListener('click', () => {
-                slideToRight();
-                restartAutoPlay();
-            });
-        }
-
-        if (carouselWrapper) {
-            carouselWrapper.addEventListener('mouseenter', () => {
-                clearInterval(autoPlayTimer);
-            });
-            carouselWrapper.addEventListener('mouseleave', () => {
-                autoPlay();
-            });
-        }
+    // 5. 自动播放逻辑
+    const autoPlay = () => {
+        clearInterval(autoPlayTimer);
+        autoPlayTimer = setInterval(slideNext, 3000); // 3秒切换，可改
+    };
 
+    // 6. 绑定事件
+    // 箭头点击
+    leftArrow?.addEventListener('click', () => {
+        slidePrev();
+        autoPlay(); // 点击后重启自动播放
+    });
+    rightArrow?.addEventListener('click', () => {
+        slideNext();
         autoPlay();
-        updateTextActive();
     });
 
-    window.addEventListener('beforeunload', () => {
-        const carouselWrapper = document.querySelector('.carousel-wrapper');
-        if (carouselWrapper && carouselWrapper.autoPlayTimer) {
-            clearInterval(carouselWrapper.autoPlayTimer);
-        }
+    // 文字指示器点击
+    textItems.forEach((item, idx) => {
+        item.addEventListener('click', () => {
+            goToIndex(idx);
+            autoPlay();
+        });
     });
+
+    // 鼠标悬停暂停
+    carouselContainer?.addEventListener('mouseenter', () => {
+        clearInterval(autoPlayTimer);
+    });
+    carouselContainer?.addEventListener('mouseleave', autoPlay);
+
+    // 7. 窗口缩放响应（核心：仅重新定位，无计算）
+    const handleResize = () => {
+        if (isResizing) return;
+        isResizing = true;
+
+        // 缩放时直接重新定位当前索引（百分比偏移无需计算）
+        goToIndex(currentIndex);
+
+        // 解锁
+        setTimeout(() => {
+            isResizing = false;
+        }, 100);
+    };
+
+    // 防抖监听窗口缩放
+    let resizeTimer;
+    window.addEventListener('resize', () => {
+        clearTimeout(resizeTimer);
+        resizeTimer = setTimeout(handleResize, 150);
+    });
+
+    // 8. 初始化
+    goToIndex(0); // 初始定位到第一张
+    autoPlay();   // 启动自动播放
+
+    // 9. 页面卸载清理定时器
+    window.addEventListener('beforeunload', () => {
+        clearInterval(autoPlayTimer);
+    });
+});
 </script>
 {/block}