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

<template>
	<view class="info_row">
		<view class="avatar">
			<!-- <image src="@/static/images/coach/avatar.png" mode=""></image> -->
			<image :src="vuex_userInfo.photoPath" mode="" v-if="vuex_userInfo.photoPath"></image>
		</view>
		<view class="flex" v-if="!$store.state.user.vuex_loginInfo.accessToken"  @click="$goPage('/pages/login/login')">
			<view class="name oneRowText" style="padding-left: 20rpx;">请先登录</view>
			<u-icon name="arrow-right" color="#686B73" :size="'28rpx'"></u-icon>
		</view>
		<view class="info" @click="$goPage('/pages/userCenter/personaInfo/personaInfo')" :class="{Fwidth: Fwidth}" v-else>
			<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>
	export default {
		props: {
			Fwidth: {
				type: Boolean,
				default: false
			}
		}
	}
</script>

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

		.avatar {
			width: 144rpx;
			height: 144rpx;
			border-radius: 50%;
			overflow: hidden;
			background: url("../../static/images/coach/avatar.png") no-repeat;
			background-size: 100% 100%;
		}

		.info {
			padding-left: 20rpx;

			&.Fwidth {
				flex: 1;
			}

			.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>