w-front-end / select_good · Commits

Commit 0a061a9d46d5ffc8fb2f0510fe30065680bb23fd

Authored by zhiyangdu
1 parent cc852a3f

九宫格

Inline Side-by-side
Showing 2 changed files with 9 additions and 14 deletions
src/components/palaceGrid/palaceGrid.less
  View file @0a061a9
@@ -14,6 +14,13 @@ @@ -14,6 +14,13 @@
14 justify-content: center; 14 justify-content: center;
15 padding:0 5px; 15 padding:0 5px;
16 box-sizing: border-box; 16 box-sizing: border-box;
  17 + position: relative;
  18 + .title{
  19 + position: absolute;
  20 + flex: 1;
  21 + font-size:28px;
  22 + color: #fff;
  23 + }
17 .img { 24 .img {
18 display: block; 25 display: block;
19 width: 100%; 26 width: 100%;
src/components/palaceGrid/palaceGrid.vue
  View file @0a061a9
@@ -4,11 +4,12 @@ @@ -4,11 +4,12 @@
4 <div class="img-box" > 4 <div class="img-box" >
5 <div :class="['item',grids.list.length==1?'one':(grids.list.length==2 || grids.list.length==4? 'two':'three')]" v-for="(item, index) in grids.list" :key="index" @click="jump(item)"> 5 <div :class="['item',grids.list.length==1?'one':(grids.list.length==2 || grids.list.length==4? 'two':'three')]" v-for="(item, index) in grids.list" :key="index" @click="jump(item)">
6 <van-image 6 <van-image
  7 + v-if="index<9"
7 class="img" 8 class="img"
8 fit="cover" 9 fit="cover"
9 :src="item.img || item" 10 :src="item.img || item"
10 /> 11 />
11 - <!--<img v-lazy="item.img" mode="widthFix" />--> 12 + <div v-if="grids.list.length>9 && index == 8" class="title">共{{grids.list.length}}张</div>
12 </div> 13 </div>
13 </div> 14 </div>
14 </div> 15 </div>
@@ -20,19 +21,6 @@ @@ -20,19 +21,6 @@
20 name: "palaceGrid", 21 name: "palaceGrid",
21 data: function () { 22 data: function () {
22 return { 23 return {
23 -// grids:{  
24 -// list:[  
25 -// {img:'static/img/banner-02.jpg'},  
26 -// {img:'static/img/banner-02.jpg'},  
27 -// {img:'static/img/banner-02.jpg'},  
28 -// {img:'static/img/banner-02.jpg'},  
29 -// {img:'static/img/banner-02.jpg'},  
30 -// {img:'static/img/banner-02.jpg'},  
31 -// {img:'static/img/banner-02.jpg'},  
32 -// {img:'static/img/banner-02.jpg'},  
33 -// {img:'static/img/banner-02.jpg'}  
34 -// ]  
35 -// }  
36 } 24 }
37 }, 25 },
38 props: ["grids"], 26 props: ["grids"],