Home Explore Help
Sign In
www
/
eco-boot-web
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

style: 布局header

Gaokun Wang 4 weeks ago
parent
c45c8172b5
commit
7086f5cecf
13 changed files with 173 additions and 99 deletions
Split View Show Diff Stats
  1. 1 1
      .env.development
  2. 1 1
      .env.production
  3. 1 1
      index.html
  4. 30 0
      src/assets/styles/custom.scss
  5. 12 88
      src/assets/styles/element.scss
  6. 4 1
      src/assets/styles/index.scss
  7. 8 1
      src/assets/styles/variables.scss
  8. 46 1
      src/layouts/container/AppTransverse/index.scss
  9. 45 3
      src/layouts/container/AppTransverse/index.vue
  10. 3 0
      src/types/auto-components.d.ts
  11. 17 1
      src/views/home/index.vue
  12. 1 0
      src/views/login/index.scss
  13. 4 1
      vite.config.ts

+ 1 - 1
.env.development
View File 

@@ -2,7 +2,7 @@
 
 VITE_NODE_ENV = development
 
 
 # 应用名称
 
-VITE_APP_TITLE = eco
 
+VITE_APP_TITLE = eco-boot-web
 
 
 # 端口号
 
 VITE_PORT = 5151

+ 1 - 1
.env.production
View File 

@@ -2,7 +2,7 @@
 
 VITE_NODE_ENV = production
 
 
 # 应用名称
 
-VITE_APP_TITLE = eco
 
+VITE_APP_TITLE = eco-boot-web
 
 
 # 接口前缀 后端：/pro-api
 
 VITE_API_PREFIX_PATH = /pro-api

+ 1 - 1
index.html
View File 

@@ -4,7 +4,7 @@
 
     <meta charset="UTF-8" />
 
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <title>Vite + Vue + TS</title>
 
+    <title>%VITE_APP_TITLE%</title>
 
   </head>
 
   <body>
 
     <div id="app"></div>

+ 30 - 0
src/assets/styles/custom.scss
View File 

@@ -0,0 +1,30 @@
 
+/* custom card */
 
+.card {
 
+  box-sizing: border-box;
 
+  padding: 12px;
 
+  overflow-x: hidden;
 
+  background-color: var(--card-bg-color);
 
+  border: 1px solid var(--card-border-color);
 
+  border-radius: 4px;
 
+  box-shadow: 0 0 12px rgb(0 0 0 / 5%);
 
+}
 
+
 
+/* ProTable 不需要 card 样式（在组件内使用 ProTable 会使用到） */
 
+.no-card {
 
+  .card {
 
+    padding: 0;
 
+    background-color: transparent;
 
+    border: none;
 
+    border-radius: 0;
 
+    box-shadow: none;
 
+  }
 
+  .table-search {
 
+    padding: 18px 0 0 !important;
 
+    margin-bottom: 0 !important;
 
+  }
 
+}
 
+
 
+/* content-box (常用内容盒子) */
 
+.content-box {
 
+  height: 100%;
 
+}

+ 12 - 88
src/assets/styles/element.scss
View File 

@@ -26,67 +26,11 @@
 
   mask-image: linear-gradient(90deg, #000000 0%, #000000 calc(100% - 50px), transparent);
 
 }
 
 
-/* custom card */
 
-.card {
 
-  box-sizing: border-box;
 
-  padding: 20px;
 
-  overflow-x: hidden;
 
-  background-color: var(--el-bg-color);
 
-  border: 1px solid var(--el-border-color-light);
 
-  border-radius: 6px;
 
-  box-shadow: 0 0 12px rgb(0 0 0 / 5%);
 
-}
 
-
 
-/* ProTable 不需要 card 样式（在组件内使用 ProTable 会使用到） */
 
-.no-card {
 
-  .card {
 
-    padding: 0;
 
-    background-color: transparent;
 
-    border: none;
 
-    border-radius: 0;
 
-    box-shadow: none;
 
-  }
 
-
 
-  .table-search {
 
-    padding: 18px 0 0 !important;
 
-    margin-bottom: 0 !important;
 
-  }
 
-}
 
-
 
-/* content-box (常用内容盒子) */
 
-.content-box {
 
-  display: flex;
 
-  flex-direction: column;
 
-  align-items: center;
 
-  height: 100%;
 
-
 
-  .text {
 
-    margin: 20px 0 30px;
 
-    font-size: 23px;
 
-    font-weight: bold;
 
-    color: var(--el-text-color-regular);
 
-  }
 
-
 
-  .el-descriptions {
 
-    width: 100%;
 
-    padding: 40px 0 0;
 
-
 
-    .el-descriptions__title {
 
-      font-size: 18px;
 
-    }
 
-
 
-    .el-descriptions__label {
 
-      width: 200px;
 
-    }
 
-  }
 
-}
 
-
 
 /* main-box (树形表格 DeptTree 页面会使用，左右布局 flex) */
 
 .main-box {
 
   display: flex;
 
   width: 100%;
 
   height: 100%;
 
-
 
   .table-box {
 
     // 这里减去的是 DeptTree 组件宽度
 
     width: calc(100% - 230px);
 
@@ -106,7 +50,6 @@
 
   .table-search {
 
     padding: 18px 18px 0;
 
     margin-bottom: 10px;
 
-
 
     .el-form {
 
       .el-form-item__content > * {
 
         width: 100%;
 
@@ -117,7 +60,6 @@
 
         padding: 0 10px;
 
       }
 
     }
 
-
 
     .operation {
 
       display: flex;
 
       align-items: center;
 
@@ -131,11 +73,9 @@
 
     .header-button-lf {
 
       float: left;
 
     }
 
-
 
     .header-button-ri {
 
       float: right;
 
     }
 
-
 
     .el-button {
 
       margin-bottom: 15px;
 
     }
 
@@ -149,7 +89,6 @@
 
     table {
 
       width: 100%;
 
     }
 
-
 
     .el-table__header th {
 
       height: 45px;
 
       font-size: 15px;
 
@@ -157,14 +96,11 @@
 
       color: var(--el-text-color-primary);
 
       background: var(--el-fill-color-light);
 
     }
 
-
 
     .el-table__row {
 
       height: 45px;
 
       font-size: 14px;
 
-
 
       .move {
 
         cursor: move;
 
-
 
         .el-icon {
 
           cursor: move;
 
         }
 
@@ -182,12 +118,10 @@
 
       top: 50%;
 
       left: 50%;
 
       transform: translate(-50%, -50%);
 
-
 
       .table-empty {
 
         line-height: 30px;
 
       }
 
     }
 
-
 
     &.is-scrolling-none {
 
       th.el-table-fixed-column--left,
 
       th.el-table-fixed-column--right {
 
@@ -211,18 +145,18 @@
 
   }
 
 }
 
 
-.el-dialog {
 
-  .table-box,
 
-  .table-main {
 
-    .el-table {
 
-      .el-table__empty-block {
 
-        position: relative;
 
-        transform: translateX(-50%);
 
-        margin: 40px 0;
 
-      }
 
-    }
 
-  }
 
-}
 
+// .el-dialog {
 
+//   .table-box,
 
+//   .table-main {
 
+//     .el-table {
 
+//       .el-table__empty-block {
 
+//         position: relative;
 
+//         transform: translateX(-50%);
 
+//         margin: 40px 0;
 
+//       }
 
+//     }
 
+//   }
 
+// }
 
 
 /* el-table 组件大小 */
 
 .el-table--small {
 
@@ -230,19 +164,16 @@
 
     height: 40px !important;
 
     font-size: 14px !important;
 
   }
 
-
 
   .el-table__row {
 
     height: 40px !important;
 
     font-size: 13px !important;
 
   }
 
 }
 
-
 
 .el-table--large {
 
   .el-table__header th {
 
     height: 50px !important;
 
     font-size: 16px !important;
 
   }
 
-
 
   .el-table__row {
 
     height: 50px !important;
 
     font-size: 15px !important;
 
@@ -255,14 +186,12 @@
 
     padding: 16px 20px;
 
     margin-bottom: 0;
 
     border-bottom: 1px solid var(--el-border-color-lighter);
 
-
 
     span {
 
       font-size: 17px;
 
       line-height: 17px;
 
       color: var(--el-text-color-primary) !important;
 
     }
 
   }
 
-
 
   .el-drawer__footer {
 
     border-top: 1px solid var(--el-border-color-lighter);
 
   }
 
@@ -276,10 +205,8 @@
 
   .drawer-multiColumn-form {
 
     display: flex;
 
     flex-wrap: wrap;
 
-
 
     .el-form-item {
 
       width: 47%;
 
-
 
       &:nth-child(2n-1) {
 
         margin-right: 5%;
 
       }
 
@@ -293,19 +220,16 @@
 
     padding: 15px 20px;
 
     margin-bottom: 20px;
 
     border-bottom: 1px solid var(--el-border-color-lighter);
 
-
 
     .el-dialog__title {
 
       font-size: 17px;
 
     }
 
   }
 
 }
 
-
 
 .el-upload-list.is-disabled {
 
   .el-upload {
 
     display: none;
 
   }
 
 }
 
-
 
 .form__label {
 
   font-weight: 700;
 
 }

+ 4 - 1
src/assets/styles/index.scss
View File 

@@ -10,5 +10,8 @@
 
 // font css
 
 @use '@/assets/styles/fonts/font';
 
 
-// custom element css
 
+// 自定义 element css
 
 @use '@/assets/styles/element';
 
+
 
+// 自定义 css
 
+@use '@/assets/styles/custom';

+ 8 - 1
src/assets/styles/variables.scss
View File 

@@ -1,6 +1,13 @@
 
 /** 全局SCSS变量 */
 
 html:root {
 
-  // layout
 
+  // layout-header
 
   --layout-header-bg-color: #8b9e7e;
 
   --layout-header-height: 55px;
 
+
 
+  // layout-main
 
+  --layout-main-bg-color: #ffffff;
 
+
 
+  // card-bg
 
+  --bg-color: #ffffff;
 
+  --border-color: #e4e7ed;
 
 }

+ 46 - 1
src/layouts/container/AppTransverse/index.scss
View File 

@@ -1,4 +1,49 @@
 
+.el-container {
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
 .el-header {
 
+  box-sizing: border-box;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: space-between;
 
   height: var(--layout-header-height);
 
-  background-color: var(--layout-header-bg-color);
 
+  border-bottom: 1px solid var(--border-color);
 
+  .el-menu--horizontal {
 
+    --el-menu-horizontal-height: var(--layout-header-height);
 
+  }
 
+  .el-menu {
 
+    border-bottom: none;
 
+  }
 
+}
 
+.el-main {
 
+  box-sizing: border-box;
 
+  padding: 6px 8px;
 
+  overflow-x: hidden;
 
+  background-color: var(--layout-main-bg-color);
 
+}
 
+.el-footer {
 
+  height: auto;
 
+  text-align: center;
 
+  border-top: 1px solid var(--border-color);
 
+}
 
+.logo {
 
+  width: 210px;
 
+  margin-right: 30px;
 
+  .logo-img {
 
+    width: 28px;
 
+    object-fit: contain;
 
+    margin-right: 6px;
 
+  }
 
+  .logo-text {
 
+    font-size: 21.5px;
 
+    font-weight: bold;
 
+    color: var(--el-header-logo-text-color);
 
+    white-space: nowrap;
 
+  }
 
+}
 
+.tool-bar-ri {
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
 }

+ 45 - 3
src/layouts/container/AppTransverse/index.vue
View File 

@@ -1,6 +1,44 @@
 
 <template>
 
   <el-container class="layout">
 
-    <el-header>菜单</el-header>
 
+    <el-header>
 
+      <div class="logo flx-center">
 
+        <img class="logo-img" src="@/assets/images/logo.svg" alt="logo" />
 
+        <span class="logo-text">{{ title }}</span>
 
+      </div>
 
+      <el-menu ellipsis class="el-menu-popper-demo" mode="horizontal" :popper-offset="0" style="max-width: 900px">
 
+        <el-menu-item index="1">首页</el-menu-item>
 
+        <el-sub-menu index="2">
 
+          <template #title>权限中心</template>
 
+          <el-menu-item index="2-1">用户管理</el-menu-item>
 
+          <el-menu-item index="2-2">角色管理</el-menu-item>
 
+          <el-menu-item index="2-3">菜单管理</el-menu-item>
 
+          <el-sub-menu index="2-4">
 
+            <template #title>item four</template>
 
+            <el-menu-item index="2-4-1">item one</el-menu-item>
 
+            <el-menu-item index="2-4-2">item two</el-menu-item>
 
+            <el-menu-item index="2-4-3">item three</el-menu-item>
 
+          </el-sub-menu>
 
+        </el-sub-menu>
 
+        <el-sub-menu index="3">
 
+          <template #title>组织架构</template>
 
+          <el-menu-item index="3-1">职位管理</el-menu-item>
 
+          <el-menu-item index="3-2">组织管理</el-menu-item>
 
+          <el-menu-item index="3-3">item three</el-menu-item>
 
+          <el-sub-menu index="3-4">
 
+            <template #title>demo</template>
 
+            <el-menu-item index="3-4-1">item one</el-menu-item>
 
+            <el-menu-item index="3-4-2">item two</el-menu-item>
 
+            <el-menu-item index="3-4-3">item three</el-menu-item>
 
+          </el-sub-menu>
 
+        </el-sub-menu>
 
+        <el-menu-item index="4" disabled>Info</el-menu-item>
 
+        <el-menu-item index="5">Orders</el-menu-item>
 
+      </el-menu>
 
+      <div class="tool-bar-ri">
 
+        <span class="username">Admin</span>
 
+        <Avatar />
 
+      </div>
 
+    </el-header>
 
     <el-main>
 
       <router-view v-slot="{ Component, route }">
 
         <transition appear name="fade-transform" mode="out-in">
 
@@ -10,10 +48,14 @@
 
         </transition>
 
       </router-view>
 
     </el-main>
 
-    <el-footer></el-footer>
 
+    <el-footer>
 
+      <span>Copyright (c) 2025 eco-Boot-web</span>
 
+    </el-footer>
 
   </el-container>
 
 </template>
 
-<script lang="tsx" setup name="LayoutTransverse"></script>
 
+<script lang="tsx" setup name="LayoutTransverse">
 
+const title = import.meta.env.VITE_APP_TITLE
 
+</script>
 
 <style lang="scss" scoped>
 
 @use './index';
 
 </style>

+ 3 - 0
src/types/auto-components.d.ts
View File 

@@ -20,6 +20,9 @@ declare module 'vue' {
 
     ElIcon: typeof import('element-plus/es')['ElIcon']
 
     ElInput: typeof import('element-plus/es')['ElInput']
 
     ElMain: typeof import('element-plus/es')['ElMain']
 
+    ElMenu: typeof import('element-plus/es')['ElMenu']
 
+    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
 
+    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
 
     HelloWorld: typeof import('./../components/HelloWorld.vue')['default']
 
     LoginForm: typeof import('./../views/login/components/LoginForm.vue')['default']
 
     RouterLink: typeof import('vue-router')['RouterLink']

+ 17 - 1
src/views/home/index.vue
View File 

@@ -1,3 +1,19 @@
 
 <template>
 
-  <div>HOME</div>
 
+  <div class="content-box">
 
+    <div class="text" style="height: 300px">首页</div>
 
+    <div class="text" style="height: 300px">首页</div>
 
+    <div class="text" style="height: 300px">首页</div>
 
+    <div class="text" style="height: 300px">首页</div>
 
+    <div class="text" style="height: 300px">首页</div>
 
+    <div class="text" style="height: 300px">首页</div>
 
+    <div class="text" style="height: 300px">首页</div>
 
+    <div class="text" style="height: 300px">首页</div>
 
+    <div class="text" style="height: 300px">首页</div>
 
+    <div class="text" style="height: 300px">首页</div>
 
+    <div class="text" style="height: 300px">首页</div>
 
+    <div class="text" style="height: 300px">首页</div>
 
+  </div>
 
 </template>
 
+<script lang="tsx" setup>
 
+import { Position } from '@element-plus/icons-vue'
 
+</script>

+ 1 - 0
src/views/login/index.scss
View File 

@@ -16,6 +16,7 @@
 
     box-shadow: rgb(0 0 0 / 10%) 0 2px 10px 2px;
 
     .login-btn {
 
       display: flex;
 
+      justify-content: space-between;
 
       align-items: center;
 
       width: 100%;
 
       margin-top: 40px;

+ 4 - 1
vite.config.ts
View File 

@@ -53,7 +53,10 @@ export default defineConfig(({ mode, command }: ConfigEnv): UserConfig => {
 
         'element-plus/es/components/footer/style/css',
 
         'element-plus/es/components/main/style/css',
 
         'element-plus/es/components/header/style/css',
 
-        'element-plus/es/components/message/style/css'
 
+        'element-plus/es/components/message/style/css',
 
+        'element-plus/es/components/menu/style/css',
 
+        'element-plus/es/components/sub-menu/style/css',
 
+        'element-plus/es/components/menu-item/style/css'
 
       ]
 
     }
 
   }