课程播放

package.json

@@ -14,14 +14,18 @@
       "axios": "^1.3.6",
       "core-js": "^3.8.3",
       "element-plus": "^2.6.1",
+      "html2canvas": "^1.4.1",
       "js-cookie": "^3.0.5",
       "md5": "^2.3.0",
       "nprogress": "^0.2.0",
       "pinia": "^2.0.35",
+      "plyr": "^3.7.8",
       "qrcode.vue": "^3.4.1",
       "screenfull": "^6.0.2",
+      "vant": "^4.8.7",
       "vue": "^3.2.13",
-      "vue-router": "^4.0.3"
+      "vue-router": "^4.0.3",
+      "vue3-lottie": "^3.3.0"
    },
    "devDependencies": {
       "@types/js-cookie": "^3.0.3",

src/api/cloudTextbooks.api.ts

@@ -13,10 +13,18 @@ export const queryLessonCourseware_gym = () => {
    })
 }
 
-// 课程详情
+// 课程详情列表
 export const getLessonCoursewareCourseList_gym = (id: string) => {
    return httpAxios_gym.axioseRquest({
       method: "get",
       url: "/api-teacher/lessonCourseware/getLessonCoursewareCourseList/" + id
    })
 }
+
+// 课程详情
+export const getLessonCourseDetail_gym = (id: string) => {
+   return httpAxios_gym.axioseRquest({
+      method: "get",
+      url: "/api-teacher/lessonCourseware/getLessonCourseDetail/" + id
+   })
+}

src/config/menus.ts

@@ -28,7 +28,7 @@ export const menus_gym: menuType[] = [
       title: "云教材",
       icon: "",
       meta: {
-         routeType: "layout"
+         routeType: "singlepage"
       },
       children: []
    }

src/router/modules.ts

@@ -1,4 +1,5 @@
 export default {
    homePage_gym: () => import("@/views/homePage/homePage_gym.vue"),
-   homePage_gyt: () => import("@/views/homePage/homePage_gyt.vue")
+   homePage_gyt: () => import("@/views/homePage/homePage_gyt.vue"),
+   cloudTextbooks: () => import("@/views/coursewarePlay") // 云教材
 }

src/views/coursewarePlay/component/musicScore.module.scss

@@ -0,0 +1,83 @@
+.musicScore {
+   position: relative;
+   width: 100%;
+   height: 100%;
+   -webkit-overflow-scrolling: touch;
+   overflow: scroll;
+   .container {
+      position: relative;
+      display: block;
+      border: none;
+      width: 100%;
+      height: 100%;
+      z-index: 10;
+   }
+   .musicModel {
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+   }
+}
+.errorModel {
+   position: absolute;
+   left: 0;
+   top: 0;
+   right: 0;
+   bottom: 0;
+   background: #000;
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   overflow: hidden;
+}
+
+.startBtn {
+   position: absolute;
+   left: 50%;
+   bottom: 6vh;
+   transform: translateX(-50%);
+   z-index: 11;
+   &:active {
+      opacity: 0.8;
+   }
+}
+.loading {
+   position: absolute;
+   left: 4%;
+   top: 50%;
+   margin-top: -15px;
+}
+.skeletonWrap {
+   position: absolute;
+   left: 0;
+   top: 0;
+   right: 0;
+   height: 100%;
+   z-index: 1;
+   padding-top: 1.2rem;
+   display: flex;
+   flex-direction: column;
+   justify-content: center;
+   overflow: hidden;
+   background: #fff;
+   pointer-events: none;
+}
+.skeleton {
+   --van-skeleton-paragraph-height: 24px;
+   :global {
+      .van-skeleton__content {
+         .van-skeleton-paragraph {
+            margin: 12px auto;
+            width: 80% !important;
+            &:first-child {
+               width: 60% !important;
+            }
+            &:last-child {
+               width: 100% !important;
+            }
+         }
+      }
+   }
+}

src/views/coursewarePlay/component/musicScore.tsx

@@ -0,0 +1,139 @@
+import { defineComponent, ref, watch } from "vue"
+import styles from "./musicScore.module.scss"
+// import qs from "query-string"
+import iconStart from "../image/icon-start.svg"
+import { listenerMessage, postMessage } from "../helpers/native-message"
+import { Skeleton } from "vant"
+import { usePageVisibility } from "@vant/use"
+import { useRoute } from "vue-router"
+import { browser } from "../helpers/utils"
+
+export default defineComponent({
+   name: "musicScore",
+   props: {
+      music: {
+         type: Object,
+         default: () => ({})
+      },
+      activeModel: {
+         type: Boolean
+      }
+   },
+   emits: ["setIframe"],
+   setup(props, { emit }) {
+      const browserInfo = browser()
+      const route = useRoute()
+      const isLoading = ref(false)
+      const pageVisibility = usePageVisibility()
+      /** 页面显示和隐藏 */
+      watch(pageVisibility, value => {
+         console.log("🚀 ~ value:", value)
+         if (value == "hidden") {
+            isLoading.value = false
+         }
+      })
+      const iframeRef = ref()
+      const isLoaded = ref(false)
+      const renderError = ref(false)
+      const renderSuccess = ref(false)
+      const Authorization = sessionStorage.getItem("Authorization") || ""
+      const origin = /(localhost|192)/.test(location.host) ? "https://test.lexiaoya.cn" : location.origin
+      // const query = qs.stringify({
+      //    id: props.music.content,
+      //    modelType: "practice",
+      //    headerHeight: 32,
+      //    Authorization: Authorization
+      // })
+      const query = JSON.stringify({
+         id: props.music.content,
+         modelType: "practice",
+         headerHeight: 32,
+         Authorization: Authorization
+      })
+      const src = `${origin}/orchestra-music-score/?` + query
+      const checkView = () => {
+         fetch(src)
+            .then(() => {
+               renderSuccess.value = true
+               renderError.value = false
+            })
+            .catch(() => {
+               renderError.value = true
+            })
+      }
+      watch(props.music, () => {
+         if (renderSuccess.value) return
+         renderError.value = false
+         if (props.music.display) {
+            checkView()
+         }
+      })
+
+      // 去云教练完整版
+      const gotoAccomany = () => {
+         if (isLoading.value) return
+         if (!browserInfo.ios) {
+            isLoading.value = true
+         }
+         // const parmas = qs.stringify({
+         //    id: props.music.content
+         // })
+         const parmas = JSON.stringify({
+            id: props.music.content
+         })
+         const src = `${location.origin}/orchestra-music-score/?` + parmas
+         postMessage(
+            {
+               api: "openAccompanyWebView",
+               content: {
+                  url: src,
+                  orientation: 0,
+                  isHideTitle: true,
+                  statusBarTextColor: false,
+                  isOpenLight: true
+               }
+            },
+            () => {
+               if (browserInfo.ios) {
+                  isLoading.value = true
+               }
+            }
+         )
+      }
+      listenerMessage("webViewOnResume", () => {
+         isLoading.value = false
+      })
+
+      return () => (
+         <div class={styles.musicScore}>
+            <iframe
+               ref={iframeRef}
+               onLoad={() => {
+                  emit("setIframe", iframeRef.value)
+                  isLoaded.value = true
+               }}
+               class={[styles.container, "musicIframe"]}
+               frameborder="0"
+               src={src}
+            ></iframe>
+            {route.query.source == "my-course" && isLoaded.value && (
+               <div
+                  style={{
+                     display: props.activeModel ? "" : "none"
+                  }}
+                  class={styles.startBtn}
+                  onClick={(e: Event) => {
+                     e.stopPropagation()
+                     gotoAccomany()
+                  }}
+               >
+                  <img src={iconStart} />
+               </div>
+            )}
+            <div class={styles.skeletonWrap}>
+               <Skeleton class={styles.skeleton} row={8} />
+            </div>
+         </div>
+      )
+   }
+})

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

@@ -0,0 +1,134 @@
+.container {
+   display: flex;
+   flex-direction: column;
+   min-width: 288px;
+   max-width: 288px;
+   height: 100vh;
+   color: #fff;
+   font-size: 12px;
+   box-sizing: border-box;
+}
+.pointHead {
+   display: flex;
+   align-items: center;
+   padding: 13px 10px 15px 15px;
+   flex-shrink: 0;
+   font-size: 18px;
+   img {
+      width: 16px;
+      height: 16px;
+      margin-right: 7px;
+   }
+}
+.content {
+   flex: 1;
+   overflow-y: auto;
+   padding: 0 20px;
+}
+.collapse {
+   &.childActive {
+      :global {
+         .van-cell {
+            color: #fff;
+         }
+      }
+      .arrow {
+         opacity: 1;
+      }
+   }
+   &:after {
+      display: none;
+      border-width: 0;
+   }
+
+   .borderTop {
+      border-top: 1px solid rgba(255, 255, 255, 0.2);
+   }
+   :global {
+      .van-cell {
+         background: transparent;
+         font-size: 16px;
+         color: rgba(255, 255, 255, 0.5);
+         padding: 6px 0;
+      }
+      .van-cell__title {
+         font-weight: 600;
+      }
+      .van-collapse-item__title--expanded {
+         color: #fff;
+      }
+      .van-collapse-item--border:after {
+         display: none;
+      }
+      .van-collapse-item__content {
+         background: transparent;
+         color: #fff;
+         font-size: 10px;
+         padding: 0 0 6px;
+      }
+
+      // .van-hairline--top:after {
+      //   border-color: var(--van-border-color) !important;
+      // }
+
+      // .van-collapse-item {
+      //   border-top: 1px solid rgba(255, 255, 255, 0.2);
+      // }
+   }
+   .childCollapseItem {
+      padding-left: 16px;
+      border-top: 0;
+      :global {
+         .van-cell {
+            padding-left: 0;
+            font-size: 16px;
+         }
+         .van-collapse-item__content {
+            padding-left: 0px;
+         }
+      }
+   }
+   .arrow {
+      display: block;
+      width: 10px;
+      height: 10px;
+      margin-right: 6px;
+      transition: all 0.3s;
+      opacity: 0.5;
+   }
+   :global(.van-collapse-item__title--expanded) {
+      .arrow {
+         transform: rotate(90deg);
+         opacity: 1;
+      }
+   }
+}
+.item {
+   display: flex;
+   align-items: center;
+   justify-content: flex-start;
+   padding: 4px 5px 4px 0;
+   border-radius: 6px;
+   font-size: 15px;
+   :global {
+      .van-icon {
+         display: none;
+      }
+      .van-image {
+         margin-left: 16px;
+         margin-right: 6px;
+         margin-top: -1px;
+         width: 15px;
+         height: 16px;
+      }
+   }
+}
+.itemActive {
+   background: rgba(0, 0, 0, 0.15);
+   color: var(--van-primary);
+   :global {
+      .van-icon {
+         display: block;
+      }
+   }
+}

src/views/coursewarePlay/component/points.tsx

@@ -0,0 +1,158 @@
+import { defineComponent, reactive, watch } from "vue"
+import styles from "./point.module.scss"
+import icons from "../image/icons.json"
+const { iconMulv, iconArrow, iconImage, iconImageActive, iconVideo, iconVideoActive, iconSong, iconSongActive } = icons
+import iconZhibo from "../image/icon-load.gif"
+import { Collapse, CollapseItem, Icon, Image } from "vant"
+export default defineComponent({
+   name: "points-list",
+   props: {
+      data: {
+         type: Array,
+         default: () => []
+      },
+      tabActive: {
+         type: String,
+         default: ""
+      },
+      itemActive: {
+         type: String,
+         default: ""
+      }
+   },
+   emits: ["handleSelect"],
+   setup(props, { emit }) {
+      const pointData = reactive({
+         active: props.tabActive[0] || "",
+         childActive: props.tabActive[1] || ""
+      })
+      watch(
+         () => props.tabActive,
+         () => {
+            pointData.active = props.tabActive[0] || ""
+            pointData.childActive = props.tabActive[1] || ""
+         }
+      )
+
+      console.log(pointData.active, "pointData.active", props.data, props.tabActive)
+
+      // 获取对应图片
+      const getImage = (item: any) => {
+         if (item.type === "VIDEO") {
+            return props.itemActive == item.id ? iconVideoActive : iconVideo
+         } else if (["IMAGE", "IMG"].includes(item.type)) {
+            return props.itemActive == item.id ? iconImageActive : iconImage
+         } else if (item.type === "SONG") {
+            return props.itemActive == item.id ? iconSongActive : iconSong
+         } else {
+            return props.itemActive == item.id ? iconVideoActive : iconVideo
+         }
+      }
+      return () => (
+         <div class={styles.container}>
+            <div class={styles.pointHead}>
+               <img src={require("../image/kcml.png")} />
+               课程目录
+            </div>
+            <div class={styles.content}>
+               <Collapse
+                  class={styles.collapse}
+                  modelValue={pointData.active}
+                  onUpdate:modelValue={(val: any) => {
+                     pointData.active = val
+                  }}
+                  accordion
+               >
+                  {props.data.map((item: any, index: number) => {
+                     return (
+                        <CollapseItem center border={false} class={index > 0 ? styles.borderTop : ""} isLink={false} title={item.name} name={item.id}>
+                           {{
+                              default: () => (
+                                 <>
+                                    {Array.isArray(item?.materialList) &&
+                                       item.materialList.map((n: any) => {
+                                          return (
+                                             <div
+                                                class={[styles.item, props.itemActive == n.id ? styles.itemActive : ""]}
+                                                onClick={() => {
+                                                   emit("handleSelect", {
+                                                      itemActive: n.id,
+                                                      tabActive: item.id,
+                                                      tabName: item.name
+                                                   })
+                                                }}
+                                             >
+                                                <Image src={getImage(n)} class={styles.itemImage} />
+                                                <span style={{ width: "80%" }} class="van-ellipsis">
+                                                   {n.name}
+                                                </span>
+                                                <Icon name={iconZhibo} />
+                                             </div>
+                                          )
+                                       })}
+
+                                    {Array.isArray(item?.children) && (
+                                       <Collapse
+                                          class={[styles.collapse, pointData.active === item.id ? styles.childActive : ""]}
+                                          modelValue={pointData.childActive}
+                                          onUpdate:modelValue={(val: any) => {
+                                             pointData.childActive = val
+                                          }}
+                                          accordion
+                                       >
+                                          {item?.children.map((child: any) => {
+                                             return (
+                                                <CollapseItem
+                                                   center
+                                                   border={false}
+                                                   isLink={false}
+                                                   title={child.name}
+                                                   name={child.id}
+                                                   class={styles.childCollapseItem}
+                                                >
+                                                   {{
+                                                      default: () => (
+                                                         <>
+                                                            {Array.isArray(child?.materialList) &&
+                                                               child.materialList.map((n: any) => {
+                                                                  return (
+                                                                     <div
+                                                                        class={[styles.item, props.itemActive == n.id ? styles.itemActive : ""]}
+                                                                        onClick={() => {
+                                                                           emit("handleSelect", {
+                                                                              itemActive: n.id,
+                                                                              tabActive: child.id,
+                                                                              tabName: child.name
+                                                                           })
+                                                                        }}
+                                                                     >
+                                                                        <Image src={getImage(n)} class={styles.itemImage} />
+                                                                        <span style={{ width: "73%" }} class="van-ellipsis">
+                                                                           {n.name}
+                                                                        </span>
+                                                                        <Icon name={iconZhibo} />
+                                                                     </div>
+                                                                  )
+                                                               })}
+                                                         </>
+                                                      ),
+                                                      icon: () => <img class={styles.arrow} src={iconArrow} />
+                                                   }}
+                                                </CollapseItem>
+                                             )
+                                          })}
+                                       </Collapse>
+                                    )}
+                                 </>
+                              ),
+                              icon: () => <img class={styles.arrow} src={iconArrow} />
+                           }}
+                        </CollapseItem>
+                     )
+                  })}
+               </Collapse>
+            </div>
+         </div>
+      )
+   }
+})

src/views/coursewarePlay/component/tool.module.scss

@@ -0,0 +1,32 @@
+.tool {
+   position: relative;
+   width: 220px;
+   box-sizing: border-box;
+   height: 100vh;
+   color: #fff;
+   font-size: 13px;
+   font-weight: 500;
+   line-height: 18px;
+   * {
+      box-sizing: border-box;
+   }
+}
+
+.title {
+   padding: 12px 18px;
+}
+.grid {
+   :global {
+      .van-grid-item__content {
+         background: transparent;
+         padding: var(--van-padding-xs) var(--van-padding-xs);
+      }
+      .van-grid-item__text {
+         color: inherit;
+         margin-top: 2px;
+      }
+      .van-grid-item__icon {
+         font-size: 22px;
+      }
+   }
+}

src/views/coursewarePlay/component/tool.tsx

@@ -0,0 +1,36 @@
+import { Grid, GridItem } from "vant"
+import { defineComponent } from "vue"
+import styles from "./tool.module.scss"
+import iconPen from "../image/icon-pen.png"
+
+export type ToolType = "init" | "pen"
+
+export type ToolItem = {
+   type: ToolType
+   name: string
+   icon: string
+}
+
+export default defineComponent({
+   name: "o-tool",
+   emits: ["handleTool"],
+   setup(props, { emit }) {
+      const tool: ToolItem[] = [
+         {
+            type: "pen",
+            icon: iconPen,
+            name: "批注"
+         }
+      ]
+      return () => (
+         <div class={styles.tool}>
+            <div class={styles.title}>教学功能</div>
+            <Grid class={styles.grid} columnNum={3} border={false}>
+               {tool.map(item => (
+                  <GridItem icon={item.icon} text={item.name} onClick={() => emit("handleTool", item)}></GridItem>
+               ))}
+            </Grid>
+         </div>
+      )
+   }
+})

src/views/coursewarePlay/component/tools/pen.module.scss

@@ -0,0 +1,46 @@
+.pen {
+   position: fixed;
+   left: 0;
+   right: 0;
+   bottom: 0;
+   top: 0;
+   z-index: 11;
+}
+.open {
+   display: block;
+}
+.hide {
+   display: none;
+}
+.iframe {
+   display: block;
+   width: 100%;
+   height: 100%;
+   border: 0;
+}
+.dely {
+   opacity: 0;
+}
+.rightItem {
+   position: absolute;
+   right: 15px;
+   bottom: 0;
+   bottom: constant(safe-area-inset-bottom);
+   bottom: env(safe-area-inset-bottom);
+   width: 50px;
+   height: 54px;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+}
+.img {
+   position: absolute;
+   left: 0;
+   top: 0;
+   width: 100%;
+   height: 100%;
+   display: block;
+}
+.isWhite {
+   background-color: #fff !important;
+}

src/views/coursewarePlay/component/tools/pen.tsx

@@ -0,0 +1,133 @@
+import { promisefiyPostMessage } from "../../helpers/native-message"
+import html2canvas from "html2canvas"
+import { closeToast, showFailToast, showLoadingToast, showSuccessToast } from "vant"
+import { defineComponent, toRefs, ref, reactive, onMounted, onUnmounted, nextTick } from "vue"
+import styles from "./pen.module.scss"
+
+export default defineComponent({
+   name: "tools-pen",
+   props: {
+      isWhite: {
+         type: Boolean,
+         default: false
+      },
+      show: {
+         type: Boolean,
+         default: false
+      },
+      close: {
+         type: Function,
+         default: () => ({})
+      }
+   },
+   setup(props) {
+      const { show, isWhite } = toRefs(props)
+      const firstRender = ref(true)
+      const src = /(localhost|192)/.test(location.host) ? "https://test.lexiaoya.cn/whiteboard-noCollab" : `${location.origin}/whiteboard-noCollab`
+
+      const exportImg = (event: MessageEvent) => {
+         const data = event.data
+         // console.log('🚀 ~ event:', data)
+         if (data.api === "excalidraw_exportImg") {
+            imgs.base64 = data.base64
+            imgs.exported = true
+            nextTick(() => {
+               onSaveImg()
+            })
+         }
+      }
+      onMounted(() => {
+         window.addEventListener("message", exportImg)
+      })
+      onUnmounted(() => {
+         window.removeEventListener("message", exportImg)
+      })
+
+      const imgs = reactive({
+         exported: false,
+         saveLoading: false,
+         base64: "",
+         image: ""
+      })
+
+      const saveImg = async () => {
+         showLoadingToast({ message: "图片生成中...", forbidClick: true })
+         setTimeout(() => {
+            imgs.saveLoading = false
+         }, 100)
+         const res = await promisefiyPostMessage({
+            api: "savePicture",
+            content: {
+               base64: imgs.image
+            }
+         })
+         if (res?.content?.status === "success") {
+            showSuccessToast("保存成功")
+         } else {
+            showFailToast("保存失败")
+         }
+         imgs.exported = false
+      }
+
+      const onSaveImg = async () => {
+         // 判断是否在保存中...
+         if (imgs.saveLoading) {
+            return
+         }
+         console.log("开始")
+         imgs.saveLoading = true
+         const container: any = document.getElementById(`app`)
+         html2canvas(container, {
+            allowTaint: true,
+            useCORS: true,
+            backgroundColor: null
+         })
+            .then(async canvas => {
+               // console.log("🚀 ~ canvas:", canvas)
+               // document.body.appendChild(canvas)
+               // const url = await canvas.toDataURL()
+               try {
+                  imgs.image = canvas.toDataURL()
+               } catch (error) {
+                  console.log(error)
+               }
+               console.log("🚀 ~ imgs.image:", imgs.image)
+               saveImg()
+            })
+            .catch(error => {
+               console.log("🚀 ~ error:", error)
+               closeToast()
+               imgs.saveLoading = false
+               imgs.exported = false
+            })
+      }
+
+      return () => (
+         <div class={[styles.pen, firstRender.value ? styles.dely : "", show.value ? styles.open : styles.hide, isWhite.value ? styles.isWhite : ""]}>
+            <iframe
+               class={styles.iframe}
+               frameborder="0"
+               width="100vw"
+               height="100vh"
+               src={src}
+               onLoad={() => {
+                  firstRender.value = false
+               }}
+            ></iframe>
+            {imgs.exported ? (
+               <img crossorigin="anonymous" class={styles.img} src={imgs.base64} />
+            ) : (
+               <div class={styles.rightItem} onClick={() => props.close()}>
+                  <svg width="22px" height="20px" viewBox="0 0 22 20">
+                     <path
+                        transform="translate(-1.000000, -2.000000)"
+                        fill="#FFFFFF"
+                        d="M13,2 C13.5522847,2 14,2.44771525 14,3 C14,3.51283584 13.6139598,3.93550716 13.1166211,3.99327227 L13,4 L3,4 L3,20 L13,20 C13.5128358,20 13.9355072,20.3860402 13.9932723,20.8833789 L14,21 C14,21.5128358 13.6139598,21.9355072 13.1166211,21.9932723 L13,22 L2,22 C1.48716416,22 1.06449284,21.6139598 1.00672773,21.1166211 L1,21 L1,3 C1,2.48716416 1.38604019,2.06449284 1.88337887,2.00672773 L2,2 L13,2 Z M17.7071068,7.05025253 L21.9497475,11.2928932 L21.9497475,11.2928932 C22.3402718,11.6834175 22.3402718,12.3165825 21.9497475,12.7071068 L17.7071068,16.9497475 C17.3165825,17.3402718 16.6834175,17.3402718 16.2928932,16.9497475 C15.9023689,16.5592232 15.9023689,15.9260582 16.2928932,15.5355339 L18.828,12.999 L9.29368112,13 C8.74139637,13 8.29368112,12.5522847 8.29368112,12 C8.29368112,11.4871642 8.67972131,11.0644928 9.17706,11.0067277 L9.29368112,11 L18.827,10.999 L16.2928932,8.46446609 C15.9023689,8.0739418 15.9023689,7.44077682 16.2928932,7.05025253 C16.6834175,6.65972824 17.3165825,6.65972824 17.7071068,7.05025253 Z"
+                     ></path>
+                  </svg>
+               </div>
+            )}
+         </div>
+      )
+   }
+})

src/views/coursewarePlay/component/video-item/index.module.scss

@@ -0,0 +1,224 @@
+.videoWrap {
+   position: relative;
+   width: 100%;
+   height: 100%;
+
+   :global {
+      .plyr--video {
+         width: 100%;
+         height: 100%;
+      }
+
+      .plyr__time {
+         display: block !important;
+      }
+
+      .plyr__video-wrapper {
+         pointer-events: none;
+      }
+   }
+}
+
+:global(.bottomFixed).controls {
+   width: 100%;
+   background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent);
+   padding: 0 !important;
+   flex-direction: column;
+   transition: all 0.5s;
+
+   .time {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+      color: #fff;
+      font-size: 10px;
+      padding: 4px 20px;
+
+      :global {
+         .plyr__time + .plyr__time:before {
+            content: "";
+         }
+      }
+   }
+
+   .slider {
+      width: 100%;
+      padding: 0 20px;
+
+      :global {
+         .van-slider__button {
+            background: var(--van-primary);
+         }
+
+         .van-loading {
+            width: 100%;
+            height: 100%;
+         }
+      }
+   }
+
+   .actions {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+      color: #fff;
+      font-size: 16px;
+      padding: 0 20px;
+      align-items: center;
+      height: 60px;
+
+      .actionWrap {
+         display: flex;
+      }
+
+      .actionBtn {
+         display: flex;
+         width: 36px;
+         height: 36px;
+         padding: 0 0;
+         background: transparent;
+         margin-right: 30px;
+         &:last-child {
+            margin-right: 0;
+         }
+      }
+
+      .actionBtn > img {
+         width: 100%;
+         height: 100%;
+         cursor: pointer;
+      }
+
+      :global {
+         .van-loading__circular {
+            width: 100%;
+            height: 100%;
+         }
+      }
+
+      .playIcon {
+         display: none;
+      }
+
+      .btnPlay img:nth-child(2) {
+         display: block;
+      }
+
+      .btnPause img:nth-child(3) {
+         display: block;
+      }
+
+      .btnPlay,
+      .btnPause {
+         :global {
+            .van-loading {
+               display: none;
+            }
+         }
+      }
+
+      .loopBtn {
+         :global {
+            .loop {
+               display: block;
+            }
+
+            .loopActive {
+               display: none;
+            }
+         }
+      }
+
+      .loopBtn.active {
+         :global {
+            .loop {
+               display: none;
+            }
+
+            .loopActive {
+               display: block;
+            }
+         }
+      }
+
+      .speedBtn {
+         position: relative;
+      }
+
+      .popoverGroup {
+         position: absolute;
+         z-index: 99;
+         left: -22px;
+         background-color: #fff;
+         border-radius: 8px;
+         bottom: 38px;
+         width: 80px;
+         color: #333;
+         padding: 4px 0;
+         display: none;
+
+         &.active {
+            display: block;
+         }
+      }
+   }
+}
+
+.sliderPopup {
+   position: absolute;
+   z-index: 9999;
+   left: 149px;
+   bottom: 48px;
+   display: flex;
+   align-items: center;
+   flex-direction: column;
+   height: 165px;
+   width: 45px;
+   padding: 10px 0 15px;
+   background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAAGaCAMAAAC46aQwAAAAOVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC8dlA9AAAAE3RSTlNaAAxUVwdPRSc7MzYsEEoXGgshjXaABwAAAZBJREFUeNrt1GtO40AQReF77X46tvPY/2IHhiCDA0Ez7pb4cb4FHLVaVSU/isM/i360S5+nnIL+Q0h5On+fXuqoQ8a6fJm+VjVQr4/pEtREKPt0VTP1UzpmNZTjh3RWU3lLn9TY6T1d1Fx5S8eg5kL8m57UwfSaHoI6CIPlSV1MlpO6SNaiThbN6mRWVSdVWZ1kJXWSFNRJEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADg9wnqJGhVJ6uyOsmq6qSqqJOiqzq5yqu6WC3P6mK2HEd1MEbLfZ49+zXtpOaS39IXNXe5p13UWPF72ic1dfKW9ql1eUu7tP2NLf3inNREOnuXflFGHTaWrSdvYsk6JJfoXXoTb1PNabwL+kEY71Ku023r7tOPYv5pFJ6Rn5qfj8KRtC+jvjGefSztYdWX1sFH0k82tUY3SPsWtDfZTdJekj4JN7dKO1Z9kBY3ST+er3x10/R2vqrdOO04BUnp4nbpTVwug30g3cwf1jMLKix6VfsAAAAASUVORK5CYII=")
+      no-repeat top center;
+   background-size: contain;
+
+   .iconAdd,
+   .iconCut {
+      display: inline-block;
+      width: 24px;
+      height: 24px;
+      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAABGlBMVEUAAAAAraMAraEArKEArqIA18kArqIA08UA1McAq6AAraAArKAArKEArKAArKAAq6EA1MYAq6AArKIAraMA2csAr6AA28kAn58A1skA0sQA1ccA2csA1cgArZ8A3M4Ar6IA1cgA2csA3M0A1MUA3M0A39EA2swA1skA1cgA3tAA3c8A3c0A08cA2swAq58A3M4A2csA4NL ///8A3tAA1sgA2s0A3M4A18kA4tQA2MsA3c8A2cwA1McArKAA08UA5NVm6+Jm6N9x599m6eEAx7oAvLDr/PsA0MNM49oAua2j8u2H8OmH7OZM6N4As6dt5t413dII1skD1skAy74AwLRf49ta49sn2s4X2MwT18tW4tpJ4Nc33tMq288faTE+AAAAMXRSTlMAGfxfUkc/9YXw6M/FtrCSUEM0MiMjCgj4z7quqG3x7tfPg1hS+Pjr69C6lZWKbVhYjYIARgAAAqJJREFUSMelk2lD2kAQhjfhkltQ0Xpbe98xJljCRo6EgApKoa32+P9/o7NOliEboB98Pj/v7MzsLotRS63tHb/Z2Xl9vLeWqrH/kdrPuE3B+SM7+6mV+voz15336/X615MXS/XNXTfuA7ubi/3TjOpjwHEOvyzy19yF9cF3LOt53P+w3IeA9X5R/fHfe9SpHyf0Y2ecgv/zttO5kwGwZT+I/Tmynwz4HeA3lY/4tm0fzu8K9vlwC/6vcRi46fVuIj7wjvx1mPY7+P1vYf3+GdB3APIbDbpBuN878H9Iv94WgTbVBx14K/0UHnD7gD4FpI8B05Tvah/W3+50/tC8GIjUB9/cQ7+Wge3fYUPoy4Dimy9rOHJTcD+m68VAN/Qb6AvW8ZLV50ABe9Y/8hF3FH+eMkA+csIEGXo+/TZyJQJXXaDVag2lbxivhK8FM//mbCHX0jcaGgTS1E9vcaCHPmCmIZBsztpfETCQJAQS7mzcpS1J30yIQEDrEUN3ARy6hQxnB1xYIpD0RIB+o6ArAq1wneRfBEkx9LSu+laLAqiHAU8MrQ1U37bxBBOROuBrDDg6V36vbeMJMd84YoKSp/gyoPqXQYkJDgbgR38jBciHgP+JCTQ9oPbnA4p+6egae6Q4oADYwFAEhuhTwC8ypMInlvIdr3u9a9MIE6hfNnmFhRRGdeo/el3kG6MCk1R1n3zlutAHpnqVzShzD9uhAyI64PEyI7bz3BP+8voTnt9mc2zlRAJ1df1YP7fFImxkuW8tK29MeXaDKWzk+ChQXrPc54jnyKeu8pz75+gjqDs+53nsR2G7rHM+mER8IwBdL+O8caoFDgy8wGnA/7Vcz+dAocqWUynqPIJerLDVaAelrLSzpQNtlUuhdDKRSKZRfir/ACF6Xp1EeZtPAAAAAElFTkSuQmCC")
+         no-repeat center;
+      background-size: contain;
+      flex-shrink: 0;
+
+      &.disabled {
+         opacity: 0.7;
+      }
+   }
+
+   .iconCut {
+      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAABCFBMVEUAAAAAraMAraEArKEArKEArqIArqIA2swA1cgA1sgAraAArKAArKEArKAArKAAq6EA2MoArZ8Aq6AArKIAraMAr6AA28kAn58A18oA08cA1cgA1MYA1sgA0cQA3c4A1skA08YA2swA08UA1skA2MsA2s0A18kA1sgA39AAzsIA3tAA2swA39EA39AA39EA4tMA3tAA2s0A2MoA1skA3M4A1ccA49QA3c8A2cwA4NIA4dP ///8ArKAA08Zx599x5t8A5NXi+/kA0cMAyLsAvK8Aua1J4dg13dIAzsAAvrIAs6dt5t4s29AD1chJ595h49tX49oV18sO1soAxLdm5NxS4tgd2MwAwrWCpB5XAAAAMHRSTlMAGfzvX1I/V1FH6M/FtrCShm1DNDIjCgj486iEI/jx19DPurGV+Ovr0M26uqiHSCOYWU5AAAACYklEQVRIx6WT12LaMBSGZTMS9p4hSTO6FwGMRyXj2GbTNqPj/d+kOjYCGcnkot/19/8+R5KRQDNzdnP5tt1+c3lTzjTRS2S6HaIFDCmDdjdzVD99RQjzgwDl6jRW710T0R8Yxsee3D/pMJ/C+cbdxYnMPyNPmz9CP/iUsujfks16Ys8FnwaAW7F/M5nY9kycJ2A0Kh/MTx7XNPD7u7x/RIns0euQn9SfSXwW0C++coFrMqf+gxbXDwH9A3dfhH7AXj/F9oOv9/dD0fv9ZYcnFOOPqN9/x/wMIWRuPxzth0D/CwrpwgU/Cgvv60EHPoV+83z/gMR92TyA2WQrM53CfBaA+l0gfLhlPjAI4OfnfPMzAt7LHmjIgW9eIeA8zh8d+tZr8BWXm2d2/03g/gfzLV2hgTTh5gdfTDDfMtM0kCLUfylgbgMpGkiSXX/cSMwf95MQWAgXLJwP+BC4g0DKY7rwIJjf3/pjNwVL/wVf7OcCzB97sLQylflM53yKryBKQhse8U3OtxIIKHoSX5gHcIsIqEyPz2Myf+xXEKCoLvUpsf3jEENVUEBhGnnQOiDpd5YFFFLFC+GHD2HzB2i4irbkV0PphYHPAo61yiNGTfWjvtjvOEu1hnaU8HNkX3Fhx8MltKeVw57Yb3L9C5xrIY5GFj/LL5j1ZxsoQj2BfUM8zxBriRN1dEA9i1eu9MIcbYWzzOenymHsa+KBGkuMcw0koVVSMZ4udP4DlutjrJZaSE4tjylTzx2M6G9muJ6PKfkaiqdaUHEEtVBFx1EqxQSzE8WKIgjSUDqVTKbSIP8//wBbnlQnTJqlUQAAAABJRU5ErkJggg==")
+         no-repeat center;
+      background-size: contain;
+   }
+
+   .sliderPoint {
+      background: #ffffff;
+      box-shadow: 0px 2px 4px 0px rgba(102, 102, 102, 0.77);
+      border-radius: 10px;
+      font-size: 14px;
+      font-weight: 500;
+      color: rgba(1, 193, 181, 1);
+      min-width: 35px;
+      text-align: center;
+      vertical-align: text-bottom;
+
+      span {
+         font-size: 12px;
+      }
+   }
+
+   :global {
+      .van-slider {
+         margin: 7px 0;
+      }
+   }
+}

src/views/coursewarePlay/component/video-item/index.tsx

@@ -0,0 +1,331 @@
+import { defineComponent, nextTick, onMounted, reactive, toRefs, watch } from "vue"
+import "plyr/dist/plyr.css"
+import Plyr from "plyr"
+import styles from "./index.module.scss"
+
+import icons from "../../image/icons.json"
+
+const { iconVideoBg, iconLoop, iconLoopActive, iconPlay, iconPause, iconSpeed } = icons
+import { Slider } from "vant"
+
+export default defineComponent({
+   name: "video-play",
+   props: {
+      item: {
+         type: Object,
+         default: () => {
+            return {}
+         }
+      },
+      activeModel: {
+         type: Boolean,
+         default: true
+      }
+   },
+   emits: ["play", "pause", "ended", "close"],
+   setup(props, { emit, expose }) {
+      const { item } = toRefs(props)
+      const data = reactive({
+         videoContianerRef: null as unknown as HTMLAudioElement,
+         videoState: "pause" as "init" | "play" | "pause",
+         animationState: "start" as "start" | "end",
+         videoItem: null as unknown as Plyr,
+         speedControl: false,
+         speedStyle: {
+            left: "1px"
+         },
+         defaultSpeed: 1 // 默认速度
+      })
+      const controlID = "v" + Date.now() + Math.floor(Math.random() * 100)
+      const playBtnId = "play" + Date.now() + Math.floor(Math.random() * 100)
+      const loopBtnId = "loop" + Date.now() + Math.floor(Math.random() * 100)
+      const speedBtnId = "speed" + Date.now() + Math.floor(Math.random() * 100)
+
+      const togglePlay = (e: Event) => {
+         e.stopPropagation()
+         data.speedControl = false
+         if (!data.videoContianerRef.paused) {
+            data.videoItem?.pause()
+         } else {
+            data.videoContianerRef?.play()
+         }
+      }
+      const toggleLoop = () => {
+         data.speedControl = false
+         const loopBtn = document.getElementById(loopBtnId)
+         if (!loopBtn || !data.videoItem) return
+         const isLoop = data.videoItem.loop
+         if (isLoop) {
+            loopBtn.classList.remove(styles.active)
+         } else {
+            loopBtn.classList.add(styles.active)
+         }
+         data.videoItem.loop = !data.videoItem.loop
+      }
+      const onDefault = () => {
+         document.getElementById(controlID)?.addEventListener("click", (e: Event) => {
+            e.stopPropagation()
+            data.speedControl = false
+            if (data.videoContianerRef.paused) return
+            emit("close")
+         })
+         document.getElementById(controlID)?.addEventListener("touchmove", () => {
+            data.speedControl = false
+            if (data.videoContianerRef.paused) return
+            emit("close")
+         })
+         document.getElementById(playBtnId)?.addEventListener("click", togglePlay)
+         document.getElementById(loopBtnId)?.addEventListener("click", toggleLoop)
+
+         document.getElementById(speedBtnId)?.addEventListener("click", e => {
+            e.stopPropagation()
+            data.speedControl = !data.speedControl
+         })
+
+         setName()
+      }
+      const setName = () => {
+         const nameEl = document.getElementById("videoItemName")
+         if (nameEl) {
+            nameEl.innerHTML = item.value.name || ""
+         }
+      }
+
+      const changePlayBtn = (code: string) => {
+         const playBtn = document.getElementById(playBtnId)
+         if (!playBtn) return
+         if (code == "play") {
+            playBtn.classList.remove(styles.btnPause)
+            playBtn.classList.add(styles.btnPlay)
+         } else {
+            playBtn.classList.remove(styles.btnPlay)
+            playBtn.classList.add(styles.btnPause)
+         }
+      }
+      const controls = `
+            <div id="${controlID}" class="plyr__controls bottomFixed ${styles.controls}">
+                <div class="${styles.time}">
+                    <div class="plyr__time plyr__time--current" aria-label="Current time">00:00</div>
+                    <div class="plyr__time plyr__time--duration" aria-label="Duration">00:00</div>
+                </div>
+                <div class="${styles.slider}">
+                    <div class="plyr__progress">
+                        <input data-plyr="seek" type="range" min="0" max="100" step="0.01" value="0" aria-label="Seek">
+                        <progress class="plyr__progress__buffer" min="0" max="100" value="0">% buffered</progress>
+                        <span role="tooltip" class="plyr__tooltip">00:00</span>
+                    </div>
+                </div>
+                <div class="${styles.actions}">
+                    <div class="${styles.actionWrap}">
+                        <div id="${playBtnId}" class="${styles.actionBtn}">
+                            <div class="van-loading van-loading--circular" aria-live="polite" aria-busy="true"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(255, 255, 255);"><svg class="van-loading__circular" viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
+                            <img class="${styles.playIcon}" src="${iconPlay}" />
+                            <img class="${styles.playIcon}" src="${iconPause}" />
+                        </div>
+                        <div id="${loopBtnId}" class="${styles.actionBtn} ${styles.loopBtn}">
+                            <img class="loop" src="${iconLoop}" />
+                            <img class="loopActive" src="${iconLoopActive}" />
+                        </div>
+                        <div style="position: relative">
+                          <div id="${speedBtnId}" class="${styles.actionBtn} ${styles.speedBtn}">
+                              <img class="loop" src="${iconSpeed}" />
+                          </div>
+                        </div>
+                    </div>
+                    <div id="videoItemName"></div>
+                </div>
+            </div>`
+
+      onMounted(() => {
+         data.videoItem = new Plyr(data.videoContianerRef, {
+            autoplay: true,
+            controls: controls,
+            ratio: "16:9", // 强制所有视频的纵横比
+            hideControls: false, // 在 2 秒没有鼠标或焦点移动、控制元素模糊（制表符退出）、播放开始或进入全屏时自动隐藏视频控件。只要移动鼠标、聚焦控制元素或暂停播放，控件就会立即重新出现。
+            clickToPlay: false, // 单击（或点击）视频容器将切换播放/暂停
+            fullscreen: { enabled: false, fallback: false, iosNative: false } // 不适用全屏
+         })
+
+         nextTick(() => {
+            onDefault()
+         })
+      })
+
+      const toggleHideControl = (isShow: boolean) => {
+         data.videoItem?.toggleControls(isShow)
+
+         if (!isShow) {
+            data.speedControl = isShow
+         }
+      }
+      watch(
+         () => props.activeModel,
+         () => {
+            toggleHideControl(props.activeModel)
+         }
+      )
+
+      watch(
+         () => props.item,
+         () => {
+            setName()
+            // 设置视屏播放器的默认速度
+            if (data.videoItem) data.videoItem.speed = data.defaultSpeed || 1
+
+            // 切换的时候隐藏
+            data.speedControl = false
+         }
+      )
+      let videoTimer = null as any
+      const handlePlayVideo = () => {
+         clearTimeout(videoTimer)
+         nextTick(() => {
+            data.videoContianerRef.play().catch(err => {
+               console.log("🚀 ~ err:", err)
+               videoTimer = setTimeout(() => {
+                  if (err?.message?.includes("play()")) {
+                     emit("play")
+                  }
+                  handlePlayVideo()
+               }, 1000)
+            })
+         })
+      }
+
+      let videoErrorTimer = null as any
+      let videoErrorCount = 0
+      const handleErrorVideo = () => {
+         if (videoErrorCount > 5) {
+            return
+         }
+         clearTimeout(videoErrorTimer)
+         nextTick(() => {
+            videoErrorTimer = setTimeout(() => {
+               data.videoContianerRef.src = props.item?.content
+
+               emit("play")
+               data.videoContianerRef.load()
+               // eslint-disable-next-line @typescript-eslint/no-unused-vars
+               handleErrorVideo()
+            }, 1000)
+         })
+         videoErrorCount++
+      }
+      const getVideoRef = () => {
+         return data.videoContianerRef
+      }
+      const getVideoItem = () => {
+         return data.videoItem
+      }
+      expose({
+         getVideoRef,
+         getVideoItem
+      })
+
+      return () => (
+         <div class={styles.videoWrap}>
+            <video
+               ref={el => (data.videoContianerRef = el as unknown as HTMLAudioElement)}
+               class={styles.itemDiv}
+               src={props.item?.content}
+               poster={iconVideoBg}
+               webkit-playsinline
+               playsinline
+               x5-video-player-type="h5"
+               onLoadedmetadata={() => {
+                  data.videoState = "pause"
+                  changePlayBtn("play")
+                  nextTick(() => {
+                     data.videoContianerRef.currentTime = 0
+                     nextTick(handlePlayVideo)
+                  })
+               }}
+               onPlay={() => {
+                  videoErrorCount = 0
+                  // console.log('开始播放')
+                  data.videoState = "play"
+                  changePlayBtn("pause")
+                  emit("close")
+                  emit("play")
+                  clearTimeout(videoErrorTimer)
+               }}
+               onPause={() => {
+                  // console.log('暂停播放')
+                  data.videoState = "pause"
+                  changePlayBtn("play")
+                  emit("pause")
+               }}
+               onEnded={() => {
+                  // console.log('播放结束')
+                  data.videoState = "pause"
+                  changePlayBtn("play")
+                  emit("ended")
+               }}
+               onError={handleErrorVideo}
+            ></video>
+
+            <div
+               style={{
+                  display: data.speedControl ? "block" : "none"
+               }}
+            >
+               <div
+                  class={styles.sliderPopup}
+                  onClick={(e: Event) => {
+                     e.stopPropagation()
+                  }}
+               >
+                  <i
+                     class={styles.iconAdd}
+                     onClick={() => {
+                        if (data.defaultSpeed >= 1.5) {
+                           return
+                        }
+
+                        if (data.videoItem) {
+                           data.defaultSpeed = (data.defaultSpeed * 10 + 1) / 10
+                           data.videoItem.speed = data.defaultSpeed
+                        }
+                     }}
+                  ></i>
+                  <Slider
+                     min={0.5}
+                     max={1.5}
+                     step={0.1}
+                     v-model={data.defaultSpeed}
+                     vertical
+                     barHeight={5}
+                     reverse
+                     onChange={() => {
+                        if (data.videoItem) {
+                           data.videoItem.speed = data.defaultSpeed
+                        }
+                     }}
+                  >
+                     {{
+                        button: () => (
+                           <div class={styles.sliderPoint}>
+                              {data.defaultSpeed}
+                              <span>x</span>
+                           </div>
+                        )
+                     }}
+                  </Slider>
+                  <i
+                     class={[styles.iconCut]}
+                     onClick={() => {
+                        if (data.defaultSpeed <= 0.5) {
+                           return
+                        }
+                        if (data.videoItem) {
+                           data.defaultSpeed = (data.defaultSpeed * 10 - 1) / 10
+                           data.videoItem.speed = data.defaultSpeed
+                        }
+                     }}
+                  ></i>
+               </div>
+            </div>
+         </div>
+      )
+   }
+})

src/views/coursewarePlay/component/video-item/video-play.tsx

@@ -0,0 +1,172 @@
+import { defineComponent, nextTick, onMounted, toRefs } from "vue"
+import "plyr/dist/plyr.css"
+import Plyr from "plyr"
+import { ref } from "vue"
+import styles from "./video.module.scss"
+
+import iconLoop from "../image/icon-loop.svg"
+import iconLoopActive from "../image/icon-loop-active.svg"
+import iconplay from "../image/icon-play.svg"
+import iconpause from "../image/icon-pause.svg"
+
+export default defineComponent({
+   name: "video-play",
+   props: {
+      item: {
+         type: Object,
+         default: () => {
+            return {}
+         }
+      },
+      isEmtry: {
+         type: Boolean,
+         default: false
+      },
+      isActive: {
+         type: Boolean,
+         default: false
+      }
+   },
+   emits: ["loadedmetadata", "togglePlay", "ended", "reset", "prepare"],
+   setup(props, { emit, expose }) {
+      const { item, isEmtry } = toRefs(props)
+      const videoRef = ref()
+      const videoItem: any = ref()
+      const controlID = "v" + Date.now() + Math.floor(Math.random() * 100)
+      const playBtnId = "play" + Date.now() + Math.floor(Math.random() * 100)
+      const loopBtnId = "loop" + Date.now() + Math.floor(Math.random() * 100)
+      const toggleHideControl = (isShow: false) => {
+         videoItem.value?.toggleControls(isShow)
+      }
+      const togglePlay = (e: Event) => {
+         e.stopPropagation()
+         videoItem.value?.togglePlay()
+      }
+      const toggleLoop = () => {
+         const loopBtn = document.getElementById(loopBtnId)
+         if (!loopBtn || !videoItem.value) return
+         const isLoop = videoItem.value.loop
+         if (isLoop) {
+            loopBtn.classList.remove(styles.active)
+         } else {
+            loopBtn.classList.add(styles.active)
+         }
+         videoItem.value.loop = !videoItem.value.loop
+      }
+      const onDefault = () => {
+         document.getElementById(controlID)?.addEventListener("click", (e: Event) => {
+            e.stopPropagation()
+            emit("reset")
+         })
+         document.getElementById(playBtnId)?.addEventListener("click", togglePlay)
+         document.getElementById(loopBtnId)?.addEventListener("click", toggleLoop)
+      }
+
+      const changePlayBtn = (code: string) => {
+         const playBtn = document.getElementById(playBtnId)
+         if (!playBtn) return
+         if (code == "play") {
+            playBtn.classList.remove(styles.btnPause)
+            playBtn.classList.add(styles.btnPlay)
+         } else {
+            playBtn.classList.remove(styles.btnPlay)
+            playBtn.classList.add(styles.btnPause)
+         }
+      }
+      const controls = `
+            <div id="${controlID}" class="plyr__controls bottomFixed ${styles.controls}">
+                <div class="${styles.time}">
+                    <div class="plyr__time plyr__time--current" aria-label="Current time">00:00</div>
+                    <div class="plyr__time plyr__time--duration" aria-label="Duration">00:00</div>
+                </div>
+                <div class="${styles.slider}">
+                    <div class="plyr__progress">
+                        <input data-plyr="seek" type="range" min="0" max="100" step="0.01" value="0" aria-label="Seek">
+                        <progress class="plyr__progress__buffer" min="0" max="100" value="0">% buffered</progress>
+                        <span role="tooltip" class="plyr__tooltip">00:00</span>
+                    </div>
+                </div>
+                <div class="${styles.actions}">
+                    <div class="${styles.actionWrap}">
+                        <button id="${playBtnId}" class="${styles.actionBtn}">
+                            <div class="van-loading van-loading--circular" aria-live="polite" aria-busy="true"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(255, 255, 255);"><svg class="van-loading__circular" viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
+                            <img class="${styles.playIcon}" src="${iconplay}" />
+                            <img class="${styles.playIcon}" src="${iconpause}" />
+                        </button>
+                        <button id="${loopBtnId}" class="${styles.actionBtn} ${styles.loopBtn}">
+                            <img class="loop" src="${iconLoop}" />
+                            <img class="loopActive" src="${iconLoopActive}" />
+                        </button>
+                    </div>
+                    <div>${item.value.name}</div>
+                </div>
+            </div>`
+
+      onMounted(() => {
+         emit("prepare", false)
+         videoItem.value = new Plyr(videoRef.value, {
+            autoplay: false,
+            controls: controls,
+            autopause: false, // 一次只允许
+            ratio: "16:9", // 强制所有视频的纵横比
+            hideControls: false, // 在 2 秒没有鼠标或焦点移动、控制元素模糊（制表符退出）、播放开始或进入全屏时自动隐藏视频控件。只要移动鼠标、聚焦控制元素或暂停播放，控件就会立即重新出现。
+            clickToPlay: false, // 单击（或点击）视频容器将切换播放/暂停
+            fullscreen: { enabled: false, fallback: false, iosNative: false } // 不适用全屏
+         })
+         if (videoItem.value) {
+            videoItem.value.on("play", () => {
+               if (videoItem.value && videoItem.value.muted) {
+                  videoItem.value.muted = false
+                  videoItem.value.volume = 1
+               }
+
+               // console.log('开始播放', item.value)
+               if (!item.value.autoPlay && !item.value.isprepare && videoItem.value) {
+                  // 加载完成后,取消静音播放
+                  videoItem.value.pause()
+                  console.log(videoItem.value?.paused, "video status")
+               }
+               changePlayBtn("")
+               emit("togglePlay", videoItem.value?.paused)
+            })
+            videoItem.value.on("pause", () => {
+               changePlayBtn("play")
+               emit("togglePlay", videoItem.value?.paused)
+            })
+            videoItem.value.on("ended", () => {
+               emit("ended")
+               changePlayBtn("play")
+            })
+            videoItem.value.once("loadedmetadata", () => {
+               console.log("loadedmetadata")
+               changePlayBtn("play")
+               videoItem.value.currentTime = 0
+               if (item.value.autoPlay && videoItem.value && props.isActive) {
+                  videoItem.value.play()
+               }
+               emit("loadedmetadata", videoItem.value)
+            })
+            videoItem.value.on("timeupdate", () => {
+               if (!props.isActive) {
+                  console.log("不是激活的视频,如果在播放,就暂停")
+                  videoRef.value.pause()
+               }
+            })
+
+            nextTick(() => {
+               onDefault()
+            })
+         }
+      })
+      expose({
+         changePlayBtn,
+         toggleHideControl
+      })
+
+      return () => (
+         <div class={styles.videoWrap}>
+            <video style={{ width: "100%", height: "100%" }} src={isEmtry.value ? "" : item.value.content} ref={videoRef} playsinline="false"></video>
+         </div>
+      )
+   }
+})

src/views/coursewarePlay/component/video-play.tsx

@@ -0,0 +1,172 @@
+import { defineComponent, nextTick, onMounted, toRefs } from "vue"
+import "plyr/dist/plyr.css"
+import Plyr from "plyr"
+import { ref } from "vue"
+import styles from "./video.module.scss"
+
+import iconLoop from "../image/icon-loop.svg"
+import iconLoopActive from "../image/icon-loop-active.svg"
+import iconplay from "../image/icon-play.svg"
+import iconpause from "../image/icon-pause.svg"
+
+export default defineComponent({
+   name: "video-play",
+   props: {
+      item: {
+         type: Object,
+         default: () => {
+            return {}
+         }
+      },
+      isEmtry: {
+         type: Boolean,
+         default: false
+      },
+      isActive: {
+         type: Boolean,
+         default: false
+      }
+   },
+   emits: ["loadedmetadata", "togglePlay", "ended", "reset", "prepare"],
+   setup(props, { emit, expose }) {
+      const { item, isEmtry } = toRefs(props)
+      const videoRef = ref()
+      const videoItem: any = ref()
+      const controlID = "v" + Date.now() + Math.floor(Math.random() * 100)
+      const playBtnId = "play" + Date.now() + Math.floor(Math.random() * 100)
+      const loopBtnId = "loop" + Date.now() + Math.floor(Math.random() * 100)
+      const toggleHideControl = (isShow: false) => {
+         videoItem.value?.toggleControls(isShow)
+      }
+      const togglePlay = (e: Event) => {
+         e.stopPropagation()
+         videoItem.value?.togglePlay()
+      }
+      const toggleLoop = () => {
+         const loopBtn = document.getElementById(loopBtnId)
+         if (!loopBtn || !videoItem.value) return
+         const isLoop = videoItem.value.loop
+         if (isLoop) {
+            loopBtn.classList.remove(styles.active)
+         } else {
+            loopBtn.classList.add(styles.active)
+         }
+         videoItem.value.loop = !videoItem.value.loop
+      }
+      const onDefault = () => {
+         document.getElementById(controlID)?.addEventListener("click", (e: Event) => {
+            e.stopPropagation()
+            emit("reset")
+         })
+         document.getElementById(playBtnId)?.addEventListener("click", togglePlay)
+         document.getElementById(loopBtnId)?.addEventListener("click", toggleLoop)
+      }
+
+      const changePlayBtn = (code: string) => {
+         const playBtn = document.getElementById(playBtnId)
+         if (!playBtn) return
+         if (code == "play") {
+            playBtn.classList.remove(styles.btnPause)
+            playBtn.classList.add(styles.btnPlay)
+         } else {
+            playBtn.classList.remove(styles.btnPlay)
+            playBtn.classList.add(styles.btnPause)
+         }
+      }
+      const controls = `
+            <div id="${controlID}" class="plyr__controls bottomFixed ${styles.controls}">
+                <div class="${styles.time}">
+                    <div class="plyr__time plyr__time--current" aria-label="Current time">00:00</div>
+                    <div class="plyr__time plyr__time--duration" aria-label="Duration">00:00</div>
+                </div>
+                <div class="${styles.slider}">
+                    <div class="plyr__progress">
+                        <input data-plyr="seek" type="range" min="0" max="100" step="0.01" value="0" aria-label="Seek">
+                        <progress class="plyr__progress__buffer" min="0" max="100" value="0">% buffered</progress>
+                        <span role="tooltip" class="plyr__tooltip">00:00</span>
+                    </div>
+                </div>
+                <div class="${styles.actions}">
+                    <div class="${styles.actionWrap}">
+                        <button id="${playBtnId}" class="${styles.actionBtn}">
+                            <div class="van-loading van-loading--circular" aria-live="polite" aria-busy="true"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(255, 255, 255);"><svg class="van-loading__circular" viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
+                            <img class="${styles.playIcon}" src="${iconplay}" />
+                            <img class="${styles.playIcon}" src="${iconpause}" />
+                        </button>
+                        <button id="${loopBtnId}" class="${styles.actionBtn} ${styles.loopBtn}">
+                            <img class="loop" src="${iconLoop}" />
+                            <img class="loopActive" src="${iconLoopActive}" />
+                        </button>
+                    </div>
+                    <div>${item.value.name}</div>
+                </div>
+            </div>`
+
+      onMounted(() => {
+         emit("prepare", false)
+         videoItem.value = new Plyr(videoRef.value, {
+            autoplay: false,
+            controls: controls,
+            autopause: false, // 一次只允许
+            ratio: "16:9", // 强制所有视频的纵横比
+            hideControls: false, // 在 2 秒没有鼠标或焦点移动、控制元素模糊（制表符退出）、播放开始或进入全屏时自动隐藏视频控件。只要移动鼠标、聚焦控制元素或暂停播放，控件就会立即重新出现。
+            clickToPlay: false, // 单击（或点击）视频容器将切换播放/暂停
+            fullscreen: { enabled: false, fallback: false, iosNative: false } // 不适用全屏
+         })
+         if (videoItem.value) {
+            videoItem.value.on("play", () => {
+               if (videoItem.value && videoItem.value.muted) {
+                  videoItem.value.muted = false
+                  videoItem.value.volume = 1
+               }
+
+               // console.log('开始播放', item.value)
+               if (!item.value.autoPlay && !item.value.isprepare && videoItem.value) {
+                  // 加载完成后,取消静音播放
+                  videoItem.value.pause()
+                  console.log(videoItem.value?.paused, "video status")
+               }
+               changePlayBtn("")
+               emit("togglePlay", videoItem.value?.paused)
+            })
+            videoItem.value.on("pause", () => {
+               changePlayBtn("play")
+               emit("togglePlay", videoItem.value?.paused)
+            })
+            videoItem.value.on("ended", () => {
+               emit("ended")
+               changePlayBtn("play")
+            })
+            videoItem.value.once("loadedmetadata", () => {
+               console.log("loadedmetadata")
+               changePlayBtn("play")
+               videoItem.value.currentTime = 0
+               if (item.value.autoPlay && videoItem.value && props.isActive) {
+                  videoItem.value.play()
+               }
+               emit("loadedmetadata", videoItem.value)
+            })
+            videoItem.value.on("timeupdate", () => {
+               if (!props.isActive) {
+                  console.log("不是激活的视频,如果在播放,就暂停")
+                  videoRef.value.pause()
+               }
+            })
+
+            nextTick(() => {
+               onDefault()
+            })
+         }
+      })
+      expose({
+         changePlayBtn,
+         toggleHideControl
+      })
+
+      return () => (
+         <div class={styles.videoWrap}>
+            <video style={{ width: "100%", height: "100%" }} src={isEmtry.value ? "" : item.value.content} ref={videoRef} playsinline="false"></video>
+         </div>
+      )
+   }
+})

src/views/coursewarePlay/component/video.module.scss

@@ -0,0 +1,132 @@
+.videoWrap {
+   width: 100%;
+   height: 100%;
+
+   :global {
+      .plyr--video {
+         width: 100%;
+         height: 100%;
+      }
+
+      .plyr__time {
+         display: block !important;
+      }
+      .plyr__video-wrapper {
+         pointer-events: none;
+      }
+   }
+}
+
+:global(.bottomFixed).controls {
+   width: 100%;
+   background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent);
+   padding: 0 !important;
+   flex-direction: column;
+   transition: all 0.5s;
+
+   .time {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+      color: #fff;
+      font-size: 10px;
+      padding: 4px 20px;
+
+      :global {
+         .plyr__time + .plyr__time:before {
+            content: "";
+         }
+      }
+   }
+
+   .slider {
+      width: 100%;
+      padding: 0 20px;
+
+      :global {
+         .van-slider__button {
+            background: var(--van-primary);
+         }
+
+         .van-loading {
+            width: 100%;
+            height: 100%;
+         }
+      }
+   }
+
+   .actions {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+      color: #fff;
+      font-size: 12px;
+      padding: 0 20px;
+      align-items: center;
+
+      .actionWrap {
+         display: flex;
+      }
+
+      .actionBtn {
+         display: flex;
+         width: 38px;
+         height: 38px;
+         padding: 4px 0;
+         background: transparent;
+      }
+
+      .actionBtn > img {
+         width: 100%;
+         height: 100%;
+      }
+
+      :global {
+         .van-loading__circular {
+            width: 100%;
+            height: 100%;
+         }
+      }
+
+      .playIcon {
+         display: none;
+      }
+
+      .btnPlay img:nth-child(2) {
+         display: block;
+      }
+
+      .btnPause img:nth-child(3) {
+         display: block;
+      }
+
+      .btnPlay,
+      .btnPause {
+         :global {
+            .van-loading {
+               display: none;
+            }
+         }
+      }
+      .loopBtn {
+         :global {
+            .loop {
+               display: block;
+            }
+            .loopActive {
+               display: none;
+            }
+         }
+      }
+      .loopBtn.active {
+         :global {
+            .loop {
+               display: none;
+            }
+            .loopActive {
+               display: block;
+            }
+         }
+      }
+   }
+}

src/views/coursewarePlay/helpers/helpState.ts

@@ -0,0 +1,5 @@
+import { reactive } from "vue"
+
+export const state = reactive({
+   loadingCount: 0 as number // 加载次数
+})

src/views/coursewarePlay/helpers/native-message.ts

@@ -0,0 +1,116 @@
+import { browser, getRandomKey } from "./utils"
+
+export interface IPostMessage {
+   api: string
+   content?: any
+}
+
+/**
+ * 劫持postMessage
+ */
+
+const originalPostMessage = window.postMessage
+
+window.postMessage = (message: IPostMessage) => {
+   // console.log('通过劫持', message)
+   originalPostMessage(message, "*")
+}
+
+/**
+ *
+ * 目前已支持API
+ *
+ * openWebView
+ *
+ */
+
+type CallBack = (evt?: IPostMessage) => void
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const loop = () => {}
+
+const calls: { [key: string]: CallBack | CallBack[] } = {}
+
+const browserInfo = browser()
+
+if (browserInfo.isApp) {
+   window.addEventListener("message", evt => {
+      try {
+         console.log("app交互接受:", evt.data)
+         const data = evt.data ? (typeof evt.data === "object" ? evt.data : JSON.parse(evt.data)) : {}
+         const uuid = data.content?.uuid || data.uuid
+         console.log(uuid, data.content, "uuid")
+         try {
+            if (data.content) {
+               data.content = JSON.parse(data.content)
+            }
+         } catch (error) {
+            //
+         }
+         if (data?.content?.uuid) {
+            // console.log('data', data)
+         }
+         if (!uuid) {
+            const keys = Object.keys(calls).filter(key => key.indexOf(data.api) === 0)
+            // console.log(keys, 'keys')
+            // console.log(data, 'data')
+            for (const key of keys) {
+               const callback = calls[key] || loop
+               typeof callback === "function" && callback(data)
+            }
+            return
+         }
+         const callId = data.content?.uuid || data.uuid || data.api + data.uuid
+         const callback = calls[callId] || loop
+         // console.log(data, 'data')
+         typeof callback === "function" && callback(data)
+      } catch (error) {
+         console.error("通信消息解析错误", error)
+      }
+   })
+}
+
+const instance: any = (window as any).ORCHESTRA || (window as any).webkit?.messageHandlers?.ORCHESTRA
+
+export const postMessage = (data: IPostMessage, callback?: CallBack) => {
+   if (browserInfo.isApp) {
+      const uuid = getRandomKey()
+      calls[uuid] = callback || loop
+      data.content = data.content ? { ...data.content, uuid } : { uuid }
+      console.log("app交互发送:", data)
+      instance.postMessage(JSON.stringify(data))
+   }
+}
+
+// export const listenerMessage = (api: string, callback: CallBack) => {
+//   console.log(browserInfo, 'browserInfo', api, 'api', callback)
+//   if (browserInfo.isApp) {
+//     const uuid = api
+//     if (!calls[uuid]) {
+//       calls[uuid] = []
+//     }
+//     ;(calls[uuid] as CallBack[]).push(callback || loop)
+//   }
+// }
+export const listenerMessage = (api: string, callback: CallBack) => {
+   if (browserInfo.isApp) {
+      const uuid = api + getRandomKey()
+      calls[uuid] = callback || loop
+   }
+}
+
+export const removeListenerMessage = (api: string, callback: CallBack) => {
+   if (browserInfo.isApp) {
+      const uuid = api
+      if (Array.isArray(calls[uuid])) {
+         const indexOf = (calls[uuid] as CallBack[]).indexOf(callback)
+         ;(calls[uuid] as CallBack[]).splice(indexOf, 1)
+      }
+   }
+}
+
+export const promisefiyPostMessage = (data: IPostMessage): Promise<IPostMessage | undefined> => {
+   return new Promise(resolve => {
+      postMessage(data, res => resolve(res))
+   })
+}

src/views/coursewarePlay/helpers/utils.ts

@@ -0,0 +1,142 @@
+import { Toast } from "vant"
+import { state as helpState } from "./helpState"
+
+export const browser = () => {
+   const u = navigator.userAgent
+   //   app = navigator.appVersion;
+   return {
+      trident: u.indexOf("Trident") > -1, //IE内核
+      presto: u.indexOf("Presto") > -1, //opera内核
+      webKit: u.indexOf("AppleWebKit") > -1, //苹果、谷歌内核
+      gecko: u.indexOf("Gecko") > -1 && u.indexOf("KHTML") == -1, //火狐内核
+      mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
+      ios: !!u.match(/Mac OS X/), //ios终端
+      // ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
+      android: u.indexOf("ORCHESTRAAPPA") > -1 || u.indexOf("Adr") > -1, //android终端
+      iPhone: u.indexOf("ORCHESTRAAPPI") > -1, //是否为iPhone或者QQHD浏览器
+      isApp: u.indexOf("ORCHESTRAAPPI") > -1 || u.indexOf("ORCHESTRAAPPA") > -1,
+      isTeacher: u.indexOf("ORCHESTRATEACHER") > -1,
+      isStudent: u.indexOf("ORCHESTRASTUDENT") > -1,
+      isSchool: u.indexOf("ORCHESTRASCHOOL") > -1,
+      iPad: u.indexOf("iPad") > -1, //是否iPad
+      webApp: u.indexOf("Safari") == -1, //是否web应该程序，没有头部与底部
+      weixin: u.indexOf("MicroMessenger") > -1, //是否微信 （2015-01-22新增）
+      alipay: u.indexOf("AlipayClient") > -1, //是否支付宝
+      huawei: !!u.match(/huawei/i) || !!u.match(/honor/i),
+      xiaomi: !!u.match(/mi\s/i) || !!u.match(/redmi/i) || !!u.match(/mix/i)
+   }
+}
+
+// 获取授权的code码
+export const getUrlCode = (name = "code") => {
+   // 截取url中的code方法
+   const url = location.search
+   const theRequest: any = new Object()
+   if (url.indexOf("?") != -1) {
+      const str = url.substr(1)
+      const strs = str.split("&")
+      for (let i = 0; i < strs.length; i++) {
+         theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1]
+      }
+   }
+   console.log(theRequest, "theRequest")
+   return theRequest[name]
+}
+
+export const getRandomKey = () => {
+   const key = "" + new Date().getTime() + Math.floor(Math.random() * 1000000)
+   return key
+}
+
+/**
+ * 删除token
+ */
+export const removeAuth = () => {
+   sessionStorage.removeItem("Authorization")
+}
+
+/**
+ * 设置token
+ * @param token
+ * @returns {void}
+ */
+export const setAuth = (token: any) => {
+   sessionStorage.setItem("Authorization", token)
+}
+
+/**
+ * 获取token
+ */
+export const getAuth = () => {
+   sessionStorage.getItem("Authorization")
+}
+
+/**
+ * 开始加载
+ */
+export const openLoading = () => {
+   if (helpState.loadingCount === 0) {
+      helpState.loadingCount++
+      Toast.loading({
+         message: "加载中...",
+         forbidClick: true,
+         loadingType: "spinner",
+         duration: 0
+      })
+   }
+}
+
+/**
+ * 关闭加载
+ */
+export const closeLoading = () => {
+   // console.log(helpState.loadingCount, +new Date());
+   if (helpState.loadingCount <= 0) return
+   setTimeout(() => {
+      helpState.loadingCount--
+      if (helpState.loadingCount === 0) {
+         Toast.clear()
+      }
+   }, 200)
+}
+
+export const getWeekCh = (week: number, type = 0) => {
+   const template = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]
+   const template2 = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]
+   return type ? template2[week] : template[week]
+}
+
+// 秒转分
+export const getSecondRPM = (second: number, type?: string) => {
+   if (isNaN(second)) return "00:00"
+   const mm = Math.floor(second / 60)
+      .toString()
+      .padStart(2, "0")
+   const dd = Math.floor(second % 60)
+      .toString()
+      .padStart(2, "0")
+   if (type === "cn") {
+      return mm + "分" + dd + "秒"
+   } else {
+      return mm + ":" + dd
+   }
+}
+
+/**
+ * @description 格式化日期控件显示内容
+ * @param type
+ * @param option
+ * @returns OBJECT
+ */
+export const formatterDatePicker = (type: any, option: any) => {
+   if (type === "year") {
+      option.text += "年"
+   }
+   if (type === "month") {
+      option.text += "月"
+   }
+   if (type === "day") {
+      option.text += "日"
+   }
+   return option
+}

src/views/coursewarePlay/image/back.svg

@@ -0,0 +1,11 @@
+<?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/image/icon-arrow.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" 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">
+        <g id="课件播放目录（老师）" transform="translate(-570.000000, -213.000000)" fill="#FFFFFF">
+            <g id="编组" transform="translate(548.000000, 0.000000)">
+                <g id="编组-5" transform="translate(22.000000, 209.000000)">
+                    <g id="展开更多备份" transform="translate(6.000000, 10.000000) rotate(-90.000000) translate(-6.000000, -10.000000) translate(0.000000, 4.000000)">
+                        <path d="M6.85328183,4.39627936 L10.070225,9.66036817 C10.3582139,10.1316227 10.2096477,10.7471111 9.73839317,11.0351 C9.58138526,11.1310493 9.40094791,11.1818182 9.21694316,11.1818182 L2.78305684,11.1818182 C2.23077209,11.1818182 1.78305684,10.7341029 1.78305684,10.1818182 C1.78305684,9.99781343 1.83382572,9.81737609 1.92977501,9.66036817 L5.14671817,4.39627936 C5.43470705,3.92502482 6.05019547,3.77645865 6.52145001,4.06444754 C6.6568159,4.14717114 6.77055823,4.26091347 6.85328183,4.39627936 Z" id="展开更多" transform="translate(6.000000, 7.090909) rotate(-180.000000) translate(-6.000000, -7.090909) "></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/coursewarePlay/image/icon-dian.svg

@@ -0,0 +1,24 @@
+<?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>
+    <defs>
+        <path d="M23.21608,16.0687402 L23.3033009,16.1464466 C23.6659306,16.5090763 23.6918327,17.0809217 23.3810072,17.4734394 L23.3033009,17.5606602 L17.6464466,23.2175144 C17.2838169,23.5801441 16.7119715,23.6060462 16.3194539,23.2952208 L16.232233,23.2175144 L12.6966991,19.6819805 C12.3061748,19.2914562 12.3061748,18.6582912 12.6966991,18.267767 C13.0593288,17.9051373 13.6311742,17.8792351 14.0236919,18.1900606 L14.1109127,18.267767 L16.9384817,21.0967502 L21.8890873,16.1464466 C22.251717,15.7838169 22.8235624,15.7579148 23.21608,16.0687402 Z M11,0 C14.8659932,0 18,3.13400675 18,7 C18,9.41274397 16.7793245,11.5403839 14.9218582,12.7990351 C15.9323681,13.229421 16.8689386,13.8268917 17.694678,14.5714883 C18.1048344,14.9413398 18.1375079,15.5736612 17.7676564,15.9838176 C17.3978048,16.393974 16.7654834,16.4266475 16.355327,16.0567959 C14.8954225,14.7403517 13.0066893,14 11,14 C6.581722,14 3,17.581722 3,22 C3,22.5522847 2.55228475,23 2,23 C1.44771525,23 1,22.5522847 1,22 C1,17.8693735 3.50442274,14.3236863 7.07765565,12.7985509 C5.22023262,11.5396119 4,9.41230625 4,7 C4,3.13400675 7.13400675,0 11,0 Z M11,2 C8.23857625,2 6,4.23857625 6,7 C6,9.76142375 8.23857625,12 11,12 C13.7614237,12 16,9.76142375 16,7 C16,4.23857625 13.7614237,2 11,2 Z" id="path-1"></path>
+        <filter x="-13.3%" y="-12.8%" width="126.6%" height="125.5%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.125792177 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="课件播放（老师）" transform="translate(-740.000000, -151.000000)" fill-rule="nonzero">
+            <g id="编组-8" transform="translate(732.000000, 66.000000)">
+                <g id="编组-7" transform="translate(0.000000, 75.000000)">
+                    <g id="形状结合" transform="translate(8.000000, 10.000000)">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                        <use fill="#FFFFFF" xlink:href="#path-1"></use>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/coursewarePlay/image/icon-down.svg

@@ -0,0 +1,22 @@
+<?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>
+    <defs>
+        <path d="M12.619886,7.97254617 L12.7071068,8.05025253 L16.2426407,11.5857864 C16.633165,11.9763107 16.633165,12.6094757 16.2426407,13 C15.880011,13.3626297 15.3081656,13.3885318 14.9156479,13.0777064 L14.8284271,13 L12.9994661,11.1713593 L13,19 C13,19.5522847 12.5522847,20 12,20 C11.4477153,20 11,19.5522847 11,19 L10.9994661,11.1703593 L9.17157288,13 C8.80894318,13.3626297 8.23709778,13.3885318 7.84458013,13.0777064 L7.75735931,13 C7.39472961,12.6373703 7.36882749,12.0655249 7.67965295,11.6730073 L7.75735931,11.5857864 L11.2928932,8.05025253 C11.6555229,7.68762283 12.2273683,7.66172071 12.619886,7.97254617 Z M18.363961,5.63603897 C21.8786797,9.15075759 21.8786797,14.8492424 18.363961,18.363961 C17.9734367,18.7544853 17.3402718,18.7544853 16.9497475,18.363961 C16.5592232,17.9734367 16.5592232,17.3402718 16.9497475,16.9497475 C19.6834175,14.2160774 19.6834175,9.78392257 16.9497475,7.05025253 C14.2160774,4.31658249 9.78392257,4.31658249 7.05025253,7.05025253 C4.31658249,9.78392257 4.31658249,14.2160774 7.05025253,16.9497475 C7.44077682,17.3402718 7.44077682,17.9734367 7.05025253,18.363961 C6.65972824,18.7544853 6.02656326,18.7544853 5.63603897,18.363961 C2.12132034,14.8492424 2.12132034,9.15075759 5.63603897,5.63603897 C9.15075759,2.12132034 14.8492424,2.12132034 18.363961,5.63603897 Z" id="path-1"></path>
+        <filter x="-33.3%" y="-35.3%" width="166.7%" height="170.6%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="课件播放/全屏（伴学端）" transform="translate(-90.000000, -227.000000)" fill-rule="nonzero">
+            <g id="编组-8备份" transform="translate(82.000000, 68.000000)">
+                <g id="形状结合" transform="translate(20.000000, 171.000000) rotate(-180.000000) translate(-20.000000, -171.000000) translate(8.000000, 159.000000)">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                    <use fill="#FFFFFF" xlink:href="#path-1"></use>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/coursewarePlay/image/icon-image-active.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="15px" height="16px" viewBox="0 0 15 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="课件播放（三层）" transform="translate(-306.000000, -298.000000)" fill="#FF8057" fill-rule="nonzero">
+            <g id="编组" transform="translate(306.000000, 0.000000)">
+                <g id="编组-8" transform="translate(0.000000, 93.500000)">
+                    <g id="编组-12" transform="translate(0.000000, 65.000000)">
+                        <g id="知识点目录/图片备份" transform="translate(0.000000, 140.000000)">
+                            <g id="编组" transform="translate(7.500000, 7.500000) scale(-1, 1) translate(-7.500000, -7.500000) translate(0.500000, 2.000000)">
+                                <path d="M12.6293706,0 C13.3863483,-1.39054547e-16 14,0.613651672 14,1.37062937 L14,1.37062937 L14,9.62937063 C14,10.3863483 13.3863483,11 12.6293706,11 L12.6293706,11 L1.37062937,11 C0.613651672,11 9.27030316e-17,10.3863483 0,9.62937063 L0,9.62937063 L0,1.37062937 C-9.27030316e-17,0.613651672 0.613651672,1.39054547e-16 1.37062937,0 L1.37062937,0 Z M9.22142099,4.12294163 C8.89196248,3.93663301 8.47385062,4.05267893 8.287542,4.38213744 L8.287542,4.38213744 L7.04470782,6.57990105 C6.98353166,6.68808179 6.89408921,6.77759053 6.78595381,6.8388468 C6.4566334,7.02539942 6.03843569,6.90966326 5.85188307,6.58034285 L5.85188307,6.58034285 L5.64657316,6.21791028 C5.58509397,6.10938138 5.49516084,6.01968934 5.3864673,5.95850172 C5.05664729,5.77283381 4.63876177,5.88969218 4.45309386,6.21951219 L4.45309386,6.21951219 L3.17297968,8.49350383 C3.11520712,8.59613088 3.08485695,8.71191444 3.08485695,8.82968531 C3.08485695,9.20817416 3.39168279,9.515 3.77017164,9.515 L3.77017164,9.515 L11.2094939,9.515 C11.3277631,9.515 11.4440194,9.4843926 11.5469559,9.42615461 C11.8763768,9.23977951 11.9923383,8.82164423 11.8059632,8.49222333 L11.8059632,8.49222333 L9.4805487,4.38201704 C9.41928897,4.27373951 9.32971088,4.18417951 9.22142099,4.12294163 Z M3.23076923,1.5125 C2.34230769,1.5125 1.61538462,2.255 1.61538462,3.1625 C1.61538462,4.07 2.34230769,4.8125 3.23076923,4.8125 C4.11923077,4.8125 4.84615385,4.07 4.84615385,3.1625 C4.84615385,2.255 4.11923077,1.5125 3.23076923,1.5125 Z" id="形状结合"></path>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

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

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="15px" height="16px" viewBox="0 0 15 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="课件播放（三层）" transform="translate(-306.000000, -268.000000)" fill="#FFFFFF" fill-rule="nonzero">
+            <g id="编组" transform="translate(306.000000, 0.000000)">
+                <g id="编组-8" transform="translate(0.000000, 93.500000)">
+                    <g id="编组-12" transform="translate(0.000000, 65.000000)">
+                        <g id="知识点目录/图片备份-4" transform="translate(0.000000, 110.000000)">
+                            <g id="编组" transform="translate(7.500000, 7.500000) scale(-1, 1) translate(-7.500000, -7.500000) translate(0.500000, 2.000000)">
+                                <path d="M12.6293706,0 C13.3863483,-1.39054547e-16 14,0.613651672 14,1.37062937 L14,1.37062937 L14,9.62937063 C14,10.3863483 13.3863483,11 12.6293706,11 L12.6293706,11 L1.37062937,11 C0.613651672,11 9.27030316e-17,10.3863483 0,9.62937063 L0,9.62937063 L0,1.37062937 C-9.27030316e-17,0.613651672 0.613651672,1.39054547e-16 1.37062937,0 L1.37062937,0 Z M9.22142099,4.12294163 C8.89196248,3.93663301 8.47385062,4.05267893 8.287542,4.38213744 L8.287542,4.38213744 L7.04470782,6.57990105 C6.98353166,6.68808179 6.89408921,6.77759053 6.78595381,6.8388468 C6.4566334,7.02539942 6.03843569,6.90966326 5.85188307,6.58034285 L5.85188307,6.58034285 L5.64657316,6.21791028 C5.58509397,6.10938138 5.49516084,6.01968934 5.3864673,5.95850172 C5.05664729,5.77283381 4.63876177,5.88969218 4.45309386,6.21951219 L4.45309386,6.21951219 L3.17297968,8.49350383 C3.11520712,8.59613088 3.08485695,8.71191444 3.08485695,8.82968531 C3.08485695,9.20817416 3.39168279,9.515 3.77017164,9.515 L3.77017164,9.515 L11.2094939,9.515 C11.3277631,9.515 11.4440194,9.4843926 11.5469559,9.42615461 C11.8763768,9.23977951 11.9923383,8.82164423 11.8059632,8.49222333 L11.8059632,8.49222333 L9.4805487,4.38201704 C9.41928897,4.27373951 9.32971088,4.18417951 9.22142099,4.12294163 Z M3.23076923,1.5125 C2.34230769,1.5125 1.61538462,2.255 1.61538462,3.1625 C1.61538462,4.07 2.34230769,4.8125 3.23076923,4.8125 C4.11923077,4.8125 4.84615385,4.07 4.84615385,3.1625 C4.84615385,2.255 4.11923077,1.5125 3.23076923,1.5125 Z" id="形状结合"></path>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/coursewarePlay/image/icon-loop-active.svg

@@ -0,0 +1,23 @@
+<?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>
+    <defs>
+        <path d="M5.00480947,15.25 C6.49624217,17.8332372 9.29235844,19.1935866 12.0802733,18.9792617 C12.1933752,19.672858 12.4261755,20.3264161 12.7562805,20.918295 C9.05647623,21.4111568 5.25493468,19.6832296 3.27275866,16.25 C2.99661629,15.7717074 3.16049144,15.160117 3.63878407,14.8839746 C4.11707669,14.6078322 4.7286671,14.7717074 5.00480947,15.25 Z M10.4132849,7.08904722 L10.5144958,7.14250707 L15.5144958,10.1425071 C16.123756,10.5080632 16.1595948,11.3606179 15.6220123,11.7834679 L15.5144958,11.8574929 L10.5144958,14.8574929 C9.88129747,15.2374119 9.08434351,14.8231057 9.00623111,14.1142925 L9,14 L9,8 C9,7.26157025 9.76529405,6.79134664 10.4132849,7.08904722 Z M19.7272413,6.75 C20.8183076,8.63978222 21.1863003,10.7486105 20.9170607,12.7561204 C20.3245684,12.4254359 19.6711964,12.1929305 18.9778301,12.0792818 C19.0927198,10.6209049 18.7822682,9.11325853 17.9951905,7.75 C15.9241227,4.16280532 11.3371947,2.93374166 7.75,5.00480947 C6.85788041,5.51987496 6.09738693,6.19866524 5.49784407,6.99904787 L7,7 C7.51283584,7 7.93550716,7.38604019 7.99327227,7.88337887 L8,8 C8,8.51283584 7.61395981,8.93550716 7.11662113,8.99327227 L7,9 L3,9 C2.48716416,9 2.06449284,8.61395981 2.00672773,8.11662113 L2,8 L2,4 C2,3.44771525 2.44771525,3 3,3 C3.51283584,3 3.93550716,3.38604019 3.99327227,3.88337887 L4,4 L3.99919549,5.66623947 C4.74283972,4.70951337 5.67119653,3.89560614 6.75,3.27275866 C11.2937799,0.649406102 17.1038888,2.20622008 19.7272413,6.75 Z M11.001,9.766 L11.001,12.233 L13.057,11 L11.001,9.766 Z" id="path-1"></path>
+        <filter x="-31.6%" y="-31.6%" width="163.2%" height="163.1%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="课件播放（控件）" transform="translate(-42.000000, -289.000000)" fill-rule="nonzero">
+            <g id="循环备份" transform="translate(42.000000, 289.000000)">
+                <g id="形状结合">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                    <use fill="#FFFFFF" xlink:href="#path-1"></use>
+                </g>
+                <path d="M18,13 C20.7614237,13 23,15.2385763 23,18 C23,20.7614237 20.7614237,23 18,23 C15.2385763,23 13,20.7614237 13,18 C13,15.2385763 15.2385763,13 18,13 Z M20.9553274,16.1420886 C20.7524108,15.9832858 20.4506336,16.0042922 20.2548135,16.2001122 L20.2548135,16.2001122 L17.5814904,18.87328 L16.1273302,17.4183562 L16.0823515,17.3785153 C15.8794349,17.2197125 15.5776577,17.2407189 15.3818377,17.436539 C15.1709545,17.6474221 15.1628139,17.9811905 15.3636549,18.1820315 L15.3636549,18.1820315 L17.1819295,20.0003061 L17.2269082,20.0401471 C17.4298248,20.1989498 17.731602,20.1779434 17.9274221,19.9821234 L17.9274221,19.9821234 L20.9821234,16.9274221 L21.0242071,16.8804452 C21.1931032,16.669536 21.1868014,16.3684248 21.0003061,16.1819295 L21.0003061,16.1819295 Z" id="形状结合" fill="#FF8057"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/coursewarePlay/image/icon-loop.svg

@@ -0,0 +1,20 @@
+<?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>
+    <defs>
+        <path d="M19.7272413,6.75 C22.3505939,11.2937799 20.7937799,17.1038888 16.25,19.7272413 C11.7062201,22.3505939 5.89611123,20.7937799 3.27275866,16.25 C2.99661629,15.7717074 3.16049144,15.160117 3.63878407,14.8839746 C4.11707669,14.6078322 4.7286671,14.7717074 5.00480947,15.25 C7.07587728,18.8371947 11.6628053,20.0662583 15.25,17.9951905 C18.8371947,15.9241227 20.0662583,11.3371947 17.9951905,7.75 C15.9241227,4.16280532 11.3371947,2.93374166 7.75,5.00480947 C6.85788041,5.51987496 6.09738693,6.19866524 5.49784407,6.99904787 L7,7 C7.51283584,7 7.93550716,7.38604019 7.99327227,7.88337887 L8,8 C8,8.51283584 7.61395981,8.93550716 7.11662113,8.99327227 L7,9 L3,9 C2.48716416,9 2.06449284,8.61395981 2.00672773,8.11662113 L2,8 L2,4 C2,3.44771525 2.44771525,3 3,3 C3.51283584,3 3.93550716,3.38604019 3.99327227,3.88337887 L4,4 L3.99919549,5.66623947 C4.74283972,4.70951337 5.67119653,3.89560614 6.75,3.27275866 C11.2937799,0.649406102 17.1038888,2.20622008 19.7272413,6.75 Z M9,8 C9,7.22270552 9.84797124,6.74259237 10.5144958,7.14250707 L10.5144958,7.14250707 L15.5144958,10.1425071 C16.1618347,10.5309105 16.1618347,11.4690895 15.5144958,11.8574929 L15.5144958,11.8574929 L10.5144958,14.8574929 C9.84797124,15.2574076 9,14.7772945 9,14 L9,14 Z M11.001,9.766 L11.001,12.233 L13.057,11 L11.001,9.766 Z" id="path-1"></path>
+        <filter x="-31.6%" y="-31.6%" width="163.2%" height="163.1%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="课件播放（控件）" transform="translate(-42.000000, -246.000000)" fill-rule="nonzero">
+            <g id="形状结合" transform="translate(42.000000, 246.000000)">
+                <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                <use fill="#FFFFFF" xlink:href="#path-1"></use>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/coursewarePlay/image/icon-menu.svg

@@ -0,0 +1,28 @@
+<?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>
+    <defs>
+        <path d="M12,12.5 L12,5.83333333 C13.3333333,4.64814815 14.6666667,4.05555556 16,4.05555556 C17.3333333,4.05555556 18.6666667,4.05555556 20,4.05555556 L20,19.1666667 C18.7195163,19.1666667 18.4037995,19.1666667 17.0528496,19.1666667 C15.7018997,19.1666667 13.3509499,18.7592593 12,19.9444444 C10.4052541,18.7592593 7.98478324,19.1666667 6.73858743,19.1666667 C5.49239162,19.1666667 5.24619581,19.1666667 4,19.1666667 L4,4.05555556 C5.33333333,4.05555556 6.66666667,4.05555556 8,4.05555556" id="path-1"></path>
+        <filter x="-25.0%" y="-25.2%" width="150.0%" height="150.3%" filterUnits="objectBoundingBox" id="filter-2">
+            <feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
+            <feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
+            <feMorphology radius="1" operator="erode" in="SourceAlpha" result="shadowInner"></feMorphology>
+            <feOffset dx="0" dy="0" in="shadowInner" result="shadowInner"></feOffset>
+            <feComposite in="shadowOffsetOuter1" in2="shadowInner" operator="out" result="shadowOffsetOuter1"></feComposite>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.125792177 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="课件播放（老师）" transform="translate(-740.000000, -76.000000)" fill-rule="nonzero">
+            <g id="编组-8" transform="translate(732.000000, 66.000000)">
+                <g id="编组-2" transform="translate(2.000000, 10.000000)">
+                    <g id="路径" transform="translate(6.000000, 0.000000)">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                        <use stroke="#FFFFFF" stroke-width="2" xlink:href="#path-1"></use>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/coursewarePlay/image/icon-mulv.svg

@@ -0,0 +1,18 @@
+<?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>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#FFB790" offset="0%"></stop>
+            <stop stop-color="#FF8057" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="课件播放（侧边目录）" transform="translate(-63.000000, -40.000000)" fill-rule="nonzero">
+            <g id="课程目录" transform="translate(63.000000, 40.000000)">
+                <path d="M0,12 C0.0544564416,8.0225337 0.745221648,4.72912615 2.76493864,2.76493864 C4.72912615,0.745221648 8.0225337,0.0544564416 12,0 C15.9774663,0.0544564416 19.2708739,0.745221648 21.2350614,2.76493864 C23.2547784,4.72912615 23.9455436,8.0225337 24,12 C23.9455436,15.9774663 23.2547784,19.2708739 21.2350614,21.2350614 C19.2708739,23.2547784 15.9774663,23.9455436 12,24 C8.0225337,23.9455436 4.72912615,23.2547784 2.76493864,21.2350614 C0.745221648,19.2708739 0.0544564416,15.9774663 0,12 Z" id="路径" fill="url(#linearGradient-1)"></path>
+                <path d="M16.9005371,8.99518041 L7.09972174,8.99518041 C6.61722643,8.99518041 6.22222222,8.57140376 6.22222222,8.05314576 C6.22222222,7.53516565 6.61696758,7.11111111 7.09972174,7.11111111 L16.9002783,7.11111111 C17.3827736,7.11111111 17.7777778,7.53488776 17.7777778,8.05314576 C17.7777778,8.57112587 17.3830324,8.99518041 16.9005371,8.99518041 L16.9005371,8.99518041 Z M16.9005371,13.3863402 L7.09972174,13.3863402 C6.61722643,13.3863402 6.22222222,12.9625635 6.22222222,12.4443055 C6.22222222,11.9263254 6.61696758,11.5022709 7.09972174,11.5022709 L16.9002783,11.5022709 C17.3827736,11.5022709 17.7777778,11.9260475 17.7777778,12.4443055 C17.7777778,12.9625635 17.3830324,13.3863402 16.9005371,13.3863402 L16.9005371,13.3863402 Z M10.9332816,17.7777778 L7.09972174,17.7777778 C6.61722643,17.7777778 6.22222222,17.3540011 6.22222222,16.8357431 C6.22222222,16.317763 6.61696758,15.8937085 7.09972174,15.8937085 L10.9330227,15.8937085 C11.415518,15.8937085 11.8105224,16.3174851 11.8105224,16.8357431 C11.8107811,17.3540011 11.4157769,17.7777778 10.9332816,17.7777778 L10.9332816,17.7777778 Z" id="形状" fill="#FFFFFF"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/coursewarePlay/image/icon-pause.svg

@@ -0,0 +1,32 @@
+<?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>
+    <defs>
+        <rect id="path-1" x="4" y="3" width="5" height="18" rx="2"></rect>
+        <filter x="-120.0%" y="-33.3%" width="340.0%" height="166.7%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+        <rect id="path-3" x="15" y="3" width="5" height="18" rx="2"></rect>
+        <filter x="-120.0%" y="-33.3%" width="340.0%" height="166.7%" filterUnits="objectBoundingBox" id="filter-4">
+            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="课件播放（控件）" transform="translate(-42.000000, -46.000000)" fill-rule="nonzero">
+            <g id="播放" transform="translate(42.000000, 46.000000)">
+                <g id="矩形">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                    <use fill="#FFFFFF" xlink:href="#path-1"></use>
+                </g>
+                <g id="矩形备份">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
+                    <use fill="#FFFFFF" xlink:href="#path-3"></use>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/coursewarePlay/image/icon-play.svg

@@ -0,0 +1,22 @@
+<?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>
+    <defs>
+        <path d="M15.2349141,5.27497835 L22.6793243,18.2549758 C23.228861,19.2131423 22.8976011,20.4353773 21.9394345,20.9849141 C21.6365821,21.1586088 21.293537,21.25 20.9444103,21.25 L6.05558972,21.25 C4.95102022,21.25 4.05558972,20.3545695 4.05558972,19.25 C4.05558972,18.9008732 4.14698087,18.5578282 4.32067566,18.2549758 L11.7650859,5.27497835 C12.3146227,4.31681177 13.5368577,3.98555182 14.4950242,4.53508853 C14.8029434,4.7116892 15.0583134,4.96705923 15.2349141,5.27497835 Z" id="path-1"></path>
+        <filter x="-27.5%" y="-31.6%" width="155.1%" height="163.2%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="课件播放（控件）" transform="translate(-42.000000, -83.000000)" fill-rule="nonzero">
+            <g id="播放备份" transform="translate(42.000000, 83.000000)">
+                <g id="三角形" transform="translate(13.500000, 11.750000) rotate(-270.000000) translate(-13.500000, -11.750000) ">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                    <use fill="#FFFFFF" xlink:href="#path-1"></use>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/coursewarePlay/image/icon-point.svg

@@ -0,0 +1,24 @@
+<?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>
+    <defs>
+        <path d="M17.9889353,7.03683462 C15.5779696,4.12723478 11.4245096,3.37164362 8.14331066,5.24573351 C4.86211176,7.1198234 3.40277969,11.0812175 4.68401757,14.6360727 C5.96525544,18.190928 9.6162626,20.3104404 13.338596,19.6602991 C17.0609294,19.0101577 19.7773154,15.7785188 19.7776894,11.9998178 C19.7776894,11.3862113 20.2751133,10.888785 20.8887168,10.888785 C21.5023203,10.888785 21.9997442,11.3862113 21.9997442,11.9998178 C21.9997099,16.8400427 18.5329414,20.9853151 13.7690477,21.8413977 C9.00515408,22.6974802 4.31207278,20.0185514 2.62687668,15.4811663 C0.941680576,10.9437811 2.7482686,5.85083589 6.91602308,3.38965046 C11.0837776,0.928465034 16.4159405,1.80576128 19.5754824,5.47250055 L20.1087755,4.94698208 C20.545968,4.51623039 21.2495741,4.52145337 21.6803238,4.95864794 C22.1110734,5.39584251 22.1058505,6.09945198 21.668658,6.5302037 L12.3204735,15.742887 C11.8856052,16.1721277 11.185738,16.1696459 10.7539248,15.7373318 L6.69200863,11.6742852 C6.27096012,11.2383394 6.2769817,10.5453817 6.70554253,10.1168189 C7.13410335,9.688256 7.82705768,9.68223439 8.26300138,10.1032849 L11.5460874,13.3863866 L17.9889353,7.03683462 L17.9889353,7.03683462 Z" id="path-1"></path>
+        <filter x="-15.0%" y="-15.0%" width="130.0%" height="130.0%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.125792177 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="课件播放（老师）" transform="translate(-740.000000, -208.000000)" fill-rule="nonzero">
+            <g id="编组-8" transform="translate(732.000000, 66.000000)">
+                <g id="编组-7" transform="translate(0.000000, 75.000000)">
+                    <g id="路径" transform="translate(8.000000, 67.000000)">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                        <use fill="#FFFFFF" xlink:href="#path-1"></use>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/coursewarePlay/image/icon-song-active.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="15px" height="16px" viewBox="0 0 15 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="课件播放（三层）" transform="translate(-364.000000, -298.000000)" fill-rule="nonzero">
+            <g id="编组" transform="translate(306.000000, 0.000000)">
+                <g id="编组-8" transform="translate(0.000000, 93.500000)">
+                    <g id="编组-12" transform="translate(0.000000, 65.000000)">
+                        <g id="知识点目录/图片备份-3" transform="translate(58.000000, 140.000000)">
+                            <g id="编组" transform="translate(1.000000, 0.000000)">
+                                <path d="M9,0 L13,4 L13,13 C13,14.1 12.1,15 11,15 L2,15 C0.900000001,15 0,14.1 0,13 L0,2 C0,0.9 0.900000001,0 2,0 L9,0 Z M9.12286624,4.39507366 L9.05045121,4.40041053 L4.62790119,5.15709075 C4.43655776,5.19167453 4.28513683,5.3491615 4.28561715,5.52434895 L4.28561715,5.52434895 L4.23182216,9.53593936 C3.89020555,9.39268515 3.46572382,9.3940618 3.05944296,9.57324696 C2.32170786,9.89861591 1.93033971,10.6831644 2.18299927,11.3317032 L2.18299927,11.3317032 L2.20168239,11.3766901 C2.48234091,12.0123255 3.29959494,12.2398786 4.02247275,11.8921219 C4.56059052,11.6329597 4.90067764,11.1236487 4.92749856,10.6174852 L4.92749856,10.6174852 L4.97723571,6.93534117 C4.98142189,6.75800316 5.13114435,6.59642647 5.32418625,6.56593241 L5.32418625,6.56593241 L8.30000288,6.10080156 C8.30466938,6.098651 8.31400237,6.09434988 8.32036733,6.09628904 C8.51680615,6.07397444 8.6721386,6.20703285 8.66965088,6.38846059 L8.66965088,6.38846059 L8.5995415,9.09592309 C8.2484902,8.94608506 7.81030549,8.94997414 7.39554263,9.14388305 C6.66756943,9.47937063 6.29062966,10.2718872 6.5572887,10.9139742 C6.82394775,11.5560613 7.63229769,11.8023353 8.36323892,11.4606074 C8.94898573,11.1906651 9.30736799,10.629963 9.28887187,10.0889393 L9.28887187,10.0889393 L9.42646417,4.69000872 C9.42773374,4.6796787 9.42603527,4.67558898 9.42730484,4.66525896 C9.4140946,4.48619318 9.2481596,4.36776591 9.05045121,4.40041053 Z" id="形状结合" fill="#FF8057"></path>
+                                <path d="M9.00000001,0 L13,4 L10,4 C9.4,4 9.00000001,3.6 9.00000001,3 L9.00000001,0 Z" id="路径" fill="#CC4419" opacity="0.506022135" style="mix-blend-mode: multiply;"></path>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/coursewarePlay/image/icon-song.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="15px" height="16px" viewBox="0 0 15 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="课件播放（三层）" transform="translate(-364.000000, -268.000000)" fill-rule="nonzero">
+            <g id="编组" transform="translate(306.000000, 0.000000)">
+                <g id="编组-8" transform="translate(0.000000, 93.500000)">
+                    <g id="编组-12" transform="translate(0.000000, 65.000000)">
+                        <g id="知识点目录/图片备份-6" transform="translate(58.000000, 110.000000)">
+                            <g id="编组" transform="translate(1.000000, 0.000000)">
+                                <path d="M9,0 L13,4 L13,13 C13,14.1 12.1,15 11,15 L2,15 C0.900000001,15 0,14.1 0,13 L0,2 C0,0.9 0.900000001,0 2,0 L9,0 Z M9.12286624,4.39507366 L9.05045121,4.40041053 L4.62790119,5.15709075 C4.43655776,5.19167453 4.28513683,5.3491615 4.28561715,5.52434895 L4.28561715,5.52434895 L4.23182216,9.53593936 C3.89020555,9.39268515 3.46572382,9.3940618 3.05944296,9.57324696 C2.32170786,9.89861591 1.93033971,10.6831644 2.18299927,11.3317032 L2.18299927,11.3317032 L2.20168239,11.3766901 C2.48234091,12.0123255 3.29959494,12.2398786 4.02247275,11.8921219 C4.56059052,11.6329597 4.90067764,11.1236487 4.92749856,10.6174852 L4.92749856,10.6174852 L4.97723571,6.93534117 C4.98142189,6.75800316 5.13114435,6.59642647 5.32418625,6.56593241 L5.32418625,6.56593241 L8.30000288,6.10080156 C8.30466938,6.098651 8.31400237,6.09434988 8.32036733,6.09628904 C8.51680615,6.07397444 8.6721386,6.20703285 8.66965088,6.38846059 L8.66965088,6.38846059 L8.5995415,9.09592309 C8.2484902,8.94608506 7.81030549,8.94997414 7.39554263,9.14388305 C6.66756943,9.47937063 6.29062966,10.2718872 6.5572887,10.9139742 C6.82394775,11.5560613 7.63229769,11.8023353 8.36323892,11.4606074 C8.94898573,11.1906651 9.30736799,10.629963 9.28887187,10.0889393 L9.28887187,10.0889393 L9.42646417,4.69000872 C9.42773374,4.6796787 9.42603527,4.67558898 9.42730484,4.66525896 C9.4140946,4.48619318 9.2481596,4.36776591 9.05045121,4.40041053 Z" id="形状结合" fill="#FFFFFF"></path>
+                                <path d="M9.00000001,0 L13,4 L10,4 C9.4,4 9.00000001,3.6 9.00000001,3 L9.00000001,0 Z" id="路径" fill="#B3B3B3" opacity="0.619"></path>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/coursewarePlay/image/icon-start.svg

@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="121px" height="38px" viewBox="0 0 121 38" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>按钮/小按钮/橙</title>
+    <defs>
+        <linearGradient x1="15.3622126%" y1="46.5566937%" x2="89.7647319%" y2="53.6358332%" id="linearGradient-1">
+            <stop stop-color="#FF9C63" offset="0%"></stop>
+            <stop stop-color="#FF7144" offset="100%"></stop>
+        </linearGradient>
+        <text id="text-2" font-family="PingFangSC-Medium, PingFang SC" font-size="16" font-weight="400" fill="#FFFFFF">
+            <tspan x="49" y="24">去练习</tspan>
+        </text>
+        <filter x="-4.2%" y="-4.5%" width="108.3%" height="118.2%" filterUnits="objectBoundingBox" id="filter-3">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0.941236855   0 0 0 0 0.448637032   0 0 0 0 0.244388325  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-4">
+            <stop stop-color="#FCFFFF" offset="0%"></stop>
+            <stop stop-color="#FFE4D4" offset="100%"></stop>
+        </linearGradient>
+        <path d="M10,0 C15.5228475,0 20,4.4771525 20,10 C20,15.5228475 15.5228475,20 10,20 C4.4771525,20 0,15.5228475 0,10 C0,4.4771525 4.4771525,0 10,0 Z M15.8740909,4.13727273 C15.7362351,3.65455394 15.2331964,3.37495234 14.7504546,3.51272728 L10.205,4.81181817 C9.89624241,4.89978885 9.65677854,5.14409039 9.57499999,5.45454546 L9.54545455,5.45454546 L9.54590909,11.0254545 C8.4211929,10.2420678 6.92120134,10.2669785 5.82311793,11.0872797 C4.72503453,11.907581 4.27567032,13.3388975 4.70785225,14.6396281 C5.14003419,15.9403587 6.35662277,16.8181818 7.72727272,16.8181818 L7.83636363,16.8163636 C9.5501842,16.7575695 10.9091192,15.3511924 10.9090909,13.6363636 L10.9090909,8.24636364 L15.25,7.00636364 C15.6400039,6.89481163 15.9089107,6.53837105 15.9090909,6.13272727 L15.9090909,4.38727272 C15.9090909,4.30271722 15.8973272,4.21857285 15.8740909,4.13727273 Z" id="path-5"></path>
+        <filter x="-7.5%" y="-7.5%" width="115.0%" height="115.0%" filterUnits="objectBoundingBox" id="filter-6">
+            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0.941236855   0 0 0 0 0.448637032   0 0 0 0 0.244388325  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="画板" transform="translate(-350.000000, -321.000000)">
+            <g id="编组-2" transform="translate(350.000000, 321.000000)">
+                <rect id="button-normal" fill="url(#linearGradient-1)" x="0" y="0" width="121" height="38" rx="19"></rect>
+                <g id="确定" fill-rule="nonzero" fill="#FFFFFF" fill-opacity="1">
+                    <use filter="url(#filter-3)" xlink:href="#text-2"></use>
+                    <use xlink:href="#text-2"></use>
+                </g>
+                <g id="编组" transform="translate(24.000000, 9.000000)" fill-rule="nonzero">
+                    <g id="形状结合">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
+                        <use fill="url(#linearGradient-4)" xlink:href="#path-5"></use>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/coursewarePlay/image/icon-up.svg

@@ -0,0 +1,22 @@
+<?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>
+    <defs>
+        <path d="M12.619886,7.97254617 L12.7071068,8.05025253 L16.2426407,11.5857864 C16.633165,11.9763107 16.633165,12.6094757 16.2426407,13 C15.880011,13.3626297 15.3081656,13.3885318 14.9156479,13.0777064 L14.8284271,13 L12.9994661,11.1713593 L13,19 C13,19.5522847 12.5522847,20 12,20 C11.4477153,20 11,19.5522847 11,19 L10.9994661,11.1703593 L9.17157288,13 C8.80894318,13.3626297 8.23709778,13.3885318 7.84458013,13.0777064 L7.75735931,13 C7.39472961,12.6373703 7.36882749,12.0655249 7.67965295,11.6730073 L7.75735931,11.5857864 L11.2928932,8.05025253 C11.6555229,7.68762283 12.2273683,7.66172071 12.619886,7.97254617 Z M18.363961,5.63603897 C21.8786797,9.15075759 21.8786797,14.8492424 18.363961,18.363961 C17.9734367,18.7544853 17.3402718,18.7544853 16.9497475,18.363961 C16.5592232,17.9734367 16.5592232,17.3402718 16.9497475,16.9497475 C19.6834175,14.2160774 19.6834175,9.78392257 16.9497475,7.05025253 C14.2160774,4.31658249 9.78392257,4.31658249 7.05025253,7.05025253 C4.31658249,9.78392257 4.31658249,14.2160774 7.05025253,16.9497475 C7.44077682,17.3402718 7.44077682,17.9734367 7.05025253,18.363961 C6.65972824,18.7544853 6.02656326,18.7544853 5.63603897,18.363961 C2.12132034,14.8492424 2.12132034,9.15075759 5.63603897,5.63603897 C9.15075759,2.12132034 14.8492424,2.12132034 18.363961,5.63603897 Z" id="path-1"></path>
+        <filter x="-33.3%" y="-35.3%" width="166.7%" height="170.6%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="课件播放/全屏（伴学端）" transform="translate(-90.000000, -82.000000)" fill-rule="nonzero">
+            <g id="编组-8备份" transform="translate(82.000000, 68.000000)">
+                <g id="形状结合" transform="translate(8.000000, 14.000000)">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                    <use fill="#FFFFFF" xlink:href="#path-1"></use>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/coursewarePlay/image/icon-zhibo.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1673454396647" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1930" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M74.666667 853.333333c-17.066667 0-32-14.933333-32-32v-426.666666c0-17.066667 14.933333-32 32-32s32 14.933333 32 32v426.666666c0 17.066667-14.933333 32-32 32zM366.933333 853.333333c-17.066667 0-32-14.933333-32-32v-618.666666c0-17.066667 14.933333-32 32-32s32 14.933333 32 32v618.666666c0 17.066667-14.933333 32-32 32zM657.066667 853.333333c-17.066667 0-32-14.933333-32-32v-341.333333c0-17.066667 14.933333-32 32-32s32 14.933333 32 32v341.333333c0 17.066667-12.8 32-32 32zM949.333333 853.333333c-17.066667 0-32-14.933333-32-32v-512c0-17.066667 14.933333-32 32-32s32 14.933333 32 32v512c0 17.066667-14.933333 32-32 32z" fill="#FF8057" p-id="1931"></path></svg>

src/views/coursewarePlay/index.module.scss

@@ -0,0 +1,377 @@
+.playContent {
+   width: 100vw;
+   height: 100vh;
+   background-color: #000;
+   overflow: hidden;
+   --plyr-color-main: var(--van-primary);
+   --plyr-range-track-height: 3px;
+}
+
+.coursewarePlay {
+   position: relative;
+   height: 100vh;
+   margin: 0 auto;
+   overflow: hidden;
+}
+
+.playModel {
+   position: absolute;
+   left: 0;
+   top: 0;
+   right: 0;
+   bottom: 0;
+   box-shadow: inset 0px 0px 164px 0px rgba(0, 0, 0, 1);
+   pointer-events: none;
+}
+
+.headerContainer {
+   position: fixed;
+   top: 0;
+   left: 0;
+   right: 0;
+   z-index: 10;
+   display: flex;
+   align-items: center;
+   justify-content: space-between;
+   height: 40px;
+   background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent);
+   transition: transform 0.5s;
+   box-sizing: border-box;
+
+   div {
+      box-sizing: border-box;
+   }
+}
+
+.backBtn {
+   cursor: pointer;
+   color: #fff;
+   height: 100%;
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+   z-index: 10;
+   padding: 0 15px;
+
+   :global {
+      .van-icon {
+         margin-right: 8px;
+      }
+   }
+}
+
+.headRight {
+   position: relative;
+   z-index: 10;
+   display: flex;
+   align-items: center;
+   margin-left: auto;
+   height: 100%;
+   padding-right: 15px;
+
+   .rightBtn {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100%;
+      padding: 0 10px;
+
+      img {
+         width: 22px;
+         height: 22px;
+         display: block;
+      }
+   }
+}
+
+.menu {
+   position: absolute;
+   width: 100%;
+   height: 100%;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   font-size: 16px;
+   color: #fff;
+}
+
+.tabsContent {
+   width: 100vw;
+   height: 100vh;
+
+   :global {
+      .van-tabs__wrap {
+         display: none !important;
+      }
+
+      .van-tabs__content {
+         width: 100%;
+         height: 100%;
+      }
+   }
+}
+
+.wraps {
+   width: 100%;
+   height: 100%;
+   transform-style: preserve-3d;
+   perspective: (32rem);
+   transition-timing-function: initial;
+}
+
+.itemDiv {
+   position: absolute;
+   left: 0;
+   top: 0;
+   right: 0;
+   bottom: 0;
+   width: 100%;
+   height: 100%;
+   background-color: #000;
+   // transition-duration: .8s;
+   transform-style: preserve-3d;
+   transition-property: transform, opacity, height;
+   backface-visibility: hidden;
+   overflow: hidden;
+   z-index: 1;
+
+   &.itemActive {
+      z-index: 10;
+   }
+
+   &.acitveAnimation {
+      transition-duration: 0.8s;
+   }
+
+   &.show {
+      display: block;
+   }
+
+   &.hide {
+      display: none;
+   }
+
+   video {
+      width: 100%;
+      height: 100%;
+   }
+
+   img {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+   }
+}
+
+.fullBtn {
+   cursor: pointer;
+   width: 58px;
+   height: 66px;
+   display: flex;
+   flex-direction: column;
+   align-items: center;
+   color: #fff;
+   justify-content: space-evenly;
+   overflow: hidden;
+   white-space: nowrap;
+
+   &:active {
+      background: rgba(255, 255, 255, 0.2);
+   }
+}
+
+.rightFixedBtns {
+   position: absolute;
+   top: 50%;
+   transform: translateY(-50%);
+   right: 12px;
+   z-index: 10;
+
+   .btnsBottom {
+      margin-top: 10px;
+   }
+}
+
+.leftFixedBtns {
+   position: absolute;
+   top: 50%;
+   transform: translateY(-50%);
+   left: 12px;
+   z-index: 10;
+
+   .prePoint {
+      margin-bottom: 8px;
+   }
+}
+
+.btnsWrap {
+   background: rgba(51, 51, 51, 0.4);
+   border-radius: 6px;
+   overflow: hidden;
+   margin-bottom: 12px;
+   &:last-child {
+      margin-bottom: 12px;
+   }
+}
+
+.bottomFixedContainer {
+   position: absolute;
+   left: 0;
+   right: 0;
+   bottom: 0;
+   z-index: 10;
+   background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent);
+   transition: transform 0.5s;
+
+   .time {
+      display: flex;
+      justify-content: space-between;
+      color: #fff;
+      font-size: 10px;
+      padding: 4px 20px;
+   }
+
+   .slider {
+      padding: 8px 20px;
+
+      :global {
+         .van-slider__button {
+            background: var(--van-primary);
+         }
+      }
+   }
+
+   .actions {
+      display: flex;
+      justify-content: space-between;
+      color: #fff;
+      font-size: 12px;
+      padding: 0 10px 4px 20px;
+      align-items: center;
+
+      .actionBtn {
+         display: flex;
+      }
+
+      .actionBtn > img {
+         width: 30px;
+         height: 30px;
+         display: block;
+         padding: 4px 10px 4px 4px;
+      }
+   }
+}
+
+.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%);
+   }
+
+   .left-enter-active,
+   .left-leave-active {
+      transition: all 0.5s;
+   }
+
+   .left-enter-from,
+   .left-leave-to {
+      left: -60px;
+      opacity: 0;
+   }
+
+   .right-enter-active,
+   .right-leave-active {
+      transition: all 0.5s;
+   }
+
+   .right-enter-from,
+   .right-leave-to {
+      right: -60px;
+      opacity: 0;
+   }
+
+   .bottom-enter-active,
+   .bottom-leave-active {
+      transition: transform 0.5s;
+   }
+
+   .bottom-enter-from,
+   .bottom-leave-to {
+      transform: translateY(100%);
+   }
+}
+
+.loadWrap {
+   position: absolute;
+   left: -6px;
+   top: 0;
+   right: -6px;
+   bottom: 0;
+   background: linear-gradient(45deg, #21232a, #111218);
+   display: flex;
+   justify-content: center;
+   align-items: center;
+}
+
+.playRecordTime {
+   width: 90px;
+   margin-right: 10px;
+   background: rgba(0, 0, 0, 0.4);
+   border-radius: 20px;
+   font-size: 12px;
+   padding: 6px;
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   color: #fff;
+
+   .timeLoad {
+      width: 5px;
+      height: 5px;
+      background: #ff4e19;
+      border: 0.5px solid #ffffff;
+      border-radius: 50%;
+      margin-right: 3px;
+      animation: loadFade 1s ease-in-out infinite;
+   }
+}
+
+@keyframes loadFade {
+   0% {
+      opacity: 0;
+   }
+
+   50% {
+      opacity: 0.5;
+   }
+
+   100% {
+      opacity: 1;
+   }
+}
+
+.swiperContainer {
+   :global {
+      .swiper-wrapper {
+         height: 100vh;
+      }
+   }
+}
+
+.popupMore {
+   background: rgba(0, 0, 0, 0.8);
+}

src/views/coursewarePlay/index.tsx

@@ -0,0 +1,1001 @@
+import { closeToast, Icon, Popup, showDialog, showToast } from "vant"
+import { defineComponent, onMounted, reactive, nextTick, onUnmounted, ref, watch, Transition, computed } from "vue"
+import iconBack from "./image/back.svg"
+import styles from "./index.module.scss"
+import "plyr/dist/plyr.css"
+import "vant/lib/index.css"
+// import request from "@/helpers/request"
+
+// import { state } from "@/state"
+const state = {
+   platformApi: "/api",
+   platformType: "TEACHER"
+}
+import { useRoute } from "vue-router"
+import { postMessage, promisefiyPostMessage } from "./helpers/native-message"
+import MusicScore from "./component/musicScore"
+import iconDian from "./image/icon-dian.svg"
+import iconPoint from "./image/icon-point.svg"
+import icons from "./image/icons.json"
+const { iconUp, iconDown, iconPen, iconTouping, iconMenu } = icons
+import Points from "./component/points"
+import { browser } from "./helpers/utils"
+import { Vue3Lottie } from "vue3-lottie"
+import playLoadData from "./datas/data.json"
+import { usePageVisibility } from "@vant/use"
+import PlayRecordTime from "./playRecordTime"
+//import { handleCheckVip } from "../hook/useFee"
+function handleCheckVip() {
+   return true
+}
+//import OGuide from "./component/o-guide"
+import Tool, { ToolItem, ToolType } from "./component/tool"
+import Pen from "./component/tools/pen"
+import VideoItem from "./component/video-item"
+
+import { getLessonCourseDetail_gym } from "@/api/cloudTextbooks.api"
+import { httpAjax } from "@/plugin/httpAjax"
+
+export default defineComponent({
+   name: "CoursewarePlay",
+   setup() {
+      const pageVisibility = usePageVisibility()
+      /** 页面显示和隐藏 */
+      watch(
+         () => pageVisibility.value,
+         value => {
+            if (value == "hidden") {
+               handleStop()
+            }
+         }
+      )
+      /** 设置播放容器 16:9 */
+      const parentContainer = reactive({
+         width: "100vw"
+      })
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const setContainer = () => {
+         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
+         } else {
+            parentContainer.width = width + "px"
+         }
+      }
+      const handleInit = (type = 0) => {
+         //设置容器16:9
+         //setContainer()
+         // 横屏
+         postMessage(
+            {
+               api: "setRequestedOrientation",
+               content: {
+                  orientation: type
+               }
+            },
+            () => {
+               console.log(234)
+            }
+         )
+         // 头,包括返回箭头
+         // postMessage({
+         //   api: 'setTitleBarVisibility',
+         //   content: {
+         //     status: type
+         //   }
+         // })
+         // 安卓的状态栏
+         postMessage({
+            api: "setStatusBarVisibility",
+            content: {
+               isVisibility: type
+            }
+         })
+         // 进入页面设置常量
+         postMessage({
+            api: "keepScreenLongLight",
+            content: {
+               isOpenLight: type ? true : false
+            }
+         })
+      }
+      handleInit()
+      onUnmounted(() => {
+         handleInit(1)
+         window.removeEventListener("message", iframeHandle)
+      })
+
+      const route = useRoute()
+      const headeRef = ref()
+      const data = reactive({
+         detail: null as any,
+         knowledgePointList: [] as any,
+         itemList: [] as any,
+         showHead: true,
+         isCourse: false,
+         isRecordPlay: false,
+         videoRefs: {},
+
+         videoState: "init" as "init" | "play",
+         videoItemRef: null as any,
+         animationState: "start" as "start" | "end"
+      })
+      const activeData = reactive({
+         isAutoPlay: true, // 是否自动播放
+         nowTime: 0,
+         model: true, // 遮罩
+         isAnimation: true, // 是否动画
+         videoBtns: true, // 视频
+         currentTime: 0,
+         duration: 0,
+         timer: null as any,
+         item: null as any
+      })
+      // 获取缓存路径
+      const getCacheFilePath = async (material: any) => {
+         const res = await promisefiyPostMessage({
+            api: "getCourseFilePath",
+            content: {
+               url: material.content,
+               localPath: "",
+               materialId: material.materialId,
+               updateTime: material.updateTime,
+               type: material.typeCode // SONG VIDEO IMAGE
+            }
+         })
+         // console.log('缓存路径返回', res)
+         return res
+      }
+      // 获取当前课程是否签退
+      // const getCourseSchedule = async () => {
+      //   if (!route.query.courseId) return;
+      //   try {
+      //     const res = await request.get(
+      //       `${state.platformApi}/courseSchedule/detail/${route.query.courseId}`,
+      //       {
+      //         hideLoading: true
+      //       }
+      //     );
+      //     if (res?.data) {
+      //       data.isCourse =
+      //         res.data.status === 'ING' && state.platformType == 'TEACHER'
+      //           ? true
+      //           : false;
+      //       // data.isRecordPlay = Date.now() > dayjs(res.data.startTime).valueOf()
+      //     }
+      //   } catch (e) {
+      //     console.log(e);
+      //   }
+      // };
+      const getTempList = async (materialList: any, name: any) => {
+         const list: any = []
+         const browserInfo = browser()
+         for (let j = 0; j < materialList.length; j++) {
+            const material = materialList[j]
+            //请求本地缓存
+            if (browserInfo.isApp && ["VIDEO", "IMG"].includes(material.typeCode)) {
+               const localData = await getCacheFilePath(material)
+               if (localData?.content?.localPath) {
+                  material.url = material.content
+                  material.content = localData.content.localPath
+               }
+            }
+
+            list.push({
+               ...material,
+               iframeRef: null,
+               videoEle: null,
+               tabName: name,
+               autoPlay: false, //加载完成是否自动播放
+               isprepare: false, // 视频是否加载完成
+               isRender: false // 是否渲染了
+            })
+         }
+         return list
+      }
+      const getItemList = async () => {
+         const list: any = []
+
+         for (let i = 0; i < data.knowledgePointList.length; i++) {
+            const item = data.knowledgePointList[i]
+            if (item.materialList && item.materialList.length > 0) {
+               const tempList = await getTempList(item.materialList, item.name)
+               list.push(...tempList)
+            }
+
+            // 第二层级
+            if (item.children && item.children.length > 0) {
+               const childrenList = item.children || []
+               for (let j = 0; j < childrenList.length; j++) {
+                  const childItem = childrenList[j]
+                  const tempList = await getTempList(childItem.materialList, childItem.name)
+                  list.push(...tempList)
+               }
+            }
+         }
+
+         // console.log(list, 'list')
+
+         let _firstIndex = list.findIndex((n: any) => n.knowledgePointMaterialRelationId == route.query.kId || n.materialId == route.query.kId)
+         _firstIndex = _firstIndex > -1 ? _firstIndex : 0
+         const item = list[_firstIndex]
+
+         // console.log(_firstIndex, '_firstIndex', route.query.kId, 'route.query.kId', item)
+         // 是否自动播放
+         if (activeData.isAutoPlay) {
+            item.autoPlay = true
+         }
+         popupData.activeIndex = _firstIndex
+         popupData.playIndex = _firstIndex
+         popupData.tabName = item.tabName
+         popupData.tabActive = item.knowledgePointId
+         popupData.itemActive = item.id
+         popupData.itemName = item.name
+         nextTick(() => {
+            data.itemList = list
+            checkedAnimation(popupData.activeIndex)
+            postMessage({
+               api: "courseLoading",
+               content: {
+                  show: false,
+                  type: "fullscreen"
+               }
+            })
+            setTimeout(() => {
+               data.animationState = "end"
+            }, 500)
+         })
+      }
+      const getDetail = async () => {
+         try {
+            //const res: any = await request.get(state.platformApi + `/lessonCourseware/getLessonCourseDetail/${route.query.id}`)
+            const res: any = await httpAjax(getLessonCourseDetail_gym, route.query.id as string)
+            data.detail = res.data
+            if (res?.data?.lockFlag) {
+               postMessage({
+                  api: "courseLoading",
+                  content: {
+                     show: false,
+                     type: "fullscreen"
+                  }
+               })
+               showDialog({
+                  title: "温馨提示",
+                  message: "课件已锁定"
+               }).then(() => {
+                  goback()
+               })
+               return
+            }
+            if (Array.isArray(res?.data?.knowledgePointList)) {
+               let index = 0
+               data.knowledgePointList = res.data.knowledgePointList.map((n: any) => {
+                  if (Array.isArray(n.materialList)) {
+                     n.materialList = n.materialList.map((item: any) => {
+                        index++
+                        return {
+                           ...item,
+                           knowledgePointId: [item.knowledgePointId],
+                           materialId: item.id,
+                           id: index + ""
+                        }
+                     })
+                  }
+                  if (Array.isArray(n.children)) {
+                     n.children = n.children.map((cn: any) => {
+                        cn.materialList = cn.materialList.map((item: any) => {
+                           index++
+                           return {
+                              ...item,
+                              knowledgePointId: [n.id, item.knowledgePointId],
+                              materialId: item.id,
+                              id: index + ""
+                           }
+                        })
+                        return cn
+                     })
+                  }
+                  return n
+               })
+               getItemList()
+            }
+         } catch (error) {
+            console.log(error)
+         }
+      }
+
+      // ifram事件处理
+      const iframeHandle = (ev: MessageEvent) => {
+         if (ev.data?.api === "headerTogge") {
+            activeData.model = ev.data.show || (ev.data.playState == "play" ? false : true)
+         }
+      }
+
+      onMounted(async () => {
+         await getDetail()
+         const hasFree = String(data.detail?.accessScope) === "0"
+         if (!hasFree) {
+            const hasVip = handleCheckVip()
+            if (!hasVip) {
+               nextTick(() => {
+                  postMessage({
+                     api: "courseLoading",
+                     content: {
+                        show: false,
+                        type: "fullscreen"
+                     }
+                  })
+               })
+               return
+            }
+         }
+         // getCourseSchedule();
+         window.addEventListener("message", iframeHandle)
+      })
+
+      const playRef = ref()
+      // 返回
+      const goback = () => {
+         try {
+            playRef.value?.handleOut()
+         } catch (error) {
+            console.log(error)
+         }
+         postMessage({ api: "goBack" })
+      }
+
+      const popupData = reactive({
+         open: false,
+         activeIndex: 0,
+         playIndex: 0,
+         tabActive: "",
+         tabName: "",
+         itemActive: "",
+         itemName: "",
+         guideOpen: false,
+         toolOpen: false // 工具弹窗控制
+      })
+
+      const stopVideo = (el: HTMLVideoElement) => {
+         return new Promise(resolve => {
+            if (el.paused) return resolve(true)
+            el.onpause = () => {
+               console.log("暂停")
+               resolve(true)
+            }
+            el.pause()
+         })
+      }
+
+      /**停止所有的播放 */
+      const handleStop = async () => {
+         const videos = document.querySelectorAll("video")
+         for (let i = 0; i < videos.length; i++) {
+            const videoEle = videos[i] as HTMLVideoElement
+            await stopVideo(videoEle)
+         }
+         console.log("视频暂停完成")
+         data.itemList.forEach((item: any) => {
+            if (item.typeCode === "SONG") {
+               item.iframeRef?.contentWindow?.postMessage({ api: "setPlayState" }, "*")
+            }
+         })
+      }
+      // 切换素材
+      const toggleMaterial = (itemActive: any) => {
+         const index = data.itemList.findIndex((n: any) => n.id == itemActive)
+         if (index > -1) {
+            handleSwipeChange(index)
+         }
+      }
+      /** 延迟收起模态框 */
+      const setModelOpen = () => {
+         clearTimeout(activeData.timer)
+         closeToast()
+         activeData.timer = setTimeout(() => {
+            activeData.model = false
+         }, 4000)
+      }
+      /** 立即收起所有的模态框 */
+      const clearModel = () => {
+         clearTimeout(activeData.timer)
+         closeToast()
+         activeData.model = false
+      }
+      const toggleModel = (type = true) => {
+         activeData.model = type
+      }
+
+      // 去点名,签退
+      const gotoRollCall = (pageTag: string) => {
+         postMessage({
+            api: "open_app_page",
+            content: {
+               action: "app",
+               pageTag: pageTag,
+               url: "",
+               params: JSON.stringify({ courseId: route.query.courseId })
+            }
+         })
+      }
+
+      // 双击
+      const handleDbClick = () => {
+         if (activeVideoItem.value.typeCode === "VIDEO") {
+            const activeVideoRef = data.videoItemRef?.getVideoRef()
+            if (activeVideoRef) {
+               if (activeVideoRef.paused) {
+                  activeVideoRef.play()
+               } else {
+                  activeVideoRef.pause()
+                  showToast("已暂停")
+               }
+            }
+         }
+      }
+
+      const effectIndex = ref(0)
+      const effects = [
+         {
+            prev: {
+               transform: "translate3d(0, 0, -800px) rotateX(180deg)"
+            },
+            next: {
+               transform: "translate3d(0, 0, -800px) rotateX(-180deg)"
+            }
+         },
+         {
+            prev: {
+               transform: "translate3d(-100%, 0, -800px)"
+            },
+            next: {
+               transform: "translate3d(100%, 0, -800px)"
+            }
+         },
+         {
+            prev: {
+               transform: "translate3d(-50%, 0, -800px) rotateY(80deg)"
+            },
+            next: {
+               transform: "translate3d(50%, 0, -800px) rotateY(-80deg)"
+            }
+         },
+         {
+            prev: {
+               transform: "translate3d(-100%, 0, -800px) rotateY(-120deg)"
+            },
+            next: {
+               transform: "translate3d(100%, 0, -800px) rotateY(120deg)"
+            }
+         },
+         // 风车4
+         {
+            prev: {
+               transform: "translate3d(-50%, 50%, -800px) rotateZ(-14deg)",
+               opacity: 0
+            },
+            next: {
+               transform: "translate3d(50%, 50%, -800px) rotateZ(14deg)",
+               opacity: 0
+            }
+         },
+         // 翻页5
+         {
+            prev: {
+               transform: "translateZ(-800px) rotate3d(0, -1, 0, 90deg)",
+               opacity: 0
+            },
+            next: {
+               transform: "translateZ(-800px) rotate3d(0, 1, 0, 90deg)",
+               opacity: 0
+            },
+            current: { transitionDelay: "700ms" }
+         }
+      ]
+
+      const acitveTimer = ref()
+      // 轮播切换
+      const handleSwipeChange = async (index: number) => {
+         // 如果是当前正在播放 或者是视频最后一个
+         if (popupData.activeIndex == index) return
+         await handleStop()
+         data.animationState = "start"
+         data.videoState = "init"
+         clearTimeout(acitveTimer.value)
+         checkedAnimation(popupData.activeIndex, index)
+         nextTick(() => {
+            popupData.activeIndex = index
+
+            acitveTimer.value = setTimeout(
+               () => {
+                  popupData.playIndex = index
+                  const item = data.itemList[index]
+                  if (item) {
+                     popupData.tabActive = item.knowledgePointId
+                     popupData.itemActive = item.id
+                     popupData.itemName = item.name
+                     popupData.tabName = item.tabName
+                     if (item.typeCode == "SONG") {
+                        activeData.model = true
+                     }
+                  }
+                  requestAnimationFrame(() => {
+                     const _effectIndex = effectIndex.value + 1
+                     effectIndex.value = _effectIndex >= effects.length - 1 ? 0 : _effectIndex
+
+                     if (item && item.typeCode === "VIDEO") {
+                        // 自动播放下一个视频
+                        clearTimeout(activeData.timer)
+                        closeToast()
+                        item.autoPlay = true
+                        data.animationState = "end"
+                     }
+                  })
+               },
+               activeData.isAnimation ? 850 : 0
+            )
+         })
+      }
+
+      /** 是否有转场动画 */
+      const checkedAnimation = (index: number, nextIndex?: number) => {
+         nextIndex = nextIndex ? nextIndex : index + 1
+         const item = data.itemList[index]
+         const nextItem = data.itemList[nextIndex]
+         if (nextItem) {
+            if (nextItem.knowledgePointId != item.knowledgePointId) {
+               activeData.isAnimation = true
+               return
+            }
+            const videoEle = item.videoEle
+            const nextVideo = nextItem.videoEle
+            if (videoEle && videoEle.duration < 8 && index < nextIndex) {
+               activeData.isAnimation = false
+            } else if (nextVideo && nextVideo.duration < 8 && index > nextIndex) {
+               activeData.isAnimation = false
+            } else {
+               activeData.isAnimation = true
+            }
+         } else {
+            activeData.isAnimation = item?.adviseStudyTimeSecond < 8 ? false : true
+         }
+      }
+
+      // 上一个知识点, 下一个知识点
+      const handlePreAndNext = (type: string) => {
+         if (type === "up") {
+            handleSwipeChange(popupData.activeIndex - 1)
+         } else {
+            handleSwipeChange(popupData.activeIndex + 1)
+         }
+      }
+
+      /** 弹窗关闭 */
+      const handleClosePopup = () => {
+         const item = data.itemList[popupData.activeIndex]
+         if (item?.typeCode == "VIDEO" && !item.videoEle?.paused) {
+            setModelOpen()
+         }
+      }
+
+      /** 教学数据 */
+      const studyData = reactive({
+         type: "" as ToolType,
+         penShow: false
+      })
+
+      const isWhite = ref(false)
+      /** 打开教学工具 */
+      const openStudyTool = (item: ToolItem, isw?: boolean) => {
+         const activeItem = data.itemList[popupData.activeIndex]
+         // 暂停视频和曲谱的播放
+         if (activeItem.typeCode === "VIDEO" && data.videoItemRef?.getVideoItem()) {
+            data.videoItemRef?.getVideoItem().pause()
+         }
+         if (activeItem.typeCode === "SONG") {
+            activeItem.iframeRef?.contentWindow?.postMessage({ api: "setPlayState" }, "*")
+         }
+         clearModel()
+         popupData.toolOpen = false
+         studyData.type = item.type
+         isw && (isWhite.value = true)
+         switch (item.type) {
+            case "pen":
+               studyData.penShow = true
+               break
+         }
+      }
+
+      /** 关闭教学工具 */
+      const closeStudyTool = () => {
+         isWhite.value = false
+         studyData.type = "init"
+         toggleModel()
+      }
+
+      const activeVideoItem = computed(() => {
+         console.log(data.itemList, " data.itemList")
+         const item = data.itemList[popupData.activeIndex]
+         if (item && item.typeCode && item.typeCode.toLocaleUpperCase() === "VIDEO") {
+            return item
+         }
+         return {}
+      })
+      let closeModelTimer: any = null
+      return () => (
+         <div id="playContent" class={styles.playContent}>
+            <div
+               class={styles.coursewarePlay}
+               style={{ width: parentContainer.width }}
+               onClick={() => {
+                  clearTimeout(closeModelTimer)
+                  clearTimeout(activeData.timer)
+                  closeToast()
+                  if (Date.now() - activeData.nowTime < 300) {
+                     handleDbClick()
+                     return
+                  }
+                  activeData.nowTime = Date.now()
+                  closeModelTimer = setTimeout(() => {
+                     activeData.model = !activeData.model
+                  }, 300)
+               }}
+            >
+               <div class={styles.wraps}>
+                  <div
+                     style={
+                        activeVideoItem.value.typeCode && data.animationState === "end" && data.videoState === "play"
+                           ? {
+                                zIndex: 15,
+                                opacity: 1
+                             }
+                           : { opacity: 0, zIndex: -1 }
+                     }
+                     class={styles.itemDiv}
+                  >
+                     <VideoItem
+                        ref={(el: any) => (data.videoItemRef = el)}
+                        item={activeVideoItem.value}
+                        activeModel={activeData.model}
+                        onClose={setModelOpen}
+                        onPlay={() => {
+                           data.videoState = "play"
+                        }}
+                        onPause={() => {
+                           clearTimeout(activeData.timer)
+                           activeData.model = true
+                        }}
+                        onEnded={() => {
+                           const _index = popupData.activeIndex + 1
+                           if (_index < data.itemList.length) {
+                              handleSwipeChange(_index)
+                           }
+                        }}
+                     />
+                  </div>
+                  {data.itemList.map((m: any, mIndex: number) => {
+                     const isRenderItem = Math.abs(popupData.activeIndex - mIndex) < 2
+                     const isRender = Math.abs(popupData.playIndex - mIndex) < 2
+                     // 判断是否是当前选中的元素
+                     const activeEle = popupData.playIndex === mIndex ? true : false
+
+                     return isRenderItem ? (
+                        <div
+                           key={"index" + mIndex}
+                           data-id={"data" + mIndex}
+                           class={[
+                              styles.itemDiv,
+                              activeEle && styles.itemActive,
+                              activeData.isAnimation && styles.acitveAnimation,
+                              isRenderItem ? styles.show : styles.hide
+                           ]}
+                           style={
+                              mIndex < popupData.activeIndex
+                                 ? effects[effectIndex.value].prev
+                                 : mIndex > popupData.activeIndex
+                                 ? effects[effectIndex.value].next
+                                 : {}
+                           }
+                        >
+                           {/* {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
+                          }}
+                          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()
+                            }
+                          }}
+                        />
+                        <Transition name="van-fade">
+                          {!m.isprepare && (
+                            <div class={styles.loadWrap}>
+                              <Vue3Lottie animationData={playLoadData}></Vue3Lottie>
+                            </div>
+                          )}
+                        </Transition>
+                      </>
+                    )} */}
+                           <Transition name="van-fade">
+                              {m.typeCode === "VIDEO" && data.animationState !== "end" && data.videoState != "play" && (
+                                 <div class={styles.loadWrap}>
+                                    <Vue3Lottie animationData={playLoadData}></Vue3Lottie>
+                                 </div>
+                              )}
+                           </Transition>
+                           {isRender && m.typeCode === "IMG" && <img src={m.content} />}
+                           {isRender && m.typeCode === "SONG" && (
+                              <MusicScore
+                                 activeModel={activeData.model}
+                                 data-vid={m.id}
+                                 music={m}
+                                 onSetIframe={(el: any) => {
+                                    m.iframeRef = el
+                                 }}
+                              />
+                           )}
+                        </div>
+                     ) : (
+                        ""
+                     )
+                  })}
+               </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={() =>
+                                 openStudyTool(
+                                    {
+                                       type: "pen",
+                                       icon: iconPen,
+                                       name: "白板"
+                                    },
+                                    true
+                                 )
+                              }
+                           >
+                              <img src={require("./image/bb.png")} />
+                              <span>白板</span>
+                           </div>
+                        </div>
+                        <div class={styles.btnsWrap}>
+                           <div
+                              class={[styles.fullBtn, styles.point]}
+                              onClick={() =>
+                                 openStudyTool({
+                                    type: "pen",
+                                    icon: iconPen,
+                                    name: "批注"
+                                 })
+                              }
+                           >
+                              <img src={require("./image/pz.png")} />
+                              <span>批注</span>
+                           </div>
+                        </div>
+                        <div class={styles.btnsWrap}>
+                           <div class={[styles.fullBtn, styles.point]} onClick={() => (console.log(popupData.open), (popupData.open = true))}>
+                              <img src={require("./image/zzd.png")} />
+                              <span>知识点</span>
+                           </div>
+                        </div>
+                        <div class={styles.btnsWrap}>
+                           <div
+                              class={[styles.fullBtn, styles.point]}
+                              onClick={() => {
+                                 console.log("结束")
+                              }}
+                           >
+                              <img src={require("./image/js.png")} />
+                              <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()}>
+                        {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>
+                              </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>
+                                 <img src={iconDown} />
+                              </div>
+                           </div>
+                        )}
+                     </div>
+                  )}
+               </Transition>
+            </div>
+
+            <div
+               style={{ transform: activeData.model ? "" : "translateY(-100%)" }}
+               id="coursePlayHeader"
+               class={styles.headerContainer}
+               ref={headeRef}
+            >
+               <div class={styles.backBtn} onClick={() => goback()}>
+                  <Icon name={iconBack} />
+                  返回
+               </div>
+               {data.isCourse && <PlayRecordTime ref={playRef} list={data.knowledgePointList} />}
+               <div
+                  class={styles.menu}
+                  onClick={() => {
+                     const _effectIndex = effectIndex.value + 1
+                     effectIndex.value = _effectIndex >= effects.length - 1 ? 0 : _effectIndex
+                     setModelOpen()
+                  }}
+               >
+                  {popupData.tabName}
+               </div>
+               {/* 移除标注 */}
+               {state.platformType == "TEACHER1" && (
+                  <div
+                     class={styles.headRight}
+                     onClick={(e: Event) => {
+                        e.stopPropagation()
+                        clearTimeout(activeData.timer)
+                     }}
+                  >
+                     <div class={styles.rightBtn} onClick={() => (popupData.guideOpen = true)}>
+                        <img src={iconTouping} />
+                     </div>
+                     <div
+                        class={styles.rightBtn}
+                        onClick={() => {
+                           openStudyTool(
+                              {
+                                 type: "pen",
+                                 icon: iconPen,
+                                 name: "批注"
+                              },
+                              true
+                           )
+                        }}
+                     >
+                        <img src={iconPen} />
+                     </div>
+                     {/* <div class={styles.rightBtn} onClick={() => (popupData.toolOpen = true)}>
+                <img src={iconMore} />
+              </div> */}
+                  </div>
+               )}
+            </div>
+
+            {/* 更多弹窗 */}
+            <Popup
+               class={styles.popupMore}
+               overlayClass={styles.overlayClass}
+               position="right"
+               round
+               v-model:show={popupData.toolOpen}
+               onClose={handleClosePopup}
+            >
+               <Tool onHandleTool={openStudyTool} />
+            </Popup>
+
+            <Popup
+               class={styles.popup}
+               style={{ background: "rgba(0,0,0, 0.75)" }}
+               overlayClass={styles.overlayClass}
+               position="right"
+               round
+               v-model:show={popupData.open}
+               onClose={handleClosePopup}
+            >
+               <Points
+                  data={data.knowledgePointList}
+                  tabActive={popupData.tabActive}
+                  itemActive={popupData.itemActive}
+                  onHandleSelect={(res: any) => {
+                     // onChangeSwiper('change', res.itemActive)
+                     popupData.open = false
+                     toggleMaterial(res.itemActive)
+                  }}
+               />
+            </Popup>
+
+            <Popup
+               class={styles.popup}
+               overlayClass={styles.overlayClass}
+               position="right"
+               round
+               v-model:show={popupData.guideOpen}
+               onClose={handleClosePopup}
+            >
+               {/* <OGuide /> */}
+            </Popup>
+
+            {studyData.penShow && <Pen isWhite={isWhite.value} show={studyData.type === "pen"} close={() => closeStudyTool()} />}
+         </div>
+      )
+   }
+})

src/views/coursewarePlay/playRecordTime.tsx

@@ -0,0 +1,115 @@
+// import request from "@/helpers/request"
+import axios from "axios"
+const request = axios
+import { getSecondRPM } from "./helpers/utils"
+// import { state } from "@/state"
+const state = {
+   platformApi: "/api"
+}
+import { usePageVisibility } from "@vant/use"
+import { computed, defineComponent, onMounted, onUnmounted, reactive, ref, watch } from "vue"
+import { useRoute } from "vue-router"
+import styles from "./index.module.scss"
+
+export default defineComponent({
+   name: "playRecordTime",
+   props: {
+      list: {
+         type: Array,
+         default: () => []
+      }
+   },
+   setup(props, { expose }) {
+      const pageVisibility = usePageVisibility()
+
+      watch(pageVisibility, value => {
+         if (value == "hidden") {
+            handleOut()
+         } else {
+            // 页面显示
+            handleStartInterval()
+         }
+      })
+      const handleOut = () => {
+         clearInterval(timerRecord.value)
+         handleRecord(true)
+      }
+      expose({
+         handleOut
+      })
+      const route = useRoute()
+      const saveModel = reactive({
+         loading: true,
+         /**当前时长 */
+         currentTime: 0,
+         /**记录的开始时间 */
+         startTime: 0,
+         timer: null as any,
+         /** 已经播放的时间 */
+         playTime: 0
+      })
+      /** 建议学习总时长 */
+      const total = computed(() => {
+         const _total = props.list.reduce((_total: number, item: any) => _total + (item.totalMaterialTimeSecond || 0), 0)
+         return _total
+      })
+
+      const getPlayTime = async () => {
+         saveModel.loading = true
+         try {
+            const res: any = await request.post(`${state.platformApi}/courseSchedule/getCoursewarePlayTime?courseScheduleId=${route.query.courseId}`)
+            if (res.data) {
+               saveModel.playTime = res.data
+            }
+         } catch (error) {
+            //
+         }
+         saveModel.loading = false
+         handleStartInterval()
+      }
+
+      /** 记录时长 */
+      const handleRecord = (isOut = false) => {
+         saveModel.currentTime++
+         const playTime = saveModel.currentTime - saveModel.startTime
+         // 1分钟记录1次
+         if (playTime >= 5 || isOut) {
+            console.log("isOut", isOut)
+            saveModel.startTime = saveModel.currentTime
+            request.post(`${state.platformApi}/courseSchedule/coursewarePlayTime`, {
+               params: {
+                  courseScheduleId: route.query.courseId,
+                  playTime
+               },
+               hideLoading: true
+            })
+         }
+      }
+      const timerRecord = ref()
+      const handleStartInterval = () => {
+         clearInterval(timerRecord.value)
+         timerRecord.value = setInterval(() => handleRecord(), 1000)
+      }
+      onMounted(() => {
+         getPlayTime()
+      })
+      onUnmounted(() => {
+         clearInterval(timerRecord.value)
+      })
+      return () => (
+         <div
+            class={styles.playRecordTimeWrap}
+            style={{
+               display: saveModel.loading || saveModel.currentTime + saveModel.playTime > total.value ? "none" : ""
+            }}
+         >
+            <div class={styles.playRecordTime}>
+               <div class={styles.timeLoad}></div>
+               <div>
+                  {getSecondRPM(saveModel.currentTime + saveModel.playTime)} / {getSecondRPM(total.value)}
+               </div>
+            </div>
+         </div>
+      )
+   }
+})

src/views/coursewarePlay/shims-vue.d.ts

@@ -0,0 +1,21 @@
+/** scss 文件导出 */
+declare module "*.scss" {
+   const value: any
+   export default value
+}
+
+/** svg 文件导出 */
+declare module "*.svg" {
+   const value: any
+   export default value
+}
+/** gif 文件导出 */
+declare module "*.gif" {
+   const value: any
+   export default value
+}
+/** png 文件导出 */
+declare module "*.png" {
+   const value: any
+   export default value
+}

yarn.lock

@@ -1510,6 +1510,16 @@
     "@typescript-eslint/types" "5.62.0"
     eslint-visitor-keys "^3.3.0"
 
+"@vant/popperjs@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@vant/popperjs/-/popperjs-1.3.0.tgz#e0eff017124b5b2352ef3b36a6df06277f4400f2"
+  integrity sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw==
+
+"@vant/use@^1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@vant/use/-/use-1.6.0.tgz#237df3091617255519552ca311ffdfea9de59001"
+  integrity sha512-PHHxeAASgiOpSmMjceweIrv2AxDZIkWXyaczksMoWvKV2YAYEhoizRuk/xFnKF+emUIi46TsQ+rvlm/t2BBCfA==
+
 "@volar/language-core@1.10.1", "@volar/language-core@~1.10.0":
   version "1.10.1"
   resolved "https://registry.npmjs.org/@volar/language-core/-/language-core-1.10.1.tgz"
@@ -1919,6 +1929,11 @@
   resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.3.4.tgz"
   integrity sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==
 
+"@vue/shared@^3.0.0":
+  version "3.4.21"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.4.21.tgz#de526a9059d0a599f0b429af7037cd0c3ed7d5a1"
+  integrity sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g==
+
 "@vue/typescript@1.8.8":
   version "1.8.8"
   resolved "https://registry.npmjs.org/@vue/typescript/-/typescript-1.8.8.tgz"
@@ -2346,6 +2361,11 @@ balanced-match@^1.0.0:
   resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
+base64-arraybuffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz#1c37589a7c4b0746e34bd1feb951da2df01c1bdc"
+  integrity sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==
+
 base64-js@^1.3.1:
   version "1.5.1"
   resolved "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz"
@@ -2788,6 +2808,11 @@ core-js-compat@^3.31.0, core-js-compat@^3.8.3:
   dependencies:
     browserslist "^4.21.10"
 
+core-js@^3.26.1:
+  version "3.36.1"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.36.1.tgz#c97a7160ebd00b2de19e62f4bbd3406ab720e578"
+  integrity sha512-BTvUrwxVBezj5SZ3f10ImnX2oRByMxql3EimVqMysepbC9EeMUOpLwdy6Eoili2x6E4kf+ZUB5k/+Jv55alPfA==
+
 core-js@^3.8.3:
   version "3.32.1"
   resolved "https://registry.npmjs.org/core-js/-/core-js-3.32.1.tgz"
@@ -2859,6 +2884,13 @@ css-declaration-sorter@^6.3.1:
   resolved "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz"
   integrity sha512-rtdthzxKuyq6IzqX6jEcIzQF/YqccluefyCYheovBOLhFT/drQA9zj/UbRAa9J7C0o6EG6u3E6g+vKkay7/k3g==
 
+css-line-break@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/css-line-break/-/css-line-break-2.1.0.tgz#bfef660dfa6f5397ea54116bb3cb4873edbc4fa0"
+  integrity sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==
+  dependencies:
+    utrie "^1.0.2"
+
 css-loader@^6.5.0:
   version "6.8.1"
   resolved "https://registry.npmjs.org/css-loader/-/css-loader-6.8.1.tgz"
@@ -2975,6 +3007,11 @@ csstype@^3.1.1:
   resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz"
   integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
 
+custom-event-polyfill@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz#9bc993ddda937c1a30ccd335614c6c58c4f87aee"
+  integrity sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w==
+
 dayjs@^1.11.3:
   version "1.11.9"
   resolved "https://registry.npmjs.org/dayjs/-/dayjs-1.11.9.tgz"
@@ -3972,6 +4009,14 @@ html-webpack-plugin@^5.1.0:
     pretty-error "^4.0.0"
     tapable "^2.0.0"
 
+html2canvas@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/html2canvas/-/html2canvas-1.4.1.tgz#7cef1888311b5011d507794a066041b14669a543"
+  integrity sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==
+  dependencies:
+    css-line-break "^2.1.0"
+    text-segmentation "^1.0.3"
+
 htmlparser2@^6.1.0:
   version "6.1.0"
   resolved "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz"
@@ -4353,7 +4398,7 @@ kind-of@^6.0.2:
   resolved "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
 
-klona@^2.0.4, klona@^2.0.5:
+klona@^2.0.4, klona@^2.0.5, klona@^2.0.6:
   version "2.0.6"
   resolved "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz"
   integrity sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==
@@ -4414,6 +4459,11 @@ loader-utils@^2.0.0:
     emojis-list "^3.0.0"
     json5 "^2.1.2"
 
+loadjs@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/loadjs/-/loadjs-4.2.0.tgz#2a0336376397a6a43edf98c9ec3229ddd5abb6f6"
+  integrity sha512-AgQGZisAlTPbTEzrHPb6q+NYBMD+DP9uvGSIjSUM5uG+0jG15cb8axWpxuOIqrmQjn6scaaH8JwloiP27b2KXA==
+
 locate-path@^5.0.0:
   version "5.0.0"
   resolved "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz"
@@ -4493,6 +4543,11 @@ log-update@^2.3.0:
     cli-cursor "^2.0.0"
     wrap-ansi "^3.0.1"
 
+lottie-web@5.12.2:
+  version "5.12.2"
+  resolved "https://registry.yarnpkg.com/lottie-web/-/lottie-web-5.12.2.tgz#579ca9fe6d3fd9e352571edd3c0be162492f68e5"
+  integrity sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg==
+
 lower-case@^2.0.2:
   version "2.0.2"
   resolved "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz"
@@ -5093,6 +5148,17 @@ pkg-dir@^4.1.0:
   dependencies:
     find-up "^4.0.0"
 
+plyr@^3.7.8:
+  version "3.7.8"
+  resolved "https://registry.yarnpkg.com/plyr/-/plyr-3.7.8.tgz#b79bccc23687705b5d9a283b2a88c124bf7471ed"
+  integrity sha512-yG/EHDobwbB/uP+4Bm6eUpJ93f8xxHjjk2dYcD1Oqpe1EcuQl5tzzw9Oq+uVAzd2lkM11qZfydSiyIpiB8pgdA==
+  dependencies:
+    core-js "^3.26.1"
+    custom-event-polyfill "^1.0.7"
+    loadjs "^4.2.0"
+    rangetouch "^2.0.1"
+    url-polyfill "^1.1.12"
+
 portfinder@^1.0.26:
   version "1.0.32"
   resolved "https://registry.npmjs.org/portfinder/-/portfinder-1.0.32.tgz"
@@ -5470,6 +5536,11 @@ range-parser@^1.2.1, range-parser@~1.2.1:
   resolved "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz"
   integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
 
+rangetouch@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/rangetouch/-/rangetouch-2.0.1.tgz#c01105110fd3afca2adcb1a580692837d883cb70"
+  integrity sha512-sln+pNSc8NGaHoLzwNBssFSf/rSYkqeBXzX1AtJlkJiUaVSJSbRAWJk+4omsXkN+EJalzkZhWQ3th1m0FpR5xA==
+
 raw-body@2.5.1:
   version "2.5.1"
   resolved "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz"
@@ -6163,6 +6234,13 @@ terser@^5.10.0, terser@^5.16.8:
     commander "^2.20.0"
     source-map-support "~0.5.20"
 
+text-segmentation@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/text-segmentation/-/text-segmentation-1.0.3.tgz#52a388159efffe746b24a63ba311b6ac9f2d7943"
+  integrity sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==
+  dependencies:
+    utrie "^1.0.2"
+
 text-table@^0.2.0:
   version "0.2.0"
   resolved "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz"
@@ -6335,6 +6413,11 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+url-polyfill@^1.1.12:
+  version "1.1.12"
+  resolved "https://registry.yarnpkg.com/url-polyfill/-/url-polyfill-1.1.12.tgz#6cdaa17f6b022841b3aec0bf8dbd87ac0cd33331"
+  integrity sha512-mYFmBHCapZjtcNHW0MDq9967t+z4Dmg5CJ0KqysK3+ZbyoNOWQHksGCTWwDhxGXllkWlOc10Xfko6v4a3ucM6A==
+
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
@@ -6350,6 +6433,13 @@ utils-merge@1.0.1:
   resolved "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz"
   integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==
 
+utrie@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/utrie/-/utrie-1.0.2.tgz#d42fe44de9bc0119c25de7f564a6ed1b2c87a645"
+  integrity sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==
+  dependencies:
+    base64-arraybuffer "^1.0.2"
+
 uuid@^8.3.2:
   version "8.3.2"
   resolved "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz"
@@ -6368,6 +6458,15 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
+vant@^4.8.7:
+  version "4.8.7"
+  resolved "https://registry.yarnpkg.com/vant/-/vant-4.8.7.tgz#327e191ecd343fa1d34da6806f729cd347d40f40"
+  integrity sha512-puBsqVzC94niN2fFLbkpZGInE8fYK+jjoOAhQ7XAreFCn8xkxnjGpcLNoLvQSP2hUYKN7+kES1bbz/h7RHF7vQ==
+  dependencies:
+    "@vant/popperjs" "^1.3.0"
+    "@vant/use" "^1.6.0"
+    "@vue/shared" "^3.0.0"
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz"
@@ -6442,6 +6541,15 @@ vue-tsc@^1.6.0:
     "@vue/typescript" "1.8.8"
     semver "^7.3.8"
 
+vue3-lottie@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/vue3-lottie/-/vue3-lottie-3.3.0.tgz#4ece1eff80d7eecc05bda4f28657baceb88f89a4"
+  integrity sha512-Omv26YN3e78fh0QgQooeZcmPo8O2j5mJ5pacZh1mGdHH9ZTGayWlY1Yp6h+wAvfBKAvJ80JXrSgeBOKA4MRBYA==
+  dependencies:
+    fast-deep-equal "^3.1.3"
+    klona "^2.0.6"
+    lottie-web "5.12.2"
+
 vue@^3.2.13:
   version "3.3.4"
   resolved "https://registry.npmjs.org/vue/-/vue-3.3.4.tgz"