html, body {
font-family: "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", "黑体", Arial, sans-serif;
height: 100%;
background-color: #1C1C20;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.flex-container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100%;
width: 100%;
section {
box-sizing: border-box;
padding: 3px 2px;
color: #eeeeee;
div.wrapper {
width: 100%;
height: 100%;
background-color: #23262d;
#chartA, #chartB, #chartC {
flex: 1;
//border: 1px solid orange;
}
}
;
}
}
.secA {
width: 30%;
height: 33.3%;
}
.secB {
width: 30%;
height: 33.3%;
}
.secC {
width: 30%;
height: 33.3%;
}
.secD {
width: 70%;
height: 75%;
.triggerMap{
display: block;
color: #ccc;
font-size: 14px;
top: 11px;
position: absolute;
right: 9px;
padding: 3px;
border: 1px solid;
cursor: pointer;
}
.mapGif{
overflow: hidden;
}
}
.secE {
width: 70%;
height: 25%;
}
.title {
font-weight: 600;
font-size: large;
padding: 8px;
color: #ffe;
word-spacing: 8px;
letter-spacing: 2px;
li {
margin-right: 5px;
color: #4a6893;
cursor: pointer;
}
li.active {
color: #fff;
}
}
#headline {
padding: 3px;
background-color: #0055a6;
color: #ffffff;
text-align: center;
font-weight: bolder;
font-size: x-large;
}
.example {
width: 100%;
margin: 0 auto;
height: 100%;
.frame {
margin: 0 auto;
width: 100%;
height: 100%;
overflow: hidden;
text-shadow: none;
ul {
list-style: none;
margin: 0;
padding: 0;
height: 100%;
color: #ffffff;
li {
float: left;
width: 180px;
height: 100%;
margin: 0 1px 0 0;
background: #eee;
text-align: center;
cursor: pointer;
justify-content: center;
display: flex;
flex-direction: column;
flex-wrap: wrap;
&:nth-child(odd) {
background-color: #23262d;
}
&:nth-child(even) {
background-color: #3f4656;
}
&.active {
color: #fff;
border: 1px solid cyan;
background-color: #3A577f;
}
div.cellName {
height: 50px;
line-height: 50px;
width: 100%;
font-size: larger;
font-weight: bold;
span {
color: red;
}
}
dl {
height: 75px;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
dt, dd {
padding-top: 3px;
padding-bottom: 3px;
}
dt {
text-align: right;
padding-right: 3px;
}
dd {
text-align: left;
padding-left: 3px;
}
}
}
}
}
}