UI走查，及播放优化

src/views/accompany/index.module.less

@@ -47,7 +47,19 @@
         top: 0;
         width: 100%;
         z-index: 10;
+        :global{
+          .van-dropdown-menu__bar{
+            box-shadow: none;
+          }
+          .van-dropdown-menu__title:after{
+            border: 0.11rem solid;
+            border-color: transparent transparent var(--van-gray-4) var(--van-gray-4);
+          }
+        }
     }
+    // .cell{
+    //   padding: 16px 10px;
+    // }
     .filter{
         display: flex;
         align-items: center;

src/views/accompany/music-list.tsx

@@ -123,7 +123,6 @@ export default defineComponent({
     }
     // 重置搜索
     const onSearch = () => {
-      console.log(234)
       data.pagenation.page = 1
       data.finished = false
       data.loading = false
@@ -246,7 +245,7 @@ export default defineComponent({
             <CellGroup inset>
               {data.list.map((item: any) => {
                 return (
-                  <Cell center title={item.musicSheetName} isLink onClick={() => openView(item)}>
+                  <Cell size="large" center title={item.musicSheetName} isLink onClick={() => openView(item)}>
                     {{
                       icon: () => (
                         <Icon style={{ marginRight: '12px' }} size={40} name={imgDefault} />

src/views/courseList/index.module.less

@@ -30,8 +30,12 @@
     }
     .title {
       text-align: center;
-      padding: 10px;
+      padding: 14px;
       color: #742c00;
+      font-size: 16px;
+    }
+    .subtitle{
+      font-size: 12px;
     }
     .num {
       position: absolute;

src/views/courseList/index.tsx

@@ -173,7 +173,7 @@ export default defineComponent({
                   <img src={iconCourse} class={styles.cover} />
                   <div class={styles.title}>
                     <div>{item.coursewareDetailName}</div>
-                    {route.query.code !== 'select' && <div>已使用 {item.useNum} 次</div>}
+                    {route.query.code !== 'select' && <div class={styles.subtitle}>已使用 {item.useNum} 次</div>}
                   </div>
                   {route.query.code !== 'select' ? (
                     <>

src/views/coursewarePlay/component/point.module.less

@@ -12,6 +12,7 @@
   align-items: center;
   padding: 13px 10px 15px 15px;
   flex-shrink: 0;
+  font-size: 14px;
   img {
     width: 16px;
     height: 16px;
@@ -30,7 +31,7 @@
   :global {
     .van-cell {
       background: transparent;
-      font-size: 12px;
+      font-size: 14px;
       color: #fff;
       padding: 0 13px 6px 18px;
     }
@@ -63,6 +64,7 @@
   justify-content: space-between;
   padding: 4px 5px;
   border-radius: 6px;
+  font-size: 12px;
   :global {
     .van-icon {
       display: none;

src/views/coursewarePlay/index.module.less

@@ -18,13 +18,11 @@
   left: 0;
   right: 0;
   z-index: 1;
-  padding: 10px;
   display: flex;
   align-items: center;
   background: linear-gradient(180deg, rgba(0, 0, 0, .6), transparent);
 }
 .backBtn {
-  position: absolute;
   color: #fff;
   width: 40px;
   height: 26px;
@@ -32,11 +30,15 @@
   justify-content: space-between;
   align-items: center;
   z-index: 10;
+  padding: 4px 10px 4px 20px;
 }
 .menu {
-  flex: 1;
+  position: absolute;
+  width: 100%;
+  height: 100%;
   display: flex;
   justify-content: center;
+  align-items: center;
   font-size: 12px;
   color: #fff;
 }
@@ -90,7 +92,7 @@
   position: fixed;
   top: 50%;
   transform: translateY(-50%);
-  left: 20px;
+  left: 26px;
   .prePoint {
     margin-bottom: 8px;
   }
@@ -121,23 +123,31 @@
     justify-content: space-between;
     color: #fff;
     font-size: 10px;
-    padding: 4px 10px;
+    padding: 4px 20px;
   }
   .slider {
-    padding: 8px 10px;
+    padding: 8px 20px;
+    :global{
+      .van-slider__button{
+        background: var(--van-primary);
+      }
+    }
   }
   .actions {
     display: flex;
     justify-content: space-between;
     color: #fff;
     font-size: 12px;
-    padding: 8px 10px;
+    padding: 0 10px 0 20px;
     align-items: center;
-    :global {
-      .van-icon {
-        font-size: 20px;
-        margin-right: 14px;
-      }
+    .actionBtn{
+      display: flex;
+    }
+    .actionBtn > img {
+      width: 26px;
+      height: 26px;
+      display: block;
+      padding: 4px 10px 14px 4px;
     }
   }
 }

src/views/coursewarePlay/index.tsx

@@ -163,7 +163,9 @@ export default defineComponent({
               timer: null,
               playModel: false,
               isprepare: false,
-              isDrage: false
+              isDrage: false,
+              muted: i === 0 && j === 0 ? true : false,
+              isAutoNext: false // 是否自动播放到当前页面
             }
           }
           list.push({
@@ -216,7 +218,8 @@ export default defineComponent({
     const iframeHandle = (ev: MessageEvent) => {
       // console.log(ev.data)
       if (ev.data?.api === 'headerTogge') {
-        activeData.model = ev.data.show
+        // activeData.model = ev.data.show
+        activeData.model = !activeData.model
       }
     }
     onMounted(() => {
@@ -268,6 +271,7 @@ export default defineComponent({
     }
     // 轮播切换
     const handleSwipeChange = (val: any) => {
+      console.log('轮播切换')
       popupData.activeIndex = val
       const item = data.itemList[val]
       if (item) {
@@ -275,9 +279,14 @@ export default defineComponent({
         popupData.itemActive = item.id
         popupData.itemName = item.name
         popupData.tabName = item.tabName
-        activeData.model = true
-        if (item.type === 'VIDEO') {
-          item.playModel = true
+        if (item.isAutoNext) {
+          item.isAutoNext = false
+          item.playModel = false
+        } else {
+          activeData.model = true
+          if (item.type === 'VIDEO') {
+            item.playModel = true
+          }
         }
       }
     }
@@ -309,7 +318,6 @@ export default defineComponent({
       if (item && item.type === 'VIDEO') {
         const videoEle: HTMLVideoElement = item.videoEle
         if (videoEle) {
-          console.log(videoEle)
           if (videoEle.paused) {
             closeToast()
             videoEle.play()
@@ -318,16 +326,12 @@ export default defineComponent({
             videoEle.pause()
           }
         }
-        item.timer = setTimeout(() => {
-          activeData.model = false
-        }, 3000)
       }
     }
 
     // 暂停播放
     const handlePaused = (e: Event, m: any) => {
       e.stopPropagation()
-      console.log('暂停')
       m.videoEle?.pause()
       m.paused = true
     }
@@ -337,10 +341,6 @@ export default defineComponent({
       clearTimeout(m.timer)
       closeToast()
       m.videoEle?.play()
-      m.paused = false
-      m.timer = setTimeout(() => {
-        activeData.model = false
-      }, 3000)
     }
 
     // 调整播放进度
@@ -359,15 +359,16 @@ export default defineComponent({
         popupData.activeIndex++
         swipeRef.value?.next()
         const nextItem = data.itemList[popupData.activeIndex]
-        if (nextItem.type === 'VIDEO'){
+        if (nextItem.type === 'VIDEO') {
+          nextItem.isAutoNext = true
           nextTick(() => {
-            // 自动播放下一个知识点
-            // if (m.autoPlay) {
-            // }
+            // 自动播放下一个视频
+            clearTimeout(m.timer)
+            closeToast()
             nextItem.videoEle?.play()
           })
         }
-        
+
         console.log('🚀 ~ nextItem', nextItem)
       }
     }
@@ -425,15 +426,15 @@ export default defineComponent({
                       <>
                         <video
                           playsinline="false"
+                          webkit-playsinline
+                          muted={m.muted}
                           preload="auto"
                           class="player"
                           poster={iconVideobg}
                           data-vid={m.id}
                           src={m.content}
                           loop={m.loop}
-                          // onLoadeddata={(e: Event) =>
-                          //   handleFirstFrame(e.target as unknown as HTMLVideoElement)
-                          // }
+                          autoplay={mIndex === 0 ? true : false}
                           onLoadedmetadata={(e: Event) => {
                             const videoEle = e.target as unknown as HTMLVideoElement
                             m.currentTime = videoEle.currentTime
@@ -455,6 +456,11 @@ export default defineComponent({
                           onPlay={() => {
                             // 播放
                             m.paused = false
+                            console.log('播放')
+                            m.timer = setTimeout(() => {
+                              activeData.model = false
+                            }, 3000)
+                            m.muted = false
                           }}
                           onPause={() => {
                             //暂停
@@ -504,29 +510,26 @@ export default defineComponent({
                               </div>
 
                               <div class={styles.actions}>
-                                <div>
+                                <div class={styles.actionBtn}>
                                   {m.paused ? (
-                                    <Icon
-                                      name={iconplay}
-                                      onClick={(e: Event) => handlePlay(e, m)}
-                                    />
+                                    <img src={iconplay} onClick={(e: Event) => handlePlay(e, m)} />
                                   ) : (
-                                    <Icon
-                                      name={iconpause}
+                                    <img
+                                      src={iconpause}
                                       onClick={(e: Event) => handlePaused(e, m)}
                                     />
                                   )}
                                   {m.loop ? (
-                                    <Icon
-                                      name={iconLoopActive}
+                                    <img
+                                      src={iconLoopActive}
                                       onClick={(e: Event) => {
                                         e.stopPropagation()
                                         m.loop = false
                                       }}
                                     />
                                   ) : (
-                                    <Icon
-                                      name={iconLoop}
+                                    <img
+                                      src={iconLoop}
                                       onClick={(e: Event) => {
                                         e.stopPropagation()
                                         m.loop = true

src/views/lessonCourseware/index.module.less

@@ -31,8 +31,9 @@
     .title {
       position: relative;
       text-align: center;
-      padding: 10px;
+      padding: 14px;
       color:#742C00;
+      font-size: 14px;
     }
     .num {
       position: absolute;