web2468/src/layout/Navbar/styles.module.scss

.appbar{
  display: flex;
  flex-direction: column;
  position: fixed;
  z-index: var(--zindex-in);
  align-items: center;
  justify-content: flex-start;
  background:var(--widget);
  width: 100%;
  //height: 4rem;
  height: auto;
  &.mobile{
    background:transparent;
    //height: 8.5rem;
    height: auto;
    //overflow-x: auto;
    //background-color: rgba(0, 0, 0, 0); /* 使用透明背景 */
    //pointer-events: auto;
    pointer-events: none;
  }
  &.hide_header{
    //height:3.75rem;
    //height: auto;
  }
}
.header{
  position: relative;
  //height:100%;
  height:2.49rem;
  width:100%;
  padding: 0px 40px;
  //background: var(--widget);
  background: linear-gradient(to right, #3d1915, #582a1e, #3d1915);
  //border-bottom: 1px solid var(--border);
  border-bottom: 0.05rem solid #4c1a0e;
  padding-left:85px;
  box-shadow:var(--widget-shadow);
  pointer-events: auto;
  transition: padding .3s ease;
  &.nav_open{
    //padding-left:270px;
    padding-left:16.9rem;
  }
  &_mobile{
    //position:fixed;
    //position: absolute;
    position: relative;
    height:2.49rem;
    padding: 0px 0px;
    z-index: 2;
    pointer-events: auto;
  }
  & .header_left{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 0.5rem;
    gap: 0.4rem;
  }
}
.header_room{
  display: flex;
  //position: fixed;
  //position: absolute;
  position: relative;
  height: 4.75rem !important;
  background-color:var(--widget);
  z-index:1;
  padding: 0.75rem;
  margin-bottom: -1.15rem;
  //margin-top: -1px;
  //top: 3.75rem;
  //margin-top: 3.75rem;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  pointer-events: auto;
}
.header_install{
  display: flex;
  position: relative;
  z-index: 2;
  width: 100%;
  & .install_banner{
    position: relative !important;
    transition: none !important;
    top: 0 !important;
  }
  pointer-events: auto;
  &_desk{
    padding-left:5.3rem;
  }
  &.nav_open{
    padding-left:16.9rem;
  }
  transition: padding .3s ease;
}
.btn_sign_in{
  //padding: 12px 5px !important;
  width: 7rem !important;
  height:2.75rem !important;
  margin-right: 0.5rem !important;
  font-weight: 600 !important;
  &_mobile{
    background-color: var(--nav-item-hover) !important;
    width: 5.8rem !important;
    height:2rem !important;
  }
}
.btn_sign_up{
  width: 7rem !important;
  height:2.75rem !important;
  text-transform:none !important;
  color:#fff !important;
  background-color: rgba(29,128,58,0.7) !important;
  background-image:conic-gradient(from 1turn,rgba(88,175,16,1),rgba(29,128,58,1));
  font-weight: 600 !important;
  margin-right: 1.5rem !important;
  &_mobile{
    width: 5.8rem !important;
    height:2rem !important;
    margin-right: 0.1rem !important;
  }
}
.mobile-top-navigate-list{
  display: flex;
  height: 100%;
  width: auto;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
}
.mb-top-navigate-item{
  flex: none;
  display: flex;
  height: 3.25rem;
  padding: 0 0.75rem;
  border-radius: 2rem;
  align-items: center;
  justify-content: center;
  &.active{
    background-color: var(--nav-item-hover);
  }
  span{
    margin-left: 0.375rem;
    font-size: 1rem;
    color: var(--header);
    font-weight: 600;
  }
  svg{
    width: 1.28rem;
    height: 1.28rem;
  }
}
.user_info{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  position: relative;
  height: 100%;
  gap: 0.5rem;
  padding:0 0.5rem;
  border-bottom-left-radius: 3rem;
  border-top-left-radius: 3rem;
  background-color: rgba(100, 54, 27, 0.86);
  transition: padding .3s ease;
  min-width: 53%;
  & .info_right{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.3rem;
    & .nick{
      color: #FFFFFF;
      max-width: 3.5rem;
      white-space: nowrap; /* 防止文本换行 */
      overflow: hidden; /* 隐藏超出部分 */
      text-overflow: ellipsis; /* 显示省略号 */
    }
    & .avatar_con{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background-color: #4a2d13;
      border: 1px solid #76502b;
      padding: 0.05rem;
      min-width: 1.9rem;
      min-height: 1.9rem;
      & .avatar{
        height: 1.9rem;
        width: auto;
        border-radius: 50%;
      }
    }
  }
  & .info_left{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.1rem;
    & .coin{
      margin-top: 0.2rem;
      width: 2.03rem;
      height: auto;
    }
    & .score{
      font-size: 0.9rem;
      color: #FFFFFF;
    }
  }
}