Trang chủ Khám phá Trợ giúp
Đăng nhập
www
/
eco-boot-web
1
0
Fork 0
Các tập tin Các vấn đề 0 Yêu cầu kéo về 0 Wiki
Browse Source

style: 布局header

Gaokun Wang 4 tuần trước cách đây
mục cha
c45c8172b5
commit
7086f5cecf
13 tập tin đã thay đổi với 173 bổ sung và 99 xóa
View chưa được định nghĩa Hiển thị tình trạng sai khác
  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
Xem Tập Tin 

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

+ 1 - 1
.env.production
Xem Tập Tin 

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

+ 1 - 1
index.html
Xem Tập Tin 

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

+ 30 - 0
src/assets/styles/custom.scss
Xem Tập Tin 

@@ -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
Xem Tập Tin 

@@ -26,67 +26,11 @@
 
   mask-image: linear-gradient(90deg, #000000 0%, #000000 calc(100% - 50px), transparent);
 
   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 (树形表格 DeptTree 页面会使用，左右布局 flex) */
 
 .main-box {
 
 .main-box {
 
   display: flex;
 
   display: flex;
 
   width: 100%;
 
   width: 100%;
 
   height: 100%;
 
   height: 100%;
 
-
 
   .table-box {
 
   .table-box {
 
     // 这里减去的是 DeptTree 组件宽度
 
     // 这里减去的是 DeptTree 组件宽度
 
     width: calc(100% - 230px);
 
     width: calc(100% - 230px);
 
@@ -106,7 +50,6 @@
 
   .table-search {
 
   .table-search {
 
     padding: 18px 18px 0;
 
     padding: 18px 18px 0;
 
     margin-bottom: 10px;
 
     margin-bottom: 10px;
 
-
 
     .el-form {
 
     .el-form {
 
       .el-form-item__content > * {
 
       .el-form-item__content > * {
 
         width: 100%;
 
         width: 100%;
 
@@ -117,7 +60,6 @@
 
         padding: 0 10px;
 
         padding: 0 10px;
 
       }
 
       }
 
     }
 
     }
 
-
 
     .operation {
 
     .operation {
 
       display: flex;
 
       display: flex;
 
       align-items: center;
 
       align-items: center;
 
@@ -131,11 +73,9 @@
 
     .header-button-lf {
 
     .header-button-lf {
 
       float: left;
 
       float: left;
 
     }
 
     }
 
-
 
     .header-button-ri {
 
     .header-button-ri {
 
       float: right;
 
       float: right;
 
     }
 
     }
 
-
 
     .el-button {
 
     .el-button {
 
       margin-bottom: 15px;
 
       margin-bottom: 15px;
 
     }
 
     }
 
@@ -149,7 +89,6 @@
 
     table {
 
     table {
 
       width: 100%;
 
       width: 100%;
 
     }
 
     }
 
-
 
     .el-table__header th {
 
     .el-table__header th {
 
       height: 45px;
 
       height: 45px;
 
       font-size: 15px;
 
       font-size: 15px;
 
@@ -157,14 +96,11 @@
 
       color: var(--el-text-color-primary);
 
       color: var(--el-text-color-primary);
 
       background: var(--el-fill-color-light);
 
       background: var(--el-fill-color-light);
 
     }
 
     }
 
-
 
     .el-table__row {
 
     .el-table__row {
 
       height: 45px;
 
       height: 45px;
 
       font-size: 14px;
 
       font-size: 14px;
 
-
 
       .move {
 
       .move {
 
         cursor: move;
 
         cursor: move;
 
-
 
         .el-icon {
 
         .el-icon {
 
           cursor: move;
 
           cursor: move;
 
         }
 
         }
 
@@ -182,12 +118,10 @@
 
       top: 50%;
 
       top: 50%;
 
       left: 50%;
 
       left: 50%;
 
       transform: translate(-50%, -50%);
 
       transform: translate(-50%, -50%);
 
-
 
       .table-empty {
 
       .table-empty {
 
         line-height: 30px;
 
         line-height: 30px;
 
       }
 
       }
 
     }
 
     }
 
-
 
     &.is-scrolling-none {
 
     &.is-scrolling-none {
 
       th.el-table-fixed-column--left,
 
       th.el-table-fixed-column--left,
 
       th.el-table-fixed-column--right {
 
       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 组件大小 */
 
 .el-table--small {
 
 .el-table--small {
 
@@ -230,19 +164,16 @@
 
     height: 40px !important;
 
     height: 40px !important;
 
     font-size: 14px !important;
 
     font-size: 14px !important;
 
   }
 
   }
 
-
 
   .el-table__row {
 
   .el-table__row {
 
     height: 40px !important;
 
     height: 40px !important;
 
     font-size: 13px !important;
 
     font-size: 13px !important;
 
   }
 
   }
 
 }
 
 }
 
-
 
 .el-table--large {
 
 .el-table--large {
 
   .el-table__header th {
 
   .el-table__header th {
 
     height: 50px !important;
 
     height: 50px !important;
 
     font-size: 16px !important;
 
     font-size: 16px !important;
 
   }
 
   }
 
-
 
   .el-table__row {
 
   .el-table__row {
 
     height: 50px !important;
 
     height: 50px !important;
 
     font-size: 15px !important;
 
     font-size: 15px !important;
 
@@ -255,14 +186,12 @@
 
     padding: 16px 20px;
 
     padding: 16px 20px;
 
     margin-bottom: 0;
 
     margin-bottom: 0;
 
     border-bottom: 1px solid var(--el-border-color-lighter);
 
     border-bottom: 1px solid var(--el-border-color-lighter);
 
-
 
     span {
 
     span {
 
       font-size: 17px;
 
       font-size: 17px;
 
       line-height: 17px;
 
       line-height: 17px;
 
       color: var(--el-text-color-primary) !important;
 
       color: var(--el-text-color-primary) !important;
 
     }
 
     }
 
   }
 
   }
 
-
 
   .el-drawer__footer {
 
   .el-drawer__footer {
 
     border-top: 1px solid var(--el-border-color-lighter);
 
     border-top: 1px solid var(--el-border-color-lighter);
 
   }
 
   }
 
@@ -276,10 +205,8 @@
 
   .drawer-multiColumn-form {
 
   .drawer-multiColumn-form {
 
     display: flex;
 
     display: flex;
 
     flex-wrap: wrap;
 
     flex-wrap: wrap;
 
-
 
     .el-form-item {
 
     .el-form-item {
 
       width: 47%;
 
       width: 47%;
 
-
 
       &:nth-child(2n-1) {
 
       &:nth-child(2n-1) {
 
         margin-right: 5%;
 
         margin-right: 5%;
 
       }
 
       }
 
@@ -293,19 +220,16 @@
 
     padding: 15px 20px;
 
     padding: 15px 20px;
 
     margin-bottom: 20px;
 
     margin-bottom: 20px;
 
     border-bottom: 1px solid var(--el-border-color-lighter);
 
     border-bottom: 1px solid var(--el-border-color-lighter);
 
-
 
     .el-dialog__title {
 
     .el-dialog__title {
 
       font-size: 17px;
 
       font-size: 17px;
 
     }
 
     }
 
   }
 
   }
 
 }
 
 }
 
-
 
 .el-upload-list.is-disabled {
 
 .el-upload-list.is-disabled {
 
   .el-upload {
 
   .el-upload {
 
     display: none;
 
     display: none;
 
   }
 
   }
 
 }
 
 }
 
-
 
 .form__label {
 
 .form__label {
 
   font-weight: 700;
 
   font-weight: 700;
 
 }
 
 }

+ 4 - 1
src/assets/styles/index.scss
Xem Tập Tin 

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

+ 8 - 1
src/assets/styles/variables.scss
Xem Tập Tin 

@@ -1,6 +1,13 @@
 
 /** 全局SCSS变量 */
 
 /** 全局SCSS变量 */
 
 html:root {
 
 html:root {
 
-  // layout
 
+  // layout-header
 
   --layout-header-bg-color: #8b9e7e;
 
   --layout-header-bg-color: #8b9e7e;
 
   --layout-header-height: 55px;
 
   --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
Xem Tập Tin 

@@ -1,4 +1,49 @@
 
+.el-container {
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
 .el-header {
 
 .el-header {
 
+  box-sizing: border-box;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: space-between;
 
   height: var(--layout-header-height);
 
   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
Xem Tập Tin 

@@ -1,6 +1,44 @@
 
 <template>
 
 <template>
 
   <el-container class="layout">
 
   <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>
 
     <el-main>
 
       <router-view v-slot="{ Component, route }">
 
       <router-view v-slot="{ Component, route }">
 
         <transition appear name="fade-transform" mode="out-in">
 
         <transition appear name="fade-transform" mode="out-in">
 
@@ -10,10 +48,14 @@
 
         </transition>
 
         </transition>
 
       </router-view>
 
       </router-view>
 
     </el-main>
 
     </el-main>
 
-    <el-footer></el-footer>
 
+    <el-footer>
 
+      <span>Copyright (c) 2025 eco-Boot-web</span>
 
+    </el-footer>
 
   </el-container>
 
   </el-container>
 
 </template>
 
 </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>
 
 <style lang="scss" scoped>
 
 @use './index';
 
 @use './index';
 
 </style>
 
 </style>

+ 3 - 0
src/types/auto-components.d.ts
Xem Tập Tin 

@@ -20,6 +20,9 @@ declare module 'vue' {
 
     ElIcon: typeof import('element-plus/es')['ElIcon']
 
     ElIcon: typeof import('element-plus/es')['ElIcon']
 
     ElInput: typeof import('element-plus/es')['ElInput']
 
     ElInput: typeof import('element-plus/es')['ElInput']
 
     ElMain: typeof import('element-plus/es')['ElMain']
 
     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']
 
     HelloWorld: typeof import('./../components/HelloWorld.vue')['default']
 
     LoginForm: typeof import('./../views/login/components/LoginForm.vue')['default']
 
     LoginForm: typeof import('./../views/login/components/LoginForm.vue')['default']
 
     RouterLink: typeof import('vue-router')['RouterLink']
 
     RouterLink: typeof import('vue-router')['RouterLink']

+ 17 - 1
src/views/home/index.vue
Xem Tập Tin 

@@ -1,3 +1,19 @@
 
 <template>
 
 <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>
 
 </template>
 
+<script lang="tsx" setup>
 
+import { Position } from '@element-plus/icons-vue'
 
+</script>

+ 1 - 0
src/views/login/index.scss
Xem Tập Tin 

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

+ 4 - 1
vite.config.ts
Xem Tập Tin 

@@ -53,7 +53,10 @@ export default defineConfig(({ mode, command }: ConfigEnv): UserConfig => {
 
         'element-plus/es/components/footer/style/css',
 
         'element-plus/es/components/footer/style/css',
 
         'element-plus/es/components/main/style/css',
 
         'element-plus/es/components/main/style/css',
 
         'element-plus/es/components/header/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'
 
       ]
 
       ]
 
     }
 
     }
 
   }
 
   }