MiniPrograms/pages/tab_home/tab_home.vue

<template>
	<view>
		<view v-if="!isHomeLoad">
			<loading></loading>
		</view>
		<view class="page-view" v-if="isHomeLoad">
			<!-- 成绩统计 -->
			<view class="bg1">
				<view class="circle-line1"></view>
				<view class="circle-line2"></view>
				<view class="circle-line3"></view>
				<top-info :timeStamp="timeStamp"></top-info>
				<scroll-view class="scroll-view" scroll-x="true" :scroll-with-animation="true" scroll-left="0">
					<view class="view-box">
						<view class="scroll-view-item" v-for="(item,index) in cardList" :key="index"
							@click="navTab(index)">
							<view class="card-info">
								<view :class="item.icon"></view>
								<view class="title">{{item.title}}</view>
							</view>
							<view class="chart-box">
								<qiun-data-charts type="arcbar" :chartData="item.data" :canvas2d='true'
									:canvasId='item.canvasId' :opts="item.chartOpts" />
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- 通知 -->
			<view class="bg2">
				<view class="notice">
					<u-notice-bar :text="noticeData" bgColor="rgba(65,105,225,0.4)" color="#FFF"
						url="/subpkg/mine/msgList"></u-notice-bar>
				</view>
			</view>
			<!-- 课程 -->
			<view class="card-view">
				<!-- 今日课程模块 -->
				<view class="card-item" style="width: 100%;" v-if="classCurrent != -1">
					<view class="card-title">
						<view class="front-tag"></view>
						<view class="title">今日课程</view>
						<view class="flex-row" style="margin: 0 0 0 auto;" @click="navClassList">
							<view class="t-icon t-icon-fenlei"></view>
							<view class="title" style="color: #4169E1;margin-left: 10rpx;">课程列表</view>
						</view>
					</view>
					<view class="data-list">
						<!-- 上上节 -->
						<view class="data-item" v-if="classCurrent === classList.length">
							<view class="flex-row">
								<view class="t-icon t-icon-classicon-copy" style="width: 60rpx; height: 60rpx;"></view>
								<view class="flex-column">
									<view class="row-margin">
										<view class="item-title">{{classList[classCurrent - 3].title}}</view>
										<view class="tag">
											<view class="tag-text">{{classList[classCurrent - 3].name}}</view>
										</view>
										<view class="tag">
											<view class="tag-text">{{classList[classCurrent - 3].teacher}}</view>
										</view>
									</view>
									<view class="row-margin">
										<view class="item-subtitle">上节</view>
										<view class="item-detail">
											{{classList[classCurrent - 3].time}}
										</view>
									</view>
								</view>

								<view class="state">
									<view class="state-text">{{classList[classCurrent - 3].attendance?'已出勤':'未出勤'}}
									</view>
								</view>

							</view>
						</view>
						<!-- 上节 -->
						<view class="data-item" v-if="classCurrent >= 2">
							<view class="flex-row">
								<view class="t-icon t-icon-classicon-copy" style="width: 60rpx; height: 60rpx;"></view>
								<view class="flex-column">
									<view class="row-margin">
										<view class="item-title">{{classList[classCurrent - 2].title}}</view>
										<view class="tag">
											<view class="tag-text">{{classList[classCurrent - 2].name}}</view>
										</view>
										<view class="tag">
											<view class="tag-text">{{classList[classCurrent - 2].teacher}}</view>
										</view>
									</view>
									<view class="row-margin">
										<view class="item-subtitle">上节</view>
										<view class="item-detail">
											{{classList[classCurrent - 2].time}}
										</view>
									</view>
								</view>

								<view class="state">
									<view class="state-text">{{classList[classCurrent - 2].attendance?'已出勤':'未出勤'}}
									</view>
								</view>

							</view>
						</view>
						<!-- 当前 -->
						<view class="data-item" style="border-image: linear-gradient(to right, #4169E1, #FFF) 1;">
							<view class="flex-row">
								<view class="t-icon t-icon-classicon-copy" style="width: 60rpx; height: 60rpx;"></view>
								<view class="flex-column">
									<view class="row-margin">
										<view class="item-title" style="color: #4169E1;">
											{{classList[classCurrent - 1].title}}
										</view>
										<view class="tag">
											<view class="tag-text">{{classList[classCurrent - 1].name}}</view>
										</view>
										<view class="tag">
											<view class="tag-text">{{classList[classCurrent - 1].teacher}}</view>
										</view>
									</view>
									<view class="row-margin">
										<view class="item-subtitle" style="color: #4169E1;">当前</view>
										<view class="item-detail" style="color: #4169E1;">
											{{classList[classCurrent - 1].time}}
										</view>
									</view>
								</view>

								<view class="state" style="background-color: #ff5959;">
									<view class="state-text">{{classList[classCurrent - 1].attendance?'课程中':'未出勤'}}
									</view>
								</view>

							</view>
						</view>
						<!-- 下节 -->
						<view class="data-item" v-if="classCurrent != classList.length">
							<view class="flex-row">
								<view class="t-icon t-icon-classicon-noarrive" style="width: 60rpx; height: 60rpx;">
								</view>
								<view class="flex-column">
									<view class="row-margin">
										<view class="item-title">{{classList[classCurrent].title}}</view>
										<view class="tag">
											<view class="tag-text">{{classList[classCurrent].name}}</view>
										</view>
										<view class="tag">
											<view class="tag-text">{{classList[classCurrent].teacher}}</view>
										</view>
									</view>
									<view class="row-margin">
										<view class="item-subtitle">下节</view>
										<view class="item-detail">
											{{classList[classCurrent].time}}
										</view>
									</view>
								</view>

								<view class="state" style="background-color: #909399;">
									<view class="state-text">未开始</view>
								</view>

							</view>
						</view>
						<!-- 下下节 -->
						<view class="data-item" v-if="classCurrent === 1">
							<view class="flex-row">
								<view class="t-icon t-icon-classicon-noarrive" style="width: 60rpx; height: 60rpx;">
								</view>
								<view class="flex-column">
									<view class="row-margin">
										<view class="item-title">{{classList[classCurrent+1].title}}</view>
										<view class="tag">
											<view class="tag-text">{{classList[classCurrent+1].name}}</view>
										</view>
										<view class="tag">
											<view class="tag-text">{{classList[classCurrent+1].teacher}}</view>
										</view>
									</view>
									<view class="row-margin">
										<view class="item-subtitle">下节</view>
										<view class="item-detail">
											{{classList[classCurrent+1].time}}
										</view>
									</view>
								</view>

								<view class="state" style="background-color: #909399;">
									<view class="state-text">未开始</view>
								</view>

							</view>
						</view>
					</view>
				</view>
				<!-- 插画模块 -->
				<view class="card-item" style="width: 100%;" v-if="classCurrent === -1">
					<view class="card-title">
						<view class="front-tag"></view>
						<view class="title">今日课程</view>
					</view>
					<view class="detail-image-none" :style="{backgroundImage:`url(${image})`}"></view>
					<view class="data-list">
						<view class="data-item" style="height: 120rpx;">
							<view class="flex-row" style="justify-content: space-between;">
								<view class="item-title" v-if="!isAfterDayClass">
									{{classList.length === 0 ? '假期充电' : '课间休息'}}
								</view>
								<view class="item-title" v-if="isAfterDayClass">课程完成</view>
								<view class="tag" style="margin: 0;">
									<view class="tag-text" v-if="!isAfterDayClass">
										{{classList.length === 0 ? '无课' : '下课'}}
									</view>
									<view class="tag-text" v-if="isAfterDayClass">放学</view>
								</view>
								<view class="item-subtitle" style="font-weight: 400;font-size: 26rpx;"
									v-if="!isAfterDayClass">
									{{classList.length === 0 ? '合理规划' : '预习下节'}}
								</view>
								<view class="item-subtitle" style="font-weight: 400;font-size: 26rpx;"
									v-if="isAfterDayClass">巩固所学</view>
								<view class="flex-row" @click="navClassList">
									<view class="t-icon t-icon-fenlei"></view>
									<view class="item-title" style="color: #4169E1;margin-left: 10rpx;">课程列表
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 今日打卡模块 -->
				<view class="card-item" style="height: 300rpx;" @click="navClockStats">
					<view class="flex-row" style="margin: 20rpx 20rpx 0 20rpx;">
						<view class="icon-box" style="width: 120rpx;height: 120rpx; background-color: #d8deff;">
							<view class="t-icon t-icon-a-rilidaka" style="width: 60rpx;height: 60rpx;"></view>
						</view>
						<view class="clock-block">
							<view class="subtitle">打卡记录</view>
							<view class="flex-baseline">
								<view class="YS-title">{{dayTime.split('月')[0]}}</view>
								<view class="YS-title" style="font-size: 30rpx; margin-left: 4rpx;">月</view>
								<view class="YS-title" style="margin-left: 4rpx;">
									{{dayTime.split('月')[1]}}
								</view>
								<view class="YS-title" style="font-size: 30rpx; margin-left: 4rpx;">日</view>
							</view>
						</view>
					</view>
					<view class="flex-row" style="margin: auto 20rpx 20rpx 20rpx;justify-content: space-between;">
						<view class="clock-block">
							<view class="subtitle">打卡时间</view>
							<view class="YS-title" v-if="clockTime === '无记录'">
								{{clockTime}}
							</view>
							<view class="flex-baseline" v-if="clockTime != '无记录'">
								<view class="YS-title">
									{{clockTime.split(':')[0].replace('0','')}}
								</view>
								<view class="YS-title" style="font-size: 30rpx; margin-left: 4rpx;">点</view>
								<view class="YS-title" style="margin-left: 4rpx;">
									{{clockTime.split(':')[1]}}
								</view>
								<view class="YS-title" style="font-size: 30rpx; margin-left: 4rpx;">分</view>
							</view>
						</view>
						<view class="icon-box" style="width: 120rpx;height: 120rpx;"
							:style="{backgroundColor: clockState === '未打卡' ? '#ff5959':'#4169E1'}">
							<view class="YS-title" style="color: #FFF;font-size: 32rpx;">
								{{clockState}}
							</view>
						</view>
					</view>
					<view style="width: 0;height: 0;">
						<view class="clock-image"
							:style="{backgroundImage: clockState === '已打卡'?`url(${image2})`:`url(${image1})`}">
						</view>
					</view>
				</view>
				<!-- 今日出席模块 -->
				<view class="card-item" style="background-color: #f3f4f9;justify-content: space-between;">
					<!-- 当前课程 -->
					<view class="class-box">
						<view class="icon-box" style="background-color: #d8deff; margin-left: 20rpx;">
							<view class="t-icon t-icon-shangke-"></view>
						</view>
						<view class="info-column">
							<view class="subtitle" style="font-size: 24rpx;">当前课程</view>
							<view class="YS-title" v-if="classCurrent!=-1">
								{{classList[classCurrent - 1].name}}
							</view>
							<view class="YS-title" v-if="classCurrent===-1">无课程</view>
						</view>
						<view v-if="classCurrent != -1">
							<view class="icon-box" style="margin-right: 20rpx;"
								:style="{backgroundColor: classList[classCurrent - 1].attendance ? '#23b46c':'#ff5959'}">
								<view class="YS-title" style="color: #FFF;font-size: 32rpx;">
									{{classList[classCurrent - 1].attendance ? '出勤':'缺勤'}}
								</view>
							</view>
						</view>
						<view v-if="classCurrent === -1">
							<view class="icon-box" style="margin-right: 20rpx;background-color: #f9c752;">
								<view class="YS-title" style="color: #FFF;font-size: 32rpx;">休息</view>
							</view>
						</view>
					</view>
					<!-- 出勤课程统计 -->
					<view class="class-box">
						<view class="icon-box" style="background-color: #d8deff;margin-left: 20rpx;">
							<view class="t-icon t-icon-shangkejilu"></view>
						</view>
						<view class="info-column">
							<view class="subtitle" style="font-size: 24rpx;">出勤课程</view>
							<view class="YS-title" v-if="classList">{{finishClassNum}}节课</view>
							<view class="YS-title" v-if="!classList">0 节</view>
						</view>
						<view v-if="classList">
							<view class="icon-box" style="margin-right: 20rpx;"
								:style="{backgroundColor: classAttendanceQuality === '全勤' ? '#23b46c':'#ff5959'}">
								<view class="YS-title" style="color: #FFF;font-size: 32rpx;">{{classAttendanceQuality}}
								</view>
							</view>
						</view>
						<view v-if="!classList">
							<view class="icon-box" style="margin-right: 20rpx;background-color: #f9c752;">
								<view class="YS-title" style="color: #FFF;font-size: 32rpx;">休息</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 推荐课例列表 -->
				<view class="flex-column" style="margin: 15rpx 0 10rpx 20rpx;">
					<view class="title" style="font-size: 32rpx;">课程推荐</view>
					<view class="bottom-tag"></view>
				</view>
				<view class="flex-row" style="width: 70%;"></view>
			</view>
			<scroll-view class="scroll-view-bottom" scroll-x="true" :scroll-with-animation="true" scroll-left="0">
				<view class="box-container" v-for="(item,index) in classData" :key="index"
					@click="navCourseRecommend(index)">
					<view class="clounm-container" v-for="(classItem,i) in item" :key="i">
						<view class="item-box">
							<view class="thumb" :style="{backgroundImage: `url(${classItem.coverImage})`}"></view>
							<view class="info-box">
								<view class="title" style="font-size: 32rpx;">{{classItem.title}}</view>
								<view class="flex-row">
									<view class="tag-fill">
										<view class="t-icon t-icon-a-wangluokechengzaixianjiaoyu"></view>
										<view class="tag-text">{{classItem.classHour}} 学时</view>
									</view>
									<view class="tag-fill" style="margin-left: 20rpx;">
										<view class="t-icon t-icon-xiaoyuanredian"></view>
										<view class="tag-text">{{classItem.learnNum}} 已学</view>
									</view>
								</view>
								<view class="desc">{{classItem.description}}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		computed: {
			...mapState('m_children', ['classList', 'examData', 'workData', 'swapData', 'clockData']),
			...mapState('m_parent', ['userData', 'classData'])
		},
		data() {
			return {
				cardList: [{
					icon: 't-icon t-icon-chakandingdan',
					title: '今日评测',
					canvasId: 'tab_home_chart1',
					data: {
						"series": [{
							"name": "评测完成率",
							"data": '无评测',
							"color": "#ff8caf"
						}]
					},
					chartOpts: {}
				}, {
					icon: 't-icon t-icon-renwu',
					title: '今日作业',
					canvasId: 'tab_home_chart2',
					data: {
						"series": [{
							"name": "作业完成率",
							"data": '无作业',
							"color": "#f9c752"
						}]
					},
					chartOpts: {}
				}, {
					icon: 't-icon t-icon-wenjian',
					title: '今日活动',
					canvasId: 'tab_home_chart3',
					data: {
						"series": [{
							"name": "活动完成率",
							"data": '无活动',
							"color": "#FF6D31"
						}]
					},
					chartOpts: {}
				}],
				noticeData: '',
				//当前课程索引
				classCurrent: '',
				//已上课程
				finishClassNum: '',
				//课程缺省image
				image: 'https://image.meiye.art/pic_1631411821366fqhkuMI110LbOlAIdv1SV',
				//时间戳
				timeStamp: '',
				//今日时间
				dayTime: '',
				//打卡状态
				clockState: '',
				//打卡时间
				clockTime: '',
				//出勤课程统计信息
				classAttendanceQuality: '',
				//打卡状态image
				image1: 'https://ouch-cdn2.icons8.com/2farWQUdLe8J4mb4oQoEvJpl5OFXtM5P7AZi8nhuOxk/rs:fit:912:912/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9zdmcvOTYz/L2VkZGEwNzAzLTAw/MWYtNGZiZS1hY2I3/LTVlNjRhZGYzNTAx/Mi5zdmc.png',
				image2: 'https://ouch-cdn2.icons8.com/6CkTSZQdyBYaGiqmNJRhbqoYi8QDcLFn-04VEQyQaCo/rs:fit:962:912/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9zdmcvNzMz/LzlhYmUzYjIyLTRl/ZGQtNDVkMi1iYWEw/LTVjYjk2NThmNDJi/OC5zdmc.png',
				//当前页面加载是否完成
				isHomeLoad: false,
				//今日课程是否上完
				isAfterDayClass: false
			};
		},
		onLoad() {
			this.init()
		},
		//刷新页面
		onPullDownRefresh() {
			this.init()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			//初始化页面
			async init() {
				await this.$initHome()
				this.dayTime = (new Date()).format('M-d').replace('-', '月')
				this.timeStamp = (new Date()).format("hh:mm")
				this.getClassCurrent()
				this.getChartData()
				this.getNoticeData()
				this.getClockData()
				this.getClassAttendance()
				this.isHomeLoad = true
			},

			//计算出当前课程
			getClassCurrent() {
				//当前时间戳是否在课程时间段内
				function CompareDate(start, finish) {
					//获得当前时间时间戳
					let timeNow = (new Date()).format("yyyy-MM-dd hh:mm").replace(new RegExp("-", "gm"), "/")
					let timeHaoMiao = (new Date(timeNow)).getTime()
					//获得课程开始结束时间戳
					let today = (new Date()).format("yyyy-MM-dd ")
					let classStart = (today + start).replace(new RegExp("-", "gm"), "/")
					let classFinish = (today + finish).replace(new RegExp("-", "gm"), "/")
					let classStartHaoMiao = (new Date(classStart)).getTime()
					let classFinishHaoMiao = (new Date(classFinish)).getTime()
					//比较
					if (timeHaoMiao < classFinishHaoMiao) {
						if (classStartHaoMiao < timeHaoMiao)
							return true
					}
					return false
				}
				//当前时间戳是否在课程开始时间之前
				function CompareDateStart(start) {
					//获得当前时间时间戳
					let timeNow = (new Date()).format("yyyy-MM-dd hh:mm").replace(new RegExp("-", "gm"), "/")
					let timeHaoMiao = (new Date(timeNow)).getTime()
					//获得课程开始结束时间戳
					let today = (new Date()).format("yyyy-MM-dd ")
					let classStart = (today + start).replace(new RegExp("-", "gm"), "/")
					let classStartHaoMiao = (new Date(classStart)).getTime()
					//比较
					if (timeHaoMiao < classStartHaoMiao)
						return true
					return false
				}
				//今日有课程
				if (this.classList.length != 0) {
					//当前课程索引
					let classIndex = -100
					//完成课程数目
					let finishNum = -100
					//是否在课堂中
					let isInClass = false
					//判断是否在课程中，若是则赋值为当前课程索引
					this.classList.some((item, index) => {
						let timeArr = item.time.split("-")
						//在课堂中
						let res = CompareDate(timeArr[0], timeArr[1])
						if (res) {
							classIndex = index + 1
							finishNum = index + 1
							return isInClass = true
						}
					})
					if (isInClass) {
						//当前课程赋值
						this.classCurrent = classIndex
						//已上课程赋值
						this.finishClassNum = finishNum
					} else {
						//是否放学
						this.classList.some((item, index) => {
							let timeArr = item.time.split("-")
							//没在课堂中
							let value = CompareDateStart(timeArr[0])
							//课间时间
							if (value) {
								classIndex = -1
								finishNum = index - 1
								this.isAfterDayClass = false
							} else {
								//放学时间(有课程但已上完状态)
								classIndex = -1
								finishNum = this.classList.length
								this.isAfterDayClass = true
							}
						})
						//当前课程赋值
						this.classCurrent = classIndex
						//已上课程赋值
						this.finishClassNum = finishNum
					}
					//无课程，放假时间
				} else {
					//当前课程赋值
					this.classCurrent = -1
					//已上课程赋值
					this.finishClassNum = 0
				}
			},
			//更新图表数据
			getChartData() {
				//完成数据
				if (this.examData.length != 0) {
					let examFinishData = this.examData.filter(x => x.examInfo.progress === 'finish')
					this.cardList[0].data.series[0].data = parseFloat((examFinishData.length / this.examData.length)
						.toFixed(2))
				}
				if (this.workData.length != 0) {
					let workFinishData = this.workData.filter(x => x.work.progress === 'finish')
					this.cardList[1].data.series[0].data = parseFloat((workFinishData.length / this.workData.length)
						.toFixed(2))
				}
				if (this.swapData.length != 0) {
					let swapFinishData = this.swapData.filter(x => x.vote && x.vote.progress === 'finish')
					swapFinishData.push(...this.swapData.filter(x => x.survey && x.survey.progress === 'finish'))
					this.cardList[2].data.series[0].data = parseFloat((swapFinishData.length / this.swapData.length)
						.toFixed(2))
				}
				//完成率传入图表
				for (let i = 0; i < 3; i++) {
					if (typeof(this.cardList[i].data.series[0].data) === typeof(0)) {
						let opt = {
							title: {
								name: (this.cardList[i].data.series[0].data * 100).toFixed(0) + '%',
								color: this.cardList[i].data.series[0].color
							},
							subtitle: {
								name: this.cardList[i].data.series[0].name
							},
						}
						this.cardList[i].chartOpts = JSON.parse(JSON.stringify(opt))
					} else {
						let opt = {
							title: {
								name: this.cardList[i].data.series[0].data,
								color: this.cardList[i].data.series[0].color
							},
							subtitle: {
								name: this.cardList[i].data.series[0].name
							},
						}
						this.cardList[i].chartOpts = JSON.parse(JSON.stringify(opt))
					}
				}
			},
			//日历数据获取
			getClockData() {
				//获得当前时间时间戳
				let today = (new Date()).format("yyyy-M-dd")
				let timeArr = today.split("-")
				if (this.clockData.length != 0) {
					let val = this.clockData.filter(x => x.year == timeArr[0] && x.month == timeArr[1] && x.date ==
						timeArr[2])
					if (val.length != 0) {
						this.clockState = '已打卡'
						this.clockTime = val[0].time
					} else {
						this.clockState = '未打卡'
						this.clockTime = '无记录'
					}
				} else {
					this.clockState = '未打卡'
					this.clockTime = '无记录'
				}
			},
			//获取滚动通知
			getNoticeData() {
				if (this.userData.msgList)
					this.noticeData = `您有 ${this.userData.msgList.length} 条通知,请点击查看`
				if (!this.userData.msgList)
					this.noticeData = `您已查看全部通知`
			},
			//获取出勤课程统计
			getClassAttendance() {
				let finishClassData = []
				for (let i = 0; i < this.finishClassNum; i++) {
					finishClassData.push(this.classList[i])
				}
				if (finishClassData.length != 0) {
					let isAttendArr = finishClassData.filter(x => x.attendance === true)
					this.classAttendanceQuality = isAttendArr.length === this.finishClassNum ? '全勤' : '缺勤'
				}
			},
			//导航
			navClassList() {
				let current = this.classCurrent
				uni.navigateTo({
					url: `/subpkg/home/classList?index=${current}`
				})
			},
			navTab(index) {
				let urlArr = ['/pages/tab_exam/tab_exam',
					'/pages/tab_work/tab_work',
					'/pages/tab_swap/tab_swap'
				]
				uni.switchTab({
					url: urlArr[index]
				})
			},
			navClockStats() {
				uni.navigateTo({
					url: '/subpkg/home/clockStats'
				})
			},
			navCourseRecommend(index) {
				uni.navigateTo({
					url: `/subpkg/home/courseRecommend?index=${index}`
				})
			}

		}
	}
</script>

<style lang="scss">
	@import '@/pages/style/tab_pages.scss';

	.bg2 {
		margin-top: -1065rpx;
		height: 1200rpx;
		border-radius: 100rpx;
		border-bottom-left-radius: 0;
		background-color: #FFF;
		z-index: 1;

		.notice {
			margin: 1095rpx 50rpx 20rpx 50rpx;
			width: 650rpx;
		}
	}

	.YS-title {
		font-size: 38rpx;
	}

	.row-margin {
		display: flex;
		align-items: center;
		margin: 10rpx 20rpx;
	}

	.tag {
		margin-left: 20rpx;
	}

	//课程出勤
	.class-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 140rpx;
		background-color: #FFF;
		border-radius: $border-radius;

		.info-column {
			height: 80rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
		}
	}

	.icon-box {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 80rpx;
		height: 80rpx;
		border-radius: 12rpx;
		z-index: 9;

		.t-icon {
			width: 50rpx;
			height: 50rpx;
		}
	}

	.clock-block {
		display: flex;
		flex-direction: column;
		width: 180rpx;
		height: 120rpx;
		justify-content: space-around;
		align-items: center;
	}

	.state {
		display: flex;
		align-items: center;
		margin-left: auto;
		border-radius: $border-radius;
		background-color: $color-green;
		padding: 24rpx 12rpx;

		.t-icon {
			width: 32rpx;
			height: 32rpx;
		}

		.state-text {
			color: #FFF;
			font-size: 24rpx;
			font-weight: bold;
			transform: skew(-10deg);
		}
	}

	.scroll-view-bottom {
		white-space: nowrap;
		padding-bottom: 20rpx;
	}

	.clock-image {
		margin-top: -160rpx;
		margin-left: 20rpx;
		height: 160rpx;
		width: 160rpx;
		background-size: 100%;
		background-repeat: no-repeat;
		opacity: 0.25;
		z-index: 1;
	}

	.box-container {
		margin: 0 20rpx;
		display: inline-block;
		vertical-align: top;
		width: 84%;

		.clounm-container {
			height: 180rpx;
			width: 100%;
			margin-bottom: 20rpx;
			border-radius: $border-radius;
			background-color: #FFF;
			overflow: hidden;

			.item-box {
				display: flex;
				width: 100%;
				height: 100%;

				.thumb {
					width: 180rpx;
					height: 180rpx;
					border-radius: $border-radius;
					background-size: cover; //背景图片自适应
					background-repeat: no-repeat;
					z-index: 50;
				}

				.info-box {
					display: flex;
					flex-direction: column;
					margin: 20rpx 20rpx 20rpx 30rpx;
					justify-content: space-between;
					width: 400rpx;

					.tag-fill {
						background-color: #d8deff;
						width: fit-content;

						.t-icon {
							width: 30rpx;
							height: 30rpx;
							margin-right: 5rpx;
						}

						.tag-text {
							color: #4169E1;
						}
					}

					.desc {
						line-height: 26rpx;
						font-size: 26rpx;
						color: #909399;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}
		}
	}
</style>