siyu_app/pages/course/introduce.vue

<template>
	<view class="">
		<es-nav-bg title="课程简介"></es-nav-bg>
		<view class="es-view-w-x es-mt-10">
			<view class="banner es-icon-auto es-br-20">
				<image :src="courseData.imgUrl"></image>
			</view>
		</view>
		<view class="">
			<view class="es-bc-white es-br-20" style="margin-top: -194rpx;min-height: 300rpx;">
				<view class="es-h-194"></view>
				<view class="es-view-w-x es-mt-25">
					<view class="es es-ac">
						<view class="es-icon es-w-35 es-h-31 es-icon-course-info"></view>
						<view class="es-ml-20 es-fs-30 es-fw-600 es-f1">课程简介</view>
						<!-- <view class="es-icon-25 es-icon-course-close"></view> -->
					</view>
					<view class="es-ml-50 es-mr-50 es-pt-30 es-pb-30 es-pr-3 es-pl-3 es-fs-30 es-fw-600  es-omit">{{courseData.courseName}}</view>

					<view class="es es-ac es-center es-c">
						<view class="item es-h-110 es-icon-course-bg es-icon-auto es es-ver es-ac es-pc">
							<view class="es es-ac es-fs-22">
								<view class="es-icon-course-icon-1 es-icon-23"></view>
								<view class="es-ml-9">播放量</view>
							</view>
							<view class="es-fs-30 es-mt-5 es-fw-600">{{courseData.views}}</view>
						</view>
						<view class="item es-h-110 es-icon-course-bg es-icon-auto es es-ver es-ac es-pc">
							<view class="es es-ac es-fs-22">
								<view class="es-icon-course-icon-2 es-icon-23"></view>
								<view class="es-ml-9">播放时长</view>
							</view>
							<view class="es-fs-30 es-mt-5 es-fw-600">{{courseData.totalDuration}}</view>
						</view>
						<view class="item es-h-110 es-icon-course-bg es-icon-auto es es-ver es-ac es-pc">
							<view class="es es-ac es-fs-22">
								<view class="es-icon-course-icon-3 es-icon-23"></view>
								<view class="es-ml-9">热力排名</view>
							</view>
							<view class="es-fs-30 es-mt-5 es-fw-600">{{!courseData.hotNum?0:courseData.hotNum}}</view>
						</view>
						
					</view>
					
					
					<view class="es-view-w-x es-fs-28 es-fw-500 es-pt-30" style="line-height: 1.9em;">
						{{courseData.description}}
					</view>


				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getCourseById } from '@/api/course'
	export default {
		data() {
			return {
               cateId:0,
               courseData:{},
			   pickCatalog:{videoUrl:"",thumbnail:"",duration:0,videoId:0,seconds:0},
			   pickCatalogIdx:0,
			   courseDuration:0,
			   videoId:0,
			}
		},
		onLoad(options) {
	        this.courseId=options.courseId;
			this.courseDuration=options.studyTimes;
			this.videoId=options.videoId;
			this.getCourseInfo();
		},
		onUnload() {
			let studyData={"studyTimes":this.courseDuration,"videoId":this.videoId}
			uni.$emit('backStudyTime', studyData);
		},
		methods: {
            getCourseInfo(){
               getCourseById(this.courseId).then(res => {
            		if(res.code==200){
            			this.courseData=res.data;
            		}
            	},
            	rej => {}
               );
            }
		}
	}
</script>

<style>
	page {
		background-color: white;

	}

	.banner {
		height: 360rpx;
	}

	.es-icon-course-bg {
		background-image: url(/static/images/other/course/bg.png);
	}

	.es-icon-course-icon-1 {
		background-image: url(/static/images/other/course/icon-1.png);
	}

	.es-icon-course-icon-2 {
		background-image: url(/static/images/other/course/icon-2.png);
	}

	.es-icon-course-icon-3 {
		background-image: url(/static/images/other/course/icon-3.png);
	}

	.es-icon-course-close {
		background-image: url(/static/images/other/course/close.png);
	}

	.es-icon-course-info {
		background-image: url(/static/images/other/course/info.png);
	}

	.item {
		width: calc(33.33% - 14rpx);
	}

</style>