root/rax-medical
1
0
Fork 0
mirror of https://gitee.com/xiongmao1988/rax-medical.git synced 2026-06-12 13:31:47 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

布局调整 🎨

This commit is contained in:
gaofy 2023-11-20 09:13:16 +08:00
parent 0eab881e3c
commit b926a215c9
1 changed files with 160 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
src/views/remote-manage/remote-manage.vue
View File

@ -95,6 +95,14 @@
<Back />
</el-icon> 返回</el-button>
</div>
<div class="monitoring-message">
<div class="left-box">
<span class="unusual-title">异常信息</span>
<ul ref="unusualMsg" class="unusual-box">
<li v-for="item in unusual" :key="item">{{ item }}</li>
</ul>
</div>
<div class="right-box">
<div class="video-box" @click="playPause">
<div class="icon-box">
<el-icon v-if="isVideoPlay">
@ -120,9 +128,8 @@
<el-input v-model="msgVal" placeholder="请输入消息" />
<el-button color="#006080" @click="sendMsg">发送消息</el-button>
</div>
<ul ref="unusualMsg" class="unusual-box">
<li v-for="item in unusual" :key="item">{{ item }}</li>
</ul>
</div>
</div>
</div>
<div class="table-box">
<el-table :data="tableData" height="100%" style="width: 100%">
@ -819,10 +826,51 @@ onMounted(() => {
}
}
.monitoring-message {
width: 670px;
height: 550px;
padding-bottom: 10px;
display: flex;
justify-content: space-between;
&>.left-box {
position: relative;
width: 200px;
height: 100%;
.unusual-title {
display: block;
width: 100%;
line-height: 38px;
color: #C77000;
font-size: 20px;
text-align: center;
border: 1px dashed #C1C1C1;
border-radius: 10px;
}
.unusual-box {
width: 100%;
height: calc(100% - 45px);
// background: #F8F8F8;
border-left: 1px dashed #C1C1C1;
// border-radius: 4px;
margin-top: 5px;
padding: 8px 16px;
overflow-y: auto;
li {
color: #F80000;
font-size: 14px;
line-height: 22px;
}
}
}
&>.right-box {
width: calc(100% - 205px);
height: 100%;
.video-box {
position: relative;
width: 100%;
height: 380px;
height: 270px;
background: $main-color;
/* background: url(@/assets/imgs/video_bck.png);
background-size: 100% 100%; */
@ -856,12 +904,12 @@ onMounted(() => {
.message-box {
width: 100%;
height: 220px;
margin-bottom: 5px;
height: 270px;
// margin-bottom: 5px;
.message-log {
width: 100%;
height: 110px;
height: calc(100% - 40px);
padding: 16px 20px;
box-sizing: border-box;
border: 1px solid #c8c8c8;
@ -894,10 +942,10 @@ onMounted(() => {
.send-box {
width: 100%;
height: 46px;
height: 40px;
display: flex;
justify-content: space-between;
align-items: center;
align-items: flex-end;
.el-input {
width: calc(100% - 110px);
@ -915,27 +963,13 @@ onMounted(() => {
line-height: 30px;
}
}
.unusual-box {
width: 100%;
height: 60px;
background: #F8F8F8;
border: 1px solid #C1C1C1;
border-radius: 4px;
padding: 8px 16px;
overflow-y: auto;
li {
color: #F80000;
font-size: 14px;
line-height: 22px;
}
}
}
.table-box {
width: 100%;
height: calc(100% - 644px);
height: calc(100% - 589px);
:deep(.el-table__inner-wrapper) {
.el-table__cell {