<template>
<div class="lessonitem">
  <div class="fengmian">
    <div class="content">
      <h1>工程造价</h1>
      <h2>电路工程技术</h2>
    </div>
    <div class="jiaobiao">
     <div class="ad">
       <img src="../static/img/jiaobiao.png" class="freeicon">
       <p class="free">免费</p>
     </div>
    </div>
  </div>
  <p class="lessonname">工程造价电路工程技术</p>
  <div class="auth">
    <div class="left">
      <img src="../static/img/tx.png" class="touxiang">
      <span>张三</span>
    </div>
    <div class="date">2019-07-15  09:00</div>

  </div>
</div>
</template>

<script>
export default {
  name: "lessonitem"
}
</script>

<style lang="scss" scoped>
.lessonitem{
  width:405px;
  height:297px;
  background: white;
  border-radius: 8px;

  .fengmian{
    width: 100%;
    height: 182px;
    position: relative;
    background: linear-gradient(-32deg, #F65934, #FF7F46);
    margin-bottom: 5px;
    .content{
      padding-top: 43px;
      padding-left: 41px;
      color: white;
      h1{
        font-size: 38px;
      }
      h2{
        font-size: 21px;
        margin-top:9px;
      }
    }
    .jiaobiao{
      position: absolute;
      top:0;
      right:20px;
      //color:white;
      font-size: 15px;
      .ad{
        position: relative;
      }
      .freeicon{
        width:76px;
        //height: 49px;
      }
      .free{
        position: absolute;
        top:3px;
        left:5px;
        color:white;
      }
    }
  }

  .lessonname{
    font-size:20px;
    color: #333333;
    font-weight: bold;
    text-align: center;
  }

  .auth{
    width:400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    .left{
      line-height:80px;
    }
    .touxiang{
      width:38px;
      height:38px;
      margin-right:20px;
    }
    .date{
      font-size: 20px;
      color: #666666;

    }
  }
}
</style>
