fix: header头修复

easymoneysniperrr · Oct 27, 2024 · 3099e0f · 3099e0f
1 parent f9041fc
commit 3099e0f
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 27 deletions.
diff --git a/src/views/coderCommunity.vue b/src/views/coderCommunity.vue
@@ -7,6 +7,30 @@
 -->
 <template>
   <div class="coder-community">
+    <header class="w-100% h-68px bg-cover bg-center relative">
+      <!-- 导航栏提高层级 -->
+      <div class="box-border px-40px absolute left-0 top-0 w-full h-64px bg-white bg-op-70 flex flex-row items-center justify-between z-10">
+        <h1 class="text-20px font-500 mb-4px">贵阳贵安鸿蒙城市生态中心</h1>
+        <ul class="flex flex-row items-center justify-between text-16px">
+          <li 
+            class="px-24px cursor-pointer"
+            @click="goToPage('innovation')"
+          >创新中心</li>
+          <li 
+            class="px-24px cursor-pointer text-color-#007CF7"
+            @click="goToPage('developer')"
+          >贵鸿开发者社区</li>
+          <li 
+            class="px-24px cursor-pointer"
+            @click="goToPage('application')"
+          >贵鸿应用中心</li>
+          <li 
+            class="pl-24px cursor-pointer"
+            @click="goToPage('device')"
+          >贵鸿设备中心</li>
+        </ul>
+      </div>
+    </header>
     <section class="banner-area">
       <div class="title" style="color: white;">贵鸿开发者社区</div>
       <div class="des">建立资源共享、技术支持、开放交流的平台，帮助厂商的开发人员提高技能和解决问题，推动贵鸿生态系统建设，促进创新和合作</div>
@@ -102,6 +126,7 @@
 </template>
 
 <script setup>
+import { useRouter } from 'vue-router'
 const morePng = new URL('../assets/images/coder-community/Frame(1).png', import.meta.url).href
 
 const introductPng1 = new URL('../assets/images/coder-community/Frame.png', import.meta.url).href
@@ -157,6 +182,15 @@ const experiences = [
   { title: '视频教程', desc: '系统学习贵鸿OS设备、应用的开发', imgUrl: way3},
   { title: '开发者示例', desc: '快速体验服务教程和开发示例', imgUrl: way4},
 ]
+const router = useRouter()
+const goToPage = (type) => {
+  const routes = {
+    innovation: '/innovationCenter',    // 创新中心路由
+    application: '/appCenter',   // 应用中心路由
+    device: '/deviceCenter'             // 设备中心路由
+  }
+  router.push(routes[type])
+}
 </script>
 
 <style lang="scss">

diff --git a/src/views/innovationCenter.vue b/src/views/innovationCenter.vue
@@ -1,20 +1,37 @@
 <template>
   <div class="min-h-screen bg-gray-100">
     <!-- Header -->
-    <header class="w-100% h-680px bg-cover bg-center">
-      <img src="@/assets/images/innovationCenter/banner.png" alt="创新中心横幅" class="w-full h-full object-cover">
-      <div class="box-border px-40px absolute left-0 top-0 w-full h-64px bg-white bg-op-70 flex flex-row items-center justify-between">
-        <h1 class="text-20px font-500 mb-4px relative z-10">贵阳贵安鸿蒙城市生态中心</h1>
+    <header class="w-100% h-680px bg-cover bg-center relative">
+      <!-- 背景图片放在最底层 -->
+      <img src="@/assets/images/innovationCenter/banner.png" alt="创新中心横幅" class="w-full h-full object-cover absolute top-0 left-0">
+
+      <!-- 导航栏提高层级 -->
+      <div class="box-border px-40px absolute left-0 top-0 w-full h-64px bg-white bg-op-70 flex flex-row items-center justify-between z-10">
+        <h1 class="text-20px font-500 mb-4px">贵阳贵安鸿蒙城市生态中心</h1>
         <ul class="flex flex-row items-center justify-between text-16px">
-            <li class="px-24px text-color-#007CF7 cursor-pointer">创新中心</li>
-            <li class="px-24px cursor-pointer">贵鸿开发者社区</li>
-            <li class="px-24px cursor-pointer">贵鸿应用中心</li>
-            <li class="pl-24px cursor-pointer">贵鸿设备中心</li>
+          <li 
+            class="px-24px cursor-pointer text-color-#007CF7"
+            @click="goToPage('innovation')"
+          >创新中心</li>
+          <li 
+            class="px-24px cursor-pointer"
+            @click="goToPage('developer')"
+          >贵鸿开发者社区</li>
+          <li 
+            class="px-24px cursor-pointer"
+            @click="goToPage('application')"
+          >贵鸿应用中心</li>
+          <li 
+            class="pl-24px cursor-pointer"
+            @click="goToPage('device')"
+          >贵鸿设备中心</li>
         </ul>
       </div>
-      <div class="absolute left-0 top-0 w-full h-full flex flex-col items-center justify-center mt--140px">
+
+      <!-- 中间的文字内容 -->
+      <div class="absolute left-0 top-0 w-full h-full flex flex-col items-center justify-center mt--140px z-1">
         <p class="text-72px font-500 color-white">贵鸿生态创新中心</p>
-        <p class="text-32px color-white fw-400 mt-37px">基于 Open Harmony 打造贵鸿OS城市发行版，赋能千行百业</p>
+        <p class="text-32px color-white fw-400 mt-37px">基于 OpenHarmony 打造贵鸿OS城市发行版，赋能千行百业</p>
       </div>
     </header>
     <!-- 贵鸿OS Features -->
@@ -163,7 +180,25 @@ import certification1 from '@/assets/images/innovationCenter/certification_1.png
 import certification2 from '@/assets/images/innovationCenter/certification_2.png'
 import certification3 from '@/assets/images/innovationCenter/certification_3.png'
 import certification4 from '@/assets/images/innovationCenter/certification_4.png'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const goToPage = (type) => {
+  const routes = {
+    developer: '/coderCommunity',    // 开发者社区路由
+    application: '/appCenter',   // 应用中心路由
+    device: '/deviceCenter'             // 设备中心路由
+  }
+  router.push(routes[type])
+}
 
+onMounted(() => {
+  window.scrollTo({
+    top: 0,
+    behavior: 'auto' // 或者使用 'auto' 立即滚动
+  })
+})
 const featureImages = [feature1, feature2, feature3, feature4]
 
 const features = [
@@ -371,3 +406,5 @@ const ecoImages = [eco1, eco2, eco3, eco4]
 
 
 
+
+
diff --git a/src/views/websiteHome.vue b/src/views/websiteHome.vue
@@ -238,7 +238,7 @@ const platforms = [
   },
   {
     title:  "城市鸿蒙生态中心",
-    desc: '城市鸿蒙生态中心，是在基于 Open Harmony 打造的贵鸿OS城市发行版的基础上，通过建立资源共享、技术支持、开放交流的平台，提供一站式鸿蒙化解决方案，帮助应用厂商、设备厂商的高效开发鸿蒙应用、低成本实现设备鸿蒙化，推动贵鸿生态系统建设。',
+    desc: '城市鸿蒙生态中心，是在基于 OpenHarmony 打造的贵鸿OS城市发行版的基础上，通过建立资源共享、技术支持、开放交流的平台，提供一站式鸿蒙化解决方案，帮助应用厂商、设备厂商的高效开发鸿蒙应用、低成本实现设备鸿蒙化，推动贵鸿生态系统建设。',
     image: platform4,
     items: [
       {
@@ -254,7 +254,7 @@ const platforms = [
         title: '生态设备'
       }
     ],
-    route: '/harmonyOS'
+    route: '/innovationCenter'
   }
 ]
 
@@ -319,21 +319,6 @@ const generateId = (title) => {
   return title.replace(/\s+/g, '').toLowerCase()
 }
 
-// 在 platforms 数组后添加新的数据
-const platformItems = [
-  {
-    image: '@/assets/images/alt.png',
-    title: '河湾物联感知平台'
-  },
-  {
-    image: '@/assets/images/alt.png',
-    title: '智慧园区管理平台'
-  },
-  {
-    image: '@/assets/images/alt.png',
-    title: '数字孪生平台'
-  }
-]
 </script>
 
 <style scoped lang="scss">