100 lines
3.4 KiB
Vue
100 lines
3.4 KiB
Vue
<template>
|
||
<div class="centerBottomRight">
|
||
<Card title="质量待办">
|
||
<div class="mainContainer">
|
||
<div class="itemBox">
|
||
<div class="itemLine1">外墙、顶板、地板出现贯通性裂缝的疯狂世界东方螺丝钉解放数量大幅减少的ask大理石看得见啊来看看是多久啊老师的课</div>
|
||
<div class="itemLine2">整改结果：<span style="color:#19bfef">已逾期</span></div>
|
||
<div class="itemLine3">
|
||
<div class="line3Inner1">整改人：<span style="color:#19bfef">李四</span></div>
|
||
<div class="line3Inner2">检查人：<span style="">张三</span></div>
|
||
<div class="line3Inner3">检查时间：<span style="">2024-03-01 12:00:00</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="itemBox">
|
||
<div class="itemLine1">外墙、顶板、地板出现贯通性裂缝的疯狂世界东方螺丝钉解放数量大幅减少的ask大理石看得见啊来看看是多久啊老师的课</div>
|
||
<div class="itemLine2">整改结果：<span style="color:#19bfef">已逾期</span></div>
|
||
<div class="itemLine3">
|
||
<div class="line3Inner1">整改人：<span style="color:#19bfef">李四</span></div>
|
||
<div class="line3Inner2">检查人：<span style="">张三</span></div>
|
||
<div class="line3Inner3">检查时间：<span style="">2024-03-01 12:00:00</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="itemBox">
|
||
<div class="itemLine1">外墙、顶板、地板出现贯通性裂缝的疯狂世界东方螺丝钉解放数量大幅减少的ask大理石看得见啊来看看是多久啊老师的课</div>
|
||
<div class="itemLine2">整改结果：<span style="color:#19bfef">已逾期</span></div>
|
||
<div class="itemLine3">
|
||
<div class="line3Inner1">整改人：<span style="color:#19bfef">李四</span></div>
|
||
<div class="line3Inner2">检查人：<span style="">张三</span></div>
|
||
<div class="line3Inner3">检查时间：<span style="">2024-03-01 12:00:00</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import Card from "@/components/card.vue";
|
||
import { ref, watch, onMounted } from "vue";
|
||
import { getStageOption } from "@/api/modules/projectOverview";
|
||
import { GlobalStore } from "@/stores";
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.centerBottomRight {
|
||
width: 100%;
|
||
height: 100%;
|
||
.mainContainer{
|
||
width: calc(100% - 22px);
|
||
height: calc(100% - 26px);
|
||
padding: 10px 10px;
|
||
.itemBox{
|
||
// width: 100%;
|
||
// height: 30%;
|
||
border: 1px solid #0c58a2;
|
||
color: #fff;
|
||
padding: 5px 10px;
|
||
margin-bottom: 12px;
|
||
box-shadow: inset 0 0 8px 2px rgba($color: #0c58a2, $alpha: 1.0); /* 使用box-shadow属性添加发光效果，参数分别代表向内扩散、水平偏移、垂直偏移、模糊半径、阴影尺寸和颜色 */
|
||
// box-shadow: inset 0 0 5px 2px rgba(255, 255, 255, 0.7); /* 向内发光效果 */
|
||
.itemLine1{
|
||
font-size: 14px;
|
||
white-space: nowrap; /* 防止文字换行 */
|
||
overflow: hidden; /* 超出部分隐藏 */
|
||
text-overflow: ellipsis; /* 超出部分显示省略号 */
|
||
}
|
||
.itemLine2{
|
||
font-size: 11px;
|
||
line-height: 20px;
|
||
}
|
||
.itemLine3{
|
||
font-size: 11px;
|
||
line-height: 20px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
::v-deep .h-card .content {
|
||
height: 80%;
|
||
margin-top: 4%;
|
||
}
|
||
.notoDta {
|
||
bottom: 10%;
|
||
width: 20%;
|
||
left: 35%;
|
||
text-align: center;
|
||
position: absolute;
|
||
img {
|
||
width: 40%;
|
||
}
|
||
div {
|
||
color: #fff;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
</style>
|