:root {
    --qsm-primary: #FF6B35;
    --qsm-bg-light: #FFFFFF;
    --qsm-gray-mid: #CED4DA;
    --qsm-gray-dark: #212529;
    --qsm-gray-text: #868E96;
    --qsm-title:#212529;
    --qsm-text:#495057;
    --qsm-subtext:#CED4DA;
    --qsm-linktext:#FF6B35;
    --qsm-lightgray:rgba(0,0,0,.03);
    --qsm-bordercolor:#e3e3e3;
    --qsm-gray-bg:#f7f7f7;
    --qsm-red:#ff0033;
    --qsm-page-maxwidth:1720px;
    --qsm-header-height:72px;
}
@media screen and (min-width: 1720px) {
    :root{
        --qsmLeftNavWidth: 268px;
        --qsmContentPadding: 32px;
        --qsmNoteInfoDetailWidth: 1300px;
        --qsmNoteInfoDetailHeight: calc(100vh - 2 * 32px);
        --qsmNoteInfoMarginTop: 32px;
        --qsmNoteInfoCloseBtnMargin:32px;
    }
}

@media screen and (min-width: 1400px) and (max-width: 1719px){
    :root{
        --qsmLeftNavWidth: 246px;
        --qsmContentPadding: 24px;
        --qsmNoteInfoDetailWidth: 1200px;
        --qsmNoteInfoDetailHeight: calc(100vh - 2 * 24px);
        --qsmNoteInfoMarginTop: 24px;
        --qsmNoteInfoCloseBtnMargin:24px;
    }

}

@media screen and (min-width: 1160px) and (max-width: 1399px) {
    :root{
        --qsmLeftNavWidth: 238px;
        --qsmContentPadding: 24px;
        --qsmNoteInfoDetailWidth: 1020px;
        --qsmNoteInfoDetailHeight: calc(100vh - 2 * 12px);
        --qsmNoteInfoMarginTop: 12px;
        --qsmNoteInfoCloseBtnMargin:12px;
    }

}

@media screen and (min-width: 960px) and (max-width: 1159px) {
    :root{
        --qsmLeftNavWidth: 220px;
        --qsmContentPadding: 24px;
        --qsmNoteInfoDetailWidth: 900px;
        --qsmNoteInfoDetailHeight: calc(100vh - 2 * 12px);
        --qsmNoteInfoMarginTop: 12px;
        --qsmNoteInfoCloseBtnMargin:12px;
    }

}

@media screen and (min-width: 696px) and (max-width: 959px) {
    :root{
        --qsmLeftNavWidth: 220px;
        --qsmContentPadding: 12px;
        --qsmNoteInfoDetailWidth: 100%;
        --qsmNoteInfoDetailHeight: calc(100vh);
        --qsmNoteInfoMarginTop: 0px;
        --qsmNoteInfoCloseBtnMargin:12px;
    }

}

@media screen and (max-width: 695px) {
    :root{
        --qsmLeftNavWidth: 220px;
        --qsmContentPadding: 12px;
        --qsmNoteInfoDetailWidth: 100%;
        --qsmNoteInfoDetailHeight: calc(100vh);
        --qsmNoteInfoMarginTop: 0px;
        --qsmNoteInfoCloseBtnMargin:12px;
    }
}



#qsmApp{
    max-width: var(--qsm-page-maxwidth);margin: 0 auto;background-color: var(--qsm-bg-light);
}
.card {
    background: white;
    border: 1px solid var(--qsm-gray-mid);
    box-shadow: 2px 2px 8px rgba(206, 212, 218, 0.15);
}
.primary-btn {
    background: var(--qsm-primary);
    color: white;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.primary-btn:hover {
    background: #E55A2D;
    transform: translateY(0.5px);
}
.dark-banner {
    background: var(--qsm-gray-dark);
    color: var(--qsm-gray-mid);
    padding: 4rem 0;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scrollbar-width: none;
    /*color: var(--qsm-text);*/
}
ul{
    list-style: none;
}
html{
    background-color: #F8F9FA;min-height: 100vh;
}
button, input{
    outline: none;
}
input::placeholder{
    color: rgba(0,0,0,.3);
}
a{
    text-decoration: none;
    background-color: transparent;
    color: var(--qsm-primary);
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}
.header-container{
    display: flex;flex-direction: column;justify-content: center;align-items: center;
    width: 100vw;position: fixed;left: 0;top: 0;z-index: 10;
}
.header-container .page-top{
    display: flex;justify-content: space-between;height: var(--qsm-header-height);align-items: center;
    padding: 0 24px;max-width: var(--qsm-page-maxwidth);width: 100%;
    background-color: var(--qsm-bg-light);
}
.header-container .page-top .logo{
    width: 90px;
}
.top-search-area {
    position: relative;
}
.top-search-area input{
    width: 450px;height: 40px;background-color: rgba(0,0,0,.04);border: none;border-radius: 50px;padding: 0 80px 0 20px;
    font-size: 16px;color: var(--qsm-text);
}
.top-search-area input::placeholder{
    color: rgba(0,0,0,.5);
}
.top-search-area .icon-area{
    position: absolute;right: 0;top: 0;height: 40px;width: 40px;display: flex;justify-content: center;align-items: center;cursor: pointer;
}
.top-search-area .icon-area svg{
    height: 20px;width: 20px;color: rgba(0,0,0,.3);
}
.top-search-area .icon-area-clear{
    position: absolute;right: 40px;top: 0;height: 40px;width: 40px;display: flex;justify-content: center;align-items: center;cursor: pointer;
}
.top-search-area .icon-area-clear svg{
    height: 20px;width: 20px;color: rgba(0,0,0,.7);
}


.top-search-area-m {
    display: flex;width: 100%;
}
.top-search-area-m .input-search-m{
    position: relative;flex-grow: 1;
}
.top-search-area-m input{
    width: 100%;height: 40px;background-color: rgba(0,0,0,.04);border: none;border-radius: 50px;padding: 0 80px 0 20px;
    font-size: 16px;color: var(--qsm-text);
}
.top-search-area-m input::placeholder{
    color: rgba(0,0,0,.5);
}
.top-search-area-m .icon-area{
    position: absolute;right: 0;top: 0;height: 40px;width: 40px;display: flex;justify-content: center;align-items: center;cursor: pointer;
}
.top-search-area-m .icon-area svg{
    height: 20px;width: 20px;color: rgba(0,0,0,.3);
}
.top-search-area-m .icon-area-clear{
    position: absolute;right: 40px;top: 0;height: 40px;width: 40px;display: flex;justify-content: center;align-items: center;cursor: pointer;
}
.top-search-area-m .icon-area-clear svg{
    height: 20px;width: 20px;color: rgba(0,0,0,.7);
}
.search-area-m-cancel{
    display: flex;width: 66px;height: 40px;justify-content: center;align-items: center;font-size: 16px;color: var(--qsm-gray-text);
}


.top-right-area{
    display: flex;align-items: center;
}
.top-right-area button{
    padding: 0 16px;height: 40px;border: none;background: none;font-size: 16px;cursor: pointer;border-radius: 50px;
}
.top-right-area button:hover{
    background-color: rgba(0,0,0,.03);
}
.index-main{
    display: flex;
}
.index-main .main-content{
    width: 100%;padding-top: var(--qsm-header-height);
    padding-left: calc(var(--qsmLeftNavWidth) + var(--qsmContentPadding) + 12px);
    padding-right: var(--qsmContentPadding);min-height: 100vh;
}
.index-main .main-content .none-content{
    display: flex;justify-content: center;align-items: center;min-height: 200px;color: var(--qsm-gray-text);
}
.index-main .sider-content{
    display: flex;flex-direction: column;flex-shrink: 0;width: var(--qsmLeftNavWidth);
    margin-top: var(--qsm-header-height);margin-left: 12px;
    position: fixed;overflow: visible;height: calc(100vh - var(--qsm-header-height));
    padding-bottom: 32px;
}
.index-main .sider-content .left-side{
    overflow-y: scroll;scrollbar-width: none;
}
.index-main .sider-content ul{
    height: calc(100vh - var(--qsm-header-height));
}
.index-main .sider-content ul li{
    display: flex;font-size: 16px;font-weight: bold;
    align-items: center;width: 100%;height: 48px;cursor: pointer;padding-left: 16px;
    border-radius: 100px;margin-bottom: 8px;
}
.index-main .sider-content ul li:hover{
    background-color: var(--qsm-lightgray) !important;
}
.index-main .sider-content ul li.active{
    background-color: var(--qsm-lightgray);
}
.index-main .sider-content ul li span{
    margin-left: 12px;color: var(--qsm-title);line-height: 1;
}
.index-main .sider-content ul li svg{
    width: 20px;height: 20px;
}
.index-main .sider-content ul li svg use{
    color: var(--qsm-title);
}
.index-main .sider-content ul li .nav-avatar{
    width: 24px;height: 24px;
}
.index-main .sider-content ul li .nav-avatar img{
    object-fit: cover;width: 100%;height: 100%;border-radius: 50%;
}
.index-main .sider-content ul .login-btn-li{
    padding: 0;
}
.index-main .sider-content ul li button{
    width: 100%;height: 100%;border-radius: 100px;
    outline: none;border: none;background-color: var(--qsm-primary);
    cursor: pointer;
}
.index-main .sider-content ul li button span{
    color: #FFFFFF;font-size: 16px;
}
.index-main .sider-content ul li.left-bottom-more-btn{
    position: absolute;bottom: 0;background-color: #FFFFFF;margin-bottom: 24px;
}
.index-main .sider-content ul li.left-bottom-more-btn .el-dropdown{
    width: 100%;height: 100%;
}
.index-main .sider-content ul li.left-bottom-more-btn .drop-touch-btn{
    width: 100%;height: 100%;display: flex;align-items: center;outline: none;
}
.header-container .drop-touch-btn{
    width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;
}
.header-container .drop-touch-btn svg{
    width: 20px;height: 20px;
}
.left-nav-drop-container{
    width: var(--qsmLeftNavWidth);padding: 12px;border-radius: 24px;
}
.left-nav-drop-container .item a:hover{
    background-color: var(--qsm-lightgray) !important;
}
.left-nav-drop-container .item a{
    color: var(--qsm-text);font-size: 16px;
    display: flex;align-items: center;padding: 8px 4px;border-radius: 6px;
}
.left-nav-drop-container .el-divider--horizontal{
    margin: 6px 0px;
}
.index-main .sider-content .web-info{
    color: var(--qsm-gray-text);font-size: 12px;padding: 12px;margin-bottom: 50px;
}
.index-main .sider-content .web-info a{
    color: var(--qsm-gray-text);
}
.index-main nav{
    background-color: #ffffff;padding: 5px 5px;
    overflow-x: auto;overflow-y: hidden;scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;-ms-overflow-style: none;margin-bottom: 22px;

}
.index-main nav ul{
    display: flex;
}
.index-main nav ul li a{
    font-size: 16px;padding: 0 16px;height: 40px;display: flex;align-items: center;justify-content: center;
    border-radius: 50px;color: var(--qsm-text);white-space: nowrap;
}
.index-main nav ul li a:hover{
    background-color: rgba(0,0,0,.03);
}
.index-main nav ul li.on a{
    background-color: rgba(0,0,0,.03);
}

.index-main .content-list{
    display: flex;flex-wrap: wrap;width: 100%;
}
.index-main .content-list .clist-item{
    display: flex;flex-direction: column;
}
.index-main .content-list .clist-item .citem-top{
    display: flex;flex-direction: column;  flex: 1;border-radius: 16px;
    overflow: hidden;align-items: center;justify-content: center;cursor: pointer;
    background-color: #FFFFFF;
}
.index-main .content-list .clist-item .citem-top p{
    display: flex;flex-direction: column;font-size: 12px;color: var(--qsm-text);margin: 12px 12px 8px 12px;
}
.index-main .content-list .clist-item .citem-bottom{
    display: flex;justify-content: space-between;font-size: 12px;padding: 12px 12px 20px 12px;
}
.index-main .content-list .clist-item .citem-bottom .item-like{
    display: flex;align-items: center;cursor: pointer;
}
.index-main .content-list .clist-item .citem-bottom .item-like .ac-icon{
    display: flex;align-items: center;padding: 0 2px;
}
.index-main .content-list .clist-item .citem-bottom .item-like svg{
    width: 16px;height: 16px;
}
.index-main .content-list .clist-item .citem-bottom .item-like svg.is-active{
    color: var(--qsm-red);
}
.index-main .content-list .clist-item .item-m-img {
    display: flex;overflow: hidden;position: relative;width: 100%;height: 100%;
}
.index-main .content-list .clist-item .item-m-img::after {
    content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;
}
.index-main .content-list .clist-item .item-m-img:hover::after{
    background-color: rgba(0,0,0,.25);
}
.index-main .content-list .clist-item .item-m-img img{
    width: 100%; height: 100%; object-fit: cover;
}
.index-main .content-list .clist-item .item-m-img .item-type-icon{
    display: flex;position: absolute;top: 6px;right: 6px;
}
.index-main .content-list .clist-item .item-m-img svg{
    width: 20px;height: 20px;
}
.index-main .content-list .clist-item .item-m-img use{
    color: rgba(0, 0, 0,.2);
}
.index-main .content-list .clist-item .title-cover .item-type-icon{
    display: flex;position: absolute;top: 6px;right: 6px;
}
.index-main .content-list .clist-item .title-cover svg{
    width: 20px;height: 20px;
}
.index-main .content-list .clist-item .title-cover use{
    color: rgba(0, 0, 0,.2);
}
.index-main .content-list .clist-item .note-top-tip{
    display: none;padding: 4px 8px 4px 8px;font-size: 12px;background-color: var(--qsm-red);color: #FFFFFF;
    position: absolute;top: 10px;left: 10px;z-index: 2000;border-radius: 12px;
}
.index-main .profile-container .content-list .clist-item .note-top-tip{
    display: flex;
}
.index-main .content-list .clist-item .title-cover{
    width: 100%;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 10px;
    color: var(--qsm-text);
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    position: relative;
}
.index-main .content-list .clist-item .title-text {
    font-size: 22px;
    font-weight: bold;
    line-height: 1.3;
    letter-spacing: 8px;
    word-break: break-word;
}

.index-main .content-list .clist-item .item-u-avatar{
    display: flex;align-items: center;color: var(--qsm-title);
}
.index-main .content-list .clist-item .item-u-avatar img{
    width: 20px;height: 20px;border: 1px solid rgba(0,0,0,.08);border-radius: 50px;margin-right: 6px;
}


.index-main .content-list .clist-item .item-title{
    padding: 12px 12px 0px 12px;font-size: 14px;color: var(--qsm-text);  display: -webkit-box;             /* 必须是 -webkit-box 模式 */
    -webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;
}

.index-main .list-page-container{
    display: flex;justify-content: center; margin: 65px 0px;
}
.index-main .list-page-container .el-pagination .el-pager li{
    background-color: var(--qsm-bg-light);
}
.index-main .list-page-container .el-pagination button.is-disabled, .index-main .list-page-container .el-pagination button:disabled{
    background-color: var(--qsm-bg-light);
}
.index-main .list-page-container .el-pagination button{
    background-color: var(--qsm-bg-light);
}
.index-main .list-page-container .el-pager li.is-active, .index-main .list-page-container .el-pager li:hover{
    color: var(--qsm-primary);
}
.close-detail-dialog-btn{
    display: flex;align-items: center;justify-content: center;position: fixed;z-index: 2020;
    left: var(--qsmNoteInfoCloseBtnMargin);top: var(--qsmNoteInfoCloseBtnMargin);
    width: 40px;height: 40px;border-radius: 40px;background-color: rgba(0,0,0,.25);cursor: pointer;
}
.close-detail-dialog-btn svg{
    width: 20px;height: 20px;
}
.close-detail-dialog-btn svg use{
    color: #FFFFFF;
}
.note-detail-dialog{
    padding: 0 !important;
    width: var(--qsmNoteInfoDetailWidth) !important;
    height: var(--qsmNoteInfoDetailHeight) !important;
    margin: var(--qsmNoteInfoMarginTop)  auto !important;
    overflow: hidden !important;border-radius: 24px !important;
}
.note-detail-dialog .el-dialog__header{
    display: none;
}
.note-detail-dialog .el-dialog__body{
    height: 100%;
}
.note-detail-container{
    width: 100%;height: 100%;display: flex;justify-content: space-between;color: var(--qsm-text);
}
.note-detail-container .left-area{
    width: 60%;background-color: var(--qsm-gray-bg);
}
.note-detail-container .right-area{
    flex: 1;
}
.note-detail-container .left-area .note-image-con{
    height: 100%;
}
.note-detail-container .left-area .note-image-con .swiper-container{
    height: 100%;position: relative;overflow: hidden;
}
.note-detail-container .left-area .note-image-con .el-image{
    width: 100%;height: 100%;
}
.note-detail-container .left-area .swiper-pagination-bullet{
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));background: rgba(0,0,0,.36);
}
.note-detail-container .left-area .swiper-pagination-bullet-active{
    background:#FFFFFF;
}
.note-detail-container .left-area .swiper-button-next, .note-detail-container .left-area .swiper-button-prev{
    width: 28px;height: 28px;border-radius: 50px;background-color: rgba(0,0,0,.5);
    padding: 8px;color: #FFFFFF;
}
.note-detail-container .left-area .note-video-con{
    height: 100%;
}
.note-detail-container .left-area .article-container{
    height: 100%;overflow: auto;scrollbar-width: auto;padding: 24px;
}
.note-detail-container .left-area .article-container img{
    max-width: 100%;height: auto;object-fit: contain;
}
.note-detail-container .right-area{
    display: flex;flex-direction: column;position: relative;
}
.note-detail-container .right-area .author-info{
    padding: 24px;display: flex;align-items: center;
}
.note-detail-container .right-area .author-info .avatar-con{
    display: flex;align-items: center;justify-content: center;cursor: pointer;
    width: 40px;height: 40px;border-radius: 50px;overflow: hidden;
}
.note-detail-container .right-area .author-info .avatar-con img{
    width: 100%;height: 100%;
}
.note-detail-container .right-area .author-info .nickname-con{
    font-size: 16px;padding-left: 14px;cursor: pointer;
}

.note-detail-container .author-info-mobile{
    padding: 12px;display: none;align-items: center;
}
.note-detail-container .author-info-mobile .avatar-con{
    display: flex;align-items: center;justify-content: center;cursor: pointer;
    width: 40px;height: 40px;border-radius: 50px;overflow: hidden;margin-left: 50px;
}
.note-detail-page-con .author-info-mobile .avatar-con{
    margin-left: 0px !important;
}
.note-detail-container .author-info-mobile .avatar-con img{
    width: 100%;height: 100%;
}
.note-detail-container .author-info-mobile .nickname-con{
    font-size: 16px;padding-left: 14px;cursor: pointer;
}

.note-detail-container .right-area .right-main{
    height: calc(100% - 88px - 86px);overflow-y: scroll;padding-bottom: 36px;
}
.note-detail-container .right-area .note-title{
    padding: 0 24px;font-size: 18px;font-weight: bold;color: var(--qsm-title);
    line-height: 1;margin-bottom: 8px;
}
.note-detail-container .right-area .note-desc{
    padding: 0 24px;font-size: 16px;color: var(--qsm-text);
}
.note-detail-container .right-area .note-time{
    padding: 0 24px;margin-top: 8px;display: flex;justify-content: space-between;align-items: center;
}
.note-detail-container .right-area .note-time span{
    margin-right: 8px;
}
.note-detail-container .right-area .note-time svg{
    width: 20px;height: 20px;cursor: pointer;
}
.note-detail-container .right-area .note-tag{
    padding: 0 24px;font-size: 16px;color: #00308f;
}
.note-detail-container .right-area .note-tag *{
    margin-right: 6px;
}
.note-detail-container .right-area  .space-line{
    margin: 0 24px;height: 1px;background: var(--qsm-gray-bg);margin-top: 12px;
}
.note-detail-container .right-area .comment-container{
    padding: 0 24px;min-height: 200px;
}
.note-detail-container .right-area .comment-container .comment-empty{
    display: flex;flex-direction: column;justify-content: center;align-items: center;
    margin-top: 24px;
}
.note-detail-container .right-area .comment-container .comment-empty svg{
    width: 68px;height: 68px;
}
.note-detail-container .right-area .comment-container .comment-empty use{
    color: rgba(0,0,0,.2);
}
.note-detail-container .right-area .comment-container .comment-empty span{
    font-size: 16px;
}
.note-detail-container .right-area .ac-icon{
    padding: 0 4px;display: flex;align-items: center;justify-content: center;transform: translateY(1px);
}
.note-detail-container .right-area .comment-container .comment-item svg{
    width: 14px;height: 14px;margin-right: 2px;
}
.note-detail-container .right-area .comment-container .comment-parent{
    display: flex;margin-top: 12px;
}
.note-detail-container .right-area .comment-container .comment-parent .avatar img{
    width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;cursor: pointer;border-radius: 100%;object-fit: cover;
}
.note-detail-container .right-area .comment-container .comment-item .right{
    margin-left: 12px;flex: 1;
}
.note-detail-container .right-area .comment-container .comment-item .right .nickname{
    font-size: 14px;display: flex;justify-content: space-between;align-items: center;
}
.note-detail-container .right-area .comment-container .comment-item .right .nickname>div{
    display: flex;align-items: center;
}
.note-detail-container .right-area .comment-container .comment-item .right .nickname .con-op-btn{
    display: flex;align-items: center;justify-content: center;cursor: pointer;
}
.note-detail-container .right-area .comment-container .comment-item .right .nickname .con-op-btn svg{
    width: 18px;height: 18px;
}
.comment-container-popconfirm{
    box-shadow: var(--el-box-shadow-light);
}
.comment-container-popconfirm .con-op-con{
    display: flex;align-items: center;justify-content: center;cursor: pointer;flex-direction: column;
    font-size: 16px;color: var(--qsm-text);
}
.comment-container-popconfirm .el-popconfirm__action{
    margin: 0;
}
.comment-container-popconfirm .con-op-con>div{
    padding: 6px 4px;
}
.note-detail-container .right-area .comment-container .comment-item .right .nickname .tip{
    font-size: 10px;padding: 0px 4px;border-radius: 2px;margin-left: 6px;background-color: var(--qsm-gray-bg);
}
.note-detail-container .right-area .comment-container .comment-parent .right .content{
    font-size: 14px;color: var(--qsm-title);margin-top: 4px;white-space: pre-wrap;word-break: break-word;
}
.note-detail-container .right-area .comment-container .comment-parent .right .addrtime{
    font-size: 12px;display: flex;margin: 8px 0;
}
.note-detail-container .right-area .comment-container .comment-parent .right .addrtime span{
    margin-right: 8px;
}
.note-detail-container .right-area .comment-container .comment-parent .right .operator{
    font-size: 12px;display: flex;
}
.note-detail-container .right-area .comment-container .comment-parent .right .operator>div{
    display: flex;align-items: center;margin-right: 8px;cursor: pointer;
}
.note-detail-container .right-area .comment-container .comment-reply{
    display: flex;margin-left: 52px;margin-top: 10px;
}
.note-detail-container .right-area .comment-container .comment-reply .avatar img{
    width: 26px;height: 26px;display: flex;align-items: center;justify-content: center;cursor: pointer;border-radius: 100%;object-fit: cover;
}
.note-detail-container .right-area .comment-container .comment-reply .right{
    margin-left: 12px;
}
.note-detail-container .right-area .comment-container .comment-reply .right .nickname{
    font-size: 14px;display: flex;
}
.note-detail-container .right-area .comment-container .comment-reply .right .nickname div span:first-child{

}
.note-detail-container .right-area .comment-container .comment-reply .right .content{
    font-size: 14px;color: var(--qsm-title);margin-top: 4px;
}
.note-detail-container .right-area .comment-container .comment-reply .right .addrtime{
    font-size: 12px;display: flex;margin: 8px 0;
}
.note-detail-container .right-area .comment-container .comment-parent .right .addrtime span{
    margin-right: 8px;
}
.note-detail-container .right-area .comment-container .comment-reply .right .operator{
    font-size: 12px;display: flex;
}
.note-detail-container .right-area .comment-container .comment-reply .right .operator>div{
    display: flex;align-items: center;margin-right: 8px;cursor: pointer;
}
.note-detail-container .right-area .comment-container .more-comment{
    display: flex;justify-content: center;height: 100px;align-items: center;
}
.note-detail-container .right-area .comment-container .more-comment>div{
    cursor: pointer;font-size: 14px;
}
.note-detail-container .right-area .comment-container .reply-more{
    display: flex;align-items: center;margin-left: 52px;margin-top: 12px;
}
.note-detail-container .right-area .comment-container .reply-more>div{
    cursor: pointer;font-size: 12px;
}
.note-detail-container .right-area .bottom-tool-container{
    border-top: 1px solid var(--qsm-bordercolor);padding: 12px 24px;
    position: absolute;bottom: 0;width: 100%;left: 0;background-color: #FFFFFF;
}
.note-detail-container .right-area .tool-list-con{
    display: flex;align-items: center;padding: 12px 0px;
}
.note-detail-container .right-area .tool-list-con .tool-btn{
    display: flex;margin-left: 8px;padding: 6px 0px;cursor: pointer;align-items: center;
}
.note-detail-container .right-area .tool-list-con .tool-btn svg{
    width: 20px;height: 20px;
}
.note-detail-container .right-area .tool-list-con .share-btn-con{
    transform: translate(0px, 2px);
}
.note-detail-container svg.is-active{
    color: var(--qsm-red);
}
.note-detail-container .right-area .tool-list-con .comment-btn-con{
    display: flex;flex: 1;align-items: center;padding: 6px;background: var(--qsm-gray-bg);border-radius: 50px;
}
.note-detail-container .right-area .tool-list-con .comment-btn-con img{
    width: 24px;height: 24px;border-radius: 50px;margin-right: 4px;
}
.el-textarea__inner::-webkit-resizer {
    display: none;
}
.note-detail-container .right-area .el-textarea__inner {
    border-radius: 24px;
}
.note-detail-container .right-area .el-textarea__inner::-webkit-resizer {
    display: none;
}
.note-detail-container .right-area .el-textarea__inner:focus{
    box-shadow:  0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;;
}
.note-detail-container .right-area .op-container{
    display: flex;justify-content: space-between;margin-top: 6px;
}
.note-detail-container .right-area .op-container .c-emoji-btn{
    width: 40px;height: 40px;display: flex;justify-content: center;align-items: center;cursor: pointer;
}
.note-detail-container .right-area .op-container svg{
    width: 20px;height: 20px;
}
.report-container{
    font-size: 16px;
}
.report-container>div{
    margin: 16px 0;display: flex;align-items: center;
}
.report-container div i{
    color: var(--qsm-red);
}
.report-container button{
    width: 100%;margin: 16px 0;
}
.emoji-list{
    min-width: 200px;max-height: 300px;overflow: auto;padding: 8px;
}
.emoji-list ul{
    font-size: 20px;
    list-style: none;
    text-align: left;
    max-width: 300px;
}
.emoji-list ul li{
    border-radius: 3px 3px;
    cursor: pointer;
    display: inline-block;
    padding: 0 5px;
}
.note-detail-container .right-area .comment-send-container .reply-user-info{
    font-size: 14px;padding: 10px;
}
.note-detail-container .right-area .comment-send-container .reply-user-info .reply-name{
    font-size: 14px;
}
.note-detail-container .right-area .comment-send-container .reply-user-info .reply-name span{
    margin-right: 8px;
}
.note-detail-container .right-area .comment-send-container .reply-user-info .reply-con{
    font-size: 14px;color: rgba(0,0,0,.75);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}
.note-detail-container .right-area .comment-send-container .op-container .btn-area{
    display: flex;align-items: center;justify-content: center;
}
.note-detail-container .right-area .comment-send-container .op-container .btn-area button{
    width: 68px;border-radius: 25px;margin-left: 8px;
}
.note-detail-container .right-area .comment-send-container .op-container .btn-area span{
    font-size: 16px;
}



footer{
    display: flex;justify-content: center;font-size: 12px;height: 200px;align-items: end;
}
footer .footer-left-area{
    padding: 0px 0px 20px 60px;display: none;
}
footer .footer-left-area p{
    text-align: center;
}

.login-layer-container{
    position: fixed;width: 100%;height: 100%;top: 0;left: 0;display: flex;justify-content: center;align-items: center;z-index: 100;
}
.login-layer-container::after{
    content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,.3);z-index: -1;
}
.login-component-container{
    width: 388px;background-color: var(--qsm-bg-light);border-radius: 16px;display: flex;flex-direction: column;padding: 50px;position: relative;
}
.login-component-container h3{
    text-align: center;margin-bottom: 48px;
}
.login-component-container input{
    height: 48px;border-radius: 50px;border: none;background-color: rgba(0,0,0,.04);width: 100%;font-size: 16px;
}
.login-component-container .line-block-area{
    margin-bottom: 16px;
}
.login-component-container .line-block-area .input-area{
    position: relative;
}
.login-component-container .line-block-area .phone-area{
    position: absolute;height: 48px;display: flex;align-items: center;margin-left: 16px;
}
.login-component-container .line-block-area .phone-area::after{
    content: "";height: 20px;border-right: 1px solid #999999;margin-left: 16px;
}
.login-component-container .login-inpue-phone{
    padding-left: 80px;padding-right: 20px;
}
.login-component-container .login-inpue-captcha{
    padding: 0px 100px 0px 20px;
}
.login-component-container  .get-captcha-btn{
    position: absolute;top: 0;right: 12px;height: 48px;display: flex;align-items: center;cursor: pointer;color: var(--qsm-primary);
}
.login-component-container  .get-captcha-btn-c{
    position: absolute;top: 0;right: 12px;height: 48px;display: flex;align-items: center;color: var(--qsm-subtext);
}
.login-component-container .login-btn{
    height: 48px;color: #ffffff;border: none;background-color: var(--qsm-primary);cursor: pointer;border-radius: 50px;font-size: 16px;margin-top: 32px;
}
.login-component-container .login-msg{
    font-size: 14px;color: var(--qsm-text);text-align: center;margin-top: 50px;
}
.login-component-container .close-btn{
    position: absolute;right: 20px;top: 20px;cursor: pointer;
}
.login-component-container .close-btn svg{
    height: 20px;width: 20px;
}

.login-component-container .checkbox-area{
    font-size: 12px;color: var(--qsm-text);display: flex;margin-top: 16px;align-items: center;
}
.login-component-container .checkbox-area p{
    padding-left: 6px;cursor: pointer;
}
.login-component-container .checkbox-area span{
    width: 14px;height: 14px;border-radius: 4px;position: relative;border: 1px solid #999999 ;display: flex;justify-content: center;align-items: center;
    cursor: pointer;
}
.login-component-container .checkbox-area svg{
    width: 14px;height: 14px;color: #333333;
}
.login-component-container .checkbox-area i{
    font-style: normal;color: var(--qsm-primary);text-decoration: underline;margin-left: 8px;cursor: pointer;
}
.login-component-container .login-dialog-modal{
    background-color: rgba(0,0,0,.2);
}
.sys-sub-btn{
    font-size: 1rem;min-width: 66px;height: 32px;background-color: var(--qsm-primary);
    color: #ffffff;text-align: center;line-height: 32px;border-radius: 4px;padding: 0 4px;cursor: pointer;
}
.user-argeement{
    padding: 20px 4px !important;
}
.user-argeement header{
    display: none;
}
.user-argeement span{
    display: flex;justify-content: center;width: 100%;height: 40px;align-items: center;cursor: pointer;
}
.user-argeement span:hover{
    background: rgba(0,0,0,.03);
}
.user-argeement span:nth-child(3){
    border-top: 1px solid var(--qsm-lightgray);
}
.top-avatar{
    display: flex;width: 50px;height: 50px;justify-content: center;align-items: center;
}
.top-avatar img{
    border-radius: 50%;border: 2px solid #ffffff;background-color: #ffffff;width: 40px;height: auto;
}
.header-note{
    display: flex;justify-content: space-between;height: 64px;padding: 0 20px;background: #ffffff;border-bottom: 1px solid #f3f3f3;
}
.header-note .h-left{
    display: flex;font-size: 20px;
}
.header-note .h-left *{
    display: flex;align-items: center;color: var(--qsm-title);font-weight: 500;
}
.header-note .h-left img{
    width: 70px;margin-right: 10px;
}
.header-note .h-right{
    display: flex;align-items: center;position: relative;
}
.header-note .h-right .avatar-name{
    display: flex;align-items: center;cursor: pointer;
}
.header-note .h-right .avatar-name span{
    font-size: 16px;color: var(--qsm-title);display: flex;margin: 0 4px;
}
.header-note .h-right .avatar-name img{
    height: 16px;
}
.header-note .h-right svg{
    width: 16px;height: 16px;
}
.header-note .h-right svg use{
    color: var(--qsm-gray-mid);
}
.header-note .h-right .hide-area{
    position: absolute;right: 0px;top: 50px;background: #ffffff;padding: 10px 0px;box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);width: 140px;z-index: 3;
}
.header-note .h-right .hide-area .logout{
    display: flex;align-items: center;cursor: pointer;padding: 6px 10px;transition: background-color 0.3s ease;
}
.header-note .h-right .hide-area .logout:hover{
    background-color: rgba(225,245,254,.6);
}
.header-note .h-right .hide-area .logout svg{
    width: 18px;margin-right: 10px;
}
.header-note .h-right .hide-area .logout use{
    color: var(--qsm-gray-mid);
}
.header-note .h-right .hide-area .logout span{
    color: var(--qsm-gray-dark);font-size: 14px;
}

.qsm-btn-pri{
    display: flex;outline: none;text-align: center;width: 104px;height: 38px;border: none;justify-content: center;border-radius: 4px;cursor: pointer;background: var(--qsm-primary);
}
.qsm-btn-pri span{
    display: flex;align-items: center;font-size: 14px;color: #ffffff;
}
.qsm-btn-nor{
    display: flex;outline: none;text-align: center;width: 104px;height: 38px;border: none;justify-content: center;border-radius: 4px;cursor: pointer;background: #fff;border: 1px solid var(--qsm-bordercolor);
}
.qsm-btn-nor span{
    display: flex;align-items: center;font-size: 14px;color: var(--qsm-gray-dark);
}


.note-home{
    display: flex;justify-content: space-between;
}
.note-home .note-nav{
    width: 212px;height: calc(100vh - 64px);display: flex;flex-direction: column;background: #ffffff;overflow-y: auto;
}
.note-home .note-nav ul{
    margin: 16px;
}
.note-home .note-nav ul li a{
    display: flex;align-items: center;font-size: 14px;color: var(--qsm-gray-dark);height: 44px;padding: 0 10px;border-radius: 8px;
}
.note-home .note-nav ul li .on{
    background-color: rgb(240, 248, 255);
}
.note-home .note-nav ul li .on span{
    color: var(--qsm-primary);
}
.note-home .note-nav ul li .on svg use{
    color: var(--qsm-primary);
}
.note-home .note-nav ul li a:hover span{
    color: var(--qsm-primary);
}
.note-home .note-nav ul li a:hover svg use{
    color: var(--qsm-primary);
}
.note-home .note-nav ul li svg{
    width: 16px;height: 16px;margin-right: 8px;
}
.note-home .note-nav ul li:nth-child(3)  a  svg{
    width: 14px;height: 14px;margin-right: 10px;
}
.note-home .note-nav .publish-btn-area{
    display: flex;justify-content: center;align-items: center;
}
.note-home .note-nav .publish-note-btn{
    width: 172px;height: 38px;background: var(--qsm-primary);display: flex;justify-content: center;align-items: center;
    border-radius: 4px;margin-top: 20px;cursor: pointer;position: relative;
}
.note-home .note-nav .publish-note-btn>span{
    color: #FFFFFF;font-size: 16px;font-weight: bold;margin-left: 22px
}
.note-home .note-nav .publish-note-btn>svg{
    width: 22px;height: 22px;font-weight: bold;transform: translate(20px, 1px);
}
.note-home .note-nav .publish-note-btn>svg>use{
    color: #FFFFFF;
}
.note-home .note-nav .publish-note-btn .hover-content{
    position: absolute;left: 0;top: 38px;display: none;flex-direction: column;justify-content: center;align-items: flex-start;
    background: #ffffff;box-shadow: 0 1px 4px 0 rgba(74,91,109,0.1);border-radius: 4px;width: 172px;padding: 8px 4px;
}
.note-home .note-nav .publish-note-btn .hover-content span{
    color: var(--qsm-text);font-size: 14px;font-weight: normal;display: flex;align-items: center;justify-content: left;
    width: 100%;height: 32px;border-radius: 4px;
}
.note-home .note-nav .publish-note-btn .hover-content svg{
    margin: 0 14px 0px 20px;width: 12px;height: 12px;
}
.note-home .note-nav .publish-note-btn .hover-content svg use{
    color: var(--qsm-text);
}
.note-home .note-nav .publish-note-btn:hover.publish-note-btn>svg{
    transform: translate(20px, 1px) rotate(180deg);transition: all .2s ease;
}
.note-home .note-nav .publish-note-btn:hover .hover-content{
    display: flex;
}
.note-home .note-nav .publish-note-btn .hover-content span:hover{
    color: var(--qsm-primary);background-color: var(--qsm-gray-bg);
}
.note-home .note-nav .publish-note-btn .hover-content span:hover svg use{
    color: var(--qsm-primary);
}
.note-home .note-container{
    width: 100%;height: calc(100vh - 64px);overflow-y: auto;overflow-x: auto;display: flex;justify-content: center;align-items: flex-start;
}
.note-home .note-container .note-page-con{
    padding: 24px;width: 100%;background: #ffffff;border-radius: 8px;box-shadow: 0 1px 4px 0 rgba(74,91,109,0.4);
    margin: 24px;margin-bottom: 0px;
}
.note-home .top-user-block{
    background: #ffffff;width: 100%;border-radius: 8px;display: flex;padding: 24px;gap: 28px;flex-direction: column;
}
.note-home .top-user-block .left-area{
    display: flex;gap: 16px;max-width: 575px;
}
.note-home .top-user-block .left-area .avatar{
    width: 72px;;height: 72px;display: flex;justify-content: center;align-items: center;flex-shrink: 0;flex-grow: 0;
}
.note-home .top-user-block .left-area .avatar img{
    max-width: 100%;max-height: 100%;border-radius: 50%;
}
.note-home .top-user-block .left-area .user-data{
    display: flex;flex-direction: column;gap: 6px;margin-right: 24px;
}
.note-home .top-user-block .left-area .user-data>div{
    display: flex;align-items: center;gap: 12px;
}
.note-home .top-user-block .left-area .user-data .line-f{
    gap: 6px;
}
.note-home .top-user-block .left-area .user-data .line-f h5{
    font-size: 16px;color: var(--qsm-gray-dark);font-weight: bold;
}
.note-home .top-user-block .left-area .user-data .line-f span{
    font-size: 10px;color: #13d217;background: #d7f1d7;display: flex;padding: 0px 6px;border-radius: 2px;align-items: center;height: min-content;
}
.note-home .top-user-block .left-area .user-data .line-f .red-bg{
    background: var(--qsm-red);color: #FFFFFF;
}
.note-home .top-user-block .left-area .user-data .line-s{

}
.note-home .top-user-block .left-area .user-data .line-s div{
    display: flex;font-size: 14px;color: var(--qsm-gray-text);gap: 4px;
}
.note-home .top-user-block .left-area .user-data .line-s span{
    color: var(--qsm-gray-dark);font-weight: bold;
}
.note-home .top-user-block .left-area .user-data .line-t div{
    font-size: 14px;color: var(--qsm-gray-text);white-space: pre-line;
}
.note-home .top-user-block .left-area .user-data svg{
    width: 14px;height: 14px;transform: translate(-3px, -2px);cursor: pointer;
}
.el-dialog__headerbtn .el-dialog__close{
    font-size: 24px !important;
}
.note-home .top-user-block .right-area{
    display: flex;align-items: center;
}
.note-home .top-user-block .right-area .btn-box{
    display: flex;flex-wrap: wrap;flex: 1;
}
.note-home .top-user-block .right-area .btn-box>div{
    display: flex;padding: 16px 12px;width: 212px;gap: 10px;
    border-radius: 8px;cursor: pointer;margin-right: 32px;
}
.note-home .top-user-block .right-area .btn-icon{
    display: flex;justify-content: center;align-items: center;width: 48px;height: 48px;border-radius: 8px;
}
.note-home .top-user-block .right-area svg{
    width: 40px;height: 40px;
}

.note-home .top-user-block .right-area .image-btn {
    background: #FAF3EC;
}
.note-home .top-user-block .right-area .image-btn .btn-icon{
    background: #D4A373;
}
.note-home .top-user-block .right-area .image-btn use{
    color: #ffffff;
}

.note-home .top-user-block .right-area .video-btn {
    background: #EBF5FF;
}
.note-home .top-user-block .right-area .video-btn .btn-icon{
    background: #4D9EFF;
}
.note-home .top-user-block .right-area .video-btn use{
    color: #ffffff;
}

.note-home .top-user-block .right-area .article-btn {
    background: rgb(253, 226, 226);
}
.note-home .top-user-block .right-area .article-btn .btn-icon{
    background: rgb(248, 152, 152);
}
.note-home .top-user-block .right-area .article-btn use{
    color: #ffffff;
}
.note-home .top-user-block .right-area .author-con-btn {
    background: rgb(239, 238, 238);
}
.note-home .top-user-block .right-area .author-con-btn .btn-icon{
    background: rgb(145, 144, 144);
}
.note-home .top-user-block .right-area .author-con-btn use{
    color: #ffffff;
}

.note-home .top-user-block .right-area .btn-text h5{
    font-size: 14px;color: var(--qsm-gray-dark);font-weight: bold;
}
.note-home .top-user-block .right-area .btn-text span{
    font-size: 12px;color: var(--qsm-gray-text);
}

.note-home .note-data-block{
    background: #ffffff;width: 100%;border-radius: 8px;padding: 0px 24px 24px 24px;
}
.note-home .note-data-block .title-area{
    margin-bottom: 20px;
}
.note-home .note-data-block .title-area div{
    font-size: 16px;color: var(--qsm-gray-dark);
}
.note-home .note-data-block .list-area{
    display: flex;max-width: 800px;gap: 20px;flex-wrap: wrap;
}
.note-home .note-data-block .list-area .list-item{
    display: flex;flex-direction: column;width: 126px;height: 126px;border-radius: 8px;border: 1px solid var(--qsm-gray-mid);padding: 12px;
}
.note-home .note-data-block .list-area .list-item h5{
    font-size: 12px;color: var(--qsm-gray-text);
}
.note-home .note-data-block .list-area .list-item span{
    font-size: 20px;font-weight: bold;color: var(--qsm-gray-dark);
}

.note-home .upload-file-area{
    display: flex;flex-direction: column;
}
.note-home .upload-file-area .file-type{
    display: flex;font-size: 16px;border-bottom: 1px solid var(--qsm-gray-mid);
}
.note-home .upload-file-area .file-type>div{
    margin-right: 24px;cursor: pointer;
}
.note-home .upload-file-area .file-type>div.on span{
    color: var(--qsm-primary);
}
.note-home .upload-file-area .file-type>div.on >div{
    background: var(--qsm-primary);
}
.note-home .upload-file-area .file-type>div span{
    padding: 8px;display: flex;
}
.note-home .upload-file-area .file-type>div>div{
    width: 100%;height: 3px;
}
.note-home .upload-file-area .upload-btn-area{
    width: 100%;height: 500px;background: #fafafa;   border: 5px dashed;position: relative;
    border-image: repeating-linear-gradient(45deg, var(--qsm-gray-mid), var(--qsm-gray-mid) 6px, transparent 6px, transparent 20px) 10;
}
.note-home .upload-file-area .highlight{
    background: #f0f0f0;
}
.note-home .upload-file-area .upload-btn-area .upload-input{
    height: 100%;width: 100%;position: absolute;top: 0px;left: 0px;z-index: 2;cursor: pointer;opacity: 0;
}
.note-home .upload-file-area .upload-btn-area:hover{
    background: #f0f0f0;
}
.note-home .upload-file-area .ui-upload{
    display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100%;width: 100%;position: absolute;top: 0px;left: 0px;z-index: 1;
}
.note-home .upload-file-area .ui-upload p{
    margin-bottom: 20px;font-size: 14px;
}
.note-home .upload-file-area .notice-area{
    display: flex;padding: 50px 0px;
}
.note-home .upload-file-area .notice-area .notice-item{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.note-home .upload-file-area .notice-area .notice-item div p:first-child{
    font-size: 14px;color: var(--qsm-title);
}
.note-home .upload-file-area .notice-area .notice-item div p{
    font-size: 12px;color: var(--qsm-gray-text);
}

.note-home .note-submit-form{
    display: flex;flex-direction: column;
}
.note-home .note-submit-form .video-info-area{
    display: flex;
}
.note-home .note-submit-form .video-info-area .left{
    flex: 1;
}
.note-home .note-submit-form .video-info-area .right{
    padding: 0px 40px;
}
.note-home .note-submit-form .video-info-area .right .video-area{

}
.note-home .note-submit-form .title-area{
    display: flex;margin-bottom: 22px;
}
.note-home .note-submit-form .title-area h3{
    font-size: 20px;
}
.note-home .note-submit-form .title-area .back-btn{
    display: flex;align-items: center;cursor: pointer;
}
.note-home .note-submit-form .title-area .back-btn svg{
    width: 22px;height: 30px;transform: rotate(90deg);
}
.note-home .note-submit-form .video-data{
    display: flex;justify-content: space-between;background: var(--qsm-lightgray);padding: 18px 30px;border-radius: 8px;align-items: center;
}
.note-home .note-submit-form .video-data .b-l-c{
    display: flex;flex-direction: column;
}
.note-home .note-submit-form .video-data .video-tit{
    margin-bottom: 6px;font-weight: 500;
}
.note-home .note-submit-form .video-data .video-msg{
    display: flex;flex-wrap: wrap;
}
.note-home .note-submit-form .video-data .video-msg>div{
    display: flex;align-items: center;font-size: 14px;flex-shrink: 0;flex-wrap: wrap;
}
.note-home .note-submit-form .video-data .video-msg>div:not(:first-child){
    margin-left: 22px;color: var(--qsm-gray-text);
}
.note-home .note-submit-form .video-data .video-msg>div:not(:first-child) span{
    color: var(--qsm-gray-text);
}

.note-home .note-submit-form .video-data .video-msg svg{
    width: 18px;height: 18px;margin-right: 8px;
}
.note-home .note-submit-form .video-data .update-video{
    cursor: pointer;
}
.note-home .note-submit-form .video-data .update-video:hover{
    color: var(--qsm-primary);
}
.note-home .note-submit-form .b-title{
    display: flex;align-items: center;margin: 24px 0px 18px 0px;
}
.note-home .note-submit-form .b-title>div{
    font-size: 18px;color: var(--qsm-title);font-weight: 500;
}
.note-home .note-submit-form .b-title>span{
    display: flex;font-size: 14px;color: var(--qsm-gray-text);margin-left: 20px;
}
.note-home .note-submit-form .b-cover{
    display: flex;
}
.note-home .note-submit-form .b-cover .now-cover{
    display: flex; width: 102px;height: 135px;align-items: center;background: var(--qsm-lightgray);border-radius: 8px;
    position: relative;align-items: center;justify-content: center;cursor: pointer;overflow: hidden;
}
.note-home .note-submit-form .b-cover .update-cover{
    position: absolute;top: 0;left: 0;display: flex;flex-direction: column;align-items: center;justify-content: center;background: var(--qsm-gray-dark);
    width: 100%;height: 100%;opacity: .7;border-radius: 8px;
}
.note-home .note-submit-form .b-cover .update-cover svg{
    width: 20px;height: 20px;
}
.note-home .note-submit-form .b-cover .update-cover use{
    color: #fff;
}
.note-home .note-submit-form .b-cover .update-cover span{
    color: #fff;font-size: 14px;
}
.note-home .note-submit-form .b-cover .now-cover img{
    max-width: 102px;max-height: 135px;
}
.note-home .note-submit-form .b-cover .rec-cover{
    display: flex;background: var(--qsm-lightgray);border-radius: 8px;flex-direction: column;margin-left: 8px;padding: 8px 16px;
}
.note-home .note-submit-form .b-cover .rec-cover .title{
    font-size: 12px;
}
.note-home .note-submit-form .b-cover .rec-cover-con{
    display: flex;margin-top: 10px;
}
.note-home .note-submit-form .b-cover .rec-item{
    display: flex;width: 112px;height: 86px;align-items: center;background: #fff;justify-content: center;
    padding: 8px;border-radius: 4px;cursor: pointer;flex-shrink: 0;
}
.note-home .note-submit-form .b-cover .rec-item:not(:first-child){
    margin-left: 16px;
}
.note-home .note-submit-form .b-cover .rec-item img{
    max-width: 112px;max-height: 86px;
}
.note-home .note-submit-form .b-note-con .note-title .el-input__wrapper{
}
.note-home .note-submit-form .b-note-con .note-title .el-input{
    width: 392px;height: 32px;
}
.note-home .note-submit-form .b-note-con .note-desc{
    margin: 10px 0px;
}
.note-home .note-submit-form .b-note-con .editor—wrapper{
    border: 1px solid var(--qsm-bordercolor);border-radius: 4px;
}
.note-home .note-submit-form .b-note-con #editor-container{
    min-height: 120px;
}
.note-home .note-submit-form .b-note-con .w-e-toolbar{
    border-radius: 4px;
}
.note-home .note-submit-form .b-note-con .w-e-text-container{
    border-radius: 4px;
}
.note-home .note-submit-form .b-note-con .w-e-text-container p{
    margin: 8px 0px;
}
.note-home .note-submit-form .b-note-con input::placeholder{
    color: #757575;
}
.note-home .note-submit-form .b-note-con  .w-e-text-placeholder{
    font-style: normal;font-size: 14px;color: #757575;top: 8px;
}
.note-home .note-submit-form .b-note-con  .w-e-max-length-info{
    font-size: 12px;color: var(--qsm-text);
}
.note-home .note-submit-form .b-note-con  .w-e-scroll{
    font-size: 14px;min-height: 120px;max-height: 200px;
}
.note-home .note-type-article-dialog .b-note-con #editor-container{
    min-height: 25vh;
}
.note-home .note-type-article-dialog .b-note-con  .w-e-scroll{
    min-height: 25vh;max-height: 25vh;
}
.note-home .note-submit-form .b-note-con .w-e-max-length-info{
    z-index: 1;
}
.note-home .note-submit-form .b-setting{
    display: flex;flex-direction: column;
}
.note-home .note-submit-form .b-setting .b-item{
    display: flex;align-items: center;margin-bottom: 20px;
}
.note-home .note-submit-form .b-setting .b-item *{
    font-size: 14px;
}
.note-home .note-submit-form .b-setting .item-label{
    width: 100px;
}
.note-home .note-submit-form .b-setting .b-item .con-ori{
    margin-left: 20px;
}
.note-home .note-submit-form .b-submit{
    display: flex;padding: 20px 0px;
}
.note-home .note-submit-form .b-submit button{
    margin-right: 20px;
}
.note-home .note-submit-form .b-submit *{
    font-size: 16px;
}
.note-home .note-submit-form .b-edit-img{
    display: flex;
}
.note-home .note-submit-form  .img-sort-list{
    display: flex;flex-wrap: wrap;
}
.note-home .note-submit-form  .img-sort-list .b-item{
    cursor: move!important;
}
.note-home .note-submit-form .b-edit-img .b-item{
    display: flex;flex-direction: column;align-items: center;width: 96px;height: 96px;border-radius: 6px;justify-content: center;cursor: pointer;
    position: relative;overflow: hidden;margin-right: 12px;margin-bottom: 12px;
}
.note-home .note-submit-form .b-edit-img .add-btn{
    background: var(--qsm-gray-bg);border: 1px dashed var(--qsm-bordercolor);
}
.note-home .note-submit-form .b-edit-img .add-btn svg{
    width: 24px;height: 24px;
}
.note-home .note-submit-form .b-edit-img .add-btn svg use{
}
.note-home .note-submit-form .b-edit-img .add-btn span{
    font-size: 14px;
}
.note-home .note-submit-form .b-edit-img .b-item .img-area{
    width: 100%;height: 100%;position: relative;
}
.note-home .note-submit-form .b-edit-img .b-item .img-area img{
    position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;
}
.note-home .note-submit-form .b-edit-img .b-item .mask{
    position: absolute;width: 100%;height: 100%;left: 0;top: 0;visibility: hidden;
}
.note-home .note-submit-form .b-edit-img .b-item .mask .del-btn{
    position: absolute;right: 0;top: 0;width: 20px;height: 20px;background: rgba(0,0,0,.6);display: flex;justify-content: center;align-items: center;cursor: pointer!important;
}
.note-home .note-submit-form .b-edit-img .b-item .mask .del-btn svg{
    width: 10px;height: 10px;
}
.note-home .note-submit-form .b-edit-img .b-item .mask .del-btn use{
    color: #ffffff;
}
.note-home .note-submit-form .b-edit-img .b-item .mask .edit-btn{
    position: absolute;left: 0;bottom: 0;width: 100%;height: 28px;display: flex;justify-content: center;align-items: center;
    background: rgba(0,0,0,.3);
}
.note-home .note-submit-form .b-edit-img .b-item .mask .edit-btn *{
    font-size: 12px;color: #ffffff;
}
.note-home .note-submit-form .b-edit-img .b-item .mask .edit-btn .line{
    width: 1px;height: 14px;background: #ffffff;
}
.note-home .note-submit-form .b-edit-img .b-item .mask .edit-btn .btn{
    flex: 1;display: flex;justify-content: center;cursor: pointer!important;
}

.note-home .note-submit-form .b-edit-img .b-item:hover .mask{
    visibility: unset;
}
.note-home .note-type-article-dialog .note-submit-form .b-setting{
    display: flex;flex-direction: row;
}
.note-home .note-type-article-dialog .note-submit-form .b-cover{
    margin-left: 50px;
}
.note-home .note-type-article-dialog .note-submit-form .b-cover .update-cover{
    background:none;border: 1px solid var(--qsm-bordercolor);
}
.note-home .note-type-article-dialog .note-submit-form .b-cover .update-cover use{
    color: var(--qsm-text);
}
.note-home .note-type-article-dialog .note-submit-form .b-cover .update-cover span{
    color: var(--qsm-text);
}
.note-home .note-type-article-dialog .note-submit-form .b-cover .del-cover-btn{
    position: absolute;top:4px;right: 4px;width: 12px;height: 12px;cursor: pointer;
}
.note-home .note-type-article-dialog .note-submit-form .b-cover .del-cover-btn use{
    color: var(--qsm-text);
}

.note-home .note-container .e-img-dialog{
    display: flex;border-top: 1px solid var(--qsm-bordercolor);border-bottom: 1px solid var(--qsm-bordercolor);
}
.note-home .note-container .e-img-dialog .img-area{
    width: 600px;height: 300px;margin: 30px 0px;
}
.note-home .note-container .e-img-dialog .img-area img{
    width: 100%;height: 100%;object-fit: contain;
}
.note-home .note-container .e-img-dialog .line{
    width: .5px;background: var(--qsm-bordercolor);
}
.note-home .note-container .e-img-dialog .img-ratio{
    flex: 1;display: flex;flex-direction: column;
}
.note-home .note-container .e-img-dialog .title{
    font-size: 16px;padding: 20px;height: 90px;
}
.note-home .note-container .e-img-dialog  .rotate-btn{
    display: flex;justify-content: center;align-items: center;width: 100%;height: 70px;
}
.note-home .note-container .e-img-dialog  .rotate-btn svg{
    width: 50px;height: 50px;cursor: pointer;padding: 10px;
}

.note-home .note-container .e-img-dialog .select-ratio{
    display: flex;flex-wrap: wrap;
}
.note-home .note-container .e-img-dialog .select-ratio .select-option{
    display: flex;width: 158px;height: 100px;justify-content: center;align-items: center;cursor: pointer;
}
.note-home .note-container .e-img-dialog .select-ratio .select-option:hover{
    background: var(--qsm-gray-bg);
}
.note-home .note-container .e-img-dialog .select-ratio .select-option div{
    border: 1.5px solid var(--qsm-bordercolor);  border-radius: 3px;    display: flex ;  align-items: center;
    justify-content: center;  max-height: 100px;  max-width: 100px;  min-width: 60px;  min-height: 60px;
}
.note-home .note-container .e-img-dialog .select-ratio .on div{
    border-color: var(--qsm-primary);color: var(--qsm-primary);
}
.note-home .note-container .e-img-dialog-submit{
    display: flex;justify-content: right;
}
.note-home .note-container .e-img-dialog-submit button{
    width: 60px;height: 32px;margin-left: 20px;margin-top: 30px;margin-bottom: 20px;
}
.note-home .note-container .e-img-dialog .cropper-bg{
    background-image: unset;
}

.note-home .edit-info-area{
    display: flex;flex-direction: column;align-items: center;
}
.note-home .edit-info-area .el-form{
    width: 100%;
}
.note-home .edit-info-area .el-textarea__inner {
    resize: none !important;overflow-y: auto;height: auto !important;min-height: 100px;max-height: 300px;
}
.note-home .edit-info-area .el-textarea__inner::-webkit-resizer {
    display: none;
}
.note-home .edit-user-dialog{
    padding: 40px;
}
.note-home .edit-user-dialog .avatar-area{
    width: 108px;height: 108px;  overflow: hidden;border-radius: 50%;position: relative;
    cursor: pointer;
}
.note-home .edit-user-dialog .avatar-area img{
    width: 100%;height: 100%;object-fit: cover;
}
.note-home .edit-user-dialog .avatar-area .avatar-mask{
    position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.3);display: flex;justify-content: center;align-items: center;
}
.note-home .edit-user-dialog .avatar-area .avatar-mask svg{
    width: 28px;height: 28px;
}
.note-home .edit-user-dialog .avatar-area .avatar-mask svg use{
    color: #FFFFFF;
}
.note-home .edit-info-area>span{
    font-size: 12px;margin: 4px 0px 8px 0px;
}
.note-home .edit-info-area .btn-area{
    display: flex;justify-content: center;align-items: center;
}
.note-home .edit-info-area .btn-area button{
    margin: 0px 20px;width: 148px;
}
.note-home .edit-info-avatar>div{
    display: flex;flex-direction: column;
}
.note-home .edit-info-avatar .cropper-container{
    width: 288px;height: 288px;
}
.note-home .edit-info-avatar .preview-area{
    width: 88px;height: 88px;overflow: hidden;border-radius: 50%;
}
.note-home .edit-info-avatar .line-f{
    display: flex;justify-content: space-between;
}
.note-home .edit-info-avatar .preview-container{
    display: flex;flex-direction: column;align-items: center;
}
.note-home .edit-info-avatar .line-s{
    display: flex;justify-content: space-between;margin-top: 10px;
}
.note-home .edit-info-avatar .line-s>div:first-child{
    width: 288px;display: flex;justify-content: center;align-items: center;
}
.note-home .edit-info-avatar .line-s>div:last-child{
    width: 88px;display: flex;justify-content: center;align-items: center;
}
.note-home .edit-info-avatar .line-s .el-slider{
    width: 228px;
}
.note-home .edit-info-avatar  .reset-avatarfile{
    cursor: pointer;color: var(--qsm-primary);
}
.note-home .edit-info-avatar .line-t{
    display: flex;justify-content: center;align-items: center;margin-top: 40px;
}
.note-home .edit-info-avatar .line-t button{
    margin: 0 30px;
}


.displayNone{
    display: none !important;
}
.displayFlex{
    display: flex !important;
}
[v-cloak] {
    display: none !important;
}
.note-home  .note-addEdit-dialog{
    padding: 10px 20px;
}
.note-home  .note-addEdit-dialog .el-dialog__header.show-close{
    padding-right: 0px;
}

.header-title{
    display: flex;justify-content: space-between;position: relative;margin-bottom: 12px;
    padding-left: 12px;
}
.header-title:before{
    content: "";background: var(--qsm-primary);border-radius: 16px;flex-shrink: 0;
    width: 4px;height: 18px;position: absolute;top: 50%;left: 0;transform: translateY(-50%);
}
.header-title h3{
    font-size: 20px;font-weight: normal;
}
.note-manage-tabs .el-tabs__item{
    font-size: 16px;color: var(--qsm-text);
}
.note-manage-tabs .el-tabs__item.is-active, .note-manage-tabs  .el-tabs__item:hover{
    color: var(--qsm-primary);
}
.note-manage-tabs .el-tabs__active-bar{
    background-color:var(--qsm-primary);height: 1px;
}
.note-manage-tabs  .el-tabs__nav-wrap:after{
    height: 1px;
}

.note-manage-list{
    display: flex;flex-direction: column;overflow-y:auto;min-height: 300px;
}
.note-manage-list .note-item{
    display: flex;justify-content: space-between;padding: 12px;border-radius: 4px;overflow: hidden;flex-shrink:0;
}
.note-manage-list .note-item:hover{
    background: var(--qsm-gray-bg);
}
.note-manage-list .note-item .item-left{
    display: flex;cursor: pointer;
}
.note-manage-list .note-item .item-right{
    display: flex;
}
.note-manage-list .note-item .note-img{
    width: 88px;height: 120px;border-radius: 4px;overflow: hidden;margin-right: 16px;position: relative;
    border: 1px solid var(--qsm-bordercolor);display: flex;align-items: center;justify-content: center;
}
.note-manage-list .note-item .note-img span{
    color: var(--qsm-gray-text);
}
.note-manage-list .note-item .note-img img{
    width: 100%;height: 100%;object-fit: cover;
}
.note-manage-list .note-item .note-img .item-mask{
    position: absolute;width: 100%;height: 100%;top: 0;left: 0;
}
.note-manage-list .note-item .note-img .item-mask svg{
    width: 18px;height: 18px;opacity: .8;position: absolute;top: 4px;right: 4px;
}
.note-manage-list .note-item .note-img .item-mask span{
    display: flex;color: #FFFFFF;padding: 0px 4px;border-radius: 4px;font-size: 12px;
    position: absolute;bottom: 4px;right: 4px;background-color: #30303480;
}
.note-manage-list .note-item .note-img .cover-notice{
    font-size: 12px;color: var(--qsm-gray-mid);
}
.note-manage-list .note-item .note-title{
    font-size: 16px;color: var(--qsm-title);display: flex;align-items: center;
}
.note-manage-list .note-item  .note-title.no-title{
    color: var(--qsm-gray-text);
}
.note-manage-list .note-item .note-title span{
    color: #409EFF;font-size: 12px;font-style: normal;white-space: nowrap;
    background: rgb(236, 245, 255);border-radius: 4px;padding: 0 4px;margin-right: 6px;
}
.note-manage-list .note-item .note-title span.ver-fail{
    color:#F56C6C;
}
.note-manage-list .note-item .note-title span.ver-draft{
    color:#909399;
}
.note-manage-list .note-item .note-time{
    font-size: 12px;color: var(--qsm-gray-text);margin-top: 2px;
}
.note-manage-list .note-item .note-data{
    font-size: 12px;margin-top: 2px;
}
.note-manage-list .note-item .note-data span{
    color: var(--qsm-gray-text);margin-right: 6px;
}
.note-manage-list .note-item .item-right span{
    margin-left: 6px;font-size: 12px;color: var(--qsm-text);cursor: pointer;
}
.manage-note-list-page{
    margin: 16px 0px 88px 0px;justify-content: center;
}
.manage-note-list-page .el-pager li{
    font-size: 14px !important;
}
.note-manage-list .note-item .notice-msg{
    font-size: 14px;color: var(--qsm-red);margin: 10px 0px;
}
.note-manage-list .note-item .private-msg{
    font-size: 12px;color: #E6A23C;margin: 2px 0px;
}

.note-page-con .account-setting-area .el-form-item{
    align-items: center;
}

.note-container .account-setting-area .avatar-area{
    width: 68px;height: 68px;  overflow: hidden;border-radius: 50%;position: relative;
    cursor: pointer;
}
.note-container .account-setting-area .avatar-area img{
    width: 100%;height: 100%;object-fit: cover;
}
.note-container .account-setting-area .avatar-area .avatar-mask{
    position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.3);display: flex;justify-content: center;align-items: center;
}
.note-container .account-setting-area .avatar-area .avatar-mask svg{
    width: 28px;height: 28px;
}
.note-container .account-setting-area .avatar-area .avatar-mask svg use{
    color: #FFFFFF;
}
.notification-container{
    margin: 0 auto;max-width: 860px;
}
.notification-container .notice-type-tab{
    display: flex;font-size: 16px;color: var(--qsm-text);border-bottom: 1px solid var(--qsm-gray-bg);
    padding: 16px 0px 20px 0px;
}
.notification-container .notice-type-tab .tab-item{
    display:flex;align-items: center;padding: 0 16px;height: 40px;border-radius: 50px;cursor: pointer;position: relative;
    margin-left: 8px;
}
.notification-container .notice-type-tab .tab-item:first-child{
    margin-left: 0px !important;
}
.notification-container .notice-type-tab .tab-item:hover{
    background-color: rgba(0, 0, 0, .03);
}
.notification-container .notice-type-tab .tab-item.is-active{
    background-color: rgba(0, 0, 0, .03);font-weight: 600;color:var(--qsm-title);
}
.notification-container .notice-type-tab .tab-item .red-num-notice{
    position: absolute;top: 0px;right: 0px;color: #fff;background-color: var(--qsm-red);
    font-size: 12px;line-height: 15px;padding: 0 3px;min-width: 15px;border-radius: 10px;display: flex;
    align-items: center;justify-content: center;
}
.bottom-sider-content .bottom-side ul li>div{
    position: relative;display: flex;align-items: center;justify-content: center;
}
.bottom-sider-content .bottom-side ul li .red-num-notice{
    position: absolute;top: -9px;right: -14px;color: #fff;background-color: var(--qsm-red);
    font-size: 12px;line-height: 15px;padding: 0 3px;min-width: 15px;border-radius: 10px;display: flex;
    align-items: center;justify-content: center;
}
.notification-container .system-notice-list .notice-item{
    padding: 12px 6px;
}
.notification-container .system-notice-list .notice-item .title{
    font-size: 16px;color: var(--qsm-title);
}
.notification-container .system-notice-list .notice-item .content{
    font-size: 14px;color: var(--qsm-text);
}
.index-main .sider-content ul li .unotice-btn{
    position: relative;
}
.index-main .sider-content ul li .unotice-btn .red-num-notice{
    position: absolute;top: 0px;left: 36px;color: #fff;background-color: var(--qsm-red);
    font-size: 12px;line-height: 15px;padding: 0 3px;min-width: 15px;border-radius: 10px;display: flex;
    align-items: center;justify-content: center;font-style: normal;
}
.notification-container .comment-item{
    padding-top: 22px;display: flex;
}
.notification-container .comment-item .c-left img{
    width: 48px;height: 48px;display: flex;align-items: center;justify-content: center;
    cursor: pointer;border-radius: 100%;object-fit: cover;
    border: 1px solid var(--qsm-bordercolor);
}
.notification-container .comment-item .c-center{
    flex: 1;padding: 0px 24px 32px 24px;border-bottom: 1px solid var(--qsm-gray-bg);
}
.notification-container .comment-item .c-center .name{
    font-size: 16px;color: var(--qsm-title);font-weight: 600;
}
.notification-container .comment-item .c-center .time{
    font-size: 14px;color: var(--qsm-gray-text);
}
.notification-container .comment-item .c-center .content{
    font-size: 14px;color: var(--qsm-text);
}
.notification-container .comment-item .c-right img{
    width: 48px;  height: 48px;  border: 1px solid var(--qsm-bordercolor);  border-radius: 6px;  object-fit: cover;cursor: pointer;
}
.notification-container .comment-item .title-cover {
    width: 48px;  height: 48px;
    border: 1px solid var(--qsm-bordercolor);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; box-sizing: border-box;
    padding: 4px;cursor: pointer;
}

.notification-container .comment-item .title-text {
    color: var(--qsm-text);
    font-size: 10px;
    font-weight: 400;
    text-align: center;
    word-break: break-all;
}
.profile-container{
    margin-top: 32px;
}
.profile-container .user-info-box{
    display: flex;margin-bottom: 32px;
}
.profile-container .user-info-box .user-avatar{
    border-radius: 50%;width: 112px;height: 112px;overflow: hidden;
}
.profile-container .user-info-box .user-avatar img{
    width: 100%;height: 100%;object-fit: cover;
}
.profile-container .user-info-box .user-info{
    margin-left: 32px;
}
.profile-container .user-info-box .user-info .user-name{
    font-size: 20px;
}
.profile-container .user-info-box .user-info .user-interact{
    display: flex;align-items: center;margin: 6px 0px 10px 0px;
}
.profile-container .user-info-box .user-info .user-profile{
    font-size: 14px;color: var(--qsm-text);white-space: pre-line;
}
.profile-container .user-info-box .user-info .user-interact div{
    font-size: 14px;
}
.profile-container .user-info-box .user-info .user-interact span{
    font-size: 16px;margin-left: 8px;
}
.profile-container .user-info-box .user-info .user-interact .ip-addr{
    font-size: 12px;margin-left: 24px;
}
.note-detail-page-con{
    height: calc(100vh - var(--qsm-header-height) - 32px);
}
.index-main .bottom-sider-content{
    display: flex;position: fixed;bottom: 0;width: 100%;background-color: #FFFFFF;
}
.index-main .bottom-sider-content .bottom-side{
    display: flex;width: 100%;
}
.index-main .bottom-sider-content .bottom-side ul{
    display: flex;width: 100%;
}
.index-main .bottom-sider-content .bottom-side ul li{
    display: flex;font-size: 16px;height: 48px;flex-grow: 1;align-items: center;justify-content: center;
    color: var(--qsm-text);
}
.index-main .bottom-sider-content .bottom-side ul li.active{
    color: var(--qsm-primary);
}
.index-main .bottom-sider-content .bottom-side ul li svg{
    width: 20px;height: 20px;
}
.index-main .bottom-sider-content .bottom-side ul li span{
    margin-left: 12px;
}
.top-right-area .search-touch-btn{
    width: 40px;height: 40px;align-items: center;justify-content: center;display: none;
}
.top-right-area .search-touch-btn svg{
    width: 20px;height: 20px;
}
.header-container .go-back-btn{
    display: flex;width: 40px;height: 40px;align-items: center;justify-content: center;
}
.header-container .go-back-btn svg{
    width: 20px;height: 20px;
}
.note-edit-add-container{
    height: 60vh; overflow: auto;
}


@media screen and (min-width: 961px) {
    .header-container .drop-touch-btn{
        display: none;
    }
    .index-main .bottom-sider-content{
        display: none;
    }
    .note-home .top-user-block .right-area .author-con-btn{
        display: none !important;
    }
}

@media screen and (max-width: 960px) {
    .top-right-area .top-home-center-btn{
        display: none;
    }
    .index-main .sider-content{
        display: none;
    }
    .index-main .main-content{
        padding-left: var(--qsmContentPadding);
        padding-right: var(--qsmContentPadding);
    }
    .top-search-area input{
        width: 388px;
    }
    .index-main .list-page-container{
        margin: 28px 0px 65px 0px;
    }
    .note-detail-container{
        flex-direction: column;
    }
    .note-detail-container .left-area{
        width: 100%;
    }
    .note-detail-container .right-area .bottom-tool-container{
        position: fixed;bottom: 0;padding: 6px 12px;
    }
    .note-detail-page-con{
        height: auto;
    }
    .header-container .page-top{
        padding: 0 var(--qsmContentPadding);
    }
    .note-detail-container .left-area{
        height: 35vh;margin-bottom: 12px;
    }
    .note-detail-dialog{
        border-radius: 0px !important;
    }
    .note-detail-container .right-area .author-info{
        padding: 8px 24px;display: none;
    }
    .note-detail-container .right-area .right-main{
        height: 100%;
        overflow: visible;
    }
    .note-detail-container .right-area{
        overflow-y: scroll;
    }
    .note-detail-container .right-area .comment-container{
        padding-bottom: 120px;padding: 0 12px;
    }
    .note-detail-container .right-area .tool-list-con{
        padding: 6px 0px;
    }
    .note-home .note-nav{
        width: 0;
    }
    .note-home .note-container .note-page-con{
        margin: 0;padding: 0 0px;border-radius: 0;
    }
    .note-home .top-user-block .right-area .btn-box{
        justify-content: space-between;
    }
    .note-home .top-user-block .right-area .btn-box>div{
        margin-right: 0;margin-bottom: 12px;
    }
    .note-home .top-user-block .right-area .author-con-btn{
        display: flex;
    }
    .note-home .note-container .note-page-con .header-title{
        display: none;
    }
    .note-manage-list .note-item .note-img{
        flex-shrink: 0;
    }
    .note-manage-list .note-item .item-right span{
        white-space: nowrap;
    }
    .note-home .note-submit-form .video-info-area{
    }
    .note-home .note-submit-form .video-info-area .right{
        padding: 0;margin-top: 20px;display: none !important;
    }
    .note-home .note-addEdit-dialog{
        width: 100vw !important;height: 100vh !important;margin: 0 auto!important;
    }
    .note-home .note-submit-form .video-info-area .right .video-area{
        width: 120px !important;height: 135px !important;
    }
    .note-edit-add-container{
        height: 90vh !important;
    }
    .note-home .note-submit-form .video-data{
        padding:12px;
    }
    .note-home .note-submit-form .video-data .update-video{
        white-space: nowrap;
    }
    .note-home .note-submit-form .b-cover .rec-cover{
        width: calc(100vw - 152px);overflow-x: scroll !important;
    }
    .note-home .note-submit-form .b-note-con .note-title .el-input{
        width: calc(100vw - 40px);
    }
    .note-home .note-type-article-dialog .note-submit-form .b-setting{
        flex-direction: column !important;
    }
    .note-home .note-type-article-dialog .note-submit-form .b-cover{
        margin-left: 96px;
    }

    .note-detail-container .left-area .swiper-pagination-bullet-active{
        background-color: var(--qsm-primary);
    }
    .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-horizontal.swiper-pagination-bullets{
        background: #ffffff;height: 24px;bottom: 0 !important;
    }
    .note-detail-container .left-area .note-image-con .swiper-container{
        padding-bottom: 24px;
    }
    .note-detail-container .left-area .swiper-button-next, .note-detail-container .left-area .swiper-button-prev{
        display: none !important;
    }
    .close-detail-dialog-btn{
        background-color: #FFFFFF !important;
    }
    .close-detail-dialog-btn svg use{
        color: var(--qsm-title) !important;
    }
    .note-detail-container .author-info-mobile{
        display: flex;
    }
    .note-detail-container .right-area .right-main>div{
        padding: 0 12px !important;
    }

}
@media screen and (max-width: 560px){
    .index-main .bottom-sider-content .bottom-side ul li span{
        display: none;
    }
    .top-right-area .search-touch-btn{
        display: flex;
    }
    .top-search-area{
        display: none;
    }
    .note-home .top-user-block .right-area .btn-box>div{
        width: 150px;padding: 6px 6px;
    }
    .note-home .top-user-block .right-area .btn-icon{
        width: 32px;height: 32px;flex-shrink: 0;
    }
    .note-home .top-user-block .right-area svg{
        width: 20px;height: 20px;
    }
    .note-home .top-user-block .right-area .btn-box{
    }
    .note-manage-list .note-item .note-img{
        display: none;
    }
    .note-home .top-user-block{
        padding: 12px;
    }
    .note-home .note-data-block{
        padding: 0px 12px 24px 12px;
    }

    .note-home .edit-user-dialog{
        width: 340px !important;
        padding: 16px !important;
    }
    .note-home .edit-info-area .btn-area button{
        width: 134px !important;
    }
    .note-home .edit-info-avatar .cropper-container{
        width: 200px !important;height: 200px !important;
    }

}