luoyang-uniapp-app/pages/tabbar/index/comp/coachItem.vue

<template>
	<view class="coachItem">
		<view class="starBoxBg">5.0</view>
		<view class="info">
			<view class="avatar">
				<image src="@/static/images/indexIcon/xccard.png" mode=""></image>
			</view>
			<view class="name">张小平</view>
			<view class="schoolName">翔力驾校</view>
		</view>
		<view class="tags">
			<view class="tag" v-for="(item,index) in 3" :key="index">优秀教练</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tagArr: ['']
			}
		}
	}
</script>

<style lang="scss" scoped>
	.coachItem {
		width: 280rpx;
		height: 385rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		position: relative;
		padding: 0 20rpx;
		margin-right: 20rpx;
	  .starBoxBg {
		width: 72rpx;
		height: 40rpx;
		background: #0A52F4;
		border-radius: 20rpx 0px 20rpx 0px;
		font-size: 28rpx;
		color: #fff;
		line-height: 40rpx;
		text-align: center;
		position: absolute;
		left: 0;
		top: 0;
	  }
	
	  .info {
		  display: flex;
		  flex-direction: column;
		  align-items: center;
		  justify-content: center;
		  padding-top: 30rpx;
	    .avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			overflow: hidden;
	    }
	
	    .name {
			font-size: 28rpx;
			color: #333;
			padding: 10rpx 0;
	    }
	
	    .schoolName {
			font-size: 24rpx;
			color: #999;
			margin-bottom: 16rpx;
	    }
	  }
	
	  .tags {
		  display: flex;
		  justify-content: space-between;
		  flex-wrap: wrap;
	    .tag {
			width: 110rpx;
			height: 42rpx;
			background: rgba(80,165,255,0.1);
			border: 1px solid #50A5FF;
			border-radius: 10rpx;
			font-size: 20rpx;
			color: #50A5FF;
			text-align: center;
			margin-bottom: 20rpx;
			line-height: 42rpx;
			&:nth-child(even) {
				background: rgba(171,55,252,0.1);
				border: 1px solid #AB37FC;
				color: #AB37FC;
			}
	    }
	  }
	}
</style>