tydata-webview/src/views/index.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>