BJ_web_developers / lzsandtable

Commit 86551874fd3f8b669710392293b38179aada4d92

Authored by liuqimichale
1 parent 3e5ad56c

左右区域

Inline Side-by-side
Showing 1 changed file with 17 additions and 3 deletions
src/view/VHome.vue
  View file @8655187
... ... @@ -2,11 +2,19 @@
2 2 <div class="main-content">
3 3 <v-header></v-header>
4 4 <ul class="main-wrap">
5   - <li class="main-left">left</li>
  5 + <li class="main-left">
  6 + <div class="frame-wrap"></div>
  7 + <div class="frame-wrap frame-wrap-center"></div>
  8 + <div class="frame-wrap"></div>
  9 + </li>
6 10 <li class="main-center">
7 11 <v-map></v-map>
8 12 </li>
9   - <li class="main-right">right</li>
  13 + <li class="main-right">
  14 + <div class="frame-wrap"></div>
  15 + <div class="frame-wrap frame-wrap-center"></div>
  16 + <div class="frame-wrap"></div>
  17 + </li>
10 18 </ul>
11 19 </div>
12 20 </template>
... ... @@ -37,7 +45,6 @@ export default {
37 45 }
38 46 }
39 47 .main-left,.main-right{
40   - background-color: #ccc;
41 48 width: 25%;
42 49 }
43 50 .main-center{
... ... @@ -45,5 +52,12 @@ export default {
45 52 margin: 0 10px;
46 53 border:1px solid #1679de;
47 54 }
  55 + .frame-wrap-center{
  56 + margin: 10px 0;
  57 + }
  58 + .frame-wrap{
  59 + height: calc((100% - 20px)/3);
  60 + background: #f00;
  61 + }
48 62  
49 63 </style>
... ...