154 lines
3.4 KiB
Vue
154 lines
3.4 KiB
Vue
<template>
|
|
<div class="centerBottomLeft">
|
|
<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">
|
|
<el-scrollbar style="height:100%">
|
|
<div class="listItem" v-for="(item,i) in 10 " :key="i">
|
|
<div class="itemInfo1">
|
|
<div style="width:50px;text-align:center">1</div>
|
|
<div>钢筋工-张三</div>
|
|
</div>
|
|
<div class="itemInfo2">20/40</div>
|
|
</div>
|
|
</el-scrollbar>
|
|
</div>
|
|
<!-- <div class="not-data">
|
|
<img src="@/assets/images/noData.png" alt="" />
|
|
<p>暂无数据</p>
|
|
</div> -->
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Card from "@/components/card.vue";
|
|
import { ref, watch, onMounted } from "vue";
|
|
import { getStageOption } from "@/api/modules/projectOverview";
|
|
import { GlobalStore } from "@/stores";
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.centerBottomLeft {
|
|
width: 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: 52px;
|
|
margin-bottom: 10px;
|
|
background-color: rgba($color: #062d5a, $alpha: 0.7);
|
|
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 {
|
|
height: 80%;
|
|
margin-top: 4%;
|
|
}
|
|
.not-data {
|
|
top: 50%;
|
|
width: 30%;
|
|
left: 35%;
|
|
position: absolute;
|
|
text-align: center;
|
|
img {
|
|
width: 50%;
|
|
}
|
|
p {
|
|
color: #fff;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
</style>
|