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