合并

dist/assets/Scrollbar-27c35a2f.js → dist/assets/Scrollbar-fb585415.js

@@ -1 +1 @@
-import{a9 as l,d as e,r as a,ac as n,ar as t}from"./index-95e721f9.js";const c=Object.assign(Object.assign({},l.props),{trigger:String,xScrollable:Boolean,onScroll:Function,size:Number}),i=e({name:"Scrollbar",props:c,setup(){const r=a(null);return Object.assign(Object.assign({},{scrollTo:(...o)=>{var s;(s=r.value)===null||s===void 0||s.scrollTo(o[0],o[1])},scrollBy:(...o)=>{var s;(s=r.value)===null||s===void 0||s.scrollBy(o[0],o[1])}}),{scrollbarInstRef:r})},render(){return n(t,Object.assign({ref:"scrollbarInstRef"},this.$props),this.$slots)}}),d=i;export{d as N};
+import{aa as l,d as e,r as a,ad as n,at as t}from"./index-3455cf1a.js";const c=Object.assign(Object.assign({},l.props),{trigger:String,xScrollable:Boolean,onScroll:Function,size:Number}),i=e({name:"Scrollbar",props:c,setup(){const r=a(null);return Object.assign(Object.assign({},{scrollTo:(...o)=>{var s;(s=r.value)===null||s===void 0||s.scrollTo(o[0],o[1])},scrollBy:(...o)=>{var s;(s=r.value)===null||s===void 0||s.scrollBy(o[0],o[1])}}),{scrollbarInstRef:r})},render(){return n(t,Object.assign({ref:"scrollbarInstRef"},this.$props),this.$slots)}}),d=i;export{d as N};

dist/assets/index-169261b8.js

@@ -0,0 +1 @@
+import{d as t,f as e,aO as u,j as a,k as p}from"./index-3455cf1a.js";const r=t({name:"404-page",setup(){return()=>e("div",{style:{height:"220px","margin-top":"150px","padding-top":"30px","font-size":"15px","text-align":"center"}},[e(u,{description:"你访问的页面不见了，你还可以",size:"large"},null),e(a,{type:"primary",text:!0},{default:()=>[p("返回上一页")]})])}});export{r as default};

dist/assets/index-1705439f.js

@@ -1 +0,0 @@
-import{d as t,f as e,aN as a,j as p,k as n}from"./index-95e721f9.js";const i=t({name:"404-page",setup(){return()=>e("div",{style:{height:"220px","margin-top":"150px","padding-top":"30px","font-size":"15px","text-align":"center"}},[e(a,{description:"你访问的页面不见了，你还可以",size:"large"},null),e(p,{type:"primary",text:!0},{default:()=>[n("返回上一页")]})])}});export{i as default};

dist/assets/index-1b389d31.js

@@ -0,0 +1 @@
+import{d as u,e as n,f as e,h as o,F as l,j as h,k as i}from"./index-3455cf1a.js";const d="_TheSearch_18qen_1",f="_active_18qen_15",t={TheSearch:d,active:f,default:"_default_18qen_21"},m=""+new URL("icon_search-8a6ade17.svg",import.meta.url).href,p=""+new URL("icon_searchActive-bf7fd0c6.svg",import.meta.url).href,_=u({name:"TheSearch",props:{round:{type:Boolean,default:!1}},emits:["search"],setup(c,{emit:s}){const a=n({value:""});return()=>e(o,{class:t.TheSearch,round:c.round,placeholder:"请输入搜索关键词",modelValue:a.value,"onUpdate:modelValue":r=>a.value=r},{prefix:()=>e(l,null,[e("img",{class:t.default,src:m},null),e("img",{class:t.active,src:p},null)]),suffix:()=>e(h,{size:"small",round:!0,type:"primary",onClick:()=>s("search",a.value)},{default:()=>[i("搜索")]})})}});export{_ as T};

dist/assets/index-4b90fba4.js → dist/assets/index-8c16cd66.js

@@ -1 +1 @@
-import{X as y,Y as F,S as P,Z as C,J as S}from"./index-95e721f9.js";function g(e){return y()?(F(e),!0):!1}function w(e){return typeof e=="function"?e():S(e)}const R=typeof window<"u",m=()=>{};function D(e,i){function n(...t){return new Promise((o,r)=>{Promise.resolve(e(()=>i.apply(this,t),{fn:i,thisArg:this,args:t})).then(o).catch(r)})}return n}function b(e,i={}){let n,t,o=m;const r=u=>{clearTimeout(u),o(),o=m};return u=>{const a=w(e),s=w(i.maxWait);return n&&r(n),a<=0||s!==void 0&&s<=0?(t&&(r(t),t=null),Promise.resolve(u())):new Promise((c,p)=>{o=i.rejectOnCancel?p:c,s&&!t&&(t=setTimeout(()=>{n&&r(n),t=null,c(u())},s)),n=setTimeout(()=>{t&&r(t),t=null,c(u())},a)})}}function j(e,i=!0,n=!0,t=!1){let o=0,r,l=!0,u=m,a;const s=()=>{r&&(clearTimeout(r),r=void 0,u(),u=m)};return p=>{const f=w(e),T=Date.now()-o,d=()=>a=p();return s(),f<=0?(o=Date.now(),d()):(T>f&&(n||!l)?(o=Date.now(),d()):i&&(a=new Promise((h,x)=>{u=t?x:h,r=setTimeout(()=>{o=Date.now(),l=!0,h(d()),s()},Math.max(0,f-T))})),!n&&!r&&(r=setTimeout(()=>l=!0,f)),l=!1,a)}}function U(e,i=200,n={}){return D(b(i,n),e)}function V(e,i=200,n=!1,t=!0,o=!1){return D(j(i,n,t,o),e)}function W(e){P()&&C(e)}export{V as a,g as b,w as c,R as i,W as t,U as u};
+import{X as y,Y as F,S as P,Z as C,J as S}from"./index-3455cf1a.js";function g(e){return y()?(F(e),!0):!1}function w(e){return typeof e=="function"?e():S(e)}const R=typeof window<"u",m=()=>{};function D(e,i){function n(...t){return new Promise((o,r)=>{Promise.resolve(e(()=>i.apply(this,t),{fn:i,thisArg:this,args:t})).then(o).catch(r)})}return n}function b(e,i={}){let n,t,o=m;const r=u=>{clearTimeout(u),o(),o=m};return u=>{const a=w(e),s=w(i.maxWait);return n&&r(n),a<=0||s!==void 0&&s<=0?(t&&(r(t),t=null),Promise.resolve(u())):new Promise((c,p)=>{o=i.rejectOnCancel?p:c,s&&!t&&(t=setTimeout(()=>{n&&r(n),t=null,c(u())},s)),n=setTimeout(()=>{t&&r(t),t=null,c(u())},a)})}}function j(e,i=!0,n=!0,t=!1){let o=0,r,l=!0,u=m,a;const s=()=>{r&&(clearTimeout(r),r=void 0,u(),u=m)};return p=>{const f=w(e),T=Date.now()-o,d=()=>a=p();return s(),f<=0?(o=Date.now(),d()):(T>f&&(n||!l)?(o=Date.now(),d()):i&&(a=new Promise((h,x)=>{u=t?x:h,r=setTimeout(()=>{o=Date.now(),l=!0,h(d()),s()},Math.max(0,f-T))})),!n&&!r&&(r=setTimeout(()=>l=!0,f)),l=!1,a)}}function U(e,i=200,n={}){return D(b(i,n),e)}function V(e,i=200,n=!1,t=!0,o=!1){return D(j(i,n,t,o),e)}function W(e){P()&&C(e)}export{V as a,g as b,w as c,R as i,W as t,U as u};

dist/assets/index-587d95cf.js → dist/assets/index-9479ace9.js

@@ -1 +1 @@
-import{d as l,f as e,h as u,I as o,r,R as I,o as c,F as p}from"./index-95e721f9.js";const g="_searchInput_1cmht_1",m="_searchIcon_1cmht_9",S={searchInput:g,searchIcon:m},E=l({name:"student-studentList",props:["searchWord"],emits:["changeValue"],setup(t,{emit:n,attrs:A}){return()=>e("div",null,[e(u,o(A,{clearable:!0,class:S.searchInput,value:t.searchWord,onInput:a=>{n("changeValue",a)}}),{prefix:()=>e("span",{class:"icon-search-input"},null)})])}}),h="_arrow_fei3f_1",C="_CSelectWrap_fei3f_5",J="_CSelectInitWrap_fei3f_21",s={arrow:h,CSelectWrap:C,CSelectInitWrap:J},w="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAaCAYAAACtv5zzAAAAAXNSR0IArs4c6QAAANtJREFUSEvt0zFOAkEYQOFv7eEi9iba0GLlDextKNUbECmpuIItFSWNmnANPIEWtoZkJ5LJDv9AQuVOs8Vm3tt5/2zjzKs5M18vCAv/r0TXmLdNJvgI+1B9i26wwqCFfuMWb5GkZgY5PDGrJJGgBK+WHBJ0wZ9a8stemoMnKQlK8FkLfkQuGeM9n0mXIIInRpUkF9TCqyX7gmPhVZIkGGKL3TOt3UBT8+i657m+cInPJBhhfSK8dJI7LJPgAq+4whSL6JML7x/wjA3u8RP9aCd6/rb1gjBhnyhM9As5gjEbhIMMwQAAAABJRU5ErkJggg==",B="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAaCAYAAACtv5zzAAAAAXNSR0IArs4c6QAAASlJREFUSEvtlDFOxDAQRWecigJOAMegABpKFI3TcgUqShZusFDScIA9AbJltt0mSPQcI83SJjMo0S7KBmM7xTYoaT3zn+f/cRD2/OGe9WECRB3+JxaVZXlQVdUCAE4RcU5EL9HZPQXGmBsAeACADyK6RkTuLLLWFsz8uu1BxJnW+mkMxFo7Y+Z5r+eyKIpVB3DOHTdN8ykiR9sCpdQ9ET2mQIbiiLjOsuwkz/P1T8jW2nNmXgLA4ZhJjDF3ItK/yJdS6oqIylZnZ4vGQmLivwCbPJImSRH3AlIgqeJ/AkKQ9izk+XApgi/ZOXdR1/VbP/iBwE6gvo2L/ip8wW+EouJBi/q38UCSxJMBbaEx5kxEnrsmxFut9XvKI4xalCISqpkAUQcni6IWfQOwkaYb9TFYBgAAAABJRU5ErkJggg==",W=l({props:{inline:{type:Boolean,default:!1}},name:"CSelect",setup(t,{emit:n,attrs:A}){r(null);const a=r(!1);return()=>e(p,null,[e("div",{class:[s.CSelectWrap,t.inline?s.CSelectInitWrap:null]},[e(I,o({"show-checkmark":!1},A,{"onUpdate:show":i=>{a.value=i}}),{arrow:()=>a.value?e(c,{class:s.arrow,src:w},null):e(c,{class:s.arrow,src:B},null)})])])}});export{W as C,E as S};
+import{d as l,f as e,h as u,I as o,r,R as I,o as c,F as p}from"./index-3455cf1a.js";const g="_searchInput_1cmht_1",m="_searchIcon_1cmht_9",S={searchInput:g,searchIcon:m},E=l({name:"student-studentList",props:["searchWord"],emits:["changeValue"],setup(t,{emit:n,attrs:A}){return()=>e("div",null,[e(u,o(A,{clearable:!0,class:S.searchInput,value:t.searchWord,onInput:a=>{n("changeValue",a)}}),{prefix:()=>e("span",{class:"icon-search-input"},null)})])}}),h="_arrow_fei3f_1",C="_CSelectWrap_fei3f_5",J="_CSelectInitWrap_fei3f_21",s={arrow:h,CSelectWrap:C,CSelectInitWrap:J},w="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAaCAYAAACtv5zzAAAAAXNSR0IArs4c6QAAANtJREFUSEvt0zFOAkEYQOFv7eEi9iba0GLlDextKNUbECmpuIItFSWNmnANPIEWtoZkJ5LJDv9AQuVOs8Vm3tt5/2zjzKs5M18vCAv/r0TXmLdNJvgI+1B9i26wwqCFfuMWb5GkZgY5PDGrJJGgBK+WHBJ0wZ9a8stemoMnKQlK8FkLfkQuGeM9n0mXIIInRpUkF9TCqyX7gmPhVZIkGGKL3TOt3UBT8+i657m+cInPJBhhfSK8dJI7LJPgAq+4whSL6JML7x/wjA3u8RP9aCd6/rb1gjBhnyhM9As5gjEbhIMMwQAAAABJRU5ErkJggg==",B="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAaCAYAAACtv5zzAAAAAXNSR0IArs4c6QAAASlJREFUSEvtlDFOxDAQRWecigJOAMegABpKFI3TcgUqShZusFDScIA9AbJltt0mSPQcI83SJjMo0S7KBmM7xTYoaT3zn+f/cRD2/OGe9WECRB3+JxaVZXlQVdUCAE4RcU5EL9HZPQXGmBsAeACADyK6RkTuLLLWFsz8uu1BxJnW+mkMxFo7Y+Z5r+eyKIpVB3DOHTdN8ykiR9sCpdQ9ET2mQIbiiLjOsuwkz/P1T8jW2nNmXgLA4ZhJjDF3ItK/yJdS6oqIylZnZ4vGQmLivwCbPJImSRH3AlIgqeJ/AkKQ9izk+XApgi/ZOXdR1/VbP/iBwE6gvo2L/ip8wW+EouJBi/q38UCSxJMBbaEx5kxEnrsmxFut9XvKI4xalCISqpkAUQcni6IWfQOwkaYb9TFYBgAAAABJRU5ErkJggg==",W=l({props:{inline:{type:Boolean,default:!1}},name:"CSelect",setup(t,{emit:n,attrs:A}){r(null);const a=r(!1);return()=>e(p,null,[e("div",{class:[s.CSelectWrap,t.inline?s.CSelectInitWrap:null]},[e(I,o({"show-checkmark":!1},A,{"onUpdate:show":i=>{a.value=i}}),{arrow:()=>a.value?e(c,{class:s.arrow,src:w},null):e(c,{class:s.arrow,src:B},null)})])])}});export{W as C,E as S};

dist/assets/index-a585796f.js

@@ -1 +0,0 @@
-import{d as o,e as l,f as e,h as n,F as u,j as h,k as i}from"./index-95e721f9.js";const d="_TheSearch_otd4a_1",m="_active_otd4a_16",t={TheSearch:d,active:m,default:"_default_otd4a_22"},p=""+new URL("icon_search-cda46378.svg",import.meta.url).href,f=""+new URL("icon_searchActive-80477bdc.svg",import.meta.url).href,_=o({name:"TheSearch",props:{round:{type:Boolean,default:!1}},emits:["search"],setup(c,{emit:s}){const a=l({value:""});return()=>e(n,{class:t.TheSearch,round:c.round,placeholder:"请输入搜索关键词",modelValue:a.value,"onUpdate:modelValue":r=>a.value=r},{prefix:()=>e(u,null,[e("img",{class:t.default,src:p},null),e("img",{class:t.active,src:f},null)]),suffix:()=>e(h,{size:"small",round:!0,type:"primary",onClick:()=>s("search",a.value)},{default:()=>[i("搜索")]})})}});export{_ as T};

dist/assets/index-c5a39e63.css

@@ -1 +0,0 @@
-._TheSearch_otd4a_1{border-radius:1.04167vw!important}._TheSearch_otd4a_1 .n-input-wrapper{padding-right:.20833vw;height:2.1875vw}._TheSearch_otd4a_1 .n-input-wrapper .n-input__input-el{height:100%}._TheSearch_otd4a_1 .n-button{width:3.75vw;height:1.77083vw;opacity:.8}._TheSearch_otd4a_1 ._active_otd4a_16{display:none}._TheSearch_otd4a_1.n-input--focus ._active_otd4a_16{display:block}._TheSearch_otd4a_1.n-input--focus ._default_otd4a_22{display:none}._TheSearch_otd4a_1.n-input--focus .n-button{opacity:1}

dist/assets/index-73922017.js → dist/assets/index-cb06b315.js

@@ -1 +1 @@
-import{d as f,r as l,e as A,w as d,f as m}from"./index-95e721f9.js";const p="_wrap_3lsnj_1",y="_isAnitaion_3lsnj_7",v="_notice_3lsnj_7",a={wrap:p,isAnitaion:y,notice:v},o=n=>{requestAnimationFrame(()=>{requestAnimationFrame(()=>{n()})})},h=f({name:"TheNoticeBar",props:{text:{type:String,default:""},isAnimation:{type:Boolean,default:!1}},setup(n){const e=l(),i=l(),t=A({isActive:!1,wrapWidth:0,contentWidth:0,contentStyle:{transitionDuration:"0s",transform:"translateX(0px)"},time:null}),s=()=>{t.isActive||!i.value||!e.value||(t.isActive=!0,t.contentWidth=i.value.getBoundingClientRect().width,t.wrapWidth=e.value.getBoundingClientRect().width,r())},r=()=>{if(t.contentWidth<=t.wrapWidth||!t.isActive){t.contentStyle.transitionDuration="0s",t.contentStyle.transform="translateX(0px)";return}t.contentStyle.transitionDuration="5s",t.contentStyle.transform="translateX(-100%)",t.time=setTimeout(()=>{t.contentStyle.transitionDuration="0s",t.contentStyle.transform=`translateX(${t.wrapWidth}px)`,o(r)},5*1e3)},c=()=>{clearTimeout(t.time),t.isActive=!1,t.contentStyle.transitionDuration="0s",t.contentStyle.transform="translateX(0px)",t.time=null};return d(()=>n.isAnimation,u=>{o(u?s:c)}),()=>m("div",{ref:e,class:[a.wrap,n.isAnimation?a.isAnitaion:""],onMouseenter:()=>!n.isAnimation&&s(),onMouseleave:()=>!n.isAnimation&&c()},[m("div",{ref:i,style:t.contentStyle,class:a.notice},[n.text])])}});export{h as T};
+import{d as f,r as l,e as A,w as d,f as m}from"./index-3455cf1a.js";const p="_wrap_3lsnj_1",y="_isAnitaion_3lsnj_7",v="_notice_3lsnj_7",a={wrap:p,isAnitaion:y,notice:v},o=n=>{requestAnimationFrame(()=>{requestAnimationFrame(()=>{n()})})},h=f({name:"TheNoticeBar",props:{text:{type:String,default:""},isAnimation:{type:Boolean,default:!1}},setup(n){const e=l(),i=l(),t=A({isActive:!1,wrapWidth:0,contentWidth:0,contentStyle:{transitionDuration:"0s",transform:"translateX(0px)"},time:null}),s=()=>{t.isActive||!i.value||!e.value||(t.isActive=!0,t.contentWidth=i.value.getBoundingClientRect().width,t.wrapWidth=e.value.getBoundingClientRect().width,r())},r=()=>{if(t.contentWidth<=t.wrapWidth||!t.isActive){t.contentStyle.transitionDuration="0s",t.contentStyle.transform="translateX(0px)";return}t.contentStyle.transitionDuration="5s",t.contentStyle.transform="translateX(-100%)",t.time=setTimeout(()=>{t.contentStyle.transitionDuration="0s",t.contentStyle.transform=`translateX(${t.wrapWidth}px)`,o(r)},5*1e3)},c=()=>{clearTimeout(t.time),t.isActive=!1,t.contentStyle.transitionDuration="0s",t.contentStyle.transform="translateX(0px)",t.time=null};return d(()=>n.isAnimation,u=>{o(u?s:c)}),()=>m("div",{ref:e,class:[a.wrap,n.isAnimation?a.isAnitaion:""],onMouseenter:()=>!n.isAnimation&&s(),onMouseleave:()=>!n.isAnimation&&c()},[m("div",{ref:i,style:t.contentStyle,class:a.notice},[n.text])])}});export{h as T};

dist/assets/index-e2faebf6.css

@@ -0,0 +1 @@
+._TheSearch_18qen_1{border-radius:1.04167vw!important}._TheSearch_18qen_1 .n-input-wrapper{padding-left:.625vw;padding-right:.20833vw;height:2.1875vw!important}._TheSearch_18qen_1 .n-button{height:1.77083vw;font-size:.78125vw;font-weight:500;width:auto}._TheSearch_18qen_1 ._active_18qen_15{display:none}._TheSearch_18qen_1.n-input--focus ._active_18qen_15{display:block}._TheSearch_18qen_1.n-input--focus ._default_18qen_21{display:none}._TheSearch_18qen_1.n-input--focus .n-button{opacity:1}

dist/index.html

@@ -24,8 +24,8 @@
   <meta name="msapplication-tap-highlight" content="no" />
   <meta name="referrer" content="no-referrer" />
   <title>老师端</title>
-  <script type="module" crossorigin src="./assets/index-95e721f9.js"></script>
-  <link rel="stylesheet" href="./assets/index-9f374edd.css">
+  <script type="module" crossorigin src="./assets/index-3455cf1a.js"></script>
+  <link rel="stylesheet" href="./assets/index-bdf2c1bf.css">
 </head>
 
 <body>

src/App.tsx

@@ -4,6 +4,7 @@ import { AppProvider } from './components/Application';
 import { RouterView } from 'vue-router';
 import setting from './settings/designSetting';
 import { lighten } from './utils';
+import RouterError from './components/RouterError';
 export default defineComponent({
   name: 'App',
   setup() {
@@ -31,7 +32,7 @@ export default defineComponent({
           dateLocale={dateZhCN}>
           <AppProvider>
             <RouterView />
-            {/* <RouterError /> */}
+            <RouterError />
           </AppProvider>
         </NConfigProvider>
       </>

src/components/RouterError/index.tsx

@@ -0,0 +1,31 @@
+import { useDialog } from 'naive-ui';
+import { defineComponent } from 'vue';
+import { useRouter } from 'vue-router';
+
+export default defineComponent({
+  name: 'router-error',
+  setup() {
+    const router = useRouter();
+    const dialog = useDialog();
+    let isOpen = false;
+    router.onError(error => {
+      const str = error.message + '';
+      const isChunkLoadFailed = str.indexOf('imported');
+
+      // const targetPath = router.history.pending.fullPath
+      if (isChunkLoadFailed != -1 && !isOpen) {
+        isOpen = true;
+        dialog.warning({
+          title: '更新提示',
+          content: '网站有更新请点击确定刷新页面?',
+          positiveText: '确定',
+          negativeText: '取消',
+          onPositiveClick: () => {
+            window.location.reload();
+          }
+        });
+      }
+    });
+    return () => <div></div>;
+  }
+});

src/components/TheSearch/index.module.less

@@ -3,32 +3,34 @@
 
     :global {
         .n-input-wrapper {
+            padding-left: 12px;
             padding-right: 4px;
-            height: 42px;
-
-            .n-input__input-el {
-                height: 100%;
-            }
+            height: 42px !important;
         }
 
         .n-button {
-            width: 72px;
             height: 34px;
-            opacity: .8;
+            font-size: 15px;
+            font-weight: 500;
+            width: auto;
         }
     }
-    .active{
+
+    .active {
         display: none;
     }
-    &:global(.n-input--focus){
-        .active{
+
+    &:global(.n-input--focus) {
+        .active {
             display: block;
         }
-        .default{
+
+        .default {
             display: none;
         }
-        :global{
-            .n-button{
+
+        :global {
+            .n-button {
                 opacity: 1;
             }
         }

src/components/card-preview/audio-modal/index.module.less

@@ -0,0 +1,134 @@
+.audioWrap {
+  width: 100%;
+  height: 518px;
+  background-color: #fff;
+}
+
+.audioContainer {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 0;
+
+  &>div {
+    flex: 1;
+  }
+
+  .audio {
+    position: absolute;
+    top: 0;
+    opacity: 0;
+  }
+
+  .tempVudio {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    padding: 0;
+  }
+
+  canvas {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.controls {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(26px);
+  height: 80px;
+  padding: 0 40px 0 40px !important;
+  transition: all 0.5s;
+  display: flex;
+  align-items: center;
+  transition: all .5s;
+
+  .time {
+    display: flex;
+    justify-content: space-between;
+    color: #fff;
+    padding: 4px 12px 4px;
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 33px;
+    min-width: 140px;
+
+    .line {
+      font-size: 12px;
+    }
+
+    :global {
+      .plyr__time+.plyr__time:before {
+        content: '';
+        margin-right: 0;
+      }
+    }
+  }
+}
+
+.actions {
+  display: flex;
+  justify-content: space-between;
+  height: 100%;
+  color: #fff;
+  font-size: 12px;
+  align-items: center;
+
+  .actionWrap {
+    display: flex;
+  }
+
+  .actionBtn {
+    display: flex;
+    width: 52px;
+    height: 52px;
+    padding: 4px 0;
+    background: transparent;
+
+    &>img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+
+  .iconReplay {
+    width: 31px;
+    height: 29px;
+    background-color: transparent;
+
+    &>img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+.slider {
+  width: 100%;
+  padding: 0 20px 0 12px;
+
+  :global {
+
+    .n-slider .n-slider-rail .n-slider-rail__fill,
+    .n-slider .n-slider-handles .n-slider-handle-wrapper {
+      transition: all .2s;
+    }
+  }
+}
+
+.sectionAnimate {
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(100%);
+  transition: all .5s;
+}

src/components/card-preview/audio-modal/index.tsx

@@ -0,0 +1,204 @@
+import { defineComponent, reactive, ref, nextTick } from 'vue';
+import styles from './index.module.less';
+import iconplay from '@views/attend-class/image/icon-pause.svg';
+import iconpause from '@views/attend-class/image/icon-play.svg';
+import iconReplay from '@views/attend-class/image/icon-replay.svg';
+import { NSlider } from 'naive-ui';
+import Vudio from 'vudio.js';
+import tickMp3 from '@views/attend-class/image/tick.mp3';
+
+export default defineComponent({
+  name: 'audio-play',
+  props: {
+    item: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    isEmtry: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  setup(props) {
+    const audioForms = reactive({
+      paused: true,
+      currentTimeNum: 0,
+      currentTime: '00:00',
+      durationNum: 0,
+      duration: '00:00',
+      showBar: true,
+      afterMa3: true
+    });
+    const canvas: any = ref();
+    const audio: any = ref();
+    let vudio: any = null;
+
+    // 切换音频播放
+    const onToggleAudio = (e?: MouseEvent) => {
+      e?.stopPropagation();
+      if (audio.value.paused) {
+        onInit(audio.value, canvas.value);
+        audio.value.play();
+        audioForms.afterMa3 = false;
+      } else {
+        audio.value.pause();
+      }
+      audioForms.paused = audio.value.paused;
+    };
+
+    const onInit = (audio: undefined, canvas: undefined) => {
+      if (!vudio) {
+        vudio = new Vudio(audio, canvas, {
+          effect: 'waveform',
+          accuracy: 256,
+          width: 1024,
+          height: 600,
+          waveform: {
+            maxHeight: 200,
+            color: [
+              [0, '#44D1FF'],
+              [0.5, '#44D1FF'],
+              [0.5, '#198CFE'],
+              [1, '#198CFE']
+            ],
+            prettify: false
+          }
+        });
+        vudio.dance();
+      }
+    };
+
+    // 对时间进行格式化
+    const timeFormat = (num: number) => {
+      if (num > 0) {
+        const m = Math.floor(num / 60);
+        const s = num % 60;
+        return (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s);
+      } else {
+        return '00:00';
+      }
+    };
+
+    const onReplay = () => {
+      if (!audio.value) return;
+      audio.value.currentTime = 0;
+    };
+
+    let vudio1 = null;
+    const canvas1: any = ref();
+    const audio1: any = ref();
+    nextTick(() => {
+      vudio1 = new Vudio(audio1.value, canvas1.value, {
+        effect: 'waveform',
+        accuracy: 256,
+        width: 1024,
+        height: 600,
+        waveform: {
+          maxHeight: 200,
+          color: [
+            [0, '#44D1FF'],
+            [0.5, '#44D1FF'],
+            [0.5, '#198CFE'],
+            [1, '#198CFE']
+          ],
+          prettify: false
+        }
+      });
+      vudio1.dance();
+    });
+
+    return () => (
+      <div class={styles.audioWrap}>
+        <div class={styles.audioContainer}>
+          <audio
+            ref={audio}
+            crossorigin="anonymous"
+            src={props.item.content + '?time=1'}
+            onEnded={() => {
+              audioForms.paused = true;
+            }}
+            onTimeupdate={() => {
+              audioForms.currentTime = timeFormat(
+                Math.round(audio.value?.currentTime || 0)
+              );
+              audioForms.currentTimeNum = audio.value.currentTime;
+            }}
+            onLoadedmetadata={() => {
+              audioForms.duration = timeFormat(
+                Math.round(audio.value.duration)
+              );
+              audioForms.durationNum = audio.value.duration;
+            }}></audio>
+
+          <canvas ref={canvas}></canvas>
+
+          {audioForms.afterMa3 && (
+            <div class={styles.tempVudio}>
+              <audio ref={audio1} src={tickMp3} />
+              <canvas ref={canvas1}></canvas>
+            </div>
+          )}
+        </div>
+
+        <div
+          class={[
+            styles.controls,
+            audioForms.showBar ? '' : styles.sectionAnimate
+          ]}
+          onClick={(e: MouseEvent) => {
+            e.stopPropagation();
+          }}>
+          <div class={styles.actions}>
+            <div class={styles.actionWrap}>
+              <button class={styles.actionBtn} onClick={onToggleAudio}>
+                {audioForms.paused ? (
+                  <img class={styles.playIcon} src={iconplay} />
+                ) : (
+                  <img class={styles.playIcon} src={iconpause} />
+                )}
+              </button>
+            </div>
+            <div class={styles.time}>
+              <div
+                class="plyr__time plyr__time--current"
+                aria-label="Current time">
+                {audioForms.currentTime}
+              </div>
+              <span class={styles.line}>/</span>
+              <div
+                class="plyr__time plyr__time--duration"
+                aria-label="Duration">
+                {audioForms.duration}
+              </div>
+            </div>
+          </div>
+
+          <div class={styles.slider}>
+            <NSlider
+              value={audioForms.currentTimeNum}
+              step={0.01}
+              max={audioForms.durationNum}
+              tooltip={false}
+              onUpdate:value={(val: number) => {
+                audio.value.currentTime = val;
+                audioForms.currentTimeNum = val;
+                audioForms.currentTime = timeFormat(Math.round(val || 0));
+              }}
+            />
+          </div>
+
+          <div class={styles.actions}>
+            <div class={styles.actionWrap}>
+              <button class={styles.iconReplay} onClick={onReplay}>
+                <img src={iconReplay} />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+});

src/components/card-preview/index.module.less

@@ -0,0 +1,17 @@
+.cardPreview {
+  width: 920px;
+
+  :global {
+    .n-card__content {
+      height: 518px;
+    }
+
+    .n-card-header__main {
+      max-width: 60%;
+      margin: 0 auto;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}

src/components/card-preview/index.tsx

@@ -0,0 +1,59 @@
+import { NModal } from 'naive-ui';
+import { defineComponent, toRef, watch } from 'vue';
+import styles from './index.module.less';
+import VideoModal from './video-modal';
+import SongModal from './song-modal';
+import AudioModal from './audio-modal';
+
+export default defineComponent({
+  name: 'card-preview',
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    },
+    item: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emit: ['update:show'],
+  setup(props, { emit }) {
+    const show = toRef(props.show);
+    const item = toRef(props.item);
+
+    watch(
+      () => props.show,
+      () => {
+        show.value = props.show;
+      }
+    );
+
+    watch(
+      () => props.item,
+      () => {
+        item.value = props.item;
+      }
+    );
+    return () => (
+      <>
+        <NModal
+          v-model:show={show.value}
+          onUpdate:show={() => {
+            emit('update:show', show.value);
+          }}
+          preset="card"
+          showIcon={false}
+          class={['modalTitle background', styles.cardPreview]}
+          title={item.value.title}
+          blockScroll={false}>
+          {item.value.type === 'VIDEO' && (
+            <VideoModal poster={item.value.url} src={item.value.content} />
+          )}
+          {item.value.type === 'SONG' && <SongModal item={item.value} />}
+          {item.value.type === 'AUDIO' && <AudioModal item={item.value} />}
+        </NModal>
+      </>
+    );
+  }
+});

src/components/card-preview/song-modal/index.module.less

@@ -0,0 +1,15 @@
+.musicScore {
+  width: 100%;
+  height: 518px;
+
+  iframe {
+    width: inherit;
+    height: inherit;
+
+    :global {
+      .headTopBackBtn {
+        display: none;
+      }
+    }
+  }
+}

src/components/card-preview/song-modal/index.tsx

@@ -0,0 +1,33 @@
+import { defineComponent, ref, watch } from 'vue';
+import styles from './index.module.less';
+
+export default defineComponent({
+  name: 'song-modal',
+  props: {
+    item: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props) {
+    const iframeRef = ref();
+    const isLoaded = ref(false);
+    const origin = /(localhost|192)/.test(location.host)
+      ? 'https://dev.kt.colexiu.com'
+      : location.origin;
+    const src = `${origin}/instrument?id=${props.item.content}&modelType=practise`;
+    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>
+      </div>
+    );
+  }
+});

src/components/card-preview/video-modal/index.module.less

@@ -0,0 +1,90 @@
+.video-container {
+  position: relative;
+  width: 100%;
+  --plyr-color-main: #198CFE;
+
+  video {
+    width: 100%;
+    // object-fit: cover;
+  }
+
+  :global {
+    .video-back {
+      position: absolute;
+      left: 20px;
+      top: 20px;
+      color: #fff;
+      z-index: 99;
+      font-size: 24px;
+      width: 30px;
+      height: 30px;
+      background-color: rgba(0, 0, 0, 0.5);
+      border-radius: 50%;
+      padding: 4px 5px 4px 3px;
+    }
+
+    .plyr__poster {
+      background-size: cover;
+    }
+
+    .plyr__control--overlaid {
+      border: 1px solid #fff;
+      background-color: rgba(0, 0, 0, 0.2) !important;
+    }
+
+    .plyr--video .plyr__control:hover {
+      background-color: transparent !important;
+    }
+  }
+
+  .video {
+    position: relative;
+  }
+}
+
+.loadingVideo {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.9);
+  z-index: 10;
+}
+
+.playOver {
+  background: rgba(0, 0, 0, 0.5);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+
+  .tips {
+    font-size: 15px;
+    color: #ffffff;
+  }
+
+  .btn {
+    margin: 10px 0;
+    min-width: 94px;
+    font-size: 14px;
+    height: 28px;
+    line-height: 28px;
+  }
+
+  .replay {
+    padding-top: 12px;
+  }
+}
+
+.freeTxt {
+  font-size: 15px;
+  color: #ffffff;
+  line-height: 21px;
+  padding-top: 10px;
+}
+
+.freeRate {
+  color: #32ffd8;
+}

src/components/card-preview/video-modal/index.tsx

@@ -0,0 +1,150 @@
+import { defineComponent, PropType } from 'vue';
+import styles from './index.module.less';
+import Plyr from 'plyr';
+import 'plyr/dist/plyr.css';
+import { browser } from '@/helpers/utils';
+export default defineComponent({
+  name: 'o-video',
+  props: {
+    setting: {
+      type: Object,
+      default: () => ({})
+    },
+    controls: Boolean,
+    height: String,
+    src: {
+      type: String,
+      default: ''
+    },
+    poster: {
+      type: String,
+      default: ''
+    },
+    styleValue: {
+      type: Object,
+      default: () => ({})
+    },
+    preload: {
+      type: String as PropType<'auto' | 'metadata' | 'none'>,
+      default: 'auto'
+    },
+    currentTime: {
+      type: Boolean,
+      default: true
+    },
+    playsinline: {
+      type: Boolean,
+      default: true
+    },
+    onPlay: {
+      type: Function,
+      default: () => ({})
+    }
+  },
+  emits: ['exitfullscreen'],
+  data() {
+    return {
+      player: null as any,
+      loading: true // 首次进入加载中
+    };
+  },
+  mounted() {
+    this._init();
+  },
+  methods: {
+    _init() {
+      // controls: [
+      //   'play-large' ,  // 中间的大播放按钮
+      //   'restart' ,  // 重新开始播放
+      //   'rewind' ,  // 按寻道时间倒带（默认 10 秒）
+      //   'play' ,  // 播放/暂停播放
+      //   'fast-forward' ,  // 快进查找时间（默认 10 秒）
+      //   'progress' ,  // 播放和缓冲的进度条和滑动条
+      //   'current-time' ,  // 播放的当前时间
+      //   ' duration' ,  // 媒体的完整持续时间
+      //   'mute' ,  // 切换静音
+      //   'volume', // 音量控制
+      //   'captions' ,  // 切换字幕
+      //   'settings' ,  // 设置菜单
+      //   'pip' ,  // 画中画（当前仅 Safari）
+      //   'airplay' ,  // Airplay（当前仅 Safari）
+      //   'download ' ,  // 显示一个下载按钮，其中包含指向当前源或您在选项中指定的自定义 URL 的链接
+      //   'fullscreen' ,  // 切换全屏
+      // ] ;
+      const controls = [
+        'play-large',
+        'play',
+        'progress',
+        'captions',
+        'fullscreen'
+      ];
+      if (this.currentTime) {
+        controls.push('current-time');
+      }
+      const params: any = {
+        controls: controls,
+        ...this.setting,
+        invertTime: false
+      };
+
+      if (browser().iPhone) {
+        params.fullscreen = {
+          enabled: true,
+          fallback: 'force',
+          iosNative: true
+        };
+      }
+
+      this.player = new Plyr((this as any).$refs.video, params);
+
+      this.player.on('play', () => {
+        this.onPlay && this.onPlay(this.player);
+      });
+
+      this.player.on('enterfullscreen', () => {
+        console.log('fullscreen');
+        const i = document.createElement('i');
+        i.id = 'fullscreen-back';
+        i.className = 'van-icon van-icon-arrow-left video-back';
+        i.addEventListener('click', () => {
+          this.player.fullscreen.exit();
+        });
+        console.log(document.getElementsByClassName('plyr'));
+        document.getElementsByClassName('plyr')[0].appendChild(i);
+      });
+
+      this.player.on('exitfullscreen', () => {
+        console.log('exitfullscreen');
+        const i = document.getElementById('fullscreen-back');
+        i && i.remove();
+        this.$emit('exitfullscreen');
+      });
+    },
+
+    onReplay() {
+      this.player.restart();
+      this.player.play();
+    },
+    onStop() {
+      this.player.stop();
+    }
+  },
+  unmounted() {
+    this.player?.destroy();
+  },
+  render() {
+    return (
+      <div class={styles['video-container']}>
+        <video
+          ref="video"
+          class={styles['video']}
+          src={this.src}
+          playsinline={this.playsinline}
+          poster={this.poster}
+          preload={this.preload}
+          style={{ ...this.styleValue }}></video>
+        {/* </div> */}
+      </div>
+    );
+  }
+});

src/components/card-type/index.module.less

@@ -18,6 +18,10 @@
   display: inline-flex;
   transition: all .3s ease-in-out;
 
+  &.course {
+    cursor: pointer;
+  }
+
   // 鼠标经过时样式
   &:hover {
     transform: scale(1.01);
@@ -133,4 +137,4 @@
     z-index: 99;
     transition: all .3s ease-in-out;
   }
-}
+}

src/components/card-type/index.tsx

@@ -1,6 +1,6 @@
 import { PropType, defineComponent, ref } from 'vue';
 import styles from './index.module.less';
-import { NButton, NCard, NImage } from 'naive-ui';
+import { NButton, NCard, NImage, NModal } from 'naive-ui';
 import iconImage from '@common/images/icon-image.png';
 import iconVideo from '@common/images/icon-video.png';
 import iconAudio from '@common/images/icon-audio.png';
@@ -47,6 +47,11 @@ export default defineComponent({
       type: Boolean,
       default: true
     },
+    // 是否预览
+    isPreview: {
+      type: Boolean,
+      default: true
+    },
     item: {
       type: Object as PropType<itemType>,
       default: () => ({})
@@ -92,6 +97,7 @@ export default defineComponent({
         <NCard
           class={[
             styles['card-section'],
+            props.isShowAdd ? '' : styles.course,
             props.isActive ? styles.isActive : ''
           ]}>
           {{

src/views/attend-class/component/musicScore.tsx

@@ -29,7 +29,10 @@ export default defineComponent({
     const isLoaded = ref(false);
     const renderError = ref(false);
     const renderSuccess = ref(false);
-    const src = `https://dev.kt.colexiu.com/instrument?platform=pc&modelType=practise`;
+    const origin = /(localhost|192)/.test(location.host)
+      ? 'https://dev.kt.colexiu.com'
+      : location.origin;
+    const src = `${origin}/instrument?platform=pc&modelType=practise`;
     const checkView = () => {
       fetch(src)
         .then(() => {

src/views/attend-class/component/video-play.tsx

@@ -107,7 +107,7 @@ export default defineComponent({
 
     onMounted(() => {
       videoItem.value = new Plyr(videoRef.value, {
-        autoplay: true,
+        autoplay: false,
         controls: controls,
         autopause: true, // 一次只允许
         ratio: '16:9', // 强制所有视频的纵横比

src/views/attend-class/index.tsx

@@ -82,7 +82,7 @@ export default defineComponent({
       modelTrainStatus: false // 训练设置
     });
     const activeData = reactive({
-      isAutoPlay: true, // 是否自动播放
+      isAutoPlay: false, // 是否自动播放
       nowTime: 0,
       model: true, // 遮罩
       isAnimation: true, // 是否动画

src/views/attend-class/model/train-type/index.tsx

@@ -45,7 +45,10 @@ export default defineComponent({
     };
 
     const onDetail = () => {
-      const src = `https://dev.kt.colexiu.com/instrument?platform=pc&modelType=practise`;
+      const origin = /(localhost|192)/.test(location.host)
+        ? 'https://dev.kt.colexiu.com'
+        : location.origin;
+      const src = `${origin}/instrument?platform=pc&modelType=practise`;
       window.open(src, '_blank');
     };
     return () => (

src/views/natural-resources/index.module.less

@@ -115,12 +115,6 @@
     width: 360px;
     height: 42px;
     font-size: 16px;
-
-    img {
-      width: 18px;
-      height: 18px;
-    }
-
     :global {
       .n-input-wrapper {
         padding-left: 12px;

src/views/prepare-lessons/components/directory-main/index.tsx

@@ -1,12 +1,6 @@
-import {
-  Transition,
-  TransitionGroup,
-  defineComponent,
-  reactive,
-  ref
-} from 'vue';
+import { defineComponent, reactive, ref } from 'vue';
 import styles from './index.module.less';
-import { NIcon, NTree, NSpin, NScrollbar } from 'naive-ui';
+import { NIcon, NSpin, NScrollbar } from 'naive-ui';
 
 export default defineComponent({
   name: 'directory-main',
@@ -14,96 +8,248 @@ export default defineComponent({
     const show = ref(true);
     const forms = reactive({
       expandedKey: null, // 展开
-      selectKey: 10 // 选的
+      selectKey: 16 // 选的
     });
     const treeList = ref([
       {
         key: 1,
-        label:
-          '第一单元 我愿住在童话里我愿住在童话里我愿住在童话里我愿住在童话里我愿住在童话里我愿住在童话里我愿住在童话里我愿住在童话里我愿住在童话里',
-        selected: true,
+        label: '第1课 好朋友',
+        selected: false,
         children: [
           {
             key: 10,
-            label: '【欣赏】永远住在童话里'
+            label: '玩具兵进行曲'
           },
           {
             key: 11,
-            label: '【欣赏】糖果仙子舞曲'
+            label: '口哨与小狗'
           },
           {
             key: 12,
-            label: '【知识】音的高低'
+            label: ' 你的民在叫什么？'
           },
           {
             key: 13,
-            label: '【唱歌】小红帽'
+            label: '拉勾勾'
+          },
+          {
+            key: 14,
+            label: '唱歌姿势'
           }
         ]
       },
       {
         key: 2,
-        label: '第二单元 快乐游戏',
-        selected: false,
+        label: '第2课 快乐的一天',
+        selected: true,
         children: [
           {
-            key: 14,
-            label: '【欣赏】永远住在童话里'
+            key: 15,
+            label: '快乐的一天'
+          },
+          {
+            key: 16,
+            label: '其多列'
+          },
+          {
+            key: 17,
+            label: '跳绳'
           }
         ]
       },
       {
         key: 3,
-        label: '第三单元 劳动最光荣',
+        label: '第3课 祖国您好',
         selected: false,
         children: [
           {
-            key: 15,
-            label: '【欣赏】永远住在童话里'
+            key: 18,
+            label: '中华人民共和国国歌'
+          },
+          {
+            key: 19,
+            label: '颂祖国'
+          },
+          {
+            key: 20,
+            label: '国旗国旗真美丽'
+          },
+          {
+            key: 21,
+            label: '同唱一首歌'
+          },
+          {
+            key: 22,
+            label: '音的强弱'
           }
         ]
       },
       {
         key: 4,
-        label: '第四单元 音乐中的动物',
+        label: '第4课 可爱的动物',
         selected: false,
         children: [
           {
-            key: 16,
-            label: '【欣赏】永远住在童话里'
+            key: 23,
+            label: '快乐的小熊猫'
+          },
+          {
+            key: 24,
+            label: '袋鼠'
+          },
+          {
+            key: 25,
+            label: '动物说话'
+          },
+          {
+            key: 26,
+            label: '咏鹅'
+          },
+          {
+            key: 27,
+            label: '木鱼 碰钟'
           }
         ]
       },
       {
         key: 5,
-        label: '第五单元 动画城',
+        label: '第5课 爱劳动',
         selected: false,
         children: [
           {
-            key: 17,
-            label: '【欣赏】永远住在童话里'
+            key: 28,
+            label: '劳动最光荣'
+          },
+          {
+            key: 29,
+            label: '三个和尚'
+          },
+          {
+            key: 30,
+            label: '洗手绢'
+          },
+          {
+            key: 31,
+            label: '大家来劳动'
           }
         ]
       },
       {
         key: 6,
-        label: '第六单元 下雪啦',
+        label: '第6课 小精灵',
         selected: false,
         children: [
           {
-            key: 18,
-            label: '【欣赏】永远住在童话里'
+            key: 32,
+            label: '小青蛙'
+          },
+          {
+            key: 33,
+            label: '野蜂飞舞'
+          },
+          {
+            key: 34,
+            label: '小青蛙找家'
+          },
+          {
+            key: 35,
+            label: '小蜻蜓'
+          },
+          {
+            key: 36,
+            label: '响板'
           }
         ]
       },
       {
         key: 7,
-        label: '我的音乐网页',
+        label: '游戏宫',
         selected: false,
         children: [
           {
-            key: 19,
-            label: '【欣赏】永远住在童话里'
+            key: 37,
+            label: '欢乐的游乐园'
+          }
+        ]
+      },
+      {
+        key: 8,
+        label: '第7课 小小音乐家',
+        selected: false,
+        children: [
+          {
+            key: 38,
+            label: '号手与鼓手'
+          },
+          {
+            key: 39,
+            label: '会跳舞的洋娃娃'
+          },
+          {
+            key: 40,
+            label: '星光圆舞曲'
+          },
+          {
+            key: 41,
+            label: '法国号'
+          },
+          {
+            key: 42,
+            label: '快乐的小笛子'
+          },
+          {
+            key: 43,
+            label: '音的长短'
+          }
+        ]
+      },
+      {
+        key: 9,
+        label: '第8课 过新年',
+        selected: false,
+        children: [
+          {
+            key: 44,
+            label: '小拜年'
+          },
+          {
+            key: 45,
+            label: '平安夜'
+          },
+          {
+            key: 46,
+            label: '龙咚锵'
+          },
+          {
+            key: 47,
+            label: '新年好'
+          },
+          {
+            key: 48,
+            label: '锣 鼓 镲'
+          }
+        ]
+      },
+      {
+        key: -1,
+        label: '欢乐谷',
+        selected: false,
+        children: [
+          {
+            key: 49,
+            label: '小鼓响咚咚'
+          },
+          {
+            key: 50,
+            label: '我有一只小羊羔'
+          },
+          {
+            key: 51,
+            label: '大月亮'
+          },
+          {
+            key: 52,
+            label: '我的音乐表现'
           }
         ]
       }

src/views/xiaoku-music/component/play-item/index.module.less

@@ -107,7 +107,7 @@
     margin-left: 140px;
     display: flex;
     align-items: center;
-
+    
     :global {
         .n-button {
             width: 40Px;
@@ -124,6 +124,7 @@
         width: 50Px;
         height: 50Px;
         margin: 0 48px;
+        background: linear-gradient(to right bottom, #44CAFE, #007AFE);
 
         img {
             display: block;

src/views/xiaoku-music/component/play-item/index.tsx

@@ -51,8 +51,8 @@ export default defineComponent({
         audioData.isFirst = false;
         return;
       }
-      if (props.playState === 'play'){
-          audioRef.value.play();
+      if (props.playState === 'play') {
+        audioRef.value.play();
       }
     };
     /** 改变时间 */
@@ -62,7 +62,9 @@ export default defineComponent({
       clearTimeout(timer);
       timer = setTimeout(() => {
         audioRef.value.currentTime = val;
-        audioRef.value.play();
+        if (props.playState === 'play') {
+          audioRef.value.play();
+        }
         timer = null;
       }, 300);
     };
@@ -114,7 +116,7 @@ export default defineComponent({
           </div>
           <div class={styles.title}>
             <div class={styles.titleName}>
-                <TheNoticeBar text={props.item.musicSheetName} />
+              <TheNoticeBar text={props.item.musicSheetName} />
             </div>
             <div class={styles.titleDes}>{props.item.composer}</div>
           </div>

src/views/xiaoku-music/data.json

@@ -6,7 +6,7 @@
             "firstTone": "https://cloud-coach.ks3-cn-beijing.ksyuncs.com/music-sheet-first/1671757941570-1.png,https://cloud-coach.ks3-cn-beijing.ksyuncs.com/music-sheet-first/1671757942013-2.png",
             "fixedTone": "https://cloud-coach.ks3-cn-beijing.ksyuncs.com/music-sheet-fixed/1675776823337-1.png,https://cloud-coach.ks3-cn-beijing.ksyuncs.com/music-sheet-fixed/1675776823784-2.png",
             "musicSheetName": "孤勇者",
-            "id": 21167,
+            "id": 22213,
             "musicImg": "https://cloud-coach.ks3-cn-beijing.ksyuncs.com/music-sheet/1671757934802-1.png,https://cloud-coach.ks3-cn-beijing.ksyuncs.com/music-sheet/1671757941112-2.png",
             "delFlag": false,
             "updateBy": 3113,
@@ -41,7 +41,7 @@
             "fixedTone": "https://cloud-coach.ks3-cn-beijing.ksyuncs.com/music-sheet-fixed/1687847690485-1.png",
             "hasBeat": null,
             "hotFlag": null,
-            "id": 43541,
+            "id": 43554,
             "lastMusicSheet": null,
             "metronomeUrl": "",
             "midiUrl": "",
@@ -112,7 +112,7 @@
             "fixedTone": "https://cloud-coach.ks3-cn-beijing.ksyuncs.com/music-sheet-fixed/1687673062731-1.png",
             "hasBeat": null,
             "hotFlag": null,
-            "id": 43539,
+            "id": 43558,
             "lastMusicSheet": null,
             "metronomeUrl": "",
             "midiUrl": "",

src/views/xiaoku-music/index.module.less

@@ -176,7 +176,7 @@
         margin-left: auto;
         width: 84px;
         height: 40px;
-        background: linear-gradient(73deg, #5BECFF 0%, #259CFE 100%);
+        background: linear-gradient(to right, #44CAFF, #259DFE);
         border: none;
         padding: 0;
         font-weight: bold !important;
@@ -238,6 +238,10 @@
         width: 48px;
         height: 48px;
         cursor: pointer;
+        transition: all .3s;
+        &:hover{
+            transform: scale(1.1);
+        }
 
         &>img {
             display: block;

src/views/xiaoku-music/index.tsx

@@ -209,8 +209,12 @@ export default defineComponent({
                   class={styles.goBtn}
                   src={icon_goXiaoku}
                   onClick={() => {
-                    handleChangeAudio('pause')
-                    window.open(`https://dev.kt.colexiu.com/instrument/?platform=pc&id=${activeItem.value.id}`);
+                    handleChangeAudio('pause');
+                    const origin = /(localhost|192)/.test(location.host)
+                      ? 'https://dev.kt.colexiu.com'
+                      : location.origin;
+                    const src = `${origin}/instrument?platform=pc&id=${activeItem.value.id}`;
+                    window.open(src);
                   }}
                 />
                 <div class={styles.favitor} onClick={() => handleFavitor()}>