2022年5月29日从svn移到git

src/components/Article/articleImage.vue

@@ -0,0 +1,99 @@
+<template>
+	<!--用于显示课程的图片-->
+	<div class="img-box" id="img-box">
+      <el-image style="background-color: #eeeeee;" 
+		:style="`width:${width};height:${height};`"
+	  fit="fill	" 
+		:src="imageUrl"></el-image>
+		<p v-if="isShow" :class="imageTextSize? 'mini':'max'">{{article.title}}</p>
+	</div>
+	
+</template>
+
+<script>
+	export default {
+		props:{
+			article:{
+				type: Object,
+				default:()=>{}
+			},
+			height:{
+				type:String,
+				default:'100%'
+			},
+			width:{
+				type:String,
+				default:'100%'
+			}
+		},
+	
+		computed:{
+			imageUrl(){
+				if(this.article && this.article.coverurl && this.article.coverurl!=''){
+					return this.fileBaseUrl+this.article.coverurl;
+				}else if((this.article && this.article.courseImage && this.article.courseImage!='')){
+					return this.fileBaseUrl+this.article.courseImage;
+				} else if(this.article.coverurl =='' || this.article.courseImage ==''){
+					this.isShow = true;
+                    return this.webBaseUrl + '/images/bgimg/article.png'
+				}
+			}
+		},
+
+		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 < 160) {
+				this.imageTextSize = true;
+			} else {
+				this.imageTextSize = false;
+			}
+		},
+		methods:{
+			imageError(){
+				
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+.img-box{
+	position: relative;
+	width: 100%;
+	height: 100%;
+	p{
+		display: -webkit-box;
+		// white-space:pre-wrap;
+		overflow:hidden;
+		// text-overflow:ellipsis;
+		-webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+		word-break:break-all;
+		color: #ffffff;
+		position: absolute;
+		padding-right: 10px;
+	}
+	.mini{
+		top: 40px;
+		left: 10px;
+		font-size: 16px;
+		line-height: 24px;
+		-webkit-line-clamp: 2;
+	}
+	.max{
+		top: 100px;
+		left: 34px;
+		font-size: 20px;
+		line-height: 35px;
+	    -webkit-line-clamp: 4;
+	}
+}
+</style>