添加主菜单

package.json

@@ -12,6 +12,8 @@
     "core-js": "^3.8.3",
     "element-plus": "^2.6.3",
     "esri-loader": "^3.7.0",
+    "less": "^4.2.0",
+    "less-loader": "^12.2.0",
     "ncp": "^2.0.0",
     "vue": "^3.2.13",
     "vue-router": "4",

src/main.js

@@ -8,3 +8,23 @@ createApp(App)
     .use(reouter)
     .use(ElementPlus)
     .mount('#app')
+const debounce = (fn, delay) => {
+    let timer
+    return (...args) => {
+    if (timer) {
+        clearTimeout(timer)
+    }
+    timer = setTimeout(() => {
+        fn(...args)
+    }, delay)
+    }
+}
+
+const _ResizeObserver = window.ResizeObserver;
+window.ResizeObserver = class ResizeObserver extends _ResizeObserver{
+    constructor(callback) {
+    callback = debounce(callback, 200);
+    super(callback);
+    }
+}
+   

src/views/Layout.vue

@@ -1,27 +1,112 @@
 <template>
   <div class="common-layout">
     <el-container>
-      <el-header class="layout-header">Header</el-header>
+      <el-header class="layout-header">
+          <div class="header-container">
+            <div class="logo-box">
+              <div class="logo"></div>
+              <div class="title">柿子树备忘录-案例演示</div>
+            </div>
+            <div class="menu-box">
+              <el-menu
+                  :default-active="activeIndex"
+                  class="main-menu"
+                  mode="horizontal"
+                  @select="handleSelect"
+                >
+                  <el-menu-item index="menu" v-for="menu in mainMenu" :key="menu">{{menu}}</el-menu-item>
+                  <!-- <el-menu-item index="1">Processing Center</el-menu-item>
+                  <el-menu-item index="3">Info</el-menu-item>
+                  <el-menu-item index="4">Orders</el-menu-item> -->
+                </el-menu>
+            </div>
+            <div class="user-box">user-box</div>
+          </div>
+      </el-header>
       <el-container>
         <el-aside width="200px" class="layout-aside">Aside</el-aside>
         <el-main class="layout-main">
             <router-view></router-view>
         </el-main>
       </el-container>
+    
     </el-container>
   </div>
 </template>
 <script setup>
 import { ref } from 'vue'
+const mainMenu = [
+  "ArcGIS Maps SDK for JavaScritp",
+  "Openlayers",
+  "CesiumJS",
+];
 const count = ref(0)
+
+const activeIndex = ref(mainMenu[0])
+const activeIndex2 = ref('1')
+const handleSelect = (key, keyPath) => {
+  console.log(key, keyPath)
+}
 </script>
-<style scoped>
+<style scoped lang="less">
+.el-header{
+  padding: 0;
+}
+.header-container{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  .logo-box{
+    // background: red;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 5px;
+    .logo{
+      width: 50px;
+      height: 50px;
+      background: url('@/assets/logo.jpg');
+      background-size: 100% 100%;
+    }
+    .title{
+      padding: 0 5px;
+      color: black;
+      font-size: 1.2rem;
+      font-weight: 600;
+      font-family: fangsong;
+      font-style: italic;
+    }
+  }
+  .menu-box{
+    // background: green;
+    height: 100%;
+    flex-grow: 1;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    .main-menu{
+      width: 100%;
+      background: transparent;
+    }
+  }
+  .user-box{
+    // background: black;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
 .common-layout,.el-container{
     height: 100%;
     width: 100%;
+    
 }
 .layout-header{
-    background-color: aqua;
+    background-color: #e4e4e4;
 }
 .layout-aside{
     background-color: burlywood;