siyu_app/pages/course/components/docterItem.vue

<template>
	<view class="doctor">
		<view class="doctor-info">
			<view class="doctor-avatar">
				<image class="doctor-avatar" src="@/static/home/logo.png" mode="aspectFill"></image>
				<view class="num-box">4684次接诊</view>
			</view>
			<view>
				<text class="doctor-name">姜宇</text>
				<text class="technical-title">主治医生</text>
			</view>
			<view class="price-box">
				<text class="price-box-unit">￥</text>
				<text class="price-box-integer">300</text>
				<text class="price-box-decimal">.00</text>
				<text class="price-box-text">/次</text>
			</view>
			<view class="sc">
				<image src="@/static/home/index_sc_font.png" mode="aspectFill"></image>
				<view class="sc-desc">以传统中医学理论</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "docterItem",
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.doctor {
		width: 342rpx;
		padding: 32rpx 0 30rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		&-avatar {
			position: relative;
			image {
				width: 140rpx;
				height: 140rpx;
				background: #D3D2CE;
				border-radius: 70rpx 70rpx 70rpx 70rpx;
				margin-bottom: 22rpx;
			}
			.num-box {
				white-space: nowrap;
				height: 36rpx;
				padding: 0 12rpx;
				background: #2C261F;
				border-radius: 6rpx 6rpx 6rpx 6rpx;
				font-size: 20rpx;
				color: #F0CBB1;
				line-height: 36rpx;
				position: absolute;
				bottom: 18rpx;
				left: 50%;
				transform: translate(-50%,0);
			}
		}
		&-info {
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		&-name {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #222222;
			line-height: 33rpx;
			margin-right: 12rpx;
		}
		.technical-title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			line-height: 28rpx;
		}
		.price-box {
			font-family: Roboto, Roboto;
			font-weight: bold;
			font-size: 36rpx;
			color: #FF5C03;
			margin: 22rpx 0;
			&-unit {
				font-weight: 600;
				font-size: 20rpx;
			}
			&-integer {
				font-size: 26rpx;
			}
			&-decimal {
				font-weight: 600;
				font-size: 20rpx;
			}
			&-text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 22rpx;
			}
		}
		.sc {
			width: 100%;
			height: 40rpx;
			background: #FEFAF3;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			border: 1rpx solid #FBEDD1;
			padding: 0 20rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			image {
				width: 40rpx;
				height: 20rpx;
				padding-right: 18rpx;
				flex-shrink: 0;
				position: relative;
				&:after {
					content: "";
					width: 0;
					height: 16rpx;
					border: 1rpx solid #F8E5C0;
					position: absolute;
					right: 9rpx;
					bottom: 0;
				}
			}
			&-desc {
				flex: 1;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}
</style>