@charset "utf-8"; /* CSS Document */ /*****header*******/ .header { height: 70px; position: relative; background-size: 100% 100%; -moz-background-size: 100% 100%; -webkit-background-size: 100% 100%; -o-background-size: 100% 100%; padding: 0 30px; } body.active .header { z-index: 9999; /* background-image: url(../images/headBg2.jpg); */ } .headLogin { width: 70px; height: 30px; text-align: center; line-height: 30px; background: #fff; border-radius: 15px; font-size: 14px; /* margin-left: 25px; */ /*display: none !important;*/ } /*.noLoginType .headLogin { display: inline-block !important; }*/ .noLoginType .loginAfter { display: none; } .noLoginType .logins { display: block; } .headLine2 { height: 100%; width: 1px; } .headLogo { float: left; font-size: 22px; color: #fff; line-height: 70px; font-weight: bold; } .headLogo:hover { color: #fff; } .headLogo span { display: inline-block; background-color: #40ACFF; padding: 0 10px; line-height: 26px; font-size: 12px; margin-left: 5px; border-radius: 3px; position: relative; top: -3px; } .headTab { float: left; overflow: hidden; margin-left: 20px; height: 100%; } .headTab li { float: left; height: 100%; width: 70px; text-align: center; line-height: 0; position: relative; } .headTab li:after { content: ""; width: 100%; height: 5px; position: absolute; left: 0; bottom: 0; transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; /* background: #67B7F7; */ filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } .headTab a { display: block; height: 100%; } .headTab img { height: 28px; margin-top: 21px; filter: alpha(opacity=70); -moz-opacity: .7; -khtml-opacity: .7; opacity: .7; transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; } .headTab li.active:after, .headTab li.active img, .headTab li:hover:after, .headTab li:hover img { filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } .headTitle { height: 28px; margin-top: 21px; line-height: 28px; float: left; font-weight: bold; color: #fff; font-size: 16px; margin-left: 50px; } .headSearch { width: 255px; height: 30px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; background: rgba(255, 255, 255, 0.3); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7Fffffff, endColorstr=#7Fffffff); border-radius: 18px; } .headSearch .headSearchImg { height: 18px; position: absolute; top: 0; bottom: 0; left: 80px; margin: auto; line-height: 0; text-align: center; transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; } .headSearchImg img { height: 16px; } .headSearch input { border: 0; background: transparent; height: 100%; display: block; width: 100%; line-height: 24px; padding: 6px 40px 6px 50px; text-align: center; font-size: 14px; color: #fff; transition: left .3s; -moz-transition: left .3s; -ms-transition: left .3s; -o-transition: left .3s; -webkit-transition: left .3s; } .headSearch input::-webkit-input-placeholder { color: #fff; } .headSearchClose { position: absolute; height: 100%; width: 84px; top: 0; left: 105%; /* border: 1px solid #1973B9; */ color: #fff; text-align: center; line-height: 28px; border-radius: 15px; cursor: pointer; font-size: 12px; display: none; transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; -webkit-transition: all .3s; } body.active .headSearch { left: -490px; } body.active .headSearchClose, body.active .headSearchHistory { display: block; } body.active .headSearchImg { left: 226px; } .headSearchHistory { position: absolute; left: 10px; top: 0; width: 40px; font-size: 12px; color: #fff; line-height: 30px; display: none; } .headSearchHistBox { } .headSearchHistBox i { } /* .headSearchClose:hover { background-color: #5EAEEB; } */ .headUser { float: right; padding: 8px 0; height: 100%; } .headUser > *, .loginAfter > * { display: inline-block; vertical-align: middle; } .loginAfter { height: 100%; } .skinBox { position: relative; cursor: pointer; z-index: 9; width: 27px; } .skinBox > img { height: 20px; } .skin { position: absolute; z-index: 99; top: 100%; right: 100%; width: 340px; line-height: 20px; transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; -webkit-transition: all .2s; overflow: hidden; background: #fff; padding: 16px; border-radius: 4px; -ms-transform: scale(0, 0); -ms-transform-origin: 100% 0; -webkit-transform: scale(0, 0); -webkit-transform-origin: 100% 0; -moz-transform: scale(0, 0); -moz-transform-origin: 100% 0; -o-transform: scale(0, 0); -o-transform-origin: 100% 0; transform: scale(0, 0); transform-origin: 100% 0; } .skinBox.active .skin { transform: scale(1, 1); } .skinT { line-height: 24px; } .skinT img { float: right; width: 20px; } .skinList { overflow: hidden; } .skins { width: 33.333333%; float: left; padding: 4px 2px 0; } .skins > div { padding-bottom: 62.5%; height: 0; overflow: hidden; position: relative; } .skins > div > img { width: 100%; display: block; } .blue > div { background: #198BE3; } .red > div { background: #C42016; } .green > div { background: #01A566; } .skinTxt { position: absolute; left: 0; right: 0; bottom: 0; line-height: 20px; text-align: center; /* font-size: 12px; */ color: #fff; } .blue .skinTxt, .blue .skinText { background: #198BE3; } .red .skinTxt, .red .skinText { background: #C42016; } .green .skinTxt, .green .skinText { background: #01A566; } .skinCheck { height: 20px; position: absolute; left: 0; right: 0; top: 38%; margin-top: -10px; text-align: center; line-height: 20px; color: #fff; font-size: 12px; display: none; } .skins.active .skinCheck { display: block; } .skinText { height: 100%; width: 100%; position: absolute; left: 0; top: 100%; transition: all .1s; -moz-transition: all .1s; -ms-transition: all .1s; -o-transition: all .1s; -webkit-transition: all .1s; text-align: center; color: #fff; line-height: 60px; } .skins.active:hover .skinText { top: 100%; } .skins:hover .skinText { top: 0; } .authorBox > * { display: inline-block; vertical-align: middle; /* line-height: 0; */ } .authorBox { position: relative; } .authorSetBox { position: absolute; width: 130px; top: 120%; left: 50%; margin-left: -65px; padding-top: 1px; opacity: 0; z-index: -1; transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; -webkit-transition: all .3s; } .authorBox:hover .authorSetBox { opacity: 1; top: 98%; z-index: 1; } .authorSetCon { background-color: #fff; position: relative; text-align: center; cursor: pointer; margin-top: 9px; border-radius: 2px; } .authorSetCon::after { content: ''; position: absolute; left: 36px; top: -10px; border: 5px solid transparent; border-bottom-color: #fff; } .auSetLi { padding: 5px 0; } .headUserImg { height: 45px; width: 45px; border-radius: 50%; line-height: 0; overflow: hidden; margin: 0 12px 0 0; } .headUserImg img { width: 100%; } .headUserTxt { font-size: 16px; color: #fff; } .headLine1 { width: 1px; height: 100%; background: #fff; filter: alpha(opacity=30); -moz-opacity: .3; -khtml-opacity: .3; opacity: .3; margin: 0 15px; } .headNumBox { font-size: 12px; text-align: center; color: #fff; } .headNum { height: 24px; width: 100px; border-radius: 12px; background: #fff; margin-bottom: 8px; line-height: 24px; } .headNumTxt span { display: inline-block; width: 2px; height: 13px; background: #fff; margin: 0 7px; position: relative; top: 3px; } .headMode { font-size: 12px; color: #fff; position: relative; /* line-height: 24px; */ /* padding-right: 15px; */ cursor: pointer; } .headModeTxt { line-height: 0; /* background: #50AAF1; */ padding: 0 15px; border-radius: 13px; position: relative; z-index: 9; } .headModeTxt * { display: inline-block; vertical-align: middle; } .headModeTxt span { line-height: 26px; } .headModeTxt i { font-size: 18px; margin-left: 5px; transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; } .headModeList { position: absolute; width: 100%; right: 0; top: 40px; text-align: center; /* background-color: #0078D7; -webkit-box-shadow: 0 5px 6px rgba(64, 172, 255, .4); -moz-box-shadow: 0 5px 6px rgba(64, 172, 255, .4); box-shadow: 0 5px 6px rgba(64, 172, 255, .4); */ line-height: 24px; /* padding: 5px 0; */ border-radius: 3px; transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; opacity: 0; z-index: -1; padding-top: 18px; } .headModeList li { margin-bottom: 5px; } .headMode:hover .headModeList { top: 18px; opacity: 1; z-index: 1; } .headModeList li.active { /* background-color: #036AC9; */ border-radius: 13px; } .headModeList a { font-size: 12px; color: #fff; } .downloadFx { color: #fff; } .downloadFx * { vertical-align: middle; display: inline-block; } .downloadFx img { width: 18px; } .noCard { position: relative; transform: translateY(-50%); top: 50%; /* font-size: ; */ text-align: center; } .noCardImg { line-height: 0; } .noCardImg img { width: 50px; } .noCardTxt { margin-top: 10px; } .layerInput { padding: 20px 30px 0; } .layerInput input { display: block; width: 100%; padding: 5px 10px; line-height: 24px; border-radius: 4px; } /*****header*******/ /*****public*******/ .warpper { height: calc(100% - 70px); } .inSec3RowBox { height: calc(100% - 76px); margin: 10px -10px; } .inSec3Row { height: 100%; overflow: auto; display: none; } .inSec3Row:first-child { display: block; } .inSec3Col6 { /* width: 50%; */ width: 840px; float: left; padding: 10px; } .inSec3Col3 { /* width: 25%; */ width: 420px; float: left; padding: 10px; } .inSecT { color: #fff; font-size: 16px; line-height: 24px; padding: 5px 15px; /* background-color: #198BE3; */ height: 34px; line-height: 0; } .inSecT * { display: inline-block; vertical-align: middle; } .inSecT span { line-height: 24px; } .inSecTMore { font-style: normal; display: inline-block; width: 30px; height: 16px; text-align: center; line-height: 16px; border-radius: 9px; font-size: 12px; color: #fff; margin-left: 6px; /* margin-top: 4px; */ background: #FFAC41; position: relative; } .inSecTMore::after { content: ''; position: absolute; left: -8px; top: 50%; margin-top: -5px; border: 5px solid transparent; border-right-color: #FFAC41; } .more { width: 35px; height: 20px; text-align: center; line-height: 0; cursor: pointer; display: block; border-radius: 10px; float: right; margin-top: 2px; /* background-color: #75B9EE; */ } .more span { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #fff; margin: 8px 2px 0; } .noLoginImg { line-height: 0; } .noLoginImg img { width: 70px; } .noLoginTxt { font-size: 14px; color: #B8B8B8; } .noLogin { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: 110px; height: 130px; text-align: center; } /*****public*******/ /*****index_sec1*******/ .inSecLeftBox { position: fixed; z-index: 99; top: 52%; transform: translateY(-50%); left: 0; width: 62px; text-align: center; font-size: 12px; background-color: #fff; -webkit-box-shadow: 0 0 10px rgba(25, 139, 227, .3); -moz-box-shadow: 0 0 10px rgba(25, 139, 227, .3); box-shadow: 0 0 10px rgba(25, 139, 227, .3); cursor: pointer; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; transition: all .4s .4s; -moz-transition: all .4s .4s; -ms-transition: all .4s .4s; -o-transition: all .4s .4s; -webkit-transition: all .4s .4s; } .index_sec1.active .inSecLeftBox { left: -62px; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; transition: all .4s; -moz-transition: all .4s; -ms-transition: all .4s; -o-transition: all .4s; -webkit-transition: all .4s; } .inSecLeftCon { border-bottom: 1px solid #F0F0F0; transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; padding: 11px 0; } .inSecLeftCon:last-child { border-bottom: 0px solid #F0F0F0; } .inSecLeftImg { line-height: 0; margin-bottom: 6px; } .inSecLeftImg img { width: 16px; } .inSecLeftImg img:last-child { display: none; } .inSecLeftTxt { color: #424242; transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; } /* .inSecLeftCon:hover { background-color: #198BE3; border-color: #198BE3; } */ .inSecLeftCon:hover .inSecLeftImg img:first-child { display: none; } .inSecLeftCon:hover .inSecLeftImg img:last-child { display: inline-block; } .inSecLeftCon:hover .inSecLeftTxt { color: #fff; } .indexSec1Con { width: 415px; background-color: #fff; position: fixed; z-index: 99; left: -415px; top: 90px; bottom: 0; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; transition: all .4s; -moz-transition: all .4s; -ms-transition: all .4s; -o-transition: all .4s; -webkit-transition: all .4s; } .index_sec1.active .indexSec1Con { left: 0; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; transition: all .4s .6s; -moz-transition: all .4s .6s; -ms-transition: all .4s .6s; -o-transition: all .4s .6s; -webkit-transition: all .4s .6s; } .inSec1Tab { text-align: center; overflow: hidden; background-color: #fff; border-bottom: 1px solid #F0F0F0; padding: 10px 0; cursor: pointer; } .inSec1TabBox { width: 33.333333%; float: left; line-height: 0; position: relative; } .inSec1TabBox.active:after { content: ''; position: absolute; left: 0; right: 0; bottom: -11px; height: 3px; /* background-color: #198BE3; */ } .inSec1TabBox * { display: inline-block; vertical-align: middle; } .inSec1TabBox span { display: inline-block; line-height: 24px; } .inSec1TabBox img { width: 16px; margin-right: 5px; } .inSec1Box { display: none; height: 100%; } .inSec1Box.active { display: block; } .inSec1List1 { width: 130px; float: left; height: 100%; overflow: auto; } .inSec1List1 li { padding: 5px 12px 5px; cursor: pointer; transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; } .inSec1List1 a { display: block; font-size: 14px; line-height: 0; transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; } .inSec1List1 span { display: inline-block; vertical-align: middle; line-height: 24px; } .inSec1List1 span:first-child { width: 85%; } .inSec1List1 span:last-child { width: 11%; } .inSec1List2 { margin-left: 130px; height: 100%; overflow-y: auto; position: relative; } .inSec1List2 li, .inSec1Drag div { padding: 5px 12px; transition: background 0.3s; -moz-transition: background 0.3s; -ms-transition: background 0.3s; -o-transition: background 0.3s; -webkit-transition: background 0.3s; } .inSec1Drag div { cursor: pointer; position: relative; overflow: hidden; } /* .inSec1Drag div:hover { background-color: #D8EEFF; } */ .inSec1List2 a { display: block; line-height: 25px; font-size: 14px; position: relative; } .inSec1List2 span, .inSec1Drag span { display: block; margin-left: 30px; margin-right: 30px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .inSec1List2 img, .inSec1Drag img { width: 22px; float: left; } .inSec1List2 .fa { position: absolute; right: 0; top: 0; line-height: 25px; } .inSec1List2 .fa-heart { color: #F6685E; } .inSec1List2 .fa-heart-o { color: #198be3; /* color: #ffdbd9; */ } .indSec1Box { height: calc(100% - 60px); } .indSec1Line { height: 15px; position: relative; z-index: 9; background-color: #fff; } .aLeft { padding-right: 5px; position: absolute; z-index: 9; width: 18px; height: 88px; line-height: 0; right: -18px; top: 0; bottom: 0; margin: auto; text-align: center; background-color: #fff; border-radius: 0 8px 8px 0; webkit-box-shadow: 5px 0 10px rgba(114, 165, 205, 0.25); -moz-box-shadow: 5px 0 10px rgba(114, 165, 205, 0.25); box-shadow: 5px 0 10px rgba(114, 165, 205, 0.25); cursor: pointer; transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; } /* .aLeft:hover { background-color: #D8EEFF; } */ .aLeft i { line-height: 88px; font-size: 20px; color: #C8C8C8; } /* .aLeft:hover i{ color: #fff; } */ .inSec1Drag a { padding-right: 50px; position: relative; } .inSec1Drag .fa { width: 40px; height: 20px; text-align: center; line-height: 20px; border-radius: 13px; position: absolute; top: 0; right: 12px; bottom: 0; color: #fff; font-size: 14px; cursor: pointer; margin: auto; transition: background 0.3s; -moz-transition: background 0.3s; -ms-transition: background 0.3s; -o-transition: background 0.3s; -webkit-transition: background 0.3s; } .inSec1Drag .fa-minus { background-color: #B2B2B2; } .inSec1Drag .fa-plus { background-color: #D2E4FF; } .inSec1Drag .fa-plus:hover { background-color: #69A5FE; } .inSec1Drag .fa-minus:hover { background-color: #FD6F22; } /*****index_sec1*******/ /*****index_sec2*******/ .index_sec2 .inSecLeftBox { left: inherit; right: 0; } .inSec2Box { width: 350px; background-color: #fff; position: fixed; z-index: 99; right: -415px; top: 90px; bottom: 0; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; transition: all .4s; -moz-transition: all .4s; -ms-transition: all .4s; -o-transition: all .4s; -webkit-transition: all .4s; } .index_sec2.active .inSec2Box { right: 0; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; transition: all .4s .6s; -moz-transition: all .4s .6s; -ms-transition: all .4s .6s; -o-transition: all .4s .6s; -webkit-transition: all .4s .6s; } .index_sec2.active .inSecLeftBox { right: -62px; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; transition: all .4s; -moz-transition: all .4s; -ms-transition: all .4s; -o-transition: all .4s; -webkit-transition: all .4s; } .aRight { padding-left: 5px; position: absolute; z-index: 9; width: 18px; height: 88px; line-height: 0; left: -18px; top: 0; bottom: 0; margin: auto; text-align: center; background-color: #fff; border-radius: 8px 0 0 8px; webkit-box-shadow: -5px 0 10px rgba(114, 165, 205, 0.25); -moz-box-shadow: -5px 0 10px rgba(114, 165, 205, 0.25); box-shadow: -5px 0 10px rgba(114, 165, 205, 0.25); cursor: pointer; transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; } /* .aRight:hover { background-color: #D8EEFF; } */ .aRight i { line-height: 88px; font-size: 20px; color: #C8C8C8; } .inSec2Tab { text-align: center; overflow: hidden; background-color: #fff; border-bottom: 1px solid #F0F0F0; padding: 10px 0; cursor: pointer; } .inSec2TabBox { width: 50%; float: left; line-height: 0; position: relative; } .inSec2TabBox.active:after { content: ''; position: absolute; left: 0; right: 0; bottom: -11px; height: 3px; /* background-color: #198BE3; */ } .inSec2TabBox * { display: inline-block; vertical-align: middle; } .inSec2TabBox span { display: inline-block; line-height: 24px; } .inSec2TabBox img { width: 16px; margin-right: 5px; } .indexSec2Box { height: calc(100% - 60px); } .inSec2Con { display: none; height: 100%; } .inSec2Con.active { display: block; } .inSec2L { height: 100%; width: 110px; float: left; /* background-color: #F2F9FF; */ } .inSec2R { margin-left: 110px; height: 100%; position: relative; } .inSec2Llist li { /* border-bottom: 1px solid #e0edef; */ padding: 5px 12px 5px; line-height: 20px; cursor: pointer; transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; } .inSec2Llist span { display: block; width: 70px; } .inSec2Llist i { font-style: normal; display: inline-block; float: right; width: 18px; height: 16px; font-size: 12px; color: #fff; margin-left: 6px; text-align: right; } /* .inSec2Llist li.active, .inSec2Llist li:hover { background: #D8EEFF; border-bottom-color: #D8EEFF; } */ .indexSec2Li { border-bottom: 1px dashed #EAEAEA; padding: 10px 30px 10px 40px; position: relative; cursor: pointer; } .indexSec2Li, .indexSec2Li > span { display: block; } .indexSec2T { position: relative; line-height: 30px; } .indexSec2T img { position: absolute; left: -25px; top: 50%; transform: translateY(-50%); width: 20px; } .indexSec2T span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .indexSec2Li > i { position: absolute; top: 5px; font-size: 16px; right: 10px; color: #a2a9a7; cursor: pointer; } .indexSec2Txt { font-size: 12px; color: #a2a9a7; line-height: 24px; } /*****index_sec2*******/ /*****index_sec3*******/ .index_sec3, .layui-form { height: 100%; } .indexSec3Box { margin: 0 120px; height: 100%; transition: padding .4s; -moz-transition: padding .4s; -ms-transition: padding .4s; -o-transition: padding .4s; -webkit-transition: padding .4s; } .inSec3Head { background-color: #fff; margin: 20px 0 0; display: inline-block; line-height: 0; webkit-box-shadow: 5px 0 10px rgba(114, 165, 205, 0.25); -moz-box-shadow: 5px 0 10px rgba(114, 165, 205, 0.25); box-shadow: 5px 0 10px rgba(114, 165, 205, 0.25); cursor: pointer; } .inSec3Head > *, .inSec3HeadTabBox > * { display: inline-block; vertical-align: middle; } .inSec3HeadTab { padding: 0 15px; position: relative; } .inSec3HeadTab.active:after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; /* background-color: #198BE3; */ } .inSec3HeadTab > * { display: inline-block; vertical-align: middle; } .inSec3HeadTabImg { line-height: 0; width: 18px; } .inSec3HeadTabImg img { width: 100%; } .inSec3HeadTabImg img:last-child { display: none; } .inSec3HeadTab.active .inSec3HeadTabImg img:last-child { display: inline-block; } .inSec3HeadTab.active .inSec3HeadTabImg img:first-child { display: none; } .inSec3HeadTabTxt { height: 36px; line-height: 36px; margin-left: 5px; } .inSec3HeadLine { height: 24px; width: 1px; background-color: #EAEAEA; } .inSec3Setting, .inSec3HeadAdd { padding: 0 15px; } .inSec3Box { -webkit-box-shadow: 0 0 10px rgba(114, 165, 205, 0.25); -moz-box-shadow: 0 0 10px rgba(114, 165, 205, 0.25); box-shadow: 0 0 10px rgba(114, 165, 205, 0.25); background-color: #fff; } .inSec3Con { overflow: auto; height: 200px; position: relative; } .inSec3Major { float: left; width: 25%; padding: 19px 10px; border-left: 1px dashed #EAEAEA; border-bottom: 1px dashed #EAEAEA; } .inSec3MajorImgBox { line-height: 0; } .inSec3MajorImgBox * { display: inline-block; vertical-align: middle; } .inSec3MajorImg { width: 24px; margin-right: 10px; } .inSec3MajorImg img { width: 100%; } .inSec3MajorImgBox span { width: 70%; line-height: 24px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .inSec3MajorTxt { text-align: right; margin-top: 10px; } .inSec3MajorTxt span { font-weight: bold; font-size: 20px; } .inSec3Major:nth-child(1) .inSec3MajorTxt span { color: #198BE3; } .inSec3Major:nth-child(2) .inSec3MajorTxt span { color: #F6695F; } .inSec3Major:nth-child(3) .inSec3MajorTxt span { color: #59D078; } .inSec3Major:nth-child(4) .inSec3MajorTxt span { color: #8652FE; } .inSec3Major:nth-child(5) .inSec3MajorTxt span { color: #ECA202; } .inSec3Major:nth-child(6) .inSec3MajorTxt span { color: #00E7D4; } .inSec3Major:nth-child(7) .inSec3MajorTxt span { color: #665FF5; } .inSec3Major:nth-child(8) .inSec3MajorTxt span { color: #DBC009; } .inSec3L { width: 130px; float: left; /* background-color: #F2F9FF; */ height: 100%; overflow: auto; } .inSec3R { margin-left: 130px; height: 100%; overflow: auto; } .workList li { padding: 7px 5px; /* border-bottom: 1px solid #E0F1FF; */ line-height: 0; cursor: pointer; transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; } /* .workList li.active { background-color: #D6EDFF; } */ .workList li > * { display: inline-block; vertical-align: middle; } .workListImg img { width: 100%; } .workListImg { width: 14px; margin-right: 2px; line-height: 0; } .workList span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 70px; line-height: 20px; } .workListTips span { max-width: 59px; } .workListInfo span { width: 70px; } .inSec3WorkBox { padding: 0 10px; display: none; position: relative; height: 100%; } .inSec3WorkBox .inSec2List { padding: 0; } .inSec3WorkBox .inSec2T { width: 65%; } .inSec3WorkBox:first-child { display: block; } .inSec3Work { border-bottom: 1px dashed #F0F0F0; padding: 4px; position: relative; } .inSec3WorkT { margin-right: 66px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .inSec3WorkTime { font-size: 12px; margin-top: 4px; color: #C3C3C3; } .inSec3WorkBtn { position: absolute; right: 0; top: 0; bottom: 0; margin: auto; width: 50px; height: 20px; line-height: 20px; text-align: center; font-size: 12px; /* background-color: #EAF5FF; */ /* color: #198BE3; */ border-radius: 10px; cursor: pointer; } .inSec3WorkBtn2 { position: absolute; right: 0; top: 0; bottom: 0; margin: auto; width: 50px; height: 20px; line-height: 20px; text-align: center; font-size: 12px; /* color: #198BE3; */ border-radius: 10px; } .inSec2List { padding: 0 10px; background: #fff; } .inSec2List li { padding: 9px 0; border-top: 1px dashed #E7E7E7; position: relative; } .inSec2List li:first-child { border: 0; } .inSec2List a, .inSec2List span { display: block; } .inSec2List a { font-size: 14px; } .inSec2T { width: 70%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .inSec2T img { float: left; margin-right: 8px; width: 18px; margin-top: 3px; } .inSec2Time { text-align: right; color: #C2C2C2; float: right; } .inSec3Num { font-style: normal; display: inline-block; width: 18px; height: 16px; line-height: 16px; border-radius: 9px; font-size: 12px; color: #fff; margin-left: 6px; /* color: #2E96E6; */ text-align: right; } .inSec3Link { display: inline-block; line-height: 24px; padding: 0 15px; color: #424242; border-radius: 4px; margin-top: 10px; margin-left: 10px; } .inSec3Link1 { background-color: #CDFFF5; border: 1px solid #1CDBB5; } .inSec3Link2 { background-color: #F2F9FF; border: 1px solid #8ECBFF; } .inSec3Link3 { background-color: #FFF5B1; border: 1px solid #F7DF6F; } .inSec3Link4 { background-color: #FFCDCA; border: 1px solid #FDA09A; } .inSec3Link5 { background-color: #F0E9FF; border: 1px solid #D3BEFF; } .inSec3Link6 { background-color: #CEFFFC; border: 1px solid #79F1E9; } .inSec3Link7 { background-color: #E7EDFF; border: 1px solid #A8BCF8; } .inSec3Link8 { background-color: #FFEEE1; border: 1px solid #F7B482; } .serRow { overflow: hidden; margin: 0 -4px; padding-bottom: 10px; } .serCol3 { float: left; width: 33.333333%; padding: 0 4px; margin-top: 12px; } .serCon, .serCon span { display: block; font-size: 12px; } .serCon { font-size: 14px; text-align: center; } .serImg { margin: 0 auto 5px; line-height: 0; width: 35px; height: 35px; border-radius: 50%; overflow: hidden; } .serImg img { width: 100%; } .serTxt { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .propagateBox { overflow: hidden; } .propagateL { float: left; width: 110px; } .propagateImg { line-height: 0; overflow: hidden; padding-bottom: 51.798561%; height: 0; } .propagateImg { width: 100%; } .propagateR { margin-left: 125px; } .propagateT { width: 100%; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; } .specialBox { display: block; line-height: 0; position: relative; height: 0; padding-bottom: 31.875%; overflow: hidden; } .specialBox1 { padding-bottom: 19.094488%; margin: 10px 10px 0; } .specialBox img { width: 100%; } .specialTxt { position: absolute; left: 0; right: 0; bottom: 0; top: 0; background-color: rgba(0, 0, 0, .7); text-align: center; transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } .specialTxt div { color: #fff; font-size: 12px; position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); } .specialBox:hover .specialTxt { filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } .specialRow { overflow: hidden; margin: 0 5px; padding-bottom: 10px; } .specialCol12 { float: left; width: 100%; padding: 0 5px; margin-top: 10px; } .specialCol4 { float: left; width: 33.333333%; padding: 0 5px; margin-top: 10px; } .echartBox { height: 100%; } .layui-input-block { position: absolute; right: 22px; top: 10px; width: 140px; } .layui-input, .layui-select, .layui-textarea { height: 34px; line-height: 34px\9; } .layui-form-select dl { /* top: 38px; */ max-height: 130px; } .layui-form-select dl dd.layui-this { background-color: #198BE3; } .inSec3majorTxt { position: absolute; top: 0; bottom: 0; margin: auto; height: 40px; text-align: center; } .inSec3majorTxt1 { left: 0; right: 65%; } .inSec3majorTxt2 { left: 0; right: 0; } .inSec3majorTxt3 { left: 65%; right: 0; } .inSec3majorTxt div:first-child { font-size: 14px; } .inSec3majorTxt div:last-child { font-size: 24px; font-weight: bold; } .overviewBox { padding: 15px 20px; width: 33.333333%; float: left; border-left: 1px dashed #EAEAEA; border-bottom: 1px dashed #EAEAEA; } .overviewImg { line-height: 0; margin-bottom: 3px; } .overviewImg * { display: inline-block; vertical-align: top; } .overviewImg img { width: 45px; margin-right: 10px; } .overviewImg span { line-height: 20px; } .overviewTxt { text-align: right; font-size: 20px; font-weight: bold; /* line-height: 20px; */ } .overviewBox:nth-child(1) .overviewTxt { color: #4A9ADE; } .overviewBox:nth-child(2) .overviewTxt { color: #59D078; } .overviewBox:nth-child(3) .overviewTxt { color: #EF9508; } .overviewBox:nth-child(4) .overviewTxt { color: #F6685E; } .overviewBox:nth-child(5) .overviewTxt { color: #7A74F1; } .overviewBox:nth-child(6) .overviewTxt { color: #34E9F9; } /*****index_sec3*******/ /*****search*******/ .search { position: fixed; z-index: 999; left: 0; right: 0; height: 100%; top: -100%; /* background-color: #005190; */ padding: 90px 40px 0; transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; -webkit-transition: all 0.5s; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } body.active .search { top: 0; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } .searchL { float: left; height: 100%; width: 180px; overflow: auto; } .searchR { margin-left: 200px; height: 100%; overflow: auto; padding-top: 5px; } .searchLT { /* color: #82C7FE; */ margin-bottom: 6px; line-height: 24px; font-weight: bold; } .searchLList { height: calc(100% - 30px); overflow: auto; /* padding-left: 10px; */ } .searchLList li { padding: 3px 12px; transition: background 0.3s; -moz-transition: background 0.3s; -ms-transition: background 0.3s; -o-transition: background 0.3s; -webkit-transition: background 0.3s; } .searchLList a { display: block; line-height: 26px; font-size: 14px; color: #fff; } .searchLList span { display: block; margin-left: 30px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .searchLList img { width: 22px; float: left; margin-top: 2px; } .searchTop { line-height: 22px; margin-bottom: 15px; } .searchTop > span { float: left; /* color: #63A7DF; */ } .searchTopList { margin-left: 70px; } .searchTopList li { display: inline-block; padding: 0 15px; margin: 0 2px; color: #fff; transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; cursor: pointer; border-radius: 11px; } /* .searchTopList li.active, .searchTopList li:hover { background-color: #0F85E2; } */ .searchRTop { line-height: 24px; padding: 4px 12px; /* background-color: #003E83; */ margin-top: 20px; /* color: #81C7FE; */ } .searchList { margin: 0 0 20px; } .searchLi { width: 170px; margin-right: 20px; margin-top: 20px; float: left; position: relative; } .searchLi > * { display: inline-block; vertical-align: middle; } .searchLiImg { line-height: 0; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; } .searchLiImg img { width: 100%; } .searchLiTxt { line-height: 24px; margin-left: 5px; color: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 70%; } .searchLink, .searchLink span { display: block; } .searchLink { position: absolute; left: 0; top: 50%; /* transform: translateY(-50%); */ background-color: #fff; width: 220px; z-index: -1; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; transform: translateY(-50%) scale(1, 0); -webkit-transform: translateY(-50%) scale(1, 0); -moz-transform: translateY(-50%) scale(1, 0); -o-transform: translateY(-50%) scale(1, 0); -ms-transform: translateY(-50%) scale(1, 0); } .searchLi:hover .searchLink { filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; z-index: 1; transform: translateY(-50%) scale(1, 1); -webkit-transform: translateY(-50%) scale(1, 1); -moz-transform: translateY(-50%) scale(1, 1); -o-transform: translateY(-50%) scale(1, 1); -ms-transform: translateY(-50%) scale(1, 1); } .searchLinkT { padding: 0 8px; line-height: 28px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border-bottom: 1px solid #EEECEC; } .searchLinkBox { line-height: 0; padding: 10px 8px; } .searchLinkBox > * { display: inline-block !important; vertical-align: middle; } .searchLinkImg { width: 50px; height: 50px; border-radius: 50%; overflow: hidden; } .searchLinkImg img { width: 100%; } .searchLinkCon { width: 130px; margin-left: 15px; line-height: 20px; } .searchLinkTxt { color: rgba(0, 0, 0, .5); } /*****search*******/ /*****desktopSet*******/ .desktopSetBox.active .desktopSetZhe { display: block; } .desktopSetBox.active .desktopSet { z-index: 99999; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } .desktopSetZhe { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 99998; background-color: rgba(0, 0, 0, .5); display: none; } .desktopSet { padding: 1px 0; width: 540px; /* height: 300px; */ position: fixed; left: 0; right: 0; margin: auto; top: 50%; transform: translateY(-50%); background-color: #fff; border-radius: 10px; transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; font-size: 12px; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; z-index: -1; } .desktopSet > img { position: absolute; right: 10px; top: 10px; width: 22px; cursor: pointer; } .deskSetT { text-align: center; font-weight: bold; font-size: 18px; margin-top: 16px; color: #333; } .deskSetInfo { text-align: center; margin: 3px 0 20px; } .deskSetList { } .deskSetLi { height: 52px; padding: 11px 30px; line-height: 0; cursor: pointer; position: relative; transition: background 0.3s; -moz-transition: background 0.3s; -ms-transition: background 0.3s; -o-transition: background 0.3s; -webkit-transition: background 0.3s; } .deskSetLi.active { background-color: #FFF6DA; } .deskSetLi:hover { background-color: #E9F2FF; } .deskSetLi .fa { color: #A2A8B2; line-height: 30px; font-size: 16px; } .deskSetLi .faR { float: right; transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } .deskSetLi:hover .faR { filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } .deskSetLi > * { display: inline-block; vertical-align: middle; line-height: 0; } .deskName { width: 200px; margin-left: 15px; position: relative; } .deskNameTxt { line-height: 30px; padding: 0 12px; } .deskNameInput { display: none; position: absolute; left: 0; right: 0; bottom: 0; top: 0; background: #D1D9E5; border-radius: 15px; padding: 0 60px 0 12px; } .deskNameInput.active { display: block; } .deskNameInput input { border: 0; background: transparent; line-height: 24px; padding-top: 3px; width: 100%; display: block; color: rgba(0, 0, 0, .6); } .deskNameInput span { position: absolute; right: 20px; top: 0; line-height: 30px; } .deskSetLiTips { position: absolute; top: 0; bottom: 0; right: 0; text-align: right; /* background: #fff; */ width: 0; transition: all .1s; -moz-transition: all .1s; -ms-transition: all .1s; -o-transition: all .1s; -webkit-transition: all .1s; overflow: hidden; } .deskSetLi.active .deskSetLiTips { width: auto; } .deskSetLiTips > * { float: left; } .deskSetLiTips > span { line-height: 52px; color: #fec006; margin-right: 10px; } .deskSetLiTips div { width: 52px; height: 100%; text-align: center; } .deskSetLiTips img { height: 24px; margin-top: 14px; } .deskSetClose { background: #A2A9A7; } .deskSetTrue { background: #FED55B; } .deskSetBtn { width: 120px; height: 40px; line-height: 40px; border-radius: 20px; color: #fff; font-size: 16px; text-align: center; cursor: pointer; margin: 30px auto; background: rgba(105, 165, 254, .6); transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; } .deskSetBtn:hover { background: rgba(105, 165, 254, 1); } /*****desktopSet*******/