1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<template>
<view>
<view v-if="style_setting.rank === 1" class="rank rank1" :style="[{'background-image': `url(${style_setting.bg_url})`}, {'background-color': style_setting.bg_color},{'border-bottom-left-radius':style_setting.radius_bottom_left*2+'rpx', 'border-bottom-right-radius':style_setting.radius_bottom_right*2+'rpx', 'border-top-left-radius':style_setting.radius_top_left*2+'rpx', 'border-top-right-radius':style_setting.radius_top_right*2+'rpx'}, style_setting.bg_style === 1 ? {'width':'702rpx','margin':'0 auto'}: null]">
<view class="menuItem" v-for="(item, key) in menuArray" :key="key" :style="{'width': width,height: style_setting.menuHeight*2+'rpx'}" @click="$jump(item.img_href)">
<image :src="item.img_url" class="icon_img"></image>
<text v-if="style_setting.font_show" class="title" :style="{'color': style_setting.font_color}">{{item.title}}</text>
</view>
</view>
<swiper v-else indicator-dots="true" :style="[{'height': style_setting.rank*200+10+'rpx'}, style_setting.bg_style === 1 ? {'width':'702rpx','margin':'0 auto'}: null, {'background-image':`url(${style_setting.bg_url})`}, {'background-color': style_setting.bg_color}, {'border-bottom-left-radius':style_setting.radius_bottom_left*2+'rpx', 'border-bottom-right-radius':style_setting.radius_bottom_right*2+'rpx', 'border-top-left-radius':style_setting.radius_top_left*2+'rpx', 'border-top-right-radius':style_setting.radius_top_right*2+'rpx'}]" class="swiper_view">
<swiper-item v-for="(item, key) in menuArray" :key="key" class="rank rank1">
<view class="menuItem" v-for="(val, index) in item" :key="index" :style="{'width': width, height: style_setting.menuHeight*2+'rpx'}" @click="$jump(val.img_href)">
<image :src="val.img_url" class="icon_img"></image>
<text v-if="style_setting.font_show" class="title" :style="{'color': style_setting.font_color}">{{val.title}}</text>
</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
props: {
wrapper_props: {
type: Object
},
},
data() {
return {
width: '',
menuArray: this.wrapper_props.menuList,
style_setting: this.wrapper_props.style_setting
}
},
mounted() {
const { rank, arrange } = this.style_setting;
const width = Math.floor(100/arrange);
this.width = width + '%';
if(rank != 1) {
const rate = rank * arrange;
let array = [];
for (var i = 0, j = this.menuArray.length; i < j; i += rate) {
array.push(this.menuArray.slice(i, i + rate));
}
this.menuArray = array;
}
},
methods: {
}
}
</script>
<style lang="less" scoped>
.swiper_view {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.rank {
background-size: 100% 100%;
background-repeat: no-repeat;
margin: 0 auto;
}
.rank1 {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.rank1:after {
flex: auto;
content: '';
}
.menuItem {
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
}
.icon_img {
display: block;
width: 96rpx;
height: 96rpx;
margin: 0 auto 20rpx;
}
.title {
font-size: 24rpx;
}
</style>