Merge branch 'cjw-dev' into shenzhen-dev
This commit is contained in:
commit
f1a9d62f25
@ -113,9 +113,9 @@ import { GlobalStore } from "@/stores";
|
||||
// justify-content: space-around;
|
||||
.listItem{
|
||||
width: 100%;
|
||||
height: 27%;
|
||||
height: 27.6%;
|
||||
margin-bottom: 10px;
|
||||
background-color: rgba($color: #062d5a, $alpha: 0.8);
|
||||
background-color: rgba($color: #062d5a, $alpha: 0.7);
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
|
||||
@ -1,7 +1,35 @@
|
||||
<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>
|
||||
@ -18,6 +46,37 @@ import { GlobalStore } from "@/stores";
|
||||
.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%;
|
||||
|
||||
@ -1,7 +1,17 @@
|
||||
<template>
|
||||
<div class="rightBottom">
|
||||
<Card title="安全待办">
|
||||
|
||||
<div class="mainContainer">
|
||||
<div class="itemBox" v-for="(item,i) in 7" :key="i">
|
||||
<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>
|
||||
@ -22,6 +32,37 @@ onMounted( async () => {
|
||||
.rightBottom {
|
||||
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: 10px;
|
||||
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 {
|
||||
|
||||
@ -1,7 +1,50 @@
|
||||
<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>
|
||||
@ -17,10 +60,61 @@ onMounted(async () => {
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<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%;
|
||||
|
||||
@ -48,10 +48,9 @@
|
||||
<div class="itemHeadInner1" style="margin-right: 10px" v-if="JSON.parse(item.payload).status === 2 && JSON.parse(item.payload).overTime">超期未整改</div>
|
||||
<div class="itemHeadInner4" style="margin-right: 10px" v-if="JSON.parse(item.payload).status === 3 && JSON.parse(item.payload).overTime">超期未复查</div>
|
||||
<div class="itemHeadInner5" style="margin-right: 10px" v-if="JSON.parse(item.payload).status === 4 && JSON.parse(item.payload).overTime">超期未核验</div> -->
|
||||
<div class="itemHeadInner1" style="margin-right: 10px" v-if="JSON.parse(item.payload).status === 2 && !JSON.parse(item.payload).overTime">未整改</div>
|
||||
<div class="itemHeadInner1" style="margin-right: 10px" v-if="JSON.parse(item.payload).status === 2">未整改</div>
|
||||
<div class="itemHeadInner4" style="margin-right: 10px" v-if="JSON.parse(item.payload).status === 3">未复查</div>
|
||||
<div class="itemHeadInner5" style="margin-right: 10px" v-if="JSON.parse(item.payload).status === 4">未核验</div>
|
||||
<div class="itemHeadInner1" style="margin-right: 10px" v-if="JSON.parse(item.payload).status === 2 && JSON.parse(item.payload).overTime">超期未整改</div>
|
||||
<!-- <div class="itemHeadInner6" style="margin-right: 10px" v-if="JSON.parse(item.payload).status === 5">合格</div>
|
||||
<div class="itemHeadInner3" style="margin-right: 10px" v-if="JSON.parse(item.payload).status === 6">已撤回</div>
|
||||
<div class="itemHeadInner2" style="margin-right: 10px" v-if="JSON.parse(item.payload).status === 7">超期未关闭</div> -->
|
||||
@ -102,10 +101,9 @@
|
||||
<div class="itemHeadInner1" style="margin-right: 10px" v-if="JSON.parse(item.payload).status === 2 && JSON.parse(item.payload).overTime">超期未整改</div>
|
||||
<div class="itemHeadInner4" style="margin-right: 10px" v-if="JSON.parse(item.payload).status === 3 && JSON.parse(item.payload).overTime">超期未复查</div>
|
||||
<div class="itemHeadInner5" style="margin-right: 10px" v-if="JSON.parse(item.payload).status === 4 && JSON.parse(item.payload).overTime">超期未核验</div> -->
|
||||
<div class="itemHeadInner1" style="margin-right: 10px" v-if="JSON.parse(item.payload).status === 2 && !JSON.parse(item.payload).overTime">未整改</div>
|
||||
<div class="itemHeadInner1" style="margin-right: 10px" v-if="JSON.parse(item.payload).status === 2">未整改</div>
|
||||
<div class="itemHeadInner4" style="margin-right: 10px" v-if="JSON.parse(item.payload).status === 3">未复查</div>
|
||||
<div class="itemHeadInner5" style="margin-right: 10px" v-if="JSON.parse(item.payload).status === 4">未核验</div>
|
||||
<div class="itemHeadInner1" style="margin-right: 10px" v-if="JSON.parse(item.payload).status === 2 && JSON.parse(item.payload).overTime">超期未整改</div>
|
||||
<!-- <div class="itemHeadInner6" style="margin-right: 10px" v-if="JSON.parse(item.payload).status === 5">合格</div>
|
||||
<div class="itemHeadInner3" style="margin-right: 10px" v-if="JSON.parse(item.payload).status === 6">已撤回</div>
|
||||
<div class="itemHeadInner2" style="margin-right: 10px" v-if="JSON.parse(item.payload).status === 7">超期未关闭</div> -->
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user