f

src/assets/css/style.css

@@ -476,11 +476,7 @@
     color: rgb(163, 156, 156) !important;
 }
 
-.index-container {
-    padding: 20px 30px 0 30px;
-    background: #fff;
-    border-radius: 5px;
-}
+
 
 .no-radius {
     border-radius: none;
@@ -503,12 +499,6 @@
     border: 1px solid #E3DFEA;
 }
 
-.container {
-    padding: 30px;
-    background: #fff;
-    border: 1px solid #ddd;
-    border-radius: 5px;
-}
 
 .border-radius-4 {
     border-radius: 4px !important

src/router/index.js

@@ -8,13 +8,20 @@ const routes = [
     {
         path: '/home',
         name: 'home',
-        component: () => import('@/views/commonpage.vue'),
+        component: () => import('@/views/homepage.vue'),
         children: [
             {
                 path: 'navigation',
                 name: 'navigation',
                 component: () => import('@/views/navigation/index.vue'),
             },
+        ]
+    },
+    {
+        path: '/common',
+        name: 'common',
+        component: () => import('@/views/commonpage.vue'),
+        children: [
             {
                 path: 'interpretive',
                 name: 'interpretive',

src/views/homepage.vue

@@ -0,0 +1,89 @@
+
+<template>
+  <div style="min-height:100vh"
+       class="100vw">
+    <div style="height:80px;background:#000;"
+         class="color-white row items-center">
+      <div class="col-4 row items-center justify-center"><img src="../assets/images/icon-title.png"
+             style="width:40px;height:40px" /><span class="fl-ml-sm">延庆博物馆</span></div>
+
+      <div class="col-6 row justify-around items-center">
+
+        <div class="cursor header-title"
+             @click="handkeLink('/home/navigation')">首页</div>
+        <div class="cursor header-title"
+             @click="handkeLink('')">导航</div>
+        <div class="cursor header-title"
+             @click="handkeLink('')">展览</div>
+        <div class="cursor header-title"
+             @click="handkeLink('')">典藏</div>
+        <div class="cursor header-title"
+             @click="handkeLink('')">资讯</div>
+        <div class="cursor header-title"
+             @click="handkeLink('')">文创</div>
+        <div class="cursor header-title"
+             @click="handkeLink('')">数字文脉</div>
+        <div class="cursor header-title"
+             @click="handkeLink('/about/statutes')">关于</div>
+      </div>
+    </div>
+    <div>
+      <router-view></router-view>
+    </div>
+
+    <div style="height:187px;background:#000;"
+         class="row justify-center color-white">
+      <div class="col-6 row justify-around fl-mt-lg">
+        <div class="cursor">首页</div>
+        <div class="cursor">导航</div>
+        <div class="cursor">展览</div>
+        <div class="cursor">典藏</div>
+        <div class="cursor">资讯</div>
+        <div class="cursor">文创</div>
+        <div class="cursor">数字文脉</div>
+        <div class="cursor">关于</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+
+import {
+  ref,
+  reactive,
+  onBeforeMount,
+  getCurrentInstance,
+  watch,
+  nextTick,
+} from "vue";
+import { useRoute, useRouter } from 'vue-router';
+const route = useRoute();
+const router = useRouter();
+const state = reactive({
+  activePage: '',
+});
+onBeforeMount(() => {
+  const currentPath = route.path;
+  state.activePage = currentPath;
+})
+
+
+const handkeLink = (url) => {
+  if (url) {
+    router.push(url)
+    state.activePage = url;
+  } else {
+    router.push('/home/staytuned')
+  }
+}
+</script>
+
+<style scoped>
+.header-title {
+  padding: 4px 18px;
+  border-radius: 25px;
+}
+.header-title:hover {
+  background: #3d8873;
+}
+</style>