.headerLayout{ background: url('~@/assets/img/titleBg.png') no-repeat center top; background-size: 100% 100%; height: 0.92rem; text-align: center; display: flex; white-space: nowrap; .tabList{ box-sizing: border-box; padding-top: 0.24rem; padding-left: 0.48rem; .tabButton{ font-size:.16rem; font-family:PingFang-SC-Bold,PingFang-SC; color: #30DDF4; background: rgba(48,221,244,0.15); border: 1px solid #77E2FF; border-radius: 2px; margin-right: .12rem; float: left; &.is-active{ color: #000E42; background: #30DDF4; } } } h3{ font-size: .36rem; font-weight: normal; font-family: ZhenyanGB-Regular,ZhenyanGB; color: #fff; letter-spacing: 3px; margin: .24rem auto; margin-left: -.48rem; } .header-right-box { display: flex; justify-content: flex-end; .time{ font-size:.2rem; font-family:PingFang-SC-Bold,PingFang-SC; font-weight:bold; color: #30DDF4; padding-top: .24rem; } .right-menu { padding-top: .18rem; padding-left: .12rem; &:focus { outline: none; } .right-menu-item { padding: 0 .08rem; height: 100%; font-size: .18rem; color: #5a5e66; vertical-align: text-bottom; &.hover-effect { cursor: pointer; transition: background .3s; &:hover { background: rgba(0, 0, 0, .025) } } } .avatar-container { display: block; margin-right: .48rem; .avatar-wrapper { position: relative; .user-avatar { cursor: pointer; width: .4rem; height: .4rem; border-radius: .1rem; } .el-icon-caret-bottom { cursor: pointer; position: absolute; right: -.2rem; top: .12rem; font-size: .12rem; } } } } } } .no-line { text-decoration: none; }