51 lines
870 B
Vue
51 lines
870 B
Vue
<script setup>
|
|
defineProps({
|
|
menus: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(["select"]);
|
|
</script>
|
|
|
|
<template>
|
|
<view class="quick-menu">
|
|
<view
|
|
v-for="item in menus"
|
|
:key="item.key"
|
|
class="quick-menu__item"
|
|
@click="emit('select', item)"
|
|
>
|
|
<image class="quick-menu__icon" :src="item.icon" mode="aspectFit" />
|
|
<text>{{ item.label }}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.quick-menu {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
padding: 26rpx 46rpx 30rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.quick-menu__item {
|
|
width: 142rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
color: #fae6bc;
|
|
font-size: 24rpx;
|
|
line-height: 34rpx;
|
|
}
|
|
|
|
.quick-menu__icon {
|
|
width: 116rpx;
|
|
height: 116rpx;
|
|
}
|
|
</style>
|