<template>
  <view class="container commonPageBox commonDetailPage">
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>
    <template v-show="!screenLoading">
      <z-nav-bar bgColor="#333" fontColor="#fff" title="教学内容"></z-nav-bar>

      <view
        class="contentBox curriculum_box"
        :style="`height:calc(100% - ${60 + statusBarHeight}px !important; overflow-x: hidden; ${
          isFullScreen ? 'background:#000' : ''
        }`"
      >
	  <!-- 加密视频 -->
        <view :style="`background:#000`">
          <common-video
            @changeScreen="changeScreen"
            @changeScreenLoading="changeScreenLoading"
			@hideNextVideo="hideNextVideo"
			@startNextVideoCountDown = "startNextVideoCountDown"
			@unlockChangeVideo="unlockChangeVideo"
            v-if="isfresh"
            ref="commonVideo"
			:secondCountDown="secondCountDown"
			 :videoTitle="curriculumData.title"
            :currentVideo="currentVideo"
			:noRecored = "noRecored"
            :currentVideoList="videoArray"
          >
          </common-video>
          <view style="height: 200px" v-else></view>
        </view>		
        <scroll-view
          :style="`height:calc(100% - 200px - 40rpx) ;`"
          scroll-y="true"
          class="scroll-Y"
          style="background-color: #fff"
        >
          <view
            class="PM_font"
            style="padding: 20rpx; font-size: 40rpx; color: #2979ff"
            >视频教学</view
          >
          <view class="scroll-view-item">
            <view style="padding: 20rpx; font-size: 26rpx">
              课程：{{ options.navTitle }}
            </view>
            <view
              style="padding: 20rpx; margin-bottom: 40rpx; font-size: 26rpx"
            >
              章节：{{ curriculumData.title }}
            </view>
            <common-curriculum-video
              v-if="videoArray && videoArray.length > 0"
              :detailInfo="curriculumData"
              :currentVideo="currentVideo"
              :dataList="videoArray"
              @open="changeVideo"
			  :changeVideoLock="changeVideoLock"
            >
            </common-curriculum-video>
          </view>

          <view
            class="PM_font"
            style="padding: 20rpx; font-size: 40rpx; color: #333"
            >文章简介</view
          >
          <view class="scroll-view-item">
            <common-rich-detail :detailInfo="{ ...curriculumData, title: '' }">
              <template #richHeadImg>
                <image
                  v-if="curriculumData.imgUrl"
                  @click="previewImage(curriculumData.imgUrl)"
                  :src="curriculumData.imgUrl"
                  mode="widthFix"
                  class="headImage"
                ></image>

                <!-- <image :src="detailInfo.imgUrl" v-if="detailInfo.imgUrl" mode="widthFix" class="headImage"></image> -->
              </template>
            </common-rich-detail>
          </view>
        </scroll-view>
        <p class="aui-text-danger" style="text-align: center">
          本课程版权归天津众妙之门科技有限公司所有，翻版必究!
        </p>
        
      </view>
    </template>

    <view
      style="
        background-color: red;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      "
      v-show="screenLoading"
    >
    </view>   
  </view>
</template>

<script>
import courseDescription from "@/pages/component/commonComponents/list";
import curriculumMp3 from "./mp3Detail.vue";
import price from "./price/index.vue";

import $http from "@/config/requestConfig.js";
import { mapState } from "vuex";
export default {
  components: {
    courseDescription, //课程说明
    price, //课程价格
    curriculumMp3, //mp3
  },
  data() {
    return {
		changeVideoLock:false, // 切换键锁
      isFullScreen: false,
      screenLoading: false,
      isfresh: false,
      currentCateIndex: 0,
      currentVideo: {},
	  secondCountDown:10,
	  countDownTimer:undefined,
      videoList: {},
      isOpenMp3: false,
      praise: "",
      reward: "",
      commentLst: [],
      correlationiList: [
        // { name: "点赞", type: 'dianzan', icon: "thumb-up-fill", iconType: 'uview', iconSize: 22, color: '$themeColor' },
        //{ name: "打赏", type: 'dashang', icon: "red-packet-fill", iconType: 'uview', iconSize: 22, color: '#ff3d00' },
        //{ name: "评论", type: 'pinglun', icon: "chat-fill", iconType: 'uview', iconSize: 22 },
      ],
      options: {},
      videoArrayHW: [],
      videoArray: [],
      relatedCoursesList: [], //相关课程
      medicalCasesList: [], //相关医案
      curriculumData: {},
      curriculumInfo: {},
      fdButtonStyle: {
        width: "120rpx",
        "border-color": "#000",
        color: "#000",
        float: "right",
        "margin-right": "20rpx",
        "margin-left": "30rpx",
      },
      modalInfo: {},

      show: false,
      playData: {},
      taiHuClassInfo: {},
      searchValue: "",
      ordersTabs: [
        {
          name: "视频教学",

          type: "1",
        },
        {
          name: "文章简介",
          type: "2",
        },
      ], // 一级分类标题1
      cateList: [], // 一级分类标题1
      twoCateList: [], // 二级分类标题
      dataList: [], // 方剂标题
      allDataList: [], // 方剂标题
      currentStatusIndex: 0, // 当前选中的一级分类

      curTwoCateIndex: 0, // 当前选中的二级分类
      searchList: [], // 搜索结果数组
      showSearchList: false,
      userMes: {}, // 用户信息
      searchDisable: false, // 搜索不可用
      limitShow: false,
      limitTitle: "提示",
      limitContent: "",
      scrollViewHeight: 0,
	  noRecored:null, // 是否为试听资源
      urlList: {
        detail: "sociology/course/getCourseCatalogueChapterDetail",
        curriculumInfo: "app/phone.do?getCourseInfo",
      },
    };
  },
  onLoad(options) {
	// #ifdef APP-PLUS
    plus.screen.lockOrientation("default");
// #endif
    this.options = options;
	this.noRecored = options.noRecored
	console.log('this.noRecored=>',this.noRecored)
    this.screenLoading = false;

    this.currentCateIndex = this.options.videoIndex
      ? this.options.videoIndex
      : 0;
    // #ifdef APP-PLUS
    plus.screen.unlockOrientation(); // 解除锁定屏幕方向
    plus.screen.lockOrientation("portrait-primary");
	
    this.getCourseDescriptionData();

    // this.getUserInfo()
    // this.getCateList()
  },
  beforeDestroy(){
	  console.log('页面卸载')
	  this.hideNextVideo()
  },
  onUnload(){	 
	  
  },
  onHide() {
	  // this.hideNextVideo()
    // this.showSearchList = false
    // this.searchList = []
  },
  onShow() {
    // #endif
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  methods: {
	  unlockChangeVideo(){
		  this.changeVideoLock = false
	  },
	  startNextVideoCountDown(){
		  this.secondCountDown = 10
		  let that = this
		  if(this.countDownTimer){
			  clearInterval(this.countDownTimer)
		  }
		  this.countDownTimer = setInterval(()=>{
			  this.secondCountDown -= 1
			  if(this.secondCountDown == 0){
				  // clearInterval(this.countDownTimer)
				  // console.log('倒计时结束');
				  that.hideNextVideo()
				  console.log('切换之前的播放index是',this.currentCateIndex);
				  // console.log('当前的播放列表',this.videoArray.length);
				  // if(this.currentCateIndex < this.videoArray.length-1){
					  this.currentCateIndex++
					   console.log('切换之后的播放index是',this.currentCateIndex);
					  that.changeVideo(this.videoArray[this.currentCateIndex])
				  // }
			  }
		  },1000)
	  },
    hideNextVideo(){		
		console.log('父组件收到了取消加载-------------------');
		clearInterval(this.countDownTimer)
		this.countDownTimer = undefined		
	},

    //课程详情
    async gotoDetail(v, index) {
      console.log(
        this.cateList[this.currentCateIndex],
        8888888888888888888888888
      );

      if (
        this.cateList[this.currentCateIndex].isBuy == 1 ||
        v.isAudition == 1 ||
        this.vip.type != "0"
      ) {
        uni.navigateTo({
          // url: '../bookShop/commodityDetail?id=' + item.id
          url: `/pages/curriculum/order/curriculum/detail?navTitle=${this.options.navTitle}&title=${v.title}&id=${v.id}&conditions=${v.conditions}&detailOid=${v.detailOid}`,
        });
      } else {
        this.$commonJS.showToast("请先购买课程");
      }
    },
    changeScreenLoading(status) {
      this.screenLoading = status;
    },
    changeScreen(status) {
      this.isFullScreen = status;
    },
    ordersTabCLi(data) {
      console.log("i at line 312:", data);
      this.currentCateIndex = data.index;
      this.$forceUpdate();
    },
    initVideo() {
		this.changeVideoLock = true
      this.screenLoading = false;
      this.isfresh = false;
      this.$nextTick(() => {
        this.isfresh = true;
        setTimeout(() => {
          this.$refs.commonVideo.init({
            currentVideo: this.currentVideo,
            currentVideoList: this.videoArray,
          });
        }, 200);
      });
    },
    changeVideo(data) {
		this.changeVideoLock = true
		if(this.countDownTimer){
			this.hideNextVideo()
		}
		
      console.log("点击了点击了切换视频-----:", this.countDownTimer,data, );
		
      if (data.id != this.currentVideo.id) {
		this.currentCateIndex = this.videoArray.findIndex(item => {
			return item.id == data.id
		})		
        // handleEnd
        // this.$refs.commonVideo.handleEnd();
        setTimeout(() => {
          
		  // this.$refs.commonVideo.changeVideo(data);
		  this.currentVideo = data;		 
          this.initVideo();
          this.isOpenMp3 = false;
        }, 500);
      } 
	  // else {
   //      this.currentVideo = data;
   //      this.initVideo();
   //      this.isOpenMp3 = false;
   //    }

      // console.log("data at line 380111111111111111111:", data.type);
    },
    hancleModalCancel() {
      this.show = false;
    },
    handleClickMore(v, i, status) {
      console.log("i at line 357:", i);
      this.$set(this.correlationiList[i], "isOpen", status);
      // [i].=!this.correlationiList[i].isOpen;
    },
    hancleModalConfirm() {
      var data = {
        values: {
          customerType: "D",
          token: uni.getStorageSync("token"),
          customerOid: uni.getStorageSync("customerOid"),
          ...this.taiHuClassInfo,
        },
      };
      // $mars.progressBegin('申请中...');
      // $mars.post(customerType, 'applyRelearn', data, function (ret) {
      //     api.hideProgress();

      //     fnLoadDataGrid();
      // });
    },

    //课程详情
    gotoDetail(v) {
      console.log(v);
      uni.navigateTo({
        // url: '../bookShop/commodityDetail?id=' + item.id
        url: `/pages/curriculum/order/curriculum/detail?navTitle=${v.title}&title=${v.title}&oid=${v.oid}`,
      });
    },
    //相关课程
    goCourseDescription(v) {
      console.log(v);
      uni.navigateTo({
        // url: '../bookShop/commodityDetail?id=' + item.id
        url: `/pages/curriculum/order/curriculum/index?navTitle=${v.title}&title=${v.title}&id=${v.id}`,
      });
    },
    getCourseDescriptionData() {
      var data = {
        id: this.options.id,
        load: false,
        // id: "16457",
      };
      var that = this;
      console.log(this.$store.state, "11111111111");

      $http
        .request({
          // url: "book/buyOrder/buySave",
          url: `${this.urlList.detail}`,
          method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
          data,
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })
        .then(async (res) => {
          that.curriculumData = res.data.detail;
          that.videoArray = res.data.videos;
          console.log("that.videoArray at line 这是关联的视频519:", res);
          var isHaveHistorySeekVideo = that.videoArray.findIndex(
            (e) => e.id == res.data.current
          );
          console.log(
            "isHaveHistorySeekVideo at line 522:",
            isHaveHistorySeekVideo
          );
          that.currentCateIndex =
            isHaveHistorySeekVideo != -1 ? isHaveHistorySeekVideo : 0;
          if (that.videoArray.length > 0) {
            this.currentVideo = that.videoArray[that.currentCateIndex];
			console.log('默认播放的index',that.currentCateIndex, this.currentVideo.id,that.videoArray);
            this.initVideo();
          }         
          var videoArray = [];
          var videoArrayHW = [];
          
        });
    },
    getPriceData() {
      var that = this;
      setTimeout(() => {
        that.$nextTick(() => {
          that.$refs.priceDetail.getData();
        });
      }, 100);
    },
    // 检查是有权限使用搜索功能
    checkDisable() {
      console.log("点击了");
    },
    // 显示无权限弹窗
    // showNoRights() {
    // 	let that = this
    // 	uni.showModal({
    // 		content: "",
    // 		confirmText: '好的',
    // 		showCancel: false,
    // 		success: function(res) {
    // 			if (res.confirm) {
    // 				// console.log('用户点击确定');
    // 				that.clear()
    // 			}
    // 		}
    // 	})
    // },
    // 获取用户详情
    getUserInfo() {
      // 用户详情
      if (this.userInfo.id != undefined) {
        this.$http.post("book/user/info/" + this.userInfo.id).then((res) => {
          this.userMes = res.user;
          this.getCateList();
          console.log(this.userMes, "呼呼");
        });
      }
    },

    async handleselectCate(item, index) {
      this.dataList = [];
      var data = [];
      console.log(item, index, 99999);
      var that = this;

      // curriculumInfo

      this.$http
        .post(this.urlList.curriculumInfo, {
          customerType: "D",
          token: uni.getStorageSync("token"),
          customerOid: uni.getStorageSync("customerOid"),
          oid: item.coid,
        })
        .then(async (res) => {
          that.curriculumInfo = res.obj;
          that.dataList = res.obj.courseList;

          // socket.init();
        });

      // this.$nextTick(() => {
      //     switch (item.type) {
      //         case 1:
      //             // allDataList
      //             this.dataList = that.allDataList.result1Lst
      //             break;
      //         case 2:
      //             this.dataList = that.allDataList.result2Lst
      //             break;
      //         case 3:
      //             this.dataList = that.allDataList.result3Lst
      //             break;
      //         case 4:
      //             this.dataList = that.allDataList.result4Lst.filter(e =>
      //                 e.oid != '5fcf991c027b11e7ae62008cfae40c18' && e.oid != 'b3d8a938b8e147bc877613bb712a9cb3' && e.oid != '4d4730163135420ea962bfac4805e026' && e.oid != '49fb76ca3d6b43718d78c6aa9a3003c2' && e.oid != 'c7b047ed9246469b9ae2b1013fc3df9c'

      //             )

      //             console.log(this.dataList.length, 6666666)
      //             break;

      //     }

      //     this.currentCateIndex = item.index
      // })
      console.log(this.allDataList, this.dataList, "1688");
      // if(this.userMes.tgdzPower == 0){
      // 	let that = this
      // 	uni.showModal({
      // 		content: "购买 针灸六经法要上册和下册 后方可使用此功能",
      // 		confirmText: '好的',
      // 		showCancel: false,
      // 		success: function(res) {
      // 			if (res.confirm) {
      // 				// console.log('用户点击确定');
      // 			}
      // 		}
      // 	})
      // 	return
      // }
      // if(item.title == "时辰取穴"){
      // 	uni.navigateTo({
      // 		url: "../timeAcupoint/timeAcupoint"
      // 	})
      // 	return
      // }

      // this.currentStatusIndex = index

      this.searchValue = "";
      this.searchList = [];
      this.showSearchList = false;
      // if (index != 2) {

      // uni.createSelectorQuery().select('.statusList').boundingClientRect(function (rect) {
      // 	var height = rect.height
      // 	console.log('元素高度：',);

      // }).exec();

      // } else {
      // 	this.getJFList(dictType)
      // }

      return data;
    },
    async setOneCateIndex(item, index) {
      this.allDataList = [];
      console.log(index, 99999);
      var that = this;

      // if(this.userMes.tgdzPower == 0){
      // 	let that = this
      // 	uni.showModal({
      // 		content: "购买 针灸六经法要上册和下册 后方可使用此功能",
      // 		confirmText: '好的',
      // 		showCancel: false,
      // 		success: function(res) {
      // 			if (res.confirm) {
      // 				// console.log('用户点击确定');
      // 			}
      // 		}
      // 	})
      // 	return
      // }
      // if(item.title == "时辰取穴"){
      // 	uni.navigateTo({
      // 		url: "../timeAcupoint/timeAcupoint"
      // 	})
      // 	return
      // }

      this.currentStatusIndex = index;
      // this.currentCateIndex = 0

      this.searchValue = "";
      this.searchList = [];
      this.showSearchList = false;
      this.$nextTick(async () => {
        await that.getCourseDescriptionData();

        this.$forceUpdate();
      });

      // this.handleselectCate(this.cateList[this.currentCateIndex])
      // if (index != 2) {

      // uni.createSelectorQuery().select('.statusList').boundingClientRect(function (rect) {
      // 	var height = rect.height
      // 	console.log('元素高度：',);

      // }).exec();

      // } else {
      // 	this.getJFList(dictType)
      // }
    },

    transformData(inputData) {
      const result = {};
      inputData.forEach((item) => {
        const { letter } = item;
        if (!result[letter]) {
          result[letter] = [];
        }
        result[letter].push(item);
      });
      // const finalResult = Object.keys(result).map(key => ({ [key]: result[key] }));
      return result;
    },
    // getJFList(id) {
    // 	$http.request({
    // 		url: "book/prescript/prescriptListForJF",
    // 		method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
    // 		data: {
    // 			loadAnimate: 'none', // 请求加载动画
    // 			'categoryId': id
    // 		},
    // 		header: { //默认 无 说明：请求头
    // 			'Content-Type': 'application/json'
    // 		},
    // 	}).then(res => {
    // 		if (res.code == 0 && res.list.length > 0) {
    // 			this.twoCateList = []
    // 			this.dataList = this.transformData(res.list)
    // 			console.log('JF经方', this.dataList)
    // 		} else {
    // 			this.twoCateList = []
    // 			this.dataList = []
    // 		}
    // 	}).catch(e => {
    // 		this.twoCateList = []
    // 		this.dataList = []
    // 		console.log(e)
    // 	})
    // },
    getCateList(id) {
      id ? "" : (id = 0);
      this.twoCateList = [];
      this.curTwoCateIndex = 0;
      // 0为获取顶级分类，其他为搜索下级分类，目前的逻辑，顶级是写死的，所以可能只会涉及到搜索第二级
      // $http.request({
      // 	url: "book/prescript/prescriptCategoryList",
      // 	method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
      // 	data: {
      // 		loadAnimate: 'none', // 请求加载动画
      // 		'categoryId': id
      // 	},
      // 	header: { //默认 无 说明：请求头
      // 		'Content-Type': 'application/json'
      // 	},
      // }).then(res => {
      // console.log(res, '脉穴分类获取成功')
      // if (res.code == 0 && res.list.length > 0) {
      // this.statusList = res.list
      // this.getTowCateList(this.statusList[0].type)
      // } else {
      // 	this.statusList = []
      // }
      // }).catch(e => {
      // 	this.statusList = []
      // 	console.log(e)
      // })
    },

    // 放大图片
    previewImage(url) {
      console.log("这是点击了图片啊啊啊啊", url);
      uni.previewImage({
        urls: [url],
        longPressActions: {
          itemList: ["很抱歉，暂不支持保存图片到本地"],
          success: function (res) {
            // console.log(res,'+++++')
          },
        },
      });
    },
    // getSearch() {
    // 	$http.request({
    // 		url: "book/prescript/searchPrescript",
    // 		method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
    // 		data: {
    // 			loadAnimate: 'none', // 请求加载动画
    // 			'keywords': this.searchValue,
    // 			type: this.currentStatusIndex + 1
    // 		},
    // 		header: { //默认 无 说明：请求头
    // 			'Content-Type': 'application/json'
    // 		},
    // 	}).then(res => {
    // 		console.log(res, '搜索结果')
    // 		if (res.code == 0 && res.list.length >= 0) {
    // 			this.showSearchList = true
    // 			this.searchList = res.list
    // 		} else {
    // 			this.searchList = []
    // 		}
    // 	}).catch(e => {
    // 		// this.dataList = []
    // 		this.searchList = []
    // 		console.log(e)
    // 	})
    // },
    // search(res) {
    // 	console.log(res, 'res')
    // 	// uni.showToast({
    // 	// 	title: '搜索：' + res,
    // 	// 	icon: 'none'
    // 	// })
    // 	if (res == '') {
    // 		this.showSearchList = false
    // 		this.searchList = []
    // 	} else {
    // 		this.getSearch()
    // 	}

    // },
    // input(res) {
    // 	console.log('----input:', res)
    // 	if (res == '') {
    // 		this.searchList = []
    // 	} else {
    // 		this.getSearch()
    // 	}
    // },
    // clear(res) {
    // 	console.log('----clear:', res)
    // 	// uni.showToast({
    // 	// 	title: 'clear事件，清除值为：',
    // 	// 	icon: 'none'
    // 	// })
    // 	this.searchValue = ''
    // 	this.showSearchList = false
    // },
    // blur(res) {
    // 	// console.log('----blur:', res)
    // 	// if (res == '') {
    // 	// 	this.showSearchList = false
    // 	// 	this.searchList = []
    // 	// } else {
    // 	// 	this.getSearch()
    // 	// }
    // },
    // focus(e) {
    // 	console.log('----focus:')
    // 	// uni.showToast({
    // 	// 	title: 'focus事件，输出值为：' + e.value,
    // 	// 	icon: 'none'
    // 	// })
    // 	// 等于1 就是有权限
    // 	// this.showSearchList = true

    // },
    // cancel(res) {
    // 	uni.showToast({
    // 		title: '点击取消，输入值为：' + res.value,
    // 		icon: 'none'
    // 	})
    // }
  },
  onBackPress() {
    // #ifdef APP-PLUS
    plus.key.hideSoftKeybord();
    // #endif
  },
};
</script>

<style lang="scss" scoped>
@import "@/style/mixin.scss";

.u-grid-list {
  // height: 40rpx;
}

.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: 100vh;

  .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;
}

.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: #fff;
  // width: 100%;
  float: right;
  padding: 4rpx 14rpx;
  font-size: 24rpx;
  font-weight: 500;
  line-height: 30rpx;
  border-radius: 10rpx;
  box-sizing: border-box;

  // margin-top: 20rpx;
  // display: flex;
  // align-items: center;
}

.headImage {
  // height: 400rpx !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: #b7e0e2;

  .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: #018f89;

      font-family: MicrosoftYaHei;
    }
  }

  .small_class_teaching_content {
    margin-top: 20rpx;
    // 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: #018f89;
        line-height: 80rpx;
        background: #cef8ea;
        text-align: center;
        border-radius: 10rpx;
        box-shadow: 0px 0px 6rpx 0px #e9dccc;
      }
    }

    .schedule {
      width: 100%;
      overflow: hidden;
      padding: 20rpx 20rpx;
      box-sizing: border-box;
      align-items: center;
      color: #018f89;

      font-family: MicrosoftYaHei;

      .icon_box {
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 0rpx;

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

      .progress_box {
        width: 100%;
        display: flex;
        align-items: center;
        position: relative;

        .progress_icon {
          width: calc(100% - 240rpx);
        }

        .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;
  }
}

.curriculum_box {
  .curriculum_title {
    padding: 20rpx 40rpx 0;
    font-size: 38rpx;
    line-height: 66rpx;
    font-weight: bold;
    text-align: center;
    box-sizing: border-box;
    margin-bottom: 20rpx;
  }
}

// .common_curriculum_list{

.curriculum_content {
  background-color: #fff;
  padding-bottom: 40rpx;

  .richDetail {
    height: auto !important;
    margin-bottom: 20rpx;
  }
}

.dianzan_box {
  width: calc(100% - 80rpx);
  margin: 0 auto;
  padding: 20rpx 20rpx;
  color: #6e6e6e;
  font-weight: 600;
  text-align: justify;
  background: #f4fffb;

  border-radius: 10rpx;
  box-shadow: 0px 0px 6rpx 0px #e9dccc;
}

.dashang_box {
  color: #ff5521;
  background: #fff7f4;
  box-shadow: 0px 0px 6rpx 0px rgba(255, 85, 33, 0.4);
}

.correlation_box {
  background-color: #fff;
  padding-bottom: 40rpx;

  .title {
    font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
    font-weight: normal;
    font-size: 40rpx;
    color: #018f89;
  }

  .more {
    font-size: 24rpx;
  }

  .close {
    text-align: center;
    color: #b0b0b0;
    line-height: 40rpx;
    margin-top: 10rpx;
    // padding-bottom: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
