210 lines
4.4 KiB
CSS
210 lines
4.4 KiB
CSS
*{
|
|
margin: 0;
|
|
padding: 0%;
|
|
box-sizing: border-box;
|
|
}
|
|
html, body, .wrap {
|
|
height: 100%;
|
|
font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
|
|
background-color: #0B5695;
|
|
font-size:20px;
|
|
}
|
|
|
|
.header{
|
|
height: 1rem;
|
|
background-color: #0E5D9F;
|
|
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
|
|
}
|
|
.header>h1{
|
|
text-align: center;
|
|
text-shadow: 0px 0px 0px #fff, -1px -1px 0px #000;
|
|
color: #ffffff;
|
|
height: 1rem;
|
|
line-height: 1rem;
|
|
}
|
|
.conterner{
|
|
display: flex;
|
|
flex-direction: row;
|
|
height: calc(100% - 1rem);
|
|
width: 100%;
|
|
overflow: hidden;
|
|
padding: .25rem;
|
|
color: #fff;
|
|
}
|
|
|
|
.c-row{
|
|
width: 70%;
|
|
height: 100%;
|
|
padding: .375rem ;
|
|
margin-left: .375rem;
|
|
background-color: #0E5D9F;
|
|
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
|
|
}
|
|
.table{
|
|
height: 100%;
|
|
width: 100%;
|
|
/* border: 1px solid #f2f2f2; */
|
|
|
|
}
|
|
.table>.table-head{
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-bottom: 1px solid #fff;
|
|
background-color: #0a4a7f91;
|
|
}
|
|
.table>.table-head>.th{
|
|
border-right: 1px solid #fff;
|
|
height: 1rem;
|
|
line-height: 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 800;
|
|
font-size:22px;
|
|
text-shadow: 0px 0px 0px #fff, -1px -1px 0px #000;
|
|
}
|
|
.table>.table-head>.th:last-child{
|
|
border-right: none;
|
|
}
|
|
.table>.table-head>.th>.th-1{
|
|
width: 100%;
|
|
height: .5rem;
|
|
line-height: .5rem;
|
|
text-align: center;
|
|
border-bottom: 1px solid #fff;
|
|
}
|
|
.table>.table-head>.th>.th-2{
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
height: .5rem;
|
|
line-height: .5rem;
|
|
|
|
}
|
|
.table>.table-head>.th>.th-2>span{
|
|
height: 100%;
|
|
text-align: center;
|
|
border-right: 1px solid #fff ;
|
|
}
|
|
.table>.table-head>.th>.th-2>span:last-child{
|
|
border-right: none;
|
|
}
|
|
|
|
.table-body {
|
|
height: calc(100% - .75rem);
|
|
width: 100%;
|
|
overflow: hidden;
|
|
overflow-y: scroll;
|
|
font-size: 22px;
|
|
font-weight: 800;
|
|
}
|
|
.table-body::-webkit-scrollbar{
|
|
display: none;
|
|
}
|
|
|
|
.table-body>.scroll-box .tr{
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
border-bottom: 1px solid #fff ;
|
|
}
|
|
.table-body > .scroll-box .tr:last-child {
|
|
/* margin-bottom: .375rem; */
|
|
}
|
|
.row-box{
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
align-items: flex-start;
|
|
}
|
|
.table-body>.scroll-box .tr .td{
|
|
border-right: 1px solid #fff ;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.table-body>.scroll-box .tr>.row-box>.td{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100%;
|
|
|
|
}
|
|
.table-body>.scroll-box .tr>.row-box>.td:last-child{
|
|
border-right: none;
|
|
}
|
|
.table-body > .scroll-box .tr > .row-box > .td > span {
|
|
width: 100%;
|
|
flex: 1;
|
|
text-align: center;
|
|
padding: .05rem 0;
|
|
border-bottom: 1px solid #fff;
|
|
}
|
|
.table-body>.scroll-box .tr>.row-box>.td>span:last-child{
|
|
border-bottom: none;
|
|
}
|
|
|
|
.row{
|
|
width: 30%;
|
|
|
|
}
|
|
|
|
|
|
.row>.row-1{
|
|
width: 100%;
|
|
height: 1.5rem;
|
|
background-color: #0E5D9F;
|
|
padding: .1875rem;
|
|
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
|
|
/* 添加一个内阴影增加立体感 */
|
|
/* box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); */
|
|
}
|
|
.row>.row-1>.label{
|
|
width: 100%;
|
|
font-size: .35rem;
|
|
/* color: #bfe2ff; */
|
|
color: #fff;
|
|
font-weight: 700;
|
|
text-shadow: 0px 0px 0px #fff, -1px -1px 0px #000;
|
|
}
|
|
|
|
.row>.row-1>.number{
|
|
width: 100%;
|
|
font-size: .65rem;
|
|
text-align: right;
|
|
margin-top: 0rem;
|
|
font-family: DIN;
|
|
font-weight: 700;
|
|
/* text-shadow: 0px 0px 0px #fff, -1px -1px 0px #000; */
|
|
/* color: #fff; */
|
|
letter-spacing: 4px;
|
|
background: linear-gradient(to bottom, #0b9576, #00ffff, #0072d1);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
font-size: 45px;
|
|
}
|
|
|
|
#rs{
|
|
margin-top: .25rem;
|
|
height: calc(100% - 5.25rem);
|
|
width: 100%;
|
|
background-color: #0E5D9F;
|
|
padding: .1875rem;
|
|
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
|
|
|
|
@font-face {
|
|
font-family: 'DIN';
|
|
/* src: url(../font/font.ttf); */
|
|
/* src: url(../font//DINCond-RegularAlternate.otf); */
|
|
src: url(../fonts/dinfont.ttf);
|
|
}
|