<template>
  <a-card class="rowGutter" title="预约课程">
    <template #title>
      <span style="font-size: 24px;font-weight: bold;">预约课程</span>
      <a href="javascript:void(0);">线上课堂评价表</a>
      <a href="javascript:void(0);">听课记录</a>
      <a href="javascript:void(0);">同行评价表</a>
    </template>
    <template #extra><a href="javascript:void(0);">查看更多</a></template>
    <a-row class="rowGutter" :gutter="[16,16]">
      <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 6 }" v-for="(item,index) in 4" :key="index" style="margin-bottom: 40px;">
        <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 style="border: 2px #eef1f2 solid;">
          <div>
            <div style="width: 100%;height: 20px;background-color: #1c84c6;"></div>
            <div style="width:100%;white-space:normal; word-break:break-all;overflow:hidden;padding: 10px;height: 70px;font-weight: 600;font-size: 16px;">
              地理教育专业文献阅读与指导{{index}}
            </div>
          </div>
          <a-divider style="margin: 0px;color: #eef1f2;"/>
          <div style="padding: 20px;font-weight: 600;">
            <a-row>
              <a-col :span="16">
                <div style="height: 30px;font-size: 16px;">张继权</div>
                <div style="height: 30px;font-size: 14px;">环境学院环境</div>
              </a-col>
              <a-col :span="8" style="text-align: center;height: 70px;">
                <div style="color: #1c84c6;font-size: 24px;font-weight: 600;">30</div>
                <div style="font-size: 14px;">选课人数</div>
              </a-col>
              <a-col :span="24">
                <div style="height: 60px;">
                  环境学院107室
                </div>
              </a-col>
              <a-col :span="24">
                <a-button type="primary" style="background-color: #1c84c6;float: left;font-weight: 600;">预约</a-button>
                <a-button type="primary" style="background-color: #1c84c6;float: right;font-weight: 600;">报错</a-button>
              </a-col>
            </a-row>
          </div>
        </div>
      </a-col>
    </a-row>
  </a-card>
</template>
<script setup lang="ts">

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

</style>