@media screen and (min-width:@mobile-device) {

    // 移动端弹出层样式
    .pollup {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        transition: all 0.3s ease;
        width: 60%;
        height: 100%;
        color: @textColor;
        .shadow(2,10);
        .font-normal();
        background-color: @bgColor;
        // 右上角的关闭键
        .out {
            .flexbox();
            .ball(3rem,rgb(243, 45, 45));
            position: absolute;
            z-index: 5;
            cursor: pointer;
            font-size: 2rem;
            right: 8px;
            top: 5px;
            color: @hoverTextColor;
        }
        .right {
            justify-content: space-between;
            color: @textColor;
            font-size: @big-text;
            align-items: center;
            position: relative;
            // 头像以及个人信息
            .container {
                .info-box {
                    width: 100%;
                    position: relative;
                    height: 14rem;
                    display: flex;
                    align-items: center;
                    background-size: 100% auto;
                    .font-normal();
                    .imgcontainer {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        z-index: -5;
                        opacity: 0.8;
                        filter: blur(1px) brightness(0.6);
                        background-size: cover;
                    }
                    .loginbox {
                        width: 100%;
                        display: flex;
                        color: @textColor;
                        padding: @padding-general 0;
                        flex-direction: column;
                        justify-content: space-between;
                        .up {
                            .flexbox(column);
                            text-align: center;
                            padding: 0 1rem;
                            .avatar {
                                flex-shrink: 0;
                                width: 7rem;
                                height: 7rem;
                            }
                            .info{
                                color: @textColor;
                                .textShadow();
                            }
                            h2 {
                                margin: @margin-general 0;
                                font-size: 2rem;
                            }
                        }

                    }
                }

                .avatar {
                    width: 5rem;
                    height: 5rem;
                    border-radius: 50%;
                    overflow: hidden;
                    background-color: #fff;
                    z-index: 2;
                    transition: all ease 1s;
                    img {
                        height: 100%;
                        width: 100%;
                        object-fit: cover;
                    }
                }
            }
        }
        .menu-list {
            display: flex;
            flex-direction: column;
            margin-top: 30px;
            font-size: @big-text;
            font-weight: 600;
            a {
                padding: 10px;
                cursor: pointer;
                display: flex;
                align-items: center;
                color: @textColor;
                &:active {
                    color: @hoverTextColor;
                    background-color: @activeColor;
                }
            }
        }

        .button-login {
            display: flex;
            flex-direction: column;
            padding: @padding-general;
            .el-button {
                margin: 0;
                height: 4rem;
                margin-top: 2rem;
            }
        }
    }
}
@media  screen and (min-width: @pad-device) { 
  .up {
    flex-direction:row !important;
    text-align: start;
  }
}
@media  screen and (min-width: @smallpc-device){
    .pollup{
        display: none;
    }
}