zhgdyun/src/views/agjtLiveScreen/liveScreen/rightTop.vue

<template>
	<div class="rightTop">
		<Card title="应急记录">
			<div class="mainContainer">
				<el-scrollbar style="height:104.5%">
					<div class="itemBox" v-for="(item,i) in 10" :key="i">
						<div class="itemLeft">
							<div style="font-size:24px;transform:translateY(-3px)">⚠</div>
							<div style="margin-left:8px">事项</div>
						</div>
						<div class="itemRight">
							<div class="rightTop">
								<div class="overHiddenText" style="width:60%">被困电梯，需要救援</div>
								<div style="width:20%">检查人：张三</div>
							</div>
							<div class="rightCenter">
								<div style="">责任单位：辽宁五瞏</div>
							</div>
							<div class="rightBottom">
								<div class="rbInner1">处理状态：已处理</div>
								<div class="rbInner2">处理报告：下载</div>
								<div class="rbInner3">2024-03-01 12:00:00</div>
							</div>
						</div>
					</div>
				</el-scrollbar>
			</div>
			<!-- <div class="not-data">
				<img src="@/assets/images/noData.png" alt="" />
				<p>暂无数据</p>
			</div> -->
		</Card>
	</div>
</template>

<script setup lang="ts">
import Card from "@/components/card.vue";
import { onMounted, ref } from "vue";
import { GlobalStore } from "@/stores";
const store = GlobalStore();
import * as echarts from "echarts";

onMounted(async () => {
});
</script>

<style lang="scss" scoped>
.rightTop {
	width: 100%;
	height: 100%;
	.mainContainer{
		width: calc(100% - 20px);
		height: calc(100% - 20px);
		padding: 10px 10px;
		.itemBox{
			width: 100%;
			height: 65px;
			color: #fff;
			display: flex;
			justify-content: space-between;
			margin-bottom: 10px;
			.itemLeft{
				width: 16%;
				height: 100%;
				border-left: 2px solid #f73758;
				background-color: rgba($color: darkred, $alpha: 0.4);
				display: flex;
				justify-content: center;
				align-items: center;

			}
			.itemRight{
				height: calc(100% - 10px);
				width: calc(82% - 10px);
				padding: 5px 5px;
				// background-color: rgba($color: #a85454, $alpha: 0.3);
				background: repeating-linear-gradient(100deg, rgba(200,10,10,0.1), rgba(200,10,10,0.1) 20px, rgba(0,0,0,0) 20px, rgba(0,0,0,0) 40px), 
							linear-gradient(to bottom, rgba(200,10,10,0.2), rgba(200,10,10,0.3));
  				background-size: 100% 100%, 100% 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.rightTop{
					height: 30%;
					width: 100%;
					display: flex;
					justify-content: space-between;
				}
				.rightCenter{
					height: 30%;
					width: 100%;
					display: flex;
					justify-content: flex-end;
				}
				.rightBottom{
					color: #19bfef;
					height: 30%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					// transform: translateY(-3px);
					.rbInner1{}
					.rbInner2{}
					.rbInner3{
						font-style: italic;
					}
				}
			}
		}
	}
}
.overHiddenText{
	white-space: nowrap; /* 防止文字换行 */
	overflow: hidden; /* 超出部分隐藏 */
	text-overflow: ellipsis; /* 超出部分显示省略号 */
}
::v-deep .h-card .content {
	height: 80%;
}
::v-deep .h-card {
	position: relative;
}
.not-data {
	top: 40%;
	width: 30%;
	left: 35%;
	position: absolute;
	text-align: center;
	img {
		width: 50%;
	}
	p {
		color: #fff;
		font-size: 14px;
	}
}
</style>