Эх сурвалжийг харах

refactor: 移除未使用的导航链接并优化移动端样式

- 移除桌面端和移动端的"行业解决方案"和"文档中心"导航链接
- 优化移动端Header组件的图标样式和logo尺寸定义
- 调整rem计算脚本的注入方式
reaper 1 сар өмнө
parent
commit
f8ed4fd452

+ 2 - 2
app/components/Header.vue

@@ -44,8 +44,8 @@
           </NuxtLink>
         </div>
       </div>
-      <NuxtLink to="/web/solutions" class="nav-item">行业解决方案</NuxtLink>
-      <NuxtLink to="/web/docs" class="nav-item">文档中心</NuxtLink>
+      <!-- <NuxtLink to="/web/solutions" class="nav-item">行业解决方案</NuxtLink>
+      <NuxtLink to="/web/docs" class="nav-item">文档中心</NuxtLink> -->
       <NuxtLink to="/web/about" class="nav-item">了解我们</NuxtLink>
     </nav>
     <div class="header-right">

+ 11 - 6
app/components/mobile/Header.vue

@@ -2,13 +2,13 @@
   <header class="mb-header">
     <div class="mb-header-container">
       <a href="/mobile" class="brand">
-        <NuxtImg src="/logo.png" alt="DDAC logo" class="brand-logo" width="14" height="14" />
+        <NuxtImg src="/logo.png" alt="DDAC logo" class="brand-logo" />
         <h1 class="brand-title">DDAC</h1>
       </a>
       <div class="mb-header-right">
-        <Icon name="lineicons:magnifier" size="20" />
-        <Icon name="material-symbols:account-circle-full" size="20" />
-        <Icon @click="toggleMenu" name="material-symbols:menu-rounded" size="20" />
+        <Icon name="lineicons:magnifier" />
+        <Icon name="material-symbols:account-circle-full" />
+        <Icon @click="toggleMenu" name="material-symbols:menu-rounded" />
       </div>
     </div>
     <Transition name="nav-expand">
@@ -42,12 +42,12 @@
             </div>
           </Transition>
         </div>
-        <div class="nav-item">
+        <!-- <div class="nav-item">
           <NuxtLink to="/mobile/solutions" @click="closeMenu">行业解决方案</NuxtLink>
         </div>
         <div class="nav-item">
           <NuxtLink to="/mobile/docs" @click="closeMenu">文档中心</NuxtLink>
-        </div>
+        </div> -->
         <div class="nav-item">
           <NuxtLink to="/mobile/about" @click="closeMenu">了解我们</NuxtLink>
         </div>
@@ -106,6 +106,8 @@ const toggleProducts = () => {
   text-decoration: none;
 
   .brand-logo {
+    width: 14px;
+    height: 14px;
     margin-right: 8px;
   }
 
@@ -121,6 +123,9 @@ const toggleProducts = () => {
   align-items: center;
   gap: 20px;
   color: #fff;
+  .iconify{
+    font-size: 20px;
+  }
 }
 
 // Nav 展开动画

+ 25 - 4
app/layouts/mobile.vue

@@ -14,13 +14,34 @@ import Footer from '~/components/mobile/Footer.vue'
 
 const setRem = () => {
   if (!import.meta.client) return
-  const screenWidth = document.documentElement.clientWidth;
-  const baseFontSize = screenWidth / 10;
-  document.documentElement.style.fontSize = baseFontSize + 'px';
+  const screenWidth = document.documentElement.clientWidth
+
+  // if (screenWidth >= TABLET_BREAKPOINT) {
+  //   document.documentElement.style.fontSize = MAX_FONT_SIZE + 'px'
+  //   return
+  // }
+
+  const baseFontSize = screenWidth / 10
+  document.documentElement.style.fontSize = baseFontSize + 'px'
 }
+useHead({
+  script: [
+    {
+      innerHTML: `
+        (function() {
+          var screenWidth = document.documentElement.clientWidth;
+            document.documentElement.style.fontSize = screenWidth / 10 + 'px';
+        })();
+      `,
+      type: 'text/javascript',
+      tagPosition: 'head',
+      key: 'rem-init'
+    }
+  ]
+})
 
 onMounted(() => {
-  setRem()
+  // setRem()
   window.addEventListener('resize', setRem, { passive: true })
 })