166 lines
6.5 KiB
Vue
166 lines
6.5 KiB
Vue
<style>
|
|
.view {
|
|
height: 100px;
|
|
width: 100px;
|
|
background: yellow;
|
|
}
|
|
</style>
|
|
<template>
|
|
<div>
|
|
<Row type='flex' justify='center'>
|
|
<i-col span='21' class="offset-header">
|
|
<Row type='flex' :gutter='16' justify='space-between'>
|
|
<i-col :order='25'>
|
|
<div class="view">
|
|
<label>245</label>
|
|
</div>
|
|
</i-col>
|
|
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='1'>
|
|
<div class="view" >
|
|
<label>1</label>
|
|
</div>
|
|
</i-col>
|
|
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='2'>
|
|
<div class="view" >
|
|
<label>2</label>
|
|
</div>
|
|
</i-col>
|
|
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='3'>
|
|
<div class="view" >
|
|
<label>3</label>
|
|
</div>
|
|
</i-col>
|
|
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='4'>
|
|
<div class="view" >
|
|
<label>4</label>
|
|
</div>
|
|
</i-col>
|
|
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='5'>
|
|
<div class="view" >
|
|
<label>5</label>
|
|
</div>
|
|
</i-col>
|
|
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='6'>
|
|
<div class="view" >
|
|
<label>6</label>
|
|
</div>
|
|
</i-col>
|
|
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='7'>
|
|
<div class="view" >
|
|
<label>2</label>
|
|
</div>
|
|
</i-col>
|
|
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='8'>
|
|
<div class="view" >
|
|
<label>2</label>
|
|
</div>
|
|
</i-col>
|
|
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='9'>
|
|
<div class="view" >
|
|
<label>2</label>
|
|
</div>
|
|
</i-col>
|
|
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='10'>
|
|
<div class="view" >
|
|
<label>2</label>
|
|
</div>
|
|
</i-col>
|
|
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='11'>
|
|
<div class="view" >
|
|
<label>2</label>
|
|
</div>
|
|
</i-col>
|
|
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='12'>
|
|
<div class="view" >
|
|
<label>2</label>
|
|
</div>
|
|
</i-col>
|
|
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='13'>
|
|
<div class="view" >
|
|
<label>12</label>
|
|
</div>
|
|
</i-col>
|
|
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='14'>
|
|
<div class="view" >
|
|
<label>2</label>
|
|
</div>
|
|
</i-col>
|
|
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='15'>
|
|
<div class="view" >
|
|
<label>2</label>
|
|
</div>
|
|
</i-col>
|
|
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='16'>
|
|
<div class="view" >
|
|
<label>2</label>
|
|
</div>
|
|
</i-col>
|
|
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='17'>
|
|
<div class="view" >
|
|
<label>2</label>
|
|
</div>
|
|
</i-col>
|
|
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='18'>
|
|
<div class="view" >
|
|
<label>2</label>
|
|
</div>
|
|
</i-col>
|
|
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='19'>
|
|
<div class="view" >
|
|
<label>2</label>
|
|
</div>
|
|
</i-col>
|
|
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='20'>
|
|
<div class="view" >
|
|
<label>2</label>
|
|
</div>
|
|
</i-col>
|
|
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='21'>
|
|
<div class="view" >
|
|
<label>2</label>
|
|
</div>
|
|
</i-col>
|
|
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='22'>
|
|
<div class="view" >
|
|
<label>2</label>
|
|
</div>
|
|
</i-col>
|
|
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='23'>
|
|
<div class="view" >
|
|
<label>2</label>
|
|
</div>
|
|
</i-col>
|
|
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='24'>
|
|
<div class="view" >
|
|
<label>2</label>
|
|
</div>
|
|
</i-col>
|
|
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='25'>
|
|
<div class="view" >
|
|
<label>25-------</label>
|
|
</div>
|
|
</i-col>
|
|
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='26'>
|
|
<div class="view" >
|
|
<label>26------</label>
|
|
</div>
|
|
</i-col>
|
|
</Row>
|
|
</i-col>
|
|
</Row>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data () {
|
|
return {
|
|
n: 2
|
|
}
|
|
},
|
|
methods: {
|
|
add () {
|
|
this.n++;
|
|
}
|
|
}
|
|
}
|
|
</script>
|