修改滚动

src/components/col-sticky/index.tsx

@@ -1,6 +1,7 @@
 import { useRect } from '@vant/use'
 import { defineComponent } from 'vue'
 import styles from './index.module.less'
+import { useResizeObserver } from '@vueuse/core'
 
 export default defineComponent({
   name: 'col-sticky',
@@ -12,11 +13,29 @@ export default defineComponent({
     background: {
       type: String,
       default: ''
+    },
+    mode: {
+      type: String as PropType<'fixed' | 'sticky'>,
+      default: 'fixed'
+    },
+    offsetTop: {
+      type: String,
+      default: '0px'
+    },
+    offsetBottom: {
+      default: '0px'
+    },
+    // 变量名
+    varName: {
+      type: String,
+      default: '--header-height'
     }
   },
+  emits: ['getHeight'],
   data() {
     return {
       divStyle: {} as any,
+      heightV: 0,
       sectionStyle: {
         width: '100%',
         height: 'auto'
@@ -24,31 +43,86 @@ export default defineComponent({
     }
   },
   mounted() {
+    // if (this.position === 'top') {
+    //   this.divStyle.top = '0px'
+    // } else {
+    //   this.divStyle.bottom = '0px'
+    // }
+    // const { height } = useRect((this as any).$refs.div)
+    // this.sectionStyle.height = `${height}px`
+
+    // this.$nextTick(() => {
+    //   setTimeout(() => {
+    //     const { height } = useRect((this as any).$refs.div)
+    //     this.sectionStyle.height = `${height}px`
+    //     this.$emit('getHeight', height)
+    //   }, 100)
+    // })
+
     if (this.position === 'top') {
-      this.divStyle.top = '0px'
+      this.divStyle.top = this.offsetTop || '0px'
     } else {
-      this.divStyle.bottom = '0px'
+      this.divStyle.bottom = this.offsetBottom || '0px'
     }
-    // const { height } = useRect((this as any).$refs.div)
-    // this.sectionStyle.height = `${height}px`
 
-    this.$nextTick(() => {
-      setTimeout(() => {
-        const { height } = useRect((this as any).$refs.div)
-        this.sectionStyle.height = `${height}px`
-        this.$emit('getHeight', height)
-      }, 100)
-    })
+    try {
+      useResizeObserver((this as any).$refs.div2, (entries: any) => {
+        const entry = entries[0]
+        const { height } = entry.contentRect
+        // console.log(height, 'height')
+        if (Math.abs(height - this.heightV) > 1) {
+          setTimeout(() => {
+            this.__initHeight(height)
+          }, 10)
+        }
+      })
+    } catch (e) {
+      //
+      console.log(e, 'error useResizeObserver')
+    }
+  },
+  methods: {
+    __initHeight(height: any) {
+      this.sectionStyle.height = `${height}px`
+      this.heightV = height
+      document.documentElement.style.setProperty(this.varName, `${height}px`)
+      this.$emit('getHeight', height)
+    }
+  },
+  watch: {
+    offsetTop() {
+      this.divStyle.top = this.offsetTop
+    },
+    offsetBottom() {
+      this.divStyle.bottom = this.offsetBottom
+    }
   },
   render() {
     return (
-      <div style={this.sectionStyle}>
+      // <div style={this.sectionStyle}>
+      //   <div
+      //     ref="div"
+      //     class={['van-sticky van-sticky--fixed', styles[this.background]]}
+      //     style={[this.divStyle, this.sectionStyle]}
+      //   >
+      //     {this.$slots.default && this.$slots.default()}
+      //   </div>
+      // </div>
+
+      <div
+        style={[this.sectionStyle]}
+        class={this.mode === 'sticky' && styles.sticky}
+      >
         <div
           ref="div"
-          class={['van-sticky van-sticky--fixed', styles[this.background]]}
+          class={[
+            'van-sticky',
+            this.mode === 'fixed' ? 'van-sticky--fixed' : '',
+            styles[this.background]
+          ]}
           style={[this.divStyle, this.sectionStyle]}
         >
-          {this.$slots.default && this.$slots.default()}
+          <div ref="div2">{this.$slots.default && this.$slots.default()}</div>
         </div>
       </div>
     )

src/student/video-class/video-class-detail.module.less

@@ -1,87 +1,95 @@
-.video-class-detail {
-  min-height: 100vh;
-
-  .videoDesc {
-    background-color: #fff;
-    padding: 0 14px 16px;
-    margin-bottom: 6px;
-    font-size: 14px;
-    line-height: 20px;
-    color: #7a7a7a;
-  }
-
-  .titleInfo {
-    padding-left: 8px;
-    font-size: 15px;
-    font-weight: 500;
-    color: #1a1a1a;
-    flex: 1 auto;
-    max-width: 250px;
-  }
-  .label {
-    font-size: 14px;
-    span {
-      color: var(--van-primary);
-    }
-  }
-
-  :global {
-    .van-tab--active {
-      color: var(--van-primary);
-    }
-    .van-field__value {
-      background: #f7f7f7;
-      border-radius: 30px;
-      padding-left: 15px;
-    }
-
-    .van-tab__panel {
-      overflow: hidden;
-    }
-  }
-
-  .message-list {
-    &.message-active {
-      .title,
-      .label {
-        color: var(--van-primary) !important;
-      }
-    }
-    .message-name {
-      flex-basis: 65%;
-      line-height: 1.2;
-    }
-    .message-time {
-      font-size: 12px;
-      color: #999;
-      flex-basis: 35%;
-    }
-
-    .userLogo {
-      width: 34px;
-      height: 34px;
-      border-radius: 50%;
-      margin-right: 8px;
-      overflow: hidden;
-    }
-    .title {
-      display: flex;
-      justify-content: space-between;
-      font-size: 14px;
-      color: #999;
-      font-weight: 500;
-    }
-    .label {
-      font-size: 14px;
-      color: #333333;
-      line-height: 20px;
-    }
-  }
-}
-
-.messageContainer {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
+.video-class-detail {
+  min-height: 100vh;
+
+  .videoDesc {
+    background-color: #fff;
+    padding: 0 14px 12px;
+    margin-bottom: 6px;
+    font-size: 14px;
+    line-height: 20px;
+    color: #7a7a7a;
+  }
+
+  .titleInfo {
+    padding-left: 8px;
+    font-size: 15px;
+    font-weight: 500;
+    color: #1a1a1a;
+    flex: 1 auto;
+    max-width: 250px;
+  }
+
+  .label {
+    font-size: 14px;
+
+    span {
+      color: var(--van-primary);
+    }
+  }
+
+  :global {
+    .van-tab--active {
+      color: var(--van-primary);
+    }
+
+    .van-field__value {
+      background: #f7f7f7;
+      border-radius: 30px;
+      padding-left: 15px;
+    }
+
+    .van-tab__panel {
+      overflow: hidden;
+    }
+  }
+
+  .message-list {
+    &.message-active {
+
+      .title,
+      .label {
+        color: var(--van-primary) !important;
+      }
+    }
+
+    .message-name {
+      flex-basis: 65%;
+      line-height: 1.2;
+    }
+
+    .message-time {
+      font-size: 12px;
+      color: #999;
+      flex-basis: 35%;
+    }
+
+    .userLogo {
+      width: 34px;
+      height: 34px;
+      border-radius: 50%;
+      margin-right: 8px;
+      overflow: hidden;
+    }
+
+    .title {
+      display: flex;
+      justify-content: space-between;
+      font-size: 14px;
+      color: #999;
+      font-weight: 500;
+    }
+
+    .label {
+      font-size: 14px;
+      color: #333333;
+      line-height: 20px;
+    }
+  }
+}
+
+.messageContainer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}

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

@@ -28,6 +28,7 @@ import dayjs from 'dayjs'
 import { onSubmitZero, orderStatus } from '@/views/order-detail/orderStatus'
 import { browser } from '@/helpers/utils'
 import { usePageVisibility } from '@vant/use'
+import ColSticky from '@/components/col-sticky'
 
 export default defineComponent({
   name: 'VideoClassDetail',
@@ -62,18 +63,19 @@ export default defineComponent({
       },
       freeRate: 0, // 试看百分比
       trySee: false, // 是否试看
-      videoHeight: '212px'
+      videoHeight: '212px',
+      offsetTop: 'auto'
     }
   },
   computed: {
     users() {
       return state.user.data
-    },
-    offsetTop() {
-      const navHeight: number = this.navHeight
-      const top = Number(navHeight) + 44
-      return top + 'px'
     }
+    // offsetTop() {
+    //   const navHeight: number = this.navHeight
+    //   const top = Number(navHeight) + 44
+    //   return top + 'px'
+    // }
   },
   async mounted() {
     this.pageVisibility = usePageVisibility()
@@ -227,109 +229,119 @@ export default defineComponent({
   render() {
     return (
       <div class={styles['video-class-detail']}>
-        {/* <Sticky offsetTop={0} position="top"> */}
-        <ColHeader
-          v-slots={{
-            default: () =>
-              !this.reload && (
-                <ColVideo
-                  freeRate={Number(this.freeRate)}
-                  freeTitleStatus={this.lessonPrice > 0 ? true : false}
-                  trySee={this.trySee}
-                  src={this.srcUrl}
-                  payType={this.payType}
-                  poster={this.posterUrl}
-                  height={this.videoHeight}
-                  isBuy
-                  onBuyEmit={async () => {
-                    if (this.payType === 'VIP') {
-                      if (browser().isApp) {
-                        postMessage({
-                          api: 'openWebView',
-                          content: {
-                            url: `${location.origin}${location.pathname}#/memberCenter`,
-                            orientation: 1,
-                            isHideTitle: false
+        <ColSticky
+          position="top"
+          onGetHeight={(val: any) => {
+            this.offsetTop = val + 'px'
+          }}
+        >
+          <ColHeader
+            v-slots={{
+              default: () =>
+                !this.reload && (
+                  <ColVideo
+                    freeRate={Number(this.freeRate)}
+                    freeTitleStatus={this.lessonPrice > 0 ? true : false}
+                    trySee={this.trySee}
+                    src={this.srcUrl}
+                    payType={this.payType}
+                    poster={this.posterUrl}
+                    height={this.videoHeight}
+                    isBuy
+                    onBuyEmit={async () => {
+                      if (this.payType === 'VIP') {
+                        if (browser().isApp) {
+                          postMessage({
+                            api: 'openWebView',
+                            content: {
+                              url: `${location.origin}${location.pathname}#/memberCenter`,
+                              orientation: 1,
+                              isHideTitle: false
+                            }
+                          })
+                        } else {
+                          this.$router.push({
+                            path: '/memberCenter'
+                          })
+                        }
+                        return
+                      }
+
+                      if (this.lessonPrice > 0) {
+                        this.$router.back()
+                        return
+                      }
+                      try {
+                        const userInfo = this.videoDetail
+                        orderStatus.orderObject.orderType = 'VIDEO'
+                        orderStatus.orderObject.orderName = '视频课购买'
+                        orderStatus.orderObject.orderDesc = '视频课购买'
+                        orderStatus.orderObject.actualPrice =
+                          userInfo.lessonPrice
+                        orderStatus.orderObject.recomUserId = ''
+                        orderStatus.orderObject.orderNo = ''
+                        orderStatus.orderObject.orderList = [
+                          {
+                            orderType: 'VIDEO',
+                            goodsName: '视频课购买',
+                            courseGroupId: userInfo.id,
+                            courseGroupName: userInfo.lessonName,
+                            coursePrice: userInfo.lessonPrice,
+                            teacherName:
+                              userInfo.username ||
+                              `游客${userInfo.teacherId || ''}`,
+                            teacherId: userInfo.teacherId,
+                            avatar: userInfo.headUrl,
+                            relationType: userInfo.relationType,
+                            courseInfo: this.detailList,
+                            recomUserId: ''
                           }
+                        ]
+                        await onSubmitZero(() => {
+                          Dialog.alert({
+                            message: '领取成功',
+                            confirmButtonText: '确定',
+                            confirmButtonColor: '#2dc7aa'
+                          }).then(() => {
+                            this.__init()
+                          })
                         })
-                      } else {
-                        this.$router.push({
-                          path: '/memberCenter'
-                        })
+                      } catch {
+                        //
                       }
-                      return
-                    }
+                    }}
+                  />
+                )
+            }}
+          />
 
-                    if (this.lessonPrice > 0) {
-                      this.$router.back()
-                      return
-                    }
-                    try {
-                      const userInfo = this.videoDetail
-                      orderStatus.orderObject.orderType = 'VIDEO'
-                      orderStatus.orderObject.orderName = '视频课购买'
-                      orderStatus.orderObject.orderDesc = '视频课购买'
-                      orderStatus.orderObject.actualPrice = userInfo.lessonPrice
-                      orderStatus.orderObject.recomUserId = ''
-                      orderStatus.orderObject.orderNo = ''
-                      orderStatus.orderObject.orderList = [
-                        {
-                          orderType: 'VIDEO',
-                          goodsName: '视频课购买',
-                          courseGroupId: userInfo.id,
-                          courseGroupName: userInfo.lessonName,
-                          coursePrice: userInfo.lessonPrice,
-                          teacherName:
-                            userInfo.username ||
-                            `游客${userInfo.teacherId || ''}`,
-                          teacherId: userInfo.teacherId,
-                          avatar: userInfo.headUrl,
-                          relationType: userInfo.relationType,
-                          courseInfo: this.detailList,
-                          recomUserId: ''
-                        }
-                      ]
-                      await onSubmitZero(() => {
-                        Dialog.alert({
-                          message: '领取成功',
-                          confirmButtonText: '确定',
-                          confirmButtonColor: '#2dc7aa'
-                        }).then(() => {
-                          this.__init()
-                        })
-                      })
-                    } catch {
-                      //
-                    }
-                  }}
-                />
-              )
-          }}
-        />
-        {/* </Sticky> */}
-        <Cell
-          border={false}
-          class={styles.cell}
-          title={this.title}
-          titleClass={[styles.titleInfo, 'van-ellipsis']}
-          v-slots={{
-            icon: () => (
-              <Icon
-                name="video"
-                size={18}
-                color="var(--van-primary)"
-                style={{ display: 'flex', alignItems: 'center' }}
-              />
-            ),
-            value: () => (
-              <div class={styles.label}>
-                <span>{this.currentClassIndex}</span>/{this.detailList.length}
-                课时
-              </div>
-            )
-          }}
-        ></Cell>
-        <div class={styles.videoDesc}>{this.videoContent}</div>
+          <div style="overflow: hidden">
+            <Cell
+              border={false}
+              class={styles.cell}
+              title={this.title}
+              titleClass={[styles.titleInfo, 'van-ellipsis']}
+              v-slots={{
+                icon: () => (
+                  <Icon
+                    name="video"
+                    size={18}
+                    color="var(--van-primary)"
+                    style={{ display: 'flex', alignItems: 'center' }}
+                  />
+                ),
+                value: () => (
+                  <div class={styles.label}>
+                    <span>{this.currentClassIndex}</span>/
+                    {this.detailList.length}
+                    课时
+                  </div>
+                )
+              }}
+            ></Cell>
+            <div class={styles.videoDesc}>{this.videoContent}</div>
+          </div>
+        </ColSticky>
 
         <Tabs
           v-model:active={this.tabIndex}
@@ -343,10 +355,16 @@ export default defineComponent({
             <div
               style={{
                 // height: `calc(100vh - 320px - ${this.navHeight}px)`,
+                height:
+                  'calc(100vh  - var(--van-tabs-line-height) - var(--header-height))',
                 overflowY: 'auto'
               }}
             >
-              <SectionDetail title="课程列表" icon="courseList" border>
+              <SectionDetail
+                title="课程列表"
+                icon="courseList"
+                style={{ marginBottom: '12px' }}
+              >
                 {this.detailList.map((item: any, index: number) => {
                   const musicAlbumInfos = item.musicAlbumInfos || []
                   const temp = musicAlbumInfos.map((info: any) => {
@@ -400,6 +418,7 @@ export default defineComponent({
               style={{
                 // height: `calc(100vh - 380px - ${this.navHeight}px)`,
                 overflowY: 'auto',
+                height: `calc(100vh - var(--van-tabs-line-height) - var(--header-height) - (var(--van-cell-vertical-padding) * 2 + var( --van-cell-line-height)))`,
                 marginBottom:
                   'calc(var(--van-cell-vertical-padding) * 2 + var( --van-cell-line-height))'
               }}

src/teacher/video-class/video-class-detail.module.less

@@ -1,144 +1,159 @@
-.video-class-detail {
-  .cell {
-    // margin-bottom: 6px;
-  }
-  .titleInfo {
-    padding-left: 8px;
-    font-size: 15px;
-    font-weight: 500;
-    color: #1a1a1a;
-    flex: 1 auto;
-  }
-  .label {
-    font-size: 14px;
-    font-weight: 600;
-    span {
-      color: var(--van-primary);
-    }
-  }
-
-  :global {
-    .van-tab--active {
-      color: var(--van-primary);
-    }
-    .van-field__value {
-      background: #f7f7f7;
-      border-radius: 30px;
-      padding-left: 15px;
-    }
-
-    .van-tab__panel {
-      overflow: hidden;
-    }
-  }
-
-  .open-teacher-info {
-    margin: 12px 14px 8px;
-    width: auto;
-    background-color: #fff;
-    border-radius: 8px;
-    padding: 14px 15px;
-    .userLogo {
-      width: 48px;
-      height: 48px;
-      border-radius: 50%;
-      overflow: hidden;
-    }
-    :global {
-      .van-cell__value {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-      }
-    }
-
-    .teacher-info {
-      display: flex;
-      justify-content: center;
-      flex-direction: column;
-      padding-left: 8px;
-      .users {
-        display: flex;
-        padding-top: 5px;
-      }
-      .teacher-name {
-        font-weight: 500;
-        color: #1a1a1a;
-        line-height: 1.2;
-        font-size: 16px;
-        padding-right: 8px;
-      }
-      .level {
-        padding-top: 5px;
-        line-height: 1.2;
-        font-size: 12px;
-        color: #999999;
-      }
-    }
-
-    .teacher-desc {
-      display: flex;
-      align-items: center;
-    }
-  }
-  .videoDesc {
-    background-color: #fff;
-    padding: 0 14px 16px;
-    margin-bottom: 6px;
-    font-size: 14px;
-    line-height: 20px;
-    color: #7a7a7a;
-  }
-
-  .message-list {
-    &.message-active {
-      .title,
-      .label {
-        color: var(--van-primary) !important;
-      }
-    }
-    .message-name {
-      flex-basis: 65%;
-      line-height: 1.2;
-    }
-    .message-time {
-      font-size: 12px;
-      color: #999;
-      flex-basis: 35%;
-    }
-
-    .userLogo {
-      width: 34px;
-      height: 34px;
-      border-radius: 50%;
-      margin-right: 8px;
-      overflow: hidden;
-    }
-    .title {
-      display: flex;
-      justify-content: space-between;
-      font-size: 14px;
-      color: #999;
-      font-weight: 500;
-    }
-    .label {
-      font-size: 14px;
-      color: #333333;
-      line-height: 20px;
-    }
-  }
-
-  .isFixed {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-  }
-}
-
-.messageContainer {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
+.video-class-detail {
+  .cell {
+    // margin-bottom: 6px;
+  }
+
+  .titleInfo {
+    padding-left: 8px;
+    font-size: 15px;
+    font-weight: 500;
+    color: #1a1a1a;
+    flex: 1 auto;
+  }
+
+  .label {
+    font-size: 14px;
+    font-weight: 600;
+
+    span {
+      color: var(--van-primary);
+    }
+  }
+
+  :global {
+    .van-tab--active {
+      color: var(--van-primary);
+    }
+
+    .van-field__value {
+      background: #f7f7f7;
+      border-radius: 30px;
+      padding-left: 15px;
+    }
+
+    .van-tab__panel {
+      overflow: hidden;
+    }
+  }
+
+  .open-teacher-info {
+    margin: 12px 14px 8px;
+    width: auto;
+    background-color: #fff;
+    border-radius: 8px;
+    padding: 14px 15px;
+
+    .userLogo {
+      width: 48px;
+      height: 48px;
+      border-radius: 50%;
+      overflow: hidden;
+    }
+
+    :global {
+      .van-cell__value {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+    }
+
+    .teacher-info {
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      padding-left: 8px;
+
+      .users {
+        display: flex;
+        padding-top: 5px;
+      }
+
+      .teacher-name {
+        font-weight: 500;
+        color: #1a1a1a;
+        line-height: 1.2;
+        font-size: 16px;
+        padding-right: 8px;
+      }
+
+      .level {
+        padding-top: 5px;
+        line-height: 1.2;
+        font-size: 12px;
+        color: #999999;
+      }
+    }
+
+    .teacher-desc {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .videoDesc {
+    background-color: #fff;
+    padding: 0 14px 12px;
+    margin-bottom: 6px;
+    font-size: 14px;
+    line-height: 20px;
+    color: #7a7a7a;
+  }
+
+  .message-list {
+    &.message-active {
+
+      .title,
+      .label {
+        color: var(--van-primary) !important;
+      }
+    }
+
+    .message-name {
+      flex-basis: 65%;
+      line-height: 1.2;
+    }
+
+    .message-time {
+      font-size: 12px;
+      color: #999;
+      flex-basis: 35%;
+    }
+
+    .userLogo {
+      width: 34px;
+      height: 34px;
+      border-radius: 50%;
+      margin-right: 8px;
+      overflow: hidden;
+    }
+
+    .title {
+      display: flex;
+      justify-content: space-between;
+      font-size: 14px;
+      color: #999;
+      font-weight: 500;
+    }
+
+    .label {
+      font-size: 14px;
+      color: #333333;
+      line-height: 20px;
+    }
+  }
+
+  .isFixed {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+}
+
+.messageContainer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}

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

@@ -23,6 +23,7 @@ import { state } from '@/state'
 import iconStudent from '@common/images/icon_student.png'
 import dayjs from 'dayjs'
 import ColResult from '@/components/col-result'
+import ColSticky from '@/components/col-sticky'
 
 export default defineComponent({
   name: 'VideoClassDetail',
@@ -55,18 +56,19 @@ export default defineComponent({
       },
       freeRate: 0, // 试看百分比
       trySee: false, // 是否试看
-      videoHeight: '212px'
+      videoHeight: '212px',
+      offsetTop: 'auto'
     }
   },
   computed: {
     users() {
       return state.user.data
-    },
-    offsetTop() {
-      const navHeight: number = this.navHeight
-      const top = Number(navHeight) + 44
-      return top + 'px'
     }
+    // offsetTop() {
+    //   const navHeight: number = this.navHeight
+    //   const top = Number(navHeight) + 44
+    //   return top + 'px'
+    // }
   },
   async mounted() {
     this.navHeight = sessionStorage.getItem('navHeight') || 0
@@ -185,54 +187,52 @@ export default defineComponent({
   render() {
     return (
       <div class={styles['video-class-detail']}>
-        {/* <ColHeader
-          v-slots={{
-            default: () => (
-              <ColVideo
-                src={this.srcUrl}
-                poster={this.posterUrl}
-                freeRate={Number(this.freeRate)}
-                trySee={this.trySee}
-                height={this.videoHeight}
-              />
-            )
-          }}
-        /> */}
-        <ColHeader />
-        <ColVideo
-          src={this.srcUrl}
-          poster={this.posterUrl}
-          freeTitleStatus={
-            this.lessonPrice > 0 || this.payType === 'VIP' ? true : false
-          }
-          freeRate={Number(this.freeRate)}
-          payType={this.payType}
-          trySee={this.trySee}
-          height={this.videoHeight}
-        />
-        <Cell
-          border={false}
-          class={styles.cell}
-          title={this.title}
-          titleClass={styles.titleInfo}
-          v-slots={{
-            icon: () => (
-              <Icon
-                name="video"
-                size={18}
-                color="var(--van-primary)"
-                style={{ display: 'flex', alignItems: 'center' }}
-              />
-            ),
-            value: () => (
-              <div class={styles.label}>
-                <span>{this.currentClassIndex}</span>/{this.detailList.length}
-                课时
-              </div>
-            )
+        <ColSticky
+          position="top"
+          onGetHeight={(val: any) => {
+            console.log(val)
+            this.offsetTop = val + 'px'
           }}
-        ></Cell>
-        <div class={styles.videoDesc}>{this.videoContent}</div>
+        >
+          <ColHeader />
+          <ColVideo
+            src={this.srcUrl}
+            poster={this.posterUrl}
+            freeTitleStatus={
+              this.lessonPrice > 0 || this.payType === 'VIP' ? true : false
+            }
+            freeRate={Number(this.freeRate)}
+            payType={this.payType}
+            trySee={this.trySee}
+            height={this.videoHeight}
+          />
+          <div style="overflow: hidden">
+            <Cell
+              border={false}
+              class={styles.cell}
+              title={this.title}
+              titleClass={styles.titleInfo}
+              v-slots={{
+                icon: () => (
+                  <Icon
+                    name="video"
+                    size={18}
+                    color="var(--van-primary)"
+                    style={{ display: 'flex', alignItems: 'center' }}
+                  />
+                ),
+                value: () => (
+                  <div class={styles.label}>
+                    <span>{this.currentClassIndex}</span>/
+                    {this.detailList.length}
+                    课时
+                  </div>
+                )
+              }}
+            ></Cell>
+            <div class={styles.videoDesc}>{this.videoContent}</div>
+          </div>
+        </ColSticky>
 
         <Tabs
           v-model:active={this.tabIndex}
@@ -244,8 +244,18 @@ export default defineComponent({
           offsetTop={this.offsetTop}
         >
           <Tab title="目录" name={1}>
-            <div style={{ height: 'calc(100vh - 320px)', overflowY: 'auto' }}>
-              <SectionDetail title="课程列表" icon="courseList">
+            <div
+              style={{
+                height:
+                  'calc(100vh  - var(--van-tabs-line-height) - var(--header-height))',
+                overflowY: 'auto'
+              }}
+            >
+              <SectionDetail
+                title="课程列表"
+                icon="courseList"
+                style={{ marginBottom: '12px' }}
+              >
                 {this.detailList.map((item: any, index: number) => {
                   const musicAlbumInfos = item.musicAlbumInfos || []
                   const temp = musicAlbumInfos.map((info: any) => {
@@ -298,6 +308,7 @@ export default defineComponent({
             <div
               style={{
                 overflowY: 'auto',
+                height: `calc(100vh - var(--van-tabs-line-height) - var(--header-height) - (var(--van-cell-vertical-padding) * 2 + var( --van-cell-line-height)))`,
                 marginBottom:
                   'calc(var(--van-cell-vertical-padding) * 2 + var( --van-cell-line-height))'
               }}

vite.config.ts

@@ -12,7 +12,7 @@ function resolve(dir: string) {
 // https://vitejs.dev/config/
 // https://github.com/vitejs/vite/issues/1930 .env
 // const proxyUrl = 'https://online.colexiu.com/'
-const proxyUrl = 'https://test.colexiu.com/'
+const proxyUrl = 'https://dev.colexiu.com/'
 // const proxyUrl = 'http://192.168.3.14:8000/'
 export default defineConfig({
   base: './',