<template>
	<view class="instructor-card">
		<view class="card-title">
			<view class="">教练(9)</view>
			<zzx-icon name="right" size="12"></zzx-icon>
		</view>
		<scroll-view class="header-swiper content" scroll-x="true" :show-scrollbar="false">
			<view class="swiper-box">
				<view class="swiper-inner" v-for="item in 12">
					<view class="header-img">
						<image src="https://img.keaitupian.cn/newupload/08/1629449018344288.jpg" mode=""></image>
						<image src="/src/static/badge.png" mode=""></image>
					</view>
					<view class="instructor-name">詹姆斯</view>
					<view class="instructor-specialty">篮球</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
</script>

<style lang="less" scoped>
	.instructor-card{
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		margin-top: 20rpx;
		overflow: hidden;
		.card-title{
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-weight: 800;
			font-size: 32rpx;
			color: #222222;
		}
			.header-swiper {
				margin-top: 24rpx;
				width: 700rpx;
				white-space: nowrap;
				overflow: hidden;
				/* 隐藏滚动条 */
				/deep/ ::-webkit-scrollbar {
					display: none;
					width: 0 !important;
					height: 0 !important;
					background: transparent;
				}
			.swiper-box{
				display: flex;
				align-items: center;
				gap: 44rpx;
				.swiper-inner {
					width: 100rpx;
					text-align: center;
					.header-img{
						position: relative;
						image{
							width: 100rpx;
							height: 100rpx;
							border-radius: 50%;
							&:nth-child(2){
								position: absolute;
								bottom: 0;
								right: 0;
								width: 36rpx;
								height: 36rpx;
							}
						}
					}
					.instructor-name{
						font-size: 28rpx;
						font-weight: 600;
					}
					.instructor-specialty{
						font-size: 22rpx;
						color: #AAAAAA;
					}
				}
			}

			}
	}
</style>