zz--front/components/home.vue

<template>
	<view>
		<view style="z-index: 999;">
			<u-navbar title="中正云学堂" :is-back="false">
				<view class="slot-wrap"><image src="/static/search.png" class="search" @click="jumpSearch"></image></view>
			</u-navbar>
		</view>
		<scroll-view scroll-y="true" @scroll="scroll" :style="'height: ' + windowHeight + 'px;'" @scrolltolower="scrollTolower" refresher-enabled @refresherpulling="pulling" @refresherrefresh="refresher" @refresherrestore="restore" :refresher-triggered="triggered">
			<view class="box">
				<view class="my_swiper"><u-swiper :list="list" @click="swiperClick" height="330" border-radius="25" mode="none"></u-swiper></view>
				<!-- 日历-->
				<view class="calendar_card">
					<view class="card_box">
						<u-row gutter="16">
							<u-col span="11" v-if="false">
								<view>
									<text class="t1">距离</text> 
									<text class="t2">二级建造师</text>
									<text class="t1">考试</text>
									<text class="t3">365</text>
									<text class="t1">天,继续加油哦！</text>
								</view>
							</u-col>
							<u-col offset="11" 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="jumpCourseDetail()">{{ courseItem.courseName }}</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 style="margin-top: 20rpx;">
					<u-row gutter="16">
						<u-col span="1">
							<view style="padding: 5rpx;"><image src="/static/select.png" class="arr-icon" @click="show = true"></image></view>
						</u-col>
						<u-col span="11">
							<view>
								<u-subsection
									@change="sectionChange"
									height="54"
									button-color="rgba(47,67,121,0.6)"
									bg-color="#F8F9FF"
									active-color="#FFFFFF"
									inactive-color="#636A75"
									:list="tab_list"
									:current="current"
								></u-subsection>
							</view>
						</u-col>
					</u-row>
				</view>
				<!-- 课程列表-->
				<view v-if="current == 0">
					<view v-if="list1.length === 0">
						<u-empty  margin-top="150" text="暂无课程" mode="data"></u-empty>
					</view>
					<view v-else @click="jumpDetail(item)" class="list_box" v-for="(item, index) in list1" :key="index">
						<image :src="$method.splitImgHost(item.coverUrl,true)" class="list_img"></image>
						<view class="list_content">
							<view style="margin-left: 280rpx;margin-top: 10rpx;">
								<view class="list_title">{{ item.courseName }}</view>
								<view class="old_price">原价：¥{{ item.price }}</view>
								<view class="price">现价：¥{{ item.price }}</view>
							</view>
						</view>
					</view>
					<u-divider v-if="paramList[0].showStatus && list1.length !== 0" margin-top="42">到底了</u-divider>
					<!-- <view v-if="paramList[0].showStatus && list1.length !== 0" style="text-align: center;margin-top: 24rpx;">到底啦~</view> -->
				</view>
				<!-- 题库列表-->
				<view v-if="current == 1">
					<view v-if="list2.length === 0">
						<u-empty  margin-top="150" text="暂无题库" mode="data"></u-empty>
					</view>
					<view v-else @click="jumpDetail(item)" class="list_box" v-for="(item, index) in list2" :key="index">
						<image :src="$method.splitImgHost(item.coverUrl,true)" class="list_img"></image>
						<view class="list_content">
							<view style="margin-left: 280rpx;margin-top: 10rpx;">
								<view class="list_title">{{ item.bankName }}</view>
								<view class="old_price">原价：¥{{ item.price }}</view>
								<view class="price">现价：¥{{ item.price }}</view>
							</view>
						</view>
					</view>
					<u-divider v-if="paramList[1].showStatus && list2.length !== 0" margin-top="42">到底了</u-divider>
					<!-- <view v-if="paramList[1].showStatus && list2.length !== 0" style="text-align: center;margin-top: 24rpx;">到底啦~</view> -->
				</view>
				<!-- 重点列表-->
				<view v-if="current == 2">
					<view v-if="list3.length === 0">
						<u-empty  margin-top="150" text="暂无重点考点" mode="data"></u-empty>
					</view>
					<view v-else @click="jumpDetail(item)" class="list_box" v-for="(item, index) in list3" :key="index">
						<image :src="$method.splitImgHost(item.coverUrl,true)" class="list_img"></image>
						<view class="list_content">
							<view style="margin-left: 280rpx;margin-top: 10rpx;">
								<view class="list_title">{{ item.name }}</view>
								<view class="old_price">原价：¥{{ item.price }}</view>
								<view class="price">现价：¥{{ item.price }}</view>
							</view>
						</view>
					</view>
					<u-divider v-if="paramList[2].showStatus && list3.length !== 0" margin-top="42">到底了</u-divider>
					<!-- <view v-if="paramList[2].showStatus && list3.length !== 0" style="text-align: center;margin-top: 24rpx;">到底啦~</view> -->
				</view>
			</view>
			
		</scroll-view>
		<u-popup v-model="show" border-radius="14">
			<view class="flex-d" style="width: 600rpx">
				<view class="popup_t1">选择你需要的</view>
				<view class="contentZ">
					<view class="lzs">
						<view class="tylsz" v-for="(item, index) in cateChild1" :key="index" @click="item.categoryId === 0 ? activeAll(1) : active1(item)" :class="item.categoryId === cateActiveIndex1 ? 'activeStys':''">{{ item.categoryName }}</view>
					</view>
					<view class="lzs">
						<view class="tylsz" v-for="(item, index) in cateChild2" :key="index" @click="item.categoryId === 0 ? activeAll(2) : active2(item)" :class="item.categoryId === cateActiveIndex2 ? 'activeStys':''">{{ item.categoryName }}</view>
					</view>
					<view class="lzs">
						<view class="tylsz" v-for="(item, index) in cateChild3" :key="index" @click="item.categoryId === 0 ? activeAll(3) : active3(item)" :class="item.categoryId === cateActiveIndex3 ? 'activeStys':''">{{ item.categoryName }}</view>
					</view>
				</view>
				<view class="fots">
					<view class="leftBtns" @click="initLists">重置筛选</view>
					<view class="right_Btns" @click="searchPageInfos">确定筛选</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	name: 'home',
	data() {
		return {
			triggered: false,
			courseItem: {},
			cateList: [],
			cateChild1: [],
			cateChild2: [],
			cateChild3: [],
			cateActiveIndex1:0,
			cateActiveIndex2:null,
			cateActiveIndex3:null,
			courseIndex: 0,
			vertical: 'vertical',
			workList: [],
			workTextList: [],
			show: false,
			tab_list: [
				{
					name: '课程'
				},
				{
					name: '刷题'
				},
				{
					name: '重点考点'
				}
			],
			current: 0,
			list: [],
			paramList: [
				{
					pageNum: 1,
					pageSize: 10,
					total: 0,
					showStatus: 0
				},
				{
					pageNum: 1,
					pageSize: 10,
					total: 0,
					showStatus: 0
				},
				{
					pageNum: 1,
					pageSize: 10,
					total: 0,
					showStatus: 0
				}
			],
			date: ['日', '一', '二', '三', '四', '五', '六'],
			date_num: [],
			list1: [],
			list2: [],
			list3: [],
			windowHeight: 0
		};
	},
	onLoad() {},
	created() {
		this.windowHeight = uni.getSystemInfoSync().windowHeight - 100;
	},
	mounted() {
		this.initList();
		this.advertisingList();
		this.initCateList();
	},
	methods: {
		pulling(){
			this.triggered = true
		},
		refresher(){
			this.initList();
			this.advertisingList();
			this.initCateList();
			this.triggered = false
		},
		restore(){
			this.triggered = false
		},
		init() {
			if (!this.$method.isLogin()) {
				//未登录
				this.date_num = [];
				this.workList = [];
				this.initDay();
			} else {
				this.date_num = [];
				this.workList = [];
				this.userPlanSeven();
			}
		},
		initDay() {
			// d是当前星期一的日期对象
			var d = this.getMonDate();
			var arr = [];
			let date = new Date();
			let num = date.getDate();
			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);
			}
		},
		preveItem() {
			if (this.courseIndex > 0) {
				this.courseIndex = this.courseIndex - 1;
				this.courseItem = this.workList[this.courseIndex];
			}
		},
		nextItem() {
			if (this.courseIndex < this.workList.length - 1) {
				this.courseIndex = this.courseIndex + 1;
				this.courseItem = this.workList[this.courseIndex];
			}
		},
		jumpCourseDetail() {
			this.$navTo.togo('/pages2/course/detail', {
				id: this.courseItem.courseId
			});
		},
		noticeBar(index) {
			let item = this.workList[index];
			this.$navTo.togo('/pages2/course/detail', {
				id: item.courseId
			});
		},
		userPlanSeven() {
			let self = this;
			this.$api.userPlanSeven().then(result => {
				console.log(result, 9889);
				if (result.data.data.coursePlanVo != null) {
					self.workList = result.data.data.coursePlanVo;
					if (self.workList != null && self.workList.length > 0) {
						self.courseItem = self.workList[self.courseIndex];
					}
					let date = new Date();
					let num = date.getDate();
					let month = date.getMonth() + 1;
					let list = [];
					for (let i = 0; i < result.data.data.calendarStudyVo.length; i++) {
						let item = result.data.data.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();
				}
			});
		},
		getMonDate() {
			var d = new Date(),
				day = d.getDay(),
				date = d.getDate();
			if (day == 0) return d;
			else d.setDate(date - day);
			return d;
		},
		swiperClick(index) {
			let item = this.list[index];
			uni.navigateTo({
				url: item.jumpUrl
			});
		},
		advertisingList() {
			let self = this;
			this.$api.advertisingList().then(res => {
				let index;
				for (index in res.data.rows) {
					res.data.rows[index].image = self.$method.splitImgHost(res.data.rows[index].adverUrl,true,500);
				}
				self.list = res.data.rows.filter((item,index) => {
					return item.type === 1
				});
			});
		},
		initList() {
			this.paramList[0].pageNum = 1
			this.paramList[1].pageNum = 1
			this.paramList[2].pageNum = 1
			this.list1 = []
			this.list2 = []
			this.list3 = []
			this.courseList();
			this.bankList();
			this.noteList();
		},
		scroll(e) {},
		scrollTolower() {
			if (this.current == 0) {
				if (this.list1.length < this.paramList[0].total) {
					this.paramList[0].pageNum++;
					this.courseList();
				}
			}
			if (this.current == 1) {
				if (this.list1.length < this.paramList[1].total) {
					this.paramList[1].pageNum++;
					this.bankList();
				}
			}
			if (this.current == 2) {
				if (this.list1.length < this.paramList[2].total) {
					this.paramList[2].pageNum++;
					this.noteList();
				}
			}
		},
		sectionChange(index) {
			this.current = index;
		},
		//课程
		courseList() {
			var self = this;
			var param = this.paramList[0];
			this.$api.courselist(param).then(res => {
				self.paramList[0].total = res.data.total;
				self.list1.push.apply(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.banklist(param).then(res => {
				self.paramList[1].total = res.data.total;
				self.list2.push.apply(self.list2, res.data.rows);
				if (self.list2.length === res.data.total) {
					self.paramList[1].showStatus = true;
				}
			});
		},
		//考试重点
		noteList() {
			var self = this;
			var param = this.paramList[2];
			this.$api.notelist(param).then(res => {
				self.paramList[2].total = res.data.total;
				self.list3.push.apply(self.list3, res.data.rows);
				if (self.list3.length === res.data.total) {
					self.paramList[2].showStatus = true;
				}
			});
		},
		jumpDetail(item) {
			if (this.current == 0) {
				this.$navTo.togo('/pages2/course/detail', {
					id: item.courseId
				});
				return;
			}
			if (this.current == 1) {
				this.$navTo.togo('/pages2/bank/detail', {
					id: item.bankId
				});
				return;
			}
			if (this.current == 2) {
				this.$navTo.togo('/pages2/course/keynote', {
					id: item.fileId
				});
				return;
			}
		},
		jumpPlan() {
			if (!this.$method.isLogin()) {
				this.$navTo.togo('/pages/login/login');
			} else {
				this.$navTo.togo('/pages2/plan/detail', {});
			}
		},
		jumpSearch() {
			this.$navTo.togo('/pages2/index/search', {});
		},
		initCateList() {
			this.$api.coursecategorylist().then(res => {
				if (res.data.code === 200) {
					this.cateList = res.data.rows;
					this.cateChild1 = res.data.rows.filter((item, index) => {
						return item.pid === 0;
					});
					if (this.cateChild1.length > 0) {
						this.cateChild1.unshift({
							categoryName: '全部',
							categoryId: 0
						});
					}
				}
			});
		},
		active1(options) {
			this.cateActiveIndex1 = options.categoryId
			this.cateActiveIndex2 = 0
			this.cateChild2 = this.cateList.filter((item, index) => {
				return item.pid === options.categoryId;
			});
			if (this.cateChild2.length > 0) {
				this.cateChild2.unshift({
					categoryName: '全部',
					categoryId: 0
				});
			}
		},
		active2(options) {
			this.cateActiveIndex2 = options.categoryId
			this.cateActiveIndex3 = 0
			this.cateChild3 = this.cateList.filter((item, index) => {
				return item.pid === options.categoryId;
			});
			if (this.cateChild3.length > 0) {
				this.cateChild3.unshift({
					categoryName: '全部',
					categoryId: 0
				});
			}
		},
		active3(options) {
			this.cateActiveIndex3 = options.categoryId
			// this.cateChild2 = this.cateList.filter((item,index) => {
			// 	return item.pid === options.categoryId
			// })
		},
		activeAll(int) {
			if (int === 1) {
				this.cateActiveIndex1 = 0
				this.cateChild2 = [];
			}
			if (int === 2) {
				this.cateActiveIndex2 = 0
				this.cateChild3 = [];
			}
			if (int === 3) {
				this.cateActiveIndex3 = 0
				// this.cateChild2 = []
			}
		},
		initLists(){
			this.paramList[0].categoryId = ''
			this.paramList[1].categoryId = ''
			this.paramList[2].categoryId = ''
			this.cateChild2 = []
			this.cateChild3 = []
			this.cateActiveIndex1 = 0
			this.cateActiveIndex2 = null
			this.cateActiveIndex3 = null
			this.alint()
			this.show = false
		},
		searchPageInfos(){
			if(this.cateActiveIndex1 === null || this.cateActiveIndex1 === 0){
				this.paramList[0].categoryId = ''
				this.show = false
				this.alint()
			}else{
				if(this.cateActiveIndex2 === 0 || this.cateActiveIndex2 === null){
					this.paramList[0].categoryId = this.cateActiveIndex1
					this.paramList[1].categoryId = this.cateActiveIndex1
					this.paramList[2].categoryId = this.cateActiveIndex1
					this.show = false
					this.alint()
				}else{
					if(this.cateActiveIndex3 === 0 || this.cateActiveIndex3 === null){
						this.paramList[0].categoryId = this.cateActiveIndex2
						this.paramList[1].categoryId = this.cateActiveIndex2
						this.paramList[2].categoryId = this.cateActiveIndex2
						this.show = false
						this.alint()
					}else{
						this.paramList[0].categoryId = this.cateActiveIndex3
						this.paramList[1].categoryId = this.cateActiveIndex3
						this.paramList[2].categoryId = this.cateActiveIndex3
						this.show = false
						this.alint()
					}
				}
			}
			
		},
		alint(){
			this.courseListint()
			this.bankListint()
			this.noteListint()
		},
		//课程
		courseListint() {
			var self = this;
			var param = this.paramList[0];
			this.$api.courselist(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;
				}
			});
		},
		//题库
		bankListint() {
			var self = this;
			var param = this.paramList[1];
			this.$api.banklist(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;
				}
			});
		},
		//考试重点
		noteListint() {
			var self = this;
			var param = this.paramList[2];
			this.$api.notelist(param).then(res => {
				self.paramList[2].total = res.data.total;
				self.list3 = res.data.rows
				if (self.list3.length === res.data.total) {
					self.paramList[2].showStatus = true;
				}
			});
		},
	}
};
</script>

<style scoped>
.search {
	width: 40rpx;
	height: 40rpx;
	margin-left: 30rpx;
}
.slot-wrap {
	display: flex;
	align-items: center;
}
.popup_t1 {
	padding-left: 35rpx;
	border-bottom: 1rpx solid #eee;
	height: 57rpx;
	margin-top: 86rpx;
	font-weight: bold;
	color: #131b31;
	font-size: 30rpx;
}
.price {
	font-size: 20rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #ff0000;
	margin-top: 8rpx;
}
.old_price {
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: bold;
	text-decoration: line-through;
	color: #999999;
	margin-top: 8rpx;
}
.list_title {
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #2f4379;
}
.list_content {
	width: 656rpx;
	height: 134rpx;
	background: #ffffff;
	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(47, 67, 121, 0.1);
	border-radius: 24rpx;
	position: absolute;
	top: 20rpx;
	left: 20rpx;
}
.list_box {
	position: relative;
	width: 100%;
	margin-top: 30rpx;
}
.list_img {
	width: 278rpx;
	height: 134rpx;
	z-index: 100;
	position: relative;
}
.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;
}
.arr-icon {
	width: 40rpx;
	height: 40rpx;
}
.wrap {
	padding: 24rpx;
}

.u-row {
	margin: 40rpx 0;
}
.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;
}
.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: 25rpx;
	padding-bottom: 15rpx;
}
.box {
	margin: 30rpx;
}
.my_swiper {
	box-shadow: 0rpx 20rpx 16rpx 4rpx rgba(47, 67, 121, 0.08);
	border-radius: 25rpx;
}
.calendar_card .card_box {
	height: 60rpx;
	line-height: 60rpx;
	margin-left: 40rpx;
}
.calendar_card .t1 {
	color: #7f8caf;
	font-size: 24rpx;
}
.calendar_card .t2 {
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #32467b;
	margin: 0 10rpx;
}
.calendar_card .t3 {
	font-size: 30rpx;
	font-weight: bold;
	color: #32467b;
	text-shadow: 0rpx 3rpx 3rpx rgba(0, 0, 0, 0.2);
	margin: 0 10rpx;
}
.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>