|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<div class="video-card">
|
|
|
<div class="common-title gradient-text">视频监控</div>
|
|
|
-<!-- <div class="more-btn" @click="showVideoMonitorList">{{ '查看更多>>' }}</div>-->
|
|
|
+ <div class="more-btn" @click="showVideoMonitorList">{{ '查看更多>>' }}</div>
|
|
|
<div class="card-content video-list">
|
|
|
<div v-for="(item, index) in listData" :key="index" class="video-box">
|
|
|
<HKVideo :dot_data="item" :width="215" :height="94" />
|
|
@@ -14,11 +14,10 @@
|
|
|
<Dialog v-model="showListDialog" type="xl" title="视频监控" class="dialog" hide-footer @close="reset">
|
|
|
<div class="search-box">
|
|
|
<div class="box-left">
|
|
|
- <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="200px" label-position="left">
|
|
|
+ <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="70px" label-position="left">
|
|
|
<el-form-item label="实景视频" prop="eventType">
|
|
|
<el-select
|
|
|
v-model="queryParams.realisticVideoType"
|
|
|
- size="large"
|
|
|
class="custom-select"
|
|
|
popper-class="custom-select-popper"
|
|
|
:teleported="false"
|
|
@@ -33,8 +32,7 @@
|
|
|
v-model="queryParams.name"
|
|
|
class="custom-input2"
|
|
|
placeholder="请输入摄像头名称"
|
|
|
- size="large"
|
|
|
- style="width: 500px"
|
|
|
+ style="width: 200px"
|
|
|
@input="getList"
|
|
|
/>
|
|
|
</el-form-item>
|
|
@@ -50,7 +48,7 @@
|
|
|
<div v-for="(item, index) in editData" :key="index" class="box-item">
|
|
|
<div class="edit-img">
|
|
|
<span class="edit-title">{{ item.name }}</span>
|
|
|
- <div class="close-btn" @click="deleteItem(index)">x</div>
|
|
|
+ <div class="close-btn" @click="deleteItem(index)"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="flex" style="flex-direction: column; align-items: center">
|
|
@@ -286,6 +284,9 @@ initData();
|
|
|
width: 100%;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
+ .el-form--inline .el-form-item {
|
|
|
+ margin-right: 15px;
|
|
|
+ }
|
|
|
}
|
|
|
.more-btn {
|
|
|
position: absolute;
|
|
@@ -299,18 +300,18 @@ initData();
|
|
|
.video-list2 {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
- padding: 0 20px;
|
|
|
+ padding: 0 10px;
|
|
|
.video-box {
|
|
|
- width: 790px;
|
|
|
- height: 356px;
|
|
|
- margin-right: 35.06px;
|
|
|
+ width: 288px;
|
|
|
+ height: 200px;
|
|
|
+ margin-right: 15px;
|
|
|
cursor: pointer;
|
|
|
cursor: pointer;
|
|
|
background: url('@/assets/images/video/videoBg.png') no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
padding: 14.5px 9px;
|
|
|
position: relative;
|
|
|
- margin-bottom: 40px;
|
|
|
+ margin-bottom: 15px;
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
@@ -321,14 +322,15 @@ initData();
|
|
|
}
|
|
|
.video-label {
|
|
|
position: absolute;
|
|
|
- bottom: 17px;
|
|
|
- right: 20px;
|
|
|
+ bottom: 8px;
|
|
|
+ right: 4px;
|
|
|
|
|
|
display: flex;
|
|
|
.label {
|
|
|
width: 186px;
|
|
|
- height: 22px;
|
|
|
- line-height: 22px;
|
|
|
+ height: 24px;
|
|
|
+ padding-right: 5px;
|
|
|
+ line-height: 24px;
|
|
|
font-size: 14px;
|
|
|
white-space: nowrap;
|
|
|
overflow: hidden;
|
|
@@ -342,23 +344,25 @@ initData();
|
|
|
content: '';
|
|
|
width: 0;
|
|
|
height: 0;
|
|
|
- border-bottom: 56px solid rgba(0, 0, 0, 0.4);
|
|
|
- border-left: 56px solid transparent;
|
|
|
+ border-bottom: 24px solid rgba(0, 0, 0, 0.4);
|
|
|
+ border-left: 24px solid transparent;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.img {
|
|
|
- width: 750px;
|
|
|
- height: 327px;
|
|
|
+ width: 278.5px;
|
|
|
+ height: 183px;
|
|
|
+ margin-left: 1px;
|
|
|
background-color: #000;
|
|
|
+ background-color: #ff0000;
|
|
|
}
|
|
|
.active-tag {
|
|
|
position: absolute;
|
|
|
- top: 30px;
|
|
|
- left: 30px;
|
|
|
- width: 187px;
|
|
|
- height: 56px;
|
|
|
+ top: 13px;
|
|
|
+ left: 10px;
|
|
|
+ width: 83px;
|
|
|
+ height: 25px;
|
|
|
background: url('@/assets/images/video/indexTag.png') no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
@@ -367,21 +371,24 @@ initData();
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
border-radius: 8px;
|
|
|
- padding: 5px 10px;
|
|
|
- width: 1348px;
|
|
|
- height: 193px;
|
|
|
+ padding: 3px 5px;
|
|
|
+ width: 545px;
|
|
|
+ height: 83px;
|
|
|
background: url('@/assets/images/video/editBg.png') no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
position: absolute;
|
|
|
- right: 45px;
|
|
|
- top: 97px;
|
|
|
+ right: 20px;
|
|
|
+ top: 27px;
|
|
|
}
|
|
|
.box-item {
|
|
|
position: relative;
|
|
|
- margin-left: 20px;
|
|
|
+ margin-left: 8px;
|
|
|
+ &:first-child {
|
|
|
+ margin-left: 0;
|
|
|
+ }
|
|
|
.edit-img {
|
|
|
- width: 160px;
|
|
|
- height: 160px;
|
|
|
+ width: 65px;
|
|
|
+ height: 65px;
|
|
|
background-color: #000;
|
|
|
}
|
|
|
.edit-title {
|
|
@@ -392,59 +399,51 @@ initData();
|
|
|
top: 0;
|
|
|
right: 0;
|
|
|
cursor: pointer;
|
|
|
- width: 33px;
|
|
|
- height: 33px;
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
background: url('@/assets/images/video/close.png') no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
z-index: 1;
|
|
|
}
|
|
|
}
|
|
|
.footer {
|
|
|
- height: 64px;
|
|
|
+ height: 30px;
|
|
|
display: flex;
|
|
|
justify-content: flex-end;
|
|
|
margin-bottom: 30px;
|
|
|
.pagination-container {
|
|
|
- height: 64px;
|
|
|
margin: 0;
|
|
|
}
|
|
|
:deep(.el-pagination__total) {
|
|
|
- color: #a7ccdf;
|
|
|
- font-size: 32px;
|
|
|
+ color: #a7ccdf !important;
|
|
|
}
|
|
|
:deep(.el-pagination) {
|
|
|
.btn-next,
|
|
|
.btn-prev {
|
|
|
- background-color: transparent;
|
|
|
- border: none;
|
|
|
+ background-color: transparent !important;
|
|
|
+ border: none !important;
|
|
|
.el-icon {
|
|
|
- font-size: 22px;
|
|
|
- color: #a7ccdf;
|
|
|
+ color: #a7ccdf !important;
|
|
|
}
|
|
|
}
|
|
|
.btn-prev:disabled,
|
|
|
.btn-next:disabled {
|
|
|
- background-color: transparent;
|
|
|
- border: none;
|
|
|
+ background-color: transparent !important;
|
|
|
+ border: none !important;
|
|
|
}
|
|
|
.el-pager li {
|
|
|
- width: 64px;
|
|
|
- height: 64px;
|
|
|
- line-height: 64px;
|
|
|
text-align: center;
|
|
|
- font-size: 32px;
|
|
|
- color: #a7ccdf;
|
|
|
- background-color: #0e3064;
|
|
|
- border: 1px solid #0c57a7;
|
|
|
- margin: 0 6px;
|
|
|
+ color: #a7ccdf !important;
|
|
|
+ background-color: #0e3064 !important;
|
|
|
+ border: 1px solid #0c57a7 !important;
|
|
|
&:hover {
|
|
|
- background-color: #038dff;
|
|
|
- border: 1px solid #038dff;
|
|
|
+ background-color: #038dff !important;
|
|
|
+ border: 1px solid #038dff !important;
|
|
|
}
|
|
|
}
|
|
|
.el-pager li.is-active {
|
|
|
- background-color: #038dff;
|
|
|
- border: 1px solid #038dff;
|
|
|
+ background-color: #038dff !important;
|
|
|
+ border: 1px solid #038dff !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -455,7 +454,7 @@ initData();
|
|
|
.border {
|
|
|
background-color: #15428d;
|
|
|
width: 100%;
|
|
|
- height: 4px;
|
|
|
+ height: 1px;
|
|
|
margin-bottom: 30px;
|
|
|
}
|
|
|
.edit-icon {
|
|
@@ -464,8 +463,8 @@ initData();
|
|
|
&::before {
|
|
|
content: '';
|
|
|
display: inline-block;
|
|
|
- width: 41px;
|
|
|
- height: 36px;
|
|
|
+ width: 18px;
|
|
|
+ height: 16px;
|
|
|
background: url('@/assets/images/video/setting.png') no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
margin-right: 10px;
|
|
@@ -474,13 +473,18 @@ initData();
|
|
|
.common-checked,
|
|
|
.common-checked-active {
|
|
|
position: absolute;
|
|
|
- top: 30px;
|
|
|
- right: 30px;
|
|
|
+ top: 13px;
|
|
|
+ right: 12px;
|
|
|
z-index: 9;
|
|
|
}
|
|
|
-.dialog {
|
|
|
- :deep(.dialog-header) {
|
|
|
- min-height: 150px;
|
|
|
+:deep(.el-form) {
|
|
|
+ .el-form-item__label {
|
|
|
+ color: #ffffff !important;
|
|
|
}
|
|
|
}
|
|
|
+//.dialog {
|
|
|
+// :deep(.dialog-header) {
|
|
|
+// min-height: 150px;
|
|
|
+// }
|
|
|
+//}
|
|
|
</style>
|