root/rax-medical
1
0
Fork 0
mirror of https://gitee.com/xiongmao1988/rax-medical.git synced 2026-06-12 15:51:46 +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 /> <Back />
</el-icon> 返回</el-button> </el-icon> 返回</el-button>
</div> </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="video-box" @click="playPause">
<div class="icon-box"> <div class="icon-box">
<el-icon v-if="isVideoPlay"> <el-icon v-if="isVideoPlay">
@ -120,9 +128,8 @@
<el-input v-model="msgVal" placeholder="请输入消息" /> <el-input v-model="msgVal" placeholder="请输入消息" />
<el-button color="#006080" @click="sendMsg">发送消息</el-button> <el-button color="#006080" @click="sendMsg">发送消息</el-button>
</div> </div>
<ul ref="unusualMsg" class="unusual-box"> </div>
<li v-for="item in unusual" :key="item">{{ item }}</li> </div>
</ul>
</div> </div>
<div class="table-box"> <div class="table-box">
<el-table :data="tableData" height="100%" style="width: 100%"> <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 { .video-box {
position: relative; position: relative;
width: 100%; width: 100%;
height: 380px; height: 270px;
background: $main-color; background: $main-color;
/* background: url(@/assets/imgs/video_bck.png); /* background: url(@/assets/imgs/video_bck.png);
background-size: 100% 100%; */ background-size: 100% 100%; */
@ -856,12 +904,12 @@ onMounted(() => {
.message-box { .message-box {
width: 100%; width: 100%;
height: 220px; height: 270px;
margin-bottom: 5px; // margin-bottom: 5px;
.message-log { .message-log {
width: 100%; width: 100%;
height: 110px; height: calc(100% - 40px);
padding: 16px 20px; padding: 16px 20px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid #c8c8c8; border: 1px solid #c8c8c8;
@ -894,10 +942,10 @@ onMounted(() => {
.send-box { .send-box {
width: 100%; width: 100%;
height: 46px; height: 40px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: flex-end;
.el-input { .el-input {
width: calc(100% - 110px); width: calc(100% - 110px);
@ -915,27 +963,13 @@ onMounted(() => {
line-height: 30px; 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 { .table-box {
width: 100%; width: 100%;
height: calc(100% - 644px); height: calc(100% - 589px);
:deep(.el-table__inner-wrapper) { :deep(.el-table__inner-wrapper) {
.el-table__cell { .el-table__cell {