水印功能样式修改

common/styles/global/pages.scss

@@ -285,25 +285,25 @@
 /*** 课程学习 ***/
 .kecheng-study-page{
 	display: flex;height: 100vh;flex-direction: column;
-	.phone-video-box{
-		width:100%;height: 460rpx;
-		.kecheng-video{height: 460rpx!important;}
-		.prism-big-play-btn{left: 50%!important;margin-left: -32px;}
-		.prism-player .prism-progress .prism-progress-played{background-color: #3fd2a1;}
-		.prism-player .prism-progress .prism-progress-cursor{background: unset;}
-	}
-	.master-image{
-		width: 100%;height: 460rpx;position: relative;
-		@include ezy-no-repeat-cover();
-	}
+	.master-image{position: relative;@include ezy-no-repeat-cover();}
 	// 课程引导阴影
 	.yindao-shadow-image{
 	  width: 80rpx;height: 80rpx;margin: 0;background-repeat: no-repeat;background-size: contain;
-	  position: absolute;right: 100rpx;top: 940rpx;pointer-events: none;
+	  position: absolute;right: 100rpx;top: 400rpx;pointer-events: none;
 	}
 	.kc-name-box{display: flex;align-items: center;box-sizing: border-box;padding: 24rpx 36rpx 6rpx;}
-	.kc-info-box{width: 100%;box-sizing: border-box;padding: 6rpx 36rpx 24rpx;border-bottom: 1rpx solid #ebebeb;
-		display: flex;align-items: center;justify-content: space-between;color: #555;font-size: 28rpx;}
+	.kc-info-box{
+			width: 100%;box-sizing: border-box;padding: 24rpx 36rpx 24rpx;
+			color: #555;font-size: 28rpx;border-bottom: 1rpx solid #ebebeb;
+			.info-content-box{
+				display: flex;align-items: center;justify-content: space-between;margin-bottom: 10rpx;
+			}
+			.info-tip{
+				border: 1rpx dashed #3fd2a1;color: #3fd2a1;text-align: center;
+				margin-bottom: 16rpx;padding: 4rpx 0;border-radius: 8rpx;
+			}
+			.info-sm{font-size: 24rpx;color: #888;line-height: 1.6;}
+		}
 	.kecheng-mulu-box{
 		width: 100%;box-sizing: border-box;padding: 0 36rpx;
 		.collapse-item-icon,.kejian-item-icon{width: 36rpx;height: 36rpx;@include ezy-no-repeat-cover();}
@@ -339,6 +339,30 @@
 		img{max-width: 100%;margin: 0 auto;}
 		@include ezy-rich-text();
 	}
+	/* 竖屏样式 */
+	@media screen and (orientation: portrait) {
+		.phone-video-box{
+			width:100%;height: 460rpx;
+			.kecheng-video{height: 460rpx!important;}
+			.prism-big-play-btn{left: 50%!important;margin-left: -32px;}
+			.prism-player .prism-progress .prism-progress-played{background-color: #3fd2a1;}
+			.prism-player .prism-progress .prism-progress-cursor{background: unset;}
+		}
+		.master-image{width: 100%;height: 460rpx;}
+		.kecheng-study-body{display: block;overflow-y: auto;position: relative;}
+	}
+	/* 横屏样式 */
+	@media screen and (orientation: landscape) {
+		.phone-video-box{
+			width:100%;height: 100vh;
+			.kecheng-video{height: 100vh!important;width: auto;}
+			.prism-big-play-btn{left: 50%!important;top:50%;transform: translate(-50%,-50%);}
+			.prism-player .prism-cover{background-size: contain;}
+		}
+		.master-image{width:100%;height: 100vh;}
+		.kecheng-study-body{display: none;}
+		.kecheng-study-navBar{display: none;}
+	}
 }	
 
 /*** 进入成绩 ***/

pages/client/Kecheng/study.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="kecheng-study-page">
-		<zmm-watermark :watermark="watermark"></zmm-watermark>
-		<customNavbarVue title="课程" :show-back-btn="true" @back="goUpPage"></customNavbarVue>
+		<zmm-watermark :watermark="watermark" color="#999" column="2" margin="24" opacity="0.1"></zmm-watermark>
+		<customNavbarVue :title="name" :show-back-btn="true" @back="goUpPage" class="kecheng-study-navBar"></customNavbarVue>
 		<!-- 播放器 -->
 		<!-- 	<videoPlayVue v-if="showVideo" ref="videoRef" class="phone-video-box" @play-end="onPlayEnd" @play-play="onPlay"
 			@play-pause="onPause" @play-timeupdate="onTimeupdate"></videoPlayVue> -->
@@ -10,28 +10,33 @@
 		<view v-else class="phone-video-box master-image" :style="{ backgroundImage: 'url(' + imgsArr.videoBj + ')' }">
 			<!-- <view class="video-player-icon" @click="handlePlayFirst"></view> -->
 		</view>
-		<!-- 播放引导 -->
-		<view class="yindao-shadow-image" v-if="!shaDowImgFlag"
-			:style="{ backgroundImage: 'url(' + imgsArr.pointIcon + ')' }"> </view>
-		<!-- 中间区域 -->
-		<view class="kc-name-box">
-			<view>{{name}}</view>
-		</view>
-		<view class="kc-info-box">
-			<view>时长：{{period}}</view>
-			<view>{{userCount}}人学习</view>
-		</view>
-		<!-- 大纲 -->
-		<view class="phone-tab-box">
-			<uni-segmented-control :current="current" :values="items" style-type="text" :active-color="activeColor"
-				@clickItem="onClickItem" />
-		</view>
-		<view class="kecheng-content-box">
-			<!-- 目录 -->
-			<kechengMuluVue v-if="current === 0" :chapterArr="list" @play="handlePlay" :isHasProgress="true"
-				:activeKjId="curPlayData&&curPlayData.kjId"></kechengMuluVue>
-			<!-- 介绍 -->
-			<rich-text :nodes="intro || '暂无内容'" v-if="current === 1 && intro" class="kecheng-jieshao-box"></rich-text>
+		<view class="kecheng-study-body">
+			<!-- 播放引导 -->
+			<view class="yindao-shadow-image" v-if="!shaDowImgFlag"
+				:style="{ backgroundImage: 'url(' + imgsArr.pointIcon + ')' }"> </view>
+			<!-- 中间区域 -->
+			<view class="kc-info-box">
+				<view class="info-tip">旋转手机，享受横屏沉浸式视频学习体验</view>
+				<view class="info-content-box">
+					<view>时长：{{period}}</view>
+					<view>{{userCount}}人学习</view>
+				</view>
+				<view class="info-sm">
+					郑重声明：课程版权归平台所有，禁止对本课程进行任何录音录像，违者将承担法律责任。
+				</view>
+			</view>
+			<!-- 大纲 -->
+			<view class="phone-tab-box">
+				<uni-segmented-control :current="current" :values="items" style-type="text" :active-color="activeColor"
+					@clickItem="onClickItem" />
+			</view>
+			<view class="kecheng-content-box">
+				<!-- 目录 -->
+				<kechengMuluVue v-if="current === 0" :chapterArr="list" @play="handlePlay" :isHasProgress="true"
+					:activeKjId="curPlayData&&curPlayData.kjId"></kechengMuluVue>
+				<!-- 介绍 -->
+				<rich-text :nodes="intro || '暂无内容'" v-if="current === 1 && intro" class="kecheng-jieshao-box"></rich-text>
+			</view>
 		</view>
 	</view>
 </template>
@@ -89,7 +94,7 @@
 				kcId: null,
 				from: '',
 				jzId: null,
-				watermark: '<h5>我是h5标签我是h5标签我是h5标签我是h5标签</h5><p style="color:#f00">我是p标签</p><br>/>',
+				watermark: '<h5>我是h5标签我是h5标签我是h5标签我是h5标签</h5><p>我是p标签</p><br>/>',