<template>
  <div class="OnlineClass">
    <div class="search_box">
      <u-search placeholder="请输入需要搜索的课程" bg-color="#FFF" v-model="keyword" :show-action="false"></u-search>
    </div>

    <p class="all_class">全部课程</p>

    <div class="card_list">
      <div class="card" @click="handleToDetail">
        <div class="card_left">
          <img src="../img/youxiu.png" alt="">
        </div>
        <div class="card_right">
          <div class="title">课程名称课程名称课程名称课程名称课程名称课程名称课…</div>
          <div class="num">47人已学习</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: 1,
      keyword: '',
    }
  },
  onLoad() {
    
  },
  
  methods: {
    getList() {
      console.log('在线课堂列表');
    },
    handleToDetail() {
      this.$emit('toDetail')
    }
  },
  onReachBottom() {
    this.current ++;
    this.getList()
  },
}
</script>

<style lang="scss" socped>
.OnlineClass {
  .search_box {
    margin: 24px 0;
    padding: 0 32px;
    box-sizing: border-box;
  }
  
  .all_class {
    font-size: 28px;
    color: #333333;
    font-weight: 600;
    padding: 0 32px;
    box-sizing: border-box;
  }

  .card_list {
    padding: 8px 32px;
    box-sizing: border-box;

    .card {
      margin-top: 24px;
      background: #FFFFFF;
      box-shadow: 0 0 8px 0 rgba(0,0,0,0.02);
      border-radius: 16px;
      display: flex;
      padding: 24px;
      box-sizing: border-box;
      .card_left {
        margin-right: 24px;
        img {
          width: 160px;
          height: 160px;
          border-radius: 8px;
        }
      }

      .card_right {
        .title {
          font-weight: 500;
          font-size: 34px;
          color: #333333;
          overflow: hidden; 
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        .num {
          margin-top: 28px;
          font-weight: 400;
          font-size: 26px;
          color: #999999;
        }
      }
      .col_blue {
        color: #2D7DFF;
      }
    }
  }
}
</style>
