electron-ban-pai/src/components/homepage.vue

<template>
	<div>
		<!-- 主体内容 -->
		<div class="main">
			<!-- 左侧 -->
			<div class="main-left">
				<!-- 班级详情 -->
				<div class="left-one">
					<div class="left-content">
						<div class="left-title">
							<div class="pultitle">班级详情</div>
						</div>
						<div class="second-title">中二班</div>
						<div class="line"></div>
						<div class="three-content">
							<div>老师：罗敏 宋春雪 王愉</div>
							<div>班级人数：21</div>
						</div>
						<div class="line"></div>
						<div class="left-last">
							<div>
								<div>0</div>
								<div>实到</div>
							</div>
							<div>
								<div>0</div>
								<div>未到</div>
							</div>
							<div>
								<div>0</div>
								<div>请假</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 宝宝食谱 -->
				<div class="left-one">
					<div class="left-content">
						<div class="left-title">
							<div class="pultitle">宝宝食谱</div>
						</div>
						<div class="eat-three">
							<div :class="threeMealIndex==index?'threeMealActive':''" v-for="(item,index) in threeMeals"
								:key="index" @click="chooseMeal(index)">{{item}}
							</div>
						</div>
						<div class="line"></div>
						<div class="left-last meal-box">
							<img src="../assets/seconds/tu-01.png">
							<div>白米饭、土豆粉蒸肉、肉末豆腐、农家菜汤</div>
						</div>
					</div>
				</div>
				<!-- 通知公告 -->
				<div class="left-one">
					<div class="left-content">
						<div class="left-title">
							<div class="pultitle">通知公告</div>
						</div>
						<div class="second-title">中二班</div>
						<div class="line"></div>
						<div class="three-content left-notice">
							<div class="clips2">老师：罗敏 宋春</div>
						</div>
						<div class="notice-time">
							<div>2021-11-15</div>
							<div>
								<img src="../assets/home/slices.png">15
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 中部 -->
			<div class="main-center">
				<!-- 班级动态图文 -->
				<div class="center-img-box">
					<div class="center-title">班级动态</div>
					<div class="img-box">
						<img src="../assets/seconds/tu-01.png" style="object-fit: cover;">
					</div>
				</div>
				<!-- 提醒 -->
				<div class="remind-box">
					<div class="msg-box">
						<img src="../assets/home/icon-notice.png">
						<div>1</div>
					</div>
					<div class="msg-box">
						<div>宝宝提醒</div>
						<div>1</div>
					</div>
					<div class="msg-box">
						<div>生日提醒</div>
						<div>1</div>
					</div>
				</div>
			</div>
			<!-- 右侧 -->
			<div class="main-right">
				<div class="left-title">
					<div class="pultitle">今日活动</div>
				</div>
				<div class="right-content">
					<div v-for="(item,index) in noonArr" :key="index">
						<div class="right-title">{{item.title}}</div>
						<div class="line" style="margin: 0 6px;"></div>
						<div class="right-item-box" v-for="(itemc,indexc) in item.children"
							:class="indexc%2!=0?'oddActive':''" :key="indexc">
							<div>{{itemc.time}}</div>
							<div class="clips3">{{itemc.content}}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'homepage',
		data() {
			return {
				threeMeals: ['早餐', '午餐', '晚餐'],
				threeMealIndex: 0,
				noonArr: [{
						title: '上午',
						children: [{
								time: '08：30 - 08：50',
								content: '晨检，晨间活动晨间活动晨间活动晨间活动晨间活动晨间活动'
							},
							{
								time: '08：30 - 08：50',
								content: '晨检，晨间活动'
							},
							{
								time: '08：30 - 08：50',
								content: '晨检，晨间活动'
							},
							{
								time: '08：30 - 08：50',
								content: '晨检，晨间活动'
							},
							{
								time: '08：30 - 08：50',
								content: '晨检，晨间活动'
							},
							{
								time: '08：30 - 08：50',
								content: '晨检，晨间活动'
							},
							{
								time: '08：30 - 08：50',
								content: '晨检，晨间活动'
							},
							{
								time: '08：30 - 08：50',
								content: '晨检，晨间活动'
							},
						]
					},
					{
						title: '中午',
						children: [{
								time: '08：30 - 08：50',
								content: '晨检，晨间活动'
							},
							{
								time: '08：30 - 08：50',
								content: '晨检，晨间活动'
							},
							{
								time: '08：30 - 08：50',
								content: '晨检，晨间活动'
							},
							{
								time: '08：30 - 08：50',
								content: '晨检，晨间活动'
							},
							{
								time: '08：30 - 08：50',
								content: '晨检，晨间活动'
							},
							{
								time: '08：30 - 08：50',
								content: '晨检，晨间活动'
							},
							{
								time: '08：30 - 08：50',
								content: '晨检，晨间活动'
							},
						]
					},
					{
						title: '下午',
						children: [{
								time: '08：30 - 08：50',
								content: '晨检，晨间活动'
							},
							{
								time: '08：30 - 08：50',
								content: '晨检，晨间活动'
							},
							{
								time: '08：30 - 08：50',
								content: '晨检，晨间活动'
							},
							{
								time: '08：30 - 08：50',
								content: '晨检，晨间活动'
							},
							{
								time: '08：30 - 08：50',
								content: '晨检，晨间活动'
							},
							{
								time: '08：30 - 08：50',
								content: '晨检，晨间活动'
							},
							{
								time: '08：30 - 08：50',
								content: '晨检，晨间活动'
							},
							{
								time: '08：30 - 08：50',
								content: '晨检，晨间活动'
							},
						]
					}
				],
			}
		},
		methods: {
			// 早中晚餐切换事件
			chooseMeal(e) {
				this.threeMealIndex = e;
			},
			// 班级详情
			calssDetailEv(){
				this.$axios({
					// 调用 serviceAPI
					url:this.$https.classDetail,
					methods:'get',
				}).then(res =>{
					console.log(res.data);
				}).catch(err => {
					console.log(err);
				})
			}
		},
		mounted() {
			
		}
	}
</script>