learning-system-portal/src/components/Course/studyImage.vue

<template>
  <!--用于显示课程的图片-->
  <div class="img-box" id="img-box">
    <el-image
      style="background-color: #eeeeee"
      :style="`width:${width};height:${height};`"
      fit="fill	"
      :src="imageUrl"
    >
      <div slot="error" class="image-slot">
        <i class="el-icon-picture-outline"></i>
      </div>
    </el-image>
    <div v-if="isShow">
      <p v-if="imageTextSize == 4" class="te-max text effect06">
        {{ course.name || course.courseName || course.title }}
      </p>
      <p v-if="imageTextSize == 3" class="max text effect06">
        {{ course.name || course.courseName || course.title}}
      </p>
      <p v-if="imageTextSize == 2" class="mid text effect06">
        {{ course.name || course.courseName || course.title}}
      </p>
      <p v-if="imageTextSize == 1" class="mini text effect06">
        {{ course.name || course.courseName ||course.title }}
      </p>
    </div>
    <!-- <p  :class="imageTextSize == 3? 'max':imageTextSize == 2?'mid':'mini'">{{course.name}}</p> -->
  </div>
</template>

<script>
export default {
  props: {
    course: {
      type: Object,
      default: () => {},
    },
    height: {
      type: String,
      default: "100%",
    },
    width: {
      type: String,
      default: "100%",
    },
  },

  computed: {
    imageUrl() {
      if (this.course && this.course.coverImg && this.course.coverImg != "") {
        return this.course.coverImg;
      } else if (
        this.course &&
        this.course.courseImage &&
        this.course.courseImage != ""
      ) {
        return this.course.courseImage;
      } else if (
        this.course &&
        this.course.image &&
        this.course.image != ""
      ) {
        return this.course.image;
      } 
      else if (this.course.coverImg == "" || this.course.courseImage == "" || this.course.image == "") {
        this.isShow = true;
        return this.webBaseUrl + "/images/bgimg/course.png";
      }
      return '';
    },
  },

  data() {
    return {
      imageText: "", //图片上面的文字
      fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
      isShow: false,
      imageTextSize: false,
    };
  },
  mounted() {
    let obj = document.getElementById("img-box");
    if (obj.offsetWidth > 500 && obj.offsetWidth < 900) {
      this.imageTextSize = 3;
    } else if (obj.offsetWidth > 200 && obj.offsetWidth < 600) {
      this.imageTextSize = 2;
    } else if (obj.offsetWidth > 900) {
      this.imageTextSize = 4;
    } else {
      this.imageTextSize = 1;
    }
  },
  methods: {
    imageError() {},
  },
};
</script>

<style lang="scss" scoped>
.text {
  text-shadow: 0px 0px 2px #ffffff;
}
.image-slot{
	display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}
.img-box {
  width: 100%;
  height: 100%;
  position: relative;
  p {
    display: -webkit-box;
    // white-space:pre-wrap;
    overflow: hidden;
    // text-overflow:ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: #ffffff;
    position: absolute;
    padding-right: 10px;
  }
  .mini {
    top: 30px;
    left: 10px;
    font-size: 16px;
    line-height: 24px;
    -webkit-line-clamp: 2;
  }
  .mid {
    top: 50px;
    left: 20px;
    font-size: 20px;
    line-height: 35px;
    -webkit-line-clamp: 3;
  }
  .max {
    top: 90px;
    left: 40px;
    font-size: 24px;
    line-height: 40px;
    -webkit-line-clamp: 3;
  }
  .te-max {
    top: 180px;
    left: 80px;
    font-size: 20px;
    line-height: 35px;
    -webkit-line-clamp: 3;
  }
}
</style>