添加显示

src/views/coursewarePlay/image/icon-go-practice.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <g id="新改动" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="课件播放（伴学端）" transform="translate(-698.000000, -166.000000)" stroke="#FFFFFF">
+            <g id="编组-4" transform="translate(689.000000, 163.000000)">
+                <g id="编组-2" transform="translate(3.000000, 3.000000)">
+                    <g id="编组-79" transform="translate(6.000000, 0.000000)">
+                        <g id="我的资源/云朵粉备份-3" fill-rule="nonzero">
+                            <g id="编组-20" transform="translate(2.000000, 3.000000)">
+                                <g id="椭圆形" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.12307692">
+                                    <path d="M17.7830786,7.02705514 C16.8836429,3.00549482 13.2928069,0 9,0 C4.02943725,0 0,4.02943725 0,9 C0,13.9705627 4.02943725,18 9,18" id="路径"></path>
+                                </g>
+                                <path d="M5.17597018,4.22957298 C4.56447504,4.70533282 4.02190328,5.13180826 3.71489796,6.03799065" id="路径" stroke-width="1.47692308" stroke-linecap="round" stroke-linejoin="round"></path>
+                                <circle id="椭圆形" stroke-width="1.84615385" cx="8.99714286" cy="9" r="2.63736264"></circle>
+                            </g>
+                        </g>
+                        <g id="编组-78" transform="translate(13.714286, 12.514286)" stroke-width="2.12307692">
+                            <ellipse id="椭圆形" fill-rule="nonzero" cx="3" cy="6.76879475" rx="3" ry="2.14285714"></ellipse>
+                            <polyline id="路径-34" stroke-linecap="round" stroke-linejoin="round" points="6 6.76879475 6 1.4138667 8.13997548 -4.42840544e-17"></polyline>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/exercise-after-class/index.module.less

@@ -4,11 +4,14 @@
   background-color: #000;
   overflow: hidden;
 }
+
 .coursewarePlay {
   position: relative;
   height: 100vh;
   margin: 0 auto;
+  overflow: hidden;
 }
+
 .playModel {
   position: absolute;
   left: 0;
@@ -18,6 +21,7 @@
   box-shadow: inset 0px 0px 164px 0px rgba(0, 0, 0, 1);
   pointer-events: none;
 }
+
 .headerContainer {
   position: fixed;
   top: 0;
@@ -31,6 +35,7 @@
   font-size: 12px;
   background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent);
 }
+
 .backBtn {
   color: #fff;
   width: 40px;
@@ -40,25 +45,59 @@
   align-items: center;
   z-index: 10;
 }
+
+.btnGroup {
+  position: absolute;
+  top: 50%;
+  right: 12px;
+  z-index: 10;
+  transform: translateY(-50%);
+
+  .btnItem {
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 6px;
+    width: 42px;
+    height: 50px;
+    font-size: 12px;
+    color: #FFFFFF;
+    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.13);
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    cursor: pointer;
+  }
+
+  .btnImg {
+    width: 24px;
+    height: 24px;
+    margin-bottom: 2px;
+  }
+}
+
 .menu {
   flex: 1;
   display: flex;
   justify-content: center;
   color: #fff;
 }
+
 .tabsContent {
   width: 100vw;
   height: 100vh;
+
   :global {
     .van-tabs__wrap {
       display: none !important;
     }
+
     .van-tabs__content {
       width: 100%;
       height: 100%;
     }
   }
 }
+
 .loadWrap {
   position: absolute;
   left: 0;
@@ -70,14 +109,17 @@
   justify-content: center;
   align-items: center;
 }
+
 .itemDiv {
   position: relative;
   width: 100%;
   height: 100%;
+
   video {
     width: 100%;
     height: 100%;
   }
+
   img {
     display: block;
     width: 100%;
@@ -85,6 +127,7 @@
     object-fit: contain;
   }
 }
+
 .videoModel {
   position: absolute;
   top: 0;
@@ -94,35 +137,42 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  & > img {
+
+  &>img {
     width: 50px;
     height: 50px;
   }
 }
+
 .rightFixedBtns {
   position: fixed;
   top: 50%;
   transform: translateY(-50%);
   right: 20px;
+
   .point {
     margin-top: 10px;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
   }
-  .point + .fullBtn {
+
+  .point+.fullBtn {
     border-top-left-radius: 0;
     border-top-right-radius: 0;
   }
 }
+
 .leftFixedBtns {
   position: fixed;
   top: 50%;
   transform: translateY(-50%);
   left: 20px;
+
   .prePoint {
     margin-bottom: 8px;
   }
 }
+
 .fullBtn {
   width: 38px;
   height: 55px;
@@ -133,10 +183,12 @@
   align-items: center;
   color: #fff;
   justify-content: space-evenly;
+
   &:active {
     opacity: 0.8;
   }
 }
+
 .bottomFixedContainer {
   position: absolute;
   left: 0;
@@ -145,6 +197,7 @@
   z-index: 10;
   background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent);
   padding: 0 30px;
+
   .time {
     display: flex;
     justify-content: space-between;
@@ -152,19 +205,23 @@
     font-size: 10px;
     padding: 4px 0;
   }
+
   .slider {
     padding: 10px 0;
   }
+
   .actions {
     display: flex;
     justify-content: space-between;
     color: #fff;
     font-size: 12px;
     align-items: center;
+
     .actionBtn {
       display: flex;
     }
-    .actionBtn > img {
+
+    .actionBtn>img {
       width: 26px;
       height: 26px;
       display: block;
@@ -172,17 +229,22 @@
     }
   }
 }
+
 .popup {
   background: rgba(0, 0, 0, 0.5);
 }
+
 .overlayClass {
   --van-overlay-background: transparent;
 }
+
 :global {
+
   .top-enter-active,
   .top-leave-active {
     transition: transform 0.5s;
   }
+
   .top-enter-from,
   .top-leave-to {
     transform: translateY(-100%);
@@ -192,6 +254,7 @@
   .left-leave-active {
     transition: all 0.5s;
   }
+
   .left-enter-from,
   .left-leave-to {
     left: -60px;
@@ -216,4 +279,4 @@
   .bottom-leave-to {
     transform: translateY(100%);
   }
-}
+}

src/views/exercise-after-class/index.tsx

@@ -21,6 +21,7 @@ import iconLoop from '../coursewarePlay/image/icon-loop.svg'
 import iconLoopActive from '../coursewarePlay/image/icon-loop-active.svg'
 import iconplay from '../coursewarePlay/image/icon-play.svg'
 import iconpause from '../coursewarePlay/image/icon-pause.svg'
+import iconGoPractice from '../coursewarePlay/image/icon-go-practice.svg'
 import iconVideobg from '../coursewarePlay/image/icon-videobg.png'
 import { browser, getSecondRPM } from '@/helpers/utils'
 import qs from 'query-string'
@@ -28,6 +29,7 @@ import { Vue3Lottie } from 'vue3-lottie'
 import playLoadData from '../coursewarePlay/datas/data.json'
 import { handleCheckVip } from '../hook/useFee'
 import item from '@/student/coupons/item'
+import { usePageVisibility } from '@vant/use'
 
 const materialType = {
   视频: 'VIDEO',
@@ -38,14 +40,15 @@ const materialType = {
 export default defineComponent({
   name: 'exercise-after-class',
   setup() {
+    const pageVisibility = usePageVisibility()
     /** 设置播放容器 16:9 */
     const parentContainer = reactive({
       width: '100vw'
     })
     const setContainer = () => {
-      let min = Math.min(screen.width, screen.height)
-      let max = Math.max(screen.width, screen.height)
-      let width = min * (16 / 9)
+      const min = Math.min(screen.width, screen.height)
+      const max = Math.max(screen.width, screen.height)
+      const width = min * (16 / 9)
       if (width > max) {
         parentContainer.width = '100vw'
         return
@@ -306,7 +309,7 @@ export default defineComponent({
                   lessonTrainingId: query.lessonTrainingId,
                   materialId: nextItem.materialId
                 })
-                let src = `${location.origin}/orchestra-music-score/?` + parmas
+                const src = `${location.origin}/orchestra-music-score/?` + parmas
                 postMessage({
                   api: 'openAccompanyWebView',
                   content: {
@@ -328,6 +331,36 @@ export default defineComponent({
       }
     }
 
+    watch(pageVisibility, (value: any) => {
+      console.log('watch', value)
+      if (value == 'visible') {
+        // 横屏
+        postMessage(
+          {
+            api: 'setRequestedOrientation',
+            content: {
+              orientation: 0
+            }
+          },
+          () => {
+            console.log(234)
+          }
+        )
+      }
+    })
+
+    // 去练习
+    const gotoPractice = () => {
+      const url = window.location.origin + location.pathname + `#/accompany`
+      postMessage({
+        api: 'openWebView',
+        content: {
+          url: url,
+          orientation: 1
+        }
+      })
+    }
+
     return () => (
       <div class={styles.playContent}>
         <div class={styles.coursewarePlay} style={{ width: parentContainer.width }}>
@@ -459,12 +492,22 @@ export default defineComponent({
                 </div>
                 <div class={styles.menu}>{popupData.tabName}</div>
                 <div class={styles.nums}>
-                  练习次数：{data.videoData?.trainingTimes || 0}/
+                  观看视频模仿并练习：{data.videoData?.trainingTimes || 0}/
                   {data.videoData?.trainingContent?.practiceTimes || 0}
                 </div>
               </div>
             )}
           </Transition>
+          <Transition name="right">
+            {activeData.model && (
+              <div class={styles.btnGroup}>
+                <div class={styles.btnItem} onClick={gotoPractice}>
+                  <img src={iconGoPractice} class={styles.btnImg} />
+                  <span>去练习</span>
+                </div>
+              </div>
+            )}
+          </Transition>
         </div>
       </div>
     )

src/views/unit-test/model/play-question/index.module.less

@@ -4,7 +4,8 @@
   background-color: #fff;
   // overflow: hidden;
   border-radius: 10px;
-  & + .unitSubject {
+
+  &+.unitSubject {
     margin-top: 12px;
   }
 }
@@ -18,6 +19,7 @@
   padding: 15px 12px;
   background: #ffebdd;
   border-radius: 10px;
+
   .img {
     width: 45px;
     height: 45px;
@@ -25,10 +27,26 @@
   }
 
   .playTitle {
-    font-size: 16px;
-    font-weight: 500;
-    color: #333333;
+    font-size: 15px;
+    font-weight: 600;
+    color: #753015;
   }
+
+  .playLabel {
+    margin-top: 2px;
+
+    span {
+      background: #FFF3EB;
+      border-radius: 9px;
+      padding: 1px 6px 0;
+      border: 1px solid #FE9751;
+      font-size: 12px;
+      font-weight: 500;
+      color: #F16D15;
+      line-height: 17px;
+    }
+  }
+
   .playBtn {
     flex-shrink: 0;
     font-size: 15px;
@@ -43,20 +61,52 @@
   margin-top: 25px;
   padding-top: 20px;
   text-align: center;
+
+  .unitScoreNumSection {
+    display: flex;
+    padding-bottom: 20px;
+
+    &>div {
+      flex: 1;
+    }
+
+    .passScore {
+      position: relative;
+
+      .score {
+        color: #30B883;
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        right: 0;
+        top: 50%;
+        margin-top: -16px;
+        display: inline-block;
+        width: 1px;
+        height: 33px;
+        background: #F2F2F2;
+      }
+    }
+  }
+
   .score {
     font-size: 32px;
     font-weight: bold;
     color: #f67146;
+    font-family: DINAlternate, DINAlternate;
   }
+
   .scoreTitle {
     font-size: 16px;
     font-weight: 500;
     color: #333333;
-    padding: 4px 0 10px;
+    padding: 8px 0 0;
   }
 
   .scoreTips {
     font-size: 12px;
     color: #aaaaaa;
   }
-}
+}

src/views/unit-test/model/play-question/index.tsx

@@ -215,10 +215,17 @@ export default defineComponent({
                 class={styles.playSection}
                 center
                 titleClass={['van-ellipsis', styles.playTitle]}
+                labelClass={styles.playLabel}
               >
                 {{
                   icon: () => <Image class={styles.img} src={iconSong} />,
                   title: () => <>{questionExtendsInfo.value.musicName}</>,
+                  label: () => (
+                    <span>
+                      {questionExtendsInfo.value.start || 0}-{questionExtendsInfo.value.end || 0}
+                      小节
+                    </span>
+                  ),
                   value: () => (
                     <Button
                       round
@@ -237,8 +244,16 @@ export default defineComponent({
 
             {(!props.readOnly || props.showScore) && (
               <div class={['van-hairline--top', styles.unitScoreNum]}>
-                <div class={styles.score}>{state.score}</div>
-                <div class={styles.scoreTitle}>评测分数</div>
+                <div class={styles.unitScoreNumSection}>
+                  <div class={[styles.unitScoreNumItem, styles.passScore]}>
+                    <div class={styles.score}>{questionExtendsInfo.value.score || 0}</div>
+                    <div class={styles.scoreTitle}>合格分数</div>
+                  </div>
+                  <div class={styles.unitScoreNumItem}>
+                    <div class={styles.score}>{state.score}</div>
+                    <div class={styles.scoreTitle}>评测分数</div>
+                  </div>
+                </div>
                 {!props.showScore && (
                   <div class={styles.scoreTips}>多次评测取完整评测的最高分数</div>
                 )}