修改样式

src/views/courseList/index.tsx

@@ -4,28 +4,15 @@ import {
   Button,
   Cell,
   CellGroup,
-  Dialog,
-  Empty,
-  Grid,
-  GridItem,
-  Icon,
-  Image,
-  Loading,
   Popup,
   showConfirmDialog,
   showLoadingToast,
-  showToast,
-  Skeleton,
-  SkeletonImage,
-  Space
 } from 'vant'
 import {
   defineComponent,
   onMounted,
   reactive,
   onUnmounted,
-  nextTick,
-  Transition,
   TransitionGroup
 } from 'vue'
 import styles from './index.module.less'
@@ -233,17 +220,28 @@ export default defineComponent({
     // 去课件播放
     const gotoPlay = (item: any) => {
       data.catchStatus = false
-      postMessage({
-        api: 'openWebView',
-        content: {
-          url: `${location.origin}${location.pathname}#/coursewarePlay?id=${item.lessonCoursewareDetailId}&source=my-course`,
-          orientation: 0,
-          isHideTitle: true,
-          statusBarTextColor: false,
-          isOpenLight: true,
-          showLoadingAnim: true
-        }
-      })
+      if(browser().isApp) {
+        postMessage({
+          api: 'openWebView',
+          content: {
+            url: `${location.origin}${location.pathname}#/coursewarePlay?id=${item.lessonCoursewareDetailId}&source=my-course`,
+            orientation: 0,
+            isHideTitle: true,
+            statusBarTextColor: false,
+            isOpenLight: true,
+            showLoadingAnim: true
+          }
+        })
+      } else {
+        router.push({
+          path: '/coursewarePlay',
+          query: {
+            id: item.lessonCoursewareDetailId,
+            source: 'my-course'
+          }
+        })
+      }
+      
     }
     // 检查数据的缓存状态
     const checkCoursewareCache = (list: []): Promise<any[]> => {

src/views/coursewarePlay/image/back.svg

@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="19px" height="19px" viewBox="0 0 19 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>切片</title>
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-        <g id="课件播放（老师）" transform="translate(-40.000000, -13.000000)" stroke="#FFFFFF" stroke-width="2">
-            <g id="图标/通用/返回" transform="translate(40.000000, 13.000000)">
-                <polyline id="Stroke-1" points="13.5 18 5 9.5 13.5 1"></polyline>
-            </g>
-        </g>
-    </g>
-</svg>

src/views/coursewarePlay/index.module.less

@@ -31,9 +31,9 @@
   right: 0;
   z-index: 10;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
-  height: 40px;
+  // height: 40px;
   background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent);
   transition: transform 0.5s;
   box-sizing: border-box;
@@ -48,15 +48,46 @@
   height: 100%;
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
   z-index: 10;
-  padding: 0 15px;
+  font-size: 18px;
+  padding: 12px 15px 20px 40px;
 
   :global {
     .van-icon {
       margin-right: 8px;
     }
   }
+
+  .titleSection {
+    .title {
+      font-weight: 600;
+      font-size: 16px;
+      color: #ffffff;
+      line-height: 22px;
+    }
+  }
+  .titleContent {
+    display: flex;
+    align-items: center;
+    padding-top: 6px;
+    p {
+      font-size: 14px;
+      color: #ffffff;
+      line-height: 20px;
+    }
+    span {
+      margin-left: 6px;
+      font-size: 11px;
+      color: #ffffff;
+      line-height: 1.4;
+      background: rgba(0, 0, 0, 0.1);
+      border-radius: 10px;
+      border: 1px solid rgba(255, 255, 255, 0.7);
+      padding: 2px 8px;
+      box-sizing: content-box;
+    }
+  }
 }
 
 .headRight {
@@ -66,18 +97,26 @@
   align-items: center;
   margin-left: auto;
   height: 100%;
-  padding-right: 15px;
+  padding-right: 40px;
+  padding-top: 12px;
+
+  .pointBtn {
+    font-weight: 600;
+    font-size: 14px;
+    color: #FFFFFF;
+    line-height: 20px;
+    padding-right: 20px;
+  }
 
   .rightBtn {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100%;
-    padding: 0 10px;
 
     img {
-      width: 22px;
-      height: 22px;
+      width: 24px;
+      height: 24px;
       display: block;
     }
   }
@@ -139,7 +178,7 @@
   }
 
   &.acitveAnimation {
-    transition-duration: .8s;
+    transition-duration: 0.8s;
   }
 
   &.show {
@@ -164,8 +203,9 @@
 }
 
 .fullBtn {
-  width: 38px;
-  height: 46px;
+  width: 24px;
+  height: 24px;
+  padding: 10px 9px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -177,6 +217,11 @@
   &:active {
     background: rgba(255, 255, 255, 0.2);
   }
+
+  img {
+    width: inherit;
+    height: inherit;
+  }
 }
 
 .rightFixedBtns {
@@ -186,9 +231,6 @@
   right: 12px;
   z-index: 10;
 
-  .btnsBottom {
-    margin-top: 10px;
-  }
 }
 
 .leftFixedBtns {
@@ -198,15 +240,18 @@
   left: 12px;
   z-index: 10;
 
+  background: rgba(0, 0, 0, 0.4);
+  border-radius: 7px;
+
   .prePoint {
     margin-bottom: 8px;
   }
 }
 
 .btnsWrap {
-  background: rgba(51, 51, 51, 0.4);
-  border-radius: 6px;
-  overflow: hidden;
+  // background: rgba(51, 51, 51, 0.4);
+  // border-radius: 6px;
+  // overflow: hidden;
 }
 
 .bottomFixedContainer {
@@ -248,7 +293,7 @@
       display: flex;
     }
 
-    .actionBtn>img {
+    .actionBtn > img {
       width: 30px;
       height: 30px;
       display: block;
@@ -266,7 +311,6 @@
 }
 
 :global {
-
   .top-enter-active,
   .top-leave-active {
     transition: transform 0.5s;
@@ -312,9 +356,9 @@
 
 .loadWrap {
   position: absolute;
-  left: -6Px;
+  left: -6px;
   top: 0;
-  right: -6Px;
+  right: -6px;
   bottom: 0;
   background: linear-gradient(45deg, #21232a, #111218);
   display: flex;
@@ -322,13 +366,20 @@
   align-items: center;
 }
 
+.playRecordTimeWrap {
+  position: absolute;
+  top: 11px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
 .playRecordTime {
-  width: 90px;
-  margin-right: 10px;
+  // width: 90px;
+  // margin-right: 10px;
   background: rgba(0, 0, 0, 0.4);
   border-radius: 20px;
   font-size: 12px;
-  padding: 6px;
+  padding: 6px 8px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -338,26 +389,26 @@
     width: 5px;
     height: 5px;
     background: #ff4e19;
-    border: 0.5px solid #ffffff;
+    // border: 0.5px solid #ffffff;
     border-radius: 50%;
-    margin-right: 3px;
-    animation: loadFade 1s ease-in-out infinite;
+    margin-right: 6px;
+    // animation: loadFade 1s ease-in-out infinite;
   }
 }
 
-@keyframes loadFade {
-  0% {
-    opacity: 0;
-  }
+// @keyframes loadFade {
+//   0% {
+//     opacity: 0;
+//   }
 
-  50% {
-    opacity: 0.5;
-  }
+//   50% {
+//     opacity: 0.5;
+//   }
 
-  100% {
-    opacity: 1;
-  }
-}
+//   100% {
+//     opacity: 1;
+//   }
+// }
 
 .swiperContainer {
   :global {
@@ -380,10 +431,9 @@
   right: 12px;
   bottom: 60px;
   z-index: 11;
-  transition: all .5s ease;
-
+  transition: all 0.5s ease;
 
   &.hide {
     transform: translateX(66px);
   }
-}
+}

src/views/coursewarePlay/index.tsx

@@ -11,7 +11,7 @@ import {
   computed,
   onBeforeUnmount
 } from 'vue'
-import iconBack from './image/back.svg'
+import iconBack from './image/back.png'
 import styles from './index.module.less'
 import 'plyr/dist/plyr.css'
 import request from '@/helpers/request'
@@ -20,9 +20,9 @@ import { useRoute } from 'vue-router'
 import { listenerMessage, postMessage, promisefiyPostMessage } from '@/helpers/native-message'
 import qs from 'query-string'
 import MusicScore from './component/musicScore'
-import iconDian from './image/icon-dian.svg'
-import iconPoint from './image/icon-point.svg'
-import { iconUp, iconDown, iconPen, iconTouping, iconMenu } from './image/icons.json'
+// import iconDian from './image/icon-dian.svg'
+// import iconPoint from './image/icon-point.svg'
+import { iconUp, iconDown, iconPen, iconTouping, iconMenu, iconCourseType } from './image/icons.json'
 import Points from './component/points'
 import { browser } from '@/helpers/utils'
 import { Vue3Lottie } from 'vue3-lottie'
@@ -68,7 +68,7 @@ export default defineComponent({
     }
     const handleInit = (type = 0) => {
       //设置容器16:9
-      setContainer()
+      // setContainer()
       // 横屏
       postMessage(
         {
@@ -965,59 +965,10 @@ export default defineComponent({
                       zIndex: 15,
                       opacity: 1
                     }
-                  : { opacity: 0, zIndex: -1, pointerEvents: "none" }
+                  : { opacity: 0, zIndex: -1, pointerEvents: 'none' }
               }
               class={styles.itemDiv}
             >
-              {/* <VideoItem
-                ref={(el: any) => (data.videoItemRef = el)}
-                item={activeVideoItem.value}
-                activeModel={activeData.model}
-                onClose={setModelOpen}
-                onPlay={() => {
-                  data.videoState = 'play'
-
-                  // 设置视频时长
-                  const videoTime = data.videoItemRef.getPlyrRef().duration || 0
-                  data.itemList[popupData.activeIndex].videoTime = Math.floor(videoTime)
-                }}
-                onPause={() => {
-                  clearTimeout(activeData.timer)
-                  activeData.model = true
-                  videoIntervalRef.pause()
-                }}
-                onEnded={async () => {
-                  const _index = popupData.activeIndex + 1
-                  if (_index < data.itemList.length) {
-                    handleSwipeChange(_index)
-                  } else {
-                    // 说明是最后一个
-                    intervalFnRef.value.pause()
-                    // 同步数据时先进行有效时间进行保存
-                    initVideoCount(false, true)
-                    await updateStat()
-                  }
-                }}
-                onSeeked={() => {
-                  videoIntervalRef.isActive.value && videoIntervalRef.pause()
-                }}
-                onSeeking={() => {
-                  videoIntervalRef.isActive.value && videoIntervalRef.pause()
-                }}
-                onWaiting={() => {
-                  videoIntervalRef.isActive.value && videoIntervalRef.pause()
-                }}
-                onTimeupdate={() => {
-                  const activeVideoRef = data.videoItemRef?.getPlyrRef()
-                  if (
-                    !videoIntervalRef.isActive.value &&
-                    activeVideoRef?.currentTime > 0 &&
-                    activeVideoRef?.playing
-                  ) {
-                    videoIntervalRef.resume()
-                  }
-                }}
-              /> */}
               <VideoPlay
                 ref={(el: any) => (data.videoItemRef = el)}
                 item={activeVideoItem.value}
@@ -1118,59 +1069,6 @@ export default defineComponent({
                       : {}
                   }
                 >
-                  {/* {m.type === 'VIDEO' && (
-                      <>
-                        <VideoPlay
-                          ref={(v: any) => (data.videoRefs[mIndex] = v)}
-                          item={m}
-                          isActive={activeEle}
-                          isEmtry={isEmtry}
-                          onPrepare={(val) => {
-                            m.isprepare = val
-                          }}
-                          onLoadedmetadata={(videoItem: any) => {
-                            m.videoEle = videoItem
-                            if (!m.isprepare) {
-                              m.isprepare = true
-                            }
-                          }}
-                          onTogglePlay={(paused: boolean) => {
-                            // console.log('播放切换', paused)
-                            if (!m.isprepare) {
-                              m.isprepare = true
-                            }
-                            m.autoPlay = false
-                            if (paused || popupData.open || popupData.guideOpen) {
-                              clearTimeout(activeData.timer)
-                            } else {
-                              setModelOpen()
-                            }
-                          }}
-                          onEnded={() => {
-                            const _index = popupData.activeIndex + 1
-                            if (_index < data.itemList.length) {
-                              handleSwipeChange(_index)
-                            }
-                          }}
-                          onReset={() => {
-                            if (!m.videoEle?.paused) {
-                              setModelOpen()
-                            }
-                          }}
-                          onError={() => {
-                            // 视屏异常
-                            m.error = true
-                          }}
-                        />
-                        <Transition name="van-fade">
-                          {!m.isprepare && (
-                            <div class={styles.loadWrap}>
-                              <Vue3Lottie animationData={playLoadData}></Vue3Lottie>
-                            </div>
-                          )}
-                        </Transition>
-                      </>
-                    )} */}
                   <Transition name="van-fade">
                     {m.type === 'VIDEO' &&
                       data.animationState !== 'end' &&
@@ -1226,87 +1124,43 @@ export default defineComponent({
               )
             })}
           </div>
-          <Transition name="right">
-            {activeData.model && (
-              <div
-                class={styles.rightFixedBtns}
-                onClick={(e: Event) => {
-                  e.stopPropagation()
-                  clearTimeout(activeData.timer)
-                }}
-              >
-                <div class={styles.btnsWrap}>
-                  <div
-                    class={[styles.fullBtn, styles.point]}
-                    onClick={() => (popupData.open = true)}
-                  >
-                    <img src={iconMenu} />
-                    <span>知识点</span>
-                  </div>
-                </div>
-
-                <div class={[styles.btnsWrap, styles.btnsBottom]}>
-                  {/* <div class={styles.fullBtn} onClick={() => (popupData.guideOpen = true)}>
-                      <img src={iconTouping} />
-                      <span>投屏</span>
-                    </div> */}
-                  {data.isCourse && (
-                    <>
-                      <div class={styles.fullBtn} onClick={() => gotoRollCall('student_roll_call')}>
-                        <img src={iconDian} />
-                        <span>点名</span>
-                      </div>
-                      <div class={styles.fullBtn} onClick={() => gotoRollCall('sign_out')}>
-                        <img src={iconPoint} />
-                        <span>签退</span>
-                      </div>
-                    </>
-                  )}
-                </div>
-              </div>
-            )}
-          </Transition>
 
           <Transition name="left">
             {activeData.model && (
               <div class={styles.leftFixedBtns} onClick={(e: Event) => e.stopPropagation()}>
+                <div class={[styles.btnsWrap, styles.prePoint]}>
+                  <div class={styles.fullBtn} onClick={() => (popupData.open = true)}>
+                    <img src={iconCourseType} />
+                  </div>
+                  <div class={styles.fullBtn} onClick={() => (popupData.open = true)}>
+                    <img src={iconMenu} />
+                    {/* <span>知识点</span> */}
+                  </div>
                 {popupData.activeIndex != 0 && (
-                  <div class={[styles.btnsWrap, styles.prePoint]}>
+                  
                     <div
                       class={styles.fullBtn}
                       onClick={() => {
-                        // useThrottleFn(() => {
-                        //   handlePreAndNext('up')
-                        // }, 300)
-                        // onChangeSwiper('up')
                         handlePreAndNext('up')
                       }}
                     >
                       <img src={iconUp} />
-                      <span style={{ textAlign: 'center' }}>上一个</span>
+                      {/* <span style={{ textAlign: 'center' }}>上一个</span> */}
                     </div>
-                  </div>
+                 
                 )}
                 {popupData.activeIndex != data.itemList.length - 1 && (
-                  <div class={styles.btnsWrap}>
                     <div
                       class={styles.fullBtn}
                       onClick={() => {
-                        // console.log('click down')
-                        // useThrottleFn(() => {
-                        //   console.log('click down pass')
-                        //   handlePreAndNext('down')
-                        // }, 300)
-                        // onChangeSwiper('down')
                         handlePreAndNext('down')
-                        
                       }}
                     >
-                      <span style={{ textAlign: 'center' }}>下一个</span>
+                      {/* <span style={{ textAlign: 'center' }}>下一个</span> */}
                       <img src={iconDown} />
                     </div>
-                  </div>
                 )}
+                 </div>
               </div>
             )}
           </Transition>
@@ -1320,10 +1174,17 @@ export default defineComponent({
         >
           <div class={styles.backBtn} onClick={() => goback()}>
             <Icon name={iconBack} />
-            返回
+            <div class={styles.titleSection}>
+              <div class={styles.title}>{popupData.tabName}</div>
+              <div class={styles.titleContent}>
+                <p>第3条练习6-15小节-演奏-练习</p>
+                <span>阶段目标</span>
+                <span>检查事项</span>
+              </div>
+            </div>
           </div>
           {data.isCourse && <PlayRecordTime ref={playRef} list={data.knowledgePointList} />}
-          <div
+          {/* <div
             class={styles.menu}
             onClick={() => {
               const _effectIndex = effectIndex.value + 1
@@ -1332,9 +1193,9 @@ export default defineComponent({
             }}
           >
             {popupData.tabName}
-          </div>
+          </div> */}
 
-          {state.platformType == 'TEACHER' && (
+          {state.platformType !== 'TEACHER' && (
             <div
               class={styles.headRight}
               onClick={(e: Event) => {
@@ -1342,10 +1203,22 @@ export default defineComponent({
                 clearTimeout(activeData.timer)
               }}
             >
+              {data.isCourse && (
+                <>
+                  <div class={styles.pointBtn} onClick={() => gotoRollCall('student_roll_call')}>
+                    {/* <img src={iconDian} /> */}
+                    <span>点名</span>
+                  </div>
+                  <div class={styles.pointBtn} onClick={() => gotoRollCall('sign_out')}>
+                    {/* <img src={iconPoint} /> */}
+                    <span>签退</span>
+                  </div>
+                </>
+              )}
               <div class={styles.rightBtn} onClick={() => (popupData.guideOpen = true)}>
                 <img src={iconTouping} />
               </div>
-              <div
+              {/* <div
                 class={styles.rightBtn}
                 onClick={() => {
                   openStudyTool({
@@ -1356,7 +1229,7 @@ export default defineComponent({
                 }}
               >
                 <img src={iconPen} />
-              </div>
+              </div> */}
               {/* <div class={styles.rightBtn} onClick={() => (popupData.toolOpen = true)}>
                 <img src={iconMore} />
               </div> */}