|
@@ -170,11 +170,12 @@
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|
|
|
.monitor-cameras-container {
|
|
.monitor-cameras-container {
|
|
|
- padding: 10px;
|
|
|
|
|
|
|
+ padding: 10px 0 10px 10px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
|
|
|
.main-camera {
|
|
.main-camera {
|
|
|
- width: 100%;
|
|
|
|
|
- height: calc(100% - 220px);
|
|
|
|
|
|
|
+ width: calc(100% - 278px);
|
|
|
|
|
+ height: 100%;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.has-main-camera {
|
|
.has-main-camera {
|
|
@@ -209,9 +210,11 @@
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.all-cameras {
|
|
.all-cameras {
|
|
|
- width: 100%;
|
|
|
|
|
- height: 200px;
|
|
|
|
|
- margin-top: 20px;
|
|
|
|
|
|
|
+ width: 268px;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ margin-left: 10px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -219,6 +222,7 @@
|
|
|
display: flex;
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
|
|
+ padding-right: 10px;
|
|
|
|
|
|
|
|
.title {
|
|
.title {
|
|
|
font-weight: 500;
|
|
font-weight: 500;
|
|
@@ -228,7 +232,6 @@
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.add-area {
|
|
.add-area {
|
|
|
- padding: 0 16px;
|
|
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
@@ -256,16 +259,17 @@
|
|
|
|
|
|
|
|
.camera-list {
|
|
.camera-list {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
- height: calc(100% - 40px);
|
|
|
|
|
- margin-top: 10px;
|
|
|
|
|
|
|
+ height: calc(100% - 42px);
|
|
|
|
|
+ margin-top: 18px;
|
|
|
|
|
+ padding-right: 10px;
|
|
|
overflow: auto;
|
|
overflow: auto;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
|
|
- gap: 20px;
|
|
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ gap: 10px;
|
|
|
|
|
|
|
|
.monitor-item {
|
|
.monitor-item {
|
|
|
- width: 235px;
|
|
|
|
|
- height: 100%;
|
|
|
|
|
|
|
+ width: 100%;
|
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -281,8 +285,8 @@
|
|
|
|
|
|
|
|
.live-video {
|
|
.live-video {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
- height: calc(100% - 26px);
|
|
|
|
|
- border: 1px solid #ddd;
|
|
|
|
|
|
|
+ height: calc(100% - 28px);
|
|
|
|
|
+ border: 2px solid #ddd;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -296,7 +300,7 @@
|
|
|
color: #999;
|
|
color: #999;
|
|
|
|
|
|
|
|
.empty-img {
|
|
.empty-img {
|
|
|
- height: 80%;
|
|
|
|
|
|
|
+ width: 80%;
|
|
|
object-fit: contain;
|
|
object-fit: contain;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|