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,16 +3,31 @@ | ||
| 3 | .palace-grid-box { | 3 | .palace-grid-box { |
| 4 | .box { | 4 | .box { |
| 5 | .img-box { | 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 | <template> | 1 | <template> |
| 2 | <div class="palace-grid-box" v-if="grids && grids.list && grids.list.length"> | 2 | <div class="palace-grid-box" v-if="grids && grids.list && grids.list.length"> |
| 3 | <div class="box"> | 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 | </div> | 11 | </div> |
| 7 | </div> | 12 | </div> |
| 8 | </div> | 13 | </div> |
| @@ -13,12 +18,12 @@ | @@ -13,12 +18,12 @@ | ||
| 13 | name: "palaceGrid", | 18 | name: "palaceGrid", |
| 14 | data: function () { | 19 | data: function () { |
| 15 | return { | 20 | return { |
| 16 | - | 21 | + |
| 17 | } | 22 | } |
| 18 | }, | 23 | }, |
| 19 | props: ["grids"], | 24 | props: ["grids"], |
| 20 | methods: { | 25 | methods: { |
| 21 | - | 26 | + |
| 22 | /** | 27 | /** |
| 23 | * 点击跳转事件绑定 | 28 | * 点击跳转事件绑定 |
| 24 | */ | 29 | */ |
| @@ -32,4 +37,4 @@ | @@ -32,4 +37,4 @@ | ||
| 32 | <!-- Add "scoped" attribute to limit CSS to this component only --> | 37 | <!-- Add "scoped" attribute to limit CSS to this component only --> |
| 33 | <style rel="stylesheet/less" lang="less"> | 38 | <style rel="stylesheet/less" lang="less"> |
| 34 | @import './palaceGrid'; | 39 | @import './palaceGrid'; |
| 35 | -</style> | ||
| 36 | \ No newline at end of file | 40 | \ No newline at end of file |
| 41 | +</style> |