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="tabs">
				<view v-for="(item, index) in menu" :key="index" class="tab_item" :class="{nactive: tabNum == index}" @click="tab(index)">{{ item.name }}</view>
			</view>
			<view class="course-list" v-show="tabCurrent==0">
				<template v-if="list1.length">
					<navigator  hover-class="none" class="list_item" v-for="(item,index) in list1" :key="index" :url="'/pages3/course/detail?id='+item.goodsId">
						<view class="course_content">
							<view class="c_title">{{item.goodsName}}</view>
							<view class="c_downs">
								<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="desc">
										<view class="left">
											<text v-if="item.standPrice" class="mon_t">¥ {{toFixed(item.standPrice)}}</text>
											<text v-else class="mon_t free">免费</text>
											<!-- <text class="sale">/限时优惠</text> -->
											<text v-if="item.linePrice" class="sale"> ¥ </text>
											<text v-if="item.linePrice" class="price_line">&nbsp;{{ item.linePrice }}</text>
										</view>
										<view class="right">
											<view class="regiser_row">立即购买</view>
										</view>
									</view>
									<view v-if="item.buyUserNum" class="joins">
										<!-- <image class="people" src="/static/index/people.png"></image> -->
										<!-- 为0时，不显示 -->
										<view class="people">{{ item.buyUserNum }}人参与</view>
									</view>
								</view>
							</view>
						</view>					
					</navigator>
				</template>
				<template v-else>
					<u-empty text="暂无推荐课程" mode="list" margin-top="100"></u-empty>
				</template>
			</view>
			<view class="course-list" v-show="tabCurrent==1">
				<template v-if="list2.length">
					<navigator hover-class="none" class="list_item" v-for="(item,index) in list2" :key="index" :url="'/pages2/bank/detail?id='+item.goodsId">
						<view class="course_content">
							<view class="c_title">{{item.goodsName}}</view>
							<view class="c_downs">
								<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="desc">
										<view class="left">
											<text v-if="item.standPrice" class="mon_t">¥ {{toFixed(item.standPrice)}}</text>
											<text v-else class="mon_t free">免费</text>
											<!-- <text class="sale">/限时优惠</text> -->
											<text v-if="item.linePrice" class="sale"> ¥ </text>
											<text v-if="item.linePrice" class="price_line">&nbsp;{{ item.linePrice }}</text>
										</view>
										<view class="right">
											<view class="regiser_row">立即购买</view>
										</view>
									</view>
									<view v-if="item.buyUserNum" class="joins">
										<!-- 为0时，不显示 -->
										<view class="people">{{ item.buyUserNum }}人参与</view>
									</view>
									
								</view>
							</view>
						</view>
					</navigator>
				</template>
				<template v-else>
					<u-empty text="暂无推荐题库" mode="list" margin-top="100"></u-empty>
				</template>
			</view>
		</view>

		<!-- <tab-bar v-model="current" :list="tabbarlist" :mid-button="true" :mid-button-size="50" class="tab_items"></tab-bar> -->
		<!-- <view v-if="isLogin" class="official">
			<u-icon name="close"></u-icon>
			<official-account @load='bindload'></official-account>
		</view> -->
		<!-- v-if="isLogin && (isFollow != 1) && curClose" -->
		<!-- <view class="officialsss">
			<text>asdsufd</text>
			<official-account></official-account>
		</view> -->
		<view :style="{'opacity':opacitys}" class="officials">
			<view class="weixin_official_account">
				<image class="off_logo" src="/static/index/official.png"></image>
				<view>
					<view class="one">关注 “祥粤学校” 公众号</view>
					<view class="two">学习提醒、 报考通知不会错过</view>
				</view>
				<button type="default" class="btn btn-official" >
					去关注
					<official-account class="official-account" id="official_account"></official-account>
				</button>
				<view class="close_icon">
					<u-icon name="close" class="icon-close" @click="closeOff"></u-icon>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import { socket_url, version} from '@/common/request.js';
// import TabBar from '@/components/u-tabbar/u-tabbar.vue';
export default {
	// components: { TabBar },
	data() {
		return {
			tabNum: 0,
			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,
					getUserNum: 1, //是否返回商品购买用户数量 1带 0不带	,会返回个buyUserNum
					goodsType:1
				},
				
				{
					pageNum: 1,
					pageSize: 10,
					// total: 0,
					// showStatus: 0,
					getUserNum: 1,
					goodsType:2
				}
			],
			total1: 0,
			showStatus1: 0,
			total2: 0,
			showStatus2: 0,
			list1: [],
			list2: [],
			isLogin:false,
			isOld:false,
			current: 0,
            // tabbarlist: this.$store.state.tabLists,
			showOfficial: false,
			// opacity: 1,
			isFollow: null, //是否关注过,不是1就是没关注
			curClose: true, // 当天时是否关闭过
		};
	},
	onPullDownRefresh() {},
	async onLoad(option) {
		this.isLogin = this.$method.isLogin()
		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()

		wx.getSystemInfo({
			success: function (res) {
				let version = res.SDKVersion
				console.log('该版本号为: ', version)
			}
		})
	},
	onShow() {
		this.getInfo() // 判断有没有关注公众号		
		this.isClickOff() //关注公众号，每天最多显示1次；当天学员关闭弹窗后，无需再显示
		console.log('this.$store.state.scene', this.$store.state.scene)
		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) {
		return {
			title: '中正',
			path: `/pages/index/index?inviteCode=` + userInfo == null ? '' : userInfo.userAccount
		};
	},
	computed: { 
		...mapGetters(['dictObj','userInfo']),
		opacitys() {
			const value = [1011,1017,1025,1047,1124].includes(this.$store.state.scene) && this.isLogin && (this.isFollow != 1) && this.curClose ? 1 : 0
			console.log('this.opacity::', value)
			return value
		},
	},
	methods: {
		...mapActions(['getUserInfo','appCommonConfig']),
		getInfo() {
			// /app/user/getInfo 登录用户信息 // fromPlat来源平台 1小程序 2PC网站
			this.$api.getInfo({ fromPlat: 1 }).then(res => {
				if(res.data.code == 200){
					this.$store.state.userInfo = res.data.data
					this.isFollow = res.data.data.userFollowWx // 不是1就是没关注
					console.log('有没有关注', this.isFollow, this.isFollow != 1)
				}
			})
		},
		// 每天最多显示1次；当天学员关闭弹窗后，无需再显示
		isClickOff() {
			//当天23：59：59秒 转换成的毫秒数
			const end = new Date(new Date(new Date().toLocaleDateString()).getTime()+24*60*60*1000-1).getTime()
			const start = new Date().getTime() //当前时间的毫秒数
			if(uni.getStorageSync('endTime')){	//首先判断本地有没有存入当天23：59：59秒的毫秒数
				if(start > uni.getStorageSync('endTime')){ //当前时间毫秒数大于当天23：59：59秒
					this.curClose = true
					uni.removeStorageSync('curClose')
					uni.removeStorageSync('endTime')
				} else {
					this.curClose = uni.getStorageSync('curClose') ? false : true
				}
			}else{
				uni.setStorageSync("endTime", end) //存入当天晚上23：59：59秒的毫秒数
			}
		},
		closeOff() {
			this.curClose = false
			uni.setStorageSync("curClose", '1')
		},
		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)
				  }
				})
			}
		},
		/**
		 * 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()
					}					
				})
			})
			
		},
		
		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 param = this.paramList[0];
			// /app/common/goods/list
			this.$api.goodsList(param).then(res => {
				if (res.data.code == 200) {
					this.list1 = res.data.rows || []
					this.total1 = res.data.total
					if (this.list1.length === res.data.total) {
						this.showStatus1 = true
					}
				}
				
			});
		},
		//题库
		bankList() {
			var param = this.paramList[1];
			this.$api.goodsList(param).then(res => {
				// this.paramList[1].total = res.data.total;
				if (res.data.code == 200) {
					this.list2 = res.data.rows || []
					this.total2 = res.data.total
					if (this.list2.length === res.data.total) {
						// this.paramList[1].showStatus = true;
						this.showStatus2 = true
					}
				}
			});
		},
		/**
		 * @param {Object} item 
		 * 跳转课程详情
		 */
		async jumpGoodsDetail(item){
			uni.navigateTo({
				url:'/pages2/wd/class'
			})
		},
		/**
		 * @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)
					} else {
						self.initDay();
					}
					
					resolve()
				});
			})
			
		},
		swiperChange(e) {
			this.current = e.detail.current;
		},
		tab(e) {
			this.tabCurrent = e;
			this.tabNum = 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() {},
	
};
</script>

<style>
page {
	background: #eaeef1;
}
</style>
<style lang="scss" scoped>
@mixin threeDot {
	overflow: hidden;
	text-overflow:ellipsis; 
	white-space: nowrap;
}
.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;
		background: rgba(234, 238, 241, 1);
		padding-bottom: 100rpx;
		.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 {
			width: 100%;
			height: 78rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #F2F7FF;
			border-radius: 38rpx;
			margin: 34rpx 0rpx 24rpx 0rpx;
			padding: 0rpx 5rpx;
			.tab_item {
				width: 345rpx;
				height: 65rpx;
				line-height: 65rpx;
				font-size: 28rpx;
				font-weight: bold;
				border-radius: 32rpx;
				text-align: center;
				color: #333;
				&.nactive {
					color: #fff;
					background-color: #3577E8;
				}
			}
		}
		
		.course-list {
			box-shadow: 0px 10rpx 9rpx 1rpx rgba(165, 196, 239, 0.1);			
			.list_item {
                padding: 24rpx;
				// height: 278rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 20rpx 1rpx rgba(1,99,235,0.1000);
				border-radius: 24rpx;
                background:#fff;
                margin-bottom: 32rpx;
				display: flex;
    			align-items: center;
                .c_title {
                    font-size: 32rpx;
                    font-weight: bold;
                    margin-bottom: 24rpx;
                    font-weight: bold;
					color: #222222;
                }
				.c_downs {
					display: flex;
				}
				.img {
					position:relative;
					margin-right: 24rpx;
					border-radius: 16rpx ;
					overflow: hidden;
					width: 204rpx;
					height: 120rpx;
					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 {
					width: 440rpx;
					position: relative;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: 120rpx;
					.joins {
						.people {
							width: 160rpx;
							font-size: 20rpx;
							color: #999999;
							padding: 0rpx 8rpx;
							text-align: center;
							height: 36rpx;
							line-height: 36rpx;
							background: #F6F7FB;
							border-radius: 4px;
						}
						
					}
					.desc {
						margin-top: 10rpx;
						display: flex;
						align-items: center;
    					justify-content: space-between;
						width: 100%;
						.left {
							flex:1;
							color:#333;
							font-size: 26rpx;
                            .mon_t {
                                font-weight: bold;
								color: #FC3F3F;
								font-size: 36rpx;
                            }
							.free {
								font-size: 24rpx;
							}
							.sale {
								color: #999999;
								font-size: 24rpx;
								margin-left: 8rpx;
							}
							.price_line {
								color: #999999;
								font-size: 24rpx;
								text-decoration:line-through;
								font-weight: 400;
							}
						}
						
						.right {
							font-size: 24rpx;
							font-weight: bold;
                            .regiser_row {
                                width: 144rpx;
                                height: 52rpx;
                                line-height: 52rpx;
                                text-align: center;
                                border-radius: 16rpx;
                                background-color: #FC3F3F;
                                color: #fff;
								font-weight: 500;
								font-size: 26rpx;
                            }
						}
					}
				}
			}
		}
	}
	// .botms {
	// 	padding-bottom: 100rpx;
	// }
	
	.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;
}

.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;
}
.officialsss {
	position: fixed;
	left: 0;
	bottom: 100rpx;
	width: 100%;
}
.officials {
	width:100%;
	height: 104rpx;
	position:fixed;
	bottom: 0;
	left: 0;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
}
.weixin_official_account {
	position: fixed;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	// justify-content: space-between;
	width: 718rpx;
	height: 104rpx;
	padding: 0 32rpx;
	margin-left: 16rpx;
	background: #3A3F54;
	border-radius: 16rpx;
	.off_logo {
		width: 48rpx;
		height: 48rpx;
		margin-right: 24rpx;
	}
	.one {
		color: #fff;
		font-size: 24rpx;
		font-weight: 500;
	}
	.two {
		color: #BCBEC7;
		font-size: 20rpx;
	}
	.btn {
		position: relative;
		top: 0;
    	left: 35rpx;
		width: 128rpx;
		height: 56rpx;
		line-height: 56rpx;
		padding: 0;
		background: linear-gradient(274deg, #408BF6 0%, #40B4F6 100%);
		border-radius: 156rpx;
		overflow: hidden;
		text-align: center;
		font-size: 24rpx;
		color: #fff;

		.official-account {
			position: absolute;
			z-index: 1000;
			right: -9px;
			top: -38px;
			opacity: 0;
		}
	}
	.close_icon {
		width: 40rpx;
		height: 40rpx;
		background: #FFFFFF;
		opacity: 0.2;
		display: flex;
		align-items: center;
		position: absolute;
		top: 0;
		right: 0;
		color: #fff;
		border-radius: 0rpx 16rpx;
	}
	.icon-close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 50rpx;
		height: 68rpx;
		font-size: 22rpx;
		color: #7B8284;
	}
}

</style>