luoyangCoachApp/components/user-info/user-info.vue

<template>
	<view class="info_row">
		<view class="avatar">
			<image src="@/static/images/coach/avatar.png" mode=""></image>
		</view>
		<view class="info" @click="$goPage('/pages/userCenter/personaInfo/personaInfo')">
			<view class="name_row">
				<view class="name oneRowText">{{ vuex_userInfo.name}}</view>
				<view class="icon">
					<image src="@/static/images/coach/ic_gengduo.png" mode=""></image>
				</view>
			</view>
			<view class="school_row">
				<view class="icon">
					<image src="@/static/images/index/ic_jiaxiao_cli.png" mode=""></image>
				</view>
				<view class="schoolName oneRowText">{{ vuex_userInfo.schoolName}}</view>
				<!-- <view class="tag" v-if="identity=='校长'">驾校校长</view>
				<view class="tag" v-else>合作教练</view> -->
			</view>
			<view class="tag" >{{identity}}</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
	.info_row {
		display: flex;
		align-items: center;

		.avatar {
			width: 144rpx;
			height: 144rpx;
			border-radius: 50%;
			overflow: hidden;
		}

		.info {
			padding-left: 20rpx;

			.name_row {
				display: flex;
				align-items: center;
				padding: 6rpx 20rpx 0rpx 0;

				.name {
					font-size: 48rpx;
					font-weight: 500;
					width: 300rpx;
				}

				.icon {
					width: 40rpx;
					height: 40rpx;
					margin-left: 20rpx;
				}
			}

			.school_row {
				display: flex;
				align-items: center;
				padding: 16rpx 0;
				.icon {
					width: 28rpx;
					height: 28rpx;
				}

				.schoolName {
					font-size: 28rpx;
					padding: 0rpx 20rpx;
					width: 0;
					flex: 1;
				}
			}
			.tag {
				height: 44rpx;
				padding: 0 20rpx;
				background: rgba(25, 137, 250, 0.1);
				border-radius: 22rpx;
				font-size: 24rpx;
				line-height: 44rpx;
				text-align: center;
				color: $themC;
				white-space: nowrap;
				width: fit-content;
			}
		}
	}
</style>