<template>
	<view>
		<view class="detail_body">
			<view style="width: 100%;padding: 20rpx 0;">
				<view class="title">二级造价工程师2020二级造价工程师习题练习</view>
				<view style="width: 686rpx;height: 180rpx;display: flex;margin: 20rpx auto;">
					<view class="box1">
						<view>
							<u-row gutter="16">
								<u-col span="7">
									<view style="text-align: center;display: flex;height: 180rpx;flex-direction: column;justify-content: center;">
										<view class="container">
											<view class="progress_box">
												<canvas class="progress_bg" canvas-id="canvasProgressbg"></canvas>
												<canvas class="progress_canvas" canvas-id="canvasProgress"></canvas>
												<view class="progress_text">
													<view class="u-progress-dot">
														{{
															isDoneListsLenght === 0 && pageData.questionNum === 0
																? 0
																: ((isDoneListsLenght / pageData.questionNum) * 100).toFixed(0)
														}}
													</view>
													<text class="u-progress-info">%</text>
												</view>
											</view>
										</view>
									</view>
								</u-col>
								<u-col span="5">
									<view style="margin-top: 20rpx;">
										<view class="t1">总题数</view>
										<view class="t3">{{ pageData.questionNum }}</view>
										<view class="t1">已答过</view>
										<view class="t3">{{ isDoneListsLenght }}</view>
									</view>
								</u-col>
							</u-row>
						</view>
					</view>
					<view class="box2" @click="jumpExam(2)">
						<view style="height: 100%;display: flex;flex-direction: column;justify-content: center;">
							<view style="text-align: center;">
								<view class="big_num">{{ errorLists }}</view>
								<view class="t4">
									错题集
									<u-icon name="arrow-right" size="28"></u-icon>
								</view>
							</view>
						</view>
					</view>
					<view class="box2" @click="jumpExam(1)">
						<view style="height: 100%;display: flex;flex-direction: column;justify-content: center;">
							<view style="text-align: center;">
								<view class="big_num">{{ favoritesLength }}</view>
								<view class="t4">
									收藏集
									<u-icon name="arrow-right" size="28"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view>
				<u-row>
					<u-col span="11"><view class="video_t1">2020年二级建造师教育选修</view></u-col>
				</u-row>
			</view>
			<view><u-tabs list="list" font-size="24" bar-width="100" :current="current" @change="change" active-color="#32467B"></u-tabs></view>
			<u-line color="#D6D6DB" />
			<view v-if="current == 0">
				<!-- 题库目录-->
				<view style="margin-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" @click="activeStatus = !activeStatus">
							<view class="video_t2"><u-icon name="arrow-right" size="28" style="transition: all 0.2s" :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 list" :key="index" style="margin-right: 20rpx;display:inline-block">
								<view class="r_t2">
									二级建造师市政..
								</view>
							</view>
						</scroll-view>
					</view> -->
					<view v-if="pageData.typeId === 1" class="catalogBox" :class="activeStatus ? 'changeCatalogBox' : ''">
						<view
							class="catalogA"
							v-for="(item, index) in chapterList"
							:key="index"
							:class="activeStatusCata === item.bankChapterId ? 'activesq' : ''"
							@click="activeList(item, index)"
						>
							{{ item.name }}
						</view>
					</view>
					<view v-else class="catalogBox" :class="activeStatus ? 'changeCatalogBox' : ''">
						<view
							class="catalogA"
							v-for="(item, index) in chapterList"
							:key="index"
							:class="activeStatusCata === item.examId ? 'activesq' : ''"
							@click="getsecSJ(item, index)"
						>
							{{ item.name }}
						</view>
					</view>
				</view>
				<u-line color="#D6D6DB" />
			</view>
			<view v-if="current <= 1">
				<!-- 题库介绍-->
				<view style="margin-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-row>
					<view class="text_box" v-html="pageData.introduction"></view>
				</view>
				<u-line color="#D6D6DB" />
			</view>
			<!-- 出题名师-->
			<view v-if="current <= 2">
				<view style="margin: 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;" v-for="(item, index) in teachersList" :key="index">
							<view><image :src="$method.splitImgHost(item.avatar)" class="teacher_img"></image></view>
							<view class="teacher_t">
								<view>{{ item.teacherName }}</view>
								<view>{{ item.introduce }}</view>
							</view>
						</view>
					</u-row>
				</view>
				<u-line color="#D6D6DB" />
			</view>
			<!-- 相关推荐-->
			<view style="margin: 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>
				<view style="margin: 10rpx;">
					<view class="tj_box" v-for="(item, index) in recommendListS" :key="index" @click="changeComNewPages(item)">
						<image :src="$method.splitImgHost(item.coverUrl)" style="width: 320rpx;height: 160rpx;"></image>
						<view style="font-size: 24rpx;color: #666666;">{{ item.bankName }}</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">
			<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 class="buy" v-if="payStatus === 0" @click="buyTK">
					立即购买
				</view>
				<view class="buy" v-if="payStatus === 1" @click="jumpExam">模拟考试</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="height: 60rpx;line-height: 60rpx;border-bottom: 1rpx solid #eee;display: flex;align-items: center;justify-content: space-between;"
							:style="infoData.bankSectionId === item.bankSectionId ? 'color:#1677ff;' : ''"
							@click="getsec(item)"
						>
							<view>{{ item.name }}</view>
							<u-icon v-if="infoData.bankSectionId === item.bankSectionId" 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.bankName }}</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="btnspric">
				<view class="lefprL">
					实付：
					<span style="color: #E91313;">￥{{ prices }}</span>
				</view>
				<view class="lefprR" @click="getorder">提交订单</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{
					name: '题库目录'
				},
				{
					name: '题库介绍'
				},
				{
					name: '出题名师'
				},
				{
					name: '相关推荐'
				}
			],
			collecStatus: false,
			current: 0,
			activeStatus: false, //课程目录下拉样式变化是否开启
			activeStatusCata: 0, //当前选中章节
			chapterList: [], //章列表
			showBox: false, //弹窗状态
			boxList: [], //弹窗列表
			infoData: [], //当前页面章节数据
			pageData: [], //传入数据
			teachersList: [], //教师数据
			recommendListS: [], //推荐列表
			favoritesLength: 0, //收藏集数量
			errorLists: 0, //错题集数量
			id: 0,
			isDoneListsLenght: 0,
			showPricePop: false, //购买详情弹窗
			newDate: 0, //现在时间戳
			prices: 0, //实付
			payStatus: 0,//是否已购买
		};
	},
	onLoad(option) {
		this.drawProgressbg();
		this.id = option.id;
		var options = {};
		this.$api.bankInfo(option.id).then(res => {
			options = res.data.data;
			this.pageData = res.data.data;
			this.prices = res.data.data.price
			console.log(options);
			if (res.data.data.typeId === 1) {
				this.getBankDList(options);
			} else {
				this.getBankDListSJ(options);
			}
			if (options.teacherIds != null) {
				this.teacherS(options.teacherIds);
			}
			this.recommendList(options);
		});
		this.getHaveThis()
	},
	onShow() {
		if (!uni.getStorageSync('union_id') && this.$store.state.token === '') {
		} else {
			this.favoritesStatus();
			this.favoritesList();
			this.errorList();
			this.isDoneList();
		}
	},
	methods: {
		//检测是否已购买该课程
		getHaveThis(){
			var self = this
			var data = {
				possessId: this.id,
				typeId: 2
			}
			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.bankId,
					num: 1,
					goodsType: 2
				}]
			}
			self.$api.order(data).then(res => {
				if(res.data.code === 200){
					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
					});
				}
			})
		},
		//购买题库
		buyTK(){
			var self = this;
			uni.getStorage({
				key: 'union_id',
				success: function(res) {
					// 继续操作
					self.showPricePop = true;
				},
				fail: function(err) {
					//重新登入
					self.$navTo.togo('/pages/login/login', {});
				}
			});
		},
		isDoneList() {
			var self = this;
			var data = {
				bankId: self.id
			};
			self.$api.questionListrecordDoneList(data).then(res => {
				self.isDoneListsLenght = res.data.rows.length;
				if (res.data.rows.length === 0 && self.pageData.questionNum === 0) {
					self.drawCircle(0);
				} else {
					self.drawCircle(((res.data.rows.length / self.pageData.questionNum) * 2).toFixed(1)); // 0-2
				}
			});
		},
		// 收藏
		favoritesList() {
			var data = {
				bankId: this.id
			};
			this.$api.systemquestionList(data).then(res => {
				this.favoritesLength = res.data.rows.length;
			});
		},
		//错题集
		errorList() {
			if(!this.$method.isLogin()){
				self.errorLists = 0
				return
			}
			var self = this;
			var data = {
				bankId: self.id
			};
			self.$api.questionListrecord(data).then(res => {
				self.errorLists = res.data.rows.length;
			});
		},
		getBankDList(options) {
			if(!this.$method.isLogin()){
				return
			}
			var data = {
				bankId: options.bankId
			};
			this.$api.banklistchapterlist(data).then(res => {
				var chaList = res.data.rows;
				if (chaList.length === 0) {
					uni.showToast({
						title: '暂无相关章节内容',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				var dataset = {
					bankChapterId: res.data.rows[0].bankChapterId
				};
				this.$api.banklistsectionlist(dataset).then(result => {
					this.getsec(result.data.rows[0]);
				});
				this.chapterList = chaList;
			});
		},
		getBankDListSJ(options) {
			if(!this.$method.isLogin()){
				return
			}
			var data = {
				bankId: options.bankId
			};
			this.$api.banklistexam(data).then(res => {
				var chaList = res.data.rows;
				if (chaList.length === 0) {
					uni.showToast({
						title: '暂无相关试卷列表',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				this.getsecSJ(chaList[0]);
				this.chapterList = chaList;
			});
		},
		activeList(item, index) {
			var self = this;
			var dataset = {
				bankChapterId: item.bankChapterId
			};
			this.$api.banklistsectionlist(dataset).then(result => {
				self.boxList = result.data.rows;
			});
			this.showBox = true;
		},
		getsec(item) {
			this.infoData = item;
			this.activeStatusCata = item.bankChapterId;
			this.showBox = false;
		},
		getsecSJ(item) {
			this.infoData = item;
			this.activeStatusCata = item.examId;
			this.showBox = false;
		},
		teacherS(v) {
			var data = {
				teacherIds: v
			};
			this.$api.teacherList(data).then(res => {
				this.teachersList = res.data.rows;
			});
		},
		recommendList(options) {
			var data = {
				bankId: options.bankId
			};
			this.$api.banklistrecommendList(data).then(res => {
				this.recommendListS = res.data.data;
			});
		},
		change(index) {
			this.current = index;
		},
		jumpExam(v) {
			if(!this.$method.isLogin()){
				uni.navigateTo({
					url: '/pages/login/login'
				});
				return
			}
			if (this.pageData.typeId === 1) {
				this.$navTo.togo('/pages2/bank/question', {
					bankSectionId: this.infoData.bankSectionId,
					bankId: this.pageData.bankId,
					typeId: this.pageData.typeId,
					sc: v === 1 ? true : false,
					ct: v === 2 ? true : false
				});
			} else {
				this.$navTo.togo('/pages2/bank/question', {
					examId: this.infoData.examId,
					bankId: this.pageData.bankId,
					typeId: this.pageData.typeId,
					sc: v === 1 ? true : false,
					ct: v === 2 ? true : false
				});
			}
		},
		favoritesStatus() {
			if(!this.$method.isLogin()){
				this.collecStatus = false;
				return
			}
			this.$api.bankCollects(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.bankCollects(self.id).then(results => {
						console.log(results);
						self.$api.bankCollectdelete(results.data.data.collectBankId).then(resz => {
							self.favoritesStatus();
						});
					});
				} else {
					var data = {
						userId: this.$store.state.userInfo.userId,
						bankId: self.id
					};
					this.$api.bankCollectsadd(data).then(res => {
						self.favoritesStatus();
					});
				}
			}
		},
		changeComNewPages(item) {
			this.$navTo.togo('/pages2/bank/detail', {
				id: item.bankId
			});
		},
		drawProgressbg() {
			// 使用 wx.createContext 获取绘图上下文 context
			var ctx = wx.createCanvasContext('canvasProgressbg', this);
			ctx.setLineWidth(6); // 设置圆环的宽度
			ctx.setStrokeStyle('#ececec'); // 设置圆环的颜色
			ctx.setLineCap('round'); // 设置圆环端点的形状
			ctx.beginPath(); //开始一个新的路径
			ctx.arc(30, 30, 25, 0, 2 * Math.PI, false);
			//设置一个原点(110,110)，半径为100的圆的路径到当前路径
			ctx.stroke(); //对当前路径进行描边
			ctx.draw();
		},
		drawCircle(step) {
			var context = wx.createCanvasContext('canvasProgress', this);
			// 设置渐变
			var gradient = context.createLinearGradient(50, 25, 25, 50);
			gradient.addColorStop('0', '#32467B');
			gradient.addColorStop('1.0', '#4FACFE');
			context.setLineWidth(6);
			context.setStrokeStyle(gradient);
			context.setLineCap('round');
			context.beginPath();
			// 参数step 为绘制的圆环周长，从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ，结束角 通过改变 step 的值确定
			context.arc(30, 30, 25, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);
			context.stroke();
			context.draw();
		}
	}
};
</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 */
}
.t4 {
	font-size: 24rpx;
	color: #999999;
}
.big_num {
	font-size: 64rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #32467b;
}
.t1 {
	font-size: 20rpx;
	color: #999999;
}
.t3 {
	font-size: 30rpx;
	color: #32467b;
	font-weight: bold;
}
.progress_box {
	position: relative;
	width: 121rpx;
	height: 121rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.progress_bg {
	position: absolute;
	width: 121rpx;
	height: 121rpx;
}
.progress_canvas {
	width: 121rpx;
	height: 121rpx;
}
.progress_text {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
}
.u-progress-info {
	font-size: 18rpx;
	margin-top: 22rpx;
	color: #32467b;
}
.u-progress-dot {
	font-size: 40rpx;
	font-weight: bold;
	color: #32467b;
}
.box2 {
	width: 28%;
	height: 180rpx;
	background: #ffffff;
	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
	border-radius: 32rpx;
	margin-left: 3%;
}
.box1 {
	width: 38%;
	height: 180rpx;
	background: #ffffff;
	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
	border-radius: 32rpx;
}
.title {
	height: 64rpx;
	background: #ffffff;
	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
	border-radius: 24rpx;
	line-height: 64rpx;
	font-size: 30rpx;
	font-weight: bold;
	color: #0c141f;
	text-align: center;
	margin: 0 auto;
	width: 686rpx;
}
.text_box {
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #666666;
	line-height: 36rpx;
	padding: 20rpx;
}
.price_num {
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #e91313;
}
.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;
}
.detail_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;
	margin-left: 20rpx;
}
.rotoct {
	transform: rotate(90deg);
}
page {
	background: #ffffff;
}
</style>
