admin/zhgdlarge
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:完成现场大屏中下左边部分劳务实名制静态页面开发

Browse Source
This commit is contained in:
Vce 2024-06-13 11:29:46 +08:00
parent 35fd369831
commit ea373fa41f
1 changed files with 122 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
src/views/agjtLiveScreen/liveScreen/centerBottomLeft.vue
View File

@ -1,7 +1,45 @@
<template> <template>
<div class="centerBottomLeft"> <div class="centerBottomLeft">
<Card title="劳务实名制"> <Card title="劳务实名制">
<div class="mainContainer">
<div class="topBox">
<div class="topInner1">
<div class="innerText">
<div>今日出勤总人数</div>
<div>1024</div>
</div>
</div>
<div class="topInner2">
<div class="innerText">
<div>在册人数</div>
<div>512</div>
</div>
</div>
</div>
<div class="bottomBox">
<div class="listItem">
<div class="itemInfo1">
<div style="width:50px;text-align:center">1</div>
<div>钢筋工-张三</div>
</div>
<div class="itemInfo2">20/40</div>
</div>
<div class="listItem">
<div class="itemInfo1">
<div style="width:50px;text-align:center">2</div>
<div>钢筋工-张三</div>
</div>
<div class="itemInfo2">20/40</div>
</div>
<div class="listItem">
<div class="itemInfo1">
<div style="width:50px;text-align:center">3</div>
<div>钢筋工-张三</div>
</div>
<div class="itemInfo2">20/40</div>
</div>
</div>
</div>
</Card> </Card>
</div> </div>
</template> </template>
@ -18,6 +56,89 @@ import { GlobalStore } from "@/stores";
.centerBottomLeft { .centerBottomLeft {
width: 100%; width: 100%;
height: 100%; height: 100%;
.mainContainer{
width: calc(100% - 20px);
padding: 0 10px;
height: 100%;
.topBox{
width:100%;
// padding: 0 50px;
height: 25%;
display: flex;
justify-content: space-around;
.topInner1{
width: 40%;
height: 100%;
background-color: #fff;
background: url("@/assets/images/comprehensiveManage/project9.png") no-repeat;
background-size: 100% 100%;
.innerText{
color: #fff;
float: right;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 15px;
transform: translateY(15px);
font-style: italic;
}
}
.topInner2{
width: 40%;
height: 100%;
background-color: #fff;
background: url("@/assets/images/comprehensiveManage/project12.png") no-repeat;
background-size: 100% 100%;
.innerText{
color: #fff;
float: right;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 15px;
transform: translateX(-25px) translateY(15px);
font-style: italic;
}
}
}
.bottomBox{
// width:calc(100% - 20px);
width: 100%;
height: calc(75% - 5px);
// border: 1px solid white;
// display: flex;
// flex-direction: column;
// justify-content: space-around;
.listItem{
width: 100%;
height: 27%;
margin-bottom: 10px;
background-color: rgba($color: #062d5a, $alpha: 0.8);
font-size: 18px;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid;
// border-image: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00) 1;
border-image: linear-gradient(to right, transparent 0%, #0674e8, rgba(0,0,0,0.1)) 0.5;
// background-size: 100% 100%;
background-position: left center;
.itemInfo1{
width: auto;
display: flex;
}
.itemInfo2{
width: auto;
margin-right: 15px;
}
}
}
}
} }
::v-deep .h-card .content { ::v-deep .h-card .content {
height: 80%; height: 80%;