yichael_zhongchuan_manager/components/manager/Index.vue

<template>
	<view class="m_container">
		<view class="m_left">
			<view class="m_hander">
				<view class="m_teacher">
					<image src="../../assets/login/loginPic2.png" class="m_head_portrait"></image>
					<view class="m_teacher_name" v-text="name"></view>
					<view class="m_teacher_position" v-text="position"></view>
				</view>
			</view>
			<view class="m_menu">
				<view class="m_menu-item " :class="item.select?'m_act_font':''" v-for="(item,index) in menu" :key="index" @click="checkMenu(item)">
					<view :class="item.select?'m_act':''">

					</view>
					<view class="m_menu_item_icon">
						<icon type="" class="font_family" :class="item.select?(item.icon+' m_act1'):item.icon"></icon>
					</view>
					<view class="m_menu_item_name" v-text="item.title"></view>
				</view>
			</view>
		</view>
		<!-- 	<view class="m_right">

				<view class="m_right_hander">
				<button size="mini" class="m_btn_red">添加用户</button>
			</view>
			<view class="m_right_container">
				<table style="width: 100%;border: 1px solid #DDDDDD;border-collapse: collapse">
					<thead class="m-table-hander">
						<tr>
							<th>用户名</th>
							<th>班级</th>
							<th>学号</th>
							<th>电话</th>
							<th>ilab账户</th>
							<th>注册时间</th>
							<th>分数</th>
							<th>修改信息</th>
							<th>删除</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<th style="color: #EA252C;">张小旭</th>
							<th>26</th>
							<th>CMII09</th>
							<th>26</th>
							<th>15038728747</th>
							<th>2021-01-01</th>
							<th>90</th>
							<th style="position: relative;"><button type="default" size="mini" class="m_edit">修改</button></th>
							<th style="position: relative;"><button type="default" size="mini" class="m_delete">删除</button></th>
						</tr>
						<tr>
							<th style="color: #EA252C;">张小旭</th>
							<th>26</th>
							<th>CMII09</th>
							<th>26</th>
							<th>15038728747</th>
							<th>2021-01-01</th>
							<th>90</th>
							<th style="position: relative;"><button type="default" size="mini" class="m_edit">修改</button></th>
							<th style="position: relative;"><button type="default" size="mini" class="m_delete">删除</button></th>
						</tr>
						<tr>
							<th style="color: #EA252C;">张小旭</th>
							<th>26</th>
							<th>CMII09</th>
							<th>26</th>
							<th>15038728747</th>
							<th>2021-01-01</th>
							<th>90</th>
							<th style="position: relative;"><button type="default" size="mini" class="m_edit">修改</button></th>
							<th style="position: relative;"><button type="default" size="mini" class="m_delete">删除</button></th>
						</tr>
						<tr>
							<th style="color: #EA252C;">张小旭</th>
							<th>26</th>
							<th>CMII09</th>
							<th>26</th>
							<th>15038728747</th>
							<th>2021-01-01</th>
							<th>90</th>
							<th style="position: relative;"><button type="default" size="mini" class="m_edit">修改</button></th>
							<th style="position: relative;"><button type="default" size="mini" class="m_delete">删除</button></th>
						</tr>
						<tr>
							<th style="color: #EA252C;">张小旭</th>
							<th>26</th>
							<th>CMII09</th>
							<th>26</th>
							<th>15038728747</th>
							<th>2021-01-01</th>
							<th>90</th>
							<th style="position: relative;"><button type="default" size="mini" class="m_edit">修改</button></th>
							<th style="position: relative;"><button type="default" size="mini" class="m_delete">删除</button></th>
						</tr>
						<tr>
							<th style="color: #EA252C;">张小旭</th>
							<th>26</th>
							<th>CMII09</th>
							<th>26</th>
							<th>15038728747</th>
							<th>2021-01-01</th>
							<th>90</th>
							<th style="position: relative;"><button type="default" size="mini" class="m_edit">修改</button></th>
							<th style="position: relative;"><button type="default" size="mini" class="m_delete">删除</button></th>
						</tr>
						<tr>
							<th style="color: #EA252C;">张小旭</th>
							<th>26</th>
							<th>CMII09</th>
							<th>26</th>
							<th>15038728747</th>
							<th>2021-01-01</th>
							<th>90</th>
							<th style="position: relative;"><button type="default" size="mini" class="m_edit">修改</button></th>
							<th style="position: relative;"><button type="default" size="mini" class="m_delete">删除</button></th>
						</tr>
					</tbody>
				</table>
			</view>
			<view class="m_right_footer">
				<view class="m_paging">
					<text class="m_paging_item m_paging_upper">上一页</text>
					<text class="m_paging_item" v-for="i in 8" @click="paging(i)" :class="i==index?'p_act':''">
						{{i}}
					</text>
					<text class="m_paging_item m_paging_lower">下一页</text>
				</view>
			</view>
 
			
		</view>-->
		<user ref="user" v-if="routerIndex==1"></user>
		<zc ref="zc" v-if="routerIndex==2"></zc>
	</view>
</template>

<script>
	import user from "./user.vue"
	import zc from "./zc.vue"
	export default {
		name: "manager",
		props: [],
		data() {
			return {
				routerIndex: 1,
				name: '张林老师',
				position: '计算机系',
				menu: [{
					id: 1,
					icon: "icon-bianzu",
					select: true,
					title: '用户'
				}, {
					id: 2,
					icon: "icon-xingzhuang21",
					select: false,
					title: '资产'
				}, {
					id: 3,
					icon: "icon-bianzubeifen20",
					select: false,
					title: '项目'
				}]
			}
		},
		components: {
			user,
			zc
		},
		created() {

		},
		methods: {
			checkMenu(obj) {
				this.menu.forEach(p => p.select = false);
				obj.select = true;
				this.routerIndex = obj.id;
			},

		}
	}
</script>

<style scoped lang="scss">
	@import '../../assets/icon/iconfont.css';

	.m_container {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 100%;

		.m_left {
			width: 500rpx;
			background-color: #fff;
			border-right: 10rpx solid #ECECEC;
			border-top: 5rpx solid #ECECEC;
			box-shadow: 3px 0px 6px 0px rgba(0, 0, 0, 0.1);

			.m_hander {
				text-align: center;
				background-color: #fff;
				height: 600rpx;
				position: relative;
				// margin: 5rpx 10rpx 10rpx 0;
				border-bottom: 8rpx solid #ECECEC;

				.m_teacher {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}

				.m_teacher_name {
					font-size: 1.1rem;
					font-weight: 600;
					padding: 30rpx 0;
					font-family: MicrosoftYaHei;
				}

				.m_head_portrait {
					width: 250rpx;
					height: 250rpx;
					color: #555555;
				}
			}
		}

		// .m_right {
		// 	width: 100%;
		// 	margin-top: 5rpx;
		// 	padding: 0 150rpx;
		// 	background-color: #fff;
		// 	box-shadow: 3px 0px 6px 0px rgba(0, 0, 0, 0.1);

		// 	.m_right_hander {
		// 		text-align: right;
		// 		height: 250rpx;
		// 		position: relative;

		// 		.m_btn_red {
		// 			position: absolute;
		// 			height: 80rpx;
		// 			line-height: 80rpx;
		// 			padding: 0 40rpx;
		// 			right: 0;
		// 			top: 50%;
		// 			transform: translateY(-50%);
		// 			background: #EA252C;
		// 			color: #fff;
		// 		}
		// 	}

		// }

		.m_menu-icon {
			width: 24rpx;
			height: 24rpx;
		}

		.m_menu {
			background-color: #fff;

			.m_menu-item {
				position: relative;
				display: flex;
				padding: 20rpx 0;
				line-height: 90rpx;
				font-weight: 500;
				border-bottom: 1px solid #DDDDDD;

				.m_menu_item_icon {
					width: 100rpx;
					text-align: right;
					margin-right: 15rpx;
				}

				.m_menu_item_name {
					margin-left: 10rpx;
					font-weight: 600;
				}

				.m_act {
					background: #FF0019;
					width: 8rpx;
					border-radius: 0px 200rpx 200rpx 0px;
					position: absolute;
					height: 90rpx;
					top: 20rpx;
					left: 0;
				}

			}
		}

		.m_act_font .m_menu_item_name {
			color: #FF0019;
		}
	}



	// tbody tr {
	// 	border-top: 2rpx solid #DDDDDD !important;

	// }

	// tbody tr th {
	// 	font-weight: 400 !important;
	// 	height: 140rpx;
	// 	line-height: 140rpx;
	// }

	// tbody tr:hover {
	// 	// color: #fff;
	// 	background: #FDEBEC;
	// 	// opacity: 0.08;
	// }

	// .m-table-hander {
	// 	background-color: #FFF8F7;
	// 	height: 140rpx;
	// 	line-height: 140rpx;
	// 	font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
	// 	font-weight: bold;
	// }

	// .m_edit {
	// 	position: absolute;
	// 	top: 50%;
	// 	left: 50%;
	// 	transform: translate(-50%, -50%);
	// 	background: rgb(67, 127, 250);
	// 	color: rgb(255, 255, 255);
	// 	min-width: 130rpx;
	// }

	// .m_delete {
	// 	position: absolute;
	// 	top: 50%;
	// 	left: 50%;
	// 	min-width: 130rpx;
	// 	transform: translate(-50%, -50%);
	// 	background: rgb(234, 37, 44);
	// 	color: rgb(255, 255, 255);
	// }

	// .m_right_footer {
	// 	margin-top: 80rpx;
	// }

	// .m_paging {
	// 	text-align: right;

	// 	.m_paging_item {
	// 		padding: 10rpx 18rpx;
	// 		border: 1rpx solid #DDDDDD;
	// 		border-radius: 8rpx;
	// 		margin-right: 10rpx;
	// 	}

	// 	.p_act {
	// 		background: #EA252C;
	// 		color: #fff;
	// 		border: inherit;
	// 	}
	// }

	// .m_paging_item:hover {
	// 	background: #EA252C;
	// 	color: #fff;
	// 	border: inherit;
	// }

	.m_act1 {
		color: #FF0019;
	}
</style>