修改tab状态颜色

components/course/courseSection.vue

@@ -1,15 +1,15 @@
 <template>
 	<view style="display: flex;justify-content: space-between;align-items: center;" @click="getVideo">
 		<view style="display: flex;justify-content: space-between;margin: 20rpx 0;width: 100%;">
-			<view style="display: flex;align-items: center;">
+			<view style="display: flex;align-items: center;flex:1;">
 				<view class="tag tagColor1" v-if="menuItem.sectionType==1">录播</view>
 				<view class="tag tagColor2" v-if="menuItem.sectionType==2">直播</view>
 				<view class="tag tagColor3" v-if="menuItem.sectionType==3">回放</view>
 				<view class="t_content">
-				<view v-if="menuItem.sectionType==1" :class="playSectionId==newId?'color1':''">{{menuItem.name}}</view>
-				<view v-if="menuItem.sectionType==2" :class="playSectionId==newId?'color2':''">{{menuItem.name}}</view>
-				<view v-if="menuItem.sectionType==3" :class="playSectionId==newId?'color3':''">{{menuItem.name}}</view>
-					<view style="font-size: 20rpx;color: #FF3B30;" v-if="menuItem.liveStartTime">
+					<view v-if="menuItem.sectionType==1" :class="playSectionId==newId?'color1':''">{{menuItem.name}}</view>
+					<view v-if="menuItem.sectionType==2" :class="playSectionId==newId?'color2':''">{{menuItem.name}}</view>
+					<view v-if="menuItem.sectionType==3" :class="playSectionId==newId?'color3':''">{{menuItem.name}}</view>
+					<!-- <view style="font-size: 20rpx;color: #FF3B30;" v-if="menuItem.liveStartTime">
 						<view v-if="menuItem.liveStartTime>nowTime">
 							<text>{{$method.timestampToTime(menuItem.liveStartTime, isDay =false)}}</text>-
 							<text>{{$method.timestampToTime(menuItem.liveEndTime, isDay =false).substr(11,9)}}</text>
@@ -20,10 +20,21 @@
 						<view v-if="menuItem.liveEndTime<nowTime">
 							<text>回放</text>
 						</view>
-					</view>
+					</view> -->
 				</view>
 				<view v-if="menuItem.sectionType==null">{{menuItem.name}}</view>
 			</view>
+			<view style="font-size: 20rpx;color: #FF3B30;"  v-if="menuItem.liveStartTime">
+				<view class="tagWillPlay" v-if="menuItem.liveStartTime>nowTime">
+					<text>待开播</text>
+				</view>
+				<view class="tagPlaying" v-if="menuItem.liveStartTime<=nowTime&&menuItem.liveEndTime>nowTime">
+					<text>直播中</text>
+				</view>
+				<view class="tagPlayed" v-if="menuItem.liveEndTime<nowTime">
+					<text>已结束</text>
+				</view>
+			</view>
 			<view v-if="isRebuild||menuItem.rebuild>0" class="tagRe">待重修</view>
 			<view v-else>
 				<view v-if="menuItem.learning==1" class="tagGreen">已看完</view>
@@ -149,7 +160,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 	.tagGreen{
 		width: 80rpx;
 		height: 28rpx;
@@ -159,6 +170,33 @@ export default {
 		color: #FFFFFF;
 		text-align: center;
 	}
+	.tagWillPlay{
+		width: 80rpx;
+		height: 28rpx;
+		background: #EBF4FF;
+		border-radius: 8rpx;
+		font-size: 20rpx;
+		color: #007AFF;
+		text-align: center;
+	}
+	.tagPlaying{
+		width: 80rpx;
+		height: 28rpx;
+		background: #FFF7EB;
+		border-radius: 8rpx;
+		font-size: 20rpx;
+		color: #FF9500;
+		text-align: center;
+	}
+	.tagPlayed{
+		width: 80rpx;
+		height: 28rpx;
+		background: #EEEEEE;
+		border-radius: 8rpx;
+		font-size: 20rpx;
+		color: #666666;
+		text-align: center;
+	}
 	.tagRe{
 		width: 80rpx;
 		height: 28rpx;