<template>
  <view class="mt-[30rpx]">
    <RoundedBorder title="艺体专业">
      <template>
        <view class="rounded-[40rpx] bg-white px-[24rpx] pt-[26rpx] pb-[22rpx]">
          <view class="text-[26rpx] text-[#3D3D3D]">
            深泉拥有独立体系的体育和艺术专业团队，2024年复读部郭欣悦同学，成功考入北京大学。2025年艺术专业总体过线率
            <text class="text-[#FF0000] text-[28rpx]">92.9%</text>
            ，体育专业考试90分以上87人。
          </view>
          <view class="grid grid-cols-2 gap-[16rpx] h-[170rpx] mt-[16rpx]">
            <image
              :src="item"
              mode="scaleToFill"
              v-for="(item, index) in publicityImg"
              :key="index"
              @click="previewImg(publicityImg, index)"
            />
          </view>
        </view>
      </template>
    </RoundedBorder>
  </view>
</template>

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

const publicityImg = [
  'https://api-static-zhiy.oss-cn-shanghai.aliyuncs.com/images/ad-banner/yt1.png',
  'https://api-static-zhiy.oss-cn-shanghai.aliyuncs.com/images/ad-banner/yt2.png',
]
const previewImg = (imgs: string[], index: number) => {
  uni.previewImage({
    urls: imgs,
    current: index,
  })
}
</script>

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