feat:初始化工程

src/styles/admin.layout.module.scss

@@ -0,0 +1,223 @@
+$sidebar-width: 160px;
+$sidebar-bg-color: #009FA8;
+$hide-sidebar-width: 55px;
+
+$logo-bg-color: #FFFFFF;
+$logo-font-size: 1.2rem;
+
+$menu-bg-color: #009FA8;
+$menu-hover-color: #F3F0ED;
+$menu-active-color: #FFFFFF;
+$menu-font-size: 1rem;
+
+$navbar-bg-color: #FFFFFF;
+$navbar-height: 50px;
+
+$app-main-bg-color: #009FA8;
+$module-bg-color: #FFFFFF;
+
+$transition-time: 0.28s;
+
+// 全局布局
+.layout-admin {
+  position: relative;
+  height: 100%;
+  width: 100%;
+
+  // 侧边栏
+  .layout-sidebar {
+    // 宽度过渡时间
+    transition: width $transition-time;
+    background-color: $sidebar-bg-color;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+
+    // Logo区域
+    .layout-logo {
+      background: $logo-bg-color;
+
+      .logo {
+        height: $navbar-height;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        text-decoration: none;
+
+        img {
+          padding: 5px;
+          height: $navbar-height;
+        }
+
+        .title {
+          font-size: $logo-font-size;
+        }
+      }
+    }
+
+    // 菜单区域
+    .layout-menu {
+      overflow: auto;
+      height: calc(100vh - $navbar-height);
+      padding: 5px 0;
+
+      .el-menu {
+        // height: calc(100vh - $navbar-height);
+        background-color: $menu-bg-color;
+        border: none;
+
+        // 一级菜单项和下级菜单项
+        .el-menu-item, .el-sub-menu__title {
+          // border-top-left-radius: 20px;
+          // border-bottom-left-radius: 20px;
+          border-radius: 10px;
+
+          display: flex;
+          gap: 0.5vw;
+          font-size: $menu-font-size;
+          color: #FFFFFF;
+        }
+
+        // 悬浮时的颜色
+        .el-menu-item:hover {
+          background-color: $menu-hover-color !important;
+          color: #000000;
+        }
+
+        .el-sub-menu__title:hover {
+          color: #000000;
+        }
+
+        // 选中时的颜色
+        .el-menu-item.is-active {
+          background-color: $menu-active-color !important;
+          color: #000000;
+        }
+      }
+    }
+  }
+
+  // 主体区域
+  .layout-main {
+    min-height: 100%;
+    // margin-left过渡时间
+    transition: margin-left $transition-time;
+    position: relative;
+
+    // 导航栏
+    .layout-navbar {
+      height: $navbar-height;
+      overflow: hidden;
+      background: $navbar-bg-color;
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+      align-items: center;
+
+      .left-container {
+        .hamburger-container {
+          height: calc($navbar-height / 2);
+          width: calc($navbar-height / 2);
+          cursor: pointer;
+          transition: background .3s;
+          -webkit-tap-highlight-color:transparent;
+
+          &:hover {
+            background: rgba(0, 0, 0, .025)
+          }
+        }
+      }
+
+      .title {
+        margin: auto;
+        font-size: 1.6vw;
+      }
+
+      .right-container {
+        margin-left: auto;
+        display: flex;
+        align-items: center;
+        font-size: 1vw;
+        cursor: pointer;
+
+        .note-wrapper {
+          display: flex;
+
+          .item {
+            display: flex;
+            align-items: center;
+            margin-right: 0.2vw;
+          }
+        }
+
+        .avatar-wrapper {
+          display: flex;
+          align-items: center;
+          gap: 2px;
+          margin-right: 10px;
+          cursor: pointer;
+
+          &:focus {
+            outline: none;
+          }
+
+          .username {
+            font-size: 1rem;
+          }
+        }
+      }
+    }
+
+    // 内容区域
+    .app-main {
+      background-color: $app-main-bg-color;
+      height: calc(100vh - $navbar-height);
+      width: 100%;
+      padding: 1vh 0.5vw;
+      overflow: auto;
+    }
+  }
+
+  .admin-module {
+    height: 100%;
+    background-color: $module-bg-color;
+    padding: 1vh 0.5vw;
+    border-radius: 15px;
+    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1vh;
+  }
+
+  .card-item {
+    background-color: #FFFFFF;
+    border: 1px solid #FFFFFF;
+    border-radius: 10px;
+    box-shadow: 5px 5px 5px #CFCFCF;
+  }
+}
+
+// 打开侧边栏
+.openSidebar {
+  .layout-sidebar {
+    width: $sidebar-width;
+  }
+
+  .layout-main {
+    margin-left: $sidebar-width;
+  }
+}
+
+// 隐藏侧边栏
+.hideSidebar {
+  .layout-sidebar {
+    width: $hide-sidebar-width;
+  }
+
+  .layout-main {
+    margin-left: $hide-sidebar-width;
+  }
+}