初版

AdaKing88

2023-08-21 bc03b832caa49bbcd2674fe4cae3701b5059bf95

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<template>
  <div style="pointer-events: none;">
    <div class="aside" style="left: 30px;">
      <div class="asideContent">
        <RiskPoints />
        <RealTimeVideo />
        <MonitorPlaybackVolume />
      </div>
    </div>
    <div class="aside" style="right: 30px;">
      <div class="asideContent">
        <MonitoringWarning />
        <DamageStatistics />
        <AccessProportion />
      </div>
    </div>
  </div>
</template>
 
<script>
  import RiskPoints from "./VideoFusion/RiskPoints.vue";
  import MonitoringWarning from "./VideoFusion/MonitoringWarning.vue";
  import RealTimeVideo from "./VideoFusion/RealTimeVideo.vue";
  import DamageStatistics from "./VideoFusion/DamageStatistics.vue";
  import MonitorPlaybackVolume from "./VideoFusion/MonitorPlaybackVolume.vue";
  import AccessProportion from "./VideoFusion/AccessProportion.vue";
  export default {
    components: {
      RiskPoints,
      MonitoringWarning,
      RealTimeVideo,
      DamageStatistics,
      MonitorPlaybackVolume,
      AccessProportion
    },
 
  }
</script>
 
<style scoped lang="less">
  .aside {
    width: 20%;
    height: auto;
    top: 80px;
    bottom: 70px;
    color: aliceblue;
    position: absolute;
 
    .asideContent {
      height: 100%;
      background-color: rgba(24, 47, 78, 0.5);
      border-radius: 10px;
      flex-direction: column;
      align-items: center;
    }
  }
</style>