diagnosis_app/views/patientItems/doctorInfo/index.vue

<template>
	<view class="content">
		<view class="top">
			<view class="user">
				<image :src="avatar" mode="widthFix" class="avatar" @error="onErrorImg"></image>
				<view class="name">
					<text>{{name}}</text>
				</view>
				<view class="tags">
					<text>{{tags}}</text>
				</view>
			</view>
			<view class="hospital">
				<text class="name">{{hospitalName}}</text>
				<text class="grade">{{hospitalGrade}}</text>
			</view>			
		</view>
		<view class="specialty">
			<view class="specialty-head-wrap">
				<text class="specialty-head">专业特长</text>
			</view>
			<view class="specialty-message">{{specialty}}</view>
		</view>	
	</view>
</template>

<script>
	export default{
		data(){
			return{
				defaultAvatar:require('@/static/images/avatar.png'),
				avatar:'',
				name:"",
				tags:"",
				hospitalName:"",
				hospitalGrade:"",
				specialty:""
			}
		},
		created() {
			this.init()
		},
		methods:{
			init(){
				let doctor=uni.getStorageSync('doctor');
				this.avatar=doctor.headportrait;
				this.name=doctor.doctorname;
				this.tags=doctor.technicaltitle;
				this.hospitalName=doctor.hospitalName;
				this.hospitalGrade=doctor.hospitalGrade;
				this.specialty=doctor.begoodat;		
			},
			onErrorImg() {
				this.avatar=this.defaultAvatar;
			}			
		},
		destroyed() {
			uni.removeStorageSync('doctor');
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		.top{
			&{
				padding:64upx 0 40upx 0;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				
			}
			.user{
				padding-top: 18upx;
				.avatar{
					display: block;
					width: 150upx;
					height: 150upx;
					border-radius: 50%;
					margin: 0 auto;
					background-color: #ccc;
				}
				.name{
					font-size: 32upx;
					color: #333333;
					text-align: center;
				}
				.tags{
					font-size: 28upx;
					color: #666666;
					text-align: center;
				}
			}			
		}
		.hospital{
			padding-top: 12upx;
			.name{
				font-size: 22upx;
				color: #666666;
			}
			.grade{
				font-size: 18upx;
				color: #3384FF;
				padding-left: 10upx;
			}
		}		
		.specialty{
			line-height: 40upx;
			padding:0 56upx;
			.specialty-head{
				color:#3384FF;
				position: relative;
				font-size: 30upx;
				font-weight: 600;
				&::after{
					width: 50%;
					height: 6upx;
					display: block;
					content: "";
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					bottom: -8upx;
					background-color:#FA6400;
					z-index: 999;
				}
			}
			.specialty-message{
				font-size: 22upx;
				color: #999;	
				padding-top: 18upx;
			}
		}		
	}	
</style>