zhgdlarge/src/views/commandScreen/commandCenter/leftTop.vue

<template>
	<div class="leftTop">
		<div class="header">
			<div class="hLeft" @click="dialogVisible = true">项目基本信息</div>
			<div class="hRight">
				<el-date-picker
					style="width: 85%"
					v-model="dateRange"
					type="daterange"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
				/>
			</div>
		</div>
		<div class="content">
			<div class="content-info">
				<span>项目名称：</span>
				<span>深圳市宝安区</span>
			</div>
			<div class="content-info">
				<span>项目地址：</span>
				<span>深圳市宝安区</span>
			</div>
			<div class="content-info">
				<span>项目经理：</span>
				<span>深圳市宝安区</span>
			</div>
			<div class="content-info">
				<span>联系电话：</span>
				<span>深圳市宝安区</span>
			</div>
			<div class="content-info">
				<span>建筑面积：</span>
				<span>深圳市宝安区</span>
			</div>
			<div class="content-info">
				<span>开工日期：</span>
				<span>深圳市宝安区</span>
			</div>
			<div class="content-info">
				<span>项目编号：</span>
				<span>深圳市宝安区</span>
			</div>
			<div class="content-info">
				<span>工程类别：</span>
				<span>深圳市宝安区</span>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { GlobalStore } from "@/stores";
import { ref, onMounted, watch } from "vue";
onMounted(async () => {});
</script>
<style lang="scss" scoped>
.leftTop {
	background: url("@/assets/images/commandScreen/card-left-top.png") no-repeat;
	// background-color: #fff;
	background-size: 100% 100%;
	width: 100%;
	height: 35%;
	.header {
		// width: 100%;
		// height: 100%;
		display: flex;
		// align-items: center;
		justify-content: space-between;
		padding: 20px 20px;
		border-bottom: 1px solid #0059ff;
		.hLeft {
			width: 50%;
			color: white;
		}
		.hRight {
			width: 50%;
		}
	}
	.content {
		display: flex;
		flex-direction: column;
		margin-top: 10px;
		margin-left: 20px;
		&-info:not(:first-child){
			margin-top: 10px;
		}
		&-info{
			display: flex;
			align-items: center;
			color: white;
			font-size: 14px;
			span:nth-child(2){
				display: inline-block;
				width: 80%;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
		}
	}
}
::v-deep .el-input__inner {
	color: #fff;
}
::v-deep .el-select .el-input .el-select__caret {
	color: #fff;
}
::v-deep .el-input__wrapper {
	width: 85%;
	height: 0%;
	background: #0d2956;
}
::v-deep .el-range-separator {
	color: #ccc;
	font-size: 10px;
}
::v-deep .el-range-input {
	color: #ccc;
	font-size: 10px;
}
.dialogContainer {
	padding: 0 50px;
	// height: 600px;
	::v-deep .el-tabs__item {
		color: #fff;
	}
	::v-deep .el-tabs__nav-wrap::after {
		background-color: rgba(255, 0, 0, 0);
	}
	.tabList {
		display: flex;
		width: 100%;
		height: 14%;
		background: url("@/assets/images/dustNoise/rightBottom.png") no-repeat;
		// background-color: #00224f;
		background-size: 100% 100%;
		left: 75.5%;
		top: 75%;
		color: #fff;
		font-size: 14px;
		line-height: 30px;
		justify-content: space-around;
		text-align: center;

		div {
			width: 100px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
	.listBox {
		// height: 10%;
		.listStyle {
			display: flex;
			justify-content: space-around;
			color: #fff;
			height: 12%;
			line-height: 25px;
			font-size: 12px;
			text-align: center;
			div {
				width: 100px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
		.listStyle:hover {
			background: #003c84;
		}
	}
	.notoDta {
		top: 40%;
		width: 30%;
		left: 35%;
		text-align: center;
		position: absolute;
		img {
			width: 40%;
			margin: 5% 30%;
		}
		p {
			color: #fff;
			font-size: 14px;
			margin: -6% 37%;
		}
	}
}
::v-deep .el-dialog{
	background: url("@/assets/images/commandScreen/dialog-bg.png") no-repeat;
	// background-color: #fff;
	background-size: 100% 100%;
	margin-top: 12%;
}
::v-deep .el-dialog__headerbtn{
	right: 35px;
	top: 25px;
}
::v-deep .el-dialog .el-dialog__header .el-dialog__title{
	margin-left: 30px;
	margin-top: 10px;
	font-size: 18px;
	color: #fff;
	position: absolute;
}
::v-deep el-dialog__header{
	margin-top: 20px;
}
</style>