课程学习图文增加 半折效果

components/video-player/video-player.vue

@@ -410,4 +410,6 @@
 	.speed-control .speed-control-list .li.current {
 	  color: var(--primaryColor);
 	}
+	
+	
 </style>

pages/study/courseStudy.vue

@@ -77,9 +77,10 @@
 			 		</view>
 			 	</view>
 			 	<view v-if="curContent.contentType==41">
-			 		<view style="padding: 15px;text-indent:40px;line-height: 28px;position: relative;">
+			 		<view class="about-gongsi-info" :style="{height:articleMore? '500upx':'auto'}" style="padding: 15px;text-indent:40px;line-height: 28px;position: relative;">
 			 			<u-parse :content="curContent.content"></u-parse>
 					</view>
+					<view v-if="articleMore" @click="showMore" style="text-align: center;color: #387DF7;"><text>查看更多∨</text> </view>
 			 	</view>
 			 	<view v-if="curContent.contentType==52">
 			 		<!--外连接-->
@@ -451,6 +452,7 @@
 				localTimeKey:'boeu-study-time' ,//本地存储的学习时长的key   json格式
 				localTimeValue:0,//计算的时间
 				appendStudyOtherHandle:null,
+				articleMore:true
 			}
 		},
 		computed: {
@@ -778,6 +780,7 @@
 			},
 			//更换播放内容
 			changePlayRes(con){
+				this.articleMore=true;
 				this.clearTimeHandle();
 				// console.log(con,'con');
 				if(this.videoPlayer){
@@ -1539,7 +1542,9 @@
 				}
 				return statusObj[status]
 			},
-			
+			showMore(){
+				this.articleMore=false;
+			}
 		}
 	}
 </script>
@@ -1938,4 +1943,18 @@
 			}
 		}
 	}
+	.about-gongsi-info{overflow: hidden; position: relative;}
+	.about-gongsi-info::after{
+	    content: '';
+	    position: absolute;
+	    width: 100%;
+	    height: 30px;
+	    background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 1)));
+	    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
+	    background: -o-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
+	    background: linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
+	    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0ff, endColorstr=#fff, GradientType=0);
+	    bottom: 0;
+	    left: 0;
+	}
 </style>