pbl-app/src/views/courseDetail/components/courseMessage.vue

<template>
  <div class="courseBox">
    <div class="courseTop">
      <div class="courseImg">
        <img
          :src="
            cDetail.cover != null && cDetail.cover != ''
              ? JSON.parse(cDetail.cover).length > 0
                ? JSON.parse(cDetail.cover)[0].url
                : mr
              : mr
          "
          alt=""
        />
      </div>
      <div class="courseMes">
        <div class="cFirst">
          <div class="cTitle">{{ cDetail.title }}</div>
          <div class="jd">{{ cInfo.length }}阶段</div>
          <div class="jd">{{ rwLength }}任务</div>
        </div>
        <div class="cSecond">
          <div class="cTypeBox" v-if="cType.length">
            <div v-for="(item, index) in cType" :key="index" class="cType">
              <span style="min-width: 50px">{{ item + '：' }}</span>
              <span v-for="(item2, index2) in cJson[item]" :key="index2">{{ item2 }}</span>
            </div>
          </div>
          <div>
            <span style="min-width: 50px">创建者：</span> <span>{{ cDetail.username }}</span>
          </div>
        </div>
        <div class="Tname" v-if="tName.length > 0" @click="TnameCheck = !TnameCheck">
          协同人员：<span v-for="(tname, tIndex) in TnameCheck ? tName : tName.slice(0, 6)" :key="tIndex">{{
            tname
          }}</span
          ><span v-if="!TnameCheck && tName.length > 6">更多....</span>
        </div>
        <div class="people">
          <div>参与人数：</div>
          <div class="man">
            <img src="../../../assets/images/home/people.png" alt />
          </div>
          <div class="person">{{ cDetail.vcount != null ? cDetail.vcount : 0 }}人</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    cDetail: {
      type: Object
    },
    cInfo: {
      type: Array
    },
    rwLength: {
      type: Number,
      default: 0
    },
    cType: {
      type: Array
    },
    cJson: {
      type: Object
    },
    tName: {
      type: Array
    }
  },
  data() {
    return {
      TnameCheck: false,
      mr: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/noBanner1656409780264.jpg'
    }
  }
}
</script>

<style lang="scss" scoped>
@mixin display() {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
$pad: 0 10px 10px 0;
$font: 15px;
.courseBox {
  margin-top: 50px;
  min-height: 350px;
  .courseTop {
    .courseImg {
      width: 100%;
      height: 200px;
      > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .courseMes {
      padding: 10px 0 0 15px;
      .cFirst {
        @include display();
        padding: $pad;
        .cTitle {
          font-size: 18px;
          font-weight: bold;
          max-width: 200px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: break-word;
          margin-right: 10px;
        }
        .jd {
          background: #4a9eed;
          color: #fff;
          height: 20px;
          line-height: 20px;
          text-align: center;
          border-radius: 10px;
          padding: 0 10px;
          margin: 0 10px 0 0;
        }
      }
      .cSecond {
        @include display();
        padding: $pad;
        font-size: $font;
        .cTypeBox {
          margin-right: 10px;
          .cType {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            > span:nth-child(2) {
              max-width: 180px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              word-break: break-word;
            }
          }
        }
      }
      .Tname {
        padding: $pad;
        font-size: $font;
        > span {
          margin: 0px 5px;
        }
      }
      .people {
        padding: $pad;
        @include display();
        > div:nth-child(1) {
          font-size: 15px;
        }
        .man {
          width: 20px;
          height: 20px;
          > img {
            width: 100%;
            height: 100%;
          }
        }
        .person {
          font-size: $font;
          margin-left: 10px;
        }
      }
    }
  }
}
</style>