mirror of
https://gitee.com/xiongmao1988/rax-medical.git
synced 2026-06-12 13:31:47 +08:00
布局调整 🎨
This commit is contained in:
gaofy
parent
0eab881e3c
commit
b926a215c9
|
|
@ -95,34 +95,41 @@
|
|||
<Back />
|
||||
</el-icon> 返回</el-button>
|
||||
</div>
|
||||
<div class="video-box" @click="playPause">
|
||||
<div class="icon-box">
|
||||
<el-icon v-if="isVideoPlay">
|
||||
<VideoPause />
|
||||
</el-icon>
|
||||
<el-icon v-else>
|
||||
<VideoPlay />
|
||||
</el-icon>
|
||||
<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>
|
||||
<!-- poster="@/assets/imgs/video_bck.png" -->
|
||||
<video ref="liveVideo">
|
||||
<source src="@/assets/medical.mp4" type="video/mp4" />
|
||||
</video>
|
||||
</div>
|
||||
<div class="message-box">
|
||||
<ul ref="msgLog" class="message-log">
|
||||
<li v-for="(item, index) in mssageList" :key="'msg-log-' + index"
|
||||
:class="{ 'align-right': item.user === userName }">
|
||||
<span>{{ item.msg }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="send-box">
|
||||
<el-input v-model="msgVal" placeholder="请输入消息" />
|
||||
<el-button color="#006080" @click="sendMsg">发送消息</el-button>
|
||||
<div class="right-box">
|
||||
<div class="video-box" @click="playPause">
|
||||
<div class="icon-box">
|
||||
<el-icon v-if="isVideoPlay">
|
||||
<VideoPause />
|
||||
</el-icon>
|
||||
<el-icon v-else>
|
||||
<VideoPlay />
|
||||
</el-icon>
|
||||
</div>
|
||||
<!-- poster="@/assets/imgs/video_bck.png" -->
|
||||
<video ref="liveVideo">
|
||||
<source src="@/assets/medical.mp4" type="video/mp4" />
|
||||
</video>
|
||||
</div>
|
||||
<div class="message-box">
|
||||
<ul ref="msgLog" class="message-log">
|
||||
<li v-for="(item, index) in mssageList" :key="'msg-log-' + index"
|
||||
:class="{ 'align-right': item.user === userName }">
|
||||
<span>{{ item.msg }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="send-box">
|
||||
<el-input v-model="msgVal" placeholder="请输入消息" />
|
||||
<el-button color="#006080" @click="sendMsg">发送消息</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul ref="unusualMsg" class="unusual-box">
|
||||
<li v-for="item in unusual" :key="item">{{ item }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table-box">
|
||||
<el-table :data="tableData" height="100%" style="width: 100%">
|
||||
|
|
@ -819,123 +826,150 @@ onMounted(() => {
|
|||
}
|
||||
}
|
||||
|
||||
.video-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 380px;
|
||||
background: $main-color;
|
||||
/* background: url(@/assets/imgs/video_bck.png);
|
||||
.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: 270px;
|
||||
background: $main-color;
|
||||
/* background: url(@/assets/imgs/video_bck.png);
|
||||
background-size: 100% 100%; */
|
||||
|
||||
&:hover {
|
||||
.icon-box {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-box {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
font-size: 60px;
|
||||
color: white;
|
||||
background: rgba(black, .3);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.message-box {
|
||||
width: 100%;
|
||||
height: 220px;
|
||||
margin-bottom: 5px;
|
||||
|
||||
.message-log {
|
||||
width: 100%;
|
||||
height: 110px;
|
||||
padding: 16px 20px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #c8c8c8;
|
||||
background: #f8f8f8;
|
||||
overflow-y: auto;
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
margin: 5px 0;
|
||||
|
||||
&.align-right {
|
||||
text-align: right;
|
||||
&:hover {
|
||||
.icon-box {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
max-width: 80%;
|
||||
padding: 6px 8px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 8px;
|
||||
.icon-box {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
font-size: 60px;
|
||||
color: white;
|
||||
letter-spacing: 1px;
|
||||
background: $main-color;
|
||||
text-align: left;
|
||||
background: rgba(black, .3);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.send-box {
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.el-input {
|
||||
width: calc(100% - 110px);
|
||||
height: 32px;
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
background-color: #F2F3F5;
|
||||
border-color: #C1C1C1;
|
||||
video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.el-button {
|
||||
padding: 0;
|
||||
width: 100px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
.message-box {
|
||||
width: 100%;
|
||||
height: 270px;
|
||||
// margin-bottom: 5px;
|
||||
|
||||
.unusual-box {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
background: #F8F8F8;
|
||||
border: 1px solid #C1C1C1;
|
||||
border-radius: 4px;
|
||||
padding: 8px 16px;
|
||||
overflow-y: auto;
|
||||
.message-log {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
padding: 16px 20px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #c8c8c8;
|
||||
background: #f8f8f8;
|
||||
overflow-y: auto;
|
||||
|
||||
li {
|
||||
color: #F80000;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
li {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
margin: 5px 0;
|
||||
|
||||
&.align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
max-width: 80%;
|
||||
padding: 6px 8px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
letter-spacing: 1px;
|
||||
background: $main-color;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.send-box {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-input {
|
||||
width: calc(100% - 110px);
|
||||
height: 32px;
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
background-color: #F2F3F5;
|
||||
border-color: #C1C1C1;
|
||||
}
|
||||
}
|
||||
|
||||
.el-button {
|
||||
padding: 0;
|
||||
width: 100px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-box {
|
||||
width: 100%;
|
||||
height: calc(100% - 644px);
|
||||
height: calc(100% - 589px);
|
||||
|
||||
:deep(.el-table__inner-wrapper) {
|
||||
.el-table__cell {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user