zz--front/pages2/course/detail.vue

<template>
	<view>
		<view style="position: fixed;width: 100%;z-index: 999;background: #FFFFFF;" id="top">
			<view class="video_box">
				<image
					v-if="!startStatus"
					:src="infoData.firstImage === null ? 'https://cdn.uviewui.com/uview/swiper/3.jpg' : infoData.firstImage"
					style="width: 100%;height: 460rpx;"
				></image>
				<image v-if="!startStatus" class="video_play" src="/static/play.png" @click="startVideo"></image>
				<polyv-player
					v-else
					id="playerVideo"
					playerId="playerVideo"
					height="460rpx"
					:vid="vid"
					:showSettingBtn="true"
					isAllowSeek="ifViewed"
					:showPlaybackRateBtn="false"
					:enablePlayGesture="true"
					:playbackRate="playbackRate"
					@statechange="onStateChange"
				></polyv-player>
			</view>
			<view>
				<u-row>
					<u-col span="8" offset="1">
						<view class="video_t1">{{ infoData.name || pageData.courseName }}</view>
					</u-col>
					<u-col span="3">
						<view class="video_t1">共{{ chapterList.length }}章节</view>
					</u-col>
				</u-row>
			</view>
			<view><u-tabs :list="list" font-size="24" bar-width="90" :current="current" @change="change" active-color="#32467B"></u-tabs></view>
			<u-line color="#D6D6DB" />
		</view>
		<view class="box" @touchmove="touchMove">
			<view id="modules1">
				<!-- 课程目录-->
				<view style="padding-top: 15rpx;">
					<u-row>
						<u-col span="9">
							<view class="video_t2" style="display: flex;align-items: center;">
								<view class="top_line"></view>
								课程目录
							</view>
						</u-col>
						<u-col span="3" text-align="right">
							<view class="video_t2" @click="swipStatus">
								共{{ chapterList.length }}章节
								<u-icon name="arrow-right" size="28" style="transition: all 0.2s;margin-left:10rpx" :class="activeStatus ? 'rotoct' : ''"></u-icon>
							</view>
						</u-col>
					</u-row>
					<!-- <view class="scroll_box">
						<scroll-view class="r_sliper" scroll-x="true">
							<view v-for="(item, index) in chapterList" :key="index" style="margin-right: 20rpx;display:inline-block"><view class="r_t2">{{item.name}}</view></view>
						</scroll-view>
					</view> -->

					<view class="catalogBox" :class="activeStatus ? 'changeCatalogBox' : ''">
						<view
							class="catalogA"
							v-for="(item, index) in chapterList"
							:key="index"
							:class="activeStatusCata === item.chapterId ? 'activesq' : ''"
							@click="activeList(item, index)"
						>
							{{ item.name }}
						</view>
					</view>
				</view>
				<u-line color="#D6D6DB" />
			</view>
			<view id="modules2">
				<!-- 课程介绍-->
				<view style="padding-top: 15rpx;">
					<u-row>
						<u-col span="8">
							<view class="video_t2" style="display: flex;align-items: center;">
								<view class="top_line"></view>
								课程介绍
							</view>
						</u-col>
					</u-row>
				</view>
				<view class="t2" v-html="pageData.introduction"></view>
				<u-line color="#D6D6DB" />
			</view>
			<!-- 出题名师-->
			<view id="modules3">
				<view style="padding: 15rpx 0;">
					<u-row>
						<u-col span="8">
							<view class="video_t2" style="display: flex;align-items: center;">
								<view class="top_line"></view>
								出题名师
							</view>
						</u-col>
					</u-row>
					<u-row>
						<view style="margin: 25rpx;display: flex;">
							<view><image :src="$method.splitImgHost(teacherInfo.avatar)" class="teacher_img"></image></view>
							<view class="teacher_t">
								<view>{{ teacherInfo.teacherName }}</view>
								<view>{{ teacherInfo.introduce }}</view>
							</view>
						</view>
					</u-row>
				</view>
				<u-line color="#D6D6DB" />
			</view>
			<!-- 相关推荐-->
			<view style="padding-top: 15rpx;" id="modules4" :style="'padding-bottom:' + modules4Bottom + 'px'">
				<u-row>
					<u-col span="8">
						<view class="video_t2" style="display: flex;align-items: center;">
							<view class="top_line"></view>
							相关推荐
						</view>
					</u-col>
				</u-row>
				<view style="margin: 10rpx;">
					<view class="tj_box" v-for="(item, index) in commendList" :key="index" @click="getNavTo(item)">
						<image :src="$method.splitImgHost(item.coverUrl)" style="width: 320rpx;height: 160rpx;"></image>
						<view style="font-size: 24rpx;color: #666666;text-align: left;">{{ item.courseName }}</view>
						<view>
							<u-row>
								<u-col span="6">
									<view style="margin-left: 20rpx;">
										<image src="/static/people.png" style="width: 20rpx;height: 20rpx;"></image>
										<text style="color: #999999;font-size: 20rpx;margin-left: 10rpx;">2023</text>
									</view>
								</u-col>
								<u-col span="6" text-align="right">
									<text style="color: #E91313;font-size: 16rpx;margin-left: 8rpx;">活动价</text>
									<text style="color: #E91313;font-size: 24rpx;font-weight: bold;">￥{{ item.price }}</text>
								</u-col>
							</u-row>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer_tab" id="foot">
			<u-line color="#D6D6DB" />
			<view style="height: 100%;display: flex;align-items: center;position: relative;">
				<view style="text-align: center;margin-left: 30rpx;" @click="favorites">
					<image :src="collecStatus ? '/static/star.png' : '/static/sc.png'" class="sc"></image>
					<view class="sc_t">收藏</view>
				</view>
				<view style="text-align: center;margin-left: 30rpx;">
					<view class="price_t1">￥{{ pageData.price }}</view>
					<view class="price_t2">￥699</view>
				</view>
				<view class="buy" @click="jumpBuy" v-if="payStatus === 0">立即购买</view>
				<view class="buy" v-if="payStatus === 1" @click="startVideo">立即观看</view>
			</view>
		</view>
		<u-popup v-model="showBox" mode="bottom" border-radius="14">
			<view class="content">
				<scroll-view scroll-y="true" style="height: 300rpx;">
					<view v-if="boxList.length > 0">
						<view
							v-for="(item, index) in boxList"
							:key="index"
							style="line-height: 60rpx;border-bottom: 1rpx solid #eee;display: flex;align-items: center;justify-content: space-between;padding: 15rpx 0;"
							:style="infoData.sectionId === item.sectionId ? 'color:#1677ff;' : ''"
							@click="getsec(item)"
						>
							<view>{{ item.name }}</view>
							<u-icon v-if="infoData.sectionId === item.sectionId" name="checkbox-mark"></u-icon>
						</view>
					</view>
					<view v-else>暂无内容</view>
				</scroll-view>
				<view class="confrim-btn" style="margin-top: 10rpx;"><u-button @click="showBox = false">取消</u-button></view>
			</view>
		</u-popup>
		<u-popup v-model="showPricePop" mode="bottom" border-radius="14">
			<view class="topBox">
				<view class="firstTopL">
					<view class="imageBs"><image :src="$method.splitImgHost(pageData.coverUrl)" mode=""></image></view>
					<view class="textBs">{{ pageData.courseName }}</view>
				</view>
				<view class="boldFonstType">
					类型：
					<span style="font-weight: bold;">{{ pageData.categoryName }}</span>
				</view>
				<view class="priceBxs">
					<view class="pricleft">
						活动价
						<span style="font-weight: bold;">￥{{ pageData.price }}</span>
					</view>
					<view class="pricright" style="text-decoration: line-through;color: #666;">￥{{ pageData.price }}</view>
				</view>
			</view>
			<view class="yh">
				<view class="yhtitle">
					<span>优惠</span>
					<u-icon
						style="transition: all 0.2s;"
						name="arrow-right"
						color="#999"
						size="28"
						@click="getConfiguration"
						:style="pricestatus ? 'transform: rotate(90deg);' : ''"
					></u-icon>
				</view>
				<view class="ts">
					<u-icon name="error-circle" color="#999" size="24"></u-icon>
					平台所有优惠均不可同时使用
				</view>
				<radio-group @change="activeCoupon" v-show="pricestatus">
					<view class="yhj" v-if="configList.length !== 0">
						<view class="yhjtit">优惠券</view>
						<view class="yhjList" v-for="(item, index) in configList" :key="index">
							<view class="yhjLefts">
								<view class="yhl">
									{{ item.couponType === 0 ? '现金券' : item.couponType === 1 ? '折扣券' : '未知' }}：{{ item.price
									}}{{ item.couponType === 0 ? '元' : item.couponType === 1 ? '折' : '未知' }}
								</view>
								<view class="yhbq" v-if="item.endTime - newDate <= 3 * 24 * 3600">即将到期</view>
							</view>
							<radio :value="JSON.stringify([1, item.couponId])" />
						</view>
					</view>
					<view class="hdyhj" v-if="activityList.length !== 0">
						<view class="yhjtit">活动优惠</view>
						<view class="yhjList" v-for="(item, index) in activityList" :key="index">
							<view class="yhjLefts">
								<view class="yhl">{{ item.activityName }}：{{ item.description }}</view>
								<view class="yhbq" v-if="item.endTime - newDate <= 3 * 24 * 3600">即将到期</view>
							</view>
							<radio :value="JSON.stringify([2, item.id])" />
						</view>
					</view>
				</radio-group>
			</view>
			<view class="btnspric">
				<view class="lefprL">
					实付：
					<span style="color: #E91313;">￥{{ prices }}</span>
				</view>
				<view class="lefprR" @click="getorder">提交订单</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			playbackRate: [0.5, 0.8, 1.0, 1.25, 1.5],
			list: [
				{
					name: '课程目录'
				},
				{
					name: '课程介绍'
				},
				{
					name: '出题名师'
				},
				{
					name: '相关推荐'
				}
			],
			activeStatus: false, //课程目录下拉样式变化是否开启
			activeStatusCata: 0, //当前选中章节
			current: 0,
			h1: 0,
			h2: 0,
			h3: 0,
			h4: 0,
			hh1: 0,
			hh2: 0,
			hh3: 0,
			hh4: 0,
			foot_h: 0,
			top_h: 0,
			windowHeight: 0,
			modules4Bottom: 0,
			isClick: false,
			// vid: 'd5f6d309fe0b016d3844b194a8b32249_d', // 视频ID
			vid: '', // 视频ID
			sign: '',
			ts: '',
			startStatus: false,
			queryData: {}, //页面跳转内容
			pageData: {},
			infoData: {},
			chapterList: [], //章列表
			teacherInfo: {},
			faceGetState: false, //模拟今天是否人脸识别
			showBox: false,
			boxList: [], //章节弹窗列表
			payStatus: 0, //是否购买该课程
			commendList: [], //推荐课程列表
			collecStatus: false, //收藏状态
			initH4: 0,
			id: 0,
			PlayDuration: 0,
			firstPlay: true,
			showPricePop: false, //购买详情弹窗
			configList: [], //优惠卷列表
			activityList: [], //活动优惠列表
			activeCouponId: [], //当前优惠卷ID   [0] : 1 优惠卷  2 活动优惠
			pricestatus: false, //当前优惠卷展开状态
			newDate: 0, //现在时间戳
			prices: 0 //实付
		};
	},
	onUnload() {
		var polyvPlayerContext = this.selectComponent('#playerVideo');
		if (polyvPlayerContext != null) {
			//存储播放记录
			let PlayCurrentTime = polyvPlayerContext.getCurrentTime();
			if (PlayCurrentTime) {
				let key = this.vid;
				uni.setStorageSync(key, PlayCurrentTime);
				this.addStudyRecord(PlayCurrentTime);
			}
		}
	},
	computed: { ...mapGetters(['userInfo']) },
	onLoad(option) {
		const Verify = require('@/wxcomponents/verify_mpsdk/main.js');
		Verify.init();
		this.id = option.id;
		this.$api.courseInfo(option.id).then(res => {
			this.pageData = res.data.data;
			this.prices = res.data.data.price.toFixed(2);
			this.getTeacher(res.data.data.teacherIds);
		});
		this.getChapter(this.id);
		this.getcommendList(this.id);
		this.getHaveThis();
		let time = uni.getStorageSync('face');
		if (time) {
			let nowTime = new Date().getTime() / 1000;
			if (nowTime - time < 24 * 3600) {
				this.faceGetState = true;
			}
		}
	},
	onShow() {
		if (!uni.getStorageSync('union_id') && this.$store.state.token === '') {
		} else {
			this.favoritesStatus();
		}
		let that = this;
		this.windowHeight = uni.getSystemInfoSync().windowHeight;
		setTimeout(function() {
			that.getHeight();
		}, 1800);
	},
	onPageScroll: function(e) {
		//防止触发两次跳动
		if (this.isClick) {
			return;
		}
		if (e.scrollTop <= this.hh1) {
			this.current = 0;
		}
		if (e.scrollTop <= this.hh2 && e.scrollTop > this.hh1) {
			this.current = 1;
		}
		if (e.scrollTop <= this.hh3 && e.scrollTop > this.hh2) {
			this.current = 2;
		}
		if (e.scrollTop > this.hh3) {
			this.current = 3;
		}
	},

	methods: {
		//检测是否已购买该课程
		getHaveThis() {
			var self = this;
			var data = {
				possessId: this.id,
				typeId: 1
			};
			if (this.$method.isLogin()) {
				this.$api.systemuserowner(data).then(res => {
					if (res.data.code === 200) {
						self.payStatus = res.data.data.payStatus;
					}
				});
			}
			
		},
		//提交订单
		getorder() {
			var self = this;
			var data = {
				goodsList: [
					{
						goodsId: self.pageData.courseId,
						num: 1,
						goodsType: 1
					}
				]
			};
			if (self.activeCouponId.length !== 0) {
				if (self.activeCouponId[0] === 1) {
					data.couponId = self.activeCouponId[1];
				}
				if (self.activeCouponId[0] === 2) {
					data.activityId = self.activeCouponId[1];
				}
			}
			self.$api.order(data).then(res => {
				if (res.data.code === 200) {
					let objarr = res.data.data;
					wx.requestPayment({
						timeStamp: objarr.timeStamp,
						nonceStr: objarr.nonceStr,
						package: objarr.package,
						signType: objarr.signType,
						paySign: objarr.sign,
						success(result) {
							uni.showModal({
								title: '提示',
								content: '支付成功',
								showCancel: false,
								success: function(resst) {
									if (resst.confirm) {
										self.showPricePop = false;
										self.getHaveThis();
									}
								}
							});
						},
						fail(err) {
							uni.showModal({
								title: '提示',
								content: '支付失败',
								showCancel: false,
								success: function(resst) {
									self.showPricePop = false;
									self.getHaveThis();
								}
							});
						}
					});
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none',
						duration: 2000
					});
				}
			});
		},
		//选择卷触发
		activeCoupon(e) {
			var self = this;
			self.activeCouponId = JSON.parse(e.detail.value);
			self.computedPrice(JSON.parse(e.detail.value));
		},
		//计算价格
		async computedPrice(arrs) {
			var self = this;
			const aites = await this.$api.courseInfo(this.id);
			self.prices = aites.data.data.price.toFixed(2);
			if (arrs[0] === 1) {
				self.configList.forEach((item, index) => {
					if (item.couponId === arrs[1]) {
						if (item.couponType === 0) {
							self.prices = (self.prices - item.price).toFixed(2);
						}
						if (item.couponType === 1) {
							self.prices = (self.prices * (item.price * 0.1)).toFixed(2);
						}
					}
				});
			}
			if (arrs[0] === 2) {
				self.activityList.forEach((item, index) => {
					if (item.id === arrs[1]) {
						if (item.activityType === '0') {
							self.prices = (self.prices - item.price).toFixed(2);
						}
						if (item.activityType === '1') {
							self.prices = (self.prices * (item.price * 0.1)).toFixed(2);
						}
						if (item.activityType === '2') {
						}
						if (item.activityType === '3') {
							self.prices = item.price.toFixed(2);
						}
						if (item.activityType === '4') {
							self.prices = (self.prices - item.price).toFixed(2);
						}
						if (item.activityType === '5') {
							self.prices = (self.prices * (item.price * 0.1)).toFixed(2);
						}
					}
				});
			}
			console.log(self.prices);
		},
		//优惠卷
		getConfiguration() {
			var self = this;
			self.newDate = self.$method.timest();
			if (this.pricestatus) {
				self.pricestatus = false;
				return;
			}
			self.pricestatus = true;
		},
		addStudyRecord(study_duration) {
			let data = {
				courseId: this.id,
				sectionId: this.infoData.sectionId,
				studyDuration: study_duration
			};
			this.$api.studyRecord(data).then(result => {});
		},
		onStateChange(newstate, oldstate) {
			if (newstate.detail.newstate == 'playing') {
				if (this.firstPlay) {
					var polyvPlayerContext = this.selectComponent('#playerVideo');
					if (polyvPlayerContext != null) {
						//获取播放记录
						let key = this.vid;
						let PlayDuration = uni.getStorageSync(key);
						if (PlayDuration) {
							polyvPlayerContext.seek(parseInt(PlayDuration));
							this.firstPlay = false;
						}
					}
				}
			}
		},
		swipStatus() {
			this.activeStatus = !this.activeStatus;
			let self = this;
			self.$nextTick(function() {
				self.getHeight();
			});
		},
		getHeight() {
			let that = this;
			const query = uni.createSelectorQuery().in(this);
			query
				.select('#modules1')
				.boundingClientRect(data => {
					that.h1 = data.height;
					that.countHeight(that);
				})
				.exec();
			query
				.select('#modules2')
				.boundingClientRect(data => {
					that.h2 = data.height;
					that.countHeight(that);
				})
				.exec();
			query
				.select('#modules3')
				.boundingClientRect(data => {
					that.h3 = data.height;
					that.countHeight(that);
				})
				.exec();
			query
				.select('#modules4')
				.boundingClientRect(data => {
					if (that.h4 == 0) {
						that.h4 = data.height;
					}
					that.countHeight(that);
				})
				.exec();
			query
				.select('#foot')
				.boundingClientRect(data => {
					that.foot_h = data.height;
					that.countModelusPadding();
				})
				.exec();
			query
				.select('#top')
				.boundingClientRect(data => {
					that.top_h = data.height;
					that.countModelusPadding();
				})
				.exec();
		},
		favoritesStatus() {
			this.$api.coursecollectPD(this.id).then(result => {
				if (result.data.data === undefined) {
					this.collecStatus = false;
				} else {
					this.collecStatus = true;
				}
			});
		},
		favorites() {
			var self = this;
			if (!uni.getStorageSync('union_id') && this.$store.state.token === '') {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			} else {
				if (this.collecStatus) {
					this.$api.coursecollectPD(self.id).then(results => {
						self.$api.deletecoursecollect(results.data.data.collectCourseId).then(resz => {
							self.favoritesStatus();
						});
					});
				} else {
					var data = {
						userId: this.$store.state.userInfo.userId,
						courseId: self.id
					};
					this.$api.coursecollect(data).then(res => {
						self.favoritesStatus();
					});
				}
			}
		},
		getcommendList(v) {
			let self = this;
			var data = {
				courseId: v
			};
			this.$api.courseInforecommendList(data).then(res => {
				self.commendList = res.data.data;
				self.$nextTick(function() {
					self.getHeight();
				});
			});
		},
		activeList(item, index) {
			var self = this;
			var dataset = {
				chapterId: item.chapterId
			};
			this.$api.coursesectionlist(dataset).then(result => {
				self.boxList = result.data.rows;
			});
			this.showBox = true;
		},
		getsec(item) {
			this.startStatus = false;
			this.infoData = item;
			this.vid = this.infoData.vid;
			this.activeStatusCata = item.chapterId;
			this.showBox = false;
			this.firstPlay = true;
		},
		getChapter(v) {
			var self = this;
			var data = {
				courseId: v
			};
			this.$api.coursechapterlist(data).then(res => {
				var chaList = res.data.rows;
				if (chaList.length === 0) {
					uni.showToast({
						title: '暂无相关章节内容',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				var dataset = {
					chapterId: res.data.rows[0].chapterId
				};
				self.$api.coursesectionlist(dataset).then(result => {
					self.getsec(result.data.rows[0]);
				});
				this.chapterList = chaList;
			});
		},
		getTeacher(v) {
			let self = this;
			var data = {
				teacherIds: v
			};
			this.$api.teacherList(data).then(res => {
				self.teacherInfo = res.data.rows[0];
			});
		},
		startVideo() {
			if (!uni.getStorageSync('union_id')) {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			} else {
				if (this.payStatus === 0) {
					uni.showToast({
						title: '暂未购买该课程',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (this.userInfo.certified != 1) {
					uni.showModal({
						title: '提示',
						content: '请先实名认证',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages2/wd/info'
								});
							} else if (res.cancel) {
							}
						}
					});
					return;
				}
				//模拟今天是否人脸识别
				if (!this.faceGetState) {
					this.certification();
					return;
				}
				if (this.vid === null) {
					uni.showToast({
						title: '视频加载失败',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				this.$api
					.polyvVideoSign(this.vid)
					.then(res => {
						this.startStatus = true;
					})
					.catch(err => {
						console.log('报错');
					});
			}
		},
		async certification() {
			var self = this;
			const faceBiz = await self.$api.facecertificationPicBizToken();
			self.BizToken = faceBiz.data.data.bizToken;
			let time = new Date().getTime() / 1000;
			uni.setStorageSync('face', time);
			wx.startVerify({
				data: {
					token: self.BizToken
				},
				success: result => {
					setTimeout(() => {
						self.faceGetState = true;
						self.$api.facecertificationPicDetectInfo(self.BizToken).then(faceRec => {
							if (faceRec.data.data === 0) {
								uni.showToast({
									title: '识别成功',
									icon: 'none',
									duration: 2000
								});
							} else {
								uni.showToast({
									title: '识别失败',
									icon: 'none',
									duration: 2000
								});
								console.log('识别失败');
							}
						});
					}, 500);
				},
				fail: err => {
					setTimeout(() => {
						console.log('识别功能失败');
						uni.showModal({
							title: '提示',
							content: err,
							showCancel: false
						});
					}, 500);
				}
			});
		},
		touchMove(e) {
			this.isClick = false;
		},
		countModelusPadding() {
			let offsetHeight = this.windowHeight - this.foot_h - this.top_h;
			this.modules4Bottom = offsetHeight > this.h4 ? offsetHeight - this.h4 : 7;
		},
		countHeight(that) {
			this.hh1 = this.h1;
			this.hh2 = this.h1 + this.h2;
			this.hh3 = this.h1 + this.h2 + this.h3;
			this.hh4 = this.h1 + this.h2 + this.h3 + this.h4;
		},
		getNavTo(item) {
			this.$navTo.togo('/pages2/course/detail', {
				id: item.courseId
			});
		},
		change(index) {
			this.current = index;
			let that = this;
			this.isClick = true;
			if (index == 0) {
				uni.pageScrollTo({
					scrollTop: 0
				});
			}
			if (index == 1) {
				uni.pageScrollTo({
					scrollTop: that.h1 + 4
				});
			}
			if (index == 2) {
				uni.pageScrollTo({
					scrollTop: that.h1 + that.h2 + 4
				});
			}
			if (index == 3) {
				uni.pageScrollTo({
					scrollTop: that.h1 + that.h2 + that.h3 + 4
				});
			}
		},
		jumpBuy() {
			var self = this;
			uni.getStorage({
				key: 'union_id',
				success: function(res) {
					// 继续操作
					self.$api
						.configurationlistCoupon({
							courseId: self.id
						})
						.then(configL => {
							self.configList = configL.data.rows;
						});
					self.$api
						.configurationlistConfig({
							courseId: self.id
						})
						.then(activityL => {
							self.activityList = activityL.data.rows;
						});
					self.showPricePop = true;
				},
				fail: function(err) {
					//重新登入
					self.$navTo.togo('/pages/login/login', {});
				}
			});
		}
	}
};
</script>
<style>
::-webkit-scrollbar {
	width: 0;
	height: 0;
	color: transparent;
}
</style>
<style scope>
.btnspric {
	border-top: 1rpx solid #eee;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 108rpx;
	padding-left: 43rpx;
	padding-right: 32rpx;
}
.btnspric > .lefprL {
	font-size: 36rpx;
	color: #0c141f;
	font-weight: bold;
}
.btnspric > .lefprR {
	padding: 0rpx 24rpx;
	height: 60rpx;
	line-height: 60rpx;
	text-align: center;
	color: #fff;
	background: #32467b;
	border-radius: 24rpx;
	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
}
.yhj,
.hdyhj {
	padding: 24rpx 29rpx 24rpx 34rpx;
}
.yhj {
	border-bottom: 16rpx solid #f9f9f9;
}
.yhjtit {
	font-size: 30rpx;
	color: #0c141f;
	font-weight: 500;
	margin-bottom: 14rpx;
}
.yhjList {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14rpx;
}
.yhjList > .yhjLefts {
	display: flex;
	align-items: center;
}
.yhjLefts > .yhl {
	color: #32467b;
	font-size: 30rpx;
	margin-right: 31rpx;
}
.yhjLefts > .yhbq {
	font-size: 24rpx;
	color: #ff9500;
	border-radius: 18rpx;
	background-color: rgba(255, 149, 0, 0.2);
	border: 2rpx solid #ff9500;
	height: 38rpx;
	line-height: 38rpx;
	padding: 0rpx 16rpx;
}
.ts {
	font-size: 24rpx;
	color: #999;
	margin: 14rpx 0rpx;
	padding-right: 29rpx;
	padding-left: 34rpx;
}
.yh {
	padding-top: 20rpx;
}
.yh > .yhtitle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-right: 29rpx;
	padding-left: 34rpx;
}
.priceBxs {
	display: flex;
	align-items: center;
}
.priceBxs > .pricleft {
	border-radius: 24rpx;
	border: 1rpx solid #e91313;
	background-color: rgba(233, 19, 19, 0.1);
	padding: 0rpx 18rpx;
	height: 49rpx;
	line-height: 49rpx;
	text-align: center;
	font-size: 30rpx;
	font-weight: 500;
	color: #e91313;
	margin-right: 13rpx;
}
.topBox {
	padding: 32rpx 32rpx 24rpx;
	border-bottom: 1rpx solid #eeeeee;
}
.topBox > .boldFonstType {
	font-weight: 500;
	font-size: 30rpx;
	margin: 16rpx 0rpx 23rpx;
}
.topBox > .firstTopL {
	display: flex;
	align-items: center;
}
.topBox > .firstTopL > .imageBs {
	width: 331rpx;
	height: 160rpx;
	border-radius: 6rpx;
	overflow: hidden;
	margin-right: 8rpx;
	box-shadow: 0rpx 6rpx 6rpx 0rpx rgba(47, 67, 121, 0.08);
}
.topBox > .firstTopL > .imageBs > image {
	width: 100%;
	height: 100%;
}
.topBox > .firstTopL > .textBs {
	font-size: 30rpx;
	font-weight: bold;
	color: #0c141f;
}
.content {
	padding: 24rpx;
	text-align: left;
}
.catalogBox {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	overflow-x: auto;
	padding-left: 38rpx;
	max-height: 305rpx;
	overflow-y: auto;
	transition: all 0.4s;
}
.catalogBox > .catalogA {
	min-width: 200rpx;
	height: 48rpx;
	line-height: 48rpx;
	// text-align: center;
	border: 2rpx solid transparent;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	word-break: break-all;
	border-radius: 10rpx;
	background: rgba(22, 119, 255, 0.05);
	padding-left: 19rpx;
	box-sizing: border-box;
	padding-right: 15rpx;
	margin-right: 16rpx;
	margin-bottom: 20rpx;
	margin-top: 15rpx;
	font-size: 24rpx;
	color: #666;
}
.catalogBox > .activesq {
	border-color: #1677ff;
}
.changeCatalogBox {
	display: block;
}
.catalogBox::-webkit-scrollbar {
	display: none; /* Chrome Safari */
}
.box {
	position: relative;
	top: 600rpx;
	padding-bottom: 88rpx;
}
.price_t2 {
	font-size: 18rpx;
	font-family: PingFang SC;
	font-weight: 500;
	text-decoration: line-through;
	color: #999999;
}
.price_t1 {
	font-size: 33rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #e91313;
}
.sc_t {
	font-size: 22rpx;
	color: #000000;
}
.sc {
	width: 29rpx;
	height: 29rpx;
}
.buy {
	width: 138rpx;
	height: 48rpx;
	line-height: 48rpx;
	background: #32467b;
	border-radius: 10rpx;
	color: #ffffff;
	font-size: 28rpx;
	text-align: center;
	vertical-align: middle;
	position: absolute;
	right: 30rpx;
}
.video_body {
	padding-bottom: 96rpx;
}
.footer_tab {
	position: fixed;
	bottom: 0;
	height: 96rpx;
	width: 100%;
	background-color: #ffffff;
}
.tj_box {
	width: 50%;
	display: inline-block;
	text-align: center;
	margin: 10rpx 0;
}
.teacher_t {
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #666666;
	line-height: 36rpx;
	margin-left: 15rpx;
}
.teacher_img {
	width: 87rpx;
	height: 129rpx;
}
.t2 {
	font-size: 24rpx;
	font-family: PingFang SC;
	color: #666666;
	line-height: 36rpx;
	margin: 15rpx;
}
.r_t2 {
	width: 201rpx;
	height: 49rpx;
	background: rgba(22, 119, 255, 0.05);
	border: 1rpx solid #32467b;
	border-radius: 16rpx;
	color: #666666;
	font-size: 23rpx;
	text-align: center;
	display: flex;
	align-items: center;
	padding: 5rpx;
}
.scroll_box {
	width: 100%;
	height: 60rpx;
	background: #ffffff;
	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
	white-space: nowrap;
	overflow: hidden;
	margin: 15rpx 0;
}
.r_sliper {
	padding: 0 20rpx;
}
.top_line {
	width: 6rpx;
	height: 22rpx;
	background: #32467b;
	margin-right: 10rpx;
}
.video_t2 {
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #666666;
}
.video_t1 {
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #333333;
}
.video_play {
	position: absolute;
	width: 95rpx;
	height: 95rpx;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
.video_box {
	position: relative;
}
.rotoct {
	transform: rotate(90deg);
}
page {
	background: #ffffff;
}
</style>