提交

1

package-lock.json

@@ -24,7 +24,7 @@
         "mitt": "^3.0.0",
         "normalize.css": "^8.0.1",
         "numeral": "^2.0.6",
-        "plyr": "^3.6.12",
+        "plyr": "^3.7.2",
         "qrcode.vue": "^3.3.3",
         "query-string": "^7.1.1",
         "swiper": "^8.2.4",

package.json

@@ -36,7 +36,7 @@
     "mitt": "^3.0.0",
     "normalize.css": "^8.0.1",
     "numeral": "^2.0.6",
-    "plyr": "^3.6.12",
+    "plyr": "^3.7.2",
     "qrcode.vue": "^3.3.3",
     "query-string": "^7.1.1",
     "swiper": "^8.2.4",

src/components/col-video/index.module.less

@@ -0,0 +1,34 @@
+
+.video-container {
+  width: 100%;
+  border: 1px solid var(--next-border-color-light);
+  // --plyr-color-main: #01c1b5;
+  video {
+    width: 100%;
+    object-fit: cover;
+  }
+
+  :deep(.plyr__poster) {
+    background-size: cover;
+  }
+}
+:global {
+  .plyr__poster {
+    background-size: cover;
+  }
+  .plyr__control--overlaid {
+    background-color: rgba(0, 0, 0, 0.42) !important;
+    cursor: pointer;
+  }
+}
+.audios {
+
+  :global {
+    .plyr__controls {
+      background-color: #333!important;
+      height: 68px;
+      line-height: 68px;
+      color: #fff!important;
+    }
+  }
+}

src/components/col-video/index.tsx

@@ -0,0 +1,105 @@
+import { defineComponent } from 'vue'
+import styles from './index.module.less'
+import Plyr from 'plyr'
+import 'plyr/dist/plyr.css'
+// import { browser } from "@/helpers/utils";
+export default defineComponent({
+  name: 'colVideo',
+  props: {
+    setting: {
+      type: Object,
+      default: () => {}
+    },
+    controls: Boolean,
+    height: String,
+    src: {
+      type: String,
+      default: ''
+    },
+    poster: {
+      type: String,
+      default: ''
+    },
+    styleValue: {
+      type: Object,
+      default: () => ({})
+    },
+    type: {
+      type: String,
+      default: 'video'
+    }
+  },
+  data() {
+    return {
+      player: null as any
+    }
+  },
+  mounted() {
+    this._init()
+  },
+  methods: {
+    _init() {
+      // controls: [
+      //   'play-large' ,  // 中间的大播放按钮
+      //   'restart' ,  // 重新开始播放
+      //   'rewind' ,  // 按寻道时间倒带（默认 10 秒）
+      //   'play' ,  // 播放/暂停播放
+      //   'fast-forward' ,  // 快进查找时间（默认 10 秒）
+      //   'progress' ,  // 播放和缓冲的进度条和滑动条
+      //   'current-time' ,  // 播放的当前时间
+      //   ' duration' ,  // 媒体的完整持续时间
+      //   'mute' ,  // 切换静音
+      //   'volume', // 音量控制
+      //   'captions' ,  // 切换字幕
+      //   'settings' ,  // 设置菜单
+      //   'pip' ,  // 画中画（当前仅 Safari）
+      //   'airplay' ,  // Airplay（当前仅 Safari）
+      //   'download ' ,  // 显示一个下载按钮，其中包含指向当前源或您在选项中指定的自定义 URL 的链接
+      //   'fullscreen' ,  // 切换全屏
+      // ] ;
+      // 'current-time',
+      let controls = [
+        'play-large',
+        'play',
+        'progress',
+        'captions',
+        'fullscreen',
+        'duration',
+        'volume',
+      ]
+      this.player = new Plyr((this as any).$refs.video, {
+        controls: controls,
+        ...this.setting
+      })
+      // console.log(this.player.elements.container)
+      // this.player.elements.container
+      //   ? (this.player.elements.container.style.height = this.height || '210px')
+      //   : null
+    }
+  },
+  render() {
+    return (
+      <div class={styles['video-container']}>
+        {this.type == 'video' ? (
+          <video
+            object-fit="fill"
+            ref="video"
+            src={this.src}
+            poster={this.poster}
+            style={{ ...this.styleValue }}
+          />
+        ) : (
+          <div class={styles.audios}>
+            <audio
+              object-fit="fill"
+              ref="video"
+              src={this.src}
+              // poster={this.poster}
+              style={{ ...this.styleValue }}
+            />
+          </div>
+        )}
+      </div>
+    )
+  }
+})

src/components/videoDetailItem/index.module.less

@@ -1,3 +1,14 @@
+.isFull {
+  width: 100%!important;
+  .detaile {
+    width: 100%!important;
+    height: 225px!important;
+    img {
+      width: 100%!important;
+      height: 225px!important;
+    }
+  }
+}
 .itemWrap {
   width: 386px;
   margin-bottom: 20px;

src/components/videoDetailItem/index.tsx

@@ -6,6 +6,7 @@ import icon from './images/icon.png'
 import { useRouter } from 'vue-router'
 export default defineComponent({
   name: 'albumItem',
+  emits:['getDetail'],
   props: {
     detail: {
       type: Object,
@@ -23,19 +24,29 @@ export default defineComponent({
         "userId": 0,
         "videoLessonGroupId": 0
       }
+    },
+    isFull:{
+      type:Boolean,
+      default:false
     }
   },
-  setup(props) {
+  setup(props,conent) {
     const state = reactive({
-      detail:props.detail
+      detail:props.detail,
+      isFull:props.isFull
     })
     const router = useRouter()
     const gotoVideoDetail = ()=>{
-      router.push({path:'/videoDetail',query:{id:state.detail.id}})
+      if(state.isFull){
+        conent.emit('getDetail',state.detail.id)
+      }
+        router.push({path:'/videoDetail',query:{id:state.detail.id}})
+
+
     }
     return () => (
       <>
-        <div class={classes.itemWrap} onClick={gotoVideoDetail}>
+        <div class={[classes.itemWrap,state.isFull?classes.isFull:'']} onClick={gotoVideoDetail}>
           <img src={state.detail.lessonCoverUrl?state.detail.lessonCoverUrl:detaile} alt="" class={classes.detaile} />
           <div class={classes.itemBottom}>
             <div class={classes.itemBottomL}>

src/router/routes-admin.ts

@@ -46,6 +46,18 @@ export default [
     }
   },
   {
+    path: '/muiscDetial',
+    name: 'muiscDetial',
+    component: () => import('@/views/muiscDetial/index'),
+    meta: {
+      title: '曲谱详情',
+      highlightPath: '/musicLibrary',
+      index: 2,
+      isdark:true
+    }
+  },
+
+  {
     path: '/searchdetail',
     name: 'searchdetail',
     component: () => import('@/views/musicLibrary/searchdetail'),

src/views/muiscDetial.vue/index.tsx

@@ -1,23 +0,0 @@
-
-import { defineComponent , toRefs, reactive, onMounted, ref } from 'vue'
-import classes from './index.module.less'
-
-export default defineComponent({
-  name: 'muiscDetial',
-  props: {
-    title: {
-      type: String,
-      default: ''
-    }
-  },
-  setup(props, conent) {
-    const state = reactive({
-      title:props.title
-    })
-    return () => (
-      <>
-        <div class={classes.tag}>{state.title}</div>
-      </>
-    )
-  }
-})

src/views/muiscDetial/index.module.less

@@ -0,0 +1,66 @@
+.wall {
+  height: 70px;
+}
+.width1200 {
+  width: 1200px;
+  margin: 20px auto 0;
+}
+.musicWrap {
+  display: flex;
+  flex-direction: row;
+  .left {
+    width: 692px;
+    background-color: #fff;
+    .title {
+      padding: 28px 28px 0;
+      background-color: #fff;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 24px;
+      .titleLeft {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        p {
+          min-width: 60px;
+          font-weight: 600;
+          color: #000000;
+          line-height: 28px;
+        }
+      }
+      .titleRight {
+        cursor: pointer;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        img{
+          width: 24px;
+          height: 24px;
+          margin-right: 10px;
+        }
+      }
+    }
+    .musicContent {
+      width: 575px;
+      min-height: 749px;
+      margin: 0 auto;
+      border: 1px dotted #ccc;
+    }
+    .audios {
+      width: 100%;
+      border-radius: 0;
+      background-color: #333;
+    }
+  }
+}
+:global {
+  .subjectChiose {
+    border-radius: 14px;
+    overflow: hidden;
+  }
+  audio::-webkit-media-controls-pane {
+    background-color: #333;
+  }
+}

src/views/muiscDetial/index.tsx

@@ -0,0 +1,57 @@
+import { defineComponent, toRefs, reactive, onMounted, ref } from 'vue'
+import classes from './index.module.less'
+import { ElButton, ElOption, ElSelect } from 'element-plus'
+import printIcon from './images/printIcon.png'
+import colVideo from '@/components/col-video/index'
+export default defineComponent({
+  name: 'muiscDetial',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  components:{
+    colVideo
+  },
+  setup(props, conent) {
+    const state = reactive({
+      title: props.title,
+      subjectId: '',
+      subjectList:[]
+    })
+    return () => (
+      <>
+      <div class={classes.wall}></div>
+        <div class={[classes.width1200, classes.musicWrap]}>
+          <div class={classes.left}>
+            <div class={classes.title}>
+              <div class={classes.titleLeft}>
+                <p>声部：</p>
+                <ElSelect
+                  class="w-full subjectChiose"
+                  v-model={state.subjectId}
+                  placeholder="请选择声部"
+                >
+                  {state.subjectList.map((item: any) => (
+                    <ElOption key={item.id} value={item.id} label={item.name} />
+                  ))}
+                </ElSelect>
+              </div>
+              <div class={classes.titleRight}>
+                <img src={printIcon} alt="" />
+                <p>打印乐谱</p>
+              </div>
+            </div>
+            <div class={classes.musicContent}></div>
+            <colVideo src="" styleValue={{
+              height:'68px',
+              bacground:'#333'
+            }} type={'audto'} settings={['captions', 'quality', 'speed', 'loop']} class={classes.audios}></colVideo>
+          </div>
+          <div class={classes.right}></div>
+        </div>
+      </>
+    )
+  }
+})

src/views/videoDetailList/index.module.less

@@ -124,6 +124,7 @@
           .teacherIcon {
             width: 54px;
             height: 22px;
+            margin-right: 5px;
           }
         }
         .fens {
@@ -201,11 +202,16 @@
     .teacherVideoList {
       display: flex;
       flex-direction: row;
+      flex-wrap: wrap;
       .videoItem {
         .Styles {
           width: 218px;
           height: 145px;
         }
+        .videoItemVideo {
+          width: 218px;
+          height: 145px;
+        }
         margin-right: 18px;
         margin-bottom: 12px;
         width: 218px;

src/views/videoDetailList/modals/downModel.tsx

@@ -0,0 +1,74 @@
+import { defineComponent, toRefs, reactive, onMounted, ref } from 'vue'
+import player from '../images/player.png'
+import classes from './videoCourseItem.module.less'
+import detaile from '@/components/videoDetailItem/images/detaile.png'
+import { ElDialog, ElButton } from 'element-plus'
+import QrcodeVue from 'qrcode.vue'
+import register_bg from '@/views/login/images/register_bg.png'
+export default defineComponent({
+  name: 'downModel',
+  emits:['close'],
+  props: {
+    item: {
+      type: Object,
+      default: {}
+    }
+  },
+  components: {
+    QrcodeVue
+  },
+  setup(props, conent) {
+    const state = reactive({
+      title: props.item,
+      item: props.item,
+      qrCodeDownLoad: 'http://dev.colexiu.com/student/#/download'
+    })
+    const onClose = () => {
+      conent.emit('close')
+    }
+    return () => (
+      <>
+        <div class={[classes.loginSection, 'relative',]}>
+          <i
+            class={[
+              classes.iconClose,
+              'w-9 h-9 rounded-full flex absolute -top-1 -right-[18px]'
+            ]}
+            onClick={() => {
+             onClose()
+            }}
+          ></i>
+          <img
+            src={register_bg}
+            class={[classes.loginBg, '-mt-[10px]']}
+          />
+          <div class={ 'text-center pt-4 bg-white pb-4 pl-4 pr-4'}>
+            <QrcodeVue
+              value={state.qrCodeDownLoad}
+              class="mx-auto shadow-lg w-[138px] h-[138px] align-middle"
+            />
+
+            {/* <h3 class="text-lg text=[#1a1a1a] pt-4 pb-2">注册成功</h3> */}
+            <div class={[classes.scanTxt, 'leading-6']}>
+              {/* <p>恭喜您已成功注册酷乐秀老师账号！</p> */}
+              <p class=" text=[#1a1a1a] pt-4 pb-2">
+                <span>下载酷乐秀学生端APP</span>发现更大的世界
+              </p>
+            </div>
+
+            <ElButton
+              type="primary"
+              class="w-full mt-4"
+              style={{ height: '40px' }}
+              onClick={() => {
+                onClose()
+              }}
+            >
+              知道了
+            </ElButton>
+          </div>
+        </div>
+      </>
+    )
+  }
+})

src/views/videoDetailList/modals/videoCourseItem.module.less

@@ -43,3 +43,44 @@
 
   }
 }
+.scanTxt {
+  span {
+    color: var(--el-color-primary);
+  }
+}
+
+:global {
+
+  .el-dialog {
+    --el-dialog-width: 440px !important;
+    --el-dialog-bg-color: transparent !important;
+  }
+  .el-dialog__header,
+  .el-dialog__body {
+    padding: 0;
+  }
+  --el-border-color-light: transparent !important;
+  .el-tabs {
+    --el-tabs-header-height: 35px !important;
+  }
+
+  .el-tabs__content {
+    overflow: inherit;
+  }
+
+  .el-tabs__item {
+    @apply text-lg !important;
+    --el-text-color-primary: #666 !important;
+  }
+}
+
+.scanTxt {
+  span {
+    color: var(--el-color-primary);
+  }
+}
+
+.iconClose {
+  background: url('../images/icon_close.png') no-repeat center;
+  background-size: 100%;
+}

src/views/videoDetailList/modals/videoCourseItem.tsx

@@ -1,8 +1,11 @@
 
-import { defineComponent , toRefs, reactive, onMounted, ref } from 'vue'
+import { defineComponent , toRefs, reactive, onMounted, ref,watch } from 'vue'
 import player from '../images/player.png'
 import classes from './videoCourseItem.module.less'
 import detaile from '@/components/videoDetailItem/images/detaile.png'
+import { ElDialog } from 'element-plus'
+import downModel from './downModel'
+
 export default defineComponent({
   name: 'videoCourseItem',
   props: {
@@ -12,16 +15,23 @@ export default defineComponent({
     }
   },
   components:{
-
+    downModel,
   },
   setup(props, conent) {
     const state = reactive({
       title:props.item,
-      item:props.item
+      item:props.item,
+      showDown:false
     })
+    watch(
+      () => props.item,
+      item => {
+        state.item = item
+      }
+    )
     return () => (
       <>
-        <div class={classes.videoWrap}>
+        <div class={classes.videoWrap} onClick={()=>{state.showDown = true}}>
           <div  class={classes.videoImgWrap}>
           <img src={state.item.coverUrl?state.item.coverUrl: detaile} alt="" />
           <img src={player} alt="" class={classes.player} />
@@ -35,6 +45,14 @@ export default defineComponent({
             </div>
 
         </div>
+        <ElDialog
+            modelValue={state.showDown}
+            onUpdate:modelValue={val => (state.showDown = val)}
+            closeOnClickModal={false}
+            closeOnPressEscape={false}
+          >
+            <downModel onClose={()=>state.showDown = false}></downModel>
+          </ElDialog>
       </>
     )
   }

src/views/videoDetailList/videoDetail.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, toRefs, reactive, onMounted, ref } from 'vue'
+import { defineComponent, toRefs, reactive, onMounted, ref,nextTick } from 'vue'
 
 // import classes from './index.module.less'
 import detaile from '@/components/videoDetailItem/images/detaile.png'
@@ -10,9 +10,10 @@ import player from './images/player.png'
 import teacher from './images/teacher.png'
 import teacherHeader from '@/common/images/icon_teacher.png'
 import TimetableIcon from './images/TimetableIcon.png'
+import musiceIcon from './images/musiceIcon.png'
 import styles from './index.module.less'
 import videoDetailItem from '@/components/videoDetailItem'
-
+import colVideo from '@/components/col-video/index'
 import request from '@/helpers/request'
 import pagination from '@/components/pagination'
 import { useRoute } from 'vue-router'
@@ -27,48 +28,53 @@ export default defineComponent({
   components: {
     videoDetailItem,
     videoCourseItem,
-    pagination
+    pagination,
+    colVideo
   },
   setup(props, conent) {
     const state = reactive({
       title: props.title,
       videoList: [],
       videoDetail: {
-        "auditId": 0,
-        "auditName": "",
-        "auditStatus": "",
-        "auditVersion": "",
-        "avatar": "",
-        "countStudent": 0,
-        "createTime": "",
-        "hotFlag": 0,
-        "id": 0,
-        "lessonCount": 0,
-        "lessonCoverUrl": "",
-        "lessonDesc": "",
-        "lessonName": "",
-        "lessonPrice": 0,
-        "lessonSubject": "",
-        "lessonSubjectName": "",
-        "lessonTag": "",
-        "realName": "",
-        "sortNumber": 0,
-        "teacherId": 0,
-        "topFlag": 0,
-        "updateTime": "",
-        "username": ""
+        auditId: 0,
+        auditName: '',
+        auditStatus: '',
+        auditVersion: '',
+        avatar: '',
+        countStudent: 0,
+        createTime: '',
+        hotFlag: 0,
+        id: 0,
+        lessonCount: 0,
+        lessonCoverUrl: '',
+        lessonDesc: '',
+        lessonName: '',
+        lessonPrice: 0,
+        lessonSubject: '',
+        lessonSubjectName: '',
+        lessonTag: '',
+        realName: '',
+        sortNumber: 0,
+        teacherId: 0,
+        topFlag: 0,
+        updateTime: '',
+        username: ''
       },
+      otherVideoList:[],
+      teacherDetail: {} as any,
       id: '',
       pageInfo: {
         // 分页规则
-        limit: 9, // 限制显示条数
+        limit: 5, // 限制显示条数
         page: 1, // 当前页
         total: 0, // 总条数
-        page_size: [9, 20, 40, 50] // 选择限制显示条数
+        page_size: [5, 20, 40, 50] // 选择限制显示条数
       }
     })
+
     const route = useRoute()
     const getVideoList = async () => {
+      console.log('getVideoList',state.id)
       try {
         const res = await request.post(
           '/api-website/open/videoLessonGroup/info/page',
@@ -92,22 +98,57 @@ export default defineComponent({
         const res = await request.get(
           '/api-website/open/videoLessonGroup/selectVideoLesson',
           {
-            data: {
+            params: {
               groupId: state.id
             }
           }
         )
-        state.videoDetail = {...res.data.lessonGroup}
+        state.videoDetail = { ...res.data.lessonGroup }
+        const teacherRes = await request.get(
+          `/api-website/open/teacher/detail/${res.data.lessonGroup.teacherId}`
+        )
+        state.teacherDetail = { ...teacherRes.data }
       } catch (e) {}
     }
-    onMounted(() => {
-      if (route.query.id) {
-        state.id = route.query.id as string
+
+    const getOther = async ()=>{
+      try {
+        const res = await request.post(
+          '/api-website/open/videoLessonGroup/otherLesson',
+          {
+            data: {
+              videoLessonGroupId: state.id,
+            }
+          }
+        )
+        state.otherVideoList = res.data
+      } catch (e) {
+        console.log(e)
       }
+    }
+
+    const getDetail = (val:string)=>{
+      state.id = val;
+      console.log(state.id,'getDetail')
+     nextTick(()=>{
+      _init()
+     })
+
+    }
+    const _init = ()=>{
       getVideoList()
       setTimeout(() => {
         getVideoDetail()
       }, 100)
+      setTimeout(() => {
+        getOther()
+      }, 150)
+    }
+    onMounted(() => {
+      if (route.query.id) {
+        state.id = route.query.id as string
+      }
+      _init()
     })
     return () => (
       <>
@@ -115,16 +156,22 @@ export default defineComponent({
           <div class="wall" style={{ height: '70px' }}></div>
           <div class={[styles.w1200, styles.detailWrap]}>
             <div class={styles.detailLeft}>
-              <img src={ state.videoDetail.lessonCoverUrl?state.videoDetail.lessonCoverUrl :detaile} class={styles.detailTopImg} alt="" />
+              <img
+                src={
+                  state.videoDetail.lessonCoverUrl
+                    ? state.videoDetail.lessonCoverUrl
+                    : detaile
+                }
+                class={styles.detailTopImg}
+                alt=""
+              />
               <div class={styles.courseWrap}>
                 <div class={styles.courseTitle}>
                   <img src={courseIcon} alt="" />
                   <span>课程介绍</span>
                 </div>
                 <div class={styles.courseInfo}>
-                  <p>
-                    {state.videoDetail.lessonDesc}
-                  </p>
+                  <p>{state.videoDetail.lessonDesc}</p>
                 </div>
                 {/* courseList */}
                 <div class={styles.courseListWrap}>
@@ -133,10 +180,13 @@ export default defineComponent({
                       <img src={TimetableIcon} alt="" />
                       <span>课程列表</span>
                     </div>
-                    <span class={styles.courseTitlTimer}>共{state.videoDetail.lessonCount}课时</span>
+                    <span class={styles.courseTitlTimer}>
+                      共{state.videoDetail.lessonCount}课时
+                    </span>
                   </div>
-                  {state.videoList.map(item=>{return <videoCourseItem item={item}></videoCourseItem>})}
-
+                  {state.videoList.map(item => {
+                    return <videoCourseItem item={item}></videoCourseItem>
+                  })}
                 </div>
               </div>
               <pagination
@@ -152,17 +202,42 @@ export default defineComponent({
                 <div class={styles.teacherHeadWrap}>
                   <div class={styles.teacherHeadLeft}>
                     <img
-                      src={teacherHeader}
+                      src={
+                        state.videoDetail.avatar
+                          ? state.videoDetail.avatar
+                          : teacherHeader
+                      }
                       alt=""
                       class={styles.teacherHeader}
                     />
                     <div class={styles.teacherHeadInfo}>
                       <div class={styles.teacherHeadName}>
-                        <span>李老师</span>
-                        <img src={teacher} class={styles.teacherIcon} alt="" />
+                        <span>{state.videoDetail.username}</span>
+                        {state.teacherDetail.teacherType &&
+                        state.teacherDetail.teacherType.indexOf('ENTRY') ==
+                          -1 ? (
+                          ''
+                        ) : (
+                          <img
+                            src={teacher}
+                            class={styles.teacherIcon}
+                            alt=""
+                          />
+                        )}
+                        {state.teacherDetail.teacherType &&
+                        state.teacherDetail.teacherType.indexOf('MUSICIAN') ==
+                          -1 ? (
+                          ''
+                        ) : (
+                          <img
+                            src={musiceIcon}
+                            class={styles.teacherIcon}
+                            alt=""
+                          />
+                        )}
                       </div>
                       <p class={styles.fens}>
-                        粉丝 <span>126</span>
+                        粉丝 <span>{state.teacherDetail.fansNum}</span>
                       </p>
                     </div>
                   </div>
@@ -173,27 +248,41 @@ export default defineComponent({
                   <span>个人介绍</span>
                 </div>
                 <p class={styles.teacherDetail}>
-                  毕业与中央音乐学员长笛专业，师从央音长笛系不得了大师，曾获2016年不得了长笛大赛冠军，自2018年起研究长笛启蒙、考级到专业考试教育，总结出一套适合各个阶段需要的教学方式，所教学员考级通过率100%，专业院校复试率92%
+                  {state.teacherDetail.introduction}
                 </p>
                 <div class={styles.titleWrap}>
                   <img src={teacherIcon} alt="" />
                   <span>老师风采</span>
                 </div>
                 <div class={styles.teacherVideoList}>
-                  <div class={styles.videoItem}>
-                    <img src={detaile} alt="" class={styles.Styles} />
-                    <img src={player} alt="" class={styles.player} />
-                  </div>
-                  <div class={styles.videoItem}>
+                  {state.teacherDetail.styleVideo&&state.teacherDetail.styleVideo.map((item: any) => {
+                    return (
+                      <div class={styles.videoItem}>
+                        <colVideo
+                        styleValue={ {with:'218px',height:'145px'}}
+                          controls={true}
+                          src={item.videoUrl}
+                          class={styles.videoItemVideo}
+                        />
+
+                        {/* <img src={player} alt="" class={styles.player} /> */}
+                      </div>
+                    )
+                  })}
+
+                  {/* <div class={styles.videoItem}>
                     <img src={detaile} alt="" class={styles.Styles} />
                     <img src={player} alt="" class={styles.player} />
-                  </div>
+                  </div> */}
                 </div>
               </div>
               <div class={styles.otherCourse}>
                 <h2>其他课程</h2>
                 <div>
-                  <videoDetailItem></videoDetailItem>
+                 {state.otherVideoList.map(item=>{
+                  return <videoDetailItem detail={item} isFull={true} onGetDetail={(val)=>{getDetail(val)}}></videoDetailItem>
+                 })}
+
                   {/* videoDetailItem */}
                 </div>
               </div>

yarn.lock

@@ -3998,7 +3998,7 @@
     "ora" "^6.0.1"
     "v8flags" "^4.0.0"
 
-"plyr@^3.6.12":
+"plyr@^3.7.2":
   "integrity" "sha512-I0ZC/OI4oJ0iWG9s2rrnO0YFO6aLyrPiQBq9kum0FqITYljwTPBbYL3TZZu8UJQJUq7tUWN18Q7ACwNCkGKABQ=="
   "resolved" "https://registry.npmjs.org/plyr/-/plyr-3.7.2.tgz"
   "version" "3.7.2"