learning-system-portal/src/components/Case/collectList.vue

<template>
  <div style="">
    <div class="article-list" v-for="(item,idx) in items" :key="idx">
      <div class="article-info ">
        <div class="article-info-title title-line-ellipsis" >
          <router-link :to="'/case/detail?id='+item.cases.id" target="_blank" >{{item.cases.title}}</router-link>
          <div class="article-info-date">
            <el-button @click="delItem(item)" type="text" icon="el-icon-remove">取消收藏</el-button>
          </div>
        </div>
        <div class="article-info-summary three-line-ellipsis">
          {{item.cases.summary}}
        </div>
        <div class="article-info-tools">
          <authorInfo :avatar="item.avatar" :name="item.name" :info="item.orgInfo"></authorInfo>
          <span>发布时间：{{ item.cases.sysCreateTime | timeFilter }}</span>
          <span>收藏时间：{{ item.time | timeFilter }}</span>
          <!-- <interactBar :type="0" :data="item.cases" :shares="false" :views="false"></interactBar> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import authorInfo from '@/components/Portal/authorInfo.vue';
  import interactBar from '@/components/Portal/interactBar.vue'
  export default {
    name: 'articleItems',
    props: {
      items: { //name,
        type: Array,
        default:()=>[]
      }
    },
    filters:{
      timeFilter(item){
        return item.split(' ')[0]
      }
    },
    methods:{
      delItem(item){
        this.$confirm('您确定要取消收藏所选案例吗？', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$emit('confirm',item)
        }).catch(() => {
        });
      }
    },
    components:{
      interactBar,
      authorInfo
    }
  }
</script>

<style lang="scss" scoped>
.title-line-ellipsis{
   width: 100%;
   display: -webkit-box;
   overflow: hidden;
  text-overflow:ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  box-sizing: border-box;
  word-break:break-all;
}
.three-line-ellipsis{
   width: 100%;
   display: -webkit-box;
   overflow: hidden;
  text-overflow:ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  box-sizing: border-box;
  word-break:break-all;
}
  .article-status1{
    padding: 3px;
    border: 1px dotted #1EA0FA;
    color:#1EA0FA;
  }
  .article-status2{
    padding: 3px;
    border: 1px dotted #00aa00;
    color:#00aa00;
  }
  .article-status3{
    padding: 3px;
    border: 1px dotted #ff0000;
    color:#ff0000;
  }
  .article-list {
    margin: 5px 0;
    border-bottom: 1px solid #dddddd;
    padding: 0px;
  }

  .article-info {
    .article-info-title {
      font-size: 16px;
      font-weight: 400;
      height: 40px;
      line-height: 40px;
      .article-info-date {
        height: 40px;
        line-height: 40px;
        float: right;
        font-weight: 200;
        color: #999999;
        i {
          margin-right: 5px;
        }
      }
    }
    .article-info-summary {
     
     line-height: 25px;
      color: #999999;
    }
    .article-info-tools {
      height: 45px;
      color: #999999;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      >span{
        font-size: 13px;
        margin-top: -2px;
        margin-left: 10px;
      }
      >span:last-of-type{
        margin-top: -4px;
        margin-right:auto;
      }
    }
  }

</style>