83 lines
2.9 KiB
Vue
83 lines
2.9 KiB
Vue
|
<template>
|
|||
|
|
<div class="bg-gradient-to-b from-[#aeceff] to-white min-h-screen relative">
|
|||
|
|
<!-- banner -->
|
|||
|
|
<div
|
|||
|
|
class="w-full flex justify-center"
|
|||
|
|
style="clip-path: ellipse(100% 95% at 50% 0%)"
|
|||
|
|
>
|
|||
|
|
<img
|
|||
|
|
src="@/assets/images/car_banner.png"
|
|||
|
|
alt="查车辆"
|
|||
|
|
class="w-full h-auto"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="p-6 -my-24 z-1000 absolute">
|
|||
|
|
<!-- 功能菜单 -->
|
|||
|
|
<div class="card">
|
|||
|
|
<van-skeleton
|
|||
|
|
:row="5"
|
|||
|
|
:loading="availableMenuItems.length === 0"
|
|||
|
|
>
|
|||
|
|
<div class="grid grid-cols-3 gap-6">
|
|||
|
|
<div
|
|||
|
|
v-for="(item, index) in availableMenuItems"
|
|||
|
|
:key="index"
|
|||
|
|
class="flex flex-col items-center"
|
|||
|
|
@click="toInquire(item.product)"
|
|||
|
|
>
|
|||
|
|
<div class="bg-slate-100 rounded-full p-4">
|
|||
|
|
<img
|
|||
|
|
:src="item.icon"
|
|||
|
|
:alt="item.title"
|
|||
|
|
class="w-10 h-10"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<p class="mt-2 text-sm font-semibold">
|
|||
|
|
{{ item.title }}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</van-skeleton>
|
|||
|
|
</div>
|
|||
|
|
<!-- 详情文本 -->
|
|||
|
|
<div class="card mt-4">
|
|||
|
|
<h2 class="text-lg font-bold text-blue-500 mb-4">查车辆服务</h2>
|
|||
|
|
<p class="text-gray-700 leading-6">
|
|||
|
|
本平台提供全方位查车辆服务，助您全面防范风险。功能包括：
|
|||
|
|
</p>
|
|||
|
|
<van-skeleton
|
|||
|
|
:row="3"
|
|||
|
|
:loading="availableMenuItems.length === 0"
|
|||
|
|
>
|
|||
|
|
<ul
|
|||
|
|
class="list-disc list-inside mt-4 space-y-2 text-gray-600"
|
|||
|
|
>
|
|||
|
|
<li
|
|||
|
|
v-for="(item, index) in availableMenuItems"
|
|||
|
|
:key="index"
|
|||
|
|
>
|
|||
|
|
<strong>{{ item.title }}：</strong>
|
|||
|
|
{{ item.description }}
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</van-skeleton>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { onMounted } from "vue";
|
|||
|
|
const router = useRouter();
|
|||
|
|
|
|||
|
|
const { fetchRenderData, availableMenuItems } = useMenuItems();
|
|||
|
|
const toInquire = (product) => {
|
|||
|
|
router.push("/inquire/" + product);
|
|||
|
|
};
|
|||
|
|
onMounted(() => {
|
|||
|
|
fetchRenderData("car");
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped></style>
|