<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/fxpg_banner.png" alt="风险评估" class="w-full h-auto">
        </div>
        <div class="p-6 -my-24 z-1000 absolute">
            <!-- 功能菜单 -->
            <div class="card">
                <div class="grid grid-cols-3 gap-6">
                    <div v-for="(item, index) in menuItems" :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>
            </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>
                <ul class="list-disc list-inside mt-4 space-y-2 text-gray-600">
                    <li>
                        <strong>个人不良记录查询：</strong> 通过查询个人的不良记录，评估其风险等级（低、中、高风险）。帮助您识别潜在的信用和法律风险，确保合作方的合法合规。
                    </li>
                    <li>
                        <strong>股东人企关系查询：</strong> 通过个人关联的企业，了解其可能涉及的风险，帮助您判断该个人的风险水平，特别是与高风险企业有联系的个人。
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script setup>
import grblIcon from '@/assets/images/grbl_icon.svg';
import gdrqgxIcon from '@/assets/images/gdrqgx_icon.svg';
const router = useRouter()
const menuItems = [
    { title: "个人不良", icon: grblIcon, product: "toc_PersonalBadRecord" },
    { title: "股东人企关系", icon: gdrqgxIcon, product: "toc_ShareholderBusinessRelation" },
];

const toInquire = (product) => {
    router.push('/inquire/' + product)
}

</script>

<style scoped></style>