jiangximiniprogramSchool/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">大乔{{identity=='校长'?'校长': '教练'}}</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">翔力驾校</view>
				<view class="tag" v-if="identity=='校长'">驾校校长</view>
				<view class="tag" v-else>合作教练</view>
			</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 22rpx 0;

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

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

			.school_row {
				display: flex;
				align-items: center;

				.icon {
					width: 28rpx;
					height: 28rpx;
				}

				.schoolName {
					font-size: 28rpx;
					padding: 0rpx 20rpx;
				}

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