修改

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

@@ -114,5 +114,9 @@
       border-radius: var(--van-popup-round-border-radius);
       overflow: hidden;
     }
+
+    .video-js {
+      border-radius: var(--van-popup-round-border-radius);
+    }
   }
-}
+}

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

@@ -1,149 +1,149 @@
-import ColHeader from '@/components/col-header'
-import { defineComponent } from 'vue'
-import styles from './teacher-home.module.less'
-import { Tab, Tabs } from 'vant'
-import Single from './components/single'
-import Practice from './components/practice'
-import Live from './components/live'
-import VideoList from './components/video'
-import Music from './components/music'
-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'
-import { useEventTracking } from '@/helpers/hooks'
-
-export const getAssetsHomeFile = (fileName: string) => {
-  const path = `./images/${fileName}`
-  const modules = import.meta.globEager('./images/*')
-  return modules[path].default
-}
-
-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'
-      }
-    })
-    useEventTracking('达人风采')
-  },
-  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
-                // this.homeContaiterHeight = `calc(100vh - var(--van-tabs-line-height) - ${height}px - 15px)`
-              })
-            }}
-          />
-        </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>
-        <Tabs
-          color="var(--van-primary)"
-          background="#f8f9fc"
-          shrink
-          lineWidth={20}
-          sticky
-          offsetTop={this.height}
-          v-model:active={this.tabs}
-          onChange={() => {
-            sessionStorage.setItem('teacherHomeTabs', this.tabs as string)
-          }}
-        >
-          <Tab title="个人风采" name="single">
-            <div style={{ minHeight: this.homeContaiterHeight }}>
-              {this.tabs === 'single' && <Single userInfo={this.userInfo} />}
-            </div>
-          </Tab>
-          <Tab title="陪练课" name="practice">
-            <div style={{ minHeight: this.homeContaiterHeight }}>
-              {this.tabs === 'practice' && (
-                <Practice userInfo={this.userInfo} />
-              )}
-            </div>
-          </Tab>
-          <Tab title="直播课" name="live">
-            <div style={{ minHeight: this.homeContaiterHeight }}>
-              {this.tabs === 'live' && <Live />}
-            </div>
-          </Tab>
-          <Tab title="视频课" name="video">
-            <div style={{ minHeight: this.homeContaiterHeight }}>
-              {this.tabs === 'video' && <VideoList />}
-            </div>
-          </Tab>
-          <Tab title="乐谱" name="music">
-            <div style={{ minHeight: this.homeContaiterHeight }}>
-              {this.tabs === 'music' && <Music />}
-            </div>
-          </Tab>
-        </Tabs>
-
-        {/* <div class={styles.container}>
-          {this.tabs === 'single' && <Single userInfo={this.userInfo} />}
-          {this.tabs === 'practice' && <Practice userInfo={this.userInfo} />}
-          {this.tabs === 'live' && <Live />}
-          {this.tabs === 'video' && <VideoList />}
-          {this.tabs === 'music' && <Music />}
-        </div> */}
-      </div>
-    )
-  }
-})
+import ColHeader from '@/components/col-header'
+import { defineComponent } from 'vue'
+import styles from './teacher-home.module.less'
+import { Tab, Tabs } from 'vant'
+import Single from './components/single'
+import Practice from './components/practice'
+import Live from './components/live'
+import VideoList from './components/video'
+import Music from './components/music'
+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'
+import { useEventTracking } from '@/helpers/hooks'
+
+export const getAssetsHomeFile = (fileName: string) => {
+  const path = `./images/${fileName}`
+  const modules = import.meta.globEager('./images/*')
+  return modules[path].default
+}
+
+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'
+      }
+    })
+    useEventTracking('达人风采')
+  },
+  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
+                // this.homeContaiterHeight = `calc(100vh - var(--van-tabs-line-height) - ${height}px - 15px)`
+              })
+            }}
+          />
+        </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>
+        <Tabs
+          color="var(--van-primary)"
+          background="#f8f9fc"
+          shrink
+          lineWidth={20}
+          sticky
+          offsetTop={this.height}
+          v-model:active={this.tabs}
+          onChange={() => {
+            sessionStorage.setItem('teacherHomeTabs', this.tabs as string)
+          }}
+        >
+          <Tab title="个人风采" name="single">
+            <div style={{ minHeight: this.homeContaiterHeight }}>
+              {this.tabs === 'single' && <Single userInfo={this.userInfo} />}
+            </div>
+          </Tab>
+          <Tab title="陪练课" name="practice">
+            <div style={{ minHeight: this.homeContaiterHeight }}>
+              {this.tabs === 'practice' && (
+                <Practice userInfo={this.userInfo} />
+              )}
+            </div>
+          </Tab>
+          <Tab title="直播课" name="live">
+            <div style={{ minHeight: this.homeContaiterHeight }}>
+              {this.tabs === 'live' && <Live />}
+            </div>
+          </Tab>
+          <Tab title="视频课" name="video">
+            <div style={{ minHeight: this.homeContaiterHeight }}>
+              {this.tabs === 'video' && <VideoList />}
+            </div>
+          </Tab>
+          <Tab title="乐谱" name="music">
+            <div style={{ minHeight: this.homeContaiterHeight }}>
+              {this.tabs === 'music' && <Music />}
+            </div>
+          </Tab>
+        </Tabs>
+
+        {/* <div class={styles.container}>
+          {this.tabs === 'single' && <Single userInfo={this.userInfo} />}
+          {this.tabs === 'practice' && <Practice userInfo={this.userInfo} />}
+          {this.tabs === 'live' && <Live />}
+          {this.tabs === 'video' && <VideoList />}
+          {this.tabs === 'music' && <Music />}
+        </div> */}
+      </div>
+    )
+  }
+})