hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-16 14:26:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

修改

Browse Source
This commit is contained in:
nisen
2023-09-04 15:25:51 +08:00
parent e8469b0a34
commit fbf2b7e4b8
9 changed files with 396 additions and 317 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
src/components/Course/courseImage.vue
View File

@@ -1,12 +1,8 @@
<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 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>
@@ -32,46 +28,45 @@ export default {
props: {
course: {
type: Object,
default: () => {},
default: () => { },
},
height: {
type: String,
default: "100%",
},
text:{
text: {
type: Boolean,
default:true,
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
},
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('http')) {
if (this.course && this.course.coverImg && this.course.coverImg.startsWith('http')) {
return this.course.coverImg;
}
if(this.course && this.course.courseImage && this.course.courseImage.startsWith('http')) {
if (this.course && this.course.courseImage && this.course.courseImage.startsWith('http')) {
return this.course.courseImage;
}
if (this.course && this.course.coverImg && this.course.coverImg != "") {
if (this.course && this.course.coverImg && this.course.coverImg != "") {
return this.fileBaseUrl + this.course.coverImg;
} else if (
this.course &&
@@ -110,6 +105,8 @@ export default {
};
},
mounted() {
console.log('hoahaioaiohaiohio');
console.log(this.course, '嘿嘿');
let obj = document.getElementById("img-box");
if ((obj.offsetWidth > 500 || obj.offsetWidth == 500) && obj.offsetWidth < 900) {
this.imageTextSize = 3;
@@ -122,7 +119,7 @@ export default {
}
},
methods: {
imageError() {},
imageError() { },
},
};
</script>
@@ -130,43 +127,56 @@ export default {
<style lang="scss" scoped>
.text {
text-shadow: 0px 0px 2px #ffffff;
span{
span {
color: #ffffff !important;
}
}
.image-slot{
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
.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; /*早期浏览器*/
-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;
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; /*早期浏览器*/
-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%;
@@ -174,6 +184,7 @@ export default {
line-height: 24px;
-webkit-line-clamp: 2;
}
.mid {
top: 30%;
left: 8%;
@@ -181,6 +192,7 @@ export default {
line-height: 35px;
-webkit-line-clamp: 2;
}
.max {
top: 30%;
left: 8%;
@@ -188,12 +200,12 @@ export default {
line-height: 40px;
-webkit-line-clamp: 2;
}
.te-max {
top: 30%;
top: 30%;
left: 8%;
font-size: 20px;
line-height: 35px;
-webkit-line-clamp: 2;
}
}
</style>
}</style>