添加页面

src/router/routes-teacher.ts

@@ -311,6 +311,13 @@ export default [
         meta: {
           title: '我的乐谱'
         }
+      },
+      {
+        path: '/teacherHome',
+        component: () => import('@/teacher/teacher-dependent/teacher-home'),
+        meta: {
+          title: '老师主页'
+        }
       }
     ]
   },

src/teacher/teacher-dependent/components/single.module.less

@@ -0,0 +1,102 @@
+.single {
+  margin-bottom: 20px;
+}
+.introduction {
+  font-size: 13px;
+  color: #666666;
+  line-height: 1.6;
+  padding-bottom: 15px;
+}
+
+.videoList {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+.itemBg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 89;
+}
+.videoItem {
+  width: 157px;
+  height: 106px;
+  background: #d8d8d8;
+  border-radius: 10px;
+  overflow: hidden;
+  position: relative;
+  margin-bottom: 10px;
+  .icon-upload {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: #fff;
+    z-index: 9;
+  }
+
+  .video {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    min-height: 100%;
+    background-color: #ccc;
+  }
+
+  :global {
+    .van-image {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+  }
+}
+
+.fansGroup {
+  padding: 0 0 25px !important;
+  &:last-child {
+    padding-bottom: 12px !important;
+  }
+  :global {
+    .van-cell__title,
+    .van-cell__value {
+      flex: 1 auto;
+    }
+  }
+
+  p {
+    font-size: 14px;
+    color: #999999;
+    line-height: 20px;
+    width: 160px;
+  }
+}
+
+.fansImage {
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.fansTitle {
+  padding-left: 12px;
+  font-size: 16px;
+  color: #1a1a1a;
+  line-height: 22px;
+  .title {
+    max-width: 160px;
+  }
+}
+
+.videoGroup {
+  width: 90%;
+  line-height: 0;
+}

src/teacher/teacher-dependent/components/single.tsx

@@ -0,0 +1,144 @@
+import SectionDetail from '@/business-components/section-detail'
+import ColVideo from '@/components/col-video'
+import request from '@/helpers/request'
+import { Button, Cell, Icon, Image, Popup } from 'vant'
+import { defineComponent } from 'vue'
+import styles from './single.module.less'
+import { postMessage } from '@/helpers/native-message'
+
+import iconUploadPoster from '@common/images/icon_upload_poster.png'
+import { browser } from '@/helpers/utils'
+
+export const getAssetsHomeFile = (fileName: string) => {
+  const path = `../images/${fileName}`
+  const modules = import.meta.globEager('../images/*')
+  return modules[path].default
+}
+
+export default defineComponent({
+  name: 'single',
+  props: {
+    userInfo: {
+      type: Object,
+      default: {}
+    }
+  },
+  data() {
+    const query = this.$route.query
+    return {
+      videoStatus: false,
+      chatStatus: false,
+      teacherId: query.teacherId,
+      fansList: [],
+      chatItem: {},
+      videoItem: {} as any,
+      isAddBrowse: false
+    }
+  },
+  async mounted() {
+    try {
+      const res = await request.post('/api-student/imGroup/queryTeacherGroup', {
+        data: {
+          type: 'FAN',
+          createUserId: this.teacherId
+        }
+      })
+      this.fansList = res.data || []
+    } catch {}
+  },
+  methods: {
+    async onPlay() {
+      try {
+        if (!this.isAddBrowse) {
+          return
+        }
+        await request.get('/api-student/teacher/addVideoBrowse', {
+          hideLoading: true,
+          params: {
+            videoId: this.videoItem.id
+          }
+        })
+        this.isAddBrowse = false
+      } catch {}
+    }
+  },
+  render() {
+    const userInfo = this.userInfo
+    return (
+      <div class={styles.single}>
+        {userInfo.introduction && (
+          <SectionDetail
+            icon="personal"
+            title="个人介绍"
+            size={24}
+            border={false}
+          >
+            <p class={styles.introduction}>{userInfo.introduction}</p>
+          </SectionDetail>
+        )}
+
+        {userInfo.styleVideo && userInfo.styleVideo.length > 0 && (
+          <SectionDetail
+            icon="elegant"
+            title="老师风采"
+            size={24}
+            border={false}
+          >
+            <div class={styles.videoList}>
+              {userInfo.styleVideo.map((item: any) => (
+                <div class={styles.videoItem}>
+                  <div
+                    class={styles.itemBg}
+                    onClick={() => {
+                      this.videoStatus = true
+                      this.isAddBrowse = true
+                      this.videoItem = item
+                    }}
+                  ></div>
+                  <Icon
+                    class={styles['icon-upload']}
+                    name={getAssetsHomeFile('icon_video.png')}
+                    size={26}
+                  />
+                  {/* <video width="100%" class={styles.video}>
+                    <source src={item.videoUrl} type="video/mp4" />
+                  </video> */}
+                  <Image src={item.cover || iconUploadPoster} fit="cover" />
+                </div>
+              ))}
+            </div>
+          </SectionDetail>
+        )}
+        <Popup
+          show={this.videoStatus}
+          round
+          class={styles.videoGroup}
+          closeable
+          onClose={() => {
+            this.videoStatus = false
+            this.isAddBrowse = false
+          }}
+        >
+          {this.videoStatus && (
+            <ColVideo
+              playsinline
+              onPlay={this.onPlay}
+              src={this.videoItem?.videoUrl + '#t=0.1'}
+            />
+          )}
+
+          {/* <video
+            style={{ height: '210px', width: '100%' }}
+            controls
+            class={styles.video}
+          >
+            <source
+              src={this.videoItem?.videoUrl + '#t=1,4'}
+              type="video/mp4"
+            />
+          </video> */}
+        </Popup>
+      </div>
+    )
+  }
+})

src/teacher/teacher-dependent/model/teacher-header.module.less

@@ -0,0 +1,355 @@
+.headerContent {
+  padding-top: 40px;
+  min-height: 100px;
+  position: relative;
+}
+.teacherContent {
+  display: flex;
+  // justify-content: space-between;
+  flex-shrink: 0;
+}
+.teacherIcon {
+  position: relative;
+  margin-top: -38px;
+  line-height: 0;
+  .avatar {
+    position: relative;
+    width: 78px;
+    height: 78px;
+    box-sizing: border-box;
+    border: 2px solid #fff;
+    background-color: #fff;
+  }
+  .avatarActive {
+    border-color: #ffe0b9;
+    background-color: #ffe0b9;
+  }
+  .teacherIconVip {
+    position: absolute;
+    bottom: 0;
+    right: -30px;
+    width: 46px;
+    height: 20px;
+  }
+}
+.teacherInfo {
+  display: flex;
+  align-items: center;
+  // padding: 14px 0;
+  padding-left: 46px;
+  .teacherInfoName {
+    font-size: 20px;
+    font-weight: 500;
+    color: #1a1a1a;
+    // line-height: 22px;
+    max-width: 150px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  & > img {
+    margin-left: 10px;
+    width: 39px;
+    height: 16px;
+  }
+}
+.teacherHonor {
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  line-height: 16px;
+  color: #666;
+  font-weight: 500;
+  padding-bottom: 12px;
+  padding-top: 10px;
+  .score {
+    margin-left: 25px;
+  }
+}
+
+.headerCount {
+  width: calc(100% - 28px);
+  padding: 12px;
+  margin: 0 auto;
+  background-color: #fff;
+  border-radius: 10px;
+  box-sizing: border-box;
+}
+
+.teacherOperation {
+  :global {
+    .van-button {
+      height: 28px;
+    }
+  }
+
+  .btn {
+    padding: 3px 12px 1px;
+    min-width: 62px;
+  }
+  .btnStar {
+    color: #f18400;
+    border-color: #f18400;
+  }
+}
+
+.subjectSection {
+  margin-right: 10px;
+  // height: 18px;
+  max-width: 68px;
+  box-sizing: content-box;
+}
+
+.teacher-bottom {
+  padding: 30px 0 0 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.followFans {
+  padding-top: 10px !important;
+}
+
+.teacher-data {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .teacher-data_item {
+    font-size: 14px;
+    color: #333333;
+    position: relative;
+    span {
+      font-weight: 500;
+      color: #000000;
+      font-size: 20px;
+      margin-left: 5px;
+    }
+    &::after {
+      content: ' ';
+      display: inline-block;
+      position: absolute;
+      right: 0px;
+      top: 2px;
+      width: 1px;
+      height: 16px;
+      background: #ebebeb;
+    }
+    &:first-child {
+      padding-right: 15px;
+      margin-right: 15px;
+    }
+    &:last-child {
+      &::after {
+        display: none;
+      }
+    }
+  }
+}
+
+.iconVip {
+  width: 34px !important;
+  margin-right: 5px;
+}
+
+.iconOther {
+  margin-left: 6px;
+  width: 18px;
+  height: 18px;
+}
+
+.teacher-info {
+  margin-left: 8px;
+  .teacher-name {
+    font-size: 18px;
+    font-weight: 500;
+    color: #1a1a1a;
+    padding-bottom: 6px;
+    display: flex;
+    justify-content: space-between;
+    .teacherCert {
+      display: flex;
+      align-items: center;
+    }
+
+    .teacherLast {
+      display: inline-block;
+      max-width: 120px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}
+
+.subjectList::-webkit-scrollbar {
+  display: none; /* Chrome Safari */
+}
+.subjectList {
+  overflow: auto;
+  width: 255px;
+  // height: 18px;
+  display: flex;
+  flex-wrap: nowrap;
+}
+
+.piNameSubject {
+  display: flex;
+  align-items: center;
+
+  .subject {
+    display: flex;
+    align-items: center;
+    margin-left: 4px;
+    background: #effbf9;
+    border-radius: 8px;
+    font-size: 12px;
+    line-height: 16px;
+    color: #2dc7aa;
+    padding: 0 5px;
+    white-space: nowrap;
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+}
+
+.rTitle {
+  display: flex;
+  align-items: center;
+  &::before {
+    margin-right: 8px;
+    content: ' ';
+    display: inline-block;
+    width: 4px;
+    height: 14px;
+    background: #2dc7aa;
+    border-radius: 3px;
+  }
+}
+
+.liveTag {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  line-height: 16px;
+  background: #ff6363;
+  border-radius: 20px;
+  text-align: center;
+  color: #fff;
+  font-size: 10px;
+  font-weight: 500;
+  padding: 2px 0;
+  width: 60%;
+  z-index: 10;
+}
+
+.teacherName {
+  display: inline-block;
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100px;
+}
+
+.teacherIcons {
+  display: flex;
+  align-items: center;
+}
+.teaherPopup {
+  background: transparent;
+  width: 276px;
+  overflow: initial;
+}
+.teacherIconWrap {
+  padding: 50px 22px 22px 22px;
+  background-color: #fff;
+  border-radius: 0 0 10px 10px;
+  margin-top: -25px;
+}
+.teacherIconItem {
+  margin-bottom: 16px;
+  .teacherIconItemTop {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+  :global {
+    .van-image {
+      margin-right: 8px;
+      width: 24px;
+      height: 24px;
+    }
+  }
+  .teacherIconTitle {
+    font-size: 16px;
+    font-weight: bold;
+    color: #333;
+  }
+  .teacherIconDes {
+    font-size: 12px;
+    line-height: 16px;
+    font-weight: 400;
+    padding-left: 3px;
+    color: #666;
+  }
+}
+.closeIcon {
+  position: absolute;
+  bottom: -54px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0.96rem;
+  height: 0.96rem;
+}
+.liveList {
+  padding: 12px 0;
+  .headerFollow {
+    margin-bottom: 12px;
+    .teacherIcon {
+      margin: 0 10px 0 0;
+    }
+    .score {
+      margin-left: 10px;
+    }
+    .teacherIconVip {
+      left: 50%;
+      right: initial;
+      transform: translateX(-50%);
+      bottom: -6px;
+    }
+    .liveTag {
+      // bottom: -30px;
+      width: 80%;
+    }
+    .avatar {
+      width: 60px;
+      height: 60px;
+    }
+    .piNameSubject {
+      align-items: flex-start;
+    }
+    .subjectList {
+      flex-wrap: wrap;
+    }
+    .subject {
+      margin: 2px 5px 3px 0;
+    }
+    .teacher-bottom {
+      padding-top: 24px;
+    }
+    .unlinkeBtn {
+      font-size: 12px;
+      color: #ff6363;
+      border: 1px solid #ff6363;
+      padding: 5px 10px;
+      border-radius: 20px;
+    }
+  }
+}
+.followContainer {
+  display: flex;
+  align-items: flex-start;
+}

src/teacher/teacher-dependent/model/teacher-header.tsx

@@ -0,0 +1,256 @@
+import { Button, Cell, Icon, Image, Popup, Rate, Toast } from 'vant'
+import { defineComponent } from 'vue'
+import styles from './teacher-header.module.less'
+import { postMessage } from '@/helpers/native-message'
+import iconTeacher from '@common/images/icon_teacher.png'
+import IconXueli from '@common/images/icon-xueli.png'
+import IconJiaozi from '@common/images/icon-jiaozi.png'
+
+export const getAssetsHomeFile = (fileName: string) => {
+  const path = `../images/${fileName}`
+  const modules = import.meta.globEager('../images/*')
+  return modules[path].default
+}
+
+export default defineComponent({
+  name: 'teacher-header',
+  props: {
+    userInfo: {
+      type: Object,
+      default: {}
+    },
+    teacherId: {
+      type: String || Number,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      iconShow: false
+    }
+  },
+  computed: {
+    subjectNameList() {
+      const userInfo: any = this.userInfo
+      const subjectName = userInfo.subjectName
+      return subjectName ? subjectName.split(',') : []
+    },
+    starGrade() {
+      const { starGrade } = this.userInfo as any
+      return Number(starGrade) || 0
+    }
+  },
+  methods: {
+    // 检验是否有对应徽章
+    checkBadge(type: string) {
+      // tag : 老师点亮图标
+      // STYLE:个人风采
+      // VIDEO：视频课
+      // LIVE：直播课，
+      // MUSIC：曲目 逗号隔开
+      let status = false
+      const { userInfo } = this
+      switch (type) {
+        case 'STYLE':
+        case 'VIDEO':
+        case 'LIVE':
+        case 'MUSIC':
+          if (userInfo.tag) {
+            status = userInfo.tag.indexOf(type) > -1
+          }
+          break
+        case 'VIP':
+          status = userInfo.isVip > 0
+          break
+        default:
+          status = false
+          break
+      }
+      return status
+    },
+
+    openTeacherIcon() {
+      this.iconShow = true
+    }
+  },
+  render() {
+    const iconList = [
+      {
+        icon: 'cert_active.png',
+        title: '演奏Mlog达人',
+        des: '个人风采中上传老师风采视频并通过审核'
+      },
+      {
+        icon: 'video_active.png',
+        title: '教学视频达人',
+        des: '发布您制作的教学视频课程并通过审核'
+      },
+      {
+        icon: 'live_active.png',
+        title: '直播up达人',
+        des: '达到开通直播权限标准并开通直播功能'
+      },
+      {
+        icon: 'music_active.png',
+        title: '乐谱歌单达人',
+        des: '上传您制作的乐谱并通过审核'
+      }
+    ]
+    return (
+      <>
+        <div class={styles.headerContent}>
+          <div class={styles.headerCount}>
+            <div class={styles.teacherContent}>
+              <div
+                class={styles.teacherIcon}
+                onClick={() => {
+                  // 判断是否在直播中
+                  if (this.userInfo.liveing === 1) {
+                    postMessage({
+                      api: 'joinLiveRoom',
+                      content: {
+                        roomId: this.userInfo.roomUid,
+                        teacherId: this.userInfo.userId
+                      }
+                    })
+                  }
+                }}
+              >
+                {/* iy */}
+                <Image
+                  class={[
+                    styles.avatar,
+                    this.checkBadge('VIP') && styles.avatarActive
+                  ]}
+                  round
+                  src={this.userInfo.heardUrl || iconTeacher}
+                  fit="cover"
+                />
+
+                {this.userInfo.liveing === 1 && (
+                  <p class={styles.liveTag}>直播中</p>
+                )}
+
+                <Image
+                  class={styles.teacherIconVip}
+                  src={
+                    this.checkBadge('VIP')
+                      ? getAssetsHomeFile('vip_active.png')
+                      : getAssetsHomeFile('vip_default.png')
+                  }
+                />
+              </div>
+              <div class={styles.teacherInfo}>
+                <div class={styles.teacherInfoName}>
+                  {this.userInfo.username ||
+                    `游客${this.userInfo.userId || ''}`}
+                </div>
+                {this.userInfo.degreeFlag ? <img src={IconXueli} /> : null}
+                {this.userInfo.teacherFlag ? <img src={IconJiaozi} /> : null}
+              </div>
+            </div>
+
+            <div class={styles.teacherHonor}>
+              <div>勋章：</div>
+              <div class={styles.teacherIcons} onClick={this.openTeacherIcon}>
+                <Image
+                  class={styles.iconOther}
+                  src={
+                    this.checkBadge('STYLE')
+                      ? getAssetsHomeFile('cert_active.png')
+                      : getAssetsHomeFile('cert_default.png')
+                  }
+                />
+                <Image
+                  class={styles.iconOther}
+                  src={
+                    this.checkBadge('VIDEO')
+                      ? getAssetsHomeFile('video_active.png')
+                      : getAssetsHomeFile('video_default.png')
+                  }
+                />
+                <Image
+                  class={styles.iconOther}
+                  src={
+                    this.checkBadge('LIVE')
+                      ? getAssetsHomeFile('live_active.png')
+                      : getAssetsHomeFile('live_default.png')
+                  }
+                />
+                <Image
+                  class={styles.iconOther}
+                  src={
+                    this.checkBadge('MUSIC')
+                      ? getAssetsHomeFile('music_active.png')
+                      : getAssetsHomeFile('music_default.png')
+                  }
+                />
+              </div>
+              <div class={styles.score}>评分：</div>
+              <div class={styles.level}>
+                {this.starGrade ? (
+                  <Rate
+                    readonly
+                    modelValue={this.starGrade}
+                    iconPrefix="iconfont"
+                    color="#FFC459"
+                    void-icon="star_default"
+                    icon="star_active"
+                    size={15}
+                  />
+                ) : (
+                  <span style={{ fontSize: '12px', color: '#999999' }}>
+                    暂无评分
+                  </span>
+                )}
+              </div>
+            </div>
+            <div class={styles.piNameSubject}>
+              <Image
+                class={styles.subjectSection}
+                src={getAssetsHomeFile('icon_subject.png')}
+                fit="contain"
+              />
+              <div class={styles.subjectList}>
+                {this.subjectNameList.map((item: any) => (
+                  <span class={styles.subject}>{item}</span>
+                ))}
+              </div>
+            </div>
+            <div class={styles['teacher-bottom']}>
+              <div class={styles['teacher-data']}>
+                <div class={styles['teacher-data_item']}>
+                  粉丝 <span>{this.userInfo.fansNum || 0}</span>
+                </div>
+                <div class={styles['teacher-data_item']}>
+                  已上课时 <span>{this.userInfo.expTime || 0}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <Popup class={styles['teaherPopup']} v-model:show={this.iconShow}>
+          <Image src={getAssetsHomeFile('teacher-icon.png')} />
+          <div class={styles.teacherIconWrap}>
+            {iconList.map(n => {
+              return (
+                <div class={styles.teacherIconItem}>
+                  <div class={styles.teacherIconItemTop}>
+                    <Image src={getAssetsHomeFile(n.icon)} />
+                    <div class={styles.teacherIconTitle}>{n.title}</div>
+                  </div>
+                  <div class={styles.teacherIconDes}>{n.des}</div>
+                </div>
+              )
+            })}
+          </div>
+          <Image
+            onClick={() => (this.iconShow = false)}
+            class={styles.closeIcon}
+            src={getAssetsHomeFile('icon-close.png')}
+          />
+        </Popup>
+      </>
+    )
+  }
+})

src/teacher/teacher-dependent/teacher-home.module.less

@@ -0,0 +1,46 @@
+.teacher-record {
+  min-height: 100vh;
+  background-color: #F8F9FC;
+  position: relative;
+  overflow: hidden;
+
+  :global {
+    .van-nav-bar{
+      transition: all .3s;
+    }
+    .van-tab {
+      margin-top: 12px;
+      margin-bottom: 5px;
+      padding: 0 14px;
+    }
+    .van-tab--active {
+      font-size: 16px !important;
+      color: #333333;
+    }
+    .van-button--plain.van-button--primary {
+      background-color: transparent;
+    }
+  }
+}
+.bgImg{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 188px;
+  object-fit: cover;
+}
+.bg{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 188px;
+  background-color: rgba(0, 0, 0, .6);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+.teacherHeader {
+  position: relative;
+  z-index: 10;
+}

src/teacher/teacher-dependent/teacher-home.tsx

@@ -0,0 +1,88 @@
+import ColHeader from '@/components/col-header'
+import { defineComponent } from 'vue'
+import styles from './teacher-home.module.less'
+import Single from './components/single'
+import request from '@/helpers/request'
+import { listenerMessage } from '@/helpers/native-message'
+import { useEventListener, useWindowScroll } from '@vueuse/core'
+import TeacherHeader from './model/teacher-header'
+import { useRect } from '@vant/use'
+
+export default defineComponent({
+  name: 'teacherHome',
+  data() {
+    // 先取session中的数据，没有再取参数，默认为老师风采
+    const tabs = sessionStorage.getItem('teacherHomeTabs') || ''
+    const query = this.$route.query
+    return {
+      teacherId: query.teacherId as string,
+      tabs: tabs || query.tabs || 'single',
+      userInfo: {} as any,
+      background: 'rgba(55, 205, 177, 0)',
+      headColor: '#fff',
+      height: 'auto' as any,
+      backIconColor: 'white',
+      homeContaiterHeight: ''
+    }
+  },
+  async created() {},
+  async mounted() {
+    this.getTeacherDetail()
+    // 监听页面返回
+    listenerMessage('webViewOnResume', () => {
+      this.getTeacherDetail()
+    })
+    useEventListener(document, 'scroll', evt => {
+      const { y } = useWindowScroll()
+      // this.background = `rgba(255, 255, 255, ${y.value / 100})`
+      // console.log(y.value) 142
+      if (y.value > 52) {
+        this.headColor = '#000'
+        this.background = '#fff'
+        this.backIconColor = 'black'
+      } else {
+        this.background = 'transparent'
+        this.headColor = '#fff'
+        this.backIconColor = 'white'
+      }
+    })
+  },
+  methods: {
+    async getTeacherDetail() {
+      try {
+        const res = await request.get('/api-student/teacher/queryTeacherHome', {
+          params: {
+            userId: this.teacherId
+          }
+        })
+        this.userInfo = res.data
+      } catch {}
+    }
+  },
+  render() {
+    return (
+      <div class={styles['teacher-record']}>
+        <div ref="headers">
+          <ColHeader
+            background={this.background}
+            border={false}
+            color={this.headColor}
+            backIconColor={this.backIconColor as any}
+            onHeaderBack={() => {
+              this.$nextTick(() => {
+                const { height } = useRect((this as any).$refs.headers)
+                this.height = height
+              })
+            }}
+          />
+        </div>
+        <img class={styles.bgImg} src={this.userInfo.heardUrl} />
+        <div class={styles.bg}></div>
+        <div class={styles.teacherHeader}>
+          <TeacherHeader userInfo={this.userInfo} teacherId={this.teacherId} />
+        </div>
+        <Single userInfo={this.userInfo} />
+      </div>
+    )
+  }
+})