daoshiyuyue-teacher/pages/student/details.vue

<template>
	<view class="details">
		
		<view class="wrap">
			<!-- <image src="../../static/images/stu-top.png" mode="widthFix"></image> -->
			<view class="title">
				<text>学生个人信息</text>
				<text class="eng">Student Personal Information</text>
			</view>
		</view>
		
		<!-- <image class="headimg" :src="details.headimg" mode=""></image> -->
		<view class="item">
			<view class="details-item">
				<!-- <image src="../../static/images/mine-icon.png" mode=""></image> -->
				<image :src="details.headimg" mode=""></image>
				<view class="middle">
					{{details.truename}}
				</view>
			</view>
			<view class="text">
				<image src="../../static/images/date.png" mode=""></image>
				<view class="middle">
					学号
				</view>
				<view class="right">
					<span>{{details.account}}</span>
				</view>
			</view>
			<view class="text">
				<image src="../../static/images/class.png" mode=""></image>
				<view class="middle">
					班级
				</view>
				<view class="right">
					{{details.class ? details.class : '--'}}
					<!-- <span></span> -->
				</view>
			</view>
			<view class="text">
				<image src="../../static/images/phone.png" mode=""></image>
				<view class="middle">
					电话
				</view>
				<view class="right">
					<span>{{details.mobile ? details.mobile : '--'}}</span>
				</view>
			</view>
			<view class="text">
				<image src="../../static/images/e-mail.png" mode=""></image>
				<view class="middle">
					邮箱
				</view>
				<view class="right">
					<span>{{details.email ? details.email : '--'}}</span>
				</view>
			</view>
			<view class="text1">
				<view class="remark-title">
					<!-- <u-icon name="tags-fill" size="45"></u-icon> -->
					<span style="margin-left: 10px;">Ta的学习需求</span>
					<image src="../../static/images/remark.png" mode=""></image>
				</view>
				<image class="circle" src="../../static/images/remark1.png" mode=""></image>
				<view class="remark">
					<text>{{details.demand}}</text>
					
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				stu_id: '',
				details: ''
			}
		},
		onLoad(options) {
			if (this.is_weixin()) {
				this.navTitle()
			}
			this.stu_id = options.id
			this.getDetails()
		},
		methods: {
			//判断是否是微信
			is_weixin() {
				let ua = navigator.userAgent.toLowerCase();
				return ua.indexOf('micromessenger') != -1;
			},
			navTitle() {
				let navTitle = document.getElementsByTagName('uni-page-head');
				navTitle[0].style.display = 'none'
			},
			getDetails() {
				this.$u.get('/mentor/student/' + this.stu_id).then(res => {
					console.log(res, 'xianqing ')
					this.details = res.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F4F9FD;
		padding: 20px 16px;
	}

	.details {
		background-color: #FFFFFF;
		
		.wrap{
			// display: flex;
			width: 100%;
			background: url(../../static/images/stu-top.png) no-repeat;
			height: 112px;
			background-size: 100%;
			background-position: center;
		}
		.title{
			flex: 1;
			font-size: 20px;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 20px;
			color: #282828;
			padding: 40px 30px 30px;
			margin-left: 95px;
			.eng{
				display: block;
				font-size: 12px;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 20px;
				color: #282828;
				opacity: 1;
				margin-top: 6px;
			}
		}
		.headimg{
			width: 100px;
			height: 100px;
			border-radius: 100px;
			position: fixed;
			right: 30px;
			top: 80px;
		}

		.item {
			padding: 37px 30px 159px;

			.details-item {

				display: flex;
				align-items: center;
				margin-bottom: 20px;
				image {
					width: 50px;
					height: 50px;
					margin-right: 12px;
					border-radius: 50%;
				}

				.middle {
					font-size: 20px;
					font-family: PingFang SC;
					font-weight: bold;
					color: #282828;

					opacity: 1;
					margin-right: 10px;
				}

				.right {
					font-size: 14px;
					font-family: PingFang SC;
					font-weight: bold;

					color: rgba(40, 40, 40, .78);
				}
			}

			.text {
				display: flex;
				margin-top: 8px;
				// align-items: center;

				image {
					width: 18px;
					flex: 0 0 18px;
					height: 18px;
					margin-right: 12px;
				}

				.middle {
					font-size: 15px;
					font-family: PingFang SC;
					font-weight: bold;
					flex: 0 0 35px;
					margin-right: 10px;
					color: rgba(40, 40, 40, .78);
				}

				.right {
					font-size: 12px;
					font-family: PingFang SC;
					font-weight: bold;
					color: rgba(40, 40, 40, .59);
				}
			}

			.text1 {
				// background-color: #18B566;
				margin-top: 40px;
				text-align: center;
			}

		}

		.remark-title {
			// margin: 10px 0px 0px;
			// padding: 5px 0;
			font-size: 14px;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 20px;
			color: #282828;
			image{
				display: inline-block;
				width: 13px;
				height: 23px;
				vertical-align: middle;
			}
		}
		.circle{
			width: 10px;
			height: 27px;
			margin: 10px 0 5px;
		}
		

		.remark {
			background: #F4F9FD;
			border: 1px solid #00BEA6;
			opacity: 1;
			border-radius: 11px;
			font-size: 12px;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 20px;
			color: #282828;
			opacity: 0.54;
			text{
				display: inline-block;
				margin: 16px 21px;
				overflow: hidden;
				display: -webkit-box; //将对象作为弹性伸缩盒子模型显示;
				
				text-overflow: ellipsis; //溢出部分用省略号代替
				
				-webkit-line-clamp: 3; //设置文本显示两行
				
				-webkit-box-orient: vertical; //从上到下排列子元素;
				
				white-space: normal;
			}
			
			// border-bottom: 1px solid rgba(112, 112, 112, .06);
		}


	}
</style>