跳轉调整

app/admin/controller/v1/System.php

@@ -366,6 +366,18 @@ class System
                         'url'  => (string)url('/index/topic/laptop/index')
                     ],
                 ]
+            ],
+            [
+                'id'       => 9,
+                'name'     => '闪存（SSD）专题',
+                'url'      => '',
+                'children' => [
+                    [
+                        'id'   => 101,
+                        'name' => '首页',
+                        'url'  => (string)url('/index/topic/ssd/index')
+                    ],
+                ]
             ]
         ];
     }

app/index/controller/TopicSsd.php

@@ -0,0 +1,52 @@
+<?php
+declare (strict_types = 1);
+
+namespace app\index\controller;
+
+use app\index\model\SysBannerModel;
+use think\facade\View;
+
+/**
+ * 专题 - SSD
+ */
+class TopicSsd extends Common
+{
+    /**
+     * 专题 - SSD首页
+     */
+    public function index()
+    {
+        $banners = SysBannerModel::with([
+                'items' => function ($query) {
+                    $query->withoutField(['sort', 'created_at', 'updated_at', 'deleted_at'])
+                        ->order(['sort' => 'asc', 'id' => 'desc'])
+                        ->enabled(true);
+                }
+            ])
+            ->atPlatform(request()->from)
+            ->uniqueLabel([
+                'BANNER_69faaf8582967', // 专题 - 闪存（SSD）首页 - 焦点图
+                'BANNER_69fab1bed8f71', // 专题 - 闪存（SSD）首页 - 产品
+            ])
+            ->language($this->lang_id)
+            ->enabled(true)
+            ->order(['sort' => 'asc', 'id' => 'desc'])
+            ->select();
+
+        $data = [];
+        if (!$banners->isEmpty()) {
+            $banners_map = [];
+            foreach ($banners as $banner) {
+                $banners_map[$banner->unique_label] = $banner;
+            }
+
+            // 焦点图轮播图
+            $data['top_focus_images'] = data_get($banners_map, 'BANNER_69faaf8582967')?->items->toArray();
+            // 产品
+            $data['products'] = data_get($banners_map, 'BANNER_69fab1bed8f71')?->items->toArray();
+        }
+        View::assign('data', $data);
+
+        return View::fetch('index');
+    }
+}

app/index/route/route.php

@@ -119,6 +119,12 @@ Route::group('topic', function () {
         // 专题 - 笔记本电脑首页
         Route::get('index', 'TopicLaptop/index');
     });
+
+    // 专题 - SSD
+    Route::group('ssd', function() {
+        // 专题 - SSD首页
+        Route::get('index', 'TopicSsd/index');
+    });
 });
 
 // 数据迁移

app/index/view/mobile/topic_ssd/index.html

@@ -0,0 +1,43 @@
+{extend name="public/base" /}
+{block name="style"}
+<link rel="stylesheet" href="__CSS__/topic_laptop/header.css">
+<link rel="stylesheet" href="__CSS__/topic_laptop/footer.css">
+<link rel="stylesheet" href="__CSS__/topic_ssd/index.css">
+<!-- 将rem适配JS移到这里，确保优先执行 -->
+<script type="text/javascript">
+    (function (doc, win)
+    {
+        var docEl = doc.documentElement;
+        var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
+
+        function setRootFontSize ()
+        {
+            var clientWidth = docEl.clientWidth;
+            if (!clientWidth) return;
+            var fontSize = clientWidth / 7.5;
+            // 直接修改内联样式，优先级最高
+            docEl.setAttribute('style', 'font-size: ' + fontSize + 'px !important;');
+        }
+
+        setRootFontSize();
+        win.addEventListener(resizeEvt, setRootFontSize);
+        doc.addEventListener('DOMContentLoaded', setRootFontSize);
+    })(document, window);
+</script>
+{/block}
+{block name="main"}
+<div class="m-sc-main" style="margin-top:42px;">
+    {volist name="data.top_focus_images" id="item"}
+    <a href="{$item.link}"  class="m-sc-mt20">
+        <img src="{$item.image}" alt="" class="m-sc-main-img" loading="lazy">
+    </a>
+    {/volist}
+    <div class="m-sc-main-imgs m-sc-mt20 m-sc-mb34">
+        {volist name="data.products" id="item"}
+        <a href="{$item.link}"  class="">
+            <img src="{$item.image}" alt="" class="m-sc-main-img1" loading="lazy">
+        </a>
+        {/volist}
+    </div>
+</div>
+{/block}

app/index/view/pc/public/header.html

@@ -350,7 +350,6 @@
         if (mhk && mhk.style.display !== 'block') {
             // 保存当前滚动位置
             scrollTopPosition = window.pageYOffset || document.documentElement.scrollTop;
-            
             mhk.style.display = 'block';
             
             // 禁止滚动，保持位置
@@ -377,75 +376,17 @@
                     hasNavOpen = true;
                 }
             });
-            
-            if (!isBuyOpen && !isSearchOpen && !isLangOpen && !hasNavOpen) {
                 mhk.style.display = 'none';
-                
                 // 恢复滚动
                 body.style.position = '';
                 body.style.top = '';
                 body.style.left = '';
                 body.style.right = '';
                 body.style.width = '';
-                
                 // 恢复滚动位置
                 window.scrollTo(0, scrollTopPosition);
         }
     }
-    }
-
-    // ========== header-dropdown 导航下拉菜单打开时显示蒙版 ==========
-    function initNavDropdownOverlay() {
-        const navItems = document.querySelectorAll('.header-nav-item');
-        let hideTimer = null;
-
-        navItems.forEach(item => {
-            const dropdown = item.querySelector('.header-dropdown');
-            if (!dropdown) return;
-
-            // 鼠标移入导航项
-            item.addEventListener('mouseenter', () => {
-                if (hideTimer) clearTimeout(hideTimer);
-                openOverlay();
-            });
-
-            // 鼠标移出导航项
-            item.addEventListener('mouseleave', () => {
-                hideTimer = setTimeout(() => {
-                    const isHoveringDropdown = dropdown && dropdown.matches(':hover');
-                    if (!isHoveringDropdown) {
-                        const isBuyOpen = buyDropdown && buyDropdown.classList.contains('show');
-                        const isSearchOpen = searchDropdown && searchDropdown.classList.contains('show');
-                        const isLangOpen = langDropdown && langDropdown.classList.contains('show');
-                        if (!isBuyOpen && !isSearchOpen && !isLangOpen) {
-                            closeOverlay();
-                        }
-                    }
-                }, 100);
-            });
-
-            // 鼠标移入下拉菜单
-            dropdown.addEventListener('mouseenter', () => {
-                if (hideTimer) clearTimeout(hideTimer);
-                openOverlay();
-            });
-
-            // 鼠标移出下拉菜单
-            dropdown.addEventListener('mouseleave', () => {
-                hideTimer = setTimeout(() => {
-                    const isHoveringNav = item && item.matches(':hover');
-                    if (!isHoveringNav) {
-                        const isBuyOpen = buyDropdown && buyDropdown.classList.contains('show');
-                        const isSearchOpen = searchDropdown && searchDropdown.classList.contains('show');
-                        const isLangOpen = langDropdown && langDropdown.classList.contains('show');
-                        if (!isBuyOpen && !isSearchOpen && !isLangOpen) {
-                            closeOverlay();
-                        }
-                    }
-                }, 100);
-            });
-        });
-    }
   
     // 关闭所有导航下拉菜单
     function closeAllNavDropdowns() {
@@ -604,15 +545,13 @@
     setupDropdownObserver(searchDropdown);
     setupDropdownObserver(langDropdown);
 
-    // ========== header-dropdown JS 控制版本（带防抖） ==========
-    function initHeaderDropdown() {
-        const navItems = document.querySelectorAll('.header-nav-item');
-        let hoverTimer = null;
-        let leaveTimer = null;
-        let currentOpenDropdown = null;
+    // ========== 监听下拉菜单打开状态，自动控制蒙版 ==========
     
-        // 获取所有下拉菜单并设置初始状态
+    function initHeaderDropdown() {
+        // 获取所有下拉菜单
         const allDropdowns = document.querySelectorAll('.header-dropdown');
+        
+        // 设置初始样式
         allDropdowns.forEach(dropdown => {
             dropdown.style.opacity = '0';
             dropdown.style.transform = 'translateY(-1.25em)';
@@ -620,115 +559,110 @@
             dropdown.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
         });
         
-        // 显示下拉菜单
-        function showDropdown(dropdown) {
-            if (!dropdown) return;
-            // 关闭当前打开的
-            if (currentOpenDropdown && currentOpenDropdown !== dropdown) {
-                hideDropdown(currentOpenDropdown);
-            }
-            dropdown.style.opacity = '1';
-            dropdown.style.transform = 'translateY(0)';
-            dropdown.style.pointerEvents = 'auto';
-            currentOpenDropdown = dropdown;
-        }
-        
-        // 隐藏下拉菜单
-        function hideDropdown(dropdown) {
-            if (!dropdown) return;
-            dropdown.style.opacity = '0';
-            dropdown.style.transform = 'translateY(-1.25em)';
-            dropdown.style.pointerEvents = 'none';
-            if (currentOpenDropdown === dropdown) {
-                currentOpenDropdown = null;
-            }
-        }
-        
-        // 隐藏所有下拉菜单
-        function hideAllDropdowns() {
-            allDropdowns.forEach(dropdown => {
-                dropdown.style.opacity = '0';
-                dropdown.style.transform = 'translateY(-1.25em)';
-                dropdown.style.pointerEvents = 'none';
+        // 监听单个下拉菜单的样式变化
+        function observeDropdown(dropdown) {
+            const observer = new MutationObserver(() => {
+                const isOpen = dropdown.style.opacity === '1';
+                if (isOpen) {
+                    openOverlay();
+                } else {
+                    let anyOpen = false;
+                    allDropdowns.forEach(d => {
+                        if (d.style.opacity === '1') anyOpen = true;
                     });
-            currentOpenDropdown = null;
+                    if (!anyOpen) {
+                        closeOverlay();
                     }
+                }
+            });
+            
+            observer.observe(dropdown, {
+                attributes: true,
+                attributeFilter: ['style']
+            });
+        }
+        
+        // 为每个下拉菜单添加监听
+        allDropdowns.forEach(dropdown => {
+            observeDropdown(dropdown);
+        });
+        
+        // 鼠标悬停控制下拉菜单显示/隐藏
+        const navItems = document.querySelectorAll('.header-nav-item');
         
         navItems.forEach(item => {
             const dropdown = item.querySelector('.header-dropdown');
             if (!dropdown) return;
             
-            // 鼠标移入导航项
+            let timer = null;
+            let isHovering = false; // 增加悬停状态标记
+            
+            // 显示下拉菜单的函数
+            const showDropdown = () => {
+                if (timer) clearTimeout(timer);
+                if (dropdown.style.opacity === '1') return;
+                dropdown.style.opacity = '1';
+                dropdown.style.transform = 'translateY(0)';
+                dropdown.style.pointerEvents = 'auto';
+            };
+            
+            // 隐藏下拉菜单的函数
+            const hideDropdown = () => {
+                if (timer) clearTimeout(timer);
+                if (dropdown.style.opacity === '0') return;
+                dropdown.style.opacity = '0';
+                dropdown.style.transform = 'translateY(-1.25em)';
+                dropdown.style.pointerEvents = 'none';
+            };
+            
             item.addEventListener('mouseenter', () => {
-                // 清除离开定时器
-                if (leaveTimer) clearTimeout(leaveTimer);
-                if (hoverTimer) clearTimeout(hoverTimer);
+                isHovering = true;
+                clearTimeout(timer);
+                showDropdown();
+            });
             
-                // 防抖：延迟100ms再显示，避免频繁触发
-                hoverTimer = setTimeout(() => {
-                    // 关闭其他弹窗（搜索、语言、购买）
-                    if (searchDropdown) searchDropdown.classList.remove('show');
-                    if (langDropdown) langDropdown.classList.remove('show');
-                    if (buyDropdown) buyDropdown.classList.remove('show');
+            item.addEventListener('mouseleave', (e) => {
+                isHovering = false;
+                // 检查鼠标是否移到了下拉菜单上
+                const relatedTarget = e.relatedTarget;
+                const isMovingToDropdown = dropdown.contains(relatedTarget);
                 
-                    showDropdown(dropdown);
-                    // 打开蒙版层
-                    if (typeof openOverlay === 'function') openOverlay();
+                if (isMovingToDropdown) {
+                    // 如果移向下拉菜单，不清除，等待下拉菜单的 mouseenter
+                    return;
+                }
+                
+                timer = setTimeout(() => {
+                    if (!isHovering && !dropdown.matches(':hover')) {
+                        hideDropdown();
+                    }
                 }, 100);
             });
             
-            // 鼠标移出导航项
-            item.addEventListener('mouseleave', () => {
-                // 清除移入定时器
-                if (hoverTimer) clearTimeout(hoverTimer);
-                
-                // 延迟300ms再隐藏，给用户移动到下拉菜单的时间
-                leaveTimer = setTimeout(() => {
-                    // 检查鼠标是否在下拉菜单上
-                    const isHoveringDropdown = dropdown.matches(':hover');
-                    if (!isHoveringDropdown) {
-                        hideDropdown(dropdown);
-                        // 关闭蒙版层
-                        if (typeof closeOverlay === 'function') closeOverlay();
-                    }
-                }, 300);
-            });
-            
-            // 鼠标移入下拉菜单
             dropdown.addEventListener('mouseenter', () => {
-                if (leaveTimer) clearTimeout(leaveTimer);
-                showDropdown(dropdown);
+                isHovering = true;
+                clearTimeout(timer);
+                showDropdown();
             });
             
-            // 鼠标移出下拉菜单
-            dropdown.addEventListener('mouseleave', () => {
-                leaveTimer = setTimeout(() => {
-                    const isHoveringNav = item.matches(':hover');
-                    if (!isHoveringNav) {
-                        hideDropdown(dropdown);
-                        // 关闭蒙版层
-                        if (typeof closeOverlay === 'function') closeOverlay();
-                    }
-                }, 200);
-            });
-        });
+            dropdown.addEventListener('mouseleave', (e) => {
+                isHovering = false;
+                // 检查鼠标是否移回了导航项
+                const relatedTarget = e.relatedTarget;
+                const isMovingToNavItem = item.contains(relatedTarget);
                 
-        // 点击其他地方关闭所有下拉菜单
-        document.addEventListener('click', (e) => {
-            if (!e.target.closest('.header-nav-item')) {
-                hideAllDropdowns();
-                if (typeof closeOverlay === 'function') closeOverlay();
-            }
-        });
-        
-        // 暴露方法供外部调用
-        window.headerDropdown = {
-            hideAll: hideAllDropdowns,
-            show: showDropdown,
-            hide: hideDropdown
-        };
+                if (isMovingToNavItem) {
+                    return;
                 }
                 
+                timer = setTimeout(() => {
+                    if (!isHovering && !item.matches(':hover')) {
+                        hideDropdown();
+                    }
+                }, 100);
+            });
+        });
+    }
     // 初始化（在 DOM 加载完成后执行）
     if (document.readyState === 'loading') {
         document.addEventListener('DOMContentLoaded', initHeaderDropdown);
@@ -750,8 +684,8 @@
         }
     });
 
-    // 初始化导航下拉菜单蒙版层
-    initNavDropdownOverlay();
+    // // 初始化导航下拉菜单蒙版层
+    // initNavDropdownOverlay();
 
     // 初始化渲染
     renderHistory();

app/index/view/pc/topic_ssd/index.html

@@ -0,0 +1,44 @@
+{extend name="public/base" /}
+{block name="style"}
+<link rel="stylesheet" href="__CSS__/topic_laptop/header.css">
+<link rel="stylesheet" href="__CSS__/topic_laptop/footer.css">
+<link rel="stylesheet" href="__CSS__/topic_ssd/index.css">
+<script type="text/javascript">
+    (function (doc, win)
+    {
+        var docEl = doc.documentElement;
+        var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
+        var designWidth = 2560;
+        var designRemPx = 100;
+        function setRootFontSize ()
+        {
+            var clientWidth = docEl.clientWidth;
+            if (!clientWidth) return;
+            var fontSize = (clientWidth / designWidth) * designRemPx;
+            fontSize = Math.max(fontSize, 20);
+            fontSize = Math.min(fontSize, designRemPx);
+            docEl.style.fontSize = fontSize + 'px';
+        }
+
+        setRootFontSize();
+        win.addEventListener(resizeEvt, setRootFontSize);
+        doc.addEventListener('DOMContentLoaded', setRootFontSize);
+    })(document, window);
+</script>
+{/block}
+{block name="main"}
+<div class="sc-main">
+    {volist name="data.top_focus_images" id="item"}
+    <a href="{$item.link}"  class="sc-mt20">
+        <img src="{$item.image}" alt="" class="sc-main-img" loading="lazy">
+    </a>
+    {/volist}
+    <div class="sc-main-imgs sc-mt20 sc-mb-78">
+        {volist name="data.products" id="item"}
+        <a href="{$item.link}"  class="">
+            <img src="{$item.image}" alt="" class="sc-main-img1" loading="lazy">
+        </a>
+        {/volist}
+    </div>
+</div>
+{/block}

public/static/index/mobile/css/topic_ssd/index.css

@@ -0,0 +1,65 @@
+* {
+	margin: 0;
+	padding: 0;
+}
+html {
+	width: 100% !important;
+	overflow-x: hidden;
+    margin: 0 !important;
+    padding: 0 !important;
+    max-width: 100vw !important;
+}
+body {
+	width: 100%;
+	background: #fff;
+	overflow-x: hidden;
+    margin: 0 !important;
+    padding: 0 !important;
+    max-width: 100vw !important;
+}
+.m-sc-main {
+    width: 100%;
+    height: 100%;
+}
+
+a {
+    text-decoration: none;
+    display: block;
+}
+
+img {
+    display: block;
+}
+
+.m-sc-main-img {
+    width: 100%;
+    /* max-width: 2560px; */
+}
+
+.m-sc-mt20 {
+    margin-top: 0.1rem;
+}
+.m-sc-mt20:first-child {
+    margin-top: 0 !important;
+}
+.m-sc-mb34 {
+    margin-bottom: 0.34rem;
+}
+.m-sc-main-imgs {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.1rem;
+    list-style: none;
+    /* 去除列表样式（如果有） */
+}
+
+.m-sc-main-imgs a {
+    display: block;
+}
+
+.m-sc-main-img1 {
+    width: 100%;
+    height: auto;
+    /* 保持比例 */
+    display: block;
+}

public/static/index/pc/css/header.css

@@ -97,10 +97,11 @@ a {
     bottom: 0;
     left: 0;
     width: 100%;
-    height: 0.125em;
+    height: 2px;
     background-color: #004bfa;
     transform: scaleX(0);
     transition: transform 0.2s ease;
+    z-index: 999;
 }
 
 .header-nav-title:hover::after,
@@ -147,12 +148,7 @@ a {
     transition: color 0.2s;
 }
 
-/* .header-nav-btn img {
-    width: 1.5em;
-    max-width: 17px;
-    max-height: 17px;
-    height: 1.5em;
-} */
+
 
 .header-nav-btn:hover {
     color: #004bfa;
@@ -269,7 +265,7 @@ a {
     left: 0;
     right: 0;
     background-color: #fff;
-    z-index: 999;
+    z-index: 99;
     border-top: none;
     overflow: hidden;
     padding-bottom: 2.375em;
@@ -339,7 +335,7 @@ a {
     display: flex;
     flex: 1; 
     justify-content: space-between;
-    max-width: 48%;
+   
  
 }
 
@@ -354,10 +350,7 @@ a {
    
 }
 
-/* 单个分类区块 */
-.header-category-block {
-    /* flex: 1; */
-}
+
 
 
 .header-category-title {
@@ -400,6 +393,7 @@ a {
     flex: 1;
     min-width: 0;
    font-size: 16px;
+    max-width: 748px;
 }
 
 
@@ -429,12 +423,12 @@ a {
     transform: translateY(-2px)
 }
 
-.header-product-card:nth-child(1) {
-    /* margin-right: 1.5em; */
-}
+/* .header-product-card:nth-child(1) {
+   
+} */
 
 .header-product-card:nth-child(3) {
-    /* margin-right: 1.5em; */
+   
     margin-top: 1.5em;
 }
 
@@ -442,20 +436,7 @@ a {
     margin-top: 1.5em;
 }
 
-/*.header-product-img {*/
-/*    width: 22.625em;*/
-/*    height: 12.25em;*/
-/*    background-color: #f5f5f5;*/
-/*    display: flex;*/
-/*    align-items: center;*/
-/*    justify-content: center;*/
-/*    color: #999;*/
-/*}*/
 
-/*.header-product-img img {*/
-/*    width: 22.625em;*/
-/*    height: 12.25em;*/
-/*}*/
 .header-product-img {
     width: 100%;
     aspect-ratio: 22.625 / 12.25;
@@ -465,7 +446,6 @@ a {
     justify-content: center;
     color: #999;
     overflow: hidden;
-    /* border-radius: 0.5em; */
 }
 
 .header-product-img img {

public/static/index/pc/css/topic_ssd/index.css

@@ -0,0 +1,68 @@
+
+html {
+    width: 100%;
+}
+body {
+	/* width: 100vw;
+	height: 100vh; */
+	background: #fff;
+	overflow-x: hidden;
+    scroll-behavior: smooth !important;
+    -webkit-overflow-scrolling: touch !important;
+}
+/* 当视口宽度大于1920px时生效 */
+@media screen and (min-width: 1920px) {
+    /* 这里写你的样式 */
+    body {
+        max-width:100% !important;
+        width: 100vw !important;
+    }
+   
+}
+.sc-main {
+    width: 100%;
+    height: 100%;
+    max-width: 2560px;
+    margin: 0 auto;
+}
+
+a {
+    text-decoration: none;
+    display: block;
+}
+
+img {
+    display: block;
+}
+
+.sc-main-img {
+    width: 100%;
+    max-width: 2560px;
+}
+.sc-mt20:first-child {
+    margin-top: 0 !important;
+}
+.sc-mt20 {
+    margin-top: 0.2rem;
+}
+.sc-mb-78 {
+    margin-bottom: 0.78rem;
+}
+.sc-main-imgs {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.2rem;
+    list-style: none;
+    /* 去除列表样式（如果有） */
+}
+
+.sc-main-imgs a {
+    display: block;
+}
+
+.sc-main-img1 {
+    width: 100%;
+    height: auto;
+    /* 保持比例 */
+    display: block;
+}