178 lines
6.1 KiB
Vue
178 lines
6.1 KiB
Vue
<script setup>
|
||
const router = useRouter()
|
||
import indexIcon1 from '@/assets/images/index_icon_1.png'
|
||
import indexIcon2 from '@/assets/images/index_icon_2.png'
|
||
import indexIcon3 from '@/assets/images/index_icon_3.png'
|
||
import indexIcon4 from '@/assets/images/index_icon_4.png'
|
||
import indexIcon5 from '@/assets/images/index_icon_5.png'
|
||
import indexIcon6 from '@/assets/images/index_icon_6.png'
|
||
import indexIcon7 from '@/assets/images/index_icon_7.png'
|
||
function toInquire(name) {
|
||
router.push(`/inquire/${name}`)
|
||
}
|
||
const toPromote = () => {
|
||
router.push("/promote")
|
||
}
|
||
const services = ref([
|
||
{
|
||
title: '个人风险',
|
||
name: 'riskassessment',
|
||
subtitle: '一查全知',
|
||
bg: indexIcon2,
|
||
bgColor: 'bg-indigo-400',
|
||
position: 'rounded-tl-[35px] rounded-bl-[35px] rounded-tr-lg rounded-br-lg'
|
||
},
|
||
{
|
||
title: '婚恋风险',
|
||
name: 'marriage',
|
||
subtitle: '查婚姻状态让爱无忧',
|
||
bg: indexIcon1,
|
||
bgColor: ' bg-pink-400 ',
|
||
position: 'rounded-tr-[35px] rounded-br-[35px] rounded-tl-lg rounded-bl-lg'
|
||
},
|
||
{
|
||
title: '家政服务',
|
||
name: 'homeservice',
|
||
subtitle: '用人有保障',
|
||
bg: indexIcon3,
|
||
bgColor: ' bg-teal-500 ',
|
||
position: 'rounded-tl-[35px] rounded-bl-[35px] rounded-tr-lg rounded-br-lg'
|
||
},
|
||
{
|
||
title: '租赁风险',
|
||
name: 'rentalinfo',
|
||
subtitle: '一查明了',
|
||
bg: indexIcon4,
|
||
bgColor: ' bg-sky-500 ',
|
||
position: 'rounded-tl-[35px] rounded-bl-[35px] rounded-tr-lg rounded-br-lg'
|
||
},
|
||
{
|
||
title: '企业报告',
|
||
name: 'companyinfo',
|
||
subtitle: '合作更安心',
|
||
bg: indexIcon5,
|
||
bgColor: ' bg-blue-400 ',
|
||
position: 'rounded-tr-[35px] rounded-br-[35px] rounded-tl-lg rounded-bl-lg'
|
||
},
|
||
{
|
||
title: '人事背调',
|
||
name: 'backgroundcheck',
|
||
subtitle: '招聘有保障，选人更放心',
|
||
bg: indexIcon6,
|
||
bgColor: ' bg-orange-400 ',
|
||
position: 'rounded-tl-[35px] rounded-bl-[35px] rounded-tr-lg rounded-br-lg'
|
||
},
|
||
{
|
||
title: '贷前背调',
|
||
name: 'preloanbackgroundcheck',
|
||
subtitle: '招聘有保障，选人更放心',
|
||
bg: indexIcon7,
|
||
bgColor: ' bg-orange-400 ',
|
||
position: 'rounded-tr-[35px] rounded-br-[35px] rounded-tl-lg rounded-bl-lg'
|
||
},
|
||
])
|
||
|
||
const noticeText = ref([])
|
||
|
||
function toHistory() {
|
||
router.push(`/historyQuery`);
|
||
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="box-border min-h-screen from-blue-100 to-white bg-gradient-to-b">
|
||
<div class="relative p-4">
|
||
<img class="h-full w-full rounded-xl overflow-hidden" src="@/assets/images/banner.png" />
|
||
</div>
|
||
<div>
|
||
<div class="flex items-center justify-around gap-4 px-6 pb-1">
|
||
<div class="" @click="toPromote">
|
||
<div
|
||
class="h-16 w-16 p-2 bg-gradient-to-b from-white to-blue-100/10 rounded-full shadow-lg flex items-center justify-center">
|
||
<img src="@/assets/images/icon_tg.svg" alt="直推报告" class="w-12 h-12" />
|
||
</div>
|
||
<div class="text-center mt-1 font-bold">直推报告</div>
|
||
</div>
|
||
<div class="">
|
||
<div
|
||
class="h-16 w-16 p-2 bg-gradient-to-b from-white to-blue-100/10 rounded-full shadow-lg flex items-center justify-center">
|
||
<img src="@/assets/images/icon_xj.svg" alt="邀请下级" class="w-12 h-12" />
|
||
</div>
|
||
<div class="text-center mt-1 font-bold">邀请下级</div>
|
||
</div>
|
||
<div class="">
|
||
<div
|
||
class="h-16 w-16 p-2 bg-gradient-to-b from-white to-blue-100/10 rounded-full shadow-lg flex items-center justify-center">
|
||
<img src="@/assets/images/icon_xj.svg" alt="邀请下级" class="w-12 h-12" />
|
||
</div>
|
||
<div class="text-center mt-1 font-bold">邀请下级</div>
|
||
</div>
|
||
<div class="">
|
||
<div
|
||
class="h-16 w-16 p-2 bg-gradient-to-b from-white to-blue-100/10 rounded-full shadow-lg flex items-center justify-center">
|
||
<img src="@/assets/images/icon_xj.svg" alt="邀请下级" class="w-12 h-12" />
|
||
</div>
|
||
<div class="text-center mt-1 font-bold">邀请下级</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="relative p-4 pb-4 pt-2">
|
||
|
||
<div class="grid grid-cols-2 gap-3">
|
||
<template v-for="(service, index) in services" :key="index">
|
||
<div class="relative flex flex-col px-4 py-2 shadow-lg min-h-24" :class="[
|
||
service.position,
|
||
service.bgColor,
|
||
service.title === '婚恋风险' ? 'row-span-2' : '',
|
||
]" :style="`background: url(${service.bg}) no-repeat; background-size: cover; background-position: center;`"
|
||
@click="toInquire(service.name)">
|
||
<div class="min-h-18 flex flex-col items-start px-1">
|
||
<div class="mt-1 max-w-max text-left text-gray-600 font-bold">
|
||
{{ service.title }}
|
||
</div>
|
||
<div class="max-w-max text-left text-xs text-gray-600">
|
||
<rich-text :nodes="service.subtitle" />
|
||
</div>
|
||
<div class="mt-2 rounded-2xl px-2 text-xs text-white" :class="[service.bgColor]">
|
||
GO >
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
<div class="mt-4 box-border h-14 w-full flex items-center rounded-xl bg-white px-4 text-gray-700 shadow-xl"
|
||
@click="toHistory">
|
||
<img class="mr-4 h-10 w-10" src="@/assets/images/bg_icon.png" mode="widthFix" />
|
||
<div class="">
|
||
<div class="font-bold">
|
||
我的历史查询记录
|
||
</div>
|
||
<div class="text-xs">
|
||
查询记录有效期为30天
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="mb-16 mt-6 h-12 w-full flex items-center justify-center rounded-3xl from-blue-500 to-sky-400 bg-gradient-to-b text-center text-lg text-white line-height-12 shadow-xl">
|
||
<div>天远数据邀您共赢，共享数据新价值！</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.clip-left {
|
||
clip-path: polygon(0 0, 0 100%, 90% 100%, 0 100%);
|
||
}
|
||
|
||
.clip-right {
|
||
clip-path: polygon(0 0, 0 0, 90% 100%, 0 0);
|
||
}
|
||
</style>
|
||
|
||
<route type="home" lang="json">{
|
||
"layout": "home"
|
||
}</route>
|