劳务人员看板
This commit is contained in:
geh
@@ -0,0 +1,209 @@
|
||||
*{
|
||||
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);
|
||||
}
|
||||
Reference in New Issue
Block a user