gdy_app_8/src/view/course/components/courseList.vue

<template>
    <div class="listOuer" :style="{ background: outBg }">
      <div class="listTit" v-if="title">
        <p>{{ title }}</p>
      </div>
      <div class="listInner">
        <div class="listLi" v-for="(item, index) in dataList" :key="index">
          <div class="listLiTop">
            <img :src="item.url" />
            <div class="liInfo">
              <div class="courseLiTit">
                <p>{{ item.title }}</p>
              </div>
              <div class="courseLiDesc">
                <span>共{{ item.courseNum }}节</span>
                <span style="color: #F76146;">￥{{ item.price }}</span>
              </div>
            </div>
          </div>
          <div class="courseBtm" v-if="showNum">
            <span>剩余名额:{{ item.surplus }}套</span>
            <span>已卖出:{{ item.sale }}套</span>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name: "courseList",
  components: {},
  props: {
    dataList: {
      type: Array,
      default: []
    },
    outBg: {
      type: String,
      default: "#FFF"
    },
    title: {
      type: String,
      default: ""
    },
    showNum: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {},
  computed: {}
};
</script>
<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}
.listOuer {
  border-radius: 0.1rem;
  padding: 0.1rem 0.15rem;
  .listTit {
    p {
      font-size: 0.3rem;
      color: #000;
      line-height: 2;
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: no-warp;
    }
  }
  .listInner {
    .listLi {
      padding-top: 0.2rem;
      &:not(:nth-last-child(1)) {
        padding-bottom: 0.2rem;
        border-bottom: 1px solid #999;
      }
      .listLiTop {
        display: flex;
        justify-content: space-between;
        & > img {
          width: 3rem;
          height: 2rem;
          display: block;
          border-radius: 0.1rem;
        }
        .liInfo {
          flex: 1;
          margin-left: 0.15rem;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .courseLiTit {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            p{
                font-size: .3rem;
                color:#333;
                line-height: 1.5;
                font-weight: 600;
            }
          }
          .courseLiDesc {
            display: flex;
            justify-content: space-between;
            span{
                font-size: .28rem;
                color:#333;
                line-height: 1.3;
                &:nth-child(1){
                    margin-right: .3rem;
                }
            }
          }
        }
      }
      .courseBtm {
        display: flex;
        span{
            font-size: .28rem;
            color:#0075FC;
            line-height: 2;
            &:nth-child(1){
                margin-right: .3rem;
            }
        }
      }
    }
  }
}
</style>