volunteer-4/src/pages-sub/home/adPoster/components/Schools.vue

65 lines
2.0 KiB
Vue

<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">
<view class="w-[120rpx] h-[120rpx]">
<image :src="item.badge" mode="scaleToFill" class="w-[120rpx] h-[120rpx]" />
</view>
<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>