mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-14 21:36:42 +08:00
2022年5月29日从svn移到git
This commit is contained in:
daihh
186
src/components/Course/courseImage.vue
Normal file
186
src/components/Course/courseImage.vue
Normal file
@@ -0,0 +1,186 @@
|
||||
<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" 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%",
|
||||
},
|
||||
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;
|
||||
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;
|
||||
}
|
||||
.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>
|
||||
Reference in New Issue
Block a user