.nav_hover { &:hover,&.v-link-active {background: #008fbf;} } .header {height: 50px;background: #0099cc;color: #fff;line-height: 50px; a {display: block;} .head_name {width: 110px;height: 50px;border-right: 1px solid #008fbf;text-align: center;margin-right: 40px;@extend .nav_hover; } .head_tool {margin-right: 38px; a {float: left;@extend .nav_hover;} i {padding: 0 10px;} } } .logo {width: 50px;height: 50px;background: #0087b4;text-align: center;} .nav { ul li {float: left;margin-right: 5px; a {display: block;@extend .nav_hover;padding: 0 10px;} i {margin-right: 12px;} } } .sidebar {width: 180px;position: fixed;top: 50px;bottom: 0;left: 0;z-index: 102;overflow-x: hidden;background-color: #293038;transition: width .3s; &::-webkit-scrollbar{ width:2px; } &.sidebar_mini {width: 50px; .nav_left li a i {width: 50px;padding-left: 0;} } .sidebar_tool {height: 30px;background: #394555;color: #aeb9c2;text-align: center;line-height: 30px;cursor: pointer; &:hover {background: #37424f;} } .nav_left {color: #fff;font-size: 12px;padding-top: 20px; li { a {height: 40px;line-height: 40px;overflow: hidden;display: block; &:hover,&.v-link-active {background: #0099cc;} i {font-size: 18px;display: block;float: left;width: 72px;text-align: center;padding: 11px 0;padding-left: 20px;transition: all .3s;} span {display: block;float: left;max-width: 120px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;} } } } } .main {width: auto;position: absolute;top: 50px;bottom: 0;left: 180px;right: 0;overflow-y: auto;background: #eaedf1;transition: left .3s; .notice {height: 30px;background: #fff;line-height: 30px;padding: 0 25px;color: #2d2b2c;} .main_content {margin: 30px 30px 0;min-height: calc(100% - 60px);background: #fff;padding: 15px 27px;} } .title {height: 45px;line-height: 44px;border-bottom: 1px solid #ddd; span {padding-left: 15px;margin-left: 2px;border-left: 2px solid #88b7e0;color: #2d2b2c;height: 15px;line-height: 15px;display: inline-block;} } .list { &>li {margin-bottom: 20px;} .align {margin-left: 85px;} } .list_align {margin-left: 85px;} .table {margin: 13px 0; input.sort {border: 1px solid #fff;width: 50px;text-align: center;line-height: 27px; &:focus {border-color: #e1e6eb;} } } .index_block {width: calc((100% + 16px)/4 - 16px);height: 100px;border-radius: 5px;background: #000;float: left;margin: 27px 16px 0 0;color: #fff;overflow: hidden; &:nth-of-type(4n) {margin-right: 0;} &.index_block_info {background: #03a9f4;} &.index_block_column {background: #8bc34a;} &.index_block_admin {background: #e84e40;} &.index_block_visit {background: #9c27b0;} .fr {text-align: right;padding-right: 20px; p {padding-top: 20px;} strong {padding-top: 15px;display: block;font-size: 22px;} } i {font-size: 62px;padding: 19px 30px;float: left;} } .index_box {border: 1px solid #ddd;margin-top: 27px; .index_box_tit {height: 38px;line-height: 37px;border-bottom: 1px solid #ddd;text-indent: 15px;} .index_box_content {min-height: 260px;} } .purple_list {padding: 0 15px; li {padding: 15px 0 15px;color: #92657b; span {color: #0099cc;} } } .index_highcharts {width: 100%;height: 300px;padding: 25px 25px 5px;} .main.main_big {left:50px;} .sidebar2 { width: 180px; position: fixed; top: 50px; bottom: 0; left: 180px; z-index: 102; background-color: #eaedf1; transition: width .3s,left .3s; font-size: 12px;} .sidebar2.sidebar2_mini {width: 0;} .sidebar2.sidebar2_mini2 {left: 50px;} .sidebar2 .content_nav_tit { height: 70px; line-height: 70px; color: #333; text-indent: 20px; background: #d9dee4; overflow: hidden; } .sidebar2 .btn_expand { position: absolute; right: 0; top: 50%; margin-top: -25px; transition: transform .2s; transform-origin: right; } .sidebar2 .btn_expand:hover { transform: scaleX(1.2); } .sidebar2 .btn_contract { position: absolute; left: 100%; top: 50%; margin-top: -25px; transition: transform .2s; transform-origin: left; } .sidebar2 .btn_contract:hover { transform: scaleX(1.2); } .content_box { margin-left: 180px; padding: 25px 17px; min-height: 100%; transition: margin-left .2s; background: #fff; } .content_box.content_big {margin-left: 0;} .content_nav_list { overflow-x: auto; } .content_nav_list li { line-height: 40px; } .content_nav_list li a { display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .content_nav_list li a:hover, .content_nav_list li a.v-link-active { background: #fff; } .content_nav_list ul li { text-indent: 40px; } .content_nav_list i { display: inline-block; width: 30px; text-align: center; color: #333; } .content_left span {width: 100%;max-width: 100%!important;text-align: center;} #upload_template {display: none;} .list_dropzone {margin: 20px 20px 20px 85px;} .sort-placeholder {border: 1px dashed #ccc;background: #fff;} .upload_list {width: 100%;background: #eee;border-radius: 10px;overflow: hidden;padding: 15px 0 5px;position: relative;margin-bottom: 10px; &.sort-placeholder {border-radius: 10px;margin-bottom: 10px;height: 136px;padding: 15px 0 5px;margin-bottom: 10px;} &>div { float: left; padding: 0 15px; line-height: 24px; img {max-width: 100px;max-height: 126px;vertical-align: middle;} &.upload_img {width: 130px;height: 126px;line-height: 126px;text-align: center;} &.ellipsis {width: 250px;} .list { li {margin-bottom: 10px; label {line-height: 26px; &>span {width: auto;padding: 0 10px 0 0;} input {height: 26px;width: 400px;} textarea {width: 400px;height: 50px;line-height: 1.4;} } &:first-child label input {width: 200px;} } } } .upload_delete {position: absolute;right: 10px;top: 10px;z-index: 999;opacity: 0.8; &:hover {opacity: 1;} } }