.wrapper_header{
    height: 48px;
    display: flex;
    @include theme('background-color','header_bgColor');
    .logo{
        width: 210px;
        background-position: center;
        background-repeat: no-repeat;
        // background-size: 100% auto;
        background-size: contain;
        margin-left: 8px;
         //border: 1px solid #fff;
        display: flex;
        align-items: center;
        padding-left: 8px;

        img{
            height: 85%;
        }
    }
    .menu{
        // margin-left: 160px;
        //margin-left: 20px;
        display: flex;
        height: 100%;
        position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
        ul{
            display: flex;

        }
        li{
            height: 100%;
            font-size: 14px;
            color: #BFBFBF;
            display: flex;
            align-items: center;
            //margin: 0 20px;
            min-width: 120px;
            //border: 1px solid #fff;
            cursor: pointer;
            transition: all 0.3s ease;
            user-select: none;
            padding: 0 20px;
            justify-content: center;
            .icon{
                margin-right: 10px;
            }

            &:hover{
                color: #fff;
            }
            &.active{
                color: #ffffff;
            }
            &:active{
                color: #c5cbdd;
            }
        }

		.mySwiper {
			left: 24px;
			right: 24px;
		}
		.menuBtn{
			cursor: pointer;
			position: absolute;
			color: #fff;
			top: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			font-size: 20px;
			color: #acb5ce;
			&:hover{
				color: #fff;
			}
			&.menuPrev{
				right: 0;
			}
			&.menuNext{
				left: 0;
			}
			&.swiper-button-disabled{
				// color: #000;
				opacity: 0.2;
			}
			&.swiper-button-lock{
				display: none;
			}
		}
		.swiper-slide{
			width: auto;
		}
		.item{
			height: 100%;
			font-size: 14px;
			//color: #bfbfbf;
			color: rgba(#fff,0.6);
			display: flex;
			align-items: center;
			margin: 0 20px;
			cursor: pointer;
			transition: all 0.3s ease;
			user-select: none;

			&:hover{
				color: #fff;
			}
			&.active{
				color: #ffffff;
			}
			&:active{
				color: #c5cbdd;
			}

			.icon{
				margin-right: 10px;
			}
		}

        .activeLine{
            position: absolute;
            width: 32px;
            // background: #4172f6;
            height: 2px;
            border-radius: 2px;
            left: 0;
            display: none;
            bottom: 6px;
            transition: all 0.4s ease;
            @include themeColor('background-color','color')
        }
    }
    .iconBox{
        color:#acb5ce;
        display: flex;
        .iconfontSpan{
            width: 18px;
            height: 18px;
            margin: 0 12px;
            text-align: center;
            line-height: 18px;
            i{
                cursor: pointer;
            }
            &:hover{
                color: #fff;
            }
            &:active{
                color: #c5cbdd;
            }
        }
        .el-badge__content{
            background-color: #ff4d4f;
            border:none;
            right: 8px;
        }


        .signout{
            // margin:0 20px;
            margin-right: 26px;
            margin-left: 10px;
            font-size: 16px;
            color: #fff;
            i{
                cursor: pointer;
            }
        }
    }
    .userInfo{
        color:#fff;
        padding:0 10px;
        position: relative;
        transition: all 0.2s ease;
        height: 100%;
        display: flex;
        align-items: center;
        line-height: 20px;
        font-size: 14px;
        margin-right: 10px;

        img{
            // height: 25px;
            height: 20px;
            border-radius: 50%;
            display: block;
        }
        .avator{
            margin-right: 8px;
        }
        .name{
        }
        &:hover{
            // background: #272e40;
            // @include themeColor('color','sidebar_menu2_hoverColor');
            @include themeColor('background-color','sidebar_menu2_activeBgColor');
            .header_el-popover{
                visibility: visible;
                opacity: 1;
            }
        }

        .header_el-popover{
            // display:none;
            visibility: hidden;
            opacity: 0;
            right: 0;
            transition: all 0.2s ease;
            top: 50px;
            padding: 10px;
            padding-bottom: 20px;

            &.theme_show{
                width: 285px;
            }
            .popper__arrow{
                top: -6px;
                // left: 50%;
                right: 30px;
                margin-right: 3px;
                border-top-width: 0;
                border-bottom-color: #fff;

            }
        }






    }
}
.header_popover{
	width: 285px;
	padding: 30px;
	border-radius: 8px !important;
	//background: #999 !important;

	.header_version{
		position: absolute;
		right: 0;
		bottom: 0;
		text-align: center;
		font-size: 12px;
		color: #aaa;
		background: #ecedf4;
		padding: 1px 5px;
		border-radius: 3px;
	}
}
.header_userInfo_menu{
	li{
		height: 30px;
		line-height: 30px;
		text-align:center;
		font-size: 14px;
		color:#333333;
		cursor: pointer;
		position: relative;
		border-radius: 6px !important;
		display: flex;
		align-items: center;
		//justify-content: center;
		padding-left: 20px;
		//a{
		//	color:#333333;
		//}
		i{
			//color:#8e8e8e;
			font-size: 16px;
			margin-right: 8px;
		}
		&.active,&:hover{
			//background: #f5f7f8;
			@include themeColor('background-color','active',0.1);
			@include themeColor('color','active');
		}
	}
}


.noticeBox{
    // position: fixed;
    // z-index: 100;
    // right: 20px;
    // top: 20px;
    // background: #fff;

    padding: 0;
    width: 320px;
    height: 490px;
    max-height: 60vh;
    display: flex;
    flex-direction: column;
    .tabs{
        height: 48px;
        .item{
            padding-top: 16px;
        }
    }
    .body{
        flex: 1;
        position: relative;
        .item{
            // margin: 0 16px;
            height: 60px;
            // border: 1px solid #000;
            display: flex;
            align-items: center;
            margin: 8px 16px 0 16px;
            border-radius: 8px;
            // margin-top: 0;
            // margin-bottom: 0;
            cursor: pointer;
            transition: all 0.3s ease;
            .iconBox{
                width: 32px;
                height: 32px;
                background: #000;
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                margin-left: 8px;
                margin-right: 12px;
            }
            .info{
                flex: 1;
                margin-right: 16px;
                .row1{
                    max-height: 36px;
                    line-height: 18px;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    -webkit-line-clamp: 2; /* 显示3行文本 */
                }
                .row2{
                    color: #8c8c8c;
                    font-size: 12px;
                    margin-top: 5px;
                }
            }
            &:nth-of-type(1n){
                .iconBox{
                    background: #ec685f;
                }
            }
            &:nth-of-type(2n){
                .iconBox{
                    background: #1890ff;
                }
            }
            &:nth-of-type(3n){
                .iconBox{
                    background: #fa8c16;
                }
            }
            &:nth-of-type(4n){
                .iconBox{
                    background: #52c41a;
                }
            }
            &:nth-of-type(5n){
                .iconBox{
                    background: #13a8a8;
                }
            }

            &:hover{
                // background: #000;
                @include themeColor("background-color",'hover',0.1)
            }
            &:active{
                // background: #000;
                @include themeColor("background-color",'active',0.1)
            }
        }
    }
    .foot{
        display: flex;
        border-top: 1px solid #f0f0f0;
        height: 48px;
        text-align: center;
        line-height: 48px;
        >div{
            flex: 1;
            cursor: pointer;
            user-select: none;
            &:nth-of-type(1){
                border-right: 1px solid #f0f0f0;
            }
            &:hover{
                @include themeColor("color",'hover');
                @include themeColor("background-color",'hover',0.1);
            }
            &:active{
                @include themeColor("color",'active');
                @include themeColor("background-color",'active',0.1);
            }
        }
    }
}