<template>
  <a-card class="rowGutter">
    <template #title>
      <span style="font-size: 24px;font-weight: bold;">精彩公开课</span>
    </template>
    <a-row :gutter="[16,16]">
      <a-col v-for="(item,index) in 4" :key="index" :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 6 }">
        <div style="border-radius: 25px;background: #cccccc8c;width: 70%;margin-bottom: 0.5rem;text-align: center;margin: 0 auto .5rem;padding: 0.5rem;">
          时间{{ item }}
        </div>
        <div>
          <div>
            <span style="position: absolute;top: 4rem;border-radius: 0 10px 10px 0;background: #1c84c6;color: #FFF;padding: 3px 10px 3px 5px;">公开课预告</span>
            <img style="border-radius: 10px 10px 0 0;" src="/resource/img/kc/moren.jpg"/>
          </div>
          <div style="padding: 0 1rem 1rem;background: #f3f3f3;">
            <div>名称</div>
            <div>名称2</div>
            <div>课的名称</div>
            <div>N人听课</div>
            <div><a-button type="primary" style="width: 100%;" :disabled="index%2==0">进入课堂</a-button></div>
          </div>
        </div>
      </a-col>
    </a-row>
  </a-card>
</template>
<script setup lang="ts">

</script>
<style lang="less" scoped>

</style>