/*公共样式*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0; }
body { background:#fff; color:#555; font-size:14px; font-family:Microsoft YaHei }
td,th,caption { font-size:14px; }
h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal;}
a{text-decoration:none; color:#000;}
A:link{text-decoration:none; color:#000;}
A:visited{text-decoration:none; color:#000;}
A:hover{text-decoration:none; color:#0157a4;}
img { border:none; }
ol,ul,li { list-style:none; }
input, textarea, select, button { font:14px Verdana,Helvetica,Arial,sans-serif; }

/*命名规则 最外层 .控制-方法*/

/*****************index/index 后台首页***************************/
.index-index{box-sizing: border-box;background: #f2f2f2}

/*顶部*/
.index-top{height: 50px;width: 100%;background: #28333E;display: flex}
.index-top .index-top-title{line-height: 50px;text-align: center;width: 150px;color: #fff}
.index-top .index-top-nav{height: 50px;width:90%;background: #28333E;display: flex;    justify-content: space-between;}
.index-top .index-top-nav ul{display: flex;align-items: center;height: 50px;}
.index-top .index-top-nav ul li{height: 50px;line-height: 50px;padding: 0 20px;color: #fff;cursor: pointer}
.index-top .index-top-nav .home-index i{color: #fff;font-size: 25px}

.index-top .active_left_menu{background: #000000;color:#ffd04b!important;}

.index-top .admin-touxiang{width: 50px;height: 50px;float: right}
.index-top .admin-touxiang .admin-touxiang-img{cursor: pointer}
.admin-com{padding: 0!important;}
.admin-name{display: flex;background: url("/static/admin/images/admin_bg.png") no-repeat 100%;height: 60px;padding: 5px;}
.admin-name img{margin-left: 10px;background: url('/static/admin/images/admin_vip.png') no-repeat;background-size: 100%}
.admin-name p{color: #333}
.admin-name p span{color: #fff;
    background: #a0d6ff;
    padding: 0 5px;
    font-size: 12px;}
.admin-name-right p{color: #fff;    padding-left: 12px;font-size: 13px;line-height: 25px}
.admin-ico{padding: 5px;border-bottom: 2px solid #f2f2f2}
.admin-ico ul{display: flex;flex-wrap: wrap;}
.admin-ico ul li{margin: 3px}
.admin-ico ul li img{width: 30px;height: 30px;border-radius: 50%;overflow: hidden}
.admin-ico .admin-ico-quanxian{font-size: 12px;
    border-left: 5px solid #ffa500;
    background: #fff9f4;
    margin: 5px 0;
    padding: 3px 5px;
    color: #f60;display: flex;
    align-items: center;}

.admin-menu{padding: 10px 1px}
.admin-menu ul li{padding: 5px  0 5px 20px;color: #333;cursor: pointer;transition: all 0.5s;line-height: 30px}
.admin-menu ul li:hover{background: linear-gradient(90deg,#ffae12,#f07d17);color: #fff}
.admin-menu ul li i{font-size: 25px;vertical-align: sub;}


.index-com{display: flex;height: calc(100vh - 50px)}

    /*左侧*/
.index-com .index-com-left{width: 150px;background: #545c64}


.index-com .index-com-left>ul{}
.index-com .index-com-left>ul>li{}
.index-com .index-com-left>ul>li a{line-height:55px;color: #fff;cursor: pointer;padding: 0 20px;display: block}
.index-com .index-com-left>ul>li a:hover{background: #435364}
.index-com .index-com-left>ul>li a span{float: right;}
.index-com .index-com-left>ul>li i{margin-right: 5px;color: #909399}
.index-com .index-com-left .active_menu{background: #464646;color: #ffd04b}
.index-com .index-com-left .active_menu i{color: #ffd04b}
.index-com .index-com-left>ul>li>ul{height: 0px;overflow: hidden;transition: all 0.5s}
.index-com .index-com-left>ul>li>ul li a{padding: 0 0 0 40px;line-height: 40px}
.index-com .index-com-left>ul>li>ul>li a:hover{background: #374657
}
    /*右侧*/
.index-com .index-com-right{ width: calc(100% - 100px);}
.index-com .index-com-right .el-tabs__content{ padding: 0;}
.index-com-right .el-tabs__item:nth-child(1) .el-icon-close{display: none}/*第一个tab 隐藏关闭*/
.index-com-right .is-active{background: #409EFF!important;color: #fff!important}

/*****************login/admin***************************/
.index-main{padding: 5px;box-sizing: border-box}
.index-main .gonglv-item{width: 100%;line-height: 30px;display: block;border-bottom: 1px dashed #e5e5e5;letter-spacing: 2px}
.index-main .gonglv-item span{float: right}

.index-main .quanli{background: #ffa9a9;padding: 5px!important;border-radius: 40px;margin-right: 10px;}
.index-main .quanli:nth-child(4){background: #7f90ff;}
.index-main .quanli:nth-child(5){background: #a4af5d;}
.index-main .quanli:nth-child(6){background: #53b34d;}
.index-main .quanli:nth-child(7){background: #4cd3d8;}
.index-main .quanli:nth-child(8){background: #ed92ff;}
.index-main .quanli h2{text-align: center;line-height: 30px;color: #fff;font-weight: bold;font-size: 16px;letter-spacing: 2px}
.index-main .quanli p{text-align: center;color: #fff;font-size: 13px}
.index-main .gengxing-com{height: calc(100vh - 250px);overflow: auto}
.index-main .gengxing-com p{    display: inline-block;
    overflow: hidden;
    width: 70%;
    height: 30px;}
/*带条纹的样式*/

.gengxing-com::-webkit-scrollbar {
    /*滚动条整体样式*/
    width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
.gengxing-com::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius   : 10px;
    background-color: skyblue;
    background-image: -webkit-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.2) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0.2) 75%,
            transparent 75%,
            transparent
    );
}
.gengxing-com::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    background   : #ededed;
    border-radius: 10px;
}

/*****************login/index 登陆***************************/
.login-index{
    height: 100vh;
    background: #ffe9e952 url(/static/admin/images/login_bg.jpg) no-repeat;
    background-size: 100%;
    display: flex;align-content: center;align-items: center;
}
.login-index .login-box{width: 800px;height: 500px;background: #fff;margin: 0 auto;    border-radius: 20px;display: flex;box-shadow: 0 0 7px 1px #6d6d6d;}
.login-box .left {width: 360px;height: 500px;border-radius: 30px 0 0 30px;background: #f7f8fb;text-align: center}
.login-box .left h1{;font-size: 25px;letter-spacing: 1px;font-weight: bold;color: #000;padding: 50px 0 0px 0;}
.login-box .left img{width: 88%;}
.login-box .left .left-des{display: flex;justify-content: space-evenly;color: #565656;font-weight: 400;letter-spacing: 1px;font-size: 14px;}
.login-box .left .left-des i{font-size: 25px}
.login-box .left .left-des dt{line-height: 30px}

.login-box .right {width: calc(100% - 360px);box-sizing: border-box;height: 500px;border-radius: 0 30px  30px 0;background: #fff;text-align: center;position: relative}
.login-box .right h1{cursor: pointer;
    margin: 40px 0;
    font-size: 18px;
    font-weight: 500;
    color: #1a1a1a;}
.login-box .right .input-group{margin-bottom: 30px;padding: 0 50px;}
.login-box .right .right-ji{display: flex;justify-content: space-around;margin: 40px 0;}
.login-box .right .login_sub{background: #12bb37;width: 100%;color: #fff;cursor: pointer;line-height: 40px;display: block;border-radius: 4px;margin-top: 20px;letter-spacing: 10px}
.right .right-footer{width: 100%;box-sizing: border-box;;position: absolute;bottom: 0;padding: 0 50px;border-top:1px dashed #eee; display: flex;
    justify-content: space-between;}
.right .right-footer li{line-height: 60px;padding: 0 20px;cursor: pointer;font-size: 16px;}
.right .right-footer li i{font-size: 25px;vertical-align: sub;}
.right .right-footer li:hover{color: #12bb37}
.right .right-footer .xian{width: 1px;border-right: 1px dashed #eee}
/*.right .el-checkbox__inner{background-color: #12bb37;border-color: #12bb37;}*/





/*****************imgs/lst 图库管理***************************/
.imgs_open{min-width:920px;min-height: 580px;border-radius: 10px }

/*****************imgs/img 图库管理***************************/
.imgs-img{display: flex}
.imgs-img .left{width: 180px;height: 100vh;background: #f5f8fb;padding: 10px;box-sizing: border-box;position: relative}
.imgs-img .left h1{color: #333;font-size:20px;font-weight: bold;letter-spacing: 1px;text-align: center;margin-top: 15px;padding-bottom: 15px;border-bottom: 1px dotted #ccc}
.imgs-img .left ul{margin-top: 20px;}
.imgs-img .left ul li{font-size: 14px;letter-spacing: 1px;line-height: 40px;margin-bottom: 10px;border-radius: 5px;padding: 0 10px;cursor: pointer}
.imgs-img .left .left_active{background: #1E9FFF;color: #fff}
.imgs-img .left .up_img{
    background: #1bc7b1;
    color: #fff;
    line-height: 40px;
    text-align: center;margin-top: 120px;border-radius: 29px;position: absolute;bottom: 30px;width: 160px}


.imgs-img .right{width: calc(100% - 180px);height: 100vh}
.imgs-img .right .right-tag{background: #fff;box-shadow:2px 1px 6px 0px #e8e7e7;}
.imgs-img .right .right-tag ul{display: flex;padding: 0 15px;flex-wrap: wrap}



.imgs-img .right .right-tag ul li{line-height: 50px;margin: 0 5px;padding: 0 3px;;cursor: pointer;}
.imgs-img .right .right-tag .tag_active{border-bottom: 2px solid #1E9FFF;color:#1E9FFF }
.imgs-img .right .right-img{padding: 10px;box-sizing: border-box;height: calc(100% - 100px);overflow-y:auto}
.imgs-img .right .right-img ul{display: flex;flex-wrap: wrap}
.imgs-img .right .right-img ul li{width: 22vh;height: 22vh;margin: 1vh;background: rgba(0,0,0,0.5);position: relative;cursor: pointer}
.imgs-img .right .right-img ul li img{width: 100%;height: 100%;object-fit: contain;}
.imgs-img .right .right-img ul li p{position: absolute;bottom: 0;height: 25px;line-height: 25px;width: 100%;overflow: hidden;text-align: center;background: rgba(0,0,0,0.7);color: #fff;font-size: 12px}
.imgs-img .right .right-img ul li .del{position: absolute;right: 0;top:0;padding: 10px;opacity: 0;transition: all 0.5s;z-index: 100}
.imgs-img .right .right-img ul li .del i{color: #fff;cursor: help;font-size: 20px}
.imgs-img .right .right-img ul li .del:hover i{color: #f1c40f}
.imgs-img .right .right-img ul li:hover .del{opacity: 1}

.imgs-img .right .right-page{height: 40px;box-shadow:2px -1px 6px 0px #e8e7e7;text-align: center;}

.imgs-img .right .right-page .el-pagination{padding-top: 5px}

/*滚动条样式*/
.imgs-img .right .right-img::-webkit-scrollbar {
    /*滚动条整体样式*/
    width : 8px;  /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
.imgs-img .right .right-img::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius   : 10px;
    background-color: skyblue;
    background-image: -webkit-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.2) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0.2) 75%,
            transparent 75%,
            transparent
    );
}
.imgs-img .right .right-img::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    background   : #ededed;
    border-radius: 10px;
}





/*通用列表过渡动画*/
.list-complete-item {
    transition: all 1s;
    display: inline-block;
    margin-right: 10px;
}
.list-complete-enter, .list-complete-leave-to
    /* .list-complete-leave-active for below version 2.1.8 */ {
    opacity: 0;
    transform: translateY(30px);
}
.list-complete-leave-active {
    position: absolute;
}
/*列表过渡动画 结束*/