<template>
	<view class="commonPageBox commonDetailPage">
		<z-nav-bar title="课程详情"></z-nav-bar>
		<common-anchor-link style="width: 100%" baseHeight="200" ref="commonAnchorLink" :allDataList="allDataList"
			titleKey="title" dataListKey="courseList" :titleStyle="{}" :tabStyle="{background: '#fff'}">
			<template slot="otherContent" slot-scope="slotProps">
				<view v-if="goBuyTitle" class="describe_block">
					<view style=" display: flex; align-items: center;">
						<uni-icons type="info" size="20" color="#fff"></uni-icons>
						<text>{{goBuyTitle}}</text>
					</view>
					<button class="saveBtn flexbox buyBtn" v-if="goBuyType == 0" @click="handleClickGetVip">
						立即购买
					</button>
				</view>
				
				<view v-if="curriculumData.image" style="padding-top:80rpx;">
					<image style="width: 100%" :src="curriculumData.image" mode="widthFix"></image>
				</view>
				<view v-else class="headImage" style="height: 400rpx; background-color: #f5f5f5"></view>
				
				<view class="containerBg1" :style="`${curriculumData.content && curriculumData.content != ''? 'padding:10rpx 0;': ''}`">
					<view class="course_info_box">
						<view class="course_info">
							<view class="flexbox course_title" v-if="curriculumData.id">
								<text class="courseTitle title">{{ curriculumData.title }}</text>
							</view>
							<view style="color: #b0b0b0; padding: 0 20rpx 10rpx;">
								{{ cateList && cateList.length > 0 ? `共${cateList.length}个目录` : "" }}
							</view>
							<view class="containerBg" v-if="curriculumData.content && curriculumData.content != ''">
								<view class="prof">
									<view style="padding: 0 20rpx" @click="isHideCourseInfo = !isHideCourseInfo">
										<view :class="`${isHideCourseInfo ? 'hidden2' : ''}`"
											style="width: calc(100% - 50rpx)" v-html="curriculumData.content">
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</template>
			<template slot="label" slot-scope="slotProps">
				<view class="containerBg2" style="padding-top: 20rpx">
					<view class="catalogueTitle chapter_title">
						<view class="top">
							<view style=" display: flex; align-items: center;">
								<view class="line"></view>
								<view class="left">
									<text style="font-weight: blod" class="catalogue_title">{{ slotProps.data.title }}</text>
								</view>
							</view>
							
							<view class="not_purchased" v-if="slotProps.data.type != 0">
								<view class="spot"></view>
								<view>
									<text v-if="userVip==null&&slotProps.data.isBuy!=1">未购买</text>
									<view v-if="userVip==null&&slotProps.data.isBuy==1">
										<text v-if="slotProps.data.endTime">课程有效期截止到：<br/>{{slotProps.data.endTime}} </text>
										<text v-else>已购买</text>
									</view>
									<text v-if="userVip!=null">有效期至{{ userVip.endTime }}</text>
								</view>
							</view>
							<view class="right">
								<u-icon v-if="userVip==null&&slotProps.data.type != 0&&slotProps.data.isBuy!=1"
									@click="handleClickGetGoodsList(slotProps.data)" class="editIcon" name="shopping-cart-fill"
										color="#FF2B57" size="30"
										style="display: inline-block; margin-left: 10rpx"></u-icon>
								
								<text v-if="slotProps.data.type == 0&&userVip==null&&slotProps.data.isBuy!=1" style="color: #fff; font-size: 12px" class="fdButtonBox aui-text-success"
									@click="handleClickGetGoodsList(slotProps.data)">领取课程</text>
							</view>
						</view>
					</view>
				</view>
			</template>

			<template slot="contentList" slot-scope="slotProps">
				<view class="containerBg2">
					<view class="shiting_content">
						<view class="catalogueList">
							<view class="chapter_content">
								<courseDescription :isCondition="true" :dataList="slotProps.dataList"
									@hancleClick="gotoDetail" label="title">
									<template slot="labelSlot" slot-scope="slotProps">
										<view :style="`${
											slotProps.row.isAudition==1
											  ? 'width:calc(100% - 100rpx);float:left;'
											  : 'width:100%;'}`">
											<text :class="`${slotProps.row.viewFlg == 1 ? 'aui-text-success' : ''}`">{{ slotProps.row.title }}</text>
										</view>
									</template>

									<template slot="leftSlot" slot-scope="slotProps">
									</template>
									<template slot="rightSlot" slot-scope="slotProps">
										<text class="fdButtonBox aui-text-success" style="background: none"
											v-if="slotProps.row.isAudition == 1">试听</text>
									</template>
								</courseDescription>
							</view>
							<view class="small_class_teaching_box">
								<view class="small_class_teaching_content">
									<view class="schedule">
										<view class="icon_box">
											<image src="@/static/icon/course_07.png" mode="aspectFil" class="icon1">学习进度
											</image>
										</view>
										<view class="progress_box">
											<view class="progress_icon" style="">
												<u-line-progress activeColor="#294a97"
													height="10" :percentage="slotProps.data.completion"
													:showText="false"></u-line-progress>
												<text style="
													font-size: 28rpx;
													margin-left: 20rpx;
													margin-top: -2rpx;
													font-weight: 700;
												  ">{{ slotProps.data.completion }}%</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</template>
		</common-anchor-link>
		<common-select-goods ref="commonSelectGoods" :selectGoodsData="selectGoodsData" :goodsList="goodsList"
			:buyOptions="buyOptions" :customButtonGroup1="customButtonGroup1" @selectGoods="handleClickSelectGoods"
			@onHandleClickBuy="
        $refs.commonSelectGoods.close();
        protocolShow = true;
      "></common-select-goods>

		<u-popup :show="protocolShow" mode="center" round="6">
			<view class="popup_box">
				<view class="title">温馨提示</view>
				<view class="content">
					<view class="center">
						用户您好，本软件对于一个用户名及密码仅允许一部电子设备登陆，多部设备使用同一用户名操作软件的行为属于违规操作，发现违规一次将提出警告，再次违规您的用户名将被封号，无法正常登陆，如因此对您使用带来不便，敬请谅解。<br />
						课程购买之后一年内不打开，此一年内不会计算有效学习时间，一年后会自动开始计算有效学习时间。<br />
						本课程一经购买，暂不支持退款，敬请谅解。<br />
						<view style="color: red; font-weight: bold"> 注: </view>
						<view>
							1.手机、pad、电脑均为可登陆电子设备，均有唯一标识码，一个用户名仅允许在一个手机或一个ipad或一个电脑登陆，请根据您的使用习惯自行选择。<br />
							2.如若申请变更登陆设备请联系客服，<br />
							客服电话:13110039505;022-24142321<br />
							客服微信号:yilujiankangkefu<br />
							3.如因违反上述使用规定...概不退款，本公司保留追究用户相关法律责任的权利。<br />
							4.点击“同意”按钮即表示您同意遵守以上条款。
						</view>
					</view>
					<view class="bottom">
						<view class="button_box">
							<u-button size="small" text="不同意" @click="protocolShow = false"></u-button>
							<u-button text="同意" color="#7dc1f0" size="small" @click="onHandleClickBuy"></u-button>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import courseDescription from "@/pages/component/commonComponents/list";
	import $http from "@/config/requestConfig.js";
	import {
		mapState
	} from "vuex";
	export default {
		components: {
			courseDescription, //课程说明
		},
		// 监听页面滚动
		onPageScroll(event) {
			this.$refs.commonAnchorLink.pageScroll(event);
		},
		data() {
			return {
				isHideCourseInfo: true,
				courseList: [],
				showGoBuy: true,
				protocolShow: false,
				options: {},
				percentage: 0,
				selectGoodsData: {},
				buyOptions: [],
				customButtonGroup1: [{
					with: 200,
					text: "立即购买",
					backgroundColor: "linear-gradient(90deg, #294a97 0%,#7dc1f0 100%)",
					color: "#fff",
				}, ],
				relatedCoursesList: [], //相关课程
				goodsList: [], //课程相关商品
				curriculumData: {},
				curriculumInfo: {},
				fdButtonStyle: {
					width: "120rpx",
					"border-color": "$themeColor",
					color: "$themeColor",
					float: "right",
					"margin-right": "20rpx",
					"margin-left": "30rpx",
				},
				modalInfo: {},
				vip: {},

				show: false,
				playData: {},
				taiHuClassInfo: {},
				searchValue: "",
				goBuyTitle: "",  //顶部文案显示
				goBuyType: "",
				description: "",
				cateList: [], // 一级分类标题1
				twoCateList: [], // 二级分类标题
				dataList: [], // 方剂标题
				allDataList: [], // 方剂标题
				currentStatusIndex: 0, // 当前选中的一级分类
				currentCateIndex: 0, // 当前选中的一级分类
				curTwoCateIndex: 0, // 当前选中的二级分类
				searchList: [], // 搜索结果数组
				showSearchList: false,
				userMes: {}, // 用户信息
				searchDisable: false, // 搜索不可用
				limitShow: false,
				limitTitle: "提示",
				limitContent: "",
				scrollViewHeight: 0,
				urlList: {
					curriculumInfo: "sociology/course/getCourseCatalogueChapterList",
					list: "sociology/course/getCourseDetail",
					goodsList: "sociology/product/getProductListForCourse",
					startStudyForMF: "sociology/course/startStudyForMF",
				},
				userMsg: {},
				userVip: null,  //是否是vip
				courseVipModule: [],  //该课程需要什么类型的vip
				textList: [],  //转化文字集合
			};
		},
		onLoad(options) {
			this.options = options;
			//是否是vip
			this.getCourseByVip();
		},
		onHide() {
			this.selectGoodsData = {};
			this.protocolShow = false;
			this.handleClickClose();
			this.$refs.commonSelectGoods.close();
		},
		onUnload() {
			this.selectGoodsData = {};
			this.protocolShow = false;
			this.$refs.commonSelectGoods.close();
		},
		computed: {
			...mapState(["userInfo"]),
		},
		onShow() {
			this.protocolShow = false;
			this.$nextTick(() => {
				this.getCourseDescriptionData();
			});
		},
		methods: {
			//点击顶部按钮
			handleClickGetVip() {
				uni.navigateTo({
					url: "/pages/vip/index",
				});
			},
			//获取信息
			getUserInfo() {
				this.$http.post("common/user/getUserInfo").then((res) => {
					this.userMsg = res.result
				});
			},
			
			//获取是否是vip
			getCourseByVip(){
				this.$http.request({
					url: 'common/userVip/ownCourseCatalogueByVip',
					method: "POST",
					data: {
						courseId: this.options.id
					},
					header: {
						"Content-Type": "application/json",
					},
				})
				.then((res) => {							
					if (res.code == 0) {
						//如果有userVip，说明是符合课程的vip身份
						if(res.userVip){
							this.userVip = res.userVip;
							let type = res.userVip.type;
							let role = '';
							if(type==4){
								role = '中医学';
							}else if(type==5){
								role = '针灸学';
							}else if(type==6){
								role = '肿瘤学';
							}else if(type==7){
								role = '国学';
							}else if(type==8){
								role = '心理学';
							}
							this.goBuyTitle = '尊贵的'+role+'VIP，您的有效期到'+res.userVip.endTime;
							this.goBuyType = 1;
						}else{  //否则没有开通vip
							this.goBuyTitle = '';
							this.goBuyType = 0;
							this.getCourseVipModule();
						}
					}
				})
			},
			//判断需要什么类型的vip
			getCourseVipModule(){
				this.$http.request({
					url: 'common/userVip/getCourseVipModule',
					method: "POST",
					data: {
						courseId: this.options.id
					},
					header: {
						"Content-Type": "application/json",
					},
				})
				.then((res) => {						
					if (res.code == 0) {
						this.courseVipModule = res.list;
						let text = '';
						this.courseVipModule.forEach((item, index) => {
							if(item=='4'){
								text = '中医学';
							}else if(item=='5'){
								text = '针灸学';
							}else if(item=='6'){
								text = '肿瘤学';
							}else if(item=='7'){
								text = '国学';
							}else if(item=='8'){
								text = '心理学';
							}
							this.textList.push(text);
						});
						
						const joinedText = this.textList.join('/');
						this.goBuyTitle = '购买'+joinedText+'VIP，即可畅享更多专属权益';
					}
				})
			},
			handleClickSelectGoods(data) {
				this.selectGoodsData = data;
				this.$forceUpdate();
			},
			onHandleClickBuy(e) {
				var mynavData = {
					goods: [this.selectGoodsData],
					typeId: 0,
					navTitle: this.options.navTitle,
					title: this.options.title,
					sourceType: "curriculum",
				};
				uni.setStorageSync('mynavData', mynavData);
				uni.navigateTo({
					url: '/pages/goods/order',
				});
			},
			handleClickClose() {
				this.show = false;
				this.goodsList = [];
				this.selectGoodsData = {};
			},
			//获取相关关联课程商品
			handleClickGetGoodsList(v) {
				if (v.type == 0) {
					//免费
					this.$http
						.request({
							url: this.urlList.startStudyForMF,
							method: "POST",
							data: {
								catalogueId: v.id,
							},
							header: {
								"Content-Type": "application/json",
							},
						})
						.then(async (res) => {
							if (res.code == 0) {
								this.getCourseDescriptionData();
							}
							this.$forceUpdate();
						});
				} else if (v.type == 2 && this.userVip==null) {
					uni.showModal({
						title: '提示',
						content: '当前课程目录是VIP专享，开通VIP可观看',
						confirmText: '好的',
						showCancel: false
					})
				} else {
					this.getProductListForCourse(v);
				}
			},
			getProductListForCourse(v){
				this.isFudu = false
				this.$http.request({
					url: this.urlList.goodsList,
					method: "POST",
					data: {
						id: v.id,
					},
					header: {
						"Content-Type": "application/json",
					},
				})
				.then(async (res) => {							
					if (res.productList.length > 0) {
						this.goodsList = res.productList;
						this.selectGoodsData = this.goodsList[0];
						this.$refs.commonSelectGoods.open();
						this.show = true;
					} else {
						this.$commonJS.showToast("此课程暂无购买方式");
					}
					this.$forceUpdate();
				})
			},
			//课程详情
			async gotoDetail(v, index) {
				if (
					this.cateList[this.currentCateIndex].isBuy == 1 ||
					v.isAudition == 1 || this.cateList[this.currentCateIndex].type==0 ||
					this.userVip!=null
				) {
					uni.navigateTo({
						url: `/pages/curriculum/order/detail?navTitle=${this.options.navTitle}&title=${v.title}&id=${v.id}&conditions=${v.conditions}&detailOid=${v.detailOid}&curriculumImgUrl=${this.curriculumData.image}`,
					});
				} else {
					this.$commonJS.showToast("请先购买课程");
				}
			},
			//获取章节
			async getChapterList(v) {
				var list = [];
				var that = this;
				uni.showLoading({
					title: '加载中'
				})
				await $http.request({
					url: this.urlList.curriculumInfo,
					method: "POST",
					data: {
						id: v.id,
					},
					header: {
						"Content-Type": "application/json",
					},
				})
				.then(async (res) => {
					uni.hideLoading();
					if (res.code == 0 && res.chapterList.length > 0) {
						list = JSON.parse(JSON.stringify(res.chapterList));
					} else {
						list = [];
					}
					this.$forceUpdate();
				});
				return list;
			},
			//获取数据
			getCourseDescriptionData() {
				var data = {};
				var that = this;
				this.$http.request({
					url: this.urlList.list,
					method: "POST",
					data: {
						id: this.options.id,
					},
					header: {
						"Content-Type": "application/json",
					},
				})
				.then(async (res) => {
					that.curriculumData = res.data.course;
					that.cateList = [...res.data.catalogues];
					for (let i = 0; i < that.cateList.length; i++) {
						var list = await that.getChapterList(that.cateList[i]);

						that.allDataList[i] = {
							...that.cateList[i],
							courseList: [...list],
						};
					}

					setTimeout(() => {
						that.$refs.commonAnchorLink.getDistanceArr();
					}, 200);
					this.$forceUpdate();
				});
			},
		},
		onBackPress() {
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord();
			// #endif
		},
	};
</script>

<style lang="scss" scoped>
	@import "@/static/mixin.scss";
	.commonPageBox{
		height: 100vh;
		background: #eff5f8 !important;
	}
	.searchList {
		.item {
			font-size: 28rpx;
			padding: 20rpx;
			border-bottom: 1px solid #dadbde;
		}
	}

	.scroll-view_H {
		background-color: #fff;
		white-space: nowrap;
		padding: 10rpx;
	}

	.contentBox {
		height: calc(100% - 50px);

		.statusList {
			padding: 10rpx;
			box-sizing: border-box;
			justify-content: space-between;

			text {
				text-align: center;
				display: inline-block;
				width: 32%;
				padding: 20rpx 0;
				font-size: 34rpx;
				border-radius: 10rpx;
			}

			.cur {
				background-color: $themeColor;
				color: #fff;
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			}
		}

		.twoCateList {
			font-size: 28rpx;
			margin-top: 20rpx;

			.grid-text {
				padding: 10rpx 0rpx;
				text-align: center;
			}

			.cur {
				color: $themeColor;
			}

			// .u-grid-list{border: 0.5px solid #dadbde;}
		}

		.dataList {
			font-size: 26rpx;
			// margin-top: 20rpx;
			// padding: 32rpx 0rpx;
			border-radius: 10rpx;
			background-color: #f8f9fa;
			box-sizing: border-box;

			.JFtitleItem {
				background-color: #ffffff;
				padding: 20rpx 10rpx;
				width: 100%;
				border-bottom: 0.5px solid #f8f9fa;
			}

			.wmzhimg {
				width: 220rpx;
				height: 220rpx;
			}
		}
	}

	.search_box {
		margin: 0 auto;
		overflow: hidden;
		align-items: center;
		width: calc(100% - 10px);
		margin-top: 20rpx;
		margin-bottom: 20rpx;

		.search {
			height: 56upx;
			display: flex;
			width: 86%;
			margin: 0 auto;
			align-items: center;
			padding: 0upx 40upx;
			background-color: #fff;
			border-radius: 20upx;
			box-shadow: 0 0px 10px 1px $themeColor;
		}

		.prompt {
			color: #838383;
			font-size: 24rpx;
		}

		.icon_search {
			background-image: url("@/static/icon/map_ic_search.png");
			background-position: center center;
			background-repeat: no-repeat;
			background-size: cover;
			width: 36upx;
			height: 36upx;
			margin-right: 20upx;
		}
	}

	.flexbox {
		display: flex;
		background-color: transparent !important;
	}

	.uni-modal .uni-modal__bd {
		text-align: left;
	}

	.limiTy {
		font-size: 28rpx;
		line-height: 46rpx;
	}

	.chImage {
		height: 100rpx;
	}

	.dataList {
		height: 100%;
	}

	.titleList2 {
		height: calc(100% - 150rpx);
	}

	.priceDetail {
		height: calc(100% - 180rpx) !important;
		padding: 0rpx 0;
		box-sizing: border-box;
	}

	.componentPage {
		height: calc(100% - 90rpx) !important;
	}

	.dateReminder {
		width: 100%;
		font-size: 24rpx;
		text-align: right;
		line-height: 40rpx;
	}

	.fdButtonBox {
		border: 1rpx solid $themeColor;
		background-color: $themeColor;
		color: $themeColor;
		float: right;
		padding: 10rpx 14rpx;
		font-size: 24rpx;
		font-weight: 500;
		line-height: 30rpx;
		border-radius: 10rpx;
		box-sizing: border-box;
	}

	.fdButtonBoxRed {
		border: 1rpx solid red;
		background-color: red;
		padding: 8rpx 14rpx;
		font-size: 28rpx;
	}

	.headImage {
		// height: 600rpx !important;
	}

	.commonDetailPage {}

	.curriulum_box {
		margin-top: 20rpx;
		width: 100%;

		.curriulum_title_box {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			background-color: #fff;

			.curriulum_title {
				width: calc(100% - 80rpx);

				font-size: 32rpx;
				line-height: 40rpx;
				padding: 20rpx;
				box-sizing: border-box;
			}
		}
	}

	/deep/.titleItem {
		// width: calc(100% - 120rpx) !important;
	}

	/deep/.scroll-view-item:nth-child(2n-1) {
		background-color: transparent !important;
	}

	.dataList {
		height: auto !important;
	}

	.small_class_teaching_box {
		width: 100%;
		margin-top: 20rpx;
		// background: #f0fbf3;

		.small_class_teaching_top {
			padding: 20rpx 20rpx 0 10rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			// background: #EDFCF7;
			color: #8f8e8e;

			// box-shadow: 0px 0px 6rpx 0px #E9DCCC;
			.icon1 {
				width: 50rpx;
				height: 50rpx;
			}

			.small_class_teaching_top_left {
				display: flex;
				align-items: center;
				color: #294a97;

				font-family: MicrosoftYaHei;
			}
		}

		.small_class_teaching_content {
			margin-top: 0rpx;
			// background: #EDFCF7;
			padding-bottom: 10rpx;

			.top {
				padding: 20rpx 20rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 4rpx solid #fff;

				.top_item {
					width: 23%;
					font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
					font-weight: normal;
					font-size: 34rpx;
					color: #294a97;
					line-height: 80rpx;
					background: #cef8ea;
					text-align: center;
					border-radius: 10rpx;
					box-shadow: 0px 0px 6rpx 0px #e9dccc;
				}
			}

			.schedule {
				width: 100%;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 10rpx 0;
				box-sizing: border-box;
				align-items: center;
				color: #294a97;

				.icon_box {
					width: 100px;
					display: flex;
					align-items: center;
					margin-bottom: 0rpx;
					font-weight: 700;

					.icon1 {
						width: 50rpx;
						height: 50rpx;
						margin-right: 10rpx;
					}
				}

				.progress_box {
					width: calc(100% - 180rpx);
					display: flex;
					align-items: center;
					justify-content: space-between;
					position: relative;

					.progress_icon {
						width: calc(100% - 60rpx);
						display: flex;
						align-items: center;
					}

					.icon1 {
						width: 60rpx;
						height: 60rpx;
						margin: 0 20rpx;
					}

					.icon2 {
						width: 140rpx;
						height: 100rpx;
						position: absolute;
						right: 0;
						// margin-top: -20rpx;
					}
				}
			}
		}
	}

	.related_courses_box {
		background-color: #fff;

		.small_class_teaching_content {
			padding: 10rpx 20rpx;
			box-sizing: border-box;
		}
	}

	.related_courses_name {
		display: inline-block;
		width: calc(100% - 150rpx) !important;

		.aui-text-danger {
			display: inline-block;
			float: right;
		}
	}

	// .common_curriculum_list{

	// }

	.goods_box {
		padding: 40rpx 20rpx;
		padding-bottom: 150rpx;

		.goods_item {
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;
			padding: 10rpx 20rpx;
			border: 2rpx solid #fff;
			border-radius: 10rpx;
		}

		.title {
			box-sizing: border-box;
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		.image_box {
			width: 70rpx !important;
			height: 70rpx !important;
			float: left;
			background-color: #f5f5f5;
		}

		.goods_image {
			width: 100%;
			height: 100%;
		}

		.goods_info {
			width: calc(100% - 100rpx);
			// padding: 10rpx 20rpx;
			box-sizing: border-box;
			// height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			float: left;

			.name {
				font-size: 30rpx;
				font-weight: 600;
				color: #333;
			}

			.price {
				font-size: 26rpx;
				color: #aaa;
				font-weight: 600;
			}
		}

		.isSelectGoods {
			color: $themeColor !important;

			.name {
				color: $themeColor !important;
			}

			.price {
				color: $themeColor !important;
			}

			border: 2rpx solid $themeColor;
			border-radius: 10rpx;
		}
	}

	.popup_box {
		padding-bottom: 20rpx;
		width: 85vw;
		overflow: hidden;
		position: relative;
		height: auto;

		.title {
			font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
			font-weight: normal;
			font-size: 46rpx;
			color: #294a97;
			background-color: #f5f5f5;
			padding: 20rpx;
			border-top-left-radius: 6px;
			border-top-right-radius: 6px;
		}

		.content {
			font-size: 26rpx;
			letter-spacing: 0.15rpx;
			padding: 20rpx;
			color: #3f3f3f;

			.top {
				margin: 30rpx 0;
			}

			.center {
				line-height: 40rpx;
				// padding:0 10rpx;
			}

			.bottom {
				width: 100%;
				margin-top: 60rpx;

				font-size: 24rpx;
				line-height: 26rpx;
				color: #b0b0b0;
			}
		}

		.button_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20rpx;

			.u-button {
				margin-left: 40rpx;
			}

			.u-button:nth-child(1) {
				margin-left: 0;
			}
		}
	}

	.saveBtnss {
		align-items: center;
		justify-content: center;
		height: 80rpx;

		// width: 46%;
		overflow: hidden;
		border-radius: 50rpx;

		text {
			padding-left: 10rpx;
			font-size: 28rpx;
		}
	}

	.vipBtn {
		@include theme("vipbtnbg");
		border-radius: 100rpx;
		justify-content: center;
		width: auto;
		padding: 0 20rpx;
		color: #fff;
		margin: 10rpx auto;
	}

	.buyBtn {
		background: #f42c32 !important;
	}

	/deep/.u-alert--warning--light {
		background-color: none !important;
	}

	/deep/.u-alert__text--warning--light {
		color: #fff !important;
	}

	/deep/.u-alert {
		background: none !important;
	}

	/deep/.u-icon__icon--warning {
		color: #fff !important;
	}

	/deep/.uni-section {
		background: transparent !important;
	}

	/deep/.uni-section .uni-section-header {
		padding-top: 10rpx !important;
		padding-bottom: 10rpx !important;
	}

	/deep/.uni-section .uni-section-header {
		padding-left: 0rpx !important;
	}

	/deep/.u-line-progress__background{
		background: #fff !important;
	}
	.course_info_box {
		
		.course_info {
			overflow: hidden;
			padding-bottom: 10rpx;
		}
	}

	.catalogue_title {
		background: #294a97;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		font-size: 42rpx;
		font-weight: bold;
		letter-spacing: 4rpx;
	}

	.chapter_content {
		border: 4rpx solid #fffffc;
		background: rgba(255, 255, 255, 0.85);
		box-shadow: 0px 0px 4px 0px rgba(46, 114, 123, 0.6) !important;
		border-top-right-radius: 40rpx;
		border-bottom-left-radius: 40rpx;

		.videoList {
			display: flex;
			align-items: center;
			
			.video_item {
				width: 24%;
				font-size: 22rpx;
				margin: 10rpx 0;
				background: rgba(255, 255, 255, 0.85);
				box-shadow: 0 2px 12px 0 rgba(255, 255, 255, 0.1);
				border-radius: 10rpx;
				padding: 10rpx 20rpx;
				margin-right: 1%;

				color: #333;
				letter-spacing: 2rpx;
			}
		}
	}

	.line {
		width: 16rpx;
		height: 50rpx;
		border-top-right-radius: 12rpx;
		border-bottom-right-radius: 12rpx;
		margin-right: 20rpx;
		background: #294a97;
	}

	.containerBg2 {
		width: 100%;
		// padding-top: 40rpx;
		// margin-top: 100rpx;

		.shiting {
			line-height: 100rpx;
			background: linear-gradient(130deg, #4fa1fd 0%, #12f3ff 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			margin-bottom: 20rpx;
			color: #fff;
			font-size: 72rpx;
			text-align: center;
		}

		.shiting_content {
			
		}
	}

	.chapter_title {
		width: 100%;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		position: relative;
		
		.top {
			width: 100%;
			display: flex;
			align-items: center;

			.left {
				display: flex;
				align-items: center;
			}

			.right {
				position: absolute;
				right: 0;
			}
		}

		.not_purchased {
			position: relative;

			.spot {
				width: 8rpx;
				height: 8rpx;
				position: absolute;
				right: -4rpx;
				border-radius: 8rpx;
				background-color: #33435d;
				bottom: -4rpx;
			}

			color: #33435d;
			margin-left: 20rpx;
			font-size: 24rpx;
			padding: 0 20rpx;
			border-bottom: 2rpx dotted #33435d;

			text {
				margin: 0 10rpx;
				letter-spacing: 1rpx;
			}
		}
	}

	.course_title {
		align-items: center;
		justify-content: space-between;
		background: #fff;
	}

	.catalogueTitle {
		justify-content: space-between;
		overflow: hidden;
		margin-bottom: 20rpx;
		font-size: 40rpx;

		.learnBtn {
			margin-bottom: 20rpx;
			width: 150rpx;
			text-align: center;
			border: 1px solid $themeColor;
			color: $themeColor;
			line-height: 60rpx;
			height: 60rpx;
			font-size: 28rpx;
			margin-top: 40rpx;
		}

		.price {
			color: #ff582e;
			font-size: 32rpx;

			i {
				font-style: normal;
				font-size: 60rpx;
				font-weight: bold;
			}
		}

		.title {
			display: block;
			font-size: 30rpx;
			margin-top: 20rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		.saveBtn {
			align-items: center;
			justify-content: center;
			height: 80rpx;
			background-color: #00d8df;
			// width: 46%;
			overflow: hidden;
			border-radius: 30rpx;

			text {
				padding-left: 10rpx;
				font-size: 28rpx;
				color: #fff;
			}
		}
	}

	.prof {
		font-size: 26rpx;
		line-height: 50rpx;
		padding-bottom: 10rpx;
		color: #333;
	}

	.containerBg1 {
		background: #fff;
		border-top: 1px solid #fff;
		margin-top: -4rpx;
	}

	.courseTitle {
		width: calc(100% - 220rpx);
		padding: 20rpx;
		font-size: 38rpx;
		font-weight: bold;
		background-size: cover;
		background-repeat: no-repeat;
	}

	.catalogueList {
		padding-bottom: 40rpx;
	}

	.catalogueList:nth-child(1) {
		margin-top: 0 !important;
	}

	/deep/.section {
		padding-top: 0 !important;
	}

	/deep/.section_box {
		padding-top: 0 !important;
		background: #eff5f8 !important;
	}
	
	
	.describe_block{
		padding: 15rpx 20rpx;
		background: linear-gradient(90deg, #294a97 0%, #7dc1f0 80%);
		position: fixed; 
		left: 0;
		width: 100%;
		z-index: 10;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.describe_block text{
		display: block;
		font-size: 26rpx;
		padding-right: 10rpx;
	}
	.describe_block button{
		display: inline-block;
		text-align: center;
		width: 125rpx;
		font-size: 24rpx;
		color: #fff;
		border-radius: 10rpx;
		line-height: 50rpx;
		height: 50rpx;
	}
	.hidden2{
		line-height: 20px;
		max-height: 60px;
	}
</style>