<template>
  <div class="h-full flex items-center">
    <div class="px-59px relative">
      <div class="absolute h-120px w-160px z-0 left-40px -top-30px">
        <div
          class="w-69px h-66px bg-[#3662FE] opacity-40 absolute right-0 top-0"
        ></div>
        <div
          class="w-139px h-95px bg-[#3662FE] opacity-40 absolute left-0 bottom-0"
        ></div>
      </div>
      <div class="absolute h-120px w-170px z-0 right-20px -bottom-20px">
        <div
          class="w-139px h-95px bg-[#3662FE] opacity-40 absolute right-0 top-0"
        ></div>
        <div
          class="w-69px h-66px bg-[#3662FE] opacity-40 absolute left-0 bottom-0"
        ></div>
      </div>
      <div class="relative">
        <CardItem
          class="my-24px"
          v-for="(item, i) in list"
          :key="i"
          :data="item"
        ></CardItem>
      </div>
    </div>
  </div>
</template>
<script setup>
import CardItem from './components/card-item.vue'
import bg01 from '@/assets/images/insights_01.jpg'
import bg02 from '@/assets/images/insights_02.jpg'
import bg03 from '@/assets/images/insights_03.jpg'
import bg04 from '@/assets/images/insights_04.jpg'
const list = [
  {
    icon: '法律法规',
    title: '宏观政经',
    des: '“宏观经济政策”（macroeconomic policy）是指国家或政府有意识有计划地运用一定的政策工具，调节控制宏观经济的运行，以达到一定的政策目标。宏观调控是公共财政的基本职责，所谓公共财政',
    path: '/macroeconomics',
    bg: bg01,
  },
  {
    icon: '行业竞争力',
    title: '行业洞察',
    des: '“宏观经济政策”（macroeconomic policy）是指国家或政府有意识有计划地运用一定的政策工具，调节控制宏观经济的运行，以达到一定的政',
    path: '/insights/category',
    bg: bg02,
  },
  {
    icon: '政治',
    title: '法律法规',
    des: '“宏观经济政策”（macroeconomic policy）是指国家或政府有意识有计划地运用一定的政策工具，',
    path: '/insights/legal/index',
    bg: bg03,
  },
  {
    icon: '预测服务',
    title: '商情预测',
    des: '“宏观经济政策”（macroeconomic policy）是指国家或政府有意识有计划地运用一定的政策工具，调节控制宏观经济的运行，以达到一定的政策目标。宏观调控是公共财政的基本职责，所谓公共财政工具，调节控制宏观经济的运行，以达到一定的政策目标。宏观调控是公共财政的基本职责，所谓公共财政',
    path: '',
    bg: bg04,
  },
]
</script>
