138 lines
3.3 KiB
Vue
138 lines
3.3 KiB
Vue
<template>
|
||
<div class="rightTop">
|
||
<Card title="应急记录">
|
||
<div class="mainContainer">
|
||
<el-scrollbar style="height:102.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>
|