<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const production = ref([
  {
    title: '家庭教育',
    color: 'rgb(187 100 159 / 10%)',
    img: '/images/personal/jtjy.png',
    name: 'jsd_personal_wdkc_jtjy',
  },
  {
    title: '特色课堂',
    color: 'rgb(210 115 9 / 10%)',
    img: '/images/personal/tskt.png',
    name: 'jsd_personal_wdkc_tskc',
  },
  {
    title: '名师资源',
    color: 'rgb(18 89 161 / 10%)',
    img: '/images/personal/mszy.png',
    name: 'jsd_personal_wdkc_mszy',
  },
  {
    title: '直播课程',
    color: 'rgb(240 56 92 / 10%)',
    img: '/images/personal/zbkc.png',
    name: 'jsd_personal_wdkc_zbkc',
  },
  {
    title: '作业辅导',
    color: 'rgb(0 149 91 / 10%)',
    img: '/images/personal/zyfd.png',
    name: 'jsd_personal_wdkc_zyfd',
  },
])

const linkTo = (name) => {
  router.push({ name })
}
</script>

<template>
  <div class="main bg-white-grey rounded-10px mt-4 py-8 px-12 relative grid grid-cols-3 gap-x-6 gap-y-12" style="font-size: 18px;">
    <div v-for="(item, index) in production" :key="index" class="rounded-10px h-110px flex items-center space-x-8 cursor-pointer" :style="{ background: item.color }" @click="linkTo(item.name)">
      <img class="ml-40px w-48px" :src="item.img" alt="">
      <div>{{ item.title }}</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.bg-white-grey{
  background: #fcfeff;
}

// img {
//   width: 48px;
// }
</style>
