添加标签

src/business-components/user-detail/index.module.less

@@ -10,10 +10,11 @@
     overflow: hidden;
 
     .avatar {
-      width: 24px;
-      height: 24px;
+      width: 40px;
+      height: 40px;
       border-radius: 50%;
       overflow: hidden;
+      flex-shrink: 0;
     }
 
     .name {
@@ -30,6 +31,12 @@
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
+      .userHonor{
+        width: 39px;
+        height: 16px;
+        margin-top: 4px;
+        margin-right: 6px;
+      }
     }
 
     .buyNum {
@@ -48,10 +55,9 @@
     }
 
     .buyNumInfo {
-      font-size: 12px;
-      color: #6a6a6a;
-      display: flex;
-      align-items: center;
+      font-size: 14px;
+      line-height: 20px;
+      color: #FF802C;
       .iconBuy {
         margin-right: 5px;
       }
@@ -62,6 +68,16 @@
       font-weight: 600;
       color: var(--van-primary);
       line-height: 17px;
+      .infoPrice{
+        font-size: 16px;
+        font-weight: bold;
+        color: #FA6400;
+      }
+      .infoNum{
+        font-size: 14px;
+        color: #999;
+        font-weight: 400;
+      }
     }
 
     .userTitle {
@@ -75,17 +91,14 @@
         padding: 12px 14px;
       }
       .van-cell__title {
-        flex-basis: 60%;
-      }
-      .van-cell__title,
-      .van-cell__value {
         display: flex;
         align-items: center;
       }
 
       .van-cell__value {
-        flex-basis: 40%;
-        justify-content: flex-end;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
       }
 
       .van-cell__label {

src/business-components/user-detail/index.tsx

@@ -6,6 +6,9 @@ import iconUserNum from '@common/images/icon_user_num.png'
 import defaultIcon from '@common/images/icon_teacher.png'
 import iconTimer from '@common/images/icon_timer2.png'
 
+import IconXueli from '@common/images/icon-xueli.png'
+import IconJiaozi from '@common/images/icon-jiaozi.png'
+
 /**
  * @description: 视频详情
  * @param {type} headUrl 头像
@@ -98,44 +101,56 @@ export default defineComponent({
               title: () => (
                 <div class={styles.name}>
                   <div class={styles.username}>
-                    {this.userInfo.username || `游客${this.userInfo.id || ''}`}
+                    <div>
+                      {this.userInfo.username ||
+                        `游客${this.userInfo.id || ''}`}
+                    </div>
+                    <div style={{ lineHeight: 0 }}>
+                      {(this.userInfo as any).isDegree && <img class={styles.userHonor} src={IconXueli} />}
+                      {(this.userInfo as any).isTeacher && (
+                        <img class={styles.userHonor} src={IconJiaozi} />
+                      )}
+                    </div>
                   </div>
-                  {this.showType === 'TIME' ? (
-                    <Tag
-                      style={{ marginLeft: '8px' }}
-                      color="#FFF1DE"
-                      textColor="#FF9300"
-                    >
-                      {this.userInfo.lessonNum}课时
-                    </Tag>
-                  ) : (
-                    this.showBuy && (
-                      <div class={styles.buyNum}>
-                        {this.userInfo.buyNum}人已购买
-                      </div>
-                    )
-                  )}
                 </div>
               ),
-              value: () =>
-                this.showType === 'TIME' ? (
-                  <div class={styles.buyNumInfo}>
-                    <Icon name={iconUserNum} size={14} class={styles.iconBuy} />{' '}
-                    已购 {this.userInfo.buyNum} 人
-                  </div>
-                ) : (
+              // value: () =>
+              //   this.showType === 'TIME' ? (
+              //     <div class={styles.buyNumInfo}>
+              //       <Icon name={iconUserNum} size={14} class={styles.iconBuy} />{' '}
+              //       已购 {this.userInfo.buyNum} 人
+              //     </div>
+              //   ) : (
+              //     <div class={styles.info}>
+              //       {/* 0元不显示，为了处理ios审核问题 */}
+              //       {this.userInfo.lessonPrice > 0 && (
+              //         <>￥{this.userInfo.lessonPrice}/</>
+              //       )}
+              //       {this.userInfo.lessonPrice <= 0 &&
+              //         this.userInfo.auditVersion!==0 && <>￥{0}/</>}
+              //       {this.userInfo.lessonPrice <= 0 &&
+              //         this.userInfo.auditVersion===0 && <>免费/</>}
+              //       {this.userInfo.lessonNum}课时
+              //     </div>
+              //   )
+              value: () => (
+                <>
                   <div class={styles.info}>
                     {/* 0元不显示，为了处理ios审核问题 */}
                     {this.userInfo.lessonPrice > 0 && (
-                      <>￥{this.userInfo.lessonPrice}/</>
+                      <span class={styles.infoPrice}>￥{this.userInfo.lessonPrice}</span>
                     )}
                     {this.userInfo.lessonPrice <= 0 &&
-                      this.userInfo.auditVersion!==0 && <>￥{0}/</>}
+                      this.userInfo.auditVersion !== 0 && <span class={styles.infoPrice}>￥{0}</span>}
                     {this.userInfo.lessonPrice <= 0 &&
-                      this.userInfo.auditVersion===0 && <>免费/</>}
-                    {this.userInfo.lessonNum}课时
+                      this.userInfo.auditVersion === 0 && <span class={styles.infoPrice}>免费</span>}
+                    <span class={styles.infoNum}> / {this.userInfo.lessonNum}课时</span>
                   </div>
-                )
+                  <div class={styles.buyNumInfo}>
+                    {this.userInfo.buyNum}人已购买
+                  </div>
+                </>
+              )
             }}
           ></Cell>
         </CellGroup>

src/student/live-class/live-detail.tsx

@@ -49,7 +49,9 @@ export default defineComponent({
         lessonDesc: live.courseIntroduce,
         lessonCoverUrl: live.backgroundPic || live.backgroundPicTemplate,
         lessonName: live.courseGroupName,
-        auditVersion: live.auditVersion || 0
+        auditVersion: live.auditVersion || 0,
+        isDegree: live.teachertTag?.includes('DEGREE') || false,
+        isTeacher: live.teachertTag?.includes('TEACHER') || false
       }
     },
     courseInfo() {

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

@@ -1,22 +1,75 @@
 .headerContent {
+  padding-top: 40px;
+  padding-bottom: 20px;
   min-height: 100px;
-  margin-bottom: 100px;
   position: relative;
 }
-
-.teacherFollow {
-  background: #f7f8f9;
-  overflow: hidden;
+.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;
+  .teacherInfoName {
+    font-size: 20px;
+    font-weight: 500;
+    color: #1a1a1a;
+    line-height: 18px;
+  }
+  & > 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 {
-  position: absolute;
-  bottom: -100px;
-  margin: 12px 14px 0;
   width: calc(100% - 28px);
-  background-color: rgba(255, 255, 255, 0.7);
+  padding: 12px;
+  margin: 0 auto;
+  background-color: #fff;
   border-radius: 10px;
-  overflow: hidden;
-  height: 161px;
+  box-sizing: border-box;
 }
 
 .teacherOperation {
@@ -31,43 +84,14 @@
   }
 }
 
-.headerFollow {
-  position: relative;
-  bottom: 0;
-}
-
-.open-teacher-info {
-  width: auto;
-  background-color: transparent !important;
-  padding: 14px 11px !important;
-  .userLogo {
-    width: 58px;
-    height: 58px;
-    border-radius: 50%;
-    overflow: hidden;
-  }
-  :global {
-    .van-cell__value {
-      // display: flex;
-      // align-items: center;
-      // justify-content: space-between;
-    }
-  }
-
-  .level {
-    line-height: 1;
-  }
-}
-
 .subjectSection {
-  padding-left: 16px;
-  padding-right: 5px;
+  padding-right: 10px;
   height: 18px;
   max-width: 70px;
 }
 
 .teacher-bottom {
-  padding: 5px 11px;
+  padding: 30px 0 0 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -85,7 +109,8 @@
     span {
       font-weight: 500;
       color: #000000;
-      font-size: 17px;
+      font-size: 20px;
+      margin-left: 5px;
     }
     &::after {
       content: ' ';
@@ -157,7 +182,6 @@
 .piNameSubject {
   display: flex;
   align-items: center;
-  margin-bottom: 12px;
 
   .subject {
     margin-left: 5px;
@@ -191,16 +215,18 @@
 .liveTag {
   position: absolute;
   bottom: 0;
-  left: 9%;
+  left: 50%;
+  transform: translateX(-50%);
   line-height: 16px;
   background: #ff6363;
-  border-radius: 8px;
+  border-radius: 20px;
   text-align: center;
   color: #fff;
   font-size: 10px;
   font-weight: 500;
   padding: 2px 0;
-  width: 82%;
+  width: 60%;
+  z-index: 10;
 }
 
 .teacherName {
@@ -262,3 +288,53 @@
   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: 0 5px 5px 0;
+    }
+    .teacher-bottom {
+      padding-top: 24px;
+    }
+    .unlinkeBtn {
+      font-size: 12px;
+      color: #FF6363;
+      border: 1px solid #FF6363;
+      padding: 5px 10px;
+      border-radius: 20px;
+      font-weight: bold;
+    }
+  }
+}
+.followContainer {
+  display: flex;
+  align-items: flex-start;
+}

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

@@ -3,9 +3,9 @@ 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 musicCert from '@common/images/music_cert.png'
-// import teacherCert from '@common/images/teacher_cert.png'
 import request from '@/helpers/request'
+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}`
@@ -39,6 +39,10 @@ export default defineComponent({
     starGrade() {
       const { starGrade } = this.userInfo as any
       return Number(starGrade) || 0
+    },
+
+    tags() {
+      return this.userInfo.tag?.split(',') || []
     }
   },
   methods: {
@@ -120,133 +124,41 @@ export default defineComponent({
       <>
         <div class={styles.headerContent}>
           <div class={styles.headerCount}>
-            <Cell
-              class={styles['open-teacher-info']}
-              border={false}
-              center
-              v-slots={{
-                icon: () => (
-                  <div
-                    style={{ position: 'relative', lineHeight: 0 }}
-                    onClick={() => {
-                      // 判断是否在直播中
-                      if (this.userInfo.liveing === 1) {
-                        postMessage({
-                          api: 'joinLiveRoom',
-                          content: {
-                            roomId: this.userInfo.roomUid,
-                            teacherId: this.userInfo.userId
-                          }
-                        })
+            <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
                       }
-                    }}
-                  >
-                    <Image
-                      class={styles.userLogo}
-                      src={this.userInfo.heardUrl || iconTeacher}
-                      fit="cover"
-                    />
-                    {this.userInfo.liveing === 1 && (
-                      <p class={styles.liveTag}>直播中</p>
-                    )}
-                  </div>
-                )
-              }}
-            >
-              <div class={styles['teacher-info']}>
-                <div class={styles['teacher-name']}>
-                  <div class={styles.teacherCert}>
-                    <span class={styles.teacherLast}>
-                      {this.userInfo.username ||
-                        `游客${this.userInfo.userId || ''}`}
-                    </span>
+                    })
+                  }
+                }}
+              >
+                <Image
+                  class={[styles.avatar, this.checkBadge('VIP') && styles.avatarActive]}
+                  round
+                  src={this.userInfo.heardUrl || iconTeacher}
+                  fit="cover"
+                />
 
-                    <Image
-                      class={styles.iconVip}
-                      src={
-                        this.checkBadge('VIP')
-                          ? getAssetsHomeFile('vip_active.png')
-                          : getAssetsHomeFile('vip_default.png')
-                      }
-                    />
-                    <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>
-                </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>
-            </Cell>
-            <p 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>
-            </p>
-            <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>
+                {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.teacherOperation}>
                 <Button
@@ -282,6 +194,90 @@ export default defineComponent({
                 </Button>
               </div>
             </div>
+            <div class={styles.teacherInfo}>
+              <div class={styles.teacherInfoName}>
+                {this.userInfo.username || `游客${this.userInfo.userId || ''}`}
+              </div>
+              {this.tags.includes('TEACHER') && <img src={IconXueli} />}
+              {this.tags.includes('DEGREE') && <img src={IconJiaozi} />}
+            </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}>

src/student/teacher-dependent/teacher-follow.tsx

@@ -8,6 +8,8 @@ import request from '@/helpers/request'
 import ColResult from '@/components/col-result'
 import { postMessage } from '@/helpers/native-message'
 import ColSearch from '@/components/col-search'
+import IconXueli from '@common/images/icon-xueli.png'
+import IconJiaozi from '@common/images/icon-jiaozi.png'
 import dayjs from 'dayjs'
 export const getAssetsHomeFile = (fileName: string) => {
   const path = `./images/${fileName}`
@@ -122,6 +124,10 @@ export default defineComponent({
             status = false
           }
           break
+        case 'DEGREE':
+        case 'TEACHER':
+          status = item.tag.includes(type)
+          break
         default:
           status = false
           break
@@ -158,66 +164,65 @@ export default defineComponent({
                   })
                 }}
               >
-                <Cell
-                  class={styles['open-teacher-info']}
-                  border={false}
-                  center
-                  v-slots={{
-                    icon: () => (
-                      <div style={{ position: 'relative', lineHeight: 0 }}>
-                        <Image
-                          class={styles.userLogo}
-                          src={item.avatar || iconTeacher}
-                          fit="cover"
-                        />
-                        {item.liveFlag === 1 && (
-                          <p
-                            class={styles.liveTag}
-                            onClick={(e: MouseEvent) => {
-                              e.stopPropagation()
-                              postMessage({
-                                api: 'joinLiveRoom',
-                                content: {
-                                  roomId: item.roomUid,
-                                  teacherId: item.userId
-                                }
-                              })
-                            }}
-                          >
-                            直播中
-                          </p>
-                        )}
-                      </div>
-                    ),
-                    'right-icon': () => (
-                      <Icon
-                        name="like"
-                        color="#FF6363"
-                        size={18}
-                        onClick={(e: MouseEvent) => {
+                <div class={styles.followContainer}>
+                  <div class={styles.teacherContent}>
+                    <div
+                      class={styles.teacherIcon}
+                      onClick={e => {
+                        // 判断是否在直播中
+                        if (item.liveFlag === 1) {
                           e.stopPropagation()
-                          this.onUnLike(item)
-                        }}
+                          postMessage({
+                            api: 'joinLiveRoom',
+                            content: {
+                              roomId: item.roomUid,
+                              teacherId: item.userId
+                            }
+                          })
+                        }
+                      }}
+                    >
+                      <Image
+                        class={[
+                          styles.avatar,
+                          this.checkBadge('VIP', item.teacher) &&
+                            styles.avatarActive
+                        ]}
+                        round
+                        src={item.avatar || iconTeacher}
+                        fit="cover"
                       />
-                    )
-                  }}
-                >
-                  <div class={styles['teacher-info']}>
-                    <div class={styles['teacher-name']}>
-                      <div class={styles.teacherCert}>
-                        {/* flex: 1; white-space: nowrap; overflow: hidden;
-                        text-overflow: ellipsis; max-width: 100px; */}
-                        <span class={styles.teacherName}>
-                          {item.userName || `游客${item.userId || ''}`}
-                        </span>
-                        <Image
-                          class={styles.iconVip}
-                          src={
-                            this.checkBadge('VIP', item.teacher)
-                              ? getAssetsHomeFile('vip_active.png')
-                              : getAssetsHomeFile('vip_default.png')
-                          }
-                        />
+
+                      {item.liveFlag === 1 && (
+                        <p class={styles.liveTag}>直播中</p>
+                      )}
+
+                      <Image
+                        class={styles.teacherIconVip}
+                        src={
+                          this.checkBadge('VIP', item.teacher)
+                            ? getAssetsHomeFile('vip_active.png')
+                            : getAssetsHomeFile('vip_default.png')
+                        }
+                      />
+                    </div>
+                  </div>
+
+                  <div>
+                    <div class={styles.teacherInfo}>
+                      <div class={styles.teacherInfoName}>
+                        {item.userName || `游客${item.userId || ''}`}
+                      </div>
+                      {this.checkBadge('TEACHER', item.teacher) && (
+                        <img src={IconXueli} />
+                      )}
+                      {this.checkBadge('DEGREE', item.teacher) && (
+                        <img src={IconJiaozi} />
+                      )}
+                    </div>
+                    <div class={styles.teacherHonor}>
+                      <div>勋章:</div>
+                      <div class={styles.teacherIcons}>
                         <Image
                           class={styles.iconOther}
                           src={
@@ -251,38 +256,41 @@ export default defineComponent({
                           }
                         />
                       </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.level}>
-                      {item.starGrade ? (
-                        <Rate
-                          readonly
-                          modelValue={item.starGrade}
-                          iconPrefix="iconfont"
-                          color="#FFC459"
-                          void-icon="star_default"
-                          icon="star_active"
-                          size={15}
-                        />
-                      ) : (
-                        <span style={{ fontSize: '12px', color: '#999999' }}>
-                          暂无评分
-                        </span>
-                      )}
+                    <div class={styles.piNameSubject}>
+                      <Image
+                        class={styles.subjectSection}
+                        src={getAssetsHomeFile('icon_subject.png')}
+                        fit="contain"
+                      />
+                      <div class={styles.subjectList}>
+                        {this.getSubjectNameList(item.subjectName).map(
+                          (item: any) => (
+                            <span class={styles.subject}>{item}</span>
+                          )
+                        )}
+                      </div>
                     </div>
                   </div>
-                </Cell>
-                <p class={styles.piNameSubject}>
-                  <Image
-                    class={styles.subjectSection}
-                    src={getAssetsHomeFile('icon_subject.png')}
-                    fit="contain"
-                  />
-                  {this.getSubjectNameList(item.subjectName).map(
-                    (item: any) => (
-                      <span class={styles.subject}>{item}</span>
-                    )
-                  )}
-                </p>
+                </div>
                 <div class={styles['teacher-bottom']}>
                   <div class={styles['teacher-data']}>
                     <div class={styles['teacher-data_item']}>
@@ -292,6 +300,15 @@ export default defineComponent({
                       已上课时 <span>{item.expTime || 0}</span>
                     </div>
                   </div>
+                  <div
+                    class={styles.unlinkeBtn}
+                    onClick={(e: MouseEvent) => {
+                      e.stopPropagation()
+                      this.onUnLike(item)
+                    }}
+                  >
+                    取消关注
+                  </div>
                 </div>
               </div>
             ))}

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

@@ -1,6 +1,6 @@
 .teacher-record {
   min-height: 100vh;
-  background-color: #f8f9fc;
+  background-color: #F8F9FC;
   position: relative;
   overflow: hidden;
 
@@ -19,19 +19,25 @@
     }
   }
 }
-// .headContainer {
-//   position: relative;
-//   min-height: 270px;
-// }
+.bgImg{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 143px;
+  object-fit: cover;
+}
+.bg{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 143px;
+  background-color: rgba(0, 0, 0, .6);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
 .teacherHeader {
-  // linear-gradient(
-  //   0deg,
-  //   rgba(127, 246, 220, 0) 0%,
-  //   #6cebd3 27%,
-  //   #2dc7aa 100%,
-  //   #2dc7aa 100%
-  // )
-  background: url('./images/head_bg.png') no-repeat top center #f8f9fc;
-  background-size: cover;
-  overflow: hidden;
+  position: relative;
+  z-index: 10;
 }

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

@@ -29,7 +29,7 @@ export default defineComponent({
       teacherId: query.teacherId as string,
       tabs: tabs || query.tabs || 'single',
       userInfo: {} as any,
-      background: 'transparent',
+      background: 'rgba(55, 205, 177, 0)',
       height: 'auto' as any
     }
   },
@@ -42,11 +42,12 @@ export default defineComponent({
     })
     useEventListener(document, 'scroll', evt => {
       const { y } = useWindowScroll()
-      if (y.value > 45) {
-        this.background = '#37cdb1'
-      } else {
-        this.background = 'transparent'
-      }
+      this.background = `rgba(55, 205, 177, ${y.value / 100})`
+      // if (y.value > 45) {
+      //   this.background = '#37cdb1'
+      // } else {
+      //   this.background = 'transparent'
+      // }
     })
   },
   methods: {
@@ -64,21 +65,23 @@ export default defineComponent({
   render() {
     return (
       <div class={styles['teacher-record']}>
+        <div ref="headers">
+          <ColHeader
+            background={this.background}
+            border={false}
+            color="#fff"
+            backIconColor="white"
+            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}>
-          <div ref="headers">
-            <ColHeader
-              background={this.background}
-              border={false}
-              color="#fff"
-              backIconColor="white"
-              onHeaderBack={() => {
-                this.$nextTick(() => {
-                  const { height } = useRect((this as any).$refs.headers)
-                  this.height = height
-                })
-              }}
-            />
-          </div>
           <TeacherHeader userInfo={this.userInfo} teacherId={this.teacherId} />
         </div>
         <Tabs

src/student/video-class/video-detail.tsx

@@ -50,7 +50,9 @@ export default defineComponent({
           lessonPrice: lessonGroup.lessonPrice,
           teacherId: lessonGroup.teacherId,
           lessonCoverUrl: lessonGroup.lessonCoverUrl,
-          auditVersion: lessonGroup.auditVersion
+          auditVersion: lessonGroup.auditVersion,
+          isDegree: lessonGroup.teachertTag?.includes('DEGREE') || false,
+          isTeacher: lessonGroup.teachertTag?.includes('TEACHER') || false
         }
         this.detailList = result.detailList || []
       } catch {