newmyj/pages/eduction/detail.vue

<template>
	<view class="content">
		<view class="video-wrap">
			<video :src="could_play?'https://api.myjie.cn/static/viedo/ddd.mp4':''" id="videoId" class="top-video"
				:enable-progress-gesture="false" poster="https://api.myjie.cn/resource/user/user1/fw1.png"></video>
			<!-- 视频蒙版 -->
			<!-- <view class="mask" v-if="!could_play" @click.stop=""></view> -->
		</view>
		<view class="nav flex">
			<view class="nav-item" v-for="(item,index) in navList" @click="navClick(index)"
				:class="{'action': index == currentIndex}">
				{{item.title}}
			</view>
		</view>
		<!-- 详情 -->
		<view class="" v-if="currentIndex == 0">
			<view class="base-info">
				<view class="info-tit">
					深度了解阿强是个大傻逼
				</view>
				<view class="info-info flex">
					<view class="info-item">
						课程：共10节
					</view>
					<view class="hx">

					</view>
					<view class="info-item">
						人数：522人学习
					</view>
				</view>
			</view>
			<view class="jianjie">
				<view class="jianjie-top flex">
					<view class="hx">

					</view>
					<view class="">
						课程简介
					</view>
					<view class="hx">

					</view>
				</view>
				<view class="" v-html="content">

				</view>
			</view>
			<view class="tjkc">
				<view class="jianjie-top flex" style="border-bottom: #c8c7cc solid 1px;">
					<view class="hx">

					</view>
					<view class="">
						推荐课程
					</view>
					<view class="hx">

					</view>
				</view>
				<view class="kc-list">
					<view class="kc-item flex" v-for="item in 10">
						<image src="" mode="" class="kc-img"></image>
						<view class="kc-info">
							<view class="info-tit clamp">
								母婴行业必学舞蹈（邓晏老师视频）
							</view>
							<view class="info-cate clamp">
								技术控必练习
							</view>
							<view class="info-info flex">
								<view class="rs">
									100
								</view>
								<view class="visit">
									555555
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>
		<!-- 课程目录 -->
		<view class="" v-if="currentIndex == 1">
			<view class="kc-ml">
				<view class="ml-item flex">
					<view class="bs"></view>
					<view class="">
						备孕必检查项目介绍【备孕系列课程】/3备孕必检查项目介绍【备孕系列课程】/3
					</view>
				</view>
				<view class="ml-item flex">
					<view class="bs"></view>
					<view class="">
						备孕必检查项目介绍【备孕系列课程】/3
					</view>
				</view>
				<view class="ml-item flex">
					<view class="bs"></view>
					<view class="">
						备孕必检查项目介绍【备孕系列课程】/3
					</view>
				</view>
			</view>
		</view>
		<!-- 全部课程 -->
		<view class="" v-if="currentIndex == 2">
			<view class="tjkc">
				<view class="kc-list">
					<view class="kc-item flex" v-for="item in 10">
						<image src="" mode="" class="kc-img"></image>
						<view class="kc-info">
							<view class="info-tit clamp">
								母婴行业必学舞蹈（邓晏老师视频）
							</view>
							<view class="info-cate clamp">
								技术控必练习
							</view>
							<view class="info-info flex">
								<view class="rs">
									100
								</view>
								<view class="visit">
									555555
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				content: '<p>ddddddd</p>',
				currentIndex: 0,
				could_play: false,
				navList: [{
						title: '详情'
					}, {
						title: '课程目录'
					},
					{
						title: '讲师全部课程'
					}
				]
			};
		},
		computed: {
			videoContext() {
				return uni.createVideoContext('videoId', this)
			}
		},
		onLoad(opt) {

		},
		onShow() {

		},
		onReachBottom() {

		},
		methods: {
			navClick(index) {
				this.currentIndex = index
			}
		}
	};
</script>
<style lang="scss" scoped>
	.video-wrap {
		margin: 20rpx 0;
		position: relative;

		.top-video {
			width: 750rpx;

		}

		.mask {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 999;
			// background-color: red;
		}
	}

	.nav {
		width: 750rpx;
		height: 88rpx;

		.nav-item {
			line-height: 88rpx;
			width: 50%;
			text-align: center;
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
			height: 100%;
		}

		.action {
			font-weight: bold;
			position: relative;
			color: $base-color;
		}

		background-color: #fff;
	}

	.base-info {
		width: 710rpx;
		margin: 20rpx auto;
		background-color: #fff;
		font-size: 28rpx;

		.info-tit {
			color: #333;
			text-align: center;
			border-bottom: 1px solid #eee;
			padding: 20rpx;
		}

		.info-info {
			color: #666;

			.info-item {
				flex-grow: 1;
				text-align: center;
				padding: 20rpx 0;
			}

			.hx {
				width: 1rpx;
				height: 40rpx;
				background-color: #eee;
			}
		}

	}

	.jianjie {
		width: 710rpx;
		margin: 20rpx auto 0;
		background-color: #fff;
		padding: 20rpx;

	}

	.jianjie-top {
		font-size: 36rpx;
		color: $base-color;
		justify-content: center;
		padding: 40rpx 0 20rpx;

		.hx {
			width: 30rpx;
			height: 1px;
			background-color: $base-color;
			margin: 0 20rpx;
		}
	}

	.tjkc {
		width: 710rpx;
		background-color: #fff;
		margin: 20rpx auto;
	}

	.kc-list {
		padding: 0 30rpx;
		border-bottom: #c8c7cc solid 1px;

		.kc-item {
			border-bottom: #c8c7cc solid 1px;
			padding: 22rpx 0;
			justify-content: flex-start;

			.kc-img {
				flex-shrink: 0;
				width: 266rpx;
				height: 164rpx;
				margin-right: 20rpx;
				background-color: #eee;
			}

			.kc-info {
				height: 164rpx;
				width: 360rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-start;

				// background-color: red;
				.info-tit {
					width: 100%;
					font-size: 32rpx;
					color: #000;
				}

				.info-cate {
					width: 100%;
					color: #ff5a97;
					font-size: 28rpx;
				}

				.info-info {
					width: 360rpx;
					font-size: 24rpx;

					.rs {
						color: #8f8f94;
					}

					.visit {
						color: $base-color;
					}
				}
			}
		}

	}

	.kc-ml {
		padding: 30rpx;
		width: 710rpx;
		margin: 20rpx auto;
		background-color: #fff;

		.ml-item {
			align-items: flex-start;
			justify-content: flex-start;
			margin-bottom: 40rpx;

			.bs {

				flex-shrink: 0;
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				border: 1px solid #5FB878;
				margin-right: 20rpx;
			}
		}

	}
</style>