feat(mobile): 重构移动端页脚为可折叠导航结构

- 将静态导航内容改为基于数组的动态渲染
- 添加可折叠/展开的交互功能，使用过渡动画
- 新增“安全服务”、“热搜榜单”、“文档中心”等导航板块
- 调整布局和样式以优化移动端显示效果
- 更新联系信息和底部版权区域样式

app/components/mobile/Footer.vue

@@ -5,33 +5,89 @@
         <h2 class="brand-title">DDAC</h2>
       </div>
       <nav class="footer-nav">
-        <div class="nav-column">
-          <h3 class="nav-title">安全产品</h3>
-          <div class="nav-link">SDK安全加速</div>
-          <div class="nav-link">Web安全加速</div>
-          <div class="nav-link">TCP安全加速</div>
-          <div class="nav-link">DNS安全加速</div>
-        </div>
-        <div class="nav-column">
-          <h3 class="nav-title">关于我们</h3>
-          <div class="nav-link">企业简介</div>
-          <div class="nav-link">资质认证</div>
-          <div class="nav-link">法律条款</div>
+        <div v-for="(section, index) in sections" :key="section.title" class="nav-column">
+          <div class="nav-title-row" @click="toggleSection(index)">
+            <h3 class="nav-title">{{ section.title }}</h3>
+            <Icon name="line-md:chevron-down" class="nav-item-icon" :class="{ 'icon-rotated': openSections[index] }" />
+          </div>
+          <Transition name="nav-expand">
+            <div v-show="openSections[index]" class="nav-list">
+              <div v-for="item in section.items" :key="item" class="nav-link">{{ item }}</div>
+            </div>
+          </Transition>
         </div>
       </nav>
+      <div class="footer-section">
+        <span class="section-link">行业解决方案</span>
+      </div>
       <div class="footer-contact">
         <span class="contact-label">联系我们</span>
-        <a href="mailto:support@yundun.com" class="contact-email">support@yundun.com</a>
+        <p class="contact-email">企业邮箱：support@yundun.com</p>
       </div>
       <div class="footer-bottom">
-        <p class="copyright">Copyright@2025 SUYUN, All Rights Reserved</p>
+        <span class="report-link">举报中心</span>
+        <p class="copyright">Copyright@2025 SUYUN,All Rights Reserved</p>
       </div>
     </div>
   </footer>
 </template>
 
 <script setup>
+const sections = [
+  {
+    title: '安全产品',
+    items: [
+      'SDK安全加速（游戏DDoS、CC、WAF防护）',
+      'Web安全加速（网站DDoS、CC、WAF防护）',
+      'TCP安全加速（DDoS防护）',
+      'DNS安全加速（域名解析）'
+    ]
+  },
+  {
+    title: '安全服务',
+    items: [
+      '互联网暴露面检测服务',
+      '渗透测试服务',
+      '安全巡检和加固服务',
+      '重保服务',
+      '其他安全专家服务'
+    ]
+  },
+  {
+    title: '热搜榜单',
+    items: [
+      '零信任安全访问',
+      '出海云主机',
+      'Web网站安全加速',
+      'APP安全加速'
+    ]
+  },
+  {
+    title: '文档中心',
+    items: [
+      '入门指导',
+      '问答专区',
+      '主题',
+      '资讯列表',
+      '关键词'
+    ]
+  },
+  {
+    title: '关于我们',
+    items: [
+      '企业简介',
+      '资质认证',
+      '法律条款',
+      '大事记'
+    ]
+  }
+]
 
+const openSections = ref(sections.map(() => false))
+
+const toggleSection = (index) => {
+  openSections.value[index] = !openSections.value[index]
+}
 </script>
 
 <style scoped lang="scss">
@@ -39,86 +95,134 @@
   width: 100%;
   background-color: #030014;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
-  padding: 40px 16px;
+  padding: 16px;
   margin-top: auto;
+  box-sizing: border-box;
 }
 
 .mobile-footer-container {
-  max-width: 768px;
   margin: 0 auto;
 }
 
 .footer-brand {
-  margin-bottom: 32px;
+  padding-bottom: 16px;
+  position: relative;
 
   .brand-title {
-    
-    font-size: 28px;
+    color: #FFF;
+    font-size: 24px;
     font-weight: 900;
-    color: #ffffff;
-    margin: 0;
+  }
+
+  &::before {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    content: '';
+    width: 100%;
+    height: 1PX;
+    background-color: rgba(255, 255, 255, 0.06);
   }
 }
 
 .footer-nav {
   display: flex;
   flex-direction: column;
-  gap: 32px;
-  margin-bottom: 32px;
 }
 
 .nav-column {
-  .nav-title {
-    
-    font-size: 18px;
-    font-weight: 500;
-    color: #ffffff;
-    margin: 0 0 16px 0;
-  }
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
 
-  .nav-link {
-    
-    font-size: 14px;
-    color: #bdbdbd;
-    margin-bottom: 12px;
-    cursor: pointer;
+.nav-title-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 0;
+  cursor: pointer;
+}
 
-    &:last-child {
-      margin-bottom: 0;
-    }
+.nav-title {
+  color: #DDD;
+  font-size: 18px;
+  font-weight: 400;
+}
 
-    &:hover {
-      color: #ffffff;
-    }
-  }
+.nav-item-icon {
+  width: 18px;
+  height: 18px;
+  color: #fff;
+  transition: transform 0.3s ease;
 }
 
-.footer-contact {
-  margin-bottom: 24px;
+.icon-rotated {
+  transform: rotate(180deg);
+}
+
+.nav-list {
+  padding-bottom: 12px;
+}
+
+.nav-link {
+  font-size: 14px;
+  color: #bdbdbd;
+  margin-bottom: 12px;
+  cursor: pointer;
 
-  .contact-label {
-    display: block;
-    
-    font-size: 16px;
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  &:hover {
     color: #ffffff;
-    margin-bottom: 8px;
   }
+}
 
-  .contact-email {
-    
+.nav-expand-enter-active,
+.nav-expand-leave-active {
+  overflow: hidden;
+  transition: max-height 0.3s ease-out;
+}
+
+.nav-expand-enter-from,
+.nav-expand-leave-to {
+  max-height: 0 !important;
+}
+
+.nav-expand-enter-to,
+.nav-expand-leave-from {
+  max-height: 500px !important;
+}
+
+.footer-section {
+  .section-link {
+    color: #DDD;
     font-size: 14px;
-    color: #bdbdbd;
-    text-decoration: none;
+    font-weight: 400;
   }
 }
 
+.footer-contact {
+  display: flex;
+  gap: 44px;
+  color: #DDD;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+
+}
+
 .footer-bottom {
+  padding: 36px 0 50px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  color: #DDD;
+  font-size: 14px;
+  font-weight: 400;
+
   .copyright {
-    
-    font-size: 12px;
-    color: #666;
-    margin: 0;
-    text-align: center;
+    color: #fff;
   }
 }
 </style>