yichael_zhongchuang_front_2/components/home/teacherCreation.vue

<template>
	<view class="m_container df fdr">
		<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_data " v-for="(item,index) in menu" :key="index" @click="checkMenu(item,0)">
					<view class="m_menu-item">
						<view :class="item.select&&childrenIndex==-1?'m_act':''"></view>
						<view class="m_menu_item_icon">
							<span class="font_family " :class="item.select&&childrenIndex==-1? item.icon+' m_act1 ':item.icon"></span>
						</view>
						<view class="m_menu_item_name" :class="item.select&&childrenIndex==-1?'m_act_font':''">{{item.title}}</view>
						<view class="m_menu_right">
							<icon :type="''" class="font_family icon-lujing2 " :class="item.select? 'm_act11':''"></icon>
						</view>
					</view>
					<view class="m_menu-item-checked" v-for="(children,aindex) in item.list" :key="aindex" v-show="item.select"
					 @click.stop="checkMenu(children,1)">
						<view class="m_menu_item_name" :class="children.select?'cact':''">{{children.title}}</view>
					</view>
				</view>

			</view>
		</view>

		<scroll-view class="rightBox" scroll-y="true" :scroll-top="scrollTop" @scroll="scroll">
			<!-- <view class="rightBox"> -->
			<!-- showboder -->
			<teacher ref="teacher" v-show="index==1" @paging="paging"></teacher>
			<create ref="create" v-show="index==3"></create>
			<vtable ref="table" v-show="index==2" v-on:viewProject='viewProject'></vtable>
			<project ref="project" v-show="index==4"></project>
			<location ref="location" v-show="index==2||index==4"></location>
			<!-- </view> -->
		</scroll-view>
	</view>
</template>

<script>
	import teacher from "./teacher/teacher.vue"
	import create from "./teacher/create.vue"
	import vtable from "./teacher/table.vue"
	import project from "./teacher/project.vue"
	import location from "./teacher/location_temp.vue"
	// import location from "./teacher/location.vue"
	export default {
		data() {
			return {
				index: 1,
				childrenIndex: -1,
				name: '张林老师',
				position: '计算机系',
				menu: [{
					id: 1,
					icon: "icon-bianzu22",
					select: true,
					title: '新建项目',
					list: []
				}, {
					id: 2,
					icon: "icon-bianzu22",
					select: false,
					title: '选择项目',
					list: [{
						id: 4,
						title: "项目",
						select: false
					}]
				}],
				scrollTop: 0,
				oldScrollTop: 0,

			}
		},
		components: {
			teacher,
			create,
			vtable,
			project,
			location
		},
		created() {

		},
		methods: {
			checkMenu(obj, i) {
				this.index = obj.id;
				if (i == 0) {
					this.index = obj.id;
					this.menu.forEach(p => p.select = false);
					obj.list.forEach(p => p.select = false);
					obj.select = true;
				} else {
					obj.select = true;
				}

				if (obj.id == 2) {
					this.$refs.table.getList();
				}
			},
			paging(obj) {
				this.index = obj;
			},
			childrenClick(obj) {
				obj.select = true;
			},
			scroll(e) {
				//记录scroll  位置
				this.oldScrollTop = e.detail.scrollTop
			},
			goTop(e) {
				//视图会发生重新渲染
				this.scrollTop = this.oldScrollTop
				//当视图渲染结束 重新设置为0
				this.$nextTick(() => {
					this.scrollTop = 0
				});
			},
			viewProject(obj, index) {
				console.log("查看项目", obj, index);
				this.menu[1].list[0].title = '项目' + (index + 1);
				this.checkMenu(this.menu[1].list[0],1);
				this.$refs.project.viewProject(obj);
			}
		}
	}
</script>

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

	.rightBox {
		flex: 1;
	}

	.m_menu_right {
		position: absolute;
		right: 50rpx;
		top: 50%;
		transform: translateY(-50%);
		font-size: 30rpx;
	}

	.m_menu-item-checked {}

	.m_container {
		// display: flex;
		// justify-content: space-between;
		width: 100%;
		// height: 100%;
		height: px2vh(960);

		.m_left {
			// width: 500rpx;
			width: px2vw(374);
			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 {
			// 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;
	}

	.m_act11 {
		// color: #FF0019;
		transform: rotate(90deg);
		transition: all 500ms ease;
	}

	.s_logo {
		width: 100%;
		height: 1000rpx;
	}


	.s_content_container {
		padding: 0 206rpx;

		.s_title {
			font-weight: bold;
			text-align: center;
			line-height: 200rpx;
			font-size: 45rpx;
		}

		.s_content {
			font-weight: 500;
			font-size: 40rpx;
			line-height: 70rpx;
		}
	}

	.m_btn_download {
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 70rpx;
		background: #EA252C;
		color: #fff;
		font-family: MicrosoftYaHei;
	}

	.m_menu-item-checked .m_menu_item_name {
		line-height: 70rpx;
		text-align: center;
	}

	.m_menu-item-checked .cact {
		color: #EA252C;
	}
</style>