learning-system-portal/src/components/HomePage/courseList.vue

<template>
    <div class="">
      <ul class="data-info-ul" v-if="list.length > 0">
        <li class="data-info" v-for="item in list" :key="item.id">
          <p v-if="isDynamic" class="portal-summary-text" style="margin-bottom:18px">
            <span v-if="!personal">{{item.aname}}</span>
            {{item.cusInfo}}  <span style="margin-left:28px">{{item.eventTime}}</span>
            <span v-if="personal && !item.hidden" class="follow-hide" style="float:right"  @click="emitHide(item.id)">
              <svg-icon style="margin-right: 10px;font-size:22px;padding-top: 4px;" icon-class="eyes"></svg-icon>隐藏
            </span>
          </p>
          <div style="display:flex;">
               <div style="width:254px">
                <course-image width="254px" height="144px" :course="item.info"></course-image>
            </div>
            
            <!-- <img style="width:254px;height:144px" src="/images/list-img.png" alt=""> -->
            <div class="data-cen">
                <h6 class="course-tit portal-title-tow">{{item.info.name || item.contentInfo}} <span class="score-info">{{item.info.score}}分</span> </h6>
                <p class="title-info">{{item.info.summary}}</p>
                <div class="pro-line"> <div>当前进度：</div> <div style="width:200px"><el-progress :percentage="50"></el-progress></div></div>
                <p class="portal-time">最新一次学习时间：2022-5-28 22:30:28</p>
            </div> 
            <div style="width:150px">
                <div class="follow-hide" style="text-align: right;" v-if="!isDynamic && personal && !item.hidden"  @click="emitHide(item.id)">
                    <svg-icon style="margin-right: 10px;font-size:22px;padding-top: 4px;" icon-class="eyes"></svg-icon>隐藏
                </div>
                <div class="btn-right">
                    <el-button class="btn" type="primary" @click="jumpDetail(item.info)">继续学习</el-button>
                </div>
            </div>
          </div>
           
        </li>
      </ul>
      <div v-else class="home-no-list">
            <img class="img" src="/images/homeWu/no-course.png" alt="" srcset="">
            <p class="text">还没有课程</p>
      </div>
    </div>
  </template>
  
  <script>
    import courseImage from "@/components/Course/courseImage.vue";
      export default{
          data(){
              return{
                courseList:[]
              }
          },
          components: {
            courseImage,
        },
          props:{
            list:{
                type:Array,
                default:()=>[]
            },
            isDynamic:{
                type:Boolean,
                default:false,
            },
            personal:{
              type:Boolean,
              default:false,
            }
          },
          methods:{
            emitHide(id) {
              this.$emit('hideIndex',id)
            },
            jumpDetail(data) {
                if(!data.id){
                return;
                }
                this.$router.push({ path: '/course/detail?id=', query: { id: data.id } });
            }
          }
      }
  </script>
  
  <style lang="scss" scoped>
    .data-info-ul{
        margin: 0;
        padding-top: 32px;
    }
  .data-info{
    border-bottom: 1px solid rgba($color: #999999, $alpha: 0.2);
    padding-bottom: 38px;
    margin-bottom: 32px;
    .data-cen{
        flex: 100%;
        margin: 0 28px;
        .course-tit{
            margin: 0;
            font-size: 18px !important;
            line-height: 25px;
        }
        .title-info{
            font-size: 14px;
            color: #333333;
            margin-top: 14px;
        }
        .pro-line{
           margin: 30px 0 16px 0;
           font-size: 14px;
           color: #333333;
           display: flex;
        }
       
    }
    .btn-right{
            margin-top: 48px;
            .btn{
                width: 140px;
                height: 40px;
            }
        }
  }
  </style>