1.整体样式修改

gaoluyang

昨天 31bc616ad716daf2ba0ec7fa38352644b6293dfc

 src/layout/components/Navbar.vue

@@ -158,15 +158,19 @@
</script>



<style lang='scss' scoped>

.navbar {

  height: 50px;

  overflow: hidden;

  position: relative;

  background: var(--navbar-bg);

  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

.navbar {
  height: 56px;
  overflow: hidden;
  position: relative;
  background: var(--navbar-bg);
  border: 1px solid rgba(216, 225, 219, 0.9);
  border-radius: 22px;
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-sm);
  padding: 0 18px;


  .hamburger-container {

    line-height: 46px;

    line-height: 52px;
    height: 100%;

    float: left;

    cursor: pointer;

@@ -174,7 +178,7 @@
    -webkit-tap-highlight-color: transparent;



    &:hover {

      background: rgba(0, 0, 0, 0.025);

      background: var(--navbar-hover);
    }

  }



@@ -192,30 +196,32 @@
    vertical-align: top;

  }



  .right-menu {

    float: right;

    height: 100%;

    line-height: 50px;

    display: flex;

  .right-menu {
    float: right;
    height: 100%;
    align-items: center;
    display: flex;


    &:focus {

      outline: none;

    }



    .right-menu-item {

      display: inline-block;

      padding: 0 8px;

      height: 100%;

      font-size: 18px;

      color: var(--navbar-text);

      vertical-align: text-bottom;

    .right-menu-item {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      color: var(--navbar-text);
      border-radius: 14px;


      &.hover-effect {

        cursor: pointer;

        transition: background 0.3s;



        &:hover {

          background: rgba(0, 0, 0, 0.025);

          background: var(--navbar-hover);
        }

      }



@@ -234,7 +240,7 @@
    }



    .notification-container {

      margin-right: 20px;

      margin-right: 12px;
      display: flex;

      align-items: center;

      cursor: pointer;

@@ -246,28 +252,43 @@
      }

    }



    .avatar-container {

      margin-right: 40px;



      .avatar-wrapper {

        margin-top: 5px;

        position: relative;



        .user-avatar {

          cursor: pointer;

          width: 40px;

          height: 40px;

          border-radius: 50px;

        }



        i {

          cursor: pointer;

          position: absolute;

          right: -20px;

          top: 14px;

          font-size: 12px;

        }

      }

    .avatar-container {
      margin-right: 4px;
      height: 100%;
      display: flex;
      align-items: center;

      :deep(.el-dropdown) {
        height: 100%;
        display: flex;
        align-items: center;
      }

      .avatar-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 6px 10px 6px 6px;
        height: 44px;
        border-radius: 999px;
        background: rgba(247, 250, 248, 0.92);
        border: 1px solid var(--surface-border);

        .user-avatar {
          cursor: pointer;
          width: 34px;
          height: 34px;
          border-radius: 50px;
        }

        i {
          cursor: pointer;
          position: static;
          font-size: 12px;
        }
      }
    }

  }

}

@@ -275,8 +296,11 @@
</style>



<style lang="scss">

.notification-popover {

  padding: 0 !important;

.notification-popover {
  padding: 0 !important;
  border-radius: 20px !important;
  border: 1px solid var(--surface-border) !important;
  box-shadow: var(--shadow-md) !important;
  

  .el-popover__title {

    display: none;