<template>
|
<div class="weui-grids" :class="type">
|
<a href="javascript:;" class="weui-grid js_grid" :class="'grid' + grids.length"
|
v-for="item in grids" :key="item.type" v-if="item.imgurl" @click="jumpmenu(item)">
|
<span v-if="item.badge" class="weui-badge badge-position">{{item.badge}}</span>
|
<div class="weui-grid__icon">
|
<img :src="item.imgurl" alt="">
|
</div>
|
<p class="weui-grid__label" v-text="item.name"></p>
|
</a>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'navgrids',
|
props: {
|
grids: {
|
type: Array,
|
required: true
|
},
|
type: {
|
type: String,
|
default: function () {
|
return ''
|
}
|
}
|
},
|
methods: {
|
jumpmenu (item) {
|
if (item.view) {
|
this.$emit('navgridjump', {
|
view: item.view,
|
value: item.type ? item.type : null
|
})
|
}
|
}
|
},
|
mounted: function () {
|
let percent = 100 / this.grids.length
|
percent = Math.floor(percent * 100) / 100 + '%'
|
$('.weui-grid.grid' + this.grids.length).css('width', percent)
|
}
|
}
|
</script>
|
|
<style scoped>
|
.weui-grid {
|
width: 25%;
|
}
|
.weui-grid:active{
|
background-color: #ffffff;
|
}
|
.weui-grid:active p {
|
color: rgb(193, 250, 108);
|
}
|
.weui-grid:before {
|
border: none;
|
}
|
.weui-grid:after {
|
border: none;
|
}
|
.weui-grids:before {
|
border: none;
|
}
|
.weui-grids:after {
|
border: none;
|
}
|
.weui-grids .weui-grid .weui-grid__icon {
|
width: 24px;
|
height: 24px;
|
}
|
.weui-grids .weui-grid .weui-grid__label {
|
font-size: 13px;
|
}
|
.weui-grids.small .weui-grid {
|
padding: 15px 0px;
|
}
|
.weui-grids.large .weui-grid {
|
padding: 25px 0px;
|
}
|
.badge-position {
|
position: absolute;
|
top: 10%;
|
right: 20%;
|
}
|
</style>
|
