<template>
  <view>
    <common-list
      :isNoIcon="true"
      imgUrl="image"
      :isCondition="true"
      :dataList="dataList"
      @hancleClick="goCourseDescription"
      label="title"
    >
      <template slot="labelSlot" slot-scope="slotProps">
        <view class="learning_image">
          <!-- <view class="progress_box">
                    <view class="" style="color: #c0c4cc; font-size: 24rpx">
                      学习进度：
                    </view>
                    <view class="progress_icon" style=""
                      ><u-line-progress
                        activeColor="#3AB3AE"
                        height="12"
                        percentage="20"
                        :showText="false"
                      ></u-line-progress>
                      <text
                        style="
                          font-size: 24rpx;
                          margin-left: 10rpx;
                          margin-top: -8rpx;
                          font-weight: 700;
                        "
                      >
                        20%</text
                      >
                    </view>
                  </view> -->
          <view
            style="font-size: 24rpx; line-height: 40rpx"
            class="learning_image_right"
            v-if="currentCateIndex != 2"
            @click.stop="
              slotProps.row.isStudying == 1 || currentCateIndex == 0
                ? openCancelCollection(slotProps.row)
                : handlecollection(slotProps.row)
            "
          >
            <text
              style="background-color: #adecf7"
              v-if="slotProps.row.isStudying == 1 || currentCateIndex == 0"
            >
              移出正在学习</text
            >
            <text v-else style="font-size: 24rpx"> 加入正在学习</text>
          </view>
        </view>

        <view style="overflow: hidden">
          <view class="feng" style="position: relative">
            <!-- <view v-if="currentCateIndex==0" class="delisted" 
                >已过期</view
              > -->

            <image
              v-if="slotProps.row.image"
              :src="slotProps.row.image"
              mode="aspectFit"
              class="book_image"
            ></image>
            <view
              v-else
              style="
                color: #c0c4cc;
                font-size: 22rpx;
                line-height: 160rpx;
                text-align: center;
              "
              >暂无封面图</view
            >

            <view
              v-if="currentCateIndex == 2"
              style="font-size: 24rpx; position: absolute"
              class="learning_image_right delisted"
            >
              <text style="background-color: red; color: #fff"> 再次学习</text>
            </view>
          </view>
          <view class="cate_right">
            <view
              class="related_courses_name"
              :style="`${currentCateIndex == 2 ? 'color:#c0c4cc' : ''}`"
              >{{ slotProps.row.title }}</view
            >

            <!-- <view class="curriculum_tag_info_box">
                      <u-tag
                        style="margin-right: 10rpx"
                        text="上部"
                        size="mini"
                        type="success"
                        class="curriculum_tag"
                      ></u-tag>
                    </view> -->

            <!-- <view class="" style="color: #c0c4cc; font-size: 24rpx">
                      有效期：
                    </view> -->

            <view class="related_courses_right">
              <!-- <view
                                    :class="slotProps.row.surplusNum < 30 ? 'aui-text-danger dateReminder' : 'dateReminder'">
                                    距&nbsp;{{ slotProps.row.surplusNum }}&nbsp;天到期</view> -->
            </view>
          </view>
        </view>
        <view v-if="currentCateIndex != 2">
          <view
            style="height: 4rpx; margin: 30rpx 0 20rpx; background: #f5f5f5"
          ></view>

          <view
            v-for="(item, index) in slotProps.row.courseCatalogueEntityList"
            style="
              justify-content: space-between;
              margin-bottom: 20rpx;
              display: flex;
            "
          >
            <view
              style="
                width: 120rpx;
                display: flex;
                align-items: center;
                margin-bottom: 10rpx;
              "
            >
              <view
                v-if="item.isBuy == 1"
                class="curriculum_tag"
                style="
                  width: 100%;
                  margin-right: 10rpx;
                  text-align: center;
                  background-color: #43a181;
                  color: #fff;
                "
                >{{ item.title }}</view
              >
              <view
                v-else
                class="curriculum_tag"
                style="
                  width: 100%;
                  margin-right: 10rpx;
                  text-align: center;
                  background-color: #e6e5e5;
                  color: #969696;
                "
                >{{ item.title }}</view
              >
            </view>

            <view
              style="
                width: calc(100% - 140rpx);
                display: flex;
                flex-direction: column;
                margin-bottom: 10rpx;
              "
              ><view
                class=""
                v-if="item.isBuy != 1"
                style="color: #969696; font-size: 24rpx"
              >
                未购买
              </view>
              <view
                class=""
                v-if="item.lastStudyTime"
                style="color: #969696; font-size: 24rpx"
              >
                上次学习时间：{{ item.lastStudyTime }}
              </view>

              <view
                class=""
                style="color: #969696; font-size: 24rpx"
                v-if="item.isBuy == 1 && item.endTime"
              >
                有效期：{{ item.endTime }}
              </view>
            </view>
          </view></view
        >

        <!-- <text v-if="slotProps.row.conditions!='03'">【试听】</text> -->
      </template>
    </common-list>
    <u-modal
      :show="signShow"
      :content="signContent"
      :showCancelButton="true"
      @cancel="signShow = false"
      @confirm="cancelCollection()"
    >
    </u-modal>
  </view>
</template>

<script>
import $http from "@/config/requestConfig.js";
import { mapState } from "vuex";
export default {
  props: ["dataList", "userInfo", "currentCateIndex"],
  components: {},
  data() {
    return {
      signShow: false,
      signContent: "是否要移除此课程？",
      selectCurriculum: {},
      urlList: {
        list: "sociology/course/getMyCourse",
        cancelCollection: "sociology/course/removeUserCourseStudying",
        collection: "sociology/course/addUserCourseStudying",
        getCateList: "sociology/home/getSociologyLabels", //消息
      },
    };
  },

  onHide() {},
  computed: {
    ...mapState(["userInfo"]),
  },
  methods: {
    close() {
      this.isOpenRightButton = false;
    },
    cancelCollection() {
      var that = this;
      this.$http
        .request({
          url: this.urlList.cancelCollection,
          method: "POST",
          data: {
            userId: this.userInfo.id,
            courseId: this.selectCurriculum.id,
          },
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })
        .then(async (res) => {
          console.log(res, "7777777777777777777");
          this.signShow = false;
          if (res.code == 0) {
            if (this.currentCateIndex == 0) {
              this.$emit("refresh");
            } else {
              this.dataList.map((e) => {
                if (e.id == this.selectCurriculum.id) {
                  e.isStudying = 0;
                }
              });
            }

            // that.cateIconList = res.labels ? res.labels : [];
          }
        });
    },
    openCancelCollection(row) {
      this.selectCurriculum = row;
      if (this.currentCateIndex == 0) {
        this.signShow = true;
      } else {
        this.cancelCollection();
      }
    },
    handlecollection(row) {
      console.log("row at line 452:", row);
      var that = this;
      this.$http
        .request({
          url: this.urlList.collection,
          method: "POST",
          data: {
            userId: this.userInfo.id,
            courseId: row.id,
          },
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })
        .then(async (res) => {
          if (res.code == 0) {
            this.dataList.map((e) => {
              if (e.id == row.id) {
                e.isStudying = 1;
              }
            });
            // this.$emit("refresh");
          }
        });
    },

    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 = {};
      if (this.currentCateIndex == 0) {
        // data.userId = this.userInfo.id;
      }

      var that = this;

      this.$http
        .request({
          url: this.cateList[this.currentCateIndex].apiUrl,
          method: "POST",
          data: data,
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })

        .then(async (res) => {
          console.log(res.courses, "88888");
          that.allDataList = res.courseList;
          if (this.currentCateIndex == 1) {
            that.openCollapseList = that.allDataList.map((e) => {
              return e.id;
            });
            await setTimeout(() => {
              that.getDistanceToTop();
            }, 100);
          }

          // socket.init();
        });
    },
    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()
    // 			}
    // 		}
    // 	})
    // },
    // 获取用户详情

    // 详情
    gotoDetail(item) {
      console.log("111", item);
      console.log("this.currentStatusIndex", this.currentStatusIndex);
      console.log("this.curTwoCateIndex", this.curTwoCateIndex);
      if (this.currentStatusIndex == 0) {
        uni.navigateTo({
          // url: '../bookShop/commodityDetail?id=' + item.id
          url: "./xueshugongxianDetail?id=" + item.id,
        });
        return;
      }
      if (this.currentStatusIndex == 1) {
        uni.navigateTo({
          url: "./medicaldesDetail?id=" + item.id,
        });
        return;
      }
      if (this.currentStatusIndex == 2) {
        console.log("111", item);
        uni.navigateTo({
          url: "./video?title=" + item.name + "&src=" + item.url,
        });
        return;
      }
      if (this.currentStatusIndex == 3) {
        console.log("111", item);
        uni.navigateTo({
          url: "./recordDetail?id=" + item.id,
        });
        return;
      }
    },

    async handleselectCate(item, index) {
      this.allDataList = [];
      this.dataList = [];
      var data = [];
      console.log(item, index, 99999);
      var that = this;
      this.$nextTick(async () => {
        this.currentCateIndex = item.index;
        console.log(
          "this.currentCateIndex at line 532:",
          this.currentCateIndex
        );
        await this.getCourseDescriptionData();
        //    this.dataList=this.allDataList
        // 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;
        // }
      });
      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)
      // }
    },
    backClick() {
      if (this.options.backType == "order") {
        uni.switchTab({
          url: "/pages/homePage/index/index",
        });
      } else {
        uni.navigateBack({
          delta: 1,
        });
      }
    },
    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)
    // 	})
    // },

    // 放大图片
    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: 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;
}

.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% - 0) !important;
  // height: calc(100% - 180rpx) !important;
  padding: 0rpx 0;
  box-sizing: border-box;
}

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

.dateReminder {
  width: 200rpx;
  font-size: 24rpx;
  text-align: right;
  line-height: 40rpx;
  margin-left: 20rpx;
  float: right;
}
.related_courses_right {
  width: calc(100%);
  margin-top: 4rpx;
  overflow: hidden;

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

    float: left;
  }
  //  position: absolute;
  // top: 100rpx;
  // right: 0;
}
.fdButtonBox {
  width: 100%;
  margin-top: 20rpx;
  // display: flex;
  // align-items: center;
}

/deep/.common_curriculum_list {
  padding: 20rpx;
  .content_item {
    width: 100% !important;
    height: 160rpx;

    // .book_image {
    //   width: 200rpx !important;
    //   height: 120rpx !important;
    //   float: left !important;
    // }

    .common_curriculum_item {
      width: calc(100% - 220rpx);
      float: right;
      display: block !important;
    }
  }
}
/deep/.u-cell__left-icon-wrap {
  width: 100%;
}
/deep/.u-cell__body {
  background: #1b9994 !important;
  box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(0, 82, 79, 0.65) !important;
  padding: 0 20rpx !important;
}
/deep/.u-icon__icon--info {
  color: #fff !important;
}
/deep/.u-collapse-item__content__text {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
}
.cate_box {
  width: 100%;
  height: 90rpx;
  //   background: $themeColor;

  border-radius: 7rpx;
  //   display: flex;
  //   align-items: center;
  //   justify-content: space-around;
  padding: 0rpx 0;
  box-sizing: border-box;

  .cate_item_box {
    width: 400rpx;
    height: 100%;
    display: flex;
    align-items: center;

    .cate_item_border {
      //   width: 55rpx;
      //   height: 78rpx;
      //   padding: 10rpx;
      background-size: 100% 100%;
      //   background-image: url("@/static/icon/homePage/cate_bg.png");
      border-radius: 4rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        // height: 56rpx;
      }
    }

    .cate_item_name {
      margin-left: 21rpx;
      font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;

      font-weight: normal;
      font-size: 42rpx;
      color: #000000;
      // line-height: 46rpx;
      text-align: center;
      color: #fff;
    }
  }
}

.related_courses_name {
  width: 100%;
  // display: inline-block;
  // float: left;
  line-height: 60rpx;
  // width: calc(100% - 90rpx) !important;
  // padding-left: 20rpx;
  font-weight: 700;
  .aui-text-danger {
    display: inline-block;
    float: right;
  }
}
.book_image {
  width: 100%;
  height: 100%;
  float: left;
}
/deep/.list_item {
  position: relative;
  border-radius: 20rpx;
  padding: 20rpx !important;
  margin-bottom: 40rpx;
  background: rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0px 0px 3px 0px rgba(0, 82, 79, 0.2) !important;
  .rightArrow {
    margin-top: 0rpx !important;
  }
  .titleItem {
    // display: flex;
    // align-items: center;
  }
}

// /deep/.list_item :nth-child(2n-1) {
//   background: rgba(255, 255, 255, 0.85) !important;
// }
.feng {
  background-color: #f5f5f5;
  margin: 0rpx 22rpx 0 0;
  height: 160rpx !important;
  width: 240rpx !important;
  float: left;
  border-radius: 14rpx;

  // border: 1rpx solid #e9e9e9;
}
.cate_right {
  width: calc(100% - 264rpx);
  float: right;
}
.commonPageBox {
  background-image: #edf6f5ad !important;
}
/deep/.uni-scroll-view-content {
  box-sizing: border-box !important;
  padding: 10rpx !important;
}
.curriculum_tag {
  // width: 140rpx !important;
  text-align: center;
  display: inline-block;
  border-radius: 4rpx;
  font-size: 24rpx;
}
.curriculum_tag_info_box {
  width: 100%;
  margin-top: 1cqi;
  display: flex;
  align-items: center;
  // justify-content: space-between;
}
.price_box {
  display: flex;
  align-items: center;
  margin-top: 0rpx;
  // justify-content: space-between;
}

.progress_box {
  width: calc(100% - 140rpx);
  display: flex;
  align-items: center;
  position: relative;

  .progress_icon {
    width: calc(100% - 140rpx);
    display: flex;
  }

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

  .icon2 {
    width: 140rpx;
    height: 100rpx;
    position: absolute;
    right: 0;
    // margin-top: -20rpx;
  }
}
.learning_button {
  background-color: #1b9994;
  color: #fff;
  text-align: center;
  border-radius: 60rpx;
  font-size: 28rpx;
  padding: 8rpx 20rpx;
}
.public-badge {
  text-align: center;
  // 设置渐变色背景
  // background-image: linear-gradient(to right, #D26855, #F4CEB9),
  //   linear-gradient(100deg, #b3d5da, #8f41e9, #63acb6);
  color: #d26855;
  font-size: 12px;
  width: 140rpx;
  border-radius: 3px 0 0 3px;
  position: absolute;
  top: 10rpx;
  right: 10px;
  z-index: 10;
  padding: 3px 0;
}

.show-signal {
  border: 4px solid #939393;
  border-right: 4px solid transparent;
  border-bottom: 4px solid transparent;
  width: 0;
  height: 0;
  position: absolute;
  top: 31px;
  right: -8px;
  z-index: 10;
}
.learning_button_border {
  width: auto;
  color: #222222;
  background: #f4f4f4;
}
.fixed {
  position: fixed;
  bottom: 10%;
  right: -5rpx;
  z-index: 1;

  overflow: hidden;
}

.openBox view {
  width: 40rpx;
  margin-bottom: 20rpx;

  // border-bottom: 1rpx solid #309995;
}
.openBox view:nth-last-child(1) {
  border: none !important;
}
.openBox {
  background-color: #f8f9fa;
  padding: 10rpx;
  // border: 2rpx solid #eee;
  // width: 40rpx;
  line-height: 40rpx;
  // box-shadow: 0 0px 10rpx 2px $themeColor;
  // border-radius: 10rpx;
}
.scroll {
}

.scroll view {
  //   width: 100%;
  //   height: 1000rpx;
}
.rightButton {
  // background-color: #fff;
  font-size: 28rpx;
  text-align: center;
  // color: $themeColor;
}
.cate_item_box {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;

  padding: 0 20rpx;
  .cate_item_border {
    width: 60rpx;
    height: 78rpx;
    // padding: 10rpx;
    background-size: 100% 100%;
    // background-image: url("@/static/icon/homePage/cate_bg.png");
    border-radius: 4rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    image {
      // height: 56rpx;
    }
  }

  .cate_item_name {
    padding-top: 60rpx;
    width: 100%;
    // margin-left: 21rpx;
    font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
    font-weight: 500;
    // font-weight: normal;
    font-size: 52rpx;
    color: #000000;
    line-height: 80rpx;
    text-align: center;
  }
}
.hot {
  color: $themeColor !important;
}
.hotButton {
  color: $themeColor;
  // color: #fff !important;
}
.closeBox {
  width: 40rpx;
  height: 40rpx;
  background-color: #fff;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 0px 5rpx 1px #b0b0b0;
  justify-content: center;
  overflow: hidden;

  image {
    width: 20rpx;
    height: 20rpx;
  }
}
.learning_image {
  width: 100%;
  // margin-top: -30rpx;

  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  // height: 70rpx;
  image {
    width: 70rpx;
    height: 70rpx;
  }
  .learning_image_right {
    // width: 180rpx;
    text {
      display: inline-block;
      background-color: #e6e5e5;
      border-radius: 50rpx;
      padding: 4rpx 10rpx;
    }
  }
}
/deep/.scroll-view-item:nth-child(2n-1) {
  background: rgba(255, 255, 255, 0.85) !important;
}
.delisted {
  background-color: red;
  color: #fff;
  // padding: 2rpx 4rpx;
  position: absolute;
  border-radius: 4rpx;
  font-size: 22rpx;
  width: 140rpx;
  text-align: center;
  height: 40rpx;
  line-height: 40rpx;
  left: calc((100% - 140rpx) / 2);
  top: calc((100% - 40rpx) / 2);
  border-radius: 20rpx;
}
</style>
