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

<template>
	<div class="rightTop">
		<Card title="应急记录">
			<div class="mainContainer">
				<div class="itemBox">
					<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>
						<div class="rightBottom">
							<div class="rbInner1">处理状态：已处理</div>
							<div class="rbInner2">处理报告：下载</div>
							<div class="rbInner3">2024-03-01 12:00:00</div>
						</div>
					</div>
				</div>
				<div class="itemBox">
					<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>
						<div class="rightBottom">
							<div class="rbInner1">处理状态：已处理</div>
							<div class="rbInner2">处理报告：下载</div>
							<div class="rbInner3">2024-03-01 12:00:00</div>
						</div>
					</div>
				</div>
				<div class="itemBox">
					<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>
						<div class="rightBottom">
							<div class="rbInner1">处理状态：已处理</div>
							<div class="rbInner2">处理报告：下载</div>
							<div class="rbInner3">2024-03-01 12:00:00</div>
						</div>
					</div>
				</div>
			</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: 30%;
			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: 100%;
				width: calc(81% - 10px);
				padding: 0 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%;
				.rightTop{
					height: 50%;
					width: 100%;
					transform: translateY(10px);
					white-space: nowrap; /* 防止文字换行 */
					overflow: hidden; /* 超出部分隐藏 */
					text-overflow: ellipsis; /* 超出部分显示省略号 */
				}
				.rightBottom{
					color: #19bfef;
					height: 50%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					transform: translateY(-3px);
					.rbInner1{}
					.rbInner2{}
					.rbInner3{}
				}
			}
		}
	}
}
::v-deep .h-card .content {
	height: 80%;
}
::v-deep .h-card {
	position: relative;
}
</style>