





<!DOCTYPE html>
<html lang="zh-hans">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>新闻动态 - 
      木瓜科技 | 专业音频方案</title>
    <link rel="shortcut icon" href="/static/images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="/static/dist/css/styles.b77d7109.css" type="text/css" />

    
    <meta property="og:title" content="新闻动态">
    <meta property="og:locale" content="zh_CN">
    <meta property="og:locale:alternate" content="en_US">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="木瓜科技">
    <meta property="og:url" content="https://www.pawpaw.cn/zh-hans/news/?page=3">
    
    
    
    
    
    
      <meta name="description" content="木瓜科技的新闻存档，涵盖了建站以来的公司新闻。以及木瓜科技编写或转载的行业内新闻以及合作伙伴的新闻，目的是为客户带来最新的行业相关信息。">
      <meta property="og:description" content="木瓜科技的新闻存档，涵盖了建站以来的公司新闻。以及木瓜科技编写或转载的行业内新闻以及合作伙伴的新闻，目的是为客户带来最新的行业相关信息。">
    
    
    
    
    
    
    
    
    
    <meta name="twitter:card" content="summary">
    
      <meta name="twitter:title" content="新闻动态 - 木瓜科技">
    
    
      <meta name="twitter:description" content="木瓜科技的新闻存档，涵盖了建站以来的公司新闻。以及木瓜科技编写或转载的行业内新闻以及合作伙伴的新闻，目的是为客户带来最新的行业相关信息。">
    
    
    
    
    
<link rel="canonical" href="https://www.pawpaw.cn/zh-hans/news/?page=3">



<link rel="alternate" hreflang="zh-hans" href="https://www.pawpaw.cn/zh-hans/news/?page=3">

<link rel="alternate" hreflang="en" href="https://www.pawpaw.cn/en/news/?page=3">

<link rel="alternate" hreflang="x-default" href="https://www.pawpaw.cn/">
 
    <script type="text/javascript">
      // Microsoft Clarity Analytics - Only initialized if consent is given
      window.clarity = window.clarity || function() { (window.clarity.q = window.clarity.q || []).push(arguments); };
    </script>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-48X1WRKFL6"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'G-48X1WRKFL6');
    </script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" />
    
    <!-- Pawpaw Scripts -->
    <script src="/static/scripts/utils.js"></script>
    <script src="/static/scripts/card_animations.js"></script>
    <!-- Cookie Consent - Must be loaded before Alpine.js -->
    <script src="/static/scripts/cookie_consent.js"></script>
    
    <!-- Alpine Plugins -->
    <script defer src="/static/scripts/alpinejs.collapse.min.js"></script>
    <script defer src="/static/scripts/alpinejs.focus.min.js"></script>
    <!-- Alpine Core -->
    <script defer src="/static/scripts/alpinejs.min.js"></script>
    <script defer src="/static/scripts/gsap.min.js"></script>
    <!-- Lottie.js -->
    <script src="/static/scripts/lottie.min.js"></script>
    
    
  
  <!-- 新闻列表页结构化数据 -->
  
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "CollectionPage",
  "name": "新闻动态",
  "description": "木瓜科技的新闻存档，涵盖了建站以来的公司新闻。以及木瓜科技编写或转载的行业内新闻以及合作伙伴的新闻，目的是为客户带来最新的行业相关信息。",
  "url": "https://www.pawpaw.cn/zh-hans/news/?page=3",
  "inLanguage": "zh-CN",
  "isPartOf": {
    "@type": "WebSite",
    "name": "木瓜科技",
    "url": "https://www.pawpaw.cn/"
  }
}
</script>
 

  </head>
  <body class="text-dark">
    


<!-- 导航栏容器 -->
<div x-data="{ 
        isScrolled: false, 
        isMenuHovered: false, 
        isNavHovered: false,
        activeMenuSection: null, // 跟踪当前激活的菜单区域
        mobileMenuOpen: false,
        isDarkTheme: typeof window.navbarDarkTheme === 'boolean' ? window.navbarDarkTheme : false, // 检测是否暗色主题
        toggleMobileMenu() {
            this.mobileMenuOpen = !this.mobileMenuOpen;
        },
        triggerSearch() {
            window.dispatchEvent(new CustomEvent('search-toggle'));
        }
     }" 
     x-init="
        window.navbarState = {};
        Object.defineProperties(window.navbarState, {
            isMenuHovered: {
                get: () => isMenuHovered,
                set: (value) => isMenuHovered = value
            },
            activeMenuSection: {
                get: () => activeMenuSection,
                set: (value) => activeMenuSection = value
            }
        });
     "
     @scroll.window.throttle.100ms="isScrolled = (window.scrollY > 80)"
     @mouseenter="isNavHovered = true"
     @mouseleave="isNavHovered = false; setTimeout(() => { if(!isNavHovered) { isMenuHovered = false; activeMenuSection = null; } }, 100)"
     :class="isDarkTheme ? 'bg-black text-white' : (isMenuHovered || isScrolled ? 'bg-white shadow-sm' : 'bg-transparent')"
     class="w-full sticky top-0 transition-all duration-200 z-50"
     id="main-navbar"
     x-cloak>
    <!-- TODO: 修复滚动条问题 参考 https://www.vivo.com/ -->
    <div class="max-w-[1440px] mx-auto relative h-16 z-50 flex flex-row items-center justify-between py-0 px-4 sm:px-6 md:px-12 box-border gap-4 md:gap-5 text-center text-body-medium"
         :class="isDarkTheme ? 'text-white' : 'text-dark'"
         >
        <div class="flex flex-row items-center h-full">
            <a href="/zh-hans/" class="transition duration-300 hover:text-primary block" aria-label="回到首页">
                <svg width="120" height="30" viewBox="0 0 120 30" fill="none" xmlns="http://www.w3.org/2000/svg"
                    class="flex-shrink-0 w-[100px] md:w-[120px] min-w-[100px] md:min-w-[120px] relative h-[25px] md:h-[30px] md:pr-5">
                    <g id="Logo">
                        <g id="Pawpaw_LOGO_sRGB 2" clip-path="url(#clip0_1243_481)">
                            <g id="Layer1">
                                <path id="Vector" fill-rule="evenodd" clip-rule="evenodd"
                                    d="M90.4859 8H87.2913L85.4029 11.0979H88.8965C89.5259 11.0979 90.0295 11.5911 90.0295 12.2076C90.0295 12.8241 89.5259 13.3173 88.8965 13.3173H84.0338L78.9352 21.6709H82.6034L85.8136 16.3998H91.9447L95.1549 21.6709H98.8247L90.4859 8Z"
                                    fill="currentColor" />
                                <path id="Vector_2" fill-rule="evenodd" clip-rule="evenodd"
                                    d="M77.1097 8H61.137V11.0979H75.9609C76.5904 11.0979 77.094 11.5911 77.094 12.2076C77.094 12.8241 76.5904 13.3173 75.9609 13.3173H61.137V21.6709H64.3001V16.4152H77.1097C78.8565 16.4152 80.2728 15.0281 80.2728 13.3173V11.0979C80.257 9.38712 78.8565 8 77.1097 8Z"
                                    fill="currentColor" />
                                <path id="Vector_3" fill-rule="evenodd" clip-rule="evenodd"
                                    d="M55.6921 8H58.8552V20.5612C58.8552 21.1777 58.3516 21.6709 57.7221 21.6709H54.26L48.9096 12.596L43.5607 21.6709H38.9797V8H42.1428V17.881L47.9654 8H49.8538L55.6921 17.9041V8Z"
                                    fill="currentColor" />
                                <path id="Vector_4" fill-rule="evenodd" clip-rule="evenodd"
                                    d="M116.837 8H120V20.5612C120 21.1777 119.496 21.6709 118.867 21.6709H115.405L110.054 12.596L104.706 21.6709H100.125V8H103.288V17.881L109.11 8H110.999L116.837 17.9041V8Z"
                                    fill="currentColor" />
                                <path id="Vector_5" fill-rule="evenodd" clip-rule="evenodd"
                                    d="M29.3489 8H26.1544L24.266 11.0979H27.7595C28.389 11.0979 28.8925 11.5911 28.8925 12.2076C28.8925 12.8241 28.389 13.3173 27.7595 13.3173H22.8969L17.7982 21.6709H21.4664L24.6767 16.3998H30.8077L34.018 21.6709H37.6878L29.3489 8Z"
                                    fill="currentColor" />
                                <path id="Vector_6" fill-rule="evenodd" clip-rule="evenodd"
                                    d="M15.9727 8H0V11.0979H14.8239C15.4534 11.0979 15.957 11.5911 15.957 12.2076C15.957 12.8241 15.4534 13.3173 14.8239 13.3173H0V21.6709H3.16307V16.4152H15.9727C17.7195 16.4152 19.1358 15.0281 19.1358 13.3173V11.0979C19.1201 9.38712 17.7195 8 15.9727 8Z"
                                    fill="currentColor" />
                            </g>
                        </g>
                    </g>
                    <defs>
                        <clipPath id="clip0_1243_481">
                            <rect width="120" height="13.6709" fill="white" transform="translate(0 8)" />
                        </clipPath>
                    </defs>
                </svg>
            </a>

            <!-- 导航菜单 - 在容器宽度足够时显示 -->
            <div class="hidden lg:flex self-stretch flex-shrink-0 flex-row items-start justify-start h-full">
                <div class="self-stretch flex-shrink-0 flex flex-row items-start justify-start py-0 px-3 sm:px-4 md:px-6 gap-4 sm:gap-6 md:gap-10 h-full">
                    <div class="group self-stretch flex flex-col items-start justify-center h-full" 
                         @mouseenter="isMenuHovered = true; activeMenuSection = 'solutions'">
                        <div class="flex-shrink-0 rounded-8xs flex flex-row items-center justify-start gap-2.5">
                            <span class="relative leading-[24px] font-medium whitespace-nowrap transition-colors duration-200">解决方案</span>
                            <!-- 内联SVG箭头 -->
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" 
                                 :class="activeMenuSection === 'solutions' ? 'transform rotate-180' : ''"
                                 class="transition-transform duration-200">
                                <path d="M19.5 8.25L12 15.75L4.5 8.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                            

<!-- 解决方案下拉菜单，让元素超出其定位父元素范围，同时保持居中对齐-->
<div x-data="{ activeCategory: 'Voice Interface' }" 
     @mouseenter="window.navbarState.isMenuHovered = true; window.navbarState.activeMenuSection = 'solutions'"
     :class="{ 
        'opacity-0 invisible': !(window.navbarState && window.navbarState.activeMenuSection === 'solutions'),
        'opacity-100 visible': window.navbarState && window.navbarState.activeMenuSection === 'solutions'
     }"
     class="fixed left-0 right-0 w-screen transition-all duration-200 ease-in-out z-50 dropdown-menu hidden-initially">
    <div :class="isDarkTheme ? 'bg-dark-7' : 'bg-white'" class="w-full shadow-lg">
        <div class="max-w-[1440px] mx-auto h-[464px] flex flex-col items-start justify-start py-6 px-12 box-border text-left text-body-small font-body-medium-medium"
             :class="isDarkTheme ? 'text-white' : 'text-dark'">
            <div class="flex-1 w-full grid grid-cols-12 gap-8">
                <!-- 左侧菜单 -->
                <div class="col-span-3 pr-4 h-full relative">
                    <div class="flex flex-col h-full space-y-6">
                        <div @mouseenter="activeCategory = 'Voice Interface'" 
                        class="flex items-center justify-between cursor-pointer transition-colors duration-200" 
                        :class="[
                            activeCategory === 'Voice Interface' 
                                ? (isDarkTheme ? 'text-white' : 'text-dark') 
                                : (isDarkTheme ? 'text-gray-400' : 'text-dark-5')
                        ]">
                            <h6>语音接口</h6>
                            <svg x-show="activeCategory === 'Voice Interface'" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M8.25 4.5L15.75 12L8.25 19.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <div @mouseenter="activeCategory = 'Professional Audio'" 
                             class="flex items-center justify-between cursor-pointer transition-colors duration-200" 
                             :class="[
                                activeCategory === 'Professional Audio' 
                                    ? (isDarkTheme ? 'text-white' : 'text-dark') 
                                    : (isDarkTheme ? 'text-gray-400' : 'text-dark-5')
                            ]">
                            <h6>专业音频</h6>
                            <svg x-show="activeCategory === 'Professional Audio'" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M8.25 4.5L15.75 12L8.25 19.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <div @mouseenter="activeCategory = 'Consumers'" 
                             class="flex items-center justify-between cursor-pointer transition-colors duration-200" 
                             :class="[
                                activeCategory === 'Consumers' 
                                    ? (isDarkTheme ? 'text-white' : 'text-dark') 
                                    : (isDarkTheme ? 'text-gray-400' : 'text-dark-5')
                            ]">
                            <h6>消费类产品</h6>
                            <svg x-show="activeCategory === 'Consumers'" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M8.25 4.5L15.75 12L8.25 19.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <div @mouseenter="activeCategory = 'Software'" 
                             class="flex items-center justify-between cursor-pointer transition-colors duration-200" 
                             :class="[
                                activeCategory === 'Software' 
                                    ? (isDarkTheme ? 'text-white' : 'text-dark') 
                                    : (isDarkTheme ? 'text-gray-400' : 'text-dark-5')
                            ]">
                            <h6>软件</h6>
                            <svg x-show="activeCategory === 'Software'" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M8.25 4.5L15.75 12L8.25 19.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <!-- 底部链接容器 -->
                        <div class="absolute bottom-0 left-0 w-full pt-6" :class="isDarkTheme ? 'bg-dark-7' : 'bg-white'">
                            <div class="flex flex-col items-start gap-y-1 text-left text-body-small font-body-small-medium" 
                                :class="isDarkTheme ? 'text-white' : 'text-black'">
                                <div class="relative leading-[24px] font-medium"><a href="/zh-hans/solutions/" class="hover-underline-expand text-body-small">所有解决方案</a></div>
                                <!-- <div class="relative leading-[24px] font-medium"><span class="hover-underline-expand text-body-small">即将推出</span></div> -->
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 右侧内容 -->
                <!-- Voice Interface -->
                <template x-if="activeCategory === 'Voice Interface'">
                    <div class="col-span-9 grid grid-cols-9 gap-8">
                        <div :class="isDarkTheme ? 'border-dark-5' : 'border-gainsboro'" class="col-span-4 border-solid box-border">
                            <div class="font-medium text-body-small mb-4" :class="isDarkTheme ? 'text-gray-400' : 'text-dark-5'">会议语音</div>
                            <ul class="space-y-3">
                                <li><div class="relative leading-[24px] font-medium"><a href="/zh-hans/solutions/digitally-variable-directional-microphone/" class="hover-underline-expand">数字可变指向麦克风</a></div></li>
                                <li><div class="relative leading-[24px] font-medium"><a href="/zh-hans/solutions/dual-mic-voice-interface/" class="hover-underline-expand">双麦克风语音接口</a></div></li>
                                <li><div class="relative leading-[24px] font-medium"><a href="/zh-hans/solutions/wireless-daisy-chain-speakerphone/" class="hover-underline-expand">无线级联会议麦克风</a></div></li>
                                <li><div class="relative leading-[24px] font-medium"><a href="/zh-hans/solutions/sound-reinforcement/" class="hover-underline-expand">本地扩声系统</a></div></li>
                            </ul>
                        </div>
                        <div class="col-span-4">
                            <!-- <div class="font-medium text-body-small mb-4" :class="isDarkTheme ? 'text-gray-400' : 'text-dark-5'">语音识别</div>
                            <ul class="space-y-3">
                                <li><div class="relative leading-[24px] font-medium"><span class="hover-underline-expand">离线AI关键词识别</span></div></li>
                                <li><div class="relative leading-[24px] font-medium"><span class="hover-underline-expand">离线自动语音识别(ASR)</span></div></li>
                            </ul> -->
                        </div>
                        <div class="col-span-1">&nbsp;</div>
                    </div>
                </template>
                <!-- Professional Audio -->
                <template x-if="activeCategory === 'Professional Audio'">
                    <div class="col-span-9 grid grid-cols-9 gap-8">
                        <div :class="isDarkTheme ? 'border-dark-5' : 'border-gainsboro'" class="col-span-3 border-solid box-border">
                            <div class="font-medium text-body-small mb-4" :class="isDarkTheme ? 'text-gray-400' : 'text-dark-5'">音频接口</div>
                            <ul class="space-y-3">
                                <li><div class="relative leading-[24px] font-medium"><a href="/zh-hans/solutions/usb-audio-interface/" class="hover-underline-expand">USB声卡</a></div></li>
                                <!-- <li><div class="relative leading-[24px] font-medium"><span class="hover-underline-expand">音频接口模块</span></div></li> -->
                            </ul>
                        </div>
                        
                        <!-- <div class="col-span-3">
                            <div class="font-medium text-body-small mb-4" :class="isDarkTheme ? 'text-gray-400' : 'text-dark-5'">HiFi</div>
                            <ul class="space-y-3">
                                <li><div class="relative leading-[24px] font-medium"><span class="hover-underline-expand">桌面解码耳放</span></div></li>
                                <li><div class="relative leading-[24px] font-medium"><span class="hover-underline-expand">便携解码耳放</span></div></li>
                                <li><div class="relative leading-[24px] font-medium"><span class="hover-underline-expand">无线功放</span></div></li>
                            </ul>
                        </div> -->
                    </div>
                </template>
                <!-- Consumers -->
                <template x-if="activeCategory === 'Consumers'">
                    <div class="col-span-9 grid grid-cols-9 gap-8">
                        <div :class="isDarkTheme ? 'border-dark-5' : 'border-gainsboro'" class="col-span-3 border-solid box-border">
                            <div class="font-medium text-body-small mb-4" :class="isDarkTheme ? 'text-gray-400' : 'text-dark-5'">麦克风</div>
                            <ul class="space-y-3">
                                <li><div class="relative leading-[24px] font-medium"><a href="/zh-hans/solutions/usb-ai-microphone/" class="hover-underline-expand">AI降噪USB麦克风</a></div></li>
                                <!-- <li><div class="relative leading-[24px] font-medium"><span class="hover-underline-expand">无线麦克风</span></div></li>
                                <li><div class="relative leading-[24px] font-medium"><span class="hover-underline-expand">无线麦克风 (NearLink)</span></div></li>
                                <li><div class="relative leading-[24px] font-medium"><span class="hover-underline-expand">可变指向性麦克风</span></div></li> -->
                            </ul>
                        </div>
                        <!-- <div :class="isDarkTheme ? 'border-dark-5' : 'border-gainsboro'" class="border-r-[1px] col-span-3 border-solid box-border">
                            <div class="font-medium text-body-small mb-4" :class="isDarkTheme ? 'text-gray-400' : 'text-dark-5'">耳机</div>
                            <ul class="space-y-3">
                                <li><div class="relative leading-[24px] font-medium"><span class="hover-underline-expand">游戏耳机</span></div></li>
                                <li><div class="relative leading-[24px] font-medium"><span class="hover-underline-expand">TWS真无线耳机</span></div></li>
                            </ul>
                        </div>
                        <div class="col-span-3">
                            <div class="font-medium text-body-small mb-4" :class="isDarkTheme ? 'text-gray-400' : 'text-dark-5'">配件</div>
                            <ul class="space-y-3">
                                <li><div class="relative leading-[24px] font-medium"><span class="hover-underline-expand">AI人声分离器</span></div></li>
                            </ul>
                        </div> -->
                    </div>
                </template>
                <!-- Software -->
                <template x-if="activeCategory === 'Software'">
                    <div class="col-span-9 grid grid-cols-9 gap-8">
                        <div :class="isDarkTheme ? 'border-dark-5' : 'border-gainsboro'" class="col-span-3 border-solid box-border">
                            <!-- <div class="font-medium text-body-small mb-4" :class="isDarkTheme ? 'text-gray-400' : 'text-dark-5'">元宇宙</div>
                            <ul class="space-y-3">
                                <li><div class="relative leading-[24px] font-medium"><span class="hover-underline-expand">空间音频录制</span></div></li>
                                <li><div class="relative leading-[24px] font-medium"><span class="hover-underline-expand">空间音频渲染</span></div></li>
                            </ul> -->
                            <div class="font-medium text-body-small mb-4" :class="isDarkTheme ? 'text-gray-400' : 'text-dark-5'">AI音频</div>
                            <ul class="space-y-3">
                                <li><div class="relative leading-[24px] font-medium"><a href="/zh-hans/solutions/algorithms/ai-noise-reduction/" class="hover-underline-expand">AI降噪</a></div></li>
                                <!-- <li><div class="relative leading-[24px] font-medium"><span class="hover-underline-expand">文本转语音</span></div></li> -->
                                <!-- <li><div class="relative leading-[24px] font-medium"><span class="hover-underline-expand">变声器</span></div></li> -->
                            </ul>
                        </div>
                        <!-- <div :class="isDarkTheme ? 'border-dark-5' : 'border-gainsboro'" class="border-r-[1px] col-span-3 border-solid box-border">
                            <div class="font-medium text-body-small mb-4" :class="isDarkTheme ? 'text-gray-400' : 'text-dark-5'">应用</div>
                            <ul class="space-y-3">
                                <li><div class="relative leading-[24px] font-medium"><span class="hover-underline-expand">木瓜录音机</span></div></li>
                                <li><div class="relative leading-[24px] font-medium"><span class="hover-underline-expand">麦克风阵列管理器</span></div></li>
                                <li><div class="relative leading-[24px] font-medium"><span class="hover-underline-expand">均衡器</span></div></li>
                                <li><div class="relative leading-[24px] font-medium"><span class="hover-underline-expand">DFU工具</span></div></li>
                            </ul>
                        </div>
                        <div class="col-span-3">
                            <div class="font-medium text-body-small mb-4" :class="isDarkTheme ? 'text-gray-400' : 'text-dark-5'">A2B</div>
                            <ul class="space-y-3">
                                <li><div class="relative leading-[24px] font-medium"><span class="hover-underline-expand">车载音响系统</span></div></li>
                            </ul>
                        </div> -->
                    </div>
                </template>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 为下拉菜单项添加悬停效果
    const menuItems = document.querySelectorAll('.dropdown-menu-item');
    
    menuItems.forEach(item => {
        item.addEventListener('mouseenter', function() {
            if (window.navbarState?.isDarkTheme) {
                this.classList.add('bg-dark-5');
            } else {
                this.classList.add('bg-gray-100');
            }
        });
        
        item.addEventListener('mouseleave', function() {
            this.classList.remove('bg-gray-100', 'bg-dark-5');
        });
    });
    
    // 为卡片添加悬停效果
    const cards = document.querySelectorAll('.dropdown-card');
    
    cards.forEach(card => {
        card.addEventListener('mouseenter', function() {
            if (window.navbarState?.isDarkTheme) {
                this.classList.add('bg-dark-5');
            } else {
                this.classList.add('bg-gray-100');
            }
        });
        
        card.addEventListener('mouseleave', function() {
            this.classList.remove('bg-gray-100', 'bg-dark-5');
        });
    });
});
</script>
                        </div>
                    </div>
                    <div class="group self-stretch flex flex-col items-start justify-center h-full" 
                         @mouseenter="isMenuHovered = true; activeMenuSection = 'application'">
                        <div class="flex-shrink-0 rounded-8xs flex flex-row items-center justify-start gap-2.5">
                            <span class="relative leading-[24px] font-medium whitespace-nowrap transition-colors duration-200">应用场景</span>
                            <!-- 内联SVG箭头 -->
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" 
                                 :class="activeMenuSection === 'application' ? 'transform rotate-180' : ''"
                                 class="transition-transform duration-200">
                                <path d="M19.5 8.25L12 15.75L4.5 8.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                            



    <!-- 应用场景下拉菜单，让元素超出其定位父元素范围，同时保持居中对齐 -->
    <div @mouseenter="window.navbarState.isMenuHovered = true; window.navbarState.activeMenuSection = 'application'" 
         :class="{ 
            'opacity-0 invisible': !(window.navbarState && window.navbarState.activeMenuSection === 'application'),
            'opacity-100 visible': window.navbarState && window.navbarState.activeMenuSection === 'application'
         }"
         class="fixed left-0 right-0 w-screen transition-all duration-200 ease-in-out z-50 dropdown-menu hidden-initially">
        <div :class="isDarkTheme ? 'bg-dark-7' : 'bg-white'" class="w-full shadow-lg">
            <div class="max-w-[1440px] mx-auto flex flex-col items-center justify-start py-6 px-12 box-border text-left text-body-small"
                 :class="isDarkTheme ? 'text-white' : 'text-dark-5'">
                <div class="w-full grid grid-cols-12 flex-row items-start justify-center gap-8">
                    <!-- 第一列 -->
                    <div class="col-span-4 flex flex-col items-start justify-start gap-4">
                        <div class="flex flex-row items-center justify-center">
                            <div class="leading-[22px] font-medium">应用场景</div>
                        </div>
                        <div class="w-full flex flex-col items-start justify-start text-body-medium"
                             :class="isDarkTheme ? 'text-white' : 'text-dark'">
                            <!-- <div class="w-full pb-3">
                                <div class="leading-[24px] font-medium">
                                    <span class="hover-underline-expand">消费电子</span>
                                </div>
                            </div> -->
                            <div class="w-full pb-3">
                                <div class="leading-[24px] font-medium">
                                    <a class="hover-underline-expand" href="/zh-hans/applications/conference-meeting/">会议</a>
                                </div>
                            </div>
                            <div class="w-full pb-3">
                                <div class="leading-[24px] font-medium">
                                    <a class="hover-underline-expand" href="/zh-hans/applications/live-streaming/">直播</a>
                                </div>
                            </div>
                            <!-- <div class="w-full pb-3">
                                <div class="leading-[24px] font-medium">
                                    <span class="hover-underline-expand">农业</span>
                                </div>
                            </div>
                            <div class="w-full pb-3">
                                <div class="leading-[24px] font-medium">
                                    <span class="hover-underline-expand">体育</span>
                                </div>
                            </div>
                            <div class="w-full pb-3">
                                <div class="leading-[24px] font-medium">
                                    <span class="hover-underline-expand">教育</span>
                                </div>
                            </div>
                            <div class="w-full pb-3">
                                <div class="leading-[24px] font-medium">
                                    <span class="hover-underline-expand">智能家居</span>
                                </div>
                            </div>
                            <div class="w-full pb-3">
                                <div class="leading-[24px] font-medium">
                                    <span class="hover-underline-expand">汽车</span>
                                </div>
                            </div>
                            <div class="w-full pb-3">
                                <div class="leading-[24px] font-medium">
                                    <span class="hover-underline-expand">机器人</span>
                                </div>
                            </div>
                            <div class="w-full pb-3">
                                <div class="leading-[24px] font-medium">
                                    <span class="hover-underline-expand">娱乐</span>
                                </div>
                            </div>
                            <div class="w-full pb-3">
                                <div class="leading-[24px] font-medium">
                                    <span class="hover-underline-expand">媒体制作</span>
                                </div>
                            </div> -->
                        </div>
                    </div>

                    <!-- 第二列 -->
                    <!-- <div class="col-span-3 flex flex-col items-start justify-start gap-4">
                        <div class="w-[88px] h-[22px] flex flex-row items-center justify-center">
                            <div class="leading-[22px] font-medium hidden">按行业</div>
                        </div>
                        <div class="w-full flex flex-col items-start justify-start text-body-medium"
                             :class="isDarkTheme ? 'text-white' : 'text-dark'">
                            <div class="w-full pb-3">
                                <div class="leading-[24px] font-medium">
                                    <span class="hover-underline-expand">AR/VR</span>
                                </div>
                            </div>
                            <div class="w-full pb-3">
                                <div class="leading-[24px] font-medium">
                                    <span class="hover-underline-expand">元宇宙</span>
                                </div>
                            </div>
                            <div class="w-full pb-3">
                                <div class="leading-[24px] font-medium">
                                    <span class="hover-underline-expand">环境</span>
                                </div>
                            </div>
                            <div class="w-full pb-3">
                                <div class="leading-[24px] font-medium">
                                    <span class="hover-underline-expand">健康医疗</span>
                                </div>
                            </div>
                            <div class="w-full pb-3">
                                <div class="leading-[24px] font-medium">
                                    <span class="hover-underline-expand">母婴/宠物</span>
                                </div>
                            </div>
                        </div>
                    </div> -->




                    <!-- 第三列 - Service卡片 -->
                    <div class="col-span-4 flex flex-col items-start justify-start text-body-medium">
                        <a href="/zh-hans/about/#services" class="w-full">
                            <div class="w-full rounded-3xl h-[416px] flex flex-col items-start justify-start p-7 box-border gap-2 bg-center bg-cover bg-no-repeat relative shadow-2xl" style="background-image: url('/static/assets/images/homepages/navbar/service.jpg')">
                                <div class="absolute inset-x-0 top-0 h-1/2 bg-gradient-to-b from-black via-black/50 to-transparent rounded-t-3xl"></div>
                                <div class="w-full flex flex-row items-start justify-between text-gray-50 relative z-10">
                                    <b class="leading-[24px]">我们的服务</b>
                                    <b class="leading-[24px] font-bold">↗</b>
                                </div>
                                <div class="text-body-small z-10">
                                    <div class="leading-[22px] font-medium text-gray-50">让我们的专家助您优化流程，共同打造灵活且全面的数字音频解决方案。</div>
                                </div>
                            </div>
                        </a>
                    </div>

                    <!-- 第四列 - Case Studies卡片 -->
                    
                    <div class="col-span-4 flex flex-col items-start justify-start text-body-medium">
                        <a href="/zh-hans/news/category/case-studies/" class="w-full">
                            <div class="w-full rounded-3xl h-[416px] flex flex-col items-start justify-start p-7 box-border gap-2 bg-center bg-cover bg-no-repeat relative shadow-2xl" 
                                    style="background-image: url('/static/assets/images/homepages/navbar/casestudy.jpg')">
                                <div class="absolute inset-x-0 top-0 h-1/2 bg-gradient-to-b from-black via-black/50 to-transparent rounded-t-3xl"></div>
                                <div class="w-full flex flex-row items-start justify-between text-gray-50 relative z-10">
                                    <b class="leading-[24px]">案例研究</b>
                                    <b class="leading-[24px] font-bold">↗</b>
                                </div>
                                <div class="text-body-small z-10">
                                    <div class="leading-[22px] font-medium text-gray-50">浏览我们与客户携手完成的所有案例。</div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
                        </div>
                    </div>
                    <div class="group self-stretch flex flex-col items-start justify-center h-full" 
                         @mouseenter="isMenuHovered = true; activeMenuSection = 'aboutus'">
                        <div class="flex-shrink-0 rounded-8xs flex flex-row items-center justify-start gap-2.5">
                            <span class="relative leading-[24px] font-medium whitespace-nowrap transition-colors duration-200">关于我们</span>
                            <!-- 内联SVG箭头 -->
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" 
                                 :class="activeMenuSection === 'aboutus' ? 'transform rotate-180' : ''"
                                 class="transition-transform duration-200">
                                <path d="M19.5 8.25L12 15.75L4.5 8.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                            

<!-- 关于我们下拉菜单，让元素超出其定位父元素范围，同时保持居中对齐 -->
<div @mouseenter="window.navbarState.isMenuHovered = true; window.navbarState.activeMenuSection = 'aboutus'" 
     :class="{ 
        'opacity-0 invisible': !(window.navbarState && window.navbarState.activeMenuSection === 'aboutus'),
        'opacity-100 visible': window.navbarState && window.navbarState.activeMenuSection === 'aboutus'
     }"
     class="fixed left-0 right-0 w-screen transition-all duration-200 ease-in-out z-50 dropdown-menu hidden-initially">
    <div :class="isDarkTheme ? 'bg-dark-7' : 'bg-white'" class="w-full shadow-lg">
        <div class="max-w-[1440px] mx-auto flex flex-col items-center justify-start py-6 px-12 box-border text-left text-body-small"
             :class="isDarkTheme ? 'text-white' : 'text-dark-5'">
            <div class="w-full grid grid-cols-12 items-start gap-8">
                <!-- 第一列 - 关于我们 -->
                <div class="col-span-4 flex flex-col items-start justify-start gap-4">
                    <div class="flex flex-row items-center justify-center">
                        <div class="leading-[22px] font-medium">公司</div>
                    </div>
                    <div class="w-full flex flex-col items-start justify-start text-body-medium"
                         :class="isDarkTheme ? 'text-white' : 'text-dark'">
                        <div class="w-full pb-3">
                            <div class="leading-[24px] font-medium">
                                <a class="hover-underline-expand" href="/zh-hans/about/">关于木瓜科技</a>
                            </div>
                        </div>
                        <div class="w-full pb-3">
                            <div class="leading-[24px] font-medium">
                                <a class="hover-underline-expand" href="/zh-hans/about/careers/">加入我们</a>
                            </div>
                        </div>
                    </div>
                </div>


                <!-- 第四列 - 创新历程 -->
                <div class="col-span-4 flex flex-col items-start justify-start text-body-medium">
                    <a href="/zh-hans/about/#milestones" class="w-full">
                        <div class="w-full rounded-3xl h-[416px] flex flex-col items-start justify-start p-7 box-border gap-2 bg-center bg-cover bg-no-repeat relative shadow-2xl" style="background-image: url('/static/assets/images/homepages/navbar/innovation_journey.jpg')">
                            <div class="absolute inset-x-0 top-0 h-1/2 bg-gradient-to-b from-black via-black/50 to-transparent rounded-t-3xl"></div>
                            <div class="w-full flex flex-row items-start justify-between text-gray-50 relative z-10">
                                <b class="leading-[24px]">创新历程</b>
                                <b class="leading-[24px] font-bold">↗</b>
                            </div>
                            <div class="text-body-small z-10">
                                <div class="leading-[22px] font-medium text-gray-50">我们在音频技术领域的突破与创新时间线。</div>
                            </div>
                        </div>
                    </a>
                </div>

                
                <!-- 第三列 - 联系我们 -->
                <div class="col-span-4 flex flex-col items-start justify-start text-body-medium">
                    <a href="/zh-hans/support/" class="w-full">
                        <div class="w-full rounded-3xl h-[416px] flex flex-col items-start justify-start p-7 box-border gap-2 bg-center bg-cover bg-no-repeat relative shadow-2xl" style="background-image: url('/static/assets/images/homepages/navbar/contact.jpg')">
                            <div class="absolute inset-x-0 top-0 h-1/2 bg-gradient-to-b from-black via-black/50 to-transparent rounded-t-3xl"></div>
                            <div class="w-full flex flex-row items-start justify-between text-gray-50 relative z-10">
                            <b class="leading-[24px]">联系我们</b>
                            <b class="leading-[24px] font-bold">↗</b>
                        </div>
                        <div class="text-body-small z-10">
                            <div class="leading-[22px] font-medium text-gray-50">让我们的专家助您优化流程，共同打造灵活且全面的数字音频解决方案。</div>
                        </div>
                    </div>
                </a>
                </div>
            </div>
        </div>
    </div>
</div>
                        </div>
                    </div>
                    <div class="group self-stretch flex flex-col items-start justify-center h-full" 
                         @mouseenter="isMenuHovered = true; activeMenuSection = 'media'">
                        <div class="flex-shrink-0 rounded-8xs flex flex-row items-center justify-start gap-2.5">
                            <span class="relative leading-[24px] font-medium whitespace-nowrap transition-colors duration-200">媒体中心</span>
                            <!-- 内联SVG箭头 -->
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" 
                                 :class="activeMenuSection === 'media' ? 'transform rotate-180' : ''"
                                 class="transition-transform duration-200">
                                <path d="M19.5 8.25L12 15.75L4.5 8.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                            



<!-- 媒体中心下拉菜单 -->
<div @mouseenter="window.navbarState.isMenuHovered = true; window.navbarState.activeMenuSection = 'media'" 
     :class="{ 
        'opacity-0 invisible': !(window.navbarState && window.navbarState.activeMenuSection === 'media'),
        'opacity-100 visible': window.navbarState && window.navbarState.activeMenuSection === 'media'
     }"
     class="fixed left-0 right-0 w-screen transition-all duration-200 ease-in-out z-50 dropdown-menu hidden-initially">
    <div :class="isDarkTheme ? 'bg-dark-7' : 'bg-white'" class="w-full shadow-lg">
        <div class="max-w-[1440px] mx-auto flex flex-col items-center justify-start py-6 px-12 box-border text-left text-body-small"
             :class="isDarkTheme ? 'text-white' : 'text-dark-5'">
            <div class="w-full grid grid-cols-12 flex-row items-start justify-center gap-8">
                <!-- 第一列 - 博客和新闻 -->
                <div class="col-span-4 flex flex-col items-start justify-start gap-4">
                    <div class="flex flex-row items-center justify-center">
                        <div class="leading-[22px] font-medium">博客与新闻</div>
                    </div>
                    <div class="w-full flex flex-col items-start justify-start text-body-medium"
                         :class="isDarkTheme ? 'text-white' : 'text-dark'">
                        <div class="w-full pb-3">
                            <div class="font-medium">
                                <a class="hover-underline-expand" href="/zh-hans/news/">最新新闻</a>
                            </div>
                        </div>
                        <div class="w-full pb-3">
                            <div class="font-medium">
                                <a class="hover-underline-expand" href="/zh-hans/news/category/blog/">博客</a>
                            </div>
                        </div>
                        <!-- <div class="w-full pb-3">
                            <div class="font-medium">
                                <a class="hover-underline-expand" href="#">媒体资料包</a>
                            </div>
                        </div>
                        <div class="w-full pb-3">
                            <div class="font-medium">
                                <a class="hover-underline-expand" href="#">媒体联系</a>
                            </div>
                        </div> -->
                    </div>
                </div>

                
                

                <!-- 第二列 - 精选新闻卡片 -->
                <div class="col-span-4 flex flex-col items-start justify-start text-body-medium">
                    <a href="/zh-hans/news/article/2025-03-27-gas-2025-award/" class="w-full block">
                        <div class="rounded-3xl h-[416px] w-full flex flex-col items-start justify-start p-7 box-border gap-2 bg-center bg-cover bg-no-repeat hover:shadow-lg transition-shadow duration-300 relative shadow-2xl" 
                             style="background-image: url('/media/news_covers/mmexport1008b8624a0c4acd378bf871ebd3e947_1743044932729_1.jpeg')">
                             <div class="absolute inset-x-0 top-0 h-1/2 bg-gradient-to-b from-black via-black/50 to-transparent rounded-t-3xl"></div>
                             <div class="w-full flex flex-row items-start justify-between text-gray-50 relative z-10">
                                <b class="leading-[24px]">精选新闻 </b>
                                <b class="leading-[24px] font-bold">↗</b>
                            </div>
                            <div class="text-body-small z-10">
                                
                                <div class="text-body-small text-white mb-2">木瓜科技荣获“GAS消费电子科创奖-技术进步奖”！</div>
                                
                            </div>
                        </div>
                    </a>
                </div>

                <!-- 第三列 - 精选博客卡片 -->
                <div class="col-span-4 flex flex-col items-start justify-start text-body-medium">
                    <a href="/zh-hans/news/article/2025-06-20-what-is-digitally-variable-directional-microphone/" class="w-full block">
                        <div class="rounded-3xl h-[416px] w-full flex flex-col items-start justify-start p-7 box-border gap-2 bg-center bg-cover bg-no-repeat hover:shadow-lg transition-shadow duration-300 relative shadow-2xl" 
                             style="background-image: url('/media/news_covers/Linkedin_Post_DVDM_cover.jpg')">
                             <div class="absolute inset-x-0 top-0 h-1/2 bg-gradient-to-b from-black via-black/50 to-transparent rounded-t-3xl"></div>
                            <div class="w-full flex flex-row items-start justify-between text-gray-50 relative z-10">
                                <b class="leading-[24px]">精选博客 </b>
                                <b class="leading-[24px] font-bold">↗</b>
                            </div>
                            <div class="text-body-small z-10">
                                
                                <div class="text-body-small text-white mb-2">什么是数字可变指向麦克风？</div>
                                
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧图标和按钮 -->
        <div class="flex flex-row items-center justify-end gap-4 md:gap-6">
            <!-- 搜索按钮 -->
            <button class="flex-shrink-0 hidden md:flex w-6 min-w-[24px] relative btn-reset items-center justify-center hover:opacity-70 transition-opacity" @click="triggerSearch()" aria-label="搜索">
                <!-- 内联SVG搜索图标 -->
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M21 21L15.0001 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </button>

            <!-- 全球图标 - 语言切换 -->
            <div class="flex-shrink-0 hidden md:block relative" x-data="{ langMenuOpen: false }">
                <button @click="langMenuOpen = !langMenuOpen" class="w-6 min-w-[24px] relative btn-reset flex items-center" aria-label="语言切换">
                    <!-- 内联SVG全球图标 -->
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M3.6001 9H20.4001" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M3.6001 15H20.4001" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M12 21C13.6569 21 15 16.9706 15 12C15 7.02944 13.6569 3 12 3C10.3431 3 9 7.02944 9 12C9 16.9706 10.3431 21 12 21Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </button>
                
                <!-- 语言切换下拉菜单 -->
                <div x-show="langMenuOpen" 
                     @click.away="langMenuOpen = false"
                     x-transition:enter="transition ease-out duration-200"
                     x-transition:enter-start="opacity-0 translate-y-1"
                     x-transition:enter-end="opacity-100 translate-y-0"
                     x-transition:leave="transition ease-in duration-150"
                     x-transition:leave-start="opacity-100 translate-y-0"
                     x-transition:leave-end="opacity-0 translate-y-1"
                     :class="isDarkTheme ? 'bg-dark-7 shadow-[0_0_8px_rgba(0,0,0,0.3)]' : 'bg-white shadow-[0_0_8px_rgba(0,0,0,0.1)]'"
                     class="absolute left-1/2 -translate-x-1/2 mt-2 w-32 rounded-md z-50 hidden-initially">
                    
                    
                    
                    <div>
                        
                        <a href="/zh-hans/" 
                           :class="isDarkTheme ? 'hover:bg-dark-5 hover:text-white text-gray-300' : 'hover:bg-gray-100 hover:text-gray-900 text-gray-700'"
                           class="rounded-md language-link block px-4 py-2 text-body-small  font-bold text-primary ">
                            简体中文
                        </a>
                        
                        <a href="/en/" 
                           :class="isDarkTheme ? 'hover:bg-dark-5 hover:text-white text-gray-300' : 'hover:bg-gray-100 hover:text-gray-900 text-gray-700'"
                           class="rounded-md language-link block px-4 py-2 text-body-small ">
                            English
                        </a>
                        
                    </div>
                </div>
            </div>

            <!-- Contact Us 按钮 -->
            <a href="/zh-hans/support/" class="flex-shrink-0 relative rounded-full bg-primary hover:bg-primary-hover flex flex-row items-center justify-center py-2 px-4 sm:px-6 box-border text-center text-body-small sm:text-body-medium text-white transition-colors duration-200">
                <span class="relative leading-[22px] sm:leading-[24px] font-semibold">联系我们</span>
            </a>

            <!-- 在容器宽度不够时显示汉堡菜单 -->
            <button class="flex-shrink-0 lg:hidden min-w-[24px] px-2 relative btn-reset" @click="toggleMobileMenu()" aria-label="菜单">
                <!-- 内联SVG菜单图标 -->
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3 12H21M3 6H21M3 18H21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </button>
        </div>
    </div>

    <!-- 毛玻璃蒙板，导航菜单悬停时显示 -->
    <div x-show="isMenuHovered" 
         x-transition:enter="transition-all duration-300 ease-in-out"
         x-transition:enter-start="opacity-0 backdrop-blur-none"
         x-transition:enter-end="opacity-100 backdrop-blur-md"
         x-transition:leave="transition-all duration-300 ease-in-out"
         x-transition:leave-start="opacity-100 backdrop-blur-md"
         x-transition:leave-end="opacity-0 backdrop-blur-none"
         :class="isDarkTheme ? 'bg-black/30' : 'bg-white/30 dark:bg-dark/30'"
         class="fixed inset-0 backdrop-blur-md z-40 pointer-events-none hidden-initially"
         style="top: 64px;">
    </div>

    <!-- 引入新的移动导航组件 -->
    


<!-- 移动导航组件 - 分层结构 -->
<div x-data="{ 
    currentLevel: 'L1',
    currentSection: null,
    currentSubSection: null,
    langOpen: false,
    isDarkTheme: typeof window.navbarDarkTheme === 'boolean' ? window.navbarDarkTheme : false
}" 
    x-show="mobileMenuOpen"
    x-trap.noscroll="mobileMenuOpen"
    id="mobile-menu"
    :class="isDarkTheme ? 'bg-black' : 'bg-white'"
    class="fixed inset-0 z-50 lg:hidden overflow-hidden hidden-initially"
    x-transition:enter="transition ease-out duration-300 transform"
    x-transition:enter-start="translate-x-full"
    x-transition:enter-end="translate-x-0"
    x-transition:leave="transition ease-in duration-200 transform"
    x-transition:leave-start="translate-x-0"
    x-transition:leave-end="translate-x-full">

    <!-- 顶部导航栏 -->
    <div class="sticky top-0 left-0 right-0 z-10 h-16 flex items-center justify-between p-6"
         :class="isDarkTheme ? 'border-dark-5 text-white' : 'border-gray-200 text-primary'">
        
        <!-- 左侧: Logo/返回按钮 -->
        <div class="flex items-center justify-start">
            <!-- L1层级显示Logo -->
            <template x-if="currentLevel === 'L1'">
                <a href="/zh-hans/" class="block py-[6.4px] focus:outline-none">
                    <svg width="96" height="24" viewBox="0 0 120 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <g id="Logo">
                            <g id="Pawpaw_LOGO_sRGB 2" clip-path="url(#clip0_1243_481)">
                                <g id="Layer1">
                                    <path id="Vector" fill-rule="evenodd" clip-rule="evenodd"
                                        d="M90.4859 8H87.2913L85.4029 11.0979H88.8965C89.5259 11.0979 90.0295 11.5911 90.0295 12.2076C90.0295 12.8241 89.5259 13.3173 88.8965 13.3173H84.0338L78.9352 21.6709H82.6034L85.8136 16.3998H91.9447L95.1549 21.6709H98.8247L90.4859 8Z"
                                        fill="currentColor" />
                                    <path id="Vector_2" fill-rule="evenodd" clip-rule="evenodd"
                                        d="M77.1097 8H61.137V11.0979H75.9609C76.5904 11.0979 77.094 11.5911 77.094 12.2076C77.094 12.8241 76.5904 13.3173 75.9609 13.3173H61.137V21.6709H64.3001V16.4152H77.1097C78.8565 16.4152 80.2728 15.0281 80.2728 13.3173V11.0979C80.257 9.38712 78.8565 8 77.1097 8Z"
                                        fill="currentColor" />
                                    <path id="Vector_3" fill-rule="evenodd" clip-rule="evenodd"
                                        d="M55.6921 8H58.8552V20.5612C58.8552 21.1777 58.3516 21.6709 57.7221 21.6709H54.26L48.9096 12.596L43.5607 21.6709H38.9797V8H42.1428V17.881L47.9654 8H49.8538L55.6921 17.9041V8Z"
                                        fill="currentColor" />
                                    <path id="Vector_4" fill-rule="evenodd" clip-rule="evenodd"
                                        d="M116.837 8H120V20.5612C120 21.1777 119.496 21.6709 118.867 21.6709H115.405L110.054 12.596L104.706 21.6709H100.125V8H103.288V17.881L109.11 8H110.999L116.837 17.9041V8Z"
                                        fill="currentColor" />
                                    <path id="Vector_5" fill-rule="evenodd" clip-rule="evenodd"
                                        d="M29.3489 8H26.1544L24.266 11.0979H27.7595C28.389 11.0979 28.8925 11.5911 28.8925 12.2076C28.8925 12.8241 28.389 13.3173 27.7595 13.3173H22.8969L17.7982 21.6709H21.4664L24.6767 16.3998H30.8077L34.018 21.6709H37.6878L29.3489 8Z"
                                        fill="currentColor" />
                                    <path id="Vector_6" fill-rule="evenodd" clip-rule="evenodd"
                                        d="M15.9727 8H0V11.0979H14.8239C15.4534 11.0979 15.957 11.5911 15.957 12.2076C15.957 12.8241 15.4534 13.3173 14.8239 13.3173H0V21.6709H3.16307V16.4152H15.9727C17.7195 16.4152 19.1358 15.0281 19.1358 13.3173V11.0979C19.1201 9.38712 17.7195 8 15.9727 8Z"
                                        fill="currentColor" />
                                </g>
                            </g>
                        </g>
                        <defs>
                            <clipPath id="clip0_1243_481">
                                <rect width="120" height="13.6709" fill="white" transform="translate(0 8)" />
                            </clipPath>
                        </defs>
                    </svg>
                </a>
            </template>
            
            <!-- L2及以上层级显示返回箭头 -->
            <template x-if="currentLevel !== 'L1'">
                <button @click="
                    if(currentLevel === 'L3') {
                        currentLevel = 'L2';
                        currentSubSection = null;
                    } else {
                        currentLevel = 'L1';
                        currentSection = null;
                    }" 
                    class="btn-reset py-[6.4px] text-dark">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M15 19L8 12L15 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </button>
            </template>
        </div>
        
        <!-- 右侧: 关闭按钮 -->
        <div class="flex items-center justify-end">
            <button @click="toggleMobileMenu()" class="btn-reset py-[6.4px] text-dark">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </button>
        </div>
    </div>

    <!-- 内容区域 - 可滚动 -->
    <div class="relative overflow-y-auto h-[calc(100%-64px)] pb-20 px-6" id="mobile-menu-content">
        <!-- 标题 -->
        <div class="text-[24px] leading-[30px] font-semibold"
        :class="currentLevel === 'L2' || currentLevel === 'L3' ? 'pt-4' : 'pt-0'">
            <!-- 不同层级显示不同标题 -->
            <template x-if="currentLevel === 'L2' && currentSection === 'solutions'">
                <span>解决方案</span>
            </template>
            <template x-if="currentLevel === 'L2' && currentSection === 'application'">
                <span>应用场景</span>
            </template>
            <template x-if="currentLevel === 'L2' && currentSection === 'aboutus'">
                <span>关于我们</span>
            </template>
            <template x-if="currentLevel === 'L2' && currentSection === 'media'">
                <span>媒体中心</span>
            </template>
            <!-- L3层级的标题 - 解决方案子类别 -->
            <template x-if="currentLevel === 'L3' && currentSection === 'solutions'">
                <span x-text="
                    currentSubSection === 'voice_interface' ? '语音接口' :
                    currentSubSection === 'professional_audio' ? '专业音频' :
                    currentSubSection === 'consumers' ? '消费类产品' :
                    currentSubSection === 'software' ? '软件' : ''
                "></span>
            </template>
        </div>

        <!-- 导入各层级菜单 -->
        <!-- Level 1 Wrapper -->
        <div x-show="currentLevel === 'L1'"
             x-transition:enter="transition ease-out duration-300 transform"
             x-transition:enter-start="translate-x-full opacity-0"
             x-transition:enter-end="translate-x-0 opacity-100"
             x-transition:leave="transition ease-in duration-200 transform"
             x-transition:leave-start="translate-x-0 opacity-100"
             x-transition:leave-end="-translate-x-full opacity-0">
            

<!-- L1 主菜单 -->
<div x-show="currentLevel === 'L1'" class="my-1 mb-6">
    <div class="flex flex-col">
        <!-- 解决方案 -->
        <button @click="currentLevel = 'L2'; currentSection = 'solutions'" 
                class="flex items-center justify-between w-full btn-reset my-3">
            <span class="text-[24px] leading-[30px] font-semibold" :class="isDarkTheme ? 'text-white' : 'text-dark'">解决方案</span>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9 5L16 12L9 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        </button>
        
        <!-- 应用场景 -->
        <button @click="currentLevel = 'L2'; currentSection = 'application'" 
                class="flex items-center justify-between w-full btn-reset my-3">
            <span class="text-[24px] leading-[30px] font-semibold" :class="isDarkTheme ? 'text-white' : 'text-dark'">应用场景</span>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9 5L16 12L9 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        </button>
        
        <!-- 关于我们 -->
        <button @click="currentLevel = 'L2'; currentSection = 'aboutus'" 
                class="flex items-center justify-between w-full btn-reset my-3">
            <span class="text-[24px] leading-[30px] font-semibold" :class="isDarkTheme ? 'text-white' : 'text-dark'">关于我们</span>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9 5L16 12L9 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        </button>
        
        <!-- 媒体中心 -->
        <button @click="currentLevel = 'L2'; currentSection = 'media'" 
                class="flex items-center justify-between w-full btn-reset my-3">
            <span class="text-[24px] leading-[30px] font-semibold" :class="isDarkTheme ? 'text-white' : 'text-dark'">媒体中心</span>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9 5L16 12L9 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        </button>
        
        <div class="h-[1px] w-full my-6" :class="isDarkTheme ? 'bg-gray-800' : 'bg-gray-200'"></div>
        
        <!-- 搜索 -->
        <div class="my-3">
            <button @click="triggerSearch(); toggleMobileMenu();" 
                    class="flex items-center gap-3 btn-reset">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M21 21L15.0001 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <span class="text-body-large" :class="isDarkTheme ? 'text-white' : 'text-dark'">搜索</span>
            </button>
        </div>
        
        <!-- 语言 -->
        <div class="my-3">
            <button @click="langOpen = !langOpen" 
                    class="flex items-center justify-between w-full btn-reset mb-3">
                <div class="flex items-center gap-3">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M3.6001 9H20.4001" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M3.6001 15H20.4001" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M12 21C13.6569 21 15 16.9706 15 12C15 7.02944 13.6569 3 12 3C10.3431 3 9 7.02944 9 12C9 16.9706 10.3431 21 12 21Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    <span class="text-body-large" :class="isDarkTheme ? 'text-white' : 'text-dark'">语言</span>
                </div>
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" 
                     :class="langOpen ? 'rotate-180' : ''"
                     class="transition-transform duration-200">
                    <path d="M19.5 8.25L12 15.75L4.5 8.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </button>
            
            <div x-show="langOpen" x-transition 
                 class="pl-8 flex flex-col pt-2 hidden-initially">
                
                
                
                
                <a href="/zh-hans/" 
                   class="language-link text-body-medium py-2 flex items-center font-semibold"
                   :class="isDarkTheme ? 'text-gray-300' : 'text-gray-700'">
                    简体中文
                    
                    <svg width="16" height="16" viewBox="0 0 24 24" class="ml-2" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M4.5 12.75L10.5 18.75L19.5 5.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    
                </a>
                
                <a href="/en/" 
                   class="language-link text-body-medium py-2 flex items-center"
                   :class="isDarkTheme ? 'text-gray-300' : 'text-gray-700'">
                    English
                    
                </a>
                
            </div>
        </div>
    </div>
</div> 
        </div>

        <!-- Level 2 Solutions Wrapper -->
        <div x-show="currentLevel === 'L2' && currentSection === 'solutions'"
             x-transition:enter="transition ease-out duration-300 transform"
             x-transition:enter-start="translate-x-full opacity-0"
             x-transition:enter-end="translate-x-0 opacity-100"
             x-transition:leave="transition ease-in duration-200 transform"
             x-transition:leave-start="translate-x-0 opacity-100"
             x-transition:leave-end="-translate-x-full opacity-0">
            

<!-- L2 解决方案菜单 -->
<div x-show="currentLevel === 'L2' && currentSection === 'solutions'" class="mt-6 mb-12">
    <div class="flex flex-col">
        <!-- 语音接口 -->
        <button @click="currentLevel = 'L3'; currentSubSection = 'voice_interface'" 
                class="flex items-center justify-between w-full btn-reset my-3">
            <span class="text-[30px] leading-[38px] font-bold" :class="isDarkTheme ? 'text-white' : 'text-dark'">语音接口</span>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9 5L16 12L9 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        </button>
        
        <!-- 专业音频 -->
        <button @click="currentLevel = 'L3'; currentSubSection = 'professional_audio'" 
                class="flex items-center justify-between w-full btn-reset my-3">
            <span class="text-[30px] leading-[38px] font-bold" :class="isDarkTheme ? 'text-white' : 'text-dark'">专业音频</span>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9 5L16 12L9 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        </button>
        
        <!-- 消费类产品 -->
        <button @click="currentLevel = 'L3'; currentSubSection = 'consumers'" 
                class="flex items-center justify-between w-full btn-reset my-3">
            <span class="text-[30px] leading-[38px] font-bold" :class="isDarkTheme ? 'text-white' : 'text-dark'">消费类产品</span>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9 5L16 12L9 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        </button>
        
        <!-- 软件 -->
        <button @click="currentLevel = 'L3'; currentSubSection = 'software'" 
                class="flex items-center justify-between w-full btn-reset my-3">
            <span class="text-[30px] leading-[38px] font-bold" :class="isDarkTheme ? 'text-white' : 'text-dark'">软件</span>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9 5L16 12L9 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        </button>
        
        <!-- 所有解决方案 -->
        <a href="/zh-hans/solutions/" class="flex items-center w-full pt-9 pb-2">
            <span class="text-body-large font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">所有解决方案</span>
        </a>
        
        <!-- 即将推出 -->
        <!-- <div class="flex items-center w-full py-2">
            <span class="text-body-large font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">即将推出</span>
        </div> -->
    </div>
</div> 
        </div>

        <!-- Level 2 Application Wrapper -->
        <div x-show="currentLevel === 'L2' && currentSection === 'application'"
             x-transition:enter="transition ease-out duration-300 transform"
             x-transition:enter-start="translate-x-full opacity-0"
             x-transition:enter-end="translate-x-0 opacity-100"
             x-transition:leave="transition ease-in duration-200 transform"
             x-transition:leave-start="translate-x-0 opacity-100"
             x-transition:leave-end="-translate-x-full opacity-0">
            



<!-- L2 应用场景菜单 -->
<div x-show="currentLevel === 'L2' && currentSection === 'application'" class="mb-6">
    <div class="flex flex-col">
        
        <a href="/zh-hans/applications/conference-meeting/" class="flex items-center w-full py-2 mt-6">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">会议</span>
        </a>

        <a href="/zh-hans/applications/live-streaming/" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">直播</span>
        </a>

        <!-- <a href="#" class="flex items-center w-full py-2 mt-6">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">消费电子</span>
        </a>

        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">农业</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">体育</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">教育</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">智能家居</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">汽车</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">机器人</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">娱乐</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">媒体制作</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">AR/VR</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">元宇宙</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">环境</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">健康医疗</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">母婴/宠物</span>
        </a> -->

        <div class="h-[0px] my-3"></div>

        
        
        <!-- 特色卡片：服务 -->
        <div class="mt-4 mb-6">
            <a href="/zh-hans/about/#services" class="block">
                <div class="rounded-xl overflow-hidden relative shadow-2xl">
                    <div class="h-48 flex flex-col justify-between p-6 bg-center bg-cover relative" 
                         style="background-image: url('/static/assets/images/homepages/navbar/service.jpg')">
                        <div class="absolute inset-0 bg-gradient-to-b via-black/50 from-black to-black/5"></div>
                        <div class="w-full flex justify-between items-start relative z-10">
                            <h3 class="text-body-medium font-bold text-gray-1">
                                我们的服务
                            </h3>
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M7 17L17 7M17 7H7M17 7V17" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <div class="relative z-10">
                            <p class="text-body-small text-gray-1">让我们的专家助您优化流程，共同打造灵活且全面的数字音频解决方案。</p>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        
        <!-- 特色卡片：案例研究 -->
        <div class="mb-6">
            <a href="/zh-hans/news/category/case-studies/" class="block">
                <div class="rounded-xl overflow-hidden relative shadow-2xl">
                    <div class="h-48 flex flex-col justify-between p-6 bg-center bg-cover relative" 
                         style="background-image: url('/static/assets/images/homepages/navbar/casestudy.jpg')">
                        <div class="absolute inset-0 bg-gradient-to-b via-black/50 from-black to-black/5"></div>
                        <div class="w-full flex justify-between items-start relative z-10">
                            <h3 class="text-body-medium font-bold text-gray-1">
                                案例研究
                            </h3>
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M7 17L17 7M17 7H7M17 7V17" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <div class="relative z-10">
                            <p class="text-body-small text-gray-1">浏览我们与客户携手完成的所有案例。</p>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>
</div> 
        </div>

        <!-- Level 2 About Us Wrapper -->
        <div x-show="currentLevel === 'L2' && currentSection === 'aboutus'"
             x-transition:enter="transition ease-out duration-300 transform"
             x-transition:enter-start="translate-x-full opacity-0"
             x-transition:enter-end="translate-x-0 opacity-100"
             x-transition:leave="transition ease-in duration-200 transform"
             x-transition:leave-start="translate-x-0 opacity-100"
             x-transition:leave-end="-translate-x-full opacity-0">
            


<!-- L2 关于我们菜单 -->
<div x-show="currentLevel === 'L2' && currentSection === 'aboutus'">
    <div class="flex flex-col">
        <a href="/zh-hans/about/" class="flex items-center w-full py-2 mt-6">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">关于木瓜科技</span>
        </a>
        
        <a href="/zh-hans/about/careers/" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">加入我们</span>
        </a>
        
        <div class="h-[0px] my-3"></div>
        
        <!-- 特色卡片：我们的服务 -->
        <div class="mt-4 mb-6">
            <a href="/zh-hans/support/" class="block">
                <div class="rounded-xl overflow-hidden relative shadow-2xl">
                    <div class="h-48 flex flex-col justify-between p-6 bg-center bg-cover relative" style="background-image: url('/static/assets/images/homepages/navbar/contact.jpg')">
                        <div class="absolute inset-0 bg-gradient-to-b via-black/50 from-black to-black/5"></div>
                        <div class="w-full flex justify-between items-start relative z-10">
                            <h3 class="text-body-medium font-bold text-gray-1">
                                联系我们
                            </h3>
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M7 17L17 7M17 7H7M17 7V17" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <div class="relative z-10">
                            <p class="text-body-small text-gray-1">让我们的专家助您优化流程，共同打造灵活且全面的数字音频解决方案。</p>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        
        <!-- 特色卡片：创新历程 -->
        <div class="mb-6">
            <a href="/zh-hans/about/#milestones" class="block">
                <div class="rounded-xl overflow-hidden relative shadow-2xl">
                    <div class="h-48 flex flex-col justify-between p-6 bg-center bg-cover relative" style="background-image: url('/static/assets/images/homepages/navbar/innovation_journey.jpg')">
                        <div class="absolute inset-0 bg-gradient-to-b via-black/50 from-black to-black/5"></div>
                        <div class="w-full flex justify-between items-start relative z-10">
                            <h3 class="text-body-medium font-bold text-gray-1">
                                创新历程
                            </h3>
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M7 17L17 7M17 7H7M17 7V17" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <div class="relative z-10">
                            <p class="text-body-medium font-bold text-white">我们在音频技术领域的突破与创新时间线。</p>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>
</div> 
        </div>

        <!-- Level 2 Media Wrapper -->
        <div x-show="currentLevel === 'L2' && currentSection === 'media'"
             x-transition:enter="transition ease-out duration-300 transform"
             x-transition:enter-start="translate-x-full opacity-0"
             x-transition:enter-end="translate-x-0 opacity-100"
             x-transition:leave="transition ease-in duration-200 transform"
             x-transition:leave-start="translate-x-0 opacity-100"
             x-transition:leave-end="-translate-x-full opacity-0">
            



<!-- L2 媒体中心菜单 -->
<div x-show="currentLevel === 'L2' && currentSection === 'media'">
    <div class="flex flex-col">
        <a href="/zh-hans/news/" class="flex items-center w-full py-2 mt-6 ">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">最新新闻</span>
        </a>
        
        <a href="/zh-hans/news/category/blog/" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">博客</span>
        </a>
        
        <!-- <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">媒体资料包</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">媒体联系</span>
        </a>
         -->
        <div class="h-[0px] my-3"></div>
        
        
        
        
        <!-- 特色卡片：博客文章 -->
        <div class="mt-4 mb-6">
            <a href="/zh-hans/news/article/2025-06-20-what-is-digitally-variable-directional-microphone/" class="block">
                <div class="rounded-xl overflow-hidden relative shadow-2xl">
                    <div class="h-48 flex flex-col justify-between p-6 bg-center bg-cover relative" 
                         style="background-image: url('/media/news_covers/Linkedin_Post_DVDM_cover.jpg')">
                        <div class="absolute inset-0 bg-gradient-to-b via-black/50 from-black to-black/5"></div>
                        <div class="w-full flex justify-between items-start relative z-10">
                            <h3 class="text-body-medium font-bold text-gray-1">
                                精选博客
                            </h3>
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M7 17L17 7M17 7H7M17 7V17" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <div class="relative z-10">
                            
                                <p class="text-body-small text-gray-1">什么是数字可变指向麦克风？</p>
                            
                        </div>
                    </div>
                </div>
            </a>
        </div>
        
        <!-- 特色卡片：新闻稿 -->
        <div class="mb-6">
            <a href="/zh-hans/news/article/2025-03-27-gas-2025-award/" class="block">
                <div class="rounded-xl overflow-hidden relative shadow-2xl">
                    <div class="h-48 flex flex-col justify-between p-6 bg-center bg-cover relative" 
                         style="background-image: url('/media/news_covers/mmexport1008b8624a0c4acd378bf871ebd3e947_1743044932729_1.jpeg')">
                        <div class="absolute inset-0 bg-gradient-to-b via-black/50 from-black to-black/5"></div>
                        <div class="w-full flex justify-between items-start relative z-10">
                            <h3 class="text-body-medium font-bold text-gray-1">
                                精选新闻
                            </h3>
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M7 17L17 7M17 7H7M17 7V17" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <div class="relative z-10">
                            
                                <p class="text-body-small text-gray-1">木瓜科技荣获“GAS消费电子科创奖-技术进步奖”！</p>
                            
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>
</div> 
        </div>

        <!-- Level 3 Voice Interface Wrapper -->
        <div x-show="currentLevel === 'L3' && currentSection === 'solutions' && currentSubSection === 'voice_interface'"
             x-transition:enter="transition ease-out duration-300 transform"
             x-transition:enter-start="translate-x-full opacity-0"
             x-transition:enter-end="translate-x-0 opacity-100"
             x-transition:leave="transition ease-in duration-200 transform"
             x-transition:leave-start="translate-x-0 opacity-100"
             x-transition:leave-end="-translate-x-full opacity-0">
            

<!-- L3 语音接口子菜单 -->
<div x-show="currentLevel === 'L3' && currentSection === 'solutions' && currentSubSection === 'voice_interface'" class="pt-8 pb-12">
    <div class="flex flex-col">
        <div class="font-medium text-body-medium mb-4" :class="isDarkTheme ? 'text-gray-400' : 'text-dark-4'">会议语音</div>
             
        <a href="/zh-hans/solutions/digitally-variable-directional-microphone/" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">数字可变指向麦克风</span>
        </a>
           
        <a href="/zh-hans/solutions/dual-mic-voice-interface/" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">双麦克风语音接口</span>
        </a>
        
        <a href="/zh-hans/solutions/wireless-daisy-chain-speakerphone/" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">无线级联会议麦克风</span>
        </a>

        
        <a href="/zh-hans/solutions/sound-reinforcement/" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">本地扩声系统</span>
        </a>
        
        <!-- <div class="h-[0px] my-3"></div>
        
        <div class="font-medium text-body-medium mb-4" :class="isDarkTheme ? 'text-gray-400' : 'text-dark-4'">语音识别</div>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">离线AI关键词识别</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">离线自动语音识别(ASR)</span>
        </a> -->
    </div>
</div> 
        </div>

        <!-- Level 3 Professional Audio Wrapper -->
        <div x-show="currentLevel === 'L3' && currentSection === 'solutions' && currentSubSection === 'professional_audio'"
             x-transition:enter="transition ease-out duration-300 transform"
             x-transition:enter-start="translate-x-full opacity-0"
             x-transition:enter-end="translate-x-0 opacity-100"
             x-transition:leave="transition ease-in duration-200 transform"
             x-transition:leave-start="translate-x-0 opacity-100"
             x-transition:leave-end="-translate-x-full opacity-0">
            

<!-- L3 专业音频子菜单 -->
<div x-show="currentLevel === 'L3' && currentSection === 'solutions' && currentSubSection === 'professional_audio'" class="pt-8 pb-12">
    <div class="flex flex-col">
        <div class="font-medium text-body-medium mb-4" :class="isDarkTheme ? 'text-gray-400' : 'text-dark-4'">音频接口</div>
        
        <a href="/zh-hans/solutions/usb-audio-interface/" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">USB声卡</span>
        </a>
<!--         
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">音频接口模块</span>
        </a>
        
        <div class="h-[0px] my-3"></div>
        
        <div class="font-medium text-body-medium mb-4" :class="isDarkTheme ? 'text-gray-400' : 'text-dark-4'">调音台</div>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">32通道多轨调音台</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">16通道多轨调音台</span>
        </a>
        
        <div class="h-[0px] my-3"></div>
        
        <div class="font-medium text-body-medium mb-4" :class="isDarkTheme ? 'text-gray-400' : 'text-dark-4'">HiFi</div>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">桌面解码耳放</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">便携解码耳放</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">无线功放</span>
        </a> -->
    </div>
</div> 
        </div>

        <!-- Level 3 Consumers Wrapper -->
        <div x-show="currentLevel === 'L3' && currentSection === 'solutions' && currentSubSection === 'consumers'"
             x-transition:enter="transition ease-out duration-300 transform"
             x-transition:enter-start="translate-x-full opacity-0"
             x-transition:enter-end="translate-x-0 opacity-100"
             x-transition:leave="transition ease-in duration-200 transform"
             x-transition:leave-start="translate-x-0 opacity-100"
             x-transition:leave-end="-translate-x-full opacity-0">
            

<!-- L3 消费类产品子菜单 -->
<div x-show="currentLevel === 'L3' && currentSection === 'solutions' && currentSubSection === 'consumers'" class="mt-8 mb-12">
    <div class="flex flex-col">
        <div class="font-medium text-body-medium mb-4" :class="isDarkTheme ? 'text-gray-400' : 'text-dark-4'">麦克风</div>
        
        <a href="/zh-hans/solutions/usb-ai-microphone/" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">AI降噪USB麦克风</span>
        </a>
        
        <!-- <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">无线麦克风</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">无线麦克风 (NearLink)</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">可变指向性麦克风</span>
        </a>
        
        <div class="h-[0px] my-3"></div>
        
        <div class="font-medium text-body-medium mb-4" :class="isDarkTheme ? 'text-gray-400' : 'text-dark-4'">耳机</div>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">游戏耳机</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">TWS真无线耳机</span>
        </a>
        
        <div class="h-[0px] my-3"></div>
        
        <div class="font-medium text-body-medium mb-4" :class="isDarkTheme ? 'text-gray-400' : 'text-dark-4'">配件</div>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">AI人声分离器</span>
        </a> -->
    </div>
</div> 
        </div>

        <!-- Level 3 Software Wrapper -->
        <div x-show="currentLevel === 'L3' && currentSection === 'solutions' && currentSubSection === 'software'"
             x-transition:enter="transition ease-out duration-300 transform"
             x-transition:enter-start="translate-x-full opacity-0"
             x-transition:enter-end="translate-x-0 opacity-100"
             x-transition:leave="transition ease-in duration-200 transform"
             x-transition:leave-start="translate-x-0 opacity-100"
             x-transition:leave-end="-translate-x-full opacity-0">
            

<!-- L3 软件子菜单 -->
<div x-show="currentLevel === 'L3' && currentSection === 'solutions' && currentSubSection === 'software'" class="pt-8 pb-12">
    <div class="flex flex-col">
        <!-- <div class="font-medium text-body-medium mb-4" :class="isDarkTheme ? 'text-gray-400' : 'text-dark-4'">元宇宙</div>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">空间音频录制</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">空间音频渲染</span>
        </a>

         -->
        <div class="font-medium text-body-medium mb-4" :class="isDarkTheme ? 'text-gray-400' : 'text-dark-4'">AI音频</div>
        
        <a href="/zh-hans/solutions/algorithms/ai-noise-reduction/" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">AI降噪</span>
        </a>
        

        
        <!-- <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">文本转语音</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">变声器</span>
        </a>
        
        <div class="h-[0px] my-3"></div>
        
        <div class="font-medium text-body-medium mb-4" :class="isDarkTheme ? 'text-gray-400' : 'text-dark-4'">应用</div>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">木瓜录音机</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">麦克风阵列管理器</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">均衡器</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">DFU工具</span>
        </a>
        
        <div class="h-[0px] my-3"></div>
        
        <div class="font-medium text-body-medium mb-4" :class="isDarkTheme ? 'text-gray-400' : 'text-dark-4'">A2B</div>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">车载音响系统</span>
        </a> -->
    </div>
</div> 
        </div>
    </div>

    <!-- 底部CTA区域 - 固定在底部 -->
    <div class="fixed bottom-0 left-0 right-0 z-10">
        <div class="h-10 bg-gradient-to-t from-white to-transparent pointer-events-none" x-show="!isDarkTheme"></div>
        <div class="h-10 bg-gradient-to-t from-black to-transparent pointer-events-none" x-show="isDarkTheme"></div>
        <div class="h-20 bg-white"></div>
        <div class="absolute bottom-0 left-0 right-0 p-6">
            <a href="/zh-hans/support/" 
               class="block w-full text-center rounded-full bg-primary hover:bg-primary-hover py-2 px-6 text-body-medium text-white font-semibold transition-colors duration-200">
                联系我们
            </a>
        </div>
    </div>
</div> 
</div>

<!-- 搜索弹窗组件 -->



<!-- 搜索弹窗组件 -->
<div x-data="searchModal()" 
     x-cloak
     x-show="isOpen" 
     x-trap.noscroll="isOpen"
     @keydown.escape.window="close()"
     @search-toggle.window="toggle()"
     class="fixed inset-0 z-modal flex items-start justify-center pt-16 sm:pt-24 md:pt-32 px-4 sm:px-6">
    
    <!-- 背景蒙版 -->
    <div x-show="isOpen" 
         x-cloak
         x-transition:enter="transition-opacity duration-300"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition-opacity duration-300"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         class="fixed inset-0 bg-dark/60 backdrop-blur-md z-modal-backdrop"
         @click="close()"></div>
    
    <!-- 搜索容器 -->
    <div x-show="isOpen" 
         x-cloak
         x-transition:enter="transition-all duration-300"
         x-transition:enter-start="opacity-0 -translate-y-4"
         x-transition:enter-end="opacity-100 translate-y-0"
         x-transition:leave="transition-all duration-300"
         x-transition:leave-start="opacity-100 translate-y-0"
         x-transition:leave-end="opacity-0 -translate-y-4"
         @click.stop=""
         class="relative w-full max-w-2xl bg-white rounded-xl shadow-5 overflow-hidden z-modal">
        
        <!-- 搜索头部 -->
        <div class="flex items-center p-4 border-b border-gray-3">
            <div class="flex-1 flex items-center gap-3">
                <img src="/static/assets/heroicons/outline/magnifying-glass.svg" class="w-5 h-5 text-dark-5" alt="搜索">
                <input x-model="searchTerm" 
                       x-ref="searchInput"
                       @input.debounce.300ms="search()"
                       @keydown.enter="if(searchTerm.trim()) { window.location.href='/zh-hans/search/?q=' + encodeURIComponent(searchTerm); close(); }"
                       type="search" 
                       class="w-full border-0 bg-transparent text-dark placeholder-dark-5 focus:ring-0 text-body-medium p-0 search-input-no-cancel"
                       placeholder="搜索产品、解决方案、技术文档...">
                <button x-show="searchTerm" @click="searchTerm = ''" class="text-dark-5 hover:text-dark">
                    <img src="/static/assets/heroicons/outline/x-mark.svg" class="w-5 h-5" alt="清空">
                </button>
            </div>

            <button @click="close()" class="text-dark-5 hover:text-dark p-1 block sm:hidden">
                取消
            </button>
        </div>
        
        <!-- 搜索结果 -->
        <div class="overflow-y-auto max-h-[50vh] md:max-h-[60vh]">
            <div x-show="isLoading" class="flex items-center justify-center py-10">
                <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
            </div>
            
            <div x-show="!isLoading && searchResults.length === 0 && searchTerm.length > 0" class="py-10 text-center text-dark-5 text-body-medium">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mx-auto mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                未找到匹配的内容
            </div>
            
            <ul x-show="!isLoading && searchResults.length > 0" class="divide-y divide-gray-3">
                <template x-for="result in searchResults" :key="result.link">
                    <li class="p-4 hover:bg-gray-2">
                        <a :href="result.link" class="block" @click="close()">
                            <h5 class="text-xl font-semibold mb-1 text-dark" x-html="highlightKeyword(result.title)"></h5>
                            <p x-show="result.notes" class="text-body-small text-primary-text mb-1" x-html="highlightKeyword(result.notes)"></p>
                            <span class="text-body-extra-small text-dark-6 truncate block" x-text="formatUrl(result.link)"></span>
                        </a>
                    </li>
                </template>
            </ul>
            
            <div x-show="!isLoading && searchResults.length > 0 && hasMore" class="p-4 text-center">
                <a @click.prevent="window.location.href='/zh-hans/search/?q=' + encodeURIComponent(searchTerm); close();" class="text-primary hover:text-primary-hover text-body-medium font-medium transition-colors cursor-pointer">
                    查看更多结果 →
                </a>
            </div>
        </div>
    </div>
</div>

<script>
function searchModal() {
    return {
        isOpen: false,
        searchTerm: '',
        searchResults: [],
        isLoading: false,
        hasMore: false,
        
        init() {
            this.$watch('isOpen', value => {
                if (value) {
                    // 打开模态框时
                    document.documentElement.classList.add('modal-open');
                    document.body.classList.add('overflow-hidden');
                    
                    // 聚焦搜索输入框
                    this.$nextTick(() => {
                        this.$refs.searchInput.focus();
                    });
                } else {
                    // 关闭模态框时
                    document.documentElement.classList.remove('modal-open');
                    document.body.classList.remove('overflow-hidden');
                    
                    // 重置搜索状态
                    this.searchTerm = '';
                    this.searchResults = [];
                }
            });
        },
        
        toggle() {
            this.isOpen = !this.isOpen;
        },
        
        close() {
            this.isOpen = false;
        },
        
        async search() {
            if (!this.searchTerm || this.searchTerm.length < 2) {
                this.searchResults = [];
                return;
            }
            
            this.isLoading = true;
            
            try {
                const response = await fetch(`/zh-hans/api/search/?q=${encodeURIComponent(this.searchTerm)}&limit=5`);
                if (!response.ok) throw new Error('搜索请求失败');
                
                const data = await response.json();
                this.searchResults = data.results;
                this.hasMore = data.has_more;
            } catch (error) {
                console.error('搜索出错:', error);
                this.searchResults = [];
                this.hasMore = false;
            } finally {
                this.isLoading = false;
            }
        },
        
        detectLanguage(text) {
            // 检测是否包含中文字符
            const chinesePattern = /[\u4e00-\u9fff\u3400-\u4dbf\uf900-\ufaff]/;
            return chinesePattern.test(text) ? 'zh' : 'en';
        },
        
        highlightKeyword(text) {
            if (!text || !this.searchTerm) return text;
            
            // 检测搜索词语言
            const language = this.detectLanguage(this.searchTerm);
            
            let terms = [];
            
            if (language === 'zh') {
                // 中文搜索词处理
                // 使用完整关键词
                terms.push(this.searchTerm);
                
                // 如果关键词较长，也可以考虑按字拆分
                if (this.searchTerm.length > 2) {
                    // 分解成单字（用于中文）
                    for (const char of this.searchTerm) {
                        if (char.trim().length > 0) {
                            terms.push(char);
                        }
                    }
                }
            } else {
                // 英文搜索词按空格拆分
                terms = this.searchTerm.toLowerCase().split(/\s+/);
                if (!terms.length) {
                    terms.push(this.searchTerm.toLowerCase());
                }
            }
            
            let result = text;
            
            // 先高亮完整的搜索词（优先级最高）
            const escapedFullTerm = this.searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
            const fullRegex = new RegExp(escapedFullTerm, 'gi');
            result = result.replace(fullRegex, match => `<span class="bg-yellow-200">${match}</span>`);
            
            // 然后高亮各个单词/字符
            terms.forEach(term => {
                if (term && term !== this.searchTerm) { // 避免重复高亮完整关键词
                    const escapedTerm = term.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
                    const regex = new RegExp(escapedTerm, 'gi');
                    result = result.replace(regex, match => `<span class="bg-yellow-200">${match}</span>`);
                }
            });
            
            return result;
        },
        
        formatUrl(url) {
            // 获取域名和路径
            const host = window.location.host;
            return `${window.location.protocol}//${host}${url}`;
        }
    };
}
</script>

<!-- 确保在您的base.html中已经引入了Alpine.js -->
<script>
// 确保在移动设备上正确处理页面导航
document.addEventListener('DOMContentLoaded', function() {
    // 设置语言切换链接
    try {
        const path = window.location.href.match(/\/(zh-hans|en)\/(.*)/);
        if (path && path.length >= 3) {
            const langPath = path[2];
            document.querySelectorAll('.language-link').forEach((link) => {
                // 保留原始链接的语言代码部分，但更新后面的路径
                const langCode = link.getAttribute('href').replace(/^\/([^\/]+)\/.*$/, '/$1/');
                link.href = langCode + langPath;
            });
        }
    } catch (e) {
        console.error('语言链接设置失败:', e);
    }
    
    // 初始化下拉菜单位置
    updateDropdownPosition();
});

// 更新下拉菜单位置的函数
function updateDropdownPosition() {
    const navbar = document.getElementById('main-navbar');
    const dropdowns = document.querySelectorAll('.dropdown-menu');
    
    if (navbar && dropdowns.length) {
        const navbarHeight = navbar.offsetHeight;
        const navbarTop = navbar.getBoundingClientRect().top;
        
        dropdowns.forEach(dropdown => {
            dropdown.style.top = `${navbarTop + navbarHeight}px`;
        });
    }
}

// 在滚动和resize时更新位置
window.addEventListener('scroll', updateDropdownPosition);
window.addEventListener('resize', updateDropdownPosition);

// Alpine.js 初始化后移除隐藏类的脚本
document.addEventListener('alpine:initialized', () => {
    // 找到所有带有 hidden-initially 类的元素并移除该类
    document.querySelectorAll('.hidden-initially').forEach(el => {
        el.classList.remove('hidden-initially');
    });
    
    // 初始化下拉菜单位置
    updateDropdownPosition();
});
</script>

    
<section class="section-layout-1">
  <div class="flex flex-col items-center mb-16">
    <h1 class="text-h2 mb-2 text-center">木瓜科技新闻中心</h1>
    <h6 class="max-w-[600px] text-center">最新的行业新闻、公司动态和客户案例。</h6>
  </div>

  <!-- 主要新闻卡片 -->
  
  <div class="w-full overflow-hidden rounded-4xl bg-white shadow-5 hover:shadow-lg transition duration-300 mb-16">
    <a href="/zh-hans/news/article/2025-06-20-what-is-digitally-variable-directional-microphone/" class="block">
      <div class="flex flex-col md:flex-col lg:flex-row h-auto md:h-[741px] lg:h-auto">
        <!-- 左侧图片区域 (比例2:1) -->
        <div class="relative lg:w-2/3 md:flex-shrink md:overflow-hidden lg:h-auto">
          <div class="transform transition-transform duration-500 hover:scale-105">
            
            <img src="/media/news_covers/Linkedin_Post_DVDM_cover.jpg" class="w-full h-full object-cover lg:aspect-[4/3]" alt="什么是数字可变指向麦克风？">
            
          </div>
        </div>

        <!-- 右侧内容区域 -->
        <div class="lg:w-1/3 p-8 flex flex-col justify-between md:flex-shrink-0">
          <!-- 日期和标签 - 桌面端 -->
          <div class="hidden md:flex items-center mb-3 lg:mb-0">
            <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
              <p class="text-body-small sm:text-body-small text-body-extra-small">博客</p>
            </div>
            <small class="text-body-extra-small sm:text-body-small text-dark-4">
              
              <time datetime="">六月 20, 2025</time>
              
            </small>
          </div>

          <!-- 中间内容区域 -->
          <div class="flex flex-col gap-2">
            <!-- 标题 -->
            <h4 class="font-bold">什么是数字可变指向麦克风？</h4>
            
            <!-- 描述 -->
            
            <p class="text-body-small sm:text-body-medium text-dark-4">
              了解数字可变指向麦克风如何通过波束成形技术，实现全频段一致指向性和实时调整能力，为会议、医疗和内容创作领域带来高质量音频解决方案。
            </p>
            
          </div>

          <!-- 日期和标签 - 移动端 -->
          <div class="flex md:hidden items-center mt-4">
            <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
              <p class="text-body-extra-small sm:text-body-small">博客</p>
            </div>
            <small class="text-body-extra-small sm:text-body-small text-dark-4">
              
              <time datetime="">六月 20, 2025</time>
              
            </small>
          </div>

          <!-- Read More 按钮 -->
          <div class="mt-6 lg:mt-0 hidden lg:block">
            <span class="inline-block rounded-md bg-secondary text-white font-medium px-7 py-2 hover:bg-opacity-90 transition">
              阅读更多
            </span>
          </div>
        </div>
      </div>
    </a>
  </div>
  

  <!-- 根据页码选择不同的布局 -->
  
    
      <!-- 第二页及以后使用网格布局 -->
      

<div class="w-full">
  <!-- 引入筛选栏模板 -->
  

<!-- 新闻分类筛选栏 - 横向滚动 -->
<div class="relative mb-8 font-bold">
  <div id="news-categories" class="flex whitespace-nowrap overflow-x-auto scrollbar-hide gap-2">
    <a href="/zh-hans/news/" 
       class="rounded-full px-4 py-1 text-body-medium font-semibold transition inline-block bg-secondary-hover text-white">
      全部
    </a>
    
    <a href="/zh-hans/news/category/company/" 
       class="rounded-full px-4 py-1 text-body-medium font-semibold transition inline-block bg-gray-25 text-dark hover:bg-secondary-hover hover:text-white">
      公司动态
    </a>
    
    <a href="/zh-hans/news/category/blog/" 
       class="rounded-full px-4 py-1 text-body-medium font-semibold transition inline-block bg-gray-25 text-dark hover:bg-secondary-hover hover:text-white">
      博客
    </a>
    
    <a href="/zh-hans/news/category/case-studies/" 
       class="rounded-full px-4 py-1 text-body-medium font-semibold transition inline-block bg-gray-25 text-dark hover:bg-secondary-hover hover:text-white">
      客户案例
    </a>
    
    <a href="/zh-hans/news/category/release/" 
       class="rounded-full px-4 py-1 text-body-medium font-semibold transition inline-block bg-gray-25 text-dark hover:bg-secondary-hover hover:text-white">
      发布
    </a>
    
    <a href="/zh-hans/news/category/press/" 
       class="rounded-full px-4 py-1 text-body-medium font-semibold transition inline-block bg-gray-25 text-dark hover:bg-secondary-hover hover:text-white">
      媒体报道
    </a>
    
  </div>
</div>

<style>
  /* 隐藏滚动条但保持可滚动性 */
  .scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;     /* Firefox */
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none;  /* Chrome, Safari, Opera */
  }
</style> 

  
  <!-- 桌面布局(lg及以上) -->
  <div class="hidden lg:block">
    <!-- 网格布局: 12个卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-16">
      
        


<div class="h-full card-animation-0">
  <a href="/zh-hans/news/article/NTER_AUDIO_2023/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/%E5%B1%95%E6%9D%BF_B%E5%8C%BAB3_%E6%9C%A8%E7%93%9C%E7%A7%91%E6%8A%80.jpg" class="w-full h-full object-cover" alt="“音联世界 声成未来”——木瓜科技携手声学楼精彩亮相INTER-AUDIO 2023">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">“音联世界 声成未来”——木瓜科技携手声学楼精彩亮相INTER-AUDIO 2023</h6>
          
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">公司动态</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">十二月 13, 2023</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/zh-hans/news/article/MQA__PawPaw/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/640_2.jpg" class="w-full h-full object-cover" alt="MQA与PawPaw木瓜电子达成战略合作伙伴关系">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">MQA与PawPaw木瓜电子达成战略合作伙伴关系</h6>
          
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">公司动态</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">十二月 02, 2023</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/zh-hans/news/article/PXU316-LA-7MIC/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/IMG_4373.jpg" class="w-full h-full object-cover" alt="PXU316-LA-7MIC 无感本地扩音方案介绍">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">PXU316-LA-7MIC 无感本地扩音方案介绍</h6>
          
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">发布</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">十一月 30, 2023</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/zh-hans/news/article/XVF_3800/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/XCore_Cover.jpg" class="w-full h-full object-cover" alt="新一代XMOS会议四麦方案主控芯片 XVF3800">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">新一代XMOS会议四麦方案主控芯片 XVF3800</h6>
          
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">发布</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">十一月 14, 2023</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/zh-hans/news/article/PXVF3800-KIT/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/IMG_4467_%E5%B0%8F.png" class="w-full h-full object-cover" alt="PXVF3800-KIT 四麦语音会议方案">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">PXVF3800-KIT 四麦语音会议方案</h6>
          
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">发布</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">十一月 04, 2023</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/zh-hans/news/article/Technical_Seminar/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/%E6%9C%A8%E7%93%9C%E7%A7%91%E6%8A%80xXMOSbanner_seminar.png" class="w-full h-full object-cover" alt="XMOS 产品团队与木瓜科技深度交流，探索技术升级方向">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">XMOS 产品团队与木瓜科技深度交流，探索技术升级方向</h6>
          
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">公司动态</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">十月 12, 2023</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/zh-hans/news/article/XMOS-NEWS/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/static/images/placeholder.webp" class="w-full h-full object-cover" alt="Default Image">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">XMOS strengthens its position in voice interfaces for smart things</h6>
          
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">公司动态</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">九月 06, 2023</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/zh-hans/news/article/XVF3800/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/3a5194cc-c478-11ed-8d3a-00163e1eb85a.png" class="w-full h-full object-cover" alt="XMOS推出XVF3800：广泛应用于不同领域的高性能语音处理器">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">XMOS推出XVF3800：广泛应用于不同领域的高性能语音处理器</h6>
          
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">公司动态</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">八月 10, 2023</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/zh-hans/news/article/xmos-announces-low-cost-low-power-alpr-reference-design-for-smart-parking/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/static/images/placeholder.webp" class="w-full h-full object-cover" alt="Default Image">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">XMOS发布用于智能停车的低成本、低功耗ALPR参考设计</h6>
          
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">公司动态</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">八月 10, 2023</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/zh-hans/news/article/RISC-V_Ecosystem/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/XCore_Cover_unC2ePc.jpg" class="w-full h-full object-cover" alt="XMOS 新一代Xcore架构加入RISC-V生态系">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">XMOS 新一代Xcore架构加入RISC-V生态系</h6>
          
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">公司动态</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">七月 28, 2023</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/zh-hans/news/article/Xmos_visit/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/%E6%9C%A8%E7%93%9C%E7%A7%91%E6%8A%80xXMOSbanner_seminar_kQw1Gko.png" class="w-full h-full object-cover" alt="携手未来，为音频领域创造长期价值——木瓜科技与XMOS强强联合，共赢合作">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">携手未来，为音频领域创造长期价值——木瓜科技与XMOS强强联合，共赢合作</h6>
          
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">公司动态</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">七月 18, 2023</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/zh-hans/news/article/P3610-2MIC/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/3610_%E6%B5%8B%E8%AF%95%E6%8A%A5%E5%91%8A%E8%A1%A5%E5%85%85%E5%90%8E.002.jpeg" class="w-full h-full object-cover" alt="P3610-2MIC 测试报告">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">P3610-2MIC 测试报告</h6>
          
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">公司动态</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">五月 19, 2023</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
    </div>
  </div>

  <!-- 平板布局(md屏幕) -->
  <div class="hidden md:block lg:hidden">
    <!-- 网格布局 -->
    <div class="grid grid-cols-2 gap-x-8 gap-y-16">
      
        


<div class="h-full card-animation-0">
  <a href="/zh-hans/news/article/NTER_AUDIO_2023/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/%E5%B1%95%E6%9D%BF_B%E5%8C%BAB3_%E6%9C%A8%E7%93%9C%E7%A7%91%E6%8A%80.jpg" class="w-full h-full object-cover" alt="“音联世界 声成未来”——木瓜科技携手声学楼精彩亮相INTER-AUDIO 2023">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">“音联世界 声成未来”——木瓜科技携手声学楼精彩亮相INTER-AUDIO 2023</h6>
          
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">公司动态</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">十二月 13, 2023</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/zh-hans/news/article/MQA__PawPaw/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/640_2.jpg" class="w-full h-full object-cover" alt="MQA与PawPaw木瓜电子达成战略合作伙伴关系">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">MQA与PawPaw木瓜电子达成战略合作伙伴关系</h6>
          
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">公司动态</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">十二月 02, 2023</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/zh-hans/news/article/PXU316-LA-7MIC/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/IMG_4373.jpg" class="w-full h-full object-cover" alt="PXU316-LA-7MIC 无感本地扩音方案介绍">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">PXU316-LA-7MIC 无感本地扩音方案介绍</h6>
          
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">发布</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">十一月 30, 2023</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/zh-hans/news/article/XVF_3800/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/XCore_Cover.jpg" class="w-full h-full object-cover" alt="新一代XMOS会议四麦方案主控芯片 XVF3800">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">新一代XMOS会议四麦方案主控芯片 XVF3800</h6>
          
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">发布</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">十一月 14, 2023</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/zh-hans/news/article/PXVF3800-KIT/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/IMG_4467_%E5%B0%8F.png" class="w-full h-full object-cover" alt="PXVF3800-KIT 四麦语音会议方案">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">PXVF3800-KIT 四麦语音会议方案</h6>
          
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">发布</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">十一月 04, 2023</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/zh-hans/news/article/Technical_Seminar/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/%E6%9C%A8%E7%93%9C%E7%A7%91%E6%8A%80xXMOSbanner_seminar.png" class="w-full h-full object-cover" alt="XMOS 产品团队与木瓜科技深度交流，探索技术升级方向">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">XMOS 产品团队与木瓜科技深度交流，探索技术升级方向</h6>
          
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">公司动态</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">十月 12, 2023</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/zh-hans/news/article/XMOS-NEWS/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/static/images/placeholder.webp" class="w-full h-full object-cover" alt="Default Image">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">XMOS strengthens its position in voice interfaces for smart things</h6>
          
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">公司动态</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">九月 06, 2023</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/zh-hans/news/article/XVF3800/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/3a5194cc-c478-11ed-8d3a-00163e1eb85a.png" class="w-full h-full object-cover" alt="XMOS推出XVF3800：广泛应用于不同领域的高性能语音处理器">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">XMOS推出XVF3800：广泛应用于不同领域的高性能语音处理器</h6>
          
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">公司动态</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">八月 10, 2023</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/zh-hans/news/article/xmos-announces-low-cost-low-power-alpr-reference-design-for-smart-parking/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/static/images/placeholder.webp" class="w-full h-full object-cover" alt="Default Image">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">XMOS发布用于智能停车的低成本、低功耗ALPR参考设计</h6>
          
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">公司动态</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">八月 10, 2023</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/zh-hans/news/article/RISC-V_Ecosystem/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/XCore_Cover_unC2ePc.jpg" class="w-full h-full object-cover" alt="XMOS 新一代Xcore架构加入RISC-V生态系">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">XMOS 新一代Xcore架构加入RISC-V生态系</h6>
          
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">公司动态</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">七月 28, 2023</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/zh-hans/news/article/Xmos_visit/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/%E6%9C%A8%E7%93%9C%E7%A7%91%E6%8A%80xXMOSbanner_seminar_kQw1Gko.png" class="w-full h-full object-cover" alt="携手未来，为音频领域创造长期价值——木瓜科技与XMOS强强联合，共赢合作">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">携手未来，为音频领域创造长期价值——木瓜科技与XMOS强强联合，共赢合作</h6>
          
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">公司动态</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">七月 18, 2023</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/zh-hans/news/article/P3610-2MIC/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/3610_%E6%B5%8B%E8%AF%95%E6%8A%A5%E5%91%8A%E8%A1%A5%E5%85%85%E5%90%8E.002.jpeg" class="w-full h-full object-cover" alt="P3610-2MIC 测试报告">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">P3610-2MIC 测试报告</h6>
          
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">公司动态</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">五月 19, 2023</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
    </div>
  </div>

  <!-- 移动端布局(sm及以下) -->
  <div class="block md:hidden">
    <!-- 网格布局 -->
    <div class="grid grid-cols-1 gap-x-8 gap-y-8">
      
        


<div class="h-full card-animation-0">
  <a href="/zh-hans/news/article/NTER_AUDIO_2023/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/%E5%B1%95%E6%9D%BF_B%E5%8C%BAB3_%E6%9C%A8%E7%93%9C%E7%A7%91%E6%8A%80.jpg" class="w-full h-full object-cover" alt="“音联世界 声成未来”——木瓜科技携手声学楼精彩亮相INTER-AUDIO 2023">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">“音联世界 声成未来”——木瓜科技携手声学楼精彩亮相INTER-AUDIO 2023</h6>
          
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">公司动态</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">十二月 13, 2023</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/zh-hans/news/article/MQA__PawPaw/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/640_2.jpg" class="w-full h-full object-cover" alt="MQA与PawPaw木瓜电子达成战略合作伙伴关系">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">MQA与PawPaw木瓜电子达成战略合作伙伴关系</h6>
          
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">公司动态</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">十二月 02, 2023</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/zh-hans/news/article/PXU316-LA-7MIC/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/IMG_4373.jpg" class="w-full h-full object-cover" alt="PXU316-LA-7MIC 无感本地扩音方案介绍">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">PXU316-LA-7MIC 无感本地扩音方案介绍</h6>
          
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">发布</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">十一月 30, 2023</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/zh-hans/news/article/XVF_3800/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/XCore_Cover.jpg" class="w-full h-full object-cover" alt="新一代XMOS会议四麦方案主控芯片 XVF3800">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">新一代XMOS会议四麦方案主控芯片 XVF3800</h6>
          
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">发布</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">十一月 14, 2023</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/zh-hans/news/article/PXVF3800-KIT/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/IMG_4467_%E5%B0%8F.png" class="w-full h-full object-cover" alt="PXVF3800-KIT 四麦语音会议方案">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">PXVF3800-KIT 四麦语音会议方案</h6>
          
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">发布</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">十一月 04, 2023</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/zh-hans/news/article/Technical_Seminar/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/%E6%9C%A8%E7%93%9C%E7%A7%91%E6%8A%80xXMOSbanner_seminar.png" class="w-full h-full object-cover" alt="XMOS 产品团队与木瓜科技深度交流，探索技术升级方向">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">XMOS 产品团队与木瓜科技深度交流，探索技术升级方向</h6>
          
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">公司动态</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">十月 12, 2023</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/zh-hans/news/article/XMOS-NEWS/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/static/images/placeholder.webp" class="w-full h-full object-cover" alt="Default Image">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">XMOS strengthens its position in voice interfaces for smart things</h6>
          
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">公司动态</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">九月 06, 2023</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/zh-hans/news/article/XVF3800/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/3a5194cc-c478-11ed-8d3a-00163e1eb85a.png" class="w-full h-full object-cover" alt="XMOS推出XVF3800：广泛应用于不同领域的高性能语音处理器">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">XMOS推出XVF3800：广泛应用于不同领域的高性能语音处理器</h6>
          
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">公司动态</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">八月 10, 2023</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/zh-hans/news/article/xmos-announces-low-cost-low-power-alpr-reference-design-for-smart-parking/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/static/images/placeholder.webp" class="w-full h-full object-cover" alt="Default Image">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">XMOS发布用于智能停车的低成本、低功耗ALPR参考设计</h6>
          
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">公司动态</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">八月 10, 2023</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/zh-hans/news/article/RISC-V_Ecosystem/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/XCore_Cover_unC2ePc.jpg" class="w-full h-full object-cover" alt="XMOS 新一代Xcore架构加入RISC-V生态系">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">XMOS 新一代Xcore架构加入RISC-V生态系</h6>
          
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">公司动态</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">七月 28, 2023</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/zh-hans/news/article/Xmos_visit/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/%E6%9C%A8%E7%93%9C%E7%A7%91%E6%8A%80xXMOSbanner_seminar_kQw1Gko.png" class="w-full h-full object-cover" alt="携手未来，为音频领域创造长期价值——木瓜科技与XMOS强强联合，共赢合作">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">携手未来，为音频领域创造长期价值——木瓜科技与XMOS强强联合，共赢合作</h6>
          
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">公司动态</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">七月 18, 2023</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/zh-hans/news/article/P3610-2MIC/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/3610_%E6%B5%8B%E8%AF%95%E6%8A%A5%E5%91%8A%E8%A1%A5%E5%85%85%E5%90%8E.002.jpeg" class="w-full h-full object-cover" alt="P3610-2MIC 测试报告">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">P3610-2MIC 测试报告</h6>
          
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">公司动态</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">五月 19, 2023</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
    </div>
  </div>
  

  <!-- 分页控件 -->
  


<!-- 分页控件 -->

<div class="flex justify-center mt-12">
  <nav class="flex items-center">
    
      <a href="?page=2#news-categories" 
         class="w-9 h-9 rounded-full flex items-center justify-center duration-300 transition hover:bg-transparent-light-hover mr-4">
        <img src="/static/assets/heroicons/outline/chevron-left.svg" class="w-5 h-5 text-dark-6" alt="上一页">
      </a>
    
    
    <div class="flex gap-1">
    
      
        <a href="?page=1#news-categories" 
           class="w-9 h-9 p-[10px] rounded-full text-body-small flex items-center justify-center transition hover:bg-transparent-light-hover active:bg-transparent-light-active">1</a>
      
    
      
        <a href="?page=2#news-categories" 
           class="w-9 h-9 p-[10px] rounded-full text-body-small flex items-center justify-center transition hover:bg-transparent-light-hover active:bg-transparent-light-active">2</a>
      
    
      
        <span class="w-9 h-9 p-[10px] rounded-full bg-transparent-light text-body-small flex items-center justify-center">3</span>
      
    
      
        <a href="?page=4#news-categories" 
           class="w-9 h-9 p-[10px] rounded-full text-body-small flex items-center justify-center transition hover:bg-transparent-light-hover active:bg-transparent-light-active">4</a>
      
    
    </div>
    
    
      <a href="?page=4#news-categories" 
         class="w-9 h-9 rounded-full flex items-center justify-center duration-300 transition hover:bg-transparent-light-hover ml-4">
        <img src="/static/assets/heroicons/outline/chevron-right.svg" class="w-5 h-5 text-dark-6" alt="下一页">
      </a>
    
  </nav>
</div>
 
</div> 
    
  
</section>


    

    <div
        class="w-full relative bg-black h-auto overflow-hidden shrink-0 flex flex-col items-start justify-start box-border gap-4 sm:gap-5 text-left text-body-small text-white font-body-extra-small">
        <div class="max-w-[1440px] w-full mx-auto px-4 sm:px-6 md:px-12 py-6 sm:py-8 md:py-12">
            <div class="grid grid-cols-1 md:grid-cols-10 self-stretch flex-1 items-start justify-between">
                <div class="col-span-1 md:col-span-4 self-stretch h-auto sm:h-[200px] md:h-[272px] overflow-hidden shrink-0 flex flex-col items-start justify-between">
                    <div class="flex flex-col items-start justify-start gap-2 sm:gap-3">
                        <img class="w-[150px] sm:w-[180px] md:w-[211px] relative h-4 sm:h-5 md:h-6 overflow-hidden shrink-0" alt="" src="/static/assets/company_logo_srgb.svg">

                        <div class="text-body-small font-medium">让高端音质触手可及 </div>
                    </div>
                    <div class="flex flex-col items-start justify-start gap-2 sm:gap-3 text-body-extra-small sm:text-body-extra-small mt-6 md:mt-0">
                        <div class="w-[280px] hidden flex-col items-start justify-start gap-2">
                            <div class="text-body-extra-small font-medium">订阅最新资讯</div>
                            <div class="w-full sm:w-[200px] md:w-[250px] flex flex-col items-start justify-start text-dark-5">
                                <div class="self-stretch flex flex-col items-start justify-start">
                                    <div
                                        class="self-stretch rounded-lg bg-transparency h-7 sm:h-8 md:h-9 flex flex-row items-center justify-start py-2 px-3 box-border">
                                        <div class="flex-1 flex flex-row items-center justify-between">
                                            <div class="text-body-small font-medium">您的邮箱地址</div>
                                            <img class="w-3 sm:w-4 relative h-3 sm:h-4 overflow-hidden shrink-0" alt=""
                                                src="/static/assets/heroicons/outline/envelope.svg">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="relative flex flex-row items-center justify-start gap-2 sm:gap-3">
                            <a href="https://www.linkedin.com/company/pawpaw-technology/?viewAsMember=true" target="_blank">
                                <img class="w-4 sm:w-5 relative h-4 sm:h-5 overflow-hidden shrink-0" alt="" src="/static/assets/images/media_icons/Linkedin.svg">
                            </a>
                            <a href="https://www.youtube.com/@Pawpaw-Technology" target="_blank">
                                <img class="w-4 sm:w-5 relative h-4 sm:h-5 overflow-hidden shrink-0" alt="" src="/static/assets/images/media_icons/Youtube.svg">
                            </a>
                            <!-- WeChat QR Component -->
                            


<!-- WeChat QR Component - 可重用的微信二维码组件 -->
<div x-data="{ showQr: false }" class="relative ">
    <!-- 触发器 - 支持图标和文字两种模式 -->
    
        <!-- 图标模式 - 用于footer等场景 -->
        <img 
            @click.prevent="showQr = true; $dispatch('wechat-modal')"
            class="w-4 sm:w-5 relative h-4 sm:h-5 overflow-hidden shrink-0 cursor-pointer" 
            alt="" src="/static/assets/images/media_icons/wechat.svg"
        >
    
    
    <!-- Desktop QR popup - only visible on md and above -->
    <div 
        x-show="showQr"
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0 translate-y-2"
        x-transition:enter-end="opacity-100 translate-y-0"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100 translate-y-0"
        x-transition:leave-end="opacity-0 translate-y-2"
        @click.outside="showQr = false"
        
            @mouseleave="showQr = false"
        
        class="absolute bottom-full mb-2 md:bottom-full md:top-auto md:mb-2 md:mt-0 left-1/2 -translate-x-1/2 w-28 h-28 p-1 bg-white rounded-md shadow-lg border border-gray-300 z-20 hidden md:block"
    >
        <img class="w-full h-full object-contain" src="/static/assets/images/footer/wechat.jpg" alt="WeChat QR Code">
    </div>
</div>


<!-- Mobile QR Modal with overlay - only visible on smaller than md -->
<!-- 只在指定需要创建移动端弹窗的组件实例中生成此元素 -->
<div 
    x-data="{ showMobileQr: false }"
    x-show="showMobileQr" 
    x-on:wechat-modal.window="showMobileQr = true"
    x-cloak
    class="fixed inset-0 bg-black/80 z-50 flex items-center justify-center md:hidden"
    x-transition:enter="transition ease-out duration-300"
    x-transition:enter-start="opacity-0"
    x-transition:enter-end="opacity-100"
    x-transition:leave="transition ease-in duration-200"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0"
    @click="showMobileQr = false"
>
    <div class="bg-white p-4 rounded-lg max-w-[80%] flex flex-col items-center relative" @click.stop>
        <!-- 关闭按钮 -->
        <button 
            @click="showMobileQr = false"
            class="absolute top-1 right-1 w-8 h-8 flex items-center justify-center text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full transition-colors duration-200"
        >
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
            </svg>
        </button>
        
        <img class="w-64 h-64 object-contain" src="/static/assets/images/footer/wechat.jpg" alt="WeChat QR Code">
        <p class="text-black text-center mt-4 text-body-small font-medium">扫码关注我们的微信公众号</p>
    </div>
</div>
 
                        </div>
                        <div class="text-body-extra-small font-medium text-neutral-400 whitespace-pre-wrap">© 2025 木瓜科技. 版权所有. </div>
                    </div>
                </div>
                
                <!-- 桌面端导航菜单 - 只在md及以上显示 -->
                <div
                    class="col-span-1 md:col-span-6 grid-cols-2 sm:grid-cols-4 self-stretch overflow-hidden shrink-0 items-start justify-end gap-6 sm:gap-8 text-body-small sm:text-body-medium mt-6 md:mt-0 hidden md:grid">
                    <div
                        class="col-span-1 self-stretch w-full sm:w-auto md:w-[160px] overflow-hidden shrink-0 flex flex-col items-start justify-start gap-2 sm:gap-3">
                        <div class="text-body-small text-body-medium font-medium">公司</div>
                        <div class="flex flex-col items-start justify-start gap-1 text-body-small text-neutral-400">
                            <a href="/zh-hans/about/" class="text-body-small font-medium">关于我们</a>
                            <a href="/zh-hans/support/" class="text-body-small font-medium">联系我们</a>
                        </div>
                    </div>
                    <div
                        class="col-span-1 self-stretch w-full sm:w-auto md:w-[160px] overflow-hidden shrink-0 flex flex-col items-start justify-start gap-2 sm:gap-3">
                        <div class="text-body-small text-body-medium font-medium">解决方案</div>
                        <div class="flex flex-col items-start justify-start gap-1 text-body-small text-neutral-400">
                            <a href="/zh-hans/solutions/#消费类产品" class="text-body-small font-medium">消费类产品</a>
                            <a href="/zh-hans/solutions/#专业音频" class="text-body-small font-medium">专业音频</a>
                            <a href="/zh-hans/solutions/#语音接口" class="text-body-small font-medium">语音接口</a>
                        </div>
                    </div>
                    <div
                        class="col-span-1 self-stretch w-full sm:w-auto md:w-[160px] overflow-hidden shrink-0 flex flex-col items-start justify-start gap-2 sm:gap-3">
                        <div class="text-body-small text-body-medium font-medium">应用场景</div>
                        <div class="flex flex-col items-start justify-start gap-1 text-body-small text-neutral-400">
                            <a href="/zh-hans/applications/conference-meeting/" class="text-body-small font-medium">会议系统</a>
                            <a href="/zh-hans/applications/live-streaming/" class="text-body-small font-medium">直播</a>
                        </div>
                    </div>
                    <div
                        class="col-span-1 self-stretch w-full sm:w-auto md:w-[160px] overflow-hidden shrink-0 flex flex-col items-start justify-start gap-2 sm:gap-3">
                        <div class="text-body-small text-body-medium font-medium">媒体中心</div>
                        <div class="flex flex-col items-start justify-start gap-1 text-body-small text-neutral-400">
                            <a href="/zh-hans/news/" class="text-body-small font-medium">新闻中心</a>
                            <a href="/zh-hans/news/category/blog/" class="text-body-small font-medium">博客</a>
                        </div>
                    </div>
                </div>
                
                <!-- 移动端折叠式导航菜单 - 只在小于md尺寸时显示 -->
                <div class="col-span-1 w-full md:hidden mt-6" x-data="{ activeTab: null }">
                    <div class="flex flex-col items-start justify-start gap-2">
                        <!-- Company 折叠项 -->
                        <div class="w-full">
                            <div 
                                class="text-body-small text-body-medium font-medium w-full flex justify-between items-center cursor-pointer py-2"
                                @click="activeTab = activeTab === 'company' ? null : 'company'"
                            >
                                <span>公司</span>
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 transition-transform duration-200" :class="activeTab === 'company' ? 'rotate-180' : ''">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                                </svg>
                            </div>
                            <div 
                                class="flex flex-col items-left justify-start gap-2 text-body-small text-neutral-400 overflow-hidden transition-all duration-300 ease-in-out px-2"
                                x-ref="companyPanel"
                                x-bind:style="activeTab === 'company' ? 'max-height: ' + $refs.companyPanel.scrollHeight + 'px; opacity: 1; margin-top: 0.5rem; margin-bottom: 0.5rem;' : 'max-height: 0; opacity: 0; margin-top: 0; margin-bottom: 0;'"
                            >
                                <a href="/zh-hans/about/" class="text-body-small font-medium py-1">关于我们</a>
                                <a href="/zh-hans/support/" class="text-body-small font-medium py-1">联系我们</a>
                            </div>
                        </div>
                        
                        <!-- Solutions 折叠项 -->
                        <div class="w-full">
                            <div 
                                class="text-body-small text-body-medium font-medium w-full flex justify-between items-center cursor-pointer py-2"
                                @click="activeTab = activeTab === 'solutions' ? null : 'solutions'"
                            >
                                <span>解决方案</span>
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 transition-transform duration-200" :class="activeTab === 'solutions' ? 'rotate-180' : ''">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                                </svg>
                            </div>
                            <div 
                                class="flex flex-col items-left justify-start gap-2 text-body-small text-neutral-400 overflow-hidden transition-all duration-300 ease-in-out px-2"
                                x-ref="solutionsPanel"
                                x-bind:style="activeTab === 'solutions' ? 'max-height: ' + $refs.solutionsPanel.scrollHeight + 'px; opacity: 1; margin-top: 0.5rem; margin-bottom: 0.5rem;' : 'max-height: 0; opacity: 0; margin-top: 0; margin-bottom: 0;'"
                            >
                                <a href="/zh-hans/solutions/#消费类产品" class="text-body-small font-medium py-1">消费类产品</a>
                                <a href="/zh-hans/solutions/#专业音频" class="text-body-small font-medium py-1">专业音频</a>
                                <a href="/zh-hans/solutions/#语音接口" class="text-body-small font-medium py-1">语音接口</a>
                            </div>
                        </div>
                        
                        <!-- Applications 折叠项 -->
                        <div class="w-full">
                            <div 
                                class="text-body-small text-body-medium font-medium w-full flex justify-between items-center cursor-pointer py-2"
                                @click="activeTab = activeTab === 'applications' ? null : 'applications'"
                            >
                                <span>应用场景</span>
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 transition-transform duration-200" :class="activeTab === 'applications' ? 'rotate-180' : ''">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                                </svg>
                            </div>
                            <div 
                                class="flex flex-col items-left justify-start gap-2 text-body-small text-neutral-400 overflow-hidden transition-all duration-300 ease-in-out px-2"
                                x-ref="applicationsPanel"
                                x-bind:style="activeTab === 'applications' ? 'max-height: ' + $refs.applicationsPanel.scrollHeight + 'px; opacity: 1; margin-top: 0.5rem; margin-bottom: 0.5rem;' : 'max-height: 0; opacity: 0; margin-top: 0; margin-bottom: 0;'"
                            >
                                <a href="/zh-hans/applications/conference-meeting/" class="text-body-small font-medium py-1">会议系统</a>
                                <a href="/zh-hans/applications/live-streaming/" class="text-body-small font-medium py-1">直播</a>
                            </div>
                        </div>
                        
                        <!-- Media 折叠项 -->
                        <div class="w-full">
                            <div 
                                class="text-body-small text-body-medium font-medium w-full flex justify-between items-center cursor-pointer py-2"
                                @click="activeTab = activeTab === 'media' ? null : 'media'"
                            >
                                <span>媒体中心</span>
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 transition-transform duration-200" :class="activeTab === 'media' ? 'rotate-180' : ''">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                                </svg>
                            </div>
                            <div 
                                class="flex flex-col items-left justify-start gap-2 text-body-small text-neutral-400 overflow-hidden transition-all duration-300 ease-in-out px-2"
                                x-ref="mediaPanel"
                                x-bind:style="activeTab === 'media' ? 'max-height: ' + $refs.mediaPanel.scrollHeight + 'px; opacity: 1; margin-top: 0.5rem; margin-bottom: 0.5rem;' : 'max-height: 0; opacity: 0; margin-top: 0; margin-bottom: 0;'"
                            >
                                <a href="/zh-hans/news/" class="text-body-small font-medium py-1">新闻中心</a>
                                <a href="/zh-hans/news/category/blog/" class="text-body-small font-medium py-1">博客</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div
                class="self-stretch border-dimgray border-t-[1px] border-solid box-border h-auto overflow-hidden shrink-0 
                flex flex-col items-start justify-start mt-4 sm:mt-5 pt-3 sm:pt-4 gap-1 md:gap-3 text-neutral-400"
                >
                <div class="w-full flex flex-col md:flex-row items-center justify-between gap-2 md:gap-0">
                    <div class="text-body-extra-small">
                        <a href="/zh-hans/privacy/" class="hover:text-white">隐私政策</a>
                    </div>
                    <div class="flex flex-row items-center justify-start gap-3 mt-2 sm:mt-0">
                        <div class="text-body-extra-small font-medium flex gap-2 text-center">
                            
                            
                            
                            
                            <a href="/zh-hans/" 
                               class="language-link hover:text-white text-nowrap  font-bold text-white ">
                                简体中文
                            </a>
                            
                            <a href="/en/" 
                               class="language-link hover:text-white text-nowrap  text-neutral-400 ">
                                English
                            </a>
                            
                        </div>
                    </div>
                </div>
                <div class="w-full text-neutral-400 text-center sm:text-left">
                    <a class="text-[inherit] text-body-extra-small hover:text-white text-nowrap" href="https://beian.miit.gov.cn/#/Integrated/recordQuery"
                        target="_blank">粤ICP备2021009045号-3</a>
                    <a class="text-[inherit] text-body-extra-small hover:text-white text-nowrap" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44030402005402"
                        target="_blank">粤公网安备 44030402005402号</a>
                </div>
            </div>
        </div>
    </div>

<!-- 语言切换功能脚本 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 设置语言切换链接
    try {
        const path = window.location.href.match(/\/(zh-hans|en)\/(.*)/);
        if (path && path.length >= 3) {
            const langPath = path[2];
            document.querySelectorAll('.language-link').forEach((link) => {
                // 保留原始链接的语言代码部分，但更新后面的路径
                const langCode = link.getAttribute('href').replace(/^\/([^\/]+)\/.*$/, '/$1/');
                link.href = langCode + langPath;
            });
        }
    } catch (e) {
        console.error('页脚语言链接设置失败:', e);
    }
});
</script>

    


<!-- 透明蒙版 - 仅在移动设备上显示 -->
<div x-data="{}"
    x-show="$store.cookieConsent.isVisible"
    @click="$store.cookieConsent.overlayClicked()"
    class="fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden"></div>

<div x-data="cookieConsent"
     x-show="isVisible"
     x-transition:enter="transition ease-out duration-300"
     x-transition:enter-start="opacity-0 transform translate-y-4"
     x-transition:enter-end="opacity-100 transform translate-y-0"
     x-transition:leave="transition ease-in duration-200"
     x-transition:leave-start="opacity-100 transform translate-y-0"
     x-transition:leave-end="opacity-0 transform translate-y-4"
     class="fixed bottom-0 inset-x-0 z-50 p-4 hidden-initially" id="cookie-consent-banner">
    <div class="w-full items-center bg-white rounded-lg shadow-lg border border-gray-200 overflow-hidden max-w-full" @click.stop>
        <div class="p-6 w-full">
            <div class="flex flex-col lg:flex-row lg:items-center gap-4 justify-between w-full">
                <div class="lg:flex-1 lg:pr-8 w-full flex items-center">
                    <p class="text-body-medium text-gray-600">
                        We use cookies to enhance your experience on our website. By clicking "Accept All", you agree to the use of cookies on this website. You can also "Customize" your cookie preferences.
                        <a href="/zh-hans/privacy/" class="text-primary">Privacy Policy</a>
                    </p>
                </div>
                <div class="flex flex-col sm:flex-row w-full sm:w-auto gap-3 mt-4 lg:mt-0 whitespace-nowrap">
                    <button @click="acceptAll" class="bg-primary hover:bg-primary-hover font-semibold text-white py-2 px-4 rounded-full transition-colors w-full sm:w-auto whitespace-nowrap">
                        Accept All
                    </button>
                    <button @click="toggleSettings" class="border border-gray-300 hover:bg-gray-100 font-semibold py-2 px-4 rounded-full transition-colors w-full sm:w-auto whitespace-nowrap">
                        Customize
                    </button>
                    <button @click="close" class="text-gray-500 hover:text-gray-700 hidden md:block">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- Cookie Settings Panel -->
        <div x-show="showSettings" 
             x-collapse 
             class="p-6 flex justify-end">
             <div class="flex flex-col">
                <h4 class="font-bold mb-4">Cookie Settings</h4>
                <div class="space-y-4">
                    <div class="flex items-start">
                        <div class="flex items-center h-6">
                            <input id="necessary-cookies" name="necessary-cookies" type="checkbox" checked disabled
                                class="h-4 w-4 rounded-[6px] border-dark-4 text-primary">
                        </div>
                        <div class="ml-3">
                            <label for="necessary-cookies" class="font-medium">Necessary Cookies</label>
                            <p class="text-body-small text-gray-500">These cookies are required for the website to function and cannot be disabled.</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start">
                        <div class="flex items-center h-6">
                            <input id="analytics-cookies" name="analytics-cookies" type="checkbox" x-model="settings.analytics"
                                class="h-4 w-4 rounded-[6px] border-dark-4 text-primary">
                        </div>
                        <div class="ml-3">
                            <label for="analytics-cookies" class="font-medium">Analytics Cookies</label>
                            <p class="text-body-small text-gray-500">These cookies help us understand how visitors interact with our website.</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start">
                        <div class="flex items-center h-6">
                            <input id="marketing-cookies" name="marketing-cookies" type="checkbox" x-model="settings.marketing"
                                class="h-4 w-4 rounded-[6px] border-dark-4 text-primary">
                        </div>
                        <div class="ml-3">
                            <label for="marketing-cookies" class="font-medium">Marketing Cookies</label>
                            <p class="text-body-small text-gray-500">These cookies are used to track effectiveness of marketing campaigns.</p>
                        </div>
                    </div>
                </div>
                <div class="mt-6">
                    <button @click="saveSettings" class="bg-primary hover:bg-primary-hover text-white py-2 px-4 rounded-md transition-colors">
                        Save Preferences
                    </button>
                </div>
            </div>
        </div>
    </div>
</div> 
    
    <script>
      (() => {
          document.querySelectorAll(".markdown-area table").forEach((table) => table.classList.add("table"));
      })()
    </script>
    
    <!-- 子模板可以在这里添加JavaScript -->
    
  </body>
</html>
