<template>
  <view class="commonPageBox">
    <public-module></public-module>
	
    <view class="header_box"></view>
    <view class="appJump">
      <view class="everhealth item flexbox" @click="appjumpfun('everhealth')">
        <view class="img">
          <image
            src="@/static/icon/ic_login_health.png"
            mode="widthFix"
          ></image>
        </view>
        <view class="text">
          <text>一路健康</text>
        </view>
      </view>
      <view class="zmzm item flexbox" @click="appjumpfun('nuttyreading')">
        <view class="img">
          <image src="@/static/icon/home_icon_3.png" mode="widthFix"></image>
        </view>
        <view class="text">
          <text>疯子读书</text>
        </view>
      </view>
      <view class="zmzm item flexbox" @click="appjumpfun('medicine')">
        <view class="img">
          <image src="@/static/icon/wmysicon.png" mode="widthFix"></image>
        </view>
        <view class="text">
          <text>吴门医述</text>
        </view>
      </view>
    </view>
    <view class="main_content_box">
      <view class="curriculum_box">
        <view
          class="curriculum_item_box"
          v-for="(v, i) in curriculumList"
          @click="handleClickCurriculum(v)"
        >
          <!-- <view class="curriculum_item"> -->
          <image
            :src="v.imgUrl"
            mode="aspectFill"
            class="curriculum_item_img"
          ></image>
          <view class="curriculum_item_name">{{ v.name }}</view>
          <!-- </view> -->
        </view>
      </view>
      <view class="cate_box" v-if="cateList.length>0">
        <view
          class="cate_item_box"
          v-for="(v, i) in cateList"
          @click="handleClickCate(v)"
        >
          <view class="cate_item_border">
            <image
              :src="v.icon"
              mode="aspectFill"
              style="width: 49rpx; height: 49rpx"
            ></image>
          </view>
          <view class="cate_item_name">{{ v.title }}</view>
        </view>
      </view>
      <view class="flash_sale_box notice_box">
        <view class="flash_sale_top">
          <image
            class="miaoShaIcon noticeIcon"
            src="@/static/icon/homePage/notice.png"
            mode="aspectFill"
            style="width: 36rpx; height: 44rpx"
          ></image>
          <u-notice-bar
            :text="noticeList"
            style="background-color: none !important"
            class="miaoShaContent"
            icon=""
            direction="column"
            label="title"
            @click="goNotice"
          >
          </u-notice-bar>
          <!-- <view class="miaoShaContent" style="width: 100%;">
                        
                        {{ miaoShaContent }}
                    
                    
                    </view> -->
        </view>
      </view>

      <view class="flash_sale_box">
        <view class="flash_sale_top">
          <image
            class="miaoShaIcon"
            src="@/static/icon/homePage/miaosha.png"
            mode="aspectFill"
            style="width: 36rpx; height: 44rpx"
          ></image>
          <text class="miaoShaTitle" @click="goVideo">秒杀</text>
          <view class="miaoShaContent">
            <!-- {{ miaoShaContent }} -->
          </view>
          <image
            class="rightArrowIcon"
            src="@/static/icon/homePage/right_arrow.png"
            mode="aspectFill"
            style="width: 28rpx; height: 18rpx"
          ></image>
        </view>

        <view class="flash_sale_content" style="margin-top: 40rpx">
          <scroll-view scroll-x="true" class="scroll-X" style="">
            <view
              class="scroll-view-item flash_sale_content_item"
              @click="goGoodsDetail(v)"
              v-for="(v, i) in seckillLst"
            >
              <image class="book_image" :src="v.productImages" mode="aspectFit">
              </image>
              <view class="book_name" style="padding-bottom: 20rpx">{{
                v.productName
              }}</view>
            </view>
          </scroll-view>
        </view>
      </view>

      <view class="greenCardBox1 learning_box" v-if="studyList.length > 0">
        <view class="learning_box_top">
          <view class="learning_top greenCardBoxTop PM_font">
            <view class="titlebg">正在学习</view>
          </view>
        </view>

        <view class="flash_sale_content greenCardBoxContent">
          <scroll-view scroll-x="true" class="scroll-X" style="">
            <!-- studyList -->
            <common-curriculum-list
              imgUrl="image"
              :isScroll="true"
              :isCondition="true"
              :dataList="studyList"
              @hancleClick="goCourseDescription"
              label="title"
            >
              <template slot="labelSlot" slot-scope="slotProps">
                <view class="related_courses_name hidden1">{{
                  slotProps.row.title
                }}</view>

                <!-- <text v-if="slotProps.row.conditions!='03'">【试听】</text> -->
              </template>
            </common-curriculum-list>
            <!-- <view class="scroll-view-item flash_sale_content_item content_item"
                            v-for="(v, i) in flashSaleList">
                            <image class="book_image" src="@/static/icon/homePage/miaosha.png" mode="aspectFill">
                            </image>
                            <view class="book_name">中医生理学</view>
                        </view> -->
          </scroll-view>
        </view>
      </view>
      <view class="greenCardBox1 learning_box listening_box">
        <view class="learning_box_top">
          <view class="learning_top greenCardBoxTop PM_font">
            <view class="titlebg">欢迎试听</view>
          </view>
        </view>

        <view class="flash_sale_content greenCardBoxContent">
          <scroll-view scroll-x="true" class="scroll-X" style="">
            <common-curriculum-list
              imgUrl="image"
              :isCondition="true"
              :dataList="flashSaleList"
              @hancleClick="goCourseDescription"
              label="title"
            >
              <template slot="labelSlot" slot-scope="slotProps">
                <view class="related_courses_name hidden1">{{
                  slotProps.row.title
                }}</view>

                <!-- <text v-if="slotProps.row.conditions!='03'">【试听】</text> -->
              </template>
            </common-curriculum-list>
          </scroll-view>
        </view>
      </view>
      <!-- <view class="learning_box listening_box bottomBox">
        <view class="item_img" @click="handleGoApp">
          <image src="@/static/tab/bottom1.png" mode="aspectFill"></image>
        </view>
        
      </view> -->
    </view>
  </view>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "music",
  props: {},
  data() {
    return {
      noticeList: [], //秒杀列表
      seckillLst: [], //秒杀列表

      studyList: [], //正在学习
      dataInfo: {},
      flashSaleList: [], //试听
      miaoShaContent: "",
      cateList: [ ],
      curriculumList: [
        {
          name: "课程设置",
          url: "/pages/courseInformation/index/index",
          // url: "",
          imgUrl: require("@/static/icon/homePage/kcjg.png"),
        },
        {
          name: "我的课程",
          url: "/pages/curriculum/order/index/index",
          // url: "",
          imgUrl: require("@/static/icon/homePage/wdkc.png"),
        },
        {
          name: "吴门之光",
          url: "/pages/medicaldes/medicaldes",
          imgUrl: require("@/static/icon/homePage/wmzg.png"),
        },
      ],

      urlList: {
        list: "app/phoneDoctor.do?toHomePage",
        getSociologyLabels: "sociology/home/getSociologyLabels",
        getUserLateCourseList: "sociology/course/getUserLateCourseList",
        getMarketProductList: "sociology/product/getMarketProductList", //秒杀商品
        getMarketCourseList: "sociology/course/getMarketCourseList", //精彩试听
        getNotice: "common/message/listByPage", //消息
        getCateList: "sociology/home/getSociologyLabels", //消息
      },
    };
  },
  onReady() {},
  onLoad() {},
  async onShow() {
    console.log("at line 287:", this.userInfo);
    this.requestAll();
  },
  async onTabItemTap() {
    this.requestAll();
  },
  async onPullDownRefresh() {
			console.log('下拉刷新')
		
			await this.requestAll();
			setTimeout(() => {
				uni.stopPullDownRefresh();
				console.log('下拉刷新已停止');
			}, 50);
		},
  methods: {
    ...mapMutations(["setUserInfo"]),
    goVideo() {
      uni.navigateTo({
        url: "/pages/index/index",
      });
    },
    requestAll() {
      // 获取当前页面的栈
      this.$nextTick(async () => {
        await this.getData();
        await this.getCateList();
        await this.getSociologyLabels();
        await this.getMarketProductList();
        await this.getMarketCourseList();
        await this.getNotice();
      });
    },
    goNotice(index) {
      console.log("at line 297:", this.noticeList[index]);
      // var mynavData = JSON.stringify({
      //   ...this.noticeList[index],
      //   navTitle: this.noticeList[index].title,
      //   title: this.noticeList[index].title,
      // }); // 这里转换成 字符串
      uni.navigateTo({
        url: `/pages/homePage/index/noticeDetail?id=${this.noticeList[index].id}`,
      });
    },
    handleGoApp() {
      if (plus.os.name == "Android") {
        plus.runtime.launchApplication(
          {
            pname: "com.cn.nuttyreading",
          },
          function (e) {
            console.log("Open system default browser failed: " + e.message);
          }
        );
      } else if (plus.os.name == "iOS") {
        // plus.runtime.launchApplication(
        //   {
        //     action: "taobao://",
        //   },
        //   function (e) {
        //     console.log("Open system default browser failed: " + e.message);
        //   }
        // );
      }
    },
    async getData() {
      var that = this;

      this.$http.post(this.urlList.getUserLateCourseList).then(async (res) => {
        console.log(res, "7777777777777777777");

        if (res.code == 0) {
          that.studyList = res.page ? res.page : [];
        }
      });
    },
    async getCateList() {
      var that = this;
      this.$http
        .request({
          url: this.urlList.getCateList,
          method: "POST",
          data: {
            id: 0,
          },
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })
        .then(async (res) => {
          console.log(res, "7777777777777777777");

          if (res.code == 0) {
            that.cateList = res.labels ? res.labels : [];
           
          }
        });
    },
    async getNotice() {
      var that = this;
      var data = {
        isBook: 0, //是否是疯子读书
        isMedical: 0, //是否是吴门医述
        isSociology: 1, //是否是众妙之门
      };
      this.$http
        .request({
          url: this.urlList.getNotice,
          method: "POST",
          data: data,
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })
        .then(async (res) => {
          console.log(res, "7777777777777777777");

          var result = res.messages;

          console.log("result at line 332:", result);
          that.noticeList = res.messages ? result : [];
        });
    },
    async getMarketProductList() {
      var that = this;
      this.$http
        .request({
          url: this.urlList.getMarketProductList,
          method: "POST",
          data: {
            id: 1, //这个需要后台提供数值,比如秒杀商品
            limit: 10,
            page: 1,
          },
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })

        .then(async (res) => {
          console.log(res, "999");

          that.seckillLst = res.products.records ? res.products.records : [];
          that.$forceUpdate();
        });
    },
    async getMarketCourseList() {
      var that = this;

      this.$http
        .request({
          url: this.urlList.getMarketCourseList,
          method: "POST",
          data: {
            id: 4, //这个需要后台提供数值,比如秒杀商品
            limit: 10,
            page: 1,
          },
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })

        .then(async (res) => {
          that.flashSaleList = res.courseList.records
            ? res.courseList.records
            : [];
        });
    },
    async getSociologyLabels() {
      var that = this;
      this.$http
        .request({
          url: this.urlList.getSociologyLabels,
          method: "POST",
          data: {
            id: 0,
          },
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })
        .then(async (res) => {
          that.cateList.forEach((e, i) => {
            var data = res.labels.filter((item) => item.title === e.title);

            if (data.length > 0) {
              that.cateList[i] = {
                ...data[0],
                ...e,
              };
            }
          });
          that.$forceUpdate();
        });
    },

    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}`,
      });
    },
    appjumpfun(name) {
      let bagName = "";
      let schemes = "";
      if (name == "nuttyreading") {
        bagName = "com.cn.nuttyreading";
        schemes = "nuttyreading";
      }
      if (name == "everhealth") {
        bagName = "cn.com.everhealth";
        schemes = "everhealth";
      }
      if (name == "medicine") {
        bagName = "com.cn.medicine";
        schemes = "medicine";
      }
      // if(name == 'everhealth'){
      if (plus.os.name == "Android") {
        //安卓
        if (
          plus.runtime.isApplicationExist({
            //查看安卓系统手机有没有下载这款app
            pname: bagName, //B款app云打包的包名
          })
        ) {
          //安装了app
          plus.runtime.launchApplication({
            //打开app
            pname: bagName, //B款app云打包的包名
            extra: {
              url: `${schemes}://${bagName}`, //B款app配置的schemes+云打包的包名
            },
            function(e) {
              console.log("Open system default browser failed: " + e.message);
            },
          });
        } else {
          //未安装app
          plus.runtime.openURL(
            `https://a.app.qq.com/o/simple.jsp?pkgname=${bagName}`,
            function (res) {
              //进入后台小哥哥给我的应用宝下载链接，让你们后台给你
              //这链接会判断你手机是ios还是Android，Android进入应用宝下载app
              //跟下面的是一个链接
              console.log(res);
            }
          );
        }
      } else if (plus.os.name == "iOS") {
        //苹果
        //因为ios查不到B款app在ios系统手机里面，其实下载了，也是检测不到，所以就不检测了
        //直接打开B款app，B款app没有的话，会进入回调报错，我们在回调去打开下载链接
        plus.runtime.launchApplication(
          {
            action: "${schemes}://",
          },
          function (e) {
            plus.runtime.openURL(
              `https://a.app.qq.com/o/simple.jsp?pkgname=${bagName}`,
              function (res) {
                //进入后台小哥哥给我的appStore下载app链接，，让你们后台给你
                //这链接会判断你手机是ios还是Android，ios进入应用宝下载app
                //跟上面的是一个链接
                console.log(res);
              }
            );
          }
        );
        // }
      }
    },
    goGoodsDetail(v) {
      console.log(v);
      uni.navigateTo({
        // url: '../bookShop/commodityDetail?id=' + item.id
        url: `/pages/goods/index/index?navTitle=${v.title}&isMiaosha=1&title=${v.title}&id=${v.productId}`,
      });
    },

    handleClickCurriculum(v) {
      console.log(v);
      if (v.url) {
        uni.navigateTo({
          url: v.url,
        });
      } else {
        this.$commonJS.showToast("此功能暂未开放");
      }
    },
    handleClickCate(v) {
      console.log(v);
      uni.navigateTo({
        url: `/pages/curriculum/cate/index?navTitle=${v.title}&title=${v.title}&id=${v.id}`,
      });
    },

    //关闭或开启 音乐
  },
  computed: {
    ...mapState(["userInfo"]),
    timer() {
      return calcTimer(this.userInfo.currentTime);
    },
    overTimer() {
      return calcTimer(this.userInfo.duration);
    },
    playStatus() {
      var playFlag = false;
      this.userInfo.playFlag !== undefined
        ? (playFlag = this.userInfo.playFlag)
        : "";
      console.log(playFlag, "playFlag");
      return playFlag;
    },
  },
  watch: {},
};
//时间换算
function calcTimer(timer) {
  if (timer === 0 || typeof timer !== "number") {
    return "00:00";
  }
  let mm = Math.floor(timer / 60);
  let ss = Math.floor(timer % 60);
  if (mm < 10) {
    mm = "0" + mm;
  }
  if (ss < 10) {
    ss = "0" + ss;
  }
  return mm + ":" + ss;
}
</script>
<style lang="scss" scoped>
@import "@/style/mixin.scss";

.header_box {
  width: 100%;
  height: 350rpx;

  display: flex;
  justify-content: center;
  overflow: hidden;
  background-size: 100% 100%;
  background-image: url("@/static/icon/homePage/header_bg.png");
  background-repeat: no-repeat;

  .logo {
    width: 146rpx;
    height: 183rpx;
    margin-top: 115rpx;
  }
}

.main_content_box {
  width: 100%;

  padding: 27rpx;
  box-sizing: border-box;
  // padding-top: 75rpx;

  .curriculum_box {
    width: 100%;
    // height: 198rpx;

    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0px 37rpx 17rpx;
    box-sizing: border-box;

    .curriculum_item_box {
      height: 100%;
      display: flex;
      align-items: center;

      .curriculum_item_img {
        width: 39rpx;
        height: 38rpx;
        float: left;
      }

      .curriculum_item_name {
        margin-top: -10rpx;
        font-family: MicrosoftYaHei;
        font-weight: bold;
        font-size: 30rpx;
        color: #001b73;
        margin-left: 21rpx;
        // line-height: 46rpx;
      }
    }
  }

  .cate_box {
    width: 100%;
    height: auto;
    background: $themeColor;
    background-repeat: no-repeat;
    display: flex;
    flex-wrap: wrap;
    // justify-content: center;

    background-size: 100% 100%;
    // background-image: url("@/static/icon/cate_bg.png");
    box-shadow: 0rpx 0rpx 6rpx 0rpx #f9f6ea;
    border-radius: 7rpx;
    // display: flex;
    // align-items: center;
    // justify-content: space-around;
    padding: 10rpx 10rpx 0;
    box-sizing: border-box;

    .cate_item_box {
      width: 25%;
      height: 100%;
      padding: 10rpx 0 10rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
    
      flex-direction: column;

      .cate_item_border {
        width: 65rpx;
        height: 78rpx;
        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-top: 10rpx;
        font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;

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

  .flash_sale_box {
    width: 100%;
    margin-top: 33rpx;
    margin-bottom: 10rpx;

    .flash_sale_top {
      width: 100%;
      height: 61rpx;
      // background: #B7E0E2;
      background-color: rgba(188, 231, 223, 0.3);
      color: rgb(46, 103, 106);
      border-color: rgb(197, 227, 215);
      box-shadow: 0rpx 0rpx 4rpx 0rpx #fcf2f6;

      border-radius: 7rpx;
      padding: 3rpx 18rpx 3rpx 10rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      // margin-bottom: 21rpx;

      .miaoShaIcon {
        margin-right: 16rpx;
      }

      .miaoShaTitle {
        margin-right: 25rpx;

        font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
        font-weight: normal;
        font-size: 35rpx;
        color: #018f89;
        line-height: 46rpx;
      }

      .miaoShaContent {
        width: calc(100% - 172rpx);
        margin-top: 1rpx;
        font-family: Microsoft YaHei;
        font-weight: 600;
        font-size: 21rpx;
        color: #018f89;
        // line-height: 45rpx;
      }
    }
  }

  .flash_sale_content {
    width: 100%;
    display: flex;
    overflow: hidden;
    height: 254rpx;

    .flash_sale_content_item {
      display: inline-block;
      width: 165rpx;

      margin-right: 12rpx;
      overflow: hidden;
    }

    .book_image {
      width: 165rpx;
      height: 192rpx;
      border-radius: 10rpx;
      background-color: #f5f5f5;
    }

    .book_name {
      font-family: MicrosoftYaHei;
      font-weight: 600;
      font-size: 30rpx;
      line-height: 30rpx;
      color: #000000;
      text-align: center;
      margin-top: 18rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

.learning_box_top {
  width: 100%;
  // height: 40rpx;
  // margin: 40rpx 0;
  margin-bottom: 0;
}

.learning_box_bottom {
  width: 100%;
  margin-top: 0;

  height: 40rpx;
  margin: 40rpx 0;
}

.greenCardBox1 {
  margin-top: 80rpx;
  margin-bottom: 120rpx;

  .greenCardBoxTop {
    width: 100%;
    margin-bottom: 30rpx;
    // background: linear-gradient(
    //     130deg,
    //     rgb(46, 103, 106) 0%,
    //     rgb(114, 173, 146) 100%
    //   )
    //   text;
    text-align: center;
    // line-height: 60rpx;

    display: flex;
    // margin-bottom: 60rpx;
    align-items: center;
    justify-content: center;
    // background-color: $themeColor;

    padding: 0 22rpx 0;
    padding-left: 40rpx;
    box-sizing: border-box;
    font-size: 44rpx;

    .titlebg {
      width: 400rpx;
      height: 120rpx;
      line-height: 120rpx;
      background-size: 100% 100%;
      background-image: url("@/static/icon/homeTitleBg.png");
      background-repeat: no-repeat;
      font-size: 44rpx;
      margin-left: -60rpx;
      // height: 90rpx;
      text-align: left;
      padding-left: 140rpx;
      color: #fff;
      // homeTitleBg.png
    }

    .userBox {
      display: flex;
      align-items: center;

      .user_img {
        width: 49rpx;
        height: 49rpx;
        border-radius: 100%;
        margin-right: 14rpx;
      }

      .name {
        font-family: MicrosoftYaHei;
        font-weight: bold;
        font-size: 21rpx;
        color: #ffffff;
      }
    }
  }

  .greenCardBoxContent {
    border: 2rpx solid #5599a7;
    padding: 100rpx 20rpx 20rpx;
    margin-top: -96rpx;
    // border: 10rpx solid;

    border-radius: 20rpx;
    background-image: linear-gradient(0deg, #65b5c561 0%, #fdfcdf3d 75%);

    // clip-path: inset(0px round 10rpx);
    // animation: huerotate 6s infinite linear;
    // filter: hue-rotate(360deg);

    width: 100%;
    display: flex;
    overflow: hidden;
    height: auto;
    // padding: 24rpx 19rpx 5rpx;
    box-sizing: border-box;
    // margin-top: 60rpx;

    .content_item {
      display: inline-block;
      width: 300rpx;
      background-color: #fff !important;
      margin-right: 26rpx;
      overflow: hidden;
    }

    .book_image {
      width: 317rpx;
      height: 146rpx;
      border-radius: 10rpx;
      // background-color: #919191;
    }

    .book_name {
      font-family: MicrosoftYaHei;
      font-weight: 600;
      font-size: 23rpx;
      color: #000000;
      line-height: 23rpx;
      text-align: left;
      margin-top: 14rpx;
    }
  }

  .right {
    width: 160rpx;
    height: 37rpx;
    // background: #0037EB;
    border-radius: 7rpx;

    font-family: MicrosoftYaHei;
    font-weight: 600;
    font-size: 26rpx;
    color: #ffffff;
    line-height: 37rpx;
    text-align: center;
  }
}

.scroll-X {
  width: 100%;
  height: 100%;
  white-space: nowrap;
}

.learning_box {
  // height: 298rpx;
  // border-radius: 40rpx;
  // background-image: linear-gradient(90deg, #3ab3ae 0%, #d5ecdd 200%);

  .learning_user_box {
    display: flex;
    align-items: center;

    .learning_user_img {
      width: 49rpx;
      height: 49rpx;
      border-radius: 100%;
      margin-right: 14rpx;
    }

    .name {
      font-family: MicrosoftYaHei;
      font-weight: 600;
      font-size: 21rpx;
      color: #ffffff;
    }
  }

  .right {
    background-color: #f0ba00;
  }
}

.listening_box {
  // height: 298rpx;

  .right {
    background-color: #0037eb;
  }
}

.commonPageBox {
  // padding-bottom: 50rpx;
  // box-sizing: border-box;
}

.noticeIcon {
  width: 20rpx;
}

.u-notice-bar {
  background-color: transparent !important;
}

.bottomBox {
  width: 100%;
  height: 200rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .item_img {
    width: 48% !important;
    height: 100%;

    image {
      width: 100%;
      height: 100%;
    }
  }
}

.notice_box {
  border: 2rpx solid rgb(197, 227, 215);

  // background-repeat: no-repeat;

  // background-size: 100% 100%;
  // padding-left: 60rpx;
  // background-image: url("@/static/icon/noticebg.png");
}

.appJump {
  width: 190rpx;

  position: fixed;
  right: 0;
  top: 7%;
  z-index: 1;

  .item {
    background: rgba(255, 255, 255, 0.6);
    margin-bottom: 30rpx;
    border: 1px solid #fff;
    border-right: none;
    align-items: center;
    padding-right: 10rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    overflow: hidden;
    border-radius: 50rpx 0 0 50rpx;

    text {
      font-size: 28rpx;
      font-weight: 700;
    }

    .img {
      // width: 60rpx;  height: 60rpx;
      padding: 6rpx;
      overflow: hidden;
      background-color: #fff;
      border-radius: 100%;

      image {
        width: 50rpx;
        height: 50rpx;
      }
    }
  }
}

.related_courses_name {
  font-weight: bold;
}
</style>
