pbl-student-table/src/App.vue

<template>
	<div id="app">
		<!-- <div class="app_head" :class="{ stuWidth: $route.path == '/student' }">
			<div class="logo" @click="goTo('/')"></div>
			<div class="app_right">
				<div class="box_right_three">
					<div class="pic_img"><img src="./assets/myProject.png" alt="" /></div>
					<div @click="goTo('/project')">我的课程</div>
				</div>
				<div class="box_right_three">
					<div class="pic_img"><img src="./assets/myMessage.png" alt="" /></div>
					<div @click="goTo('/mine')">个人中心</div>
				</div>
				<div class="box_right_three">
					<div class="pic_img"><img src="./assets/mine.png" alt="" /></div>
					<div>
						{{
							this.$store.state.studentInfo
								? this.$store.state.studentInfo.name
								: "用户"
						}}
					</div>
				</div>
				<div class="user_head" @click="exit">
					<div>
						<i class="exitI"></i>
						<el-button type="text" style="color: white">退出</el-button>
					</div>
				</div>
			</div>
		</div> -->
		<div>
			<!-- main 内容 -->
			<keep-alive v-if="$route.meta.keepAlive">
				<!-- 这里是会被缓存的视图组件 -->
				<router-view
					v-if="$route.meta.keepAlive"
					:class="{ pb_body: isShowNav }"
				/>
			</keep-alive>
			<!-- 这里是不被缓存的视图组件 -->
			<router-view
				v-if="!$route.meta.keepAlive"
				:class="{ pb_body: isShowNav }"
			/>

			<!-- 底部导航 -->
			<!-- <footer-nav
				v-if="isShowNav"
				:luyou="this.$store.state.luyou"
			></footer-nav> -->
		</div>
		<!-- <div class="bottom">
			<div class="bottom_flex">
				<div class="left_bottom_flex">
					<div class="left_title">联系我们</div>
					<div class="left_content">
						<div>地址：深圳市南山区</div>
						<div>手机：13418906754</div>
						<div>邮箱：win.wu@qichuangxin.com</div>
						<div>电话：0755-84658992</div>
						<div>邮编：518129</div>
					</div>
				</div>
				<div class="right_bottom_flex">
					<img src="./assets/logo2.png" alt="" />
				</div>
			</div>
		</div> -->
	</div>
</template>

<script>
	import { Message } from "element-ui";
	export default {
		// name: "App",
		data() {
			return {
				isShowNav: true, // 是否显示导航 Tab
			};
		},
		components: {},
		created: function () {
			// this.isLogin();
			// this.getnCount();
			setInterval(() => {
				// this.getnCount();
			}, 60000);
		},
		methods: {
			goTo(path) {
				this.$router.push(path);
			},
			isLogin() {
				const loading = this.$loading.service({
					background: "rgba(255, 255, 255)",
					target: document.querySelector("body"),
				});
				var _isLogin = this.$cookies.get("slogin");
				var studentInfo = this.$cookies.get("studentInfo");
				if (_isLogin == "1" && studentInfo) {
					loading.close();
					this.$store.commit("update", ["isLogin", true]);
					// var info = JSON.parse(window.sessionStorage.getItem("userInfo"));
					this.$store.commit("update", ["studentInfo", studentInfo]);
					let router_path = this.$route.path;
					if (router_path == "/") {
						this.$router.push("/index");
					}
				}
				//  else {
				// 	this.$store.commit("update", ["isLogin", false]);
				// 	Message({
				// 		message: "未登录，请登录",
				// 		type: "warning",
				// 	});
				// 	setTimeout(() => {
				// 		loading.close();
				// 		this.$router.push("/login");
				// 	}, 2000);
				// }
			},
			getnCount() {
				let params = {
					bid: this.$store.state.studentInfo.userid,
				};
				this.ajax
					.get(this.$store.state.api + "getNcount", params)
					.then((res) => {
						console.log(res);
						if (res.data[0].length > 0) {
							this.$store.commit("update", ["nCount", res.data[0][0].num]);
						} else {
							this.$store.commit("update", ["nCount", 0]);
						}
					})
					.catch((err) => {
						console.error(err);
					});
			},
			exit() {
				sessionStorage.clear();
				this.$cookies.remove("slogin");
				this.$cookies.remove("studentInfo");
				this.$store.commit("update", ["isLogin", false]);
				this.$store.commit("update", ["studentInfo", {}]);
				Message({
					message: "退出成功",
					type: "success",
				});
				this.$router.push("/login");
			},
			goTo(path) {
				this.$router.push(path);
			},
		},
	};
</script>
<style>
	* {
		margin: 0;
		padding: 0;
	}
	ul,
	li {
		list-style: none;
	}
	html,
	body {
		height: 100%;
		width: 100%;
		background: #f2f2f2;
	}
	body {
		font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
			"Microsoft YaHei", "微软雅黑", Arial, sans-serif;
	}
	#app {
		height: 100%;
		width: 100%;
		background: #f2f2f2;
		/* min-width: 1380px; */
		min-width: 1000px;
	}
	.app_head {
		height: 67.5px;
		width: 100%;
		background-color: rgb(129, 179, 253);
		display: flex;
		align-items: center;
		min-width: 1000px;
		flex-direction: row;
		justify-content: space-around;
	}
	.logo {
		height: 48px;
		width: 73px;
		background: url("./assets/logo.png");
		background-size: 100% 100%;
		margin-left: 20px;
		cursor: pointer;
	}
	.pb_body {
		width: 100%;
		min-width: 1140px;
		min-width: 745px;
		display: inline-block;
		height: calc(100% - 67.5px);
		/* height: calc(100% - 67.5px - 226px); */
		min-height: 750px;
		background: #f2f2f2;
		border-radius: 5px;
		position: relative;
		overflow: auto;
	}
	.pb_head {
		font-size: 26px;
		/* font-weight: 600; */
		width: 95%;
		margin: 10px auto;
		padding: 10px 5px;
		border-bottom: 3px solid #eee;
	}
	.pb_content {
		/* height: 100%; */
	}
	.pb_content_body {
		margin: 0px auto;
		width: 100%;
		/* overflow: auto;
									  height: calc(100% - 120px); */
	}
	.user_head {
		display: flex;
		align-items: center;
		margin-right: 20px;
		font-size: 18px;
		font-weight: 600;
	}
	.user_head .user_name {
		color: #fff;
		margin-right: 10px;
	}
	.user_head div {
		display: flex;
		align-items: center;
		cursor: pointer;
	}
	.user_head .exitI {
		background-image: url("./assets/exit.png");
		width: 25px;
		height: 25px;
		background-size: 100% 100%;
		margin-top: 1px;
		line-height: 25px;
		vertical-align: text-top;
		background-repeat: no-repeat;
	}
	.noticeBox {
		position: relative;
		margin-right: 10px;
	}

	.user_head .noticeI {
		background-image: url("./assets/icon/noticeA.png");
		width: 25px;
		height: 25px;
		background-size: 100% 100%;
		margin-top: 1px;
		line-height: 25px;
		vertical-align: text-top;
		background-repeat: no-repeat;
		cursor: pointer;
	}
	.noticeBox span {
		position: absolute;
		background: red;
		width: 15px;
		height: 15px;
		border-radius: 30px;
		color: #fff;
		text-align: center;
		font-size: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		top: -3px;
		right: -3px;
	}
	.stuWidth {
		min-width: 1180px;
	}
	.app_right {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		color: #fff;
		align-items: center;
	}
	.pic_img {
		width: 30px;
		height: 30px;
	}
	.pic_img > img {
		width: 100%;
		height: 100%;
	}
	.box_right_three {
		display: flex;
		margin: 0 25px 0px 0;
	}
	.box_right_three > div:nth-child(2) {
		margin: 5px 10px 0 5px;
		cursor: pointer;
		line-height: 22px;
	}
	.bottom {
		background: #ccc;
		width: 100%;
	}
	.bottom_flex {
		display: flex;
		justify-content: space-around;
	}
	.left_bottom_flex {
		margin: 10px 0 5px 0;
	}
	.left_title {
		font-size: 18px;
		margin: 5px 0 15px 5px;
		color: #747474;
	}
	.left_content {
		color: #767676;
		font-size: 14px;
	}
	.left_content > div {
		margin-bottom: 15px;
	}
	.right_bottom_flex {
		width: 219px;
		height: 144px;
		margin: auto 0;
	}
	.right_bottom_flex > img {
		width: 100%;
		height: 100%;
	}
</style>