49 lines
1.2 KiB
Vue
49 lines
1.2 KiB
Vue
<template>
|
|
<div class="mt-5">
|
|
<div class="tf-container">
|
|
<div class="tf-title d-flex justify-content-between">
|
|
<h3 class="fw_6">{{ title }}</h3>
|
|
<a
|
|
v-if="viewAllText"
|
|
href="javascript:void(0);"
|
|
class="primary_color fw_6"
|
|
@click="$emit('view-all')"
|
|
>
|
|
{{ viewAllText }}
|
|
</a>
|
|
</div>
|
|
<ul class="box-service mt-3">
|
|
<ServiceButton
|
|
v-for="(item, index) in items"
|
|
:key="index"
|
|
:icon="item.icon"
|
|
:title="item.title"
|
|
:bg-color8="item.bgColor8 || false"
|
|
@click="$emit('item-click', item, index)"
|
|
@mouseenter="prefetchPage(item.pagename)"
|
|
@touchstart.passive="prefetchPage(item.pagename)"
|
|
/>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import ServiceButton from './ServiceButton.vue'
|
|
|
|
defineProps({
|
|
title: { type: String, default: '' },
|
|
viewAllText: { type: String, default: '' },
|
|
/**
|
|
* Array of { icon, title, bgColor8? }
|
|
*/
|
|
items: { type: Array, required: true },
|
|
})
|
|
|
|
defineEmits(['view-all', 'item-click'])
|
|
|
|
const prefetchPage = (pagename) => {
|
|
if (pagename && window.$prefetchPage) window.$prefetchPage(pagename);
|
|
};
|
|
</script>
|