pbl-app/src/views/home/components/courseAll.vue

<template>
  <div class="courseBox" v-if="courseList.length > 0">
    <div v-for="(c, cIndex) in courseList" :key="cIndex" class="courseItem" @click="goTo(c.courseId)">
      <div class="cDetail">
        <div class="courseImg">
          <img :src="c.cover ? JSON.parse(c.cover)[0].url : require('../../../assets/images/home/wheel.png')" alt="" />
        </div>
        <div class="cRight">
          <div>{{ c.title }}</div>
          <div>创建者：{{ c.uname }}</div>
          <div class="jdBox">
            <div class="jdImg"><img src="../../../assets/images/home/jd.png" alt="" /></div>
            <div>{{ JSON.parse(c.chapters).length }}阶段</div>
          </div>
          <div>{{ c.typename ? c.typename : '暂无分类' }}</div>
        </div>
      </div>
      <div class="cButtonBox" v-show="false">
        <div class="cButton">
          <div class="bImg"><img src="../../../assets/images/home/courseEvaIcon.png" alt="" /></div>
          <div>评课</div>
        </div>
        <div class="cButton">
          <div class="bImg"><img src="../../../assets/images/home/evaIcon.png" alt="" /></div>
          <div>评价</div>
        </div>
        <div class="cButton">
          <div class="bImg"><img src="../../../assets/images/home/analysisIcon.png" alt="" /></div>
          <div>分析</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    courseList: {
      type: Array,
      default: []
    }
  },
  methods: {
    goTo(cid) {
      this.$router.push({ path: '/courseDetail', query: { courseid: cid } })
    }
  }
}
</script>

<style lang="scss" scoped>
.courseBox {
  background: #e8ebf2;
  padding: 15px 0;
  .courseItem {
    background: #fff;
    width: 90%;
    margin: 0 auto 15px;
    border-radius: 10px;
    box-shadow: 0 0 10px 1px #dcdfe6;
    padding: 10px;
    .cDetail {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: flex-start;
      .courseImg {
        width: 110px;
        height: 80px;
        > img {
          width: 100%;
          height: 100%;
          border-radius: 5px;
        }
      }
      .cRight {
        margin-left: 20px;
        > div {
          margin: 2px 0;
        }
        > div:nth-child(1) {
          font-size: 18px;
          font-weight: bold;
          max-width: 225px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: break-word;
        }
        .jdBox {
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-items: center;
          justify-content: flex-start;
          .jdImg {
            width: 15px;
            margin-top: 1px;
            height: 15px;
            > img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
    .cButtonBox {
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      padding: 10px 0 0 0;
      .cButton {
        width: 100px;
        height: 30px;
        margin: 0 10px 0 0;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        border: 1px solid #587ff3;
        color: #587ff3;
        border-radius: 5px;
        justify-content: center;
        .bImg {
          width: 20px;
          height: 20px;
          > img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
</style>