提交

1

src/components/hotSearch/index.module.less

@@ -12,7 +12,7 @@
     .hotIcon {
       width: 24px;
       height: 24px;
-      margin-right: 10px;
+      margin-right: 6px;
     }
     .tagWrap {
       display: flex;

src/components/hotSearch/index.tsx

@@ -233,6 +233,10 @@ export default defineComponent({
                 })}
               </div>
               <div class={classes.searchResultRight}>
+              <div class={classes.clearBtn} onClick={clearSearch}>
+                  <span>清空</span>
+                  <img src={clearIcon} class={classes.clearIcon} alt="" />
+                </div>
                 <div
                   class={classes.clearBtn}
                   onClick={() => {
@@ -242,10 +246,7 @@ export default defineComponent({
                   <span>收起</span>
                   <img src={arrows} class={classes.clearIcon} alt="" />
                 </div>
-                <div class={classes.clearBtn} onClick={clearSearch}>
-                  <span>清空</span>
-                  <img src={clearIcon} class={classes.clearIcon} alt="" />
-                </div>
+
               </div>
             </div>
             <div class={classes.searchChioseWrap}>

src/components/videoDetailItem/index.module.less

@@ -1,13 +1,23 @@
 .isFull {
-  width: 100%!important;
+  width: 100% !important;
   .detaile {
-    width: 100%!important;
-    height:187px!important;
+    width: 100% !important;
+    height: 187px !important;
+    border-radius: 4px;
+
     img {
-      width: 100%!important;
-      height: 187px!important;
+      width: 100% !important;
+      height: 187px !important;
     }
   }
+  &:nth-last-child(1){
+    border-bottom: none;
+  }
+  border-bottom: 1px solid #f0f0f0;
+  margin-bottom: 14px;
+  .itemBottom {
+    padding-bottom: 14px !important;
+  }
 }
 .itemWrap {
   width: 386px;
@@ -16,10 +26,11 @@
   border-radius: 4px;
   background-color: #fff;
   cursor: pointer;
-  &:nth-child(3n){
-    margin-right:0;
+  &:nth-child(3n) {
+    margin-right: 0;
   }
   .detaile {
+    border-radius: 4px;
     width: 387px;
     height: 216px;
   }

src/views/albumDetail/index.module.less

@@ -10,7 +10,7 @@
   display: flex;
   flex-direction: row;
   .albumInfo {
-    padding: 30px;
+    padding: 20px 30px 20px;
     background-color: #fff;
     .albumInfoTop {
       display: flex;
@@ -43,7 +43,7 @@
           font-weight: 600;
           color: #333;
           line-height: 37px;
-          margin-bottom: 16px;
+          margin-bottom: 12px;
         }
         p {
           font-size: 18px;
@@ -63,7 +63,7 @@
         .tagWrap {
           display: flex;
           flex-direction: row;
-          margin-top: 22px;
+          margin-top: 35px;
         }
       }
     }

src/views/muiscDetial/index.module.less

@@ -38,8 +38,8 @@
         flex-direction: row;
         align-items: center;
         img {
-          width: 24px;
-          height: 24px;
+          width: 22px;
+          height: 22px;
           margin-right: 10px;
         }
       }
@@ -50,6 +50,15 @@
       min-height: 665px;
       margin: 0 auto;
       border: 1px dotted #ccc;
+      .finch {
+        width: 15%;
+      }
+      .finchLoad {
+        text-align: center;
+        color: #333;
+        font-size: 15px;
+        margin-top: 4px;
+      }
     }
   }
   .showCode {
@@ -118,11 +127,25 @@
     border-radius: 0;
     background-color: #333;
   }
+  .noMoreWrap {
+    height: 68px;
+    background: #333333;
+    display: flex;
+    align-items: center;
+    padding: 0 26px;
+    font-size: 15px;
+    color: #FFFFFF;
+    img {
+      width: 20px;
+      height: 20px;
+      margin-right: 12px;
+    }
+  }
 }
 .right {
   .musicInfo {
     background-color: #fff;
-    padding: 24px;
+    padding: 18px 18px 22px;
     width: 360px;
     margin-bottom: 14px;
     h2 {
@@ -131,16 +154,16 @@
       font-weight: 600;
       color: #333;
       line-height: 28px;
-      margin-bottom: 15px;
+      margin-bottom: 12px;
     }
     .tagList {
-      margin-bottom: 15px;
+      margin-bottom: 14px;
     }
     .collect {
       display: flex;
       flex-direction: row;
       align-items: center;
-      margin-bottom: 15px;
+      margin-bottom: 14px;
       font-size: 16px;
       .start {
         width: 23px;
@@ -156,7 +179,10 @@
       }
     }
     .subTitle {
-      margin-bottom: 15px;
+      margin-bottom: 14px;
+      &:last-child {
+        margin-bottom: 0;
+      }
       span {
         font-size: 16px;
         line-height: 22px;
@@ -352,7 +378,7 @@
 
 :global {
   #containerPrint {
-    // visibility: hidden;
+    visibility: hidden;
   }
   .subjectChiose {
     border-radius: 14px;

src/views/muiscDetial/index.tsx

@@ -10,6 +10,7 @@ import {
 import classes from './index.module.less'
 import { ElButton, ElOption, ElSelect, ElScrollbar } from 'element-plus'
 import printIcon from './images/printIcon.png'
+import noMore from './images/noMore.png'
 import banner from './images/banner.png'
 import colVideo from '@/components/col-video/index'
 import iconClose from '@/views/login/images/icon_close.png'
@@ -25,6 +26,9 @@ import { useRoute, useRouter } from 'vue-router'
 import { getUserType, vaildTeachingUrl } from '@/helpers/utils'
 import { imgToCanvas, addWatermark, convasToImg } from '@/helpers/imageFunction'
 import arrow from '@/components/musicLIstItem/images/arrow.png'
+import { Vue3Lottie } from 'vue3-lottie'
+import 'vue3-lottie/dist/style.css'
+import AstronautJSON from '@/common/animate/bigLoad.json'
 import printJS from 'print-js'
 
 export default defineComponent({
@@ -38,7 +42,8 @@ export default defineComponent({
   components: {
     colVideo,
     tagItem,
-    musicItem
+    musicItem,
+    Vue3Lottie
   },
   setup(props, conent) {
     const route = useRoute()
@@ -58,8 +63,26 @@ export default defineComponent({
       userType: '',
       accompanyUrl: '',
       imgData: '',
-      imgUrl: ''
+      imgUrl: '',
+      showImg: ''
     })
+   nextTick(() => {
+      // 禁用右键
+      document.oncontextmenu = new Function('event.returnValue=false')
+      // 禁用选择
+      document.onselectstart = new Function('event.returnValue=false')
+      //禁止f12
+      document.οnkeydοwn = new Function('event.returnValue=false')
+    })
+
+    // 上面的禁止f12那段代码没有生效，但是加了下面这段就能生效。
+    document.onkeydown = function (e) {
+      if (e && e.keyCode === 123) {
+        e.returnValue = false
+        // e.keyCode = 0   //去掉也可以的，倘若要写，则需要setter 以及 getter配合使用，不配合，会报错
+        return false
+      }
+    }
     const print = ref()
     const getMusicList = async () => {
       try {
@@ -106,6 +129,7 @@ export default defineComponent({
       router.push({
         query: { ...route.query, id: state.id }
       })
+      state.showImg = ''
       getMusicList()
     }
     watch(
@@ -130,21 +154,28 @@ export default defineComponent({
       // }
       window.addEventListener(
         'message',
-        e => {
+        async e => {
           console.log(e)
           state.imgData = e.data
           // printHander()
           // alert(e.data);
+          const tempCanvas = await imgToCanvas(state.imgData)
+          const showImg = convasToImg(tempCanvas)
+          state.showImg = showImg
         },
         false
       )
       state.userType = getUserType()
-      state.showCode = state.userType == 'STUDENT' ? true : false
+      state.showCode =
+        state.userType == 'STUDENT' || !state.userType ? true : false
       // 拼链接
       getMusicList()
     })
     const printHander = async () => {
       const tempCanvas = await imgToCanvas(state.imgData)
+      const showImg = convasToImg(tempCanvas)
+      state.showImg = showImg
+      console.log(state.showImg)
       const canvas = addWatermark(tempCanvas, '酷乐秀')
       const imgUrl = convasToImg(canvas)
       const link = document.createElement('a')
@@ -194,17 +225,29 @@ export default defineComponent({
               </div>
             </div>
 
-              <div class={classes.musicContent}>
-                {/*        id="iframe"       ref="iframe"*/}
-                <iframe
-                  id="containerPrint"
-                  ref="print"
-                  style="width: 100%;page-break-after:always; "
-                  src={state.accompanyUrl}
-                  class={classes.iframe}
-                />
+            <div class={classes.musicContent}>
+              {/*        id="iframe"       ref="iframe"*/}
+              <iframe
+                id="containerPrint"
+                ref="print"
+                style="width: 100%;page-break-after:always; "
+                src={state.accompanyUrl}
+                class={classes.iframe}
+              />
 
-              </div>
+              {state.showImg ? (
+                <img src={state.showImg} alt="" />
+              ) : (
+                <div>
+                  <Vue3Lottie
+                    animationData={AstronautJSON}
+                    class={classes.finch}
+                  ></Vue3Lottie>
+                  <p class={classes.finchLoad}>加载中...</p>
+                </div>
+              )}
+              {}
+            </div>
 
             {state.showCode ? (
               <div class={classes.showCode}>
@@ -239,7 +282,12 @@ export default defineComponent({
                 settings={['captions', 'quality', 'speed', 'loop']}
                 class={classes.audios}
               ></colVideo>
-            ) : null}
+            ) : <>
+            <div  class={classes.noMoreWrap}>
+                <img src={noMore} alt="" />
+                <p>温馨提示：该曲目暂不支持播放喔～</p>
+            </div>
+            </>}
           </div>
           <div class={classes.right}>
             <div class={classes.musicInfo}>

src/views/musicLibrary/index.module.less

@@ -50,7 +50,7 @@
     color: #333;
     line-height: 30px;
   }
-  padding: 34px 0 15px;
+  padding: 24px 0 15px;
   .titleWrap {
     text-align: center;
     margin: 0 auto;

src/views/musicLibrary/modals/searchAlbum.tsx

@@ -34,7 +34,7 @@ export default defineComponent({
       isshowData: false,
       pageInfo: {
         // 分页规则
-        limit: 5, // 限制显示条数
+        limit: 10, // 限制显示条数
         page: 1, // 当前页
         total: 0, // 总条数
         page_size: [5,10, 20, 40, 50] // 选择限制显示条数

src/views/musicLibrary/modals/searchMusic.tsx

@@ -34,7 +34,7 @@ export default defineComponent({
       isshowData:false,
       pageInfo: {
         // 分页规则
-        limit: 5, // 限制显示条数
+        limit: 10, // 限制显示条数
         page: 1, // 当前页
         total: 0, // 总条数
         page_size: [5, 10, 20, 40, 50] // 选择限制显示条数

src/views/musicLibrary/searchdetail.tsx

@@ -133,7 +133,7 @@ export default defineComponent({
     return (
       <div>
         <div class="">
-          <div class="wall" style={{ height: '70px' }}></div>
+          <div class="wall" style={{ height: '60px' }}></div>
           <div class={styles.w1200}>
             <div class={styles.section}>
               <searchInput

src/views/videoDetailList/index.module.less

@@ -205,6 +205,8 @@
       font-weight: 400;
       color: #666666;
       line-height: 25px;
+      border-bottom: 1px solid #F0F0F0;
+      padding-bottom: 14px;
     }
     .teacherVideoList {
       display: flex;

src/views/videoDetailList/index.tsx

@@ -109,6 +109,7 @@ export default defineComponent({
                     gotoSearch(val)
                   }}
                   type={''}
+                  isChiose={true}
                 ></hotSearch>
               </div>
             </div>

src/views/videoDetailList/modals/videoCourseItem.module.less

@@ -3,10 +3,10 @@
   flex-direction: row;
   margin-bottom: 12px;
   .videoImgWrapImg {
-    width: 240px;
-    height: 135px;
+    width: 220px;
+    height: 124px;
     margin-right: 10px;
-    max-width: 240px!important;
+    max-width: 220px!important;
   }
   .videoImgWrap {
     cursor: pointer;
@@ -22,13 +22,13 @@
     }
   }
   .courseInfo {
-    padding-top: 8px;
+    padding-top: 7px;
     h4 {
       font-size: 17px;
       font-weight: 600;
       color: #333;
       line-height: 28px;
-      margin-bottom: 2px;
+      margin-bottom: 6px;
     }
     .courseDetial {
       font-size: 16px;