导航配置

components.d.ts

@@ -16,6 +16,8 @@ declare module 'vue' {
     ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
+    Header: typeof import('./src/components/header.vue')['default']
+    HeaderTop: typeof import('./src/components/headerTop.vue')['default']
     MenuItem: typeof import('./src/components/comNav/sideBar/menuItem.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

package.json

@@ -22,6 +22,7 @@
     "nprogress": "^0.2.0",
     "pinia": "^2.1.7",
     "pinia-plugin-persist": "^1.0.0",
+    "sass": "^1.69.5",
     "unplugin-icons": "^0.18.0",
     "vite-plugin-html": "^3.2.0",
     "vite-plugin-zip-file": "^2.2.0",

pnpm-lock.yaml

@@ -32,6 +32,9 @@ dependencies:
   pinia-plugin-persist:
     specifier: ^1.0.0
     version: 1.0.0(pinia@2.1.7)(vue@3.3.4)
+  sass:
+    specifier: ^1.69.5
+    version: 1.69.5
   unplugin-icons:
     specifier: ^0.18.0
     version: 0.18.0
@@ -81,7 +84,7 @@ devDependencies:
     version: 0.25.2(vue@3.3.4)
   vite:
     specifier: ^4.4.11
-    version: 4.4.11(@types/node@18.18.5)
+    version: 4.4.11(@types/node@18.18.5)(sass@1.69.5)
   vue-tsc:
     specifier: ^1.8.19
     version: 1.8.19(typescript@5.2.2)
@@ -740,7 +743,7 @@ packages:
       '@babel/core': 7.23.5
       '@babel/plugin-transform-typescript': 7.23.5(@babel/core@7.23.5)
       '@vue/babel-plugin-jsx': 1.1.5(@babel/core@7.23.5)
-      vite: 4.4.11(@types/node@18.18.5)
+      vite: 4.4.11(@types/node@18.18.5)(sass@1.69.5)
       vue: 3.3.4
     transitivePeerDependencies:
       - supports-color
@@ -753,7 +756,7 @@ packages:
       vite: ^4.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 4.4.11(@types/node@18.18.5)
+      vite: 4.4.11(@types/node@18.18.5)(sass@1.69.5)
       vue: 3.3.4
     dev: true
 
@@ -1581,6 +1584,9 @@ packages:
     resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==}
     dev: false
 
+  /immutable@4.3.4:
+    resolution: {integrity: sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==}
+
   /inherits@2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
     dev: false
@@ -2155,6 +2161,15 @@ packages:
     resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
     dev: false
 
+  /sass@1.69.5:
+    resolution: {integrity: sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+    dependencies:
+      chokidar: 3.5.3
+      immutable: 4.3.4
+      source-map-js: 1.0.2
+
   /scule@1.1.0:
     resolution: {integrity: sha512-vRUjqhyM/YWYzT+jsMk6tnl3NkY4A4soJ8uyh3O6Um+JXEQL9ozUCe7pqrxn3CSKokw0hw3nFStfskzpgYwR0g==}
     dev: true
@@ -2480,7 +2495,7 @@ packages:
       html-minifier-terser: 6.1.0
       node-html-parser: 5.4.2
       pathe: 0.2.0
-      vite: 4.4.11(@types/node@18.18.5)
+      vite: 4.4.11(@types/node@18.18.5)(sass@1.69.5)
     dev: false
 
   /vite-plugin-zip-file@2.2.0:
@@ -2489,7 +2504,7 @@ packages:
       jszip: 3.10.1
     dev: false
 
-  /vite@4.4.11(@types/node@18.18.5):
+  /vite@4.4.11(@types/node@18.18.5)(sass@1.69.5):
     resolution: {integrity: sha512-ksNZJlkcU9b0lBwAGZGGaZHCMqHsc8OpgtoYhsQ4/I2v5cnpmmmqe5pM4nv/4Hn6G/2GhTdj0DhZh2e+Er1q5A==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
@@ -2521,6 +2536,7 @@ packages:
       esbuild: 0.18.20
       postcss: 8.4.31
       rollup: 3.29.4
+      sass: 1.69.5
     optionalDependencies:
       fsevents: 2.3.3
 

src/App.vue

@@ -4,4 +4,7 @@
 <script setup lang="ts">
 </script>
 
-<style scoped></style>
+<style lang="scss">
+@import url("./style/css/reset.css");
+
+</style>

src/components/comNav/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <h1>66</h1>
+  
     <subMenu></subMenu>
  
     <RouterView />

src/components/comNav/sideBar/subMenu.vue

@@ -1,6 +1,8 @@
 <template>
-  <el-menu active-text-color="#fff" :background-color="props.backgroundColor" :default-active="'0'" text-color="#999" :unique-opened="true" :default-openeds="['/test1']"
+  <el-menu :collapse="props.collapse" :background-color="props.backgroundColor" :text-color="props.textColor"
-    router>
+    :active-text-color="props.activeTextColor" :default-active="props.defaultActive"
+    :default-openeds="props.defaultOpeneds" :unique-opened="props.uniqueOpened" :menu-trigger="props.menuTrigger"
+    :router="props.router" :collapse-transition="props.collapseTransition" :popper-effect="props.popperEffect">
     <menuItem :menuList="props.menuList">
     </menuItem>
   </el-menu>
@@ -39,7 +41,7 @@ const props: any = defineProps({
   },
   defaultOpeneds: {
     type: Array,
-    default: ["/test1/test11"]
+    default: ["/test1"]
   },
   uniqueOpened: {
     type: Boolean,
@@ -80,13 +82,7 @@ const props: any = defineProps({
     }]
   }
 })
-const isCollapse = ref(false)
+ 
-const handleOpen = (key: string, keyPath: string[]) => {
-  console.log(key, keyPath)
-}
-const handleClose = (key: string, keyPath: string[]) => {
-  console.log(key, keyPath)
-}
 </script>
 
 <style>

src/components/headerTop.vue

@@ -0,0 +1,66 @@
+
+
+
+<template>
+  <div class="header_top">
+    <div class="header_top_left_title">
+      施工承载力管控系统
+    </div>
+    <div class="right_user_opert">
+      <div class="user_info">
+
+        
+        <div class="user_name">
+            何以解忧
+        </div>
+        <div class="user_icon">
+          <img src="" alt="">
+        </div>
+      </div>
+      <div class="login_opert">
+        退出登录
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+
+
+
+</script>
+  
+<style lang="scss" scoped>
+
+
+.header_top {
+  height: 72px;
+  background-color: $main-color;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 24px;
+  box-sizing: border-box;
+  
+}
+.header_top_left_title{
+  font-size: 32px;
+  color: #fff;
+}
+.right_user_opert{
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+.user_info{
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  .user_icon{
+    width: 42px;
+    height: 42px;
+    border-radius:50%;
+    border: 2px solid #ccc;
+    margin:  0 12px;
+  }
+}
+}
+</style>

src/router/index.ts

@@ -8,7 +8,19 @@ const routes: Array<RouteRecordRaw> = [
             title: '主页面',
             keepAlive: true,
             AuthFlag: true
+        },
+        children:[{
+
+            path: 'configuration',
+            name: 'configuration',
+            component: () => import('views/AppMain.vue'),
+            meta: {
+                title: '主页面',
+                keepAlive: true,
+                AuthFlag: true
+            },
         }
+        ]
     }
 ]
 

src/style/scss/variable.scss

@@ -1,2 +1,2 @@
-$main-color: #22b2ff;
+$main-color: #3fb9f7;
 $second-color: #666;

src/views/AppMain.vue

@@ -1,10 +1,50 @@
 <template>
-    <comNav></comNav>
+<div class="view_home">
-    <RouterView />
+  <div class="main_top">
-  </template>
+    <headerTop></headerTop>
-  <script setup lang="ts">
+  </div>
-  import comNav from 'components/comNav/index.vue';
+  <div class="main_">
-  </script>
+    <div class="main_nav">
+      <comNav></comNav>
+    </div>
+    <div class="main_content">
   
-  <style scoped></style>
+      <RouterView />
+    </div>
+  </div>
+
+</div>
+
+ 
+
+</template>
+<script setup lang="ts">
+import comNav from 'components/comNav/index.vue';
+import headerTop from 'components/headerTop.vue';
+</script>
+  
+<style scoped lang="scss">
+.view_home{
+  display: flex;
+  flex-direction: column;
+  width: 100vw;
+  height: 100vh;
+  .main_top{
+    height: 72px;
+  }
+  .main_{
+    flex: 1;
+    display: flex;
+    justify-content: space-between;
+    .main_nav{
+      width: 240px;
+    }
+    .main_content{
+      flex: 1;
+      background-color:pink;
+    }
+  }
+}
+
+</style>