<template>
  <div class="item bg-white px-30 py-20 h-200 flex flex-col">
    <div class="head flex justify-between">
      <div class="title fs-16 font-700">{{ props.title }}</div>
      <router-link class="c-999 underline fs-14" :to="props.link">查看更多</router-link>
    </div>
    <a-row class="flex-1">
      <a-col :span="6" class="flex items-center justify-center border-r-2 border-r-solid border-r-gray-1">
        <div class="number fs-48 c-primary">{{ props.number }}</div>
        <div class="text fs-16 pt-18 ml-10">{{ props.desc }}</div>
      </a-col>
      <a-col :span="18">
        <slot></slot>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'

const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  number: {
    type: Number,
    default: '',
  },
  desc: {
    type: String,
    default: '',
  },
  link: {
    type: String,
    default: '',
  },
})
</script>

<style scoped lang="less">
// .item {
//   border-radius: 8px;
//   .head {
//     margin-bottom: 20px;
//   }
//   .body {
//     display: flex;
//     justify-content: space-between;
//     .left {
//       .number {

//       }
//       .text {
//         font-size: 14px;
//         color: #999;
//       }
//     }
//   }
// }
</style>

