78 lines
1.4 KiB
Vue
78 lines
1.4 KiB
Vue
<template>
|
|
<div class="menu-content">
|
|
<Title :title="title" />
|
|
<div class="menu-wrapper">
|
|
<div class="menu-item" v-for="(item, index) in menuList" :key="index" v-show="item.isShowItem" @click="clickItem(item)">
|
|
<img :src="item.url" :alt="item.name" />
|
|
<span>{{ item.name }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
menuList: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
},
|
|
name: 'homeMenu',
|
|
data() {
|
|
return {
|
|
showTitle: true
|
|
}
|
|
},
|
|
methods: {
|
|
clickItem(val) {
|
|
console.log('clickItem', val)
|
|
// 跳转页面 val.path
|
|
if (val.path) {
|
|
uni.navigateTo({
|
|
url: val.path
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.menu-content {
|
|
margin-top: 20px;
|
|
margin-bottom: 28px;
|
|
width: 100%;
|
|
|
|
.menu-wrapper {
|
|
padding-left: 16px;
|
|
display: flex;
|
|
justify-content: start;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
.menu-item {
|
|
width: 25%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
padding: 10px 0;
|
|
img {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
span {
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
color: #0f274b;
|
|
margin-top: 6px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|