saas_miniprogram/pages/index/index.vue

<template>
  <view class="index">
    <u-navbar
      class="navbar"
      :is-back="false"
      :border-bottom="false"
      title-color="#333333"
      back-icon-color="#ffffff"
    >
      <view class="slot-wrap">
        <image src="/static/logo2.png"></image>
      </view>
    </u-navbar>
    <view class="swiper">
      <swiper
        :indicator-dots="false"
        indicator-color="#fff"
        indicator-active-color="#007AFF"
        :style="{ height: swiperHeight + 'rpx' }"
        @change="swiperChange"
        :interval="interval"
        :duration="duration"
        :autoplay="autoplay"
        :circular="true"
      >
        <swiper-item
          v-for="(swiper, index) in list"
          :key="index"
          @click="swiperClick(swiper)"
        >
          <image
            @load="imageLoad"
            :src="$method.splitImgHost(swiper.adverUrl)"
            mode="widthFix"
          ></image>
        </swiper-item>
      </swiper>
      <view class="dots">
        <view
          class="dot"
          :class="{ active: index == current }"
          v-for="(swiper, index) in list"
          :key="index"
        ></view>
      </view>
    </view>
    <view class="content">
      <view class="notice" v-if="infoNums">
        <view class="notice__content">
          <image src="/static/icon/msg_icon1.png" class="icon"></image>
          <view class="text"> 您有{{ infoNums }}条新的通知 </view>
          <view class="btn" @click="jumpPage">立即查看</view>
        </view>
      </view>
      <view class="my-list">
        <view class="my-list__item my-list__item--course" @click="go('course')">
          <image src="../../static/mycourse.png"></image>
          <text>我的网课</text>
        </view>
        <view class="my-list__item my-list__item--bank" @click="go('bank')">
          <image src="../../static/mybank.png"></image>
          <text>我的题库</text>
        </view>
      </view>
      <!-- 日历-->
      <!-- <view>
				<view class="calendar_card">
					<view class="card_box">
						<u-row gutter="16">
							<u-col span="10" >
								<view  style="height:60rpx;">
									<text class="t1" v-if="nearByDay !== '' && nearByDay !== null">距离最近一次考试还剩{{nearByDay}}天</text> 
								</view>
							</u-col>
							<u-col offset="1" span="1">
								<view @click="jumpPlan"><image src="/static/more.png" class="img_more"></image></view>
							</u-col>
						</u-row>
					</view>
					<u-line color="#EEEEEE" />
					<view style="width: 100%;display: flex;justify-content:center;margin-top: 20rpx;">
						<view v-for="(item, index) in date" :key="index" class="card_date">{{ item }}</view>
					</view>
					<view style="width: 100%;display: flex;justify-content:center;margin-top: 40rpx;">
						<view v-for="(item, index) in date_num" :key="index" class="date_num">
							<view v-if="item.color == 0" class="date_num_color0" v-show="item.date > 0">
								{{ item.date }}
								<view v-if="item.note > 0" class="date_note">{{ item.note }}</view>
								<view v-if="item.dot" class="date_dot"></view>
							</view>
							<view v-if="item.color == 1" class="date_num_color1">
								{{ item.date }}
								<view v-if="item.note > 0" class="date_note">{{ item.note }}</view>
								<view v-if="item.dot" class="date_dot"></view>
							</view>
							<view v-if="item.color == 2" class="date_num_color2">
								{{ item.date }}
								<view v-if="item.note > 0" class="date_note">{{ item.note }}</view>
								<view v-if="item.dot" class="date_dot"></view>
							</view>
							<view v-if="item.color == 3" class="date_num_color3">
								{{ item.date }}
								<view v-if="item.note > 0" class="date_note">{{ item.note }}</view>
								<view v-if="item.dot" class="date_dot"></view>
							</view>
						</view>
					</view>
					<view style="width: 100%;margin-top: 20rpx;" v-if="workList.length > 0">
						<u-row gutter="16">
							<u-col span="2" text-align="center">
								<view><image src="/static/left.png" class="arr-icon" @click="preveItem"></image></view>
							</u-col>
							<u-col span="8" text-align="center">
								<view class="course_title" @click="jumpGoodsDetail(goodsItem)">{{ goodsItem.goodsName }}</view>
							</u-col>
							<u-col span="2" text-align="center">
								<view><image src="/static/right.png" class="arr-icon" @click="nextItem"></image></view>
							</u-col>
						</u-row>
					</view>
				</view>
			</view> -->
      <u-tabs
        class="tabs"
        :current="tabCurrent"
        @change="tab"
        :list="menu"
        :activeStyle="{ fontSize: '36rpx' }"
        :inactiveStyle="{ color: '#EAEEF1', fontSize: '30rpx' }"
        sticky
      ></u-tabs>
      <view class="course-list" v-show="tabCurrent == 0">
        <navigator
          hover-class="none"
          class="item"
          v-for="(item, index) in list1"
          :key="index"
          :url="'/pages3/course/detail?id=' + item.goodsId"
        >
          <view class="img">
            <image :src="$method.splitImgHost(item.coverUrl, true)"></image>
            <view class="time" v-if="item.year">{{
              item.year ? item.year : ""
            }}</view>
          </view>
          <view class="text">
            <view class="title">{{ item.goodsName }}</view>
            <view class="desc">
              <view class="left">
                {{ item.classHours || "-" }}
                <text>学时</text>
              </view>
              <view class="right">¥ {{ toFixed(item.standPrice) }}</view>
            </view>
          </view>
        </navigator>
      </view>
      <view class="course-list" v-show="tabCurrent == 1">
        <navigator
          hover-class="none"
          class="item"
          v-for="(item, index) in list2"
          :key="index"
          :url="'/pages2/bank/detail?id=' + item.goodsId"
        >
          <view class="img">
            <image :src="$method.splitImgHost(item.coverUrl, true)"></image>
            <view class="time" v-if="item.year">{{
              item.year ? item.year : ""
            }}</view>
          </view>
          <view class="text">
            <view class="title">{{ item.goodsName }}</view>
            <view class="desc">
              <view class="left" v-if="false">
                {{ item.classHours || "-" }}
                <text>学时</text>
              </view>
              <view class="right">¥ {{ toFixed(item.standPrice) }}</view>
            </view>
          </view>
        </navigator>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
// import { websocket } from '@/common/socket.js';
import { socket_url, version } from "@/common/request.js";
export default {
  components: {},
  data() {
    return {
      infoNums: 0,
      list: [],
      tabCurrent: 0,
      date: ["日", "一", "二", "三", "四", "五", "六"],
      date_num: [],
      current: 0,
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      duration: 500,
      swiperHeight: 0,
      nearByDay: "", //距离最近一天考试
      menu: [
        {
          name: "推荐课程",
        },
        {
          name: "推荐题库",
        },
      ],
      goodsIndex: 0,
      goodsItem: 0,
      workList: [],
      workTextList: [],
      planGoodsList: [],
      paramList: [
        {
          pageNum: 1,
          pageSize: 10,
          total: 0,
          showStatus: 0,
          goodsType: 1,
        },
        {
          pageNum: 1,
          pageSize: 10,
          total: 0,
          showStatus: 0,
          goodsType: 2,
        },
      ],
      list1: [],
      list2: [],
      isLogin: false,
      isOld: false,
    };
  },
  onPullDownRefresh() {},
  async onLoad(option) {
    this.dictObj;
    this.getAdvertising();
    if (this.$method.isLogin()) {
      try {
        await this.getUserInfo();
        // websocket.sokcet(socket_url+this.userInfo.userId+'-'+this.$method.getRandomString(6))
        // websocket.sokcet(socket_url+this.userInfo.userAccount)
      } catch (err) {}
    } else {
      if (uni.getStorageSync("needToLogin")) {
        uni.removeStorageSync("needToLogin");
        uni.navigateTo({
          url: "/pages4/login/login",
        });
      }
    }

    this.init();
  },
  onShow() {
    uni.removeStorageSync("goPath");
    this.courseList();
    this.bankList();
    if (uni.getStorageSync("updateHome")) {
      this.init();
      uni.removeStorageSync("updateHome"); //消费首页刷新事件
    }

    this.appCommonConfig({
      version,
    });

    if (this.$method.isLogin()) {
      this.$store.state.allowLoading = false;
      this.$api.getinfoAttached().then((res) => {
        if (res.data.code === 200) {
          this.infoNums = res.data.data.informSum;
          const nums =
            res.data.data.informSum +
            res.data.data.orderSum +
            res.data.data.periodSum +
            res.data.data.planSum +
            res.data.data.subscribeSum;
          this.$store.commit("tabNum", nums);
        }
      });
      this.$store.state.allowLoading = true;
    } else {
      this.$store.commit("tabNum", 0);
    }
  },
  onShareAppMessage(res) {
    var self = this;
    return {
      title: "中正",
      path:
        `/pages/index/index?inviteCode=` + userInfo == null
          ? ""
          : userInfo.userAccount,
    };
  },
  methods: {
    ...mapActions(["getUserInfo", "appCommonConfig"]),
    toFixed(number) {
      if (number > 0) {
        return number.toFixed(2);
      } else {
        return "0.00";
      }
    },
    /**
     * @param {Object} swiper
     * 点击轮播图
     */
    swiperClick(swiper) {
      if (swiper.jumpType == 1) {
        //无跳转
        return;
      } else if (swiper.jumpType == 2) {
        //url
        let url = encodeURIComponent(swiper.jumpUrl);
        uni.navigateTo({
          url: "/pages/webview/index?url=" + swiper.jumpUrl,
        });
      } else if (swiper.jumpType == 3) {
        //内部接口
        uni.navigateTo({
          url: swiper.jumpUrl,
        });
      } else if (swiper.jumpType == 4) {
        //外部接口
        uni.navigateToMiniProgram({
          appId: swiper.remarks,
          path: swiper.jumpUrl,
          extraData: {},
          success(res) {
            // 打开成功
          },
          fail(err) {
            console.log(err);
            //  uni.showToast({
            //  	title:'无效的appId，'+err.errMsg,
            // icon:'none'
            //  })
          },
        });
      }
    },
    /**
     * banner图片加载完成
     */
    imageLoad(e) {
      let winW = 750;
      let imgW = e.detail.width;
      let imgH = e.detail.height;
      this.swiperHeight = (750 * imgH) / imgW;
    },
    async getAdvertising() {
      await this.advertisingHomeLocation();
      await this.advertisingList();
    },

    getUserSubscribeRecentExam() {
      return new Promise((resolve) => {
        this.$api.getUserSubscribeRecentExam().then((res) => {
          if (res.data.code == 200) {
            if (res.data.data) {
              let day = this.$method
                .timestampToTime(res.data.data.applySiteExamTime, true)
                .replace(/-/g, "/");
              let dayTime = day + " " + res.data.data.applySiteStartTime;
              let NowTime = new Date(); //考试时间
              let examTime = new Date(dayTime); //考试时间
              let t =
                examTime.getTime() / 1000 -
                (NowTime.getTime() / 1000).toFixed(0);
              if (t > 0) {
                let day = +this.$method.GetRTime(
                  examTime.getTime() / 1000,
                  true
                );
                this.nearByDay = day;
              }
            }

            resolve();
          }

          console.log(res);
        });
      });
    },

    advertisingHomeLocation() {
      return new Promise((resolve) => {
        this.$api.advertisingHomeLocation().then((res) => {
          this.interval = res.data.data.intervalTime * 1000;
          resolve();
        });
      });
    },
    advertisingList() {
      return new Promise((resolve) => {
        this.$api.advertisingList({ locationId: 1 }).then((res) => {
          this.list = res.data.rows;
          resolve();
        });
      });
    },
    jumpPage() {
      this.$navTo.togo("/pages4/msg/index");
    },
    go(type) {
      if (!this.$method.isLogin()) {
        if (type == "course") {
          uni.setStorageSync("goPath", "course");
        } else if (type == "bank") {
          uni.setStorageSync("goPath", "bank");
        }
        this.$navTo.togo("/pages4/login/login");
      } else {
        if (type == "course") {
          uni.navigateTo({
            url: "/pages2/wd/class",
          });
        } else if (type == "bank") {
          this.$api
            .lockLockStatus({
              action: "bank",
            })
            .then((res) => {
              if (res.data.code == 200) {
                //有其他端在操作，不能学习
                uni.showToast({
                  icon: "none",
                  title: res.data.msg,
                  duration: 3000,
                });
              } else if (res.data.code == 500) {
                //可以学习
                uni.navigateTo({
                  url: "/pages2/wd/question_bank",
                });
              }
            });
        }
      }
    },
    //课程
    courseList() {
      var self = this;
      var param = this.paramList[0];
      this.$api.goodsList(param).then((res) => {
        console.log(res, "res");
        self.paramList[0].total = res.data.total;
        self.list1 = res.data.rows;
        if (self.list1.length === res.data.total) {
          self.paramList[0].showStatus = true;
        }
      });
    },
    //题库
    bankList() {
      var self = this;
      var param = this.paramList[1];
      this.$api.goodsList(param).then((res) => {
        self.paramList[1].total = res.data.total;
        self.list2 = res.data.rows;
        if (self.list2.length === res.data.total) {
          self.paramList[1].showStatus = true;
        }
      });
    },
    /**
     * @param {Object} item
     * 跳转课程详情
     */
    async jumpGoodsDetail(item) {
      uni.navigateTo({
        url: "/pages2/wd/class",
      });
      // let currentTime = this.$method.getZeroTime();

      // if(currentTime < item.studyStartTime || currentTime > item.studyEndTime) {
      // 	uni.showToast({
      // 		title:'不在学习有效期，不可以学习了哦',
      // 		icon:'none'
      // 	})
      // 	return;
      // }

      // if( (item.classStartTime && currentTime <= item.classStartTime) || (item.classEndTime && currentTime >= item.classEndTime) ) {
      // 	uni.showToast({
      // 		title:'不在班级有效期，不能进入学习',
      // 		icon:'none'
      // 	})
      // 	return;
      // }

      // if(item.learningStatus == 2) {
      // 	uni.showToast({
      // 		title:'开放学习时间待定，不能进入学习',
      // 		icon:'none'
      // 	})
      // 	return;
      // }

      // if(item.classStatus == 0 ) {
      // 	uni.showToast({
      // 		title:'尚未开班，不能进入学习',
      // 		icon:'none'
      // 	})
      // 	return;
      // }

      // if(item.learningStatus == 3 && (currentTime < item.learningTimeStart) ) {
      // 	uni.showToast({
      // 		title:'不在开放学习时间,不能进入学习',
      // 		icon:'none'
      // 	})
      // 	return;
      // }

      // if(item.gradeStatus == 1 && item.status == 1 && (item.studyEndTime > currentTime) &&  (item.classEndTime && (item.classEndTime < currentTime)) && (item.periodStatus == 0 || item.periodStatus == -1) && item.studyCount > 0) {

      // 	uni.showModal({
      // 		title:'提示',
      // 		content:'班级已过期，需要重新选班',
      // 		showCancel:false,
      // 		success:() => {
      // 			uni.navigateTo({
      // 				url:"/pages2/wd/class"
      // 			})
      // 		}
      // 	})
      // 	return;
      // }

      // let rebuildStatus = await this.courseGoodsRebuildStatus(item.goodsId,item.gradeId);

      // if(rebuildStatus == 0) {
      // 	this.$navTo.togo('/pages2/learn/details', {
      // 		gradeId:item.gradeId,
      // 		goodsId: item.goodsId
      // 	})
      // 	return;
      // }

      // if(item.courseNum == 1 ) {

      // 	this.$api.courseCourseList({
      // 		pageNum:1,
      // 		pageSize:1,
      // 		goodsId:item.goodsId,
      // 		gradeId:item.gradeId
      // 	}).then(res => {
      // 		if(res.data.code == 200) {
      // 			uni.navigateTo({
      // 				url:`/pages3/polyv/detail?id=${res.data.rows[0].courseId}&goodsId=${item.goodsId}`
      // 			})
      // 		}
      // 	});
      // 	return;
      // }

      // this.$navTo.togo('/pages2/wd/course', {
      // 	id: item.goodsId,
      // 	gid:item.gradeId
      // });
    },
    /**
     * @param {Object} goodsId 商品id
     * 查询商品重修状态
     */
    courseGoodsRebuildStatus(goodsId, gradeId) {
      return new Promise((resolve) => {
        this.$api
          .courseGoodsRebuildStatus({
            goodsId: goodsId,
            gradeId: gradeId,
          })
          .then((res) => {
            resolve(res.data.data);
          });
      });
    },
    preveItem() {
      if (this.goodsIndex > 0) {
        this.goodsIndex = this.goodsIndex - 1;
        this.planGoodsList = this.workList[this.goodsIndex].goodsVos;
        this.goodsItem = this.planGoodsList[0];
        this.dealRL(this.workList[this.goodsIndex].calendarStudyVo);
      }
    },
    nextItem() {
      if (this.goodsIndex < this.workList.length - 1) {
        this.goodsIndex = this.goodsIndex + 1;
        this.planGoodsList = this.workList[this.goodsIndex].goodsVos;
        this.goodsItem = this.planGoodsList[0];
        this.dealRL(this.workList[this.goodsIndex].calendarStudyVo);
      }
    },
    jumpPlan() {
      if (!this.$method.isLogin()) {
        this.$navTo.togo("/pages4/login/login");
      } else {
        this.$navTo.togo("/pages2/plan/index", {});
      }
    },
    async init() {
      if (!this.$method.isLogin()) {
        //未登录
        this.date_num = [];
        this.workList = [];
        this.planGoodsList = [];
        this.initDay();
      } else {
        this.date_num = [];
        this.workList = [];
        this.planGoodsList = [];
        await this.userPlanSeven();
        await this.getUserSubscribeRecentExam();
      }
    },
    getMonDate() {
      var d = new Date(),
        day = d.getDay(),
        date = d.getDate();
      if (day == 0) return d;
      else d.setDate(date - day);
      return d;
    },
    initDay() {
      // d是当前星期一的日期对象
      var d = this.getMonDate();
      var arr = [];
      let date = new Date();
      let num = date.getDate();
      this.date_num = [];
      for (var i = 0; i < 7; i++) {
        let item = { date: d.getDate() };
        item.color = 0;
        if (d.getDate() == num) {
          item.color = 3;
        }
        this.date_num.push(item);
        d.setDate(d.getDate() + 1);
      }
    },
    dealRL(calendarStudyVo) {
      let self = this;
      self.date_num = [];
      let date = new Date();
      let num = date.getDate();
      let month = date.getMonth() + 1;
      let list = [];
      for (let j = 0; j < calendarStudyVo.length; j++) {
        let item = calendarStudyVo[j];
        list = item.dayStudyList;
        for (let i = 0; i < list.length; i++) {
          let item = list[i];
          item.color = 0;
          if (item.date == num) {
            item.color = 3;
          }
          if (item.perform == 1) {
            item.color = 1;
          }
          if (item.perform == 2) {
            item.color = 2;
          }
          item.note = item.studyCourseKnob;
          if (item.note > 0) {
            item.dot = true;
          }
          self.date_num.push(item);
        }
      }
    },
    userPlanSeven() {
      return new Promise((resolve) => {
        let self = this;
        this.$api.userPlanSeven().then((result) => {
          if (result.data.data && result.data.data.length > 0) {
            self.workList = result.data.data;
            self.planGoodsList = self.workList[0].goodsVos;
            if (self.planGoodsList != null && self.planGoodsList.length > 0) {
              self.goodsItem = self.planGoodsList[0];
            }
            self.dealRL(result.data.data[0].calendarStudyVo);
            /* let date = new Date();
						let num = date.getDate();
						let month = date.getMonth() + 1;
						let list = [];
						for (let i = 0; i < result.data.data[0].calendarStudyVo.length; i++) {
							let item = result.data.data[0].calendarStudyVo[i];
							if (item.month == month) {
								list = item.dayStudyList;
							}
						}
						for (let i = 0; i < list.length; i++) {
							let item = list[i];
							item.color = 0;
							if (item.date == num) {
								item.color = 3;
							}
							if (item.perform == 1) {
								item.color = 1;
							}
							if (item.perform == 2) {
								item.color = 2;
							}
							item.note = item.studyCourseKnob;
							if (item.note > 0) {
								item.dot = true;
							}
							self.date_num.push(item);
						} */
          } else {
            self.initDay();
          }

          resolve();
        });
      });
    },
    swiperChange(e) {
      this.current = e.detail.current;
    },
    tab(e) {
      this.tabCurrent = e;
    },
    updateHomePlan() {
      this.$refs.home.init();
    },
    beforeSwitch(index) {
      let that = this;
      if (index == 1) {
        this.isClick1 = true;
      }
      if (index == this.current) {
        return false;
      }
      if (!this.$method.isLogin()) {
        if (index == 0 || index == 1) {
          return true;
        } else {
          this.$navTo.togo("/pages4/login/login");
          return false;
        }
      } else {
        if (index == 2) {
          this.$refs.refMy.init();
        }
        return true;
      }
    },
  },
  onReachBottom() {},
  computed: { ...mapGetters(["dictObj", "userInfo"]) },
};
</script>

<style lang="scss" scoped>
.index {
  .navbar {
    /deep/ .u-navbar-inner {
      margin-right: 0 !important;
    }

    .slot-wrap {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        width: 178rpx;
        height: 31rpx;
      }
    }
  }

  .swiper {
    width: 100%;
    position: relative;

    .dots {
      position: absolute;
      left: 0;
      bottom: 8rpx;
      width: 100%;
      display: flex;
      justify-content: center;

      .dot {
        width: 8rpx;
        height: 8rpx;
        background: #ffffff;
        border-radius: 50%;
        margin: 0 4rpx;
        transition: all 0.3s;

        &.active {
          width: 24rpx;
          height: 8rpx;
          background: #007aff;
          border-radius: 4rpx;
        }
      }
    }
    image {
      width: 100%;
    }
  }

  .content {
    overflow: hidden;
    padding: 0 16rpx 16rpx;
    background: rgba(234, 238, 241, 1);

    .notice {
      background: #fff;
      border-radius: 16rpx;
      margin-top: 32rpx;
      overflow: hidden;
      &__content {
        padding: 0 8rpx;
        height: 56rpx;
        background: linear-gradient(
          -90deg,
          rgba(255, 209, 0, 0.3),
          rgba(255, 255, 255, 0.3)
        );
        display: flex;
        align-items: center;
      }

      .icon {
        width: 40rpx;
        height: 40rpx;
        margin-right: 8rpx;
      }

      .text {
        flex: 1;
        font-size: 24rpx;
        color: #333333;
        position: relative;
      }

      .btn {
        font-size: 24rpx;
        color: #007aff;
      }
    }

    .date-list {
      margin-top: 16rpx;
      width: 718rpx;
      height: 330rpx;
      background: #ffffff;
      border-radius: 16rpx;
      padding: 18rpx 27rpx;

      .title {
        font-size: 30rpx;
        font-weight: bold;
        color: #007aff;
      }

      .list {
        margin-top: 40rpx;
        display: flex;
        justify-content: space-around;

        .item {
          .top {
            text-align: center;
            font-size: 26rpx;
            color: rgba(102, 102, 102, 0.6);
          }

          .bottom {
            text-align: center;
            line-height: 48rpx;
            margin-top: 30rpx;
            width: 48rpx;
            height: 48rpx;
            border-radius: 50%;
            color: rgba(51, 51, 51, 1);
            font-size: 26rpx;
            position: relative;

            &.red {
              color: #ff3b30;
            }

            &.green {
              color: #36c75a;
            }

            &.blue {
              background: #007aff;
              color: #fff;
            }

            .note {
              width: 30rpx;
              height: 30rpx;
              border: 2rpx solid #ff9500;
              border-radius: 50%;
              position: absolute;
              top: -20rpx;
              right: -20rpx;
              line-height: 28rpx;
              text-align: center;
              color: #ff9500;
              font-size: 26rpx;
            }

            .point {
              margin: 0 auto;
              width: 8rpx;
              height: 8rpx;
              background: #ff9500;
              border-radius: 50%;
            }
          }
        }
      }

      .btns {
        margin-top: 50rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        .left,
        .right {
          width: 40rpx;
          height: 40rpx;
        }

        .center {
          width: 440rpx;
          height: 56rpx;
          background: #ffffff;
          box-shadow: 0px 0px 9rpx 1rpx rgba(47, 67, 121, 0.1);
          border-radius: 28rpx;
          color: rgba(255, 149, 0, 1);
          line-height: 56rpx;
          text-align: center;
          font-size: 30rpx;
          margin: 0 30rpx;
        }
      }
    }

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

    .course-list {
      background: #fff;
      padding: 0 8rpx;
      box-shadow: 0px 10rpx 9rpx 1rpx rgba(165, 196, 239, 0.1);
      border-radius: 16rpx;

      .item {
        padding: 24rpx 0;
        border-bottom: 1rpx solid #eeeeee;
        display: flex;

        .img {
          position: relative;
          margin-right: 10rpx;
          border-radius: 16rpx;
          overflow: hidden;
          width: 320rpx;
          height: 180rpx;

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

          .time {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 80rpx;
            height: 32rpx;
            background: rgba(1, 25, 45, 0.4);
            color: #fff;
            text-align: center;
            line-height: 32rpx;
            font-size: 24rpx;
            border-radius: 10rpx 0px 10rpx 0px;
          }
        }

        .text {
          flex: 1;
          padding-right: 10rpx;
          position: relative;
          .title {
            font-size: 30rpx;
            color: #333333;
          }

          .desc {
            margin-top: 40rpx;
            display: flex;
            position: absolute;
            bottom: 0;
            width: 100%;
            .left {
              flex: 1;
              color: #333;
              font-size: 26rpx;

              text {
                font-size: 24rpx;
                color: #999;
              }
            }

            .right {
              font-size: 24rpx;
              font-weight: bold;
              color: #ff2d55;
            }
          }
        }
      }
    }
  }

  .my-list {
    margin: 32rpx 0;
    display: flex;
    justify-content: space-between;
    &__item {
      width: 351rpx;
      height: 96rpx;
      position: relative;
      padding: 25rpx 0 0 25rpx;
      font-size: 32rpx;

      &--bank {
        text {
          position: relative;
          z-index: 2;
          color: #00998a;
        }
      }

      &--course {
        text {
          position: relative;
          z-index: 2;
          color: #0062d9;
        }
      }

      image {
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        position: absolute;
        z-index: 1;
      }
    }
  }
}
.date_dot {
  width: 6rpx;
  height: 6rpx;
  background: #ffcc00;
  border-radius: 50%;
  margin: 0 auto;
}
.date_note {
  border-radius: 50%;
  width: 29rpx;
  height: 29rpx;
  border: 1px solid #ffcc00;
  font-size: 18rpx;
  color: #ffcc00;
  text-align: center;
  display: inline-block;
  position: absolute;
  top: -19rpx;
  right: 9rpx;
}
.circle_num {
  border-radius: 50%;
  width: 29rpx;
  height: 29rpx;
  border: 1px solid #ffcc00;
  font-size: 18rpx;
  color: #ffcc00;
  text-align: center;
  display: inline-block;
  margin: 5rpx;
}
.date_num {
  width: 14%;
  text-align: center;
  position: relative;
  display: inline-block;
  margin-top: 20rpx;
}
.course_title {
  color: #2f4379;
  box-shadow: 0rpx 0rpx 9rpx 1rpx rgba(47, 67, 121, 0.1);
  border-radius: 28rpx;
  width: 100%;
  height: 48rpx;
  line-height: 48rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.arr-icon {
  width: 40rpx;
  height: 40rpx;
}
.date_num_color0 {
  color: #32467b;
}
.date_num_color1 {
  color: #34c759;
}
.date_num_color2 {
  color: #ff3b30;
}
.date_num_color3 {
  color: #ffffff;
  background-color: #ffcc00;
  border-radius: 50%;
  width: 40rpx;
  height: 40rpx;
  display: inline-block;
}
.card_date {
  width: 14%;
  text-align: center;
  color: #7f8caf;
}
page {
  background: #ffffff;
  font-size: 28rpx;
}
.calendar_card {
  width: 100%;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(47, 67, 121, 0.1);
  border-radius: 22rpx;
  margin-top: 16rpx;
  padding-bottom: 15rpx;
}
.calendar_card .card_box {
  height: 60rpx;
  line-height: 60rpx;
  margin-left: 20rpx;
}
.calendar_card .t1 {
  color: #007aff;
  font-size: 24rpx;
}
.img_more {
  width: 26rpx;
  height: 26rpx;
}
.flex-d {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.contentZ {
  flex: 1;
  overflow-y: auto;
  padding-left: 35rpx;
  display: flex;
  justify-content: space-around;
}
.contentZ::-webkit-scrollbar {
  display: none;
}
.fots {
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-top: 1rpx solid #eee;
}
.leftBtns {
  font-size: 30rpx;
  color: #32467b;
  font-weight: 500;
}
.right_Btns {
  font-size: 30rpx;
  color: #fff;
  background-color: #32467b;
  border-radius: 24rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  padding: 0rpx 23rpx;
  box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
}
.lzs {
  width: 31%;
  margin: 0rpx 1%;
  max-width: 31%;
}
.tylsz {
  margin-top: 23rpx;
  color: #666;
  font-weight: 400;
  font-size: 24rpx;
}
.tylsz:first-child {
  text-align: center;
}
.activeStys {
  font-weight: bold;
  color: #32467b;
}
</style>