1

liuying

2024-04-25 6e3b6044ba218ba2c7cf4ad9d80821d8f78f1ff0

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<template>
  <div id="data-view">
    <dv-full-screen-container>
      <top-header />
      <div class="main-container">
        <div class="left1" style="width: 20%;display:flex;flex-direction:column">
          <dv-border-box-12>
            <left1 />
          </dv-border-box-12>
          <dv-border-box-12>
            <left12 />
          </dv-border-box-12>
        </div>
        <div class="left2" style="width: 20%;display:flex;flex-direction:column">
          <dv-border-box-12>
            <left2 />
          </dv-border-box-12>
          <dv-border-box-12>
            <left22 />
          </dv-border-box-12>
          <dv-border-box-12>
            <left23 />
          </dv-border-box-12>
        </div>
        <div class="middle" style="width: 40%;display:flex;flex-direction:column">
          <dv-border-box-1 style="height: 15%;">
            <middle1 />
          </dv-border-box-1>
          <dv-border-box-8 style="height: 60%;">
            <middle2 />
          </dv-border-box-8>
          <dv-border-box-1 style="height: 25%;">
            <middle3 />
          </dv-border-box-1>
        </div>
        <div class="right" style="width:20%;display:flex;flex-direction:column">
          <dv-border-box-12>
            <right1 />
          </dv-border-box-12>
          <dv-border-box-12>
            <right2 />
          </dv-border-box-12>
          <dv-border-box-12>
            <right3 />
          </dv-border-box-12>
          <dv-border-box-12>
            <right4 />
          </dv-border-box-12>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>
 
<script>
  import topHeader from './topHeader'
  import left1 from './left1'
  import left12 from './left12'
  import left2 from './left2'
  import left22 from './left22'
  import left23 from './left23'
  import right1 from './right1'
  import right2 from './right2'
  import right3 from './right3'
  import right4 from './right4'
  import middle1 from './middle1'
  import middle2 from './middle2'
  import middle3 from './middle3'
 
  export default {
    name: 'DataView',
    components: {
      topHeader,
      left1,
      left12,
      left2,
      left22,
      left23,
      right1,
      right2,
      right3,
      right4,
      middle1,
      middle2,
      middle3
    },
    data() {
      return {}
    },
    methods: {}
  }
</script>
 
<style lang="less">
  #data-view {
    width: 100%;
    height: 100%;
    background-color: #030409;
    color: #fff;
 
    #dv-full-screen-container {
      background-image: url('./img/bg.png');
      background-size: 100% 100%;
      box-shadow: 0 0 3px blue;
      display: flex;
      flex-direction: column;
    }
 
    .main-container {
      // height: calc(~"100% - 80px");
      // flex: 1;
      height: 100%;
      padding: 5px;
      display: flex;
      box-sizing: border-box;
      flex-direction: row;
    }
  }
</style>