JiangxiMiniProgram/pages/carEntry/operaAppointment/comp/coachInfo.vue

<template>
	<view class="coachInfo">
		<view class="card">
			<view class="avatar">
				<image src="@/static/images/logo.png" mode=""></image>
			</view>
			<view class="rightTxt">
				<view class="name_row">
					<view class="name">张三三</view>
					<view class="tag">未绑定</view>
				</view>
				<moreRight text="预约其它教练课程"/>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
	.coachInfo {
	  .card {
		  width: 100%;
		  height: 180rpx;
		  display: flex;
		  align-items: center;
		  padding: 0 36rpx;
	    .avatar {
			width: 100rpx;
			height: 98rpx;
			border-radius: 50%;
			overflow: hidden;
	    }
	
	    .rightTxt {
			flex: 1;
			padding: 0 0 0 34rpx;
	      .name_row {
			  display: flex;
			  align-items: center;
			  margin-bottom: 16rpx;
	        .name {
				font-size: 32rpx;
				color: #333;
				font-weight: 550;
	        }
	
	        .tag {
				width: 98rpx;
				height: 40rpx;
				background: #F2F2F2;
				border-radius: 4rpx;
				text-align: center;
				line-height: 40rpx;
				text-align: center;
				margin-left: 24rpx;
				color: #959595;
				&.active {
					color: $themC;
					background: #E8F3FE;
				}
	        }
	      }
	
	      moreright {
	
	      }
	    }
	  }
	}
</style>