<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>
