|
@@ -0,0 +1,357 @@
|
|
|
|
|
+<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>
|