BJ_web_developers / dyitoc

Blame view

src/views/mainContainer.vue 1.42 KB
Edit Raw Normal View History
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>