Commit 675b0e9861303a5651e15fb791bbb38f948883bb
1 parent
93fad796
九宫格优化
Showing
2 changed files
with
9 additions
and
3 deletions
src/components/palaceGrid/palaceGrid.less
| ... | ... | @@ -12,21 +12,28 @@ |
| 12 | 12 | display: flex; |
| 13 | 13 | align-items: center; |
| 14 | 14 | justify-content: center; |
| 15 | - padding: 5px; | |
| 15 | + padding:0 5px; | |
| 16 | 16 | box-sizing: border-box; |
| 17 | 17 | .img { |
| 18 | 18 | display: block; |
| 19 | 19 | width: 100%; |
| 20 | + height: 340px; | |
| 20 | 21 | } |
| 21 | 22 | |
| 22 | 23 | } |
| 23 | 24 | .two{ |
| 24 | 25 | width: calc(calc(100% / 2)); |
| 25 | 26 | margin-top: 10px; |
| 27 | + .img { | |
| 28 | + height: 340px; | |
| 29 | + } | |
| 26 | 30 | } |
| 27 | 31 | .three{ |
| 28 | 32 | width: calc(calc(100% / 3)); |
| 29 | 33 | margin-top: 10px; |
| 34 | + .img { | |
| 35 | + height: 222px; | |
| 36 | + } | |
| 30 | 37 | } |
| 31 | 38 | } |
| 32 | 39 | } | ... | ... |
src/components/palaceGrid/palaceGrid.vue
| ... | ... | @@ -5,7 +5,7 @@ |
| 5 | 5 | <div class="item" v-if="grids.list.length==1" v-for="(item, index) in grids.list" :key="index" @click="jump(item)"> |
| 6 | 6 | <img v-lazy="item.img" class="img" mode="widthFix" /> |
| 7 | 7 | </div> |
| 8 | - <div v-else :class="['item',grids.list.length%2==0 ? 'two':'three']"> | |
| 8 | + <div v-else :class="['item',grids.list.length==2 || grids.list.length==4? 'two':'three']"> | |
| 9 | 9 | <img v-lazy="item.img" class="img" mode="widthFix" /> |
| 10 | 10 | </div> |
| 11 | 11 | </div> |
| ... | ... | @@ -18,7 +18,6 @@ |
| 18 | 18 | name: "palaceGrid", |
| 19 | 19 | data: function () { |
| 20 | 20 | return { |
| 21 | - | |
| 22 | 21 | } |
| 23 | 22 | }, |
| 24 | 23 | props: ["grids"], | ... | ... |