zhgdlarge/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/centerBottom.vue

<template>
	<div class="leftTop">
		<Card title="进度概况">
			<div class="progressContent">
				<div style="display: flex; padding: 2% 1%; color: #fff; font-size: 16px">
					<div style="width: 5px; height: 5px; background: rgba(130, 251, 234, 1); border-radius: 10px; margin: 1%"></div>
					<div><i>倒计时</i></div>
				</div>
				<div class="totalDay">
					<div style="line-height: 45px">
						项目总天数
						<span class="dayImg">1</span>
						<span class="dayImg">0</span>
						<span class="dayImg">4</span>
						<span class="dayImg">7</span>
						<span style="margin-left: 4%">天</span>
					</div>
				</div>
				<div class="residueDay">
					<div style="line-height: 45px">
						项目剩余天数
						<span class="dayImg">0</span>
						<span class="dayImg">2</span>
						<span class="dayImg">8</span>
						<span class="dayImg">6</span>
						<span style="margin-left: 4%">天</span>
					</div>
				</div>
				<div style="display: flex; margin-top: 3%;margin-left: 0.5%; color: #fff; font-size: 16px; width: 30%; position: absolute">
					<div style="width: 5px; height: 5px; background: rgba(130, 251, 234, 1); border-radius: 10px; margin: 1%"></div>
					<div><i>里程碑</i></div>
				</div>
				<div class="progressData">
					<div class="data" v-for="item in progressList">
						<div v-if="item.status==0" class="text" :title="item.name">{{ item.name }}</div>
						<img v-if="item.status==0" src="@/assets/images/comprehensiveManage/project7.png" alt="" />
						<div v-if="item.status==1" style="color: #fff;font-size:18px;margin-top: -8%;" :title="item.name" class="statusImg1">{{ item.name }}</div>
						<img v-if="item.status==1" style="width: 40px;margin-top: 2%;" src="@/assets/images/comprehensiveManage/project11.png" alt="" />
            <div v-if="item.status==1" class="statusImg"></div>
					</div>
				</div>
			</div>
		</Card>
	</div>
</template>

<script setup lang="ts">
import Card from "@/components/card.vue";
import { ref } from "vue";
const progressList = ref([
	{
		name: "施工证获取",
		status: 0
	},
	{
		name: "土方开挖",
		status: 0
	},
	{
		name: "桩基",
		status: 0
	},
	{
		name: "支护开始",
		status: 1
	},
	{
		name: "垫层完成",
		status: 0
	},
	{
		name: "正负零",
		status: 0
	},
	{
		name: "工程达到预售条件",
		status: 0
	},
	{
		name: "主体施工",
		status: 0
	}
]);
</script>

<style lang="scss" scoped>
.leftTop {
	width: 100%;
	height: 100%;
}
.progressContent {
	width: 100%;
	height: 100%;
	.totalDay {
		width: 40%;
		float: left;
		color: #ccc;
		font-size: 16px;
		margin-left: 10%;
	}
	.residueDay {
		width: 40%;
		float: right;
		color: #ccc;
		font-size: 16px;
		margin-right: 5%;
	}
	.dayImg {
		margin-left: 2%;
		font-size: 26px;
		display: inline-block;
		width: 35px;
		height: 45px;
		font-family: sadigitalNumber;
		background: url("@/assets/images/comprehensiveManage/project1.png") no-repeat;
		background-size: 100% 100%;
		text-align: center;
		color: #4ac0f3;
	}
	.progressData {
		width: 96%;
		height: 15%;
		margin: 13.5% 2% 0 2%;
		background: url("@/assets/images/comprehensiveManage/project4.png") no-repeat;
		background-size: 100% 100%;
		display: flex;
    cursor: pointer;
		.data {
			color: #ccc;
			font-size: 15px;
			margin-top: -1%;
			margin-left: 5%;
			.text {
				width: 60px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			img {
				width: 20px;
				margin-top: 18%;
        margin-left: 15%;
			}
		}
    .statusImg{
      position: absolute;
      top: 97%;
      left: 45%;
      width: 120px;
      height: 2px;
      background: url("@/assets/images/comprehensiveManage/project6.png") no-repeat;
		background-size: 100% 100%;
    }
    .statusImg1{
    background: url("@/assets/images/comprehensiveManage/project5.png") no-repeat;
		background-size: 100% 100%;
    }
	}
}
::v-deep .h-card .content {
	height: 80%;
	margin-top: 1.8%;
}
</style>