w-front-end / select_good · Commits

Commit 5a42e45f1fdb4a7f8b854e34762ea69a848099fd

Authored by zhiyangdu
1 parent 7b5fbd13

九宫格样式优化

Inline Side-by-side
Showing 2 changed files with 22 additions and 6 deletions
src/components/palaceGrid/palaceGrid.vue
  View file @5a42e45
... ... @@ -2,11 +2,13 @@
2 2 <div class="palace-grid-box" v-if="grids && grids.list && grids.list.length">
3 3 <div class="box">
4 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 || grids.list.length==4? 'two':'three']" v-for="(item, index) in grids.list" :key="index" @click="jump(item)">
9   - <img v-lazy="item.img" class="img" mode="widthFix" />
  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
  7 + class="img"
  8 + fit="cover"
  9 + :src="item.img"
  10 + />
  11 + <!--<img v-lazy="item.img" mode="widthFix" />-->
10 12 </div>
11 13 </div>
12 14 </div>
... ... @@ -18,6 +20,19 @@
18 20 name: "palaceGrid",
19 21 data: function () {
20 22 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 +// }
21 36 }
22 37 },
23 38 props: ["grids"],
... ...
src/main.js
  View file @5a42e45
... ... @@ -6,7 +6,7 @@ import VueHead from &quot;vue-head&quot;;
6 6 import sha1 from "sha1";
7 7 import 'mint-ui/lib/style.css';
8 8 import { Toast, Indicator,InfiniteScroll } from "mint-ui";
9   -import { Rate, Popup, Lazyload, Search, PullRefresh, Picker } from "vant";
  9 +import { Rate, Popup, Lazyload, Search, PullRefresh, Picker, Image} from "vant";
10 10 import App from "./App";
11 11 import IdCard from './common/IdCard';
12 12 import VueBus from 'vue-bus';
... ... @@ -18,6 +18,7 @@ Vue.use(Rate);
18 18 Vue.use(Popup);
19 19 Vue.use(PullRefresh);
20 20 Vue.use(Picker);
  21 +Vue.use(Image);
21 22 Vue.use(Lazyload, {
22 23 preload: 90,
23 24 loading: "static/img/x.jpg",
... ...