Browse Source

学习大纲样式改版

tanxue 1 month ago
parent
commit
78116519b3

+ 4 - 4
common/styles/global/components.scss

@@ -347,13 +347,13 @@ $titleBar-tabBar-page: calc(100vh - var(--status-bar-height));
 	
 //视频
 .ezy-video-box{
-	width: 606rpx;height: 365rpx;@include ezy-no-repeat-cover;margin: 0 auto 42rpx;
-	background-image: url("@/static/images/exam/video-frame-bj.png");position: relative;
-	box-sizing: border-box;padding: 18rpx;
+	width: 690rpx;height: 390rpx;margin: 0 auto 42rpx;
+	box-shadow: 0 0rpx 16rpx rgba(100, 159, 241, 0.2);
+	position: relative;box-sizing: border-box;padding: 0;
 	.ezy-video{
 		width: 100%;height: 100%!important;background-color: transparent;
 		.prism-big-play-btn{
-			width: 87rpx;height: 87rpx;@include ezy-no-repeat-cover;background-image: url("@/static/images/course/video-play-btn.png");
+			width: 87rpx;height: 87rpx;@include ezy-no-repeat-cover;background-image: url("@/static/images/xuexi/play-btn.png");
 			top: 52%;left: 50%!important;transform: translate(-50%, -50%);z-index: 20;
 			.outter{border: 0;}
 			}

+ 61 - 0
common/styles/global/pages.scss

@@ -1908,4 +1908,65 @@
 		.dycs-fenshu-box{margin: 46rpx auto;}
 		.dycs-btn-box{margin-top: 36rpx;}
 	}
+}
+
+// 学习大纲
+.xuexi-dagang-page{
+	width: 100%;height: 92vh;border-radius: 16rpx 16rpx 0 0;
+	background-color: #fff;box-shadow: 0 0rpx 4rpx rgba(100, 159, 241, 0.2);
+	display: flex;flex-direction: column;
+	box-sizing: border-box;padding: 36rpx 0 0;
+	.xuexi-dagang-body{overflow-y: auto;padding: 24rpx 0 0;}
+	.dagang-title{
+		width: 80%;line-height: 1.5;margin: 24rpx auto 0;
+		text-align: center;font-size: 36rpx;color: #000;position: relative;
+		icon{
+			width: 100rpx;height: 100rpx;display: flex;align-items: center;justify-content: center;
+			position: absolute;right: -13%;top: -60rpx;
+		}
+		icon::after{
+			content: '';width: 52rpx;height: 52rpx;@include ezy-no-repeat-cover;
+			background-image: url("@/static/images/common/close-icon.png");
+		}
+	}
+	
+	// 您将学会
+	.dagang-xh-box{
+		width: 690rpx;margin: 64rpx auto 0;
+		.xh-title{font-size: 32rpx;font-weight: bold;text-align: left;color: #333;margin-left: 6rpx;}
+		.xh-content-box{
+			width: 100%;border-radius: 16rpx;margin-top: 32rpx;
+			box-sizing: border-box;padding: 24rpx;
+			box-shadow: 0 0rpx 6rpx rgba(100, 159, 241, 0.3);
+			
+		}
+		.text-row{
+			display: flex;font-size: 32rpx;color: #333;margin: 10rpx 0;
+			icon{
+				width: 14rpx;height: 14rpx;border-radius: 50%;flex-shrink: 0;
+				background-color: #2c7bf4;margin: 16rpx 12rpx 0 0;}
+			}
+	}
+	
+	//学习大纲
+	.dagang-content-box{
+		background-color: #e3f7fe;margin-top: 260rpx;position: relative;
+		.dagang-content-title{
+			font-size: 32rpx;font-weight: bold;text-align: left;color: #333;
+			margin-left: 36rpx;position: relative;z-index: 1;
+		}
+		.dagang-item-list{padding: 56rpx 0 32rpx;}
+		.dagang-content-item{
+			width: 690rpx;display: flex;align-items: center;border-radius: 12rpx;color: #4b4b4b;;
+			margin: 0 auto 24rpx;box-sizing: border-box;padding: 20rpx;background-color: #fff;
+			line-height: 1.5;font-size: 32rpx;
+			img{width: 120rpx;height: 120rpx;border-radius: 12rpx;margin-right: 24rpx;}
+		}
+		.dagang-content-item:last-child{margin-bottom: 0;}
+	}
+	.dagang-content-box::before{
+		content: '';width: 750rpx;height: 193rpx;display: block;@include ezy-no-repeat-cover;
+		background-image: url("@/static/images/xuexi/dagang-img.png");
+		position: absolute;top: -110rpx;left: 0;z-index: 1;
+	}
 }

+ 31 - 33
pages/xinshuxue/components/danyuanInfo.vue

@@ -1,45 +1,43 @@
 <template>
 	<uni-popup ref="popupRef" :animation="false" :is-mask-click="false" 
-		mask-background-color="rgba(51, 137, 217, 0.95);">
-		<view class="ezy-course-page" :style="{backgroundImage: 'url(' + courseBjFun() + ')'}" style="height: 80vh">
-			<view class="icon-title-navBar-box">
-				<!-- 关闭按钮 -->
-				<view @click="goUpPage" class="nav-bar-icon2">返回</view>
-				<text class="nav-bar-title">{{danyuanInfo.danyuanIntro}}</text>
+		mask-background-color="rgba(255, 255, 255, 0.1);" type="bottom">
+		<view class="xuexi-dagang-page">
+			<view class="dagang-title">
+				<text>{{danyuanInfo.danyuanIntro}}</text>
+				<icon @click="goUpPage"></icon>
 			</view>
-			<view class="ezy-video-box course-video-box">
-				<view ref="videoContent" id="wgy-player-test" :playAuth="playAuth"
-					:change:playAuth="renderScript.receiveMsg" :videoId="videoId"
-					:change:videoId="renderScript.videoIdFun" :hideFlag="hideFlag"
-					:change:hideFlag="renderScript.hideFlagFun" :progressMarkers="progressMarkers"
-					:change:progressMarkers="renderScript.progressMarkersMsg" :seekTime="seekTime"
-					:change:seekTime="renderScript.seekTimeFun" class="ezy-video">
+			<view class="xuexi-dagang-body">
+				<view class="ezy-video-box course-video-box">
+					<view ref="videoContent" id="wgy-player-test" :playAuth="playAuth"
+						:change:playAuth="renderScript.receiveMsg" :videoId="videoId"
+						:change:videoId="renderScript.videoIdFun" :hideFlag="hideFlag"
+						:change:hideFlag="renderScript.hideFlagFun" :progressMarkers="progressMarkers"
+						:change:progressMarkers="renderScript.progressMarkersMsg" :seekTime="seekTime"
+						:change:seekTime="renderScript.seekTimeFun" class="ezy-video">
+					</view>
 				</view>
-			</view>
 
-			<!-- 核心基础题 -->
-			<view class="course-content-border">
-				<view class="course-content-box">
-					<view>您将学会:</view>
-					<view v-for="(item,index) in danyuanInfo.xuehui" :key="index">
-						<view class="title-play-box">
-							<icon class="course-icon"></icon>
-							<view class="course-title">{{item}}</view>
+				<!-- 您将学会 -->
+				<view class="dagang-xh-box">
+					<view class="xh-title">您将学会</view>
+					<view class="xh-content-box">
+						<view class="text-row" v-for="(item,index) in danyuanInfo.xuehui" :key="index">
+							<icon></icon>
+							<view class="text-content">{{item}}</view>
 						</view>
 					</view>
 				</view>
-			</view>
-			<!-- 能力提升题 -->
-			<view class="course-content-border">
-				<view class="course-content-box">
-					<view>学习大纲</view>
-					<view v-for="(item,index) in danyuanInfo.dagangList" :key="index">
-						<view class="title-play-box">
-							<icon class="course-icon"></icon>
+				<!-- 学习大纲 -->
+				<view class="dagang-content-box">
+					<view class="dagang-content-title">学习大纲</view>
+					<view class="dagang-item-list">
+						<view class="dagang-content-item" v-for="(item,index) in danyuanInfo.dagangList" :key="index">
 							<!-- 封面 -->
-							<!-- <image :src="item.cover" mode=""></image> -->
-							<view class="course-title">{{item.jieName}}</view>
-							<view class="course-title">{{item.jieIntro}}</view>
+							<img :src="item.cover" />
+							<view>
+								<view class="course-title">{{item.jieName}}</view>
+								<view class="course-title">{{item.jieIntro}}</view>
+							</view>
 						</view>
 					</view>
 				</view>

BIN
static/images/course/video-play-btn.png


BIN
static/images/exam/video-frame-bj.png


BIN
static/images/exam/video-play-btn.png


BIN
static/images/xuexi/dagang-img.png