课程开发

common/styles/global/components.scss

@@ -89,7 +89,7 @@ view{box-sizing: border-box;}
 }
 // 带背景色
 .icon-title-bjcolor-navBar-box{
-background-color: #3fd2a1;
+	background-color: #3fd2a1;
 	.nav-bar-title{color: #fff;}
 	.nav-bar-icon{background-image: url("@/static/images/common/nav-white-bar-jt.svg");}
 }
@@ -97,6 +97,12 @@ background-color: #3fd2a1;
 .phone-nav-bar-icon{width: 24rpx;height: 38rpx;position: absolute;left: 24rpx;top: var(--status-bar-height);
 		background-image: url("@/static/images/common/nav-bar-jt.svg");@include ezy-no-repeat-cover();
 	}
+
+/***** tab  *****/	
+.phone-tab-box{
+	.segmented-control--text{height: 80rpx!important;}
+	.segmented-control__text{font-size: 32rpx!important;}
+}
 	
 /***** 查询框  *****/	
 .phone-search-box{

common/styles/global/pages.scss

@@ -97,6 +97,53 @@
 	
 	}
 	
+/*** 课程学习 ***/
+.kecheng-study-page{
+	display: flex;height: 100vh;flex-direction: column;
+	.phone-video-box{
+		width:100%;height: 460rpx;
+		.kecheng-video{height: 460rpx!important;}
+	}
+	.kc-info-box{width: 100%;box-sizing: border-box;padding: 24rpx 36rpx;border-bottom: 1rpx solid #ebebeb;
+		display: flex;align-items: center;justify-content: space-between;color: #555;}
+	.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();}
+		.my-collapse-item {
+			border-bottom: 1rpx solid #ebebeb;padding: 32rpx 0;
+			display: flex;align-items: center;justify-content: space-between;
+			
+			}
+		.collapse-text{font-size: 30rpx;color: #333;}
+		.collapse-item-icon{background-image: url("@/static/images/common/nav-bar-jt-bottom.svg");flex-shrink: 0;margin-left: 10rpx;}
+		.item-open .collapse-item-icon{transform: rotate(180deg);}
+		
+		.my-card-content {height: 0rpx;overflow: hidden;margin: 0 32rpx;}
+		.content-open{
+			display: block;height: auto;
+			.content-open{margin: 0 16rpx;}
+			.item-open{
+				border:0;
+				.collapse-text{color: #333;}
+			}
+		}
+		
+		.kejian-item{display: flex;align-items: center;padding: 16rpx;font-size: 28rpx;
+		color: #666;border-radius: 4rpx;background-color: #f4f7ff;margin-bottom:20rpx;}
+		.kejian-item-icon{background-image: url("@/static/images/common/play-icon.svg");flex-shrink: 0;margin-right: 8rpx;}
+		.kejian-active{
+			color: #3fd2a1;background-color: #3fd2a11a;
+			.kejian-item-icon{background-image: url("@/static/images/common/play-icon-a.svg");}
+		}
+	}	
+	.kecheng-content-box{flex: 1;overflow: auto;}
+	.kecheng-jieshao-box{
+		display: block;box-sizing: border-box;padding: 24rpx;font-size: 30rpx;color: #666;
+		word-break: break-all;line-height: 1.6;
+		img{max-width: 100%;margin: 0 auto;}
+	}
+}	
+
 /*** 答题卡 ***/
 .answer-card-popup{
 	height: 100vh;

components/kecheng-mulu/kecheng-mulu.vue

@@ -1,10 +1,11 @@
 <template>
-	<view class="kecheng-mulu">
+	<view class="kecheng-mulu-box">
 		<myCollapseCardVue v-for="zhang in chapterArr" :title="zhang.name" @click.stop="handleZhangClick(zhang)"
 			:open="zhang.open">
 			<myCollapseCardVue v-for="jie in zhang.jieList" :title="jie.name" @click.stop="handleJieClick(jie, zhang)"
 				:open="jie.open">
 				<view class="kejian-item" v-for="item in jie.kejianList" @click.stop="handleKejianClick(item)">
+					<icon class="kejian-item-icon"></icon>
 					<text>{{item.name}}</text>
 					<text v-if="isHasProgress">进度{{item.curProcess}}</text>
 				</view>
@@ -70,12 +71,3 @@
 		emits('play', item)
 	}
 </script>
-
-
-
-
-<style>
-	.kejian-item {
-		line-height: 50px;
-	}
-</style>

components/myCollapseCard/myCollapseCard.vue

@@ -1,7 +1,10 @@
 <template>
 	<view class="my-collapse-card">
-		<view class="my-collapse-item">{{title}} --- {{open}}</view>
-		<view class="my-card-content" :class="{'card-open': open}">
+		<view class="my-collapse-item" :class="{'item-open': open}">
+			<text class="collapse-text">{{title}} --- {{open}}</text>
+			<icon class="collapse-item-icon"></icon>
+		</view>
+		<view class="my-card-content" :class="{'content-open': open}">
 			<slot></slot>
 		</view>
 	</view>
@@ -20,22 +23,3 @@
 		},
 	}
 </script>
-
-<style lang="scss">
-	.my-collapse-item {
-		height: 60rpx;
-		line-height: 60rpx;
-		background-color: #cc2;
-	}
-
-	.my-card-content {
-		height: 0rpx;
-		overflow: hidden;
-		margin: 0 5px;
-	}
-	.card-open {
-		display: block;
-		height: auto;
-		background: #ccc;
-	}
-</style>

pages/admin/Kecheng/study.vue

@@ -5,26 +5,22 @@
 			<text class="nav-bar-title">{{title}}</text>
 		</view>
 		<!-- 播放器 -->
-		<videoPlayVue ref="videoRef"></videoPlayVue>
+		<videoPlayVue ref="videoRef" class="phone-video-box"></videoPlayVue>
 		<!-- 中间区域 -->
-		<view>
-			<view>{{period}}分钟</view>
+		<view class="kc-info-box">
+			<view>时长：{{period}}分钟</view>
 			<view>{{userCount}}人学习</view>
 		</view>
 		<!-- 大纲 -->
-		<view class="uni-padding-wrap uni-common-mt">
+		<view class="phone-tab-box">
 			<uni-segmented-control :current="current" :values="items" style-type="text" :active-color="activeColor"
 				@clickItem="onClickItem" />
 		</view>
-		<view class="content">
+		<view class="kecheng-content-box">
 			<!-- 目录 -->
-			<view v-if="current === 0">
-				<kechengMuluVue :chapterArr="list" @play="handlePlay" :isHasProgress="false"></kechengMuluVue>
-			</view>
+			<kechengMuluVue v-if="current === 0" :chapterArr="list" @play="handlePlay" :isHasProgress="false"></kechengMuluVue>
 			<!-- 介绍 -->
-			<view v-if="current === 1 && intro">
-				<rich-text :nodes="intro"></rich-text>
-			</view>
+			<rich-text :nodes="intro" v-if="current === 1 && intro" class="kecheng-jieshao-box"></rich-text>
 		</view>
 	</view>
 </template>
@@ -49,7 +45,7 @@
 			return {
 				items: ['目录', '介绍'],
 				colors: ['#007aff', '#4cd964', '#dd524d'],
-				activeColor: '#007aff',
+				activeColor: '#3fd2a1',
 				current: 0, // 激活的选项卡
 				kcId: '', // 课程
 				title: '',