193 lines
3.3 KiB
Vue
193 lines
3.3 KiB
Vue
<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>
|