saas_miniprogram/pages2/plan/index.vue

<template>
	<view >
		<nav-bar title="学习计划"></nav-bar>
		<view v-if="havePlan">
			<view class="card" v-if="havePlan">
				<swiper :style="{height:!isOpen?'550rpx':'260rpx'}" class="swiper"  :current="swiperIndex" :duration="duration">
					<swiper-item v-for="(swiperItem,swiperIndex) in swiperList" :key="swiperIndex">
						<view class="date_t1">
							<!-- <u-icon name="arrow-left" size="28" v-if="havePreviousMonth" @click="swipeMonth(-1)"></u-icon> -->
							<text style="padding: 0 15rpx;">{{ swiperItem.year }}年 {{ swiperItem.month }}月</text>
							<!-- <u-icon name="arrow-right" size="28" v-if="haveNextMonth" @click="swipeMonth(1)"></u-icon> -->
						</view>
						<view style="width: 100%;margin-top: 20rpx;">
							<view v-for="(item, index) in date" :key="index" class="card_date">{{ item }}</view>
						</view>
						<view style="width: 100%;margin-top: 20rpx;">
							<view v-for="(item, index) in swiperItem.dayStudyList" :key="index" class="date_num">
								<view v-if="item.color == 0" @click="itemClick(item,index,swiperItem)" class="date_num_color0" :class="{active_color:(swiperItem.year+'-'+swiperItem.month+'-'+item.date) == activeDate}" 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" @click="itemClick(item,index,swiperItem)" class="date_num_color1"  :class="{active_color:(swiperItem.year+'-'+swiperItem.month+'-'+item.date) == activeDate}">
									{{ 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" @click="itemClick(item,index,swiperItem)" class="date_num_color2"  :class="{active_color:(swiperItem.year+'-'+swiperItem.month+'-'+item.date) == activeDate}">
									{{ 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" @click="itemClick(item,index,swiperItem)" class="date_num_color3"  :class="{active_color:(swiperItem.year+'-'+swiperItem.month+'-'+item.date) == activeDate}">
									{{ 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%;display: flex;justify-content: center;" v-if="isOpen == false">
							<view @click="oepn_calendar" style="height: 20rpx;width: 40rpx;padding:20rpx 0;"><view class="date_line"></view></view>
						</view>
						<view style="width: 100%;display: flex;justify-content: center;" v-else>
							<image class="date_line_close" @click="close_calendar" src="/static/close_card.png"></image>
						</view>
					</swiper-item>
					
				</swiper>
				
				<!-- <view class="date_t1">
					<u-icon name="arrow-left" size="28" v-if="havePreviousMonth" @click="swipeMonth(-1)"></u-icon>
					<text style="padding: 0 15rpx;">{{ calendarStudyVo.year }}年 {{ calendarStudyVo.month }}月</text>
					<u-icon name="arrow-right" size="28" v-if="haveNextMonth" @click="swipeMonth(1)"></u-icon>
				</view>
				<view style="width: 100%;margin-top: 20rpx;">
					<view v-for="(item, index) in date" :key="index" class="card_date">{{ item }}</view>
				</view>
				<view style="width: 100%;margin-top: 20rpx;">
					<view v-for="(item, index) in showDayList" :key="index" class="date_num">
						<view v-if="item.color == 0" @click="itemClick(item,index)" class="date_num_color0" :class="{active_color:item.date == activeDate}" 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" @click="itemClick(item,index)" class="date_num_color1"  :class="{active_color:item.date == activeDate}">
							{{ 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" @click="itemClick(item,index)" class="date_num_color2"  :class="{active_color:item.date == activeDate}">
							{{ 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" @click="itemClick(item,index)" class="date_num_color3"  :class="{active_color:item.date == activeDate}">
							{{ 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%;display: flex;justify-content: center;" v-if="isOpen == false">
					<view @click="oepn_calendar" style="height: 20rpx;width: 40rpx;padding:20rpx 0;"><view class="date_line"></view></view>
				</view>
				<view style="width: 100%;display: flex;justify-content: center;" v-else>
					<image class="date_line_close" @click="close_calendar" src="/static/close_card.png"></image>
				</view> -->
				
				<view v-for="(item, index) in workList" :key="index">
					<view style="padding-left: 30rpx;padding-top: 10rpx;display: flex;align-items: center;background:#fff;" @click="jumpDetail(item)">
						<text class="date_t2">{{ item.goodsName }}</text>
						<view class="circle_num" style="margin-left: 20rpx;">{{ item.classHours }}</view>
					</view>
				</view>
			</view>
			<!-- 列表-->
			<view>
				<uni-swipe-action>
					<uni-swipe-action-item :autoClose="false" @change="swipeChange($event, item)" :show="item.show" v-for="(item, index) in list" :key="index">
						<view class="list_item" :class="index % 2 == 0 ? 'list_item_bac1' : 'list_item_bac2'" @click.stop="openEdit(item)">
							<u-row>
								<u-col span="11">
									<text class="item_t1">
										{{ item.goodsVos[0].educationName + '-' + item.goodsVos[0].projectName + '-' + item.goodsVos[0].businessName }}：{{
											$method.timestampToTime(item.endTime)
										}}截止
									</text>
								</u-col>
								<u-col span="1"><image style="transform: rotate(180deg);" src="/static/icon/openSwith.png" class="img_more" @click.stop="openShow(item)"></image></u-col>
							</u-row>
							<scroll-view style="white-space: nowrap" class="scroll-view_H" scroll-x="true">
								<view style="margin-top: 30rpx;display: inline-block;width:296rpx;margin-right: 30rpx;" v-for="(items, indexs) in item.goodsVos" :key="indexs">
									<image :src="$method.splitImgHost(items.coverUrl)" class="r_image"></image>
									<view class="r_t2">{{ items.goodsName }}</view>
								</view>
							</scroll-view>

							<view style="display: flex;margin-top: 30rpx;">
								<text class="item_t2">学习频率：</text>
								<view style="display: flex;justify-content:center;">
									<view v-for="(item1, index) in item.studyCount" :key="index" class="item_date">{{ replay(item1) }}</view>
								</view>
							</view>
							<view style="display: flex;margin-top: 20rpx;">
								<text class="item_t2">学习进度：{{ item.studyNum }}/{{ item.pitchNum }}</text>
							</view>
						</view>
						<template v-slot:right>
							<view class="operate">
								<image src="/static/operate_1.png" class="operate_img operate_img1" @click="delWorker(item)"></image>
								<!-- <image src="/static/operate_2.png" class="operate_img operate_img2"></image> -->
								<image @click="edit(item)" src="/static/operate_3.png" class="operate_img operate_img3"></image>
							</view>
						</template>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</view>

			<view class="newPlan" @click="newPlan()">新建计划</view>
		</view>
		<view v-else class="tipBox">
			<template v-if="isLoaded">
				<view class="dis_ffs" v-if="goodsList.length">
					<view class="tip">您暂无相关计划哦~</view>
					<view class="tipBtn" @click="newPlan()">马上制定</view>
				</view>
				<view class="dis_ffs" v-else>
					<view class="tip">您暂无课程可以制定计划哦~</view>
					<view class="tipBtn" @click="planNow()">马上选课</view>
				</view>
			</template>
			
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			swiperIndex:0,
			isLoaded:false, //是否请求完毕
			monthIndex: 0,
			haveNextMonth: false,
			havePreviousMonth: false,
			showDayList: [],
			workList: [],
			swiperList:[],
			calendarStudyVo: {},
			index: 0,
			date: ['日', '一', '二', '三', '四', '五', '六'],
			list: [],
			isOpen: false,
			date_num: [
				{
					num: 20,
					color: 0,
					note: 0,
					dot: false
				},
				{
					num: 21,
					color: 1,
					note: 0,
					dot: false
				},
				{
					num: 22,
					color: 0,
					note: 0,
					dot: true
				},
				{
					num: 23,
					color: 2,
					note: 0,
					dot: false
				},
				{
					num: 24,
					color: 1,
					note: 0,
					dot: false
				},
				{
					num: 25,
					color: 3,
					note: 2,
					dot: false
				},
				{
					num: 26,
					color: 0,
					note: 1,
					dot: true
				}
			],
			date_use: [],
			options: [
				{
					text: '取消',
					style: {
						backgroundColor: '#007aff'
					}
				},
				{
					text: '确认',
					style: {
						backgroundColor: '#dd524d'
					}
				}
			],
			activeDate:'',
			dayStudyList: [],
			listItem: {},
			currentMonth: 0,
			havePlan: false,
			goodsList: [] //用户拥有的商品
		};
	},
	onLoad(option) {
		this.date_use = this.date_num;
		this.getUserGoodsList();
	},
	onShow() {
		this.workList = [];
		this.showDayList = [];
		// this.calendarStudyVo = {};
		this.isOpen = false;
		this.getList();
	},
	methods: {
		itemClick(item,index,swiperItem) {
			// console.log(item)
			this.activeDate = `${swiperItem.year}-${swiperItem.month}-${item.date}`;
			this.workList = this.getStudyCourseByDay(swiperItem);
		},
		/**
		 * 根据选中日期获取需要学习的课程
		 */
		getStudyCourseByDay(swiperItem) {
			let courseList = [];
			swiperItem.dayStudyList.forEach(day => {
				if(`${swiperItem.year}-${swiperItem.month}-${day.date}` == this.activeDate) {
					if(day.daySectionList) {
						day.daySectionList.forEach(section => {
							this.listItem.goodsVos.forEach(vos => {
								if(vos.goodsId == section.goodsId) {
									courseList.push(vos)
								}
							})
						})
					}
				}
			})
			console.log(courseList)
			return courseList;
		},
		planNow(){
			uni.switchTab({
			    url: '/pages/course/index'
			});
		},
		getUserGoodsList() {
			this.$api.courseGoodsList().then(res => {
				if (res.data.code === 200) {
					this.isLoaded = true;
					this.goodsList = res.data.rows;
				}
			});
		},
		//删除计划
		delWorker(option) {
			var data = {
				planId: option.planId,
				status: -1
			};
			let self = this;
			this.$api.editsystemplan(data).then(res => {
				uni.setStorageSync('updateHome', 1);
				self.getList();
			});
		},
		swipeMonth(index) {
			this.swiperIndex = this.swiperIndex + index
			
			console.log(this.swiperIndex)
			// console.log(index,198)
			// this.isOpen = false;
			// this.haveNextMonth = false;
			// this.havePreviousMonth = false;
			// this.monthIndex = this.monthIndex + index;
			// this.currentMonth = this.currentMonth + index;
			// let item = this.listItem.calendarStudyVo[this.monthIndex];
			// this.calendarStudyVo = item;
			// this.activeDate = '';
			// // this.workList = this.calendarStudyVo.goodsVos;
			// this.workList = this.getStudyCourseByDay();
			// if (this.monthIndex > 0) {
			// 	this.havePreviousMonth = true;
			// }
			// if (this.monthIndex < this.listItem.calendarStudyVo.length - 1) {
			// 	this.haveNextMonth = true;
			// }
			// this.dealDayList();
		},
		dealMonth() {
			
			this.swiperList = []
			
			
			let date = new Date();
			let currentMonth = date.getMonth() + 1;
			this.haveNextMonth = false;
			this.havePreviousMonth = false;
			this.calendarStudyVo = {}
			// this.workList = this.getStudyCourseByDay();
			// this.workList = this.listItem.goodsVos;
			if (this.listItem !== undefined) {
				for (let i = 0; i < this.listItem.calendarStudyVo.length; i++) {
					let item = this.listItem.calendarStudyVo[i];
					if (item.month == currentMonth) {
						this.monthIndex = i;
						this.calendarStudyVo = item;
						if (i > 0) {
							this.havePreviousMonth = true;
						}
						if (i < this.listItem.calendarStudyVo.length - 1) {
							this.haveNextMonth = true;
						}
					}
					
					this.swiperList.push(this.listItem.calendarStudyVo[i])
				}
				
				if(!this.calendarStudyVo.dayStudyList) { //计划没有当前月
					this.monthIndex = 0;
					this.calendarStudyVo = this.listItem.calendarStudyVo[0];
					
					if(this.listItem.calendarStudyVo.length > 1) {
						console.log('len')
						this.haveNextMonth = true;
					}
				}
				this.dealDayList();
			}
		},
		openEdit(item) {
			this.activeDate = '';
			this.listItem = item;
			this.isOpen = false;
			this.dealMonth();
		},
		dealDayList() {
			
			this.swiperList.forEach((swiper,index) => {
				let firstItem = swiper.dayStudyList[0]
				for (let i = 0; i < firstItem.studyDay; i++) {
					 //补齐1号前的日数凑满一周
					swiper.dayStudyList.unshift({ date: 0 });
				} 
				
				let date = new Date();
				let num = date.getDate();
				//如果不是当前月，默认显示第一周
				if ((date.getMonth() + 1) != this.calendarStudyVo.month) {
					num = 1;
				}
				
				let todayIndex;
				let todayItem;
				
				for (let i = 0; i < swiper.dayStudyList.length; i++) {
					let item = swiper.dayStudyList[i];
					item.color = 0;
					
					if (item.date == num) {
						if (date.getMonth() + 1 == swiper.month) {
							item.color = 3;
						}
						todayIndex = i;
						todayItem = item;
					}
					
					if (item.perform == 1) {
						item.color = 1;
					}
					if (item.perform == 2) {
						item.color = 2;
					}
					
					let today = this.$method.getDate(); //获取当前日期
					let currentTime = this.$method.TimeTotimestamp(today.replace('-','/'))
					let dateTime = this.$method.TimeTotimestamp(`${swiper.year}/${swiper.month}/${item.date}`)
					
					item.note = item.studyCourseKnob;
					if ((item.note > 0) && (dateTime >= currentTime)) {
						item.dot = true;
					}
				}
				
				for (let i = 0; i < swiper.dayStudyList.length; i++) {
					let item = swiper.dayStudyList[i];
					
					if (item.note > 0) {
						item.note = 0;
						swiper.dayStudyList.forEach(day => {
							if(day.date == item.date) {
								if(day.daySectionList) {
									day.daySectionList.forEach(section => {
										this.listItem.goodsVos.forEach(vos => {
											if(vos.goodsId == section.goodsId) {
												item.note += vos.classHours
											}
										})
									})
								}
							}
						})
					}
				}
				
			})
			
			// let firstItem = this.calendarStudyVo.dayStudyList[0];
			// this.calendarStudyVo.miniDayStudyList = []; //创建缩放的数组
			// let date = new Date();
			// let num = date.getDate();
			// //如果不是当前月，默认显示第一周
			// if ((date.getMonth() + 1) != this.calendarStudyVo.month) {
			// 	num = 1;
			// }
			//  for (let i = 0; i < firstItem.studyDay; i++) {
			// 	 //补齐1号前的日数凑满一周
			// 	this.calendarStudyVo.dayStudyList.unshift({ date: 0 });
			// } 
			// let todayIndex;
			// let todayItem;
			// for (let i = 0; i < this.calendarStudyVo.dayStudyList.length; i++) {
			// 	let item = this.calendarStudyVo.dayStudyList[i];
			// 	item.color = 0;
			// 	if (item.date == num) {
			// 		if (date.getMonth() + 1 == this.calendarStudyVo.month) {
			// 			item.color = 3;
			// 		}
			// 		todayIndex = i;
			// 		todayItem = item;
			// 	}
			// 	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;
			// 	}
			// }
			
			// let start 
			// start = todayIndex - todayItem.studyDay;
			// /* if(todayItem){
				
			// }else{
			// 	//今天在下个月不存在，例如31号
			// 	todayIndex = this.calendarStudyVo.dayStudyList.length-1
			// 	todayItem = this.calendarStudyVo.dayStudyList[todayIndex]
			// 	start = todayIndex - todayItem.studyDay;
			// } */
			// /* if ((date.getMonth() + 1) != this.calendarStudyVo.month) {
			// 	todayIndex = 0
			// 	todayItem = this.calendarStudyVo.dayStudyList[todayIndex]
			// 	start = 0;
			// } */
			// console.log(start,689)
			// /* this.calendarStudyVo.miniDayStudyList = []
			// for(let i=start;i<start + 7;i++){
			// 	this.calendarStudyVo.miniDayStudyList.push(this.calendarStudyVo.dayStudyList[i])
			// } */
			// console.log(this.calendarStudyVo.miniDayStudyList,789)
			// this.calendarStudyVo.miniDayStudyList = this.calendarStudyVo.dayStudyList.slice(start, start + 7);
			// this.showDayList = this.calendarStudyVo.miniDayStudyList;
			// console.log(this.showDayList)
			
			// for (let i = 0; i < this.calendarStudyVo.dayStudyList.length; i++) {
			// 	let item = this.calendarStudyVo.dayStudyList[i];
				
			// 	if (item.note > 0) {
			// 		item.note = 0;
			// 		this.showDayList.forEach(day => {
			// 			if(day.date == item.date) {
			// 				if(day.daySectionList) {
			// 					day.daySectionList.forEach(section => {
			// 						this.listItem.goodsVos.forEach(vos => {
			// 							if(vos.goodsId == section.goodsId) {
			// 								item.note += vos.classHours
			// 							}
			// 						})
			// 					})
			// 				}
			// 			}
			// 		})
			// 	}
			// }
			
		},
		async jumpDetail(item) {
			
			let currentTime = this.$method.timest();
			
			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
			});
			return;
		},
		/**
		 * @param {Object} goodsId 商品id
		 * 查询商品重修状态
		 */
		courseGoodsRebuildStatus(goodsId,gradeId) {
			return new Promise(resolve => {
				this.$api.courseGoodsRebuildStatus({
					goodsId:goodsId,
					gradeId:gradeId
				}).then(res => {
					resolve(res.data.data)
				})
			})
		},
		replay(index) {
			if (index == 0) {
				return '日';
			}
			if (index == 1) {
				return '一';
			}
			if (index == 2) {
				return '二';
			}
			if (index == 3) {
				return '三';
			}
			if (index == 4) {
				return '四';
			}
			if (index == 5) {
				return '五';
			}
			if (index == 6) {
				return '六';
			}
		},
		getList() {
			let self = this;
			this.$api.getsystemplanlist({ status: 1 }).then(result => {
				result.data.rows.forEach((item, index) => {
					item.show = 'none';
					item.studyNum = 0;
					item.pitchNum = 0;
					item.goodsVos.forEach(vos => {
						item.pitchNum += vos.secAllNum
						item.studyNum += vos.stuAllNum
					})
				});
				self.list = result.data.rows;
				if (result.data.rows.length > 0) {
					self.listItem = self.list[0];
					self.dealMonth();
					self.havePlan = true;
					// if (self.list.length > 0) {
					// 	self.listItem = self.list[0];
					// 	self.dealMonth();
					// 	self.havePlan = true;
					// }
				} else {
					self.havePlan = false;
				}
				self.updateHomePlan();
			});
		},
		updateHomePlan() {
			/* const pages = getCurrentPages(); //获取页面栈
			const beforePage = pages[pages.length - 2]; //前一个页面
			beforePage.$vm.updateHomePlan(); */
		},
		newPlan() {
			this.$navTo.togo('/pages2/plan/create');
		},
		edit(item) {
			this.$navTo.togo('/pages2/plan/edit', {
				id: item.planId
			});
		},
		swipeChange(e, item) {
			item.show = e;
		},
		openShow(item) {
			if (item.show == 'none') {
				item.show = 'right';
			} else {
				item.show = 'none';
			}
		},
		updateHomePlan() {
			const pages = getCurrentPages(); //获取页面栈
			const beforePage = pages[pages.length - 2]; //前一个页面
			//	beforePage.$vm.updateHomePlan();
		},
		close_calendar() {
			this.isOpen = false;
			this.showDayList = this.calendarStudyVo.miniDayStudyList;
		},
		oepn_calendar() {
			this.isOpen = true;
			this.showDayList = this.calendarStudyVo.dayStudyList;
		},
		random(min, max) {
			return Math.floor(Math.random() * (max - min)) + min;
		}
	}
};
</script>

<style scope lang="scss">
.dis_ffs {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.tipBtn {
	width: 160rpx;
	height: 56rpx;
	background: #007aff;
	border-radius: 16rpx;
	color: #ffffff;
	text-align: center;
	line-height: 56rpx;
	margin-top: 30rpx;
}
.tipBox {
	display: flex;
	align-items: center; /*垂直居中*/
	justify-content: center; /*水平居中*/
	flex-direction: column;
	margin-top: 40%;
}
.tip {
	color: #999999;
	font-size: 32rpx;
}
.newPlan {
	width: 200rpx;
	height: 64rpx;
	background: #ffffff;
	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(47, 67, 121, 0.15);
	border-radius: 32rpx;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #32467b;
	text-align: center;
	line-height: 64rpx;
	position: fixed;
	bottom: 60rpx;
	left: 50%;
	transform: translateX(-50%);
}
.operate_img3 {
	background: #3478f6;
}
.operate_img2 {
	background: #f09a37;
}
.operate_img1 {
	background: #eb4d3d;
}
.operate_img {
	width: 64rpx;
	height: 64rpx;
	border-radius: 50%;
	padding:14rpx;
	box-sizing: border-box;
	margin: 10rpx 0;
}
.operate {
	margin-top:16rpx;
	width: 80rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.item_t2 {
	font-size: 23rpx;
	color: #32467b;
}
.item_date {
	width: 26rpx;
	height: 26rpx;
	background: #007AFF;
	border-radius: 50%;
	margin-left: 20rpx;
	font-size: 18rpx;
	color: #fefeff;
	text-align: center;
}
.r_t2 {
	font-size: 20rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #0c141f;
	white-space: pre-wrap;
}
.r_image {
	width: 278rpx;
	height: 134rpx;
	border-radius: 16rpx;
}
.img_more {
	width: 26rpx;
	height: 26rpx;
}
.item_t1 {
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #32467b;
}
.list_item_bac1 {
	background: linear-gradient(45deg, rgba(172, 203, 238, 0.2), rgba(231, 240, 253, 0.2));
}
.list_item_bac2 {
	background: linear-gradient(45deg, rgba(255, 232, 206, 0.3), rgba(251, 184, 160, 0.3));
}
.list_item {
	width: 100%;
	min-height: 418rpx;
	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(47, 67, 121, 0.05);
	border-radius: 24rpx;
	margin-top: 16rpx;
	padding: 15rpx;
	background:#fff;
}
.date_dot {
	width: 6rpx;
	height: 6rpx;
	background: #ffcc00;
	border-radius: 50%;
	margin: 0 auto;
}
.date_note {
	border-radius: 15rpx;
	padding:0 5rpx;
	min-width:50rpx;
	height: 29rpx;
	line-height: 25rpx;
	border: 1px solid #ffcc00;
	font-size: 18rpx;
	color: #ffcc00;
	text-align: center;
	display: inline-block;
	position: absolute;
	top: -19rpx;
	left: 80%;
}
.circle_num {
	border-radius: 15rpx;
	padding:0 5rpx;
	min-width:50rpx;
	height: 29rpx;
	border: 1px solid #ffcc00;
	font-size: 18rpx;
	color: #ffcc00;
	text-align: center;
	display: inline-block;
	margin: 5rpx;
}
.date_t2 {
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #2f4379;
}
.date_line_close {
	width: 40rpx;
	height: 20rpx;
}
.date_line {
	width: 40rpx;
	height: 6rpx;
	background: #7f8caf;
	border-radius: 2rpx;
}
.date_num {
	width: 14%;
	text-align: center;
	position: relative;
	display: inline-block;
	margin-top: 20rpx;
}
.date_num_color0 {
	position:relative;
	display: inline-block;
	width: 48rpx;
	height: 48rpx;
	line-height: 48rpx;
	text-align: center;
	color: #32467b;
}
.date_num_color1 {
	position:relative;
	display: inline-block;
	width: 48rpx;
	height: 48rpx;
	line-height: 48rpx;
	text-align: center;
	color: #34c759;
}
.date_num_color2 {
	position:relative;
	display: inline-block;
	width: 48rpx;
	height: 48rpx;
	line-height: 48rpx;
	text-align: center;
	color: #ff3b30;
}
.date_num_color3 {
	position:relative;
	color: #007AFF;
	background-color: rgba(229,241,255,1);
	border-radius: 50%;
	width: 48rpx;
	height: 48rpx;
	line-height: 48rpx;
	text-align: center;
	display: inline-block;
}
.active_color{
	color: #fff;
	background-color: #007AFF;
	border-radius: 50%;
	width: 48rpx;
	height: 48rpx;
	line-height: 48rpx;
	text-align: center;
	display: inline-block;
}
.card_date {
	width: 14%;
	text-align: center;
	color: #7f8caf;
    position: relative;
    display: inline-block;
}
.date_t1 {
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #2f4379;
	width: 100%;
	text-align: center;
	padding: 20rpx 0;
}
.card {
	width: 100%;
	background: #ffffff;
	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(47, 67, 121, 0.05);
	border-radius: 24rpx;
	padding-bottom:20rpx;
	
	.swiper {
		height:550rpx;
	}
}
page {
	background: rgba(234,238,241,1);
}
</style>