<template>
  <div class = "mt-list">
    <div class="icon">
      <slot name = "icon"></slot>
    </div>
    <div class = "content">
      <div>
        <slot></slot>
      </div>
      <div class="desc">
          {{desc}}
          <slot name = "desc"></slot>
      </div>
    </div>
    <div class="footer">
      {{footer}}
      <slot name = "footer"></slot>
    </div>
  </div>
</template>
<script>
    export default {
      props: {
        desc: String,
        footer: String
      }
    }
</script>
<style lang="less">
  .mt-list{
    &:hover{
      >.content{
        color:#3094fa;
      }
      border: 1px solid #7bbaf8;
    }
    transition: .2s all;
    margin-bottom:10px;
    cursor:pointer;
    display: inline-block;
    width: 100%;
    padding: 5px 10px;
    box-sizing:border-box;
    border-radius: 4px;
    border: 1px solid #e5e5e5;
    overflow: hidden;
    >.content{
      display: inline-block;
      font-size:16px;
      line-height:26px;
      float:left;
      color:#454545;
      max-width:70%;
      >.desc{
        line-height:19px;
        font-size: 12px;
        color:#999;
      }
    }
    
    &>.footer{
      line-height:26px;
      color:#666;
      font-size: 14px;
      float:right;
      display: inline-block;

    }
  }
</style>
