<template>
  <a-modal title="课程详情" :width="800" :visible="visible" :confirmLoading="confirmLoading" :footer="null">
    <div class="course-main">
      <a-row>
        <a-col :span="8">
          <div class="cover-img">
            <img class src="../../../../src/assets/img/demo1.jpeg" alt="" />
          </div>
        </a-col>
        <a-col class="info-text" :span="16" style="padding-left: 20px;">
          <h2>建筑施工安全培训第一期课程学习</h2>
          <div>
            <span style="margin-right: 20px;">课程类型: 必修课</span>
            <span>主讲老师: 陈国栋</span>
          </div>
          <div>开课周期： 2020-05-08 ~ 2022-05-31</div>
          <div>共10课时（每节课60分钟）</div>
          <a-button @click="handlerStartLearn" style="margin-top: 15px;" type="primary">开始学习</a-button>
        </a-col>
      </a-row>
      <a-row>
        <h3 class="modal-title">课程介绍</h3>
        <h4>建筑施工安全培训第一期课程学习</h4>
        <div>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor
          sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus
          et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis
          tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.
        </div>
      </a-row>
    </div>
  </a-modal>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      confirmLoading: false
    }
  },
  methods: {
    // 开始学习
    handlerStartLearn () {}
  }
}
</script>

<style lang="less" scoped>
.cover-img {
  width: 100%;
  height: 200px;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
  }
}

.info-text {
  font-size: 16px;
  color: #666;
  line-height: 1.8;
  h2 {
    line-height: 1.2;
  }
}
</style>
