Blame view

src/views/mainContainer.vue 1.42 KB
52c50939   liuqimichale   init
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  <template>
    <div class="maincontainer">
      <ul class="containerwrap clearfix">
        <li>
          <div class="heightsmall"></div>
          <div class="heightsmall margin12-0"></div>
          <div class="heightsmall"></div>
        </li>
        <li class="margin0-12">
          <div class="heightper-top"></div>
          <div class="heightper-bottom"></div>
        </li>
        <li>
          <div class="heightsmall"></div>
          <div class="heightsmall margin12-0"></div>
          <div class="heightsmall"></div>
        </li>
      </ul>
7e22e0a3   liuqimichale   loading
19
      <loadinggif :showLoading="showLoaddingGif"></loadinggif>
52c50939   liuqimichale   init
20
21
22
23
    </div>
  </template>
  
  <script>
7e22e0a3   liuqimichale   loading
24
25
  import loadinggif from '../components/loading'
  
52c50939   liuqimichale   init
26
  export default {
7e22e0a3   liuqimichale   loading
27
28
29
30
31
32
33
    name: 'mainContainer',
    components: {loadinggif},
    data() {
      return {
        showLoaddingGif: false
      }
    }
52c50939   liuqimichale   init
34
35
36
37
38
39
40
41
  }
  </script>
  
  <style scoped>
    .maincontainer {
      padding: 12px 12px;
      flex: 1;
    }
7e22e0a3   liuqimichale   loading
42
43
  
    .containerwrap {
52c50939   liuqimichale   init
44
45
46
47
48
49
50
51
52
53
54
55
56
      display: flex;
      height: 100%;
    }
  
    .containerwrap > li {
      height: 100%;
      display: flex;
      flex-direction: column;
    }
  
    .containerwrap > li:nth-of-type(1) {
      flex: 1;
    }
7e22e0a3   liuqimichale   loading
57
58
  
    .heightsmall {
52c50939   liuqimichale   init
59
60
61
62
63
64
65
      flex: 1;
      background: #f00;
    }
  
    .containerwrap > li:nth-of-type(2) {
      flex: 2;
    }
7e22e0a3   liuqimichale   loading
66
67
  
    .heightper-top {
52c50939   liuqimichale   init
68
69
70
      background: #f00;
      flex: 1;
    }
7e22e0a3   liuqimichale   loading
71
72
73
  
    .heightper-bottom {
      height: calc((100% - 24px) / 3);
52c50939   liuqimichale   init
74
75
76
77
78
79
80
81
82
      background: #f00;
      margin-top: 12px;
    }
  
    .containerwrap > li:nth-of-type(3) {
      flex: 1;
    }
  
  </style>