zc_saas_h5/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, true)" 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.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 => {
				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(['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:16rpx;
			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-top:16rpx;
		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>