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

<template>
  <!--用于显示课程的图片-->
  <div  style="border-radius: 5px;" class="img-box" id="img-box">
    <el-image
      style="background-color: #eeeeee;border-radius: 5px;"
      :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 && text">
      <p v-if="imageTextSize == 4" class="te-max text effect06" v-html="name"></p>
      <p v-if="imageTextSize == 3" class="max text effect06" v-html="name">
        <!-- {{ course.name || course.courseName || course.title}} -->
      </p>
      <p v-if="imageTextSize == 2" class="mid text effect06" v-html="name">
        <!-- {{ course.name || course.courseName || course.title}} -->
      </p>
      <p v-if="imageTextSize == 1" class="mini text effect06" v-html="name">
        <!-- {{ 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%",
    },
    text:{
      type: Boolean,
      default:true,
    },
    width: {
      type: String,
      default: "100%",
    },
  },

  computed: {
    name(){
				let name = '';
				if(this.course && this.course.name && this.course.name !== '') {
						name = this.course.name.replace('color:#FF0000','color:#fff');
				}
				if(this.course && this.course.courseName && this.course.courseName !== '') {
						name = this.course.courseName.replace('color:#FF0000','color:#fff');
				}
				if(this.course && this.course.title && this.course.title !== '') {
						 name = this.course.title.replace('color:#FF0000','color:#fff');
				}
				return name;
				// course.name || course.courseName || course.title
			},
    imageUrl() {
      this.isShow = false;
      if(this.course &&  this.course.coverImg && this.course.coverImg.startsWith('h')) {
        return this.course.coverImg;
      }
        if(this.course &&  this.course.courseImage && this.course.courseImage.startsWith('h')) {
        return this.course.courseImage;
      }
    if (this.course && this.course.coverImg && this.course.coverImg != "") {
        return this.fileBaseUrl + this.course.coverImg;
      } else if (
        this.course &&
        this.course.courseImage &&
        this.course.courseImage != ""
      ) {
        return this.fileBaseUrl + this.course.courseImage;
      } else if (
        this.course &&
        this.course.image &&
        this.course.image != ""
      ) {
        return this.fileBaseUrl + this.course.image;
      }
      else if (this.course.coverImg == "" || this.course.courseImage == "" || this.course.image == "") {
        this.isShow = true;
        return this.webBaseUrl + "/images/bgimg/course.png";
      }
      // else if(this.course.coverImg.startsWith('h')) {
      //   return this.course.coverImg;
      // }else if(this.course.courseImage.startsWith('h')){
      //   return this.course.courseImage;
      // }
      // }

      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 == 500) && obj.offsetWidth < 900) {
      this.imageTextSize = 3;
    } else if (obj.offsetWidth > 200 && obj.offsetWidth < 500) {
      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;
  span{
    color: #ffffff !important;
  }
}
.image-slot{
	display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}
.img-box {
  width: 100%;
  height: 100%;
  position: relative;
  -moz-user-select: none; /*火狐*/
  -webkit-user-select: none; /*webkit浏览器*/
  -ms-user-select: none; /*IE10*/
  -khtml-user-select: none; /*早期浏览器*/
  user-select: none;
  p {
    display: -webkit-box;
    // white-space:pre-wrap;
    overflow: hidden;
    // text-overflow:ellipsis;
    word-break:break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: #ffffff;
    position: absolute;
    padding-right: 10px;
    -moz-user-select: none; /*火狐*/
    -webkit-user-select: none; /*webkit浏览器*/
    -ms-user-select: none; /*IE10*/
    -khtml-user-select: none; /*早期浏览器*/
    user-select: none;
  }
  .mini {
    top: 30%;
    left: 8%;
    font-size: 16px;
    line-height: 24px;
    -webkit-line-clamp: 2;
  }
  .mid {
    top: 30%;
    left: 8%;
    font-size: 20px;
    line-height: 35px;
    -webkit-line-clamp: 2;
  }
  .max {
    top: 30%;
    left: 8%;
    font-size: 24px;
    line-height: 40px;
    -webkit-line-clamp: 2;
  }
  .te-max {
     top: 30%;
    left: 8%;
    font-size: 20px;
    line-height: 35px;
    -webkit-line-clamp: 2;
  }
}
</style>