chenhaodong / mew-iview

Commit a9c00cd62df6d7154657ad9287cd6903e5c7ff63

Authored by 梁灏
1 parent 7a2f62ed

update demo

Showing 1 changed file with 145 additions and 18 deletions   Show diff stats
Inline Side-by-side
examples/routers/grid.vue
  Show/Hide comments   View file @a9c00cd
1 <style> 1 <style>
2 - /*.ivu-col div{*/  
3 - /*background: rgba(0,153,229,.7);*/  
4 - /*}*/ 2 + .view {
  3 + height: 100px;
  4 + width: 100px;
  5 + background: yellow;
  6 + }
5 </style> 7 </style>
6 <template> 8 <template>
7 <div> 9 <div>
8 - <Row :gutter="64">  
9 - <Card>  
10 - <i-col span="6">  
11 - <div>col-6</div>  
12 - </i-col>  
13 - <i-col span="6">  
14 - <div>col-6</div>  
15 - </i-col>  
16 - <i-col span="6">  
17 - <div>col-6</div>  
18 - </i-col>  
19 - <i-col span="6">  
20 - <div>col-6</div>  
21 - </i-col>  
22 - </Card> 10 + <Row type='flex' justify='center'>
  11 + <i-col span='21' class="offset-header">
  12 + <Row type='flex' :gutter='16' justify='space-between'>
  13 + <i-col :order='25'>
  14 + <div class="view">
  15 + <label>245</label>
  16 + </div>
  17 + </i-col>
  18 + <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='1'>
  19 + <div class="view" >
  20 + <label>1</label>
  21 + </div>
  22 + </i-col>
  23 + <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='2'>
  24 + <div class="view" >
  25 + <label>2</label>
  26 + </div>
  27 + </i-col>
  28 + <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='3'>
  29 + <div class="view" >
  30 + <label>3</label>
  31 + </div>
  32 + </i-col>
  33 + <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='4'>
  34 + <div class="view" >
  35 + <label>4</label>
  36 + </div>
  37 + </i-col>
  38 + <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='5'>
  39 + <div class="view" >
  40 + <label>5</label>
  41 + </div>
  42 + </i-col>
  43 + <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='6'>
  44 + <div class="view" >
  45 + <label>6</label>
  46 + </div>
  47 + </i-col>
  48 + <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='7'>
  49 + <div class="view" >
  50 + <label>2</label>
  51 + </div>
  52 + </i-col>
  53 + <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='8'>
  54 + <div class="view" >
  55 + <label>2</label>
  56 + </div>
  57 + </i-col>
  58 + <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='9'>
  59 + <div class="view" >
  60 + <label>2</label>
  61 + </div>
  62 + </i-col>
  63 + <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='10'>
  64 + <div class="view" >
  65 + <label>2</label>
  66 + </div>
  67 + </i-col>
  68 + <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='11'>
  69 + <div class="view" >
  70 + <label>2</label>
  71 + </div>
  72 + </i-col>
  73 + <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='12'>
  74 + <div class="view" >
  75 + <label>2</label>
  76 + </div>
  77 + </i-col>
  78 + <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='13'>
  79 + <div class="view" >
  80 + <label>12</label>
  81 + </div>
  82 + </i-col>
  83 + <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='14'>
  84 + <div class="view" >
  85 + <label>2</label>
  86 + </div>
  87 + </i-col>
  88 + <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='15'>
  89 + <div class="view" >
  90 + <label>2</label>
  91 + </div>
  92 + </i-col>
  93 + <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='16'>
  94 + <div class="view" >
  95 + <label>2</label>
  96 + </div>
  97 + </i-col>
  98 + <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='17'>
  99 + <div class="view" >
  100 + <label>2</label>
  101 + </div>
  102 + </i-col>
  103 + <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='18'>
  104 + <div class="view" >
  105 + <label>2</label>
  106 + </div>
  107 + </i-col>
  108 + <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='19'>
  109 + <div class="view" >
  110 + <label>2</label>
  111 + </div>
  112 + </i-col>
  113 + <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='20'>
  114 + <div class="view" >
  115 + <label>2</label>
  116 + </div>
  117 + </i-col>
  118 + <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='21'>
  119 + <div class="view" >
  120 + <label>2</label>
  121 + </div>
  122 + </i-col>
  123 + <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='22'>
  124 + <div class="view" >
  125 + <label>2</label>
  126 + </div>
  127 + </i-col>
  128 + <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='23'>
  129 + <div class="view" >
  130 + <label>2</label>
  131 + </div>
  132 + </i-col>
  133 + <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='24'>
  134 + <div class="view" >
  135 + <label>2</label>
  136 + </div>
  137 + </i-col>
  138 + <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='25'>
  139 + <div class="view" >
  140 + <label>25-------</label>
  141 + </div>
  142 + </i-col>
  143 + <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='26'>
  144 + <div class="view" >
  145 + <label>26------</label>
  146 + </div>
  147 + </i-col>
  148 + </Row>
  149 + </i-col>
23 </Row> 150 </Row>
24 </div> 151 </div>
25 </template> 152 </template>