|
|
|
@ -1,5 +1,5 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="shadow-box mb-3">
|
|
|
|
|
<div class="shadow-box mb-3" :style="boxStyle">
|
|
|
|
|
<div class="list-header">
|
|
|
|
|
<div class="placeholder"></div>
|
|
|
|
|
<div class="search-wrapper">
|
|
|
|
@ -63,9 +63,16 @@ export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
searchText: "",
|
|
|
|
|
windowTop: 0,
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
boxStyle() {
|
|
|
|
|
return {
|
|
|
|
|
height: `calc(100vh - 160px + ${this.windowTop}px)`,
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
sortedMonitorList() {
|
|
|
|
|
let result = Object.values(this.$root.monitorList);
|
|
|
|
|
|
|
|
|
@ -108,7 +115,20 @@ export default {
|
|
|
|
|
return result;
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
window.addEventListener("scroll", this.onScroll);
|
|
|
|
|
},
|
|
|
|
|
beforeUnmount() {
|
|
|
|
|
window.removeEventListener("scroll", this.onScroll);
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
onScroll() {
|
|
|
|
|
if (window.top.scrollY <= 133) {
|
|
|
|
|
this.windowTop = window.top.scrollY;
|
|
|
|
|
} else {
|
|
|
|
|
this.windowTop = 133;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
monitorURL(id) {
|
|
|
|
|
return getMonitorRelativeURL(id);
|
|
|
|
|
},
|
|
|
|
@ -122,6 +142,12 @@ export default {
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
@import "../assets/vars.scss";
|
|
|
|
|
|
|
|
|
|
.shadow-box {
|
|
|
|
|
height: calc(100vh - 150px);
|
|
|
|
|
position: sticky;
|
|
|
|
|
top: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.small-padding {
|
|
|
|
|
padding-left: 5px !important;
|
|
|
|
|
padding-right: 5px !important;
|
|
|
|
@ -142,6 +168,12 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dark {
|
|
|
|
|
.footer {
|
|
|
|
|
// background-color: $dark-bg;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: 770px) {
|
|
|
|
|
.list-header {
|
|
|
|
|
margin: -20px;
|
|
|
|
|