<template>
    <div class="bg-gradient-to-b from-blue-100 to-white min-h-screen p-6">
        <!-- 顶部标题 -->
        <div class="text-center my-4">
            <h1 class="text-2xl font-bold text-blue-500">真实车况查询</h1>
            <p class="text-lg text-orange-400">二手车知根知底</p>
        </div>

        <!-- 车图 -->
        <div class="flex justify-center my-4">
            <!-- <img src="/static/car-image.png" alt="Car" class="w-3/4 h-auto"> -->
        </div>

        <!-- 功能菜单 -->
        <div class="grid grid-cols-3 gap-6 my-8">
            <div v-for="(item, index) in menuItems" :key="index" class="flex flex-col items-center">
                <!-- <img :src="item.icon" :alt="item.title" class="w-14 h-14"> -->
                <p :class="item.textColor + ' mt-2 text-sm'">{{ item.title }}</p>
            </div>
        </div>

        <!-- 详情文本 -->
        <div class="bg-white shadow-md p-6 rounded-lg">
            <h2 class="text-lg font-bold text-blue-500 mb-4">车辆信息查询服务</h2>
            <p class="text-gray-700 leading-6">
                本平台提供全方位车辆信息查询服务，助您全面掌握车况。功能包括：
            </p>
            <ul class="list-disc list-inside mt-4 space-y-2 text-gray-600">
                <li>车辆维修记录：查询车辆历次维修保养的详细记录。</li>
                <li>出险信息：查看车辆过往的出险信息，助您评估车辆状况。</li>
                <li>上险信息：获取车辆的保险状态，确保车辆保险有效。</li>
                <li>车辆信息查询：通过车架号获取车辆的详细信息，包括排量、配置等。</li>
                <li>各下车主数统计：列出各下的所有持有车辆数量及统计。</li>
                <li>人车关系验证：校对车辆与车主之间的详细关系。</li>
                <li>车辆估值：提供车辆市场估值，帮助您了解车辆的当前市场价值。</li>
            </ul>
        </div>
    </div>
</template>

<script setup>
const menuItems = [
    { title: "出险信息", icon: "/static/icon-accident.png", textColor: "text-red-500" },
    { title: "维修记录", icon: "/static/icon-maintain.png", textColor: "text-blue-500" },
];
</script>

<style scoped>
/* 需要添加任何自定义样式时可在这里补充 */
</style>