<template>
	<view class="teacher-page">
		<view class="safe-top"></view>
		<view class="page-body">
			<view class="top-card">
				<view class="top-head">
					<view class="teacher-info">
						<view class="avatar">杨</view>
						<view>
							<text class="name">规划杨</text>
							<view class="tags">
								<text class="tag">十大优秀教师</text>
								<text class="tag">就业规划师</text>
							</view>
						</view>
					</view>
					<uni-icons type="star-filled" color="#ffd873" :size="20" />
				</view>
				<view class="rating-row">
					<text class="stars">★★★★★</text>
					<text class="update-time">更新时间 26-01-10</text>
				</view>
			</view>

			<view class="content-card">
				<view class="section-title">教师简介</view>
				<text class="desc">注重学生长期发展，教学效果显著，规划内容精细、针对性强，强调可执行与可复盘。</text>

				<view class="sub-section">
					<text class="sub-title">擅长领域</text>
					<text class="sub-desc">教育升学职业规划</text>
				</view>

				<view class="sub-section">
					<text class="sub-title">擅长课程</text>
					<text class="sub-desc">职业规划、规划各省学生考军校</text>
				</view>
			</view>

			<view class="back-btn" @click="goBack">返回</view>
		</view>
	</view>
</template>

<script>
export default {
	methods: {
		goBack() {
			uni.navigateBack();
		}
	}
};
</script>

<style scoped>
.teacher-page {
	min-height: 100vh;
	background: #f4f6fb;
}

.safe-top {
	height: var(--status-bar-height);
}

.page-body {
	padding: 18rpx 24rpx 30rpx;
}

.top-card {
	padding: 22rpx;
	border-radius: 22rpx;
	background: linear-gradient(135deg, #7344d1 0%, #4c2ea8 100%);
	color: #ffffff;
}

.top-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.teacher-info {
	display: flex;
	align-items: center;
	gap: 14rpx;
}

.avatar {
	width: 78rpx;
	height: 78rpx;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.22);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 34rpx;
	font-weight: 700;
}

.name {
	display: block;
	font-size: 34rpx;
	font-weight: 700;
}

.tags {
	margin-top: 10rpx;
	display: flex;
	gap: 10rpx;
	flex-wrap: wrap;
}

.tag {
	padding: 4rpx 10rpx;
	border-radius: 999rpx;
	background: rgba(255, 255, 255, 0.24);
	font-size: 20rpx;
}

.rating-row {
	margin-top: 16rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.stars {
	font-size: 26rpx;
	letter-spacing: 3rpx;
}

.update-time {
	font-size: 20rpx;
	opacity: 0.9;
}

.content-card {
	margin-top: 16rpx;
	padding: 20rpx;
	border-radius: 20rpx;
	background: #ffffff;
}

.section-title {
	display: inline-block;
	font-size: 30rpx;
	font-weight: 700;
	color: #3f2a85;
	padding-bottom: 8rpx;
	border-bottom: 4rpx solid #6a42c7;
}

.desc {
	display: block;
	margin-top: 14rpx;
	font-size: 25rpx;
	line-height: 1.7;
	color: #4f5d76;
}

.sub-section {
	margin-top: 18rpx;
}

.sub-title {
	display: block;
	font-size: 26rpx;
	font-weight: 700;
	color: #364665;
}

.sub-desc {
	display: block;
	margin-top: 8rpx;
	font-size: 24rpx;
	color: #5d6c84;
	line-height: 1.6;
}

.back-btn {
	margin-top: 24rpx;
	height: 76rpx;
	border-radius: 14rpx;
	background: #6a42c7;
	color: #ffffff;
	font-size: 28rpx;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
