feat: add top navbar for front page

2025-11-15 05:33:44 +08:00 · 2024-05-16 20:10:00 +08:00
parent 5a8fe5a6cf
commit d98b08d7cd
22 changed files with 836 additions and 633 deletions
--- a/web/src/assets/css/home.styl
+++ b/web/src/assets/css/home.styl
@@ -0,0 +1,156 @@
+.home {
+  display: flex;
+  height 100vh
+  width 100%
+  flex-flow column
+
+  .header {
+    display flex
+    justify-content space-between
+    height 50px
+    line-height 50px
+    background-color #1E1F22
+    padding-right 20px
+
+    .banner {
+      display flex
+
+      .logo {
+        display flex
+        padding 5px
+        cursor pointer
+
+        .el-image {
+          width 40px
+          height 40px
+        }
+      }
+
+      .title {
+        display: flex;
+        color: #ffffff;
+        font-size: 20px;
+        padding 0 10px
+      }
+    }
+
+    .navbar {
+      .user-info {
+        width 100%
+        padding 5px 0;
+
+        .el-dropdown-link {
+          width 100%;
+          cursor: pointer
+          display flex
+
+          .el-image {
+            width: 36px;
+            height: 36px;
+            border-radius: 50%
+          }
+
+          .el-icon {
+            color: #cccccc;
+            line-height 24px;
+          }
+        }
+
+      }
+    }
+  }
+
+
+  .main {
+    width 100%
+    display flex
+    flex-flow row
+
+    .navigator {
+      display flex
+      flex-flow column
+      width 50px
+      padding 10px 1px
+      border-right: 1px solid #3c3c3c
+      background-color: #1E1F22
+
+      .nav-items {
+        margin-top: 10px;
+        padding 0 5px
+
+        li {
+          margin-bottom 15px
+
+          a {
+            color #DADBDC
+            border-radius 10px
+            width 40px
+            height 40px
+            display flex
+            justify-content center
+            align-items center
+            cursor pointer
+            background-color #414348
+
+            .el-image {
+              border-radius 10px
+            }
+
+            .iconfont {
+              font-size 20px
+            }
+          }
+
+          a:hover, a.active {
+            color #47fff1
+            background-color #0F7A71
+          }
+
+          .title {
+            font-size: 12px
+            padding-top: 5px
+            color: #e5e7eb;
+            text-align: center;
+          }
+
+          .active {
+            color #47fff1
+          }
+        }
+      }
+
+    }
+
+    .content {
+      width: 100%
+      box-sizing: border-box
+      background-color #282c34
+    }
+  }
+
+}
+
+.el-popper {
+  .more-menus {
+    li {
+      padding 10px 15px
+      cursor pointer
+      border-radius 5px
+      margin 5px 0
+
+      .el-image {
+        position: relative
+        top 5px
+        right 5px
+      }
+
+      &:hover {
+        background-color #f1f1f1
+      }
+    }
+
+    li.active {
+      background-color #f1f1f1
+    }
+  }
+}