jiangximiniprogramSchool/pages/userCenter/schoolCoach/coachComment/comp/info.vue

<template>
	<view class="tabCon">
		<view class="tab1">
			<view class="card" >
				<view class="flex">
					<view class="avatar">
						<image :src="item.photoPath" mode="" @error="handleImageError(item)"></image>
					</view>
					<view class="rightCon">
						<view class="name">{{ item.name }}</view>
						<view class="flex-b">
							<view class="starBox">
								<u-rate active-color="#1989FA" inactive-color="#1989FA" gutter="1" :size="16" :value="item.stars" disabled style="pointer-events: none;"></u-rate>
								<view class="num">{{item.stars}}分</view>
							</view>
						</view>
					</view>
				</view>
				<view class="text">证件号：{{item.idcard}}</view>
				<view class="text">联系电话：{{item.mobile}}</view>
				<view class="text">绑定学员：<text>{{ item.studentTotal||0 }}</text> 人</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	
	export default {
		props: ['item', ],
		methods: {
			handleImageError(item) {
				item.photoPath = require('@/static/images/index/avatar.png')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabCon {
		width: 100%;
	  .tab1 {
		  width: 100%;
	    .card {
			width: 100%;
			padding: 36rpx;
			// margin-top: 20rpx;
			.flex {
				margin-bottom: 20rpx;
			}
			.text {
				font-size: 28rpx;
				padding: 10rpx 0;
				text {
					color: $themC;
				}
			}
	      .avatar {
	        width: 100rpx;
	        height: 98rpx;
			border-radius: 50%;
			margin-right: 34rpx;
			background-color: #f6f6f6;
	      }
		.rightCon {
			flex: 1;
			width: 0;
			.name {
				font-size: 32rpx;
				color: #333;
				font-weight: 500;
			}
				
			.flex-b {
			  margin-top: 14rpx;
			  .more {
				  display: flex;
				  align-items: center;
			    .moreText {
					font-size: 24rpx;
					color: #686B73;
					margin-right: 10rpx;
			    }
			  }
			}
		}
	      
	    }
	  }
	}

</style>