You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1091 lines
15 KiB

@charset "utf-8";
/* CSS Document */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
*, body {
padding: 0px;
margin: 0px;
/* color: #222; */
font-family: "微软雅黑";
}
@font-face {
font-family: electronicFont;
src: url(../font/DS-DIGIT.TTF)
}
body {
background: #000d4a url(../images/bg.jpg) center top;
background-size: cover;
color: #666;
font-size: .1rem;
}
li {
list-style-type: none;
}
i {
margin: 0px;
padding: 0px;
text-indent: 0px;
}
img {
border: none;
max-width: 100%;
}
a {
text-decoration: none;
color: #399bff;
}
a.active, a:focus {
outline: none!important;
text-decoration: none;
}
ol, ul, p, h1, h2, h3, h4, h5, h6 {
padding: 0;
margin: 0
}
a:hover {
color: #06c;
text-decoration: none!important
}
.clearfix:after, .clearfix:before {
display: table;
content: " "
}
.clearfix:after {
clear: both
}
.pulll_left {
float: left;
}
/* .teacher_left {
float: left;
width: 49%;
margin: 0.4rem 0;
text-align: center;
}
.teacher_left img {
width: 100px;
}
.teacher_left p span {
width: 160px;
color: #fff;
font-size: 14px;
border: none;
margin: 0 10px;
} */
.teacher_left {
border: 1px solid #5569e6c7;
line-height: 0.5rem;
height: 0.5rem;
border-radius: 0.25rem;
width: 60%;
text-align: center;
margin: 0.15rem auto;
}
.teacher_left span {
width: 160px;
color: #fff;
font-size: 14px;
border: none;
margin: 0 10px;
}
.teacher_left span .teacher_num {
color: #FAFF00;
}
.teacher_left span .teacher_per {
color: #0BF2CD;
}
.pulll_left .numberStyle {
/* background: rgba(255, 255, 255, .1) url(../images/line.png); */
border: 0;
display: inline-block;
margin: 10px auto;
}
.pulll_left .numberStyle .num_box, .situation .num_box {
border: 0;
display: inline-block;
padding: 0.05rem .08rem;
position: relative;
color: #FAFF00;
margin: 0 0.01rem;
}
.school_profile .num_box {
display: inline-block;
position: relative;
color: #fff;
width: 1rem;
text-align: center;
/* background: rgba(255, 255, 255, .1) url(../images/line.png); */
border: 0.5px solid #2ec7af54;
margin-right: 0.2rem;
}
.num_box:before, .num_box:after {
position: absolute;
width: .08rem;
height: .08rem;
content: "";
border-top: 1px solid #0BF2CD;
top: 0;
}
.num_box:before, .num_box .boxfoot:before {
border-left: 1px solid #0BF2CD !important;
left: 0;
}
.num_box:after, .num_box .boxfoot:after {
border-right: 1px solid #0BF2CD !important;
right: 0;
}
.num_box .boxfoot:before, .num_box .boxfoot:after {
position: absolute;
width: .08rem;
height: .08rem;
content: "";
border-bottom: 1px solid #0BF2CD;
bottom: 0;
}
.pulll_left p {
width: 179px;
height: 39px;
line-height: 39px;
color: #fff;
background: url('../images/按钮.png');
font-size: 16px;
padding: 0;
margin: 0 auto;
}
.pulll_right {
float: right;
}
/*谷哥滚动条样式*/
::-webkit-scrollbar {
width: 5px;
height: 5px;
position: absolute
}
::-webkit-scrollbar-thumb {
background-color: #5bc0de
}
::-webkit-scrollbar-track {
background-color: #ddd
}
/***/
.canvas {
position: absolute;
width: 100%;
left: 0;
top: 0;
height: 99%;
z-index: 1;
}
.allnav {
height: calc(100% - 30px);
}
.allnav1 {
height: calc(100% - 30px);
}
.loading {
position: fixed;
left: 0;
top: 0;
font-size: 18px;
z-index: 100000000;
width: 100%;
height: 100%;
background: #1a1a1c;
text-align: center;
}
.loadbox {
position: absolute;
width: 160px;
height: 150px;
color: #aaa;
left: 50%;
top: 50%;
margin-top: -100px;
margin-left: -75px;
}
.loadbox img {
margin: 10px auto;
display: block;
width: 40px;
}
.copyright {
background: rgba(19, 31, 64, .32);
border: 1px solid rgba(255, 255, 255, .05);
line-height: .5rem;
text-align: center;
padding-right: 15px;
bottom: 0;
color: rgba(255, 255, 255, .7);
font-size: .16rem;
}
.head {
height: .9rem;
background: url(../images/head_bg.png) no-repeat center center;
background-size: 100% 100%;
position: relative;
z-index: 100;
}
.head h1 {
color: #fff;
text-align: center;
font-size: .3rem;
line-height: 1.1rem;
}
.head h1 img {
width: 1.5rem;
display: inline-block;
vertical-align: middle;
margin-right: .2rem
}
.weather {
position: absolute;
right: .3rem;
top: 0;
line-height: .75rem;
}
.weather img {
width: .37rem;
display: inline-block;
vertical-align: middle;
}
.weather span {
color: rgba(255, 255, 255, .7);
font-size: .18rem;
padding-right: .1rem;
}
.mainbox {
padding: .1rem .1rem 0rem .1rem;
}
.mainbox>ul {
margin: 0;
}
.mainbox>ul>li {
float: left;
padding: 0 .1rem
}
.mainbox>ul>li {
width: 30%
}
.mainbox>ul>li:nth-child(2) {
width: 40%
}
.boxall {
border: 1px solid rgba(25, 186, 139, .17);
padding: 0 .2rem .4rem .15rem;
/* background: rgba(255, 255, 255, .04) url(../images/line.png); */
background-size: 100% auto;
position: relative;
margin-bottom: .15rem;
z-index: 10;
}
.boxall:before, .boxall:after {
position: absolute;
width: .1rem;
height: .1rem;
content: "";
border-top: 2px solid #02a6b5;
top: 0;
}
.boxall:before, .boxfoot:before {
border-left: 2px solid #02a6b5;
left: 0;
}
.boxall:after, .boxfoot:after {
border-right: 2px solid #02a6b5;
right: 0;
}
.boxall_background {
/* background: rgba(255, 255, 255, .1) url(../images/line.png); */
width: 100%;
height: 46%;
border-radius: 0.5rem;
margin-bottom: 0.15rem;
}
.student_sex_ratio, .teacher_sex_ratio {
text-align: center;
}
.student_sex_ratio div, .teacher_sex_ratio div {
color: #fff;
font-size: 20px;
display: inline-block;
}
.vs_css {}
.boy_img {
margin-right: 0.4rem;
display: inline-block;
}
.boy_img p, .girl_img p {
font-size: 12px;
color: #fff;
margin: 0;
padding: 0;
}
.girl_img {
margin-left: 0.4rem;
}
.alltitle {
font-size: 16px;
color: #fff;
text-align: left;
line-height: .5rem;
border-bottom: 1px solid #3690ff;
margin-bottom: 10px;
}
.boxfoot {
position: absolute;
bottom: 0;
width: 100%;
left: 0;
}
.boxfoot:before, .boxfoot:after {
position: absolute;
width: .1rem;
height: .1rem;
content: "";
border-bottom: 2px solid #02a6b5;
bottom: 0;
}
.bar {
background: rgba(101, 132, 226, .1);
padding: .15rem;
}
.barbox li, .barbox2 li {
width: 33.3%;
text-align: center;
position: relative;
z-index: 100;
}
.barbox li {
width: 25%;
text-align: center;
position: relative;
z-index: 100;
}
.barbox:before, .barbox:after {
position: absolute;
width: .3rem;
height: .1rem;
content: "";
}
.barbox:before {
border-left: 2px solid #02a6b5;
left: 0;
border-top: 2px solid #02a6b5;
}
.barbox:after {
border-right: 2px solid #02a6b5;
right: 0;
bottom: 0;
border-bottom: 2px solid #02a6b5;
}
.barbox li:first-child:before {
position: absolute;
content: "";
height: 50%;
width: 1px;
background: rgba(255, 255, 255, .2);
right: 0;
top: 25%;
}
.barbox {
border: 1px solid rgba(25, 186, 139, .17);
position: relative;
}
.barbox li {
font-size: .7rem;
color: #ffeb7b;
padding: .05rem 0;
font-family: electronicFont;
font-weight: bold;
}
.barbox2 li {
font-size: 16px;
color: rgba(255, 255, 255, .7);
padding-top: .1rem;
}
.tab {
margin: 0.2rem auto;
position: relative;
z-index: 999;
}
.tab .tabbtn {
color: #fff;
background: rgba(255, 255, 255, 0);
border: 1px solid #0e6098;
padding: 5px 20px;
cursor: pointer;
margin-right: 0.08rem;
}
.tab .active {
color: #fff;
background: #4c60ff;
}
.div_show {
display: none;
}
.map {
position: relative;
height: 4.5rem;
z-index: 9;
}
.map4 {
width: 200%;
height: 6rem;
position: relative;
left: -50%;
top: -17%;
margin-top: .2rem;
z-index: 5;
}
.map5 {
width: 200%;
height: 6.5rem;
position: relative;
left: -50%;
top: 0%;
margin-top: .2rem;
z-index: 5;
}
.map1, .map2, .map3, .map2_a, .map1_a {
position: absolute;
opacity: .5
}
.map1 {
width: 6rem;
z-index: 2;
top: -0.8rem;
left: 0.85rem;
/* animation: myfirst2 15s infinite linear; */
}
.map1_a {
width: 6rem;
z-index: 2;
top: 0.3rem;
left: 0.9rem;
/* animation: myfirst2 15s infinite linear; */
}
.map2 {
width: 5.5rem;
top: -0.5rem;
left: 1.1rem;
z-index: 3;
opacity: 0.2;
opacity: 0.2;
/* animation: myfirst 10s infinite linear; */
}
.map2_a {
width: 5.5rem;
top: 0.5rem;
left: 1.2rem;
z-index: 3;
opacity: 0.2;
opacity: 0.2;
/* animation: myfirst 10s infinite linear; */
}
.map3 {
width: 5.4rem;
top: .2rem;
left: .3rem;
z-index: 1;
}
.tabs {
text-align: center;
padding: .1rem 0 0 0;
}
.tabs a {
position: relative;
display: inline-block;
margin-left: 1px;
padding: .05rem .2rem;
color: #898989;
transition: all .3s ease-out 0s;
font-size: 14px;
}
.tabs li {
display: inline-block;
}
.tabs a:after {
position: absolute;
width: 1px;
height: 10px;
background-color: rgba(255, 255, 255, .1);
content: '';
margin-left: 0;
right: -1px;
margin-top: 7px;
}
.tabs li a.active {
border: 1px solid rgba(25, 186, 139, .17);
background: rgba(255, 255, 255, .05);
color: #fff;
}
.tit02 {
text-align: center;
margin: .1rem 0;
position: relative
}
.tit02 span {
border: 1px solid rgba(25, 186, 139, .17);
letter-spacing: 2px;
padding: .01rem .2rem;
background: rgba(255, 255, 255, .05);
font-size: .18rem;
color: #49bcf7;
}
.tit02:before, .tit02:after {
position: absolute;
width: 26%;
height: 1px;
background: rgba(25, 186, 139, .2);
content: "";
top: .12rem;
}
.tit02:after {
right: 0;
}
.tit02:before {
left: 0;
}
.wrap {
height: 2.54rem;
overflow: hidden;
}
.wrap li {
line-height: .42rem;
height: .42rem;
font-size: .18rem;
text-indent: .24rem;
margin-bottom: .1rem;
}
.wrap li p {
border: 1px solid rgba(25, 186, 139, .17);
color: rgba(255, 255, 255, .6);
}
.sy {
float: left;
width: 33%;
height: 95%;
margin-top: .25rem;
}
.sy1 {
width: 100%;height:95%;margin-top: .25rem;
}
.pie_css {
float: left;
width: 25%;
height: 95%;
margin-top: .25rem;
}
.pie_css_one {
float: left;
width: 75%;
height: 95%;
margin-top: .25rem;
}
.pie_css_two {
float: left;
width: 37%;
height: 95%;
margin-top: .25rem;
}
.sqzn {
float: left;
width: 50%;
height: 95%;
}
.sqzn_all {
float: left;
width: 100%;
height: 95%;
}
.adduser {
height: 1.5rem;
overflow: hidden;
}
.adduser li {
height: .5rem;
}
.adduser img {
width: .40rem;
border-radius: .5rem;
margin-right: .1rem;
display: inline-block;
vertical-align: middle;
}
.adduser span {
line-height: .5rem;
font-size: .18rem;
color: rgba(255, 255, 255, .6);
}
.sycm ul {
margin-left: -.5rem;
margin-right: -.5rem;
padding: .16rem 0;
}
.sycm li {
float: left;
width: 33.33%;
text-align: center;
position: relative
}
.sycm li:before {
position: absolute;
content: "";
height: 30%;
width: 1px;
background: rgba(255, 255, 255, .1);
right: 0;
top: 15%;
}
.sycm li:last-child:before {
width: 0;
}
.sycm li h2 {
font-size: .3rem;
color: #c5ccff;
}
.sycm li span {
font-size: .18rem;
color: #fff;
opacity: .5;
}
@keyframes myfirst2 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
@keyframes myfirst {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-359deg);
}
}
/*Plugin CSS*/
.str_wrap {
overflow: hidden;
width: 100%;
position: relative;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
white-space: nowrap;
}
.str_move {
white-space: nowrap;
position: absolute;
top: 0;
left: 0;
cursor: move;
}
.str_move_clone {
display: inline-block;
vertical-align: top;
position: absolute;
left: 100%;
top: 0;
}
.str_vertical .str_move_clone {
left: 0;
top: 100%;
}
.str_down .str_move_clone {
left: 0;
bottom: 100%;
}
.str_vertical .str_move, .str_down .str_move {
white-space: normal;
width: 100%;
}
.str_static .str_move, .no_drag .str_move, .noStop .str_move {
cursor: inherit;
}
.str_wrap img {
max-width: none !important;
}
/* 学校数据总览 */
.school_profile ul li {
color: #fff;
line-height: 36px;
margin: 0.2rem auto;
}
.school_profile ul li .message {
display: inline-block;
color: #ccc;
width: 75%;
border-bottom: 1px solid #929191;
}
.situation {
width: 15%;
float: left;
height: 100%;
position: relative;
top: 60%;
transform: translateY(-50%);
}
.situation_number_css {
border: 0;
display: inline-block;
/* color:#fff; */
color: #FAFF00;
margin: 0 0.01rem;
}
.situation ul li {
color: #fff;
}
.situation .situation_title {
color: #fff;
/* text-align: right; */
margin: 0.1rem 0;
}
.teacher_vs_student {
width: 10%;
float: left;
height: 100%;
position: relative;
top: 75%;
transform: translateY(-50%);
/* display: grid; */
}
.teacher_vs_student .teacher_img_css {
color: #fff;
padding: 0.05rem;
border: 1px solid #399bff;
border-radius: 0.5rem;
}
.teacher_vs_student .teacher_img_css img {
width: 24px;
}
.teacher_vs_student p {
color: #fff;
font-size: 16px;
text-align: center;
margin: 0.1rem 0;
}
/* 返回按钮 */
.goBack {
position: absolute;
top: 50px;
right: 24px;
z-index: 999;
}
.goBack a {
color: #3690ff;
text-decoration: none;
cursor: pointer;
border-bottom: 1px solid #3690ff;
}
.goBack a:hover {
color: #fff;
border-bottom: 1px solid #fff;
}
/* 区学校列表 */
.school_list {
background-color: #0c1642;
opacity: 0.6;
width: 32%;
height: 134%;
position: absolute;
right: 0;
top: 7%;
z-index: 5;
overflow-y: auto;
}
.school_list ul {
padding: 0.2rem 0.1rem;
}
.school_list ul li {
line-height: 0.3rem;
}
.school_name_style a {
color: #fff;
font-size: 0.1rem;
}
.school_name_style div {
padding: 0.03rem;
border-radius: 50%;
background-color: red;
display: inline-block;
margin: .1rem .05rem 0 0;
}
.nav-pills {
position: absolute;
top: -1%;
right: -1%;
z-index: 9;
}
.tab_box_css a {
padding: 0 .1rem !important;
/* width: 36px; */
margin-right: 0 0.1rem;
text-align: center;
}
.top-config{
position: absolute;
right: 10px;
top: .43rem;
}
.top-config .fullscreen{
float: left;
display: block;
margin-right: .5em;
/* line-height: 2.1em; */
font-size: .15rem;
color:#428bca;
}
.top-config .fullscreen i{
color: white;
}
.select {
float: left;
position: relative;
display: block;
margin: 0 auto;
width: .95rem;
max-width: 325px;
color: #cccccc;
vertical-align: middle;
text-align: left;
user-select: none;
-webkit-touch-callout: none;
}
.select .placeholder {
position: relative;
display: block;
background-color: #393d41;
z-index: 1;
padding: .2em .2em .2em .5em;
border-radius: 2px;
cursor: pointer;
}
.select .placeholder:hover {
background: #34383c;
}
.select .placeholder:after {
position: absolute;
right: .5em;
top: 50%;
transform: translateY(-50%);
font-family: 'FontAwesome';
content: '\f078';
z-index: 10;
}
.select.is-open .placeholder:after {
content: '\f077';
}
.select.is-open ul {
display: block;
}
.select.select--white .placeholder {
background: #428bca;
color: #fff;
}
.select.select--white .placeholder:hover {
background: #2166a2;
}
.select ul {
display: none;
position: absolute;
overflow: hidden;
width: 100%;
background: #428bca;
border-radius: 2px;
top: 100%;
left: 0;
list-style: none;
margin: 5px 0 0 0;
padding: 0;
z-index: 100;
}
.select ul li {
display: block;
text-align: left;
padding: 0.5em 1em 0.5em 1em;
color: #fff;
cursor: pointer;
}
.select ul li:hover {
background: #2166a2;
color: #fff;
}
.button{
background: #428bca;
color: white !important;
padding:.21em .5em .21em .5em
}
.side-btn a{
padding: 0 6px;
color:#3690ff;
font-size: 16px;
}
.side-btn a:hover,.side-btn a:focus{
color: white;
text-decoration: none;
}
#select-year{
margin-right:.5em;
}