Commit 93fad796bddb1d41ff8382d2754a7eabbe595c9d
1 parent
b0d8445b
图片展示九宫格
Showing
2 changed files
with
35 additions
and
15 deletions
src/components/palaceGrid/palaceGrid.less
| ... | ... | @@ -3,16 +3,31 @@ |
| 3 | 3 | .palace-grid-box { |
| 4 | 4 | .box { |
| 5 | 5 | .img-box { |
| 6 | - display: flex; | |
| 7 | - justify-content: center; | |
| 8 | - align-items: center; | |
| 9 | - width: 100%; | |
| 10 | - height: 340px; | |
| 11 | - overflow: hidden; | |
| 12 | - .img { | |
| 13 | - display: block; | |
| 14 | - width: 100%; | |
| 15 | - } | |
| 6 | + width: 100%; | |
| 7 | + display: flex; | |
| 8 | + flex-wrap: wrap; | |
| 9 | + //justify-content: space-around; | |
| 10 | + list-style: none; | |
| 11 | + .item{ | |
| 12 | + display: flex; | |
| 13 | + align-items: center; | |
| 14 | + justify-content: center; | |
| 15 | + padding: 5px; | |
| 16 | + box-sizing: border-box; | |
| 17 | + .img { | |
| 18 | + display: block; | |
| 19 | + width: 100%; | |
| 20 | + } | |
| 21 | + | |
| 22 | + } | |
| 23 | + .two{ | |
| 24 | + width: calc(calc(100% / 2)); | |
| 25 | + margin-top: 10px; | |
| 26 | + } | |
| 27 | + .three{ | |
| 28 | + width: calc(calc(100% / 3)); | |
| 29 | + margin-top: 10px; | |
| 30 | + } | |
| 16 | 31 | } |
| 17 | 32 | } |
| 18 | 33 | } | ... | ... |
src/components/palaceGrid/palaceGrid.vue
| 1 | 1 | <template> |
| 2 | 2 | <div class="palace-grid-box" v-if="grids && grids.list && grids.list.length"> |
| 3 | 3 | <div class="box"> |
| 4 | - <div class="img-box" v-for="(item, index) in grids.list" :key="index" @click="jump(item)"> | |
| 5 | - <img v-lazy="item.img" class="img" mode="widthFix" /> | |
| 4 | + <div class="img-box" > | |
| 5 | + <div class="item" v-if="grids.list.length==1" v-for="(item, index) in grids.list" :key="index" @click="jump(item)"> | |
| 6 | + <img v-lazy="item.img" class="img" mode="widthFix" /> | |
| 7 | + </div> | |
| 8 | + <div v-else :class="['item',grids.list.length%2==0 ? 'two':'three']"> | |
| 9 | + <img v-lazy="item.img" class="img" mode="widthFix" /> | |
| 10 | + </div> | |
| 6 | 11 | </div> |
| 7 | 12 | </div> |
| 8 | 13 | </div> |
| ... | ... | @@ -13,12 +18,12 @@ |
| 13 | 18 | name: "palaceGrid", |
| 14 | 19 | data: function () { |
| 15 | 20 | return { |
| 16 | - | |
| 21 | + | |
| 17 | 22 | } |
| 18 | 23 | }, |
| 19 | 24 | props: ["grids"], |
| 20 | 25 | methods: { |
| 21 | - | |
| 26 | + | |
| 22 | 27 | /** |
| 23 | 28 | * 点击跳转事件绑定 |
| 24 | 29 | */ |
| ... | ... | @@ -32,4 +37,4 @@ |
| 32 | 37 | <!-- Add "scoped" attribute to limit CSS to this component only --> |
| 33 | 38 | <style rel="stylesheet/less" lang="less"> |
| 34 | 39 | @import './palaceGrid'; |
| 35 | -</style> | |
| 36 | 40 | \ No newline at end of file |
| 41 | +</style> | ... | ... |