v3-lab-xcx/pages/views/mine/mine.vue

<!-- 我的 -->
<template>
	<view id="mine">
		<teacherMine class="flex-box-page" ref="teacherMine" v-if="userType==1"></teacherMine>
		<pupilMine class="flex-box-page" ref="pupilMine" v-if="userType==2"></pupilMine>
	</view>
</template>

<script>
	import {
		teacherMine
	} from '@/pages/views/teacherPage/teacherMine'
	import {
		pupilMine
	} from '@/pages/views/pupilPage/pupilMine'
	
	export default {
		
		components: {
			teacherMine,
			pupilMine,
		},
		
		data() {
			return {
				userType: 0,
			}
		},
		onLoad() {

		},
		onShow() {
			this.userType = uni.getStorageSync('userType')
			this.$nextTick(()=>{
				if(this.userType == 1){
					this.$refs.teacherMine.initialize();
				}else if(this.userType == 2){
					this.$refs.pupilMine.initialize();
				}
			})
		},
		methods: {
			
		},
	}
</script>
<style lang="stylus" scoped>
	#mine {
		height: 100%;
		display: flex;
		flex-direction: column;
		.flex-box-page{
			flex:1;
			display: flex;
			flex-direction: column;
		}
		
		
		.top-max-big-box {

			/*background:#ffffff;*/
			.user-top-max-box-one {
				overflow hidden;
				background url("@/pages/images/img_wd_bg.png") no-repeat;
				background-size: 100%;
				height: 350rpx;

				.top-max-box-one {
					background #fff;
					margin: 40rpx 40rpx 0;
					z-index: 1;
					height: 180rpx;

					border-top-right-radius 20rpx;
					border-top-left-radius 20rpx;
					display flex;
					overflow hidden;

					.user-img-box {
						height: 120rpx;
						width: 100rpx;
						margin: 30rpx 53rpx 0 22rpx;

						img {
							height: 100rpx;
							width: 100rpx;
							border-radius: 50%;
						}

						view {
							font-size: 22rpx;
							color: #666666;
							text-align center;
							line-height: 22rpx;
							margin-top: 10rpx;
						}
					}

					.name-box {
						margin-top: 30rpx;

						.name-box-min {
							display flex;
							overflow hidden;
							margin-bottom: 11rpx;

							view:nth-child(1) {
								height: 48rpx;
								line-height: 48rpx;
								font-size: 30rpx;
								color: #333;
							}

							view:nth-child(2) {
								height: 30rpx;
								line-height: 30rpx;
								font-size: 20rpx;
								padding: 0 20rpx;
								margin: 9rpx 0 9rpx 20rpx;
							}

							.view-color-one {
								background #FDD255;
							}

							.view-color-two {
								background #A2A2A2;
							}

							.view-color-tree {
								background #0183FA;
							}
						}

						.name-box-user {
							line-height: 41rpx;
							font-size: 22rpx;
							color: #333;
						}
					}

				}

				.num-max-box {
					width: 670rpx;
					background #fff;
					border-bottom-right-radius 20rpx;
					border-bottom-left-radius 20rpx;
					height: 130rpx;
					margin: 0 40rpx;

					display flex;

					.min-num-box {
						flex: 1;

						.min-num-view {
							margin-top: 30rpx;
							height: 30rpx;
							line-height: 30rpx;
							font-size: 22rpx;
							text-align center
						}

						.color-one {
							font-weight: 700;
							font-size: 26rpx;
							color: #2B99FE;
						}

						.color-two {
							font-weight: 700;
							font-size: 26rpx;
							color: #FDD255;
						}

						.bottom-min-num-view {
							display flex;
							margin-top: 20rpx;

							.img-one {
								width: 25rpx;
								height: 28rpx;
								margin: 0 10rpx 0 58rpx;
							}

							.img-two {
								width: 28rpx;
								height: 26rpx;
								margin: 0 10rpx 0 59rpx;
							}

							view {
								font-size: 22rpx;
							}
						}
					}
				}

				.null-p {
					background #dedede;
					height: 30rpx;
					width: 2rpx;
					margin: 50rpx 0 0;
				}
			}

			.top-max-box-two {
				background: #0183FA;
				height: 180rpx;

				display flex;
				overflow hidden;

				.user-img-box {
					height: 120rpx;
					width: 100rpx;
					margin: 50rpx 53rpx 0 22rpx;

					img {
						height: 100rpx;
						width: 100rpx;
						border-radius: 50%;
					}

					view {
						font-size: 22rpx;
						color: #fff;
						text-align center;
						line-height: 22rpx;
						margin-top: 10rpx;
					}
				}

				.name-box {
					margin-top: 50rpx;

					view:nth-child(1) {
						line-height: 48rpx;
						margin-bottom: 11rpx;
						font-size: 30rpx;
						color: #fff;
					}

					view:nth-child(2) {
						line-height: 41rpx;
						font-size: 22rpx;
						color: #fff;
					}
				}

			}

			.button-max-big-box {
				background #fff;
				padding: 0 20rpx;
				margin-top: 30rpx;

				.button-max-box {
					height: 100rpx;
					display flex;
					border-top: 1rpx solid #e0e0e0;

					.left-img {
						height: 30rpx;
						width: 30rpx;
						margin: 34rpx 44rpx 0 0;
					}

					view {
						line-height: 100rpx;
					}

					view:nth-child(2) {
						flex: 1;
						color: #333333;
						font-size: 30rpx;
					}

					.right-img {
						height: 24rpx;
						width: 12rpx;
						margin: 39rpx 0 0 0;
					}

					.colorA {
						color: #E45656 !important;
					}

					.marginType {
						margin-right: 12rpx;
					}

					.view-three-one {
						width: 30rpx;
						height: 30rpx;
						text-align center;
						background #FF4552;
						border-radius: 50%;
						font-size: 20rpx;
						line-height: 30rpx;
						color: #fff;
						margin: 36rpx 20rpx;
					}

					.view-three-two {
						width: 30rpx;
						height: 30rpx;
						text-align center;
						border-radius: 50%;
						font-size: 20rpx;
						line-height: 30rpx;
						color: #999;
						margin: 36rpx 20rpx;

					}

					.view-three-type {
						width: 120rpx;
						text-align center;
						color: #CCCCCC;
						font-size: 26rpx;
					}
				}

				.button-max-box:nth-child(1) {
					border: none;
				}
			}
		}

		.out-button {
			position absolute;
			bottom: 140rpx;
			left: 25rpx;
			width: 700rpx;
			height: 100rpx;
			line-height: 100rpx;
			border-radius: 10rpx;
			text-align center;
			background #E0E0E0;
			color: #0183FA;
			font-size: 30rpx;
			margin: 0 auto;
		}
	}
</style>