<template>
  <view class="mt-[30rpx]">
    <RoundedBorder title="名校录取">
      <template>
        <view
          class="rounded-[40rpx] bg-white px-[36rpx] pt-[38rpx] pb-[20rpx] grid grid-cols-4 gap-x-[0rpx] gap-y-[28rpx]"
        >
          <view class="flex flex-col items-center" v-for="(item, index) in schools" :key="index">
            <image :src="item.badge" mode="scaleToFill" class="w-[120rpx] h-[120rpx]" />
            <span class="text-[26rpx] text-[#333]">{{ item.name }}</span>
          </view>

          <view class="col-span-full text-[26rpx] text-[#999999] text-center">
            更多大学等你来选...
          </view>
        </view>
      </template>
    </RoundedBorder>
  </view>
</template>

<script lang="ts" setup>
import RoundedBorder from './RoundedBorder.vue'

const schools = [
  {
    name: '北京大学',
    badge: 'https://api-static-zhiy.oss-cn-shanghai.aliyuncs.com/images/ad-banner/beijingdaxue.png',
  },
  {
    name: '北京体育大学',
    badge: 'https://api-static-zhiy.oss-cn-shanghai.aliyuncs.com/images/ad-banner/beijingtiyu.png',
  },
  {
    name: '复旦大学',
    badge: 'https://api-static-zhiy.oss-cn-shanghai.aliyuncs.com/images/ad-banner/fudan.png',
  },
  {
    name: '延安大学',
    badge: 'https://api-static-zhiy.oss-cn-shanghai.aliyuncs.com/images/ad-banner/yanandaxue.png',
  },
  {
    name: '郑州大学',
    badge: 'https://api-static-zhiy.oss-cn-shanghai.aliyuncs.com/images/ad-banner/zhengzhou.png',
  },
  {
    name: '山东大学',
    badge: 'https://api-static-zhiy.oss-cn-shanghai.aliyuncs.com/images/ad-banner/shandong.png',
  },
  {
    name: '四川大学',
    badge: 'https://api-static-zhiy.oss-cn-shanghai.aliyuncs.com/images/ad-banner/sichuan.png',
  },
  {
    name: '海洋大学',
    badge:
      'https://api-static-zhiy.oss-cn-shanghai.aliyuncs.com/images/ad-banner/zhongguohaiyang.png',
  },
]
</script>

<style lang="scss" scoped></style>
