Merge branch 'newVersion' into dev

src/components/col-header/modals/index.module.less

@@ -4,6 +4,9 @@
   display: flex;
   flex-direction: row;
   align-items: center;
+  img {
+    object-fit: cover;
+  }
   .title {
     font-size: 16px;
     font-family: PingFangSC-Regular, PingFang SC;

src/components/musicLIstItem/index.module.less

@@ -124,6 +124,7 @@
       border-radius: 50px;
       margin-right: 12px;
       border: 2px solid #2dc7aa;
+      object-fit: cover;
     }
     .authorName {
       font-weight: 400;

src/components/searchInput/index.module.less

@@ -68,7 +68,7 @@
       .el-icon svg {
         //隐藏原来箭头
 
-        display: none;
+        // display: none;
       }
       .el-select .el-input.is-focus .el-input__wrapper {
         font-size: 16px;

src/components/searchInput/index.tsx

@@ -48,8 +48,8 @@ export default defineComponent({
       searchVal => {
         // console.log(searchVal,'searchVal')
         state.search = searchVal.search ? searchVal.search : ''
-        state.subject = Number(props.searchVal.subject)
-          ? Number(props.searchVal.subject)
+        state.subject = Number(props.searchVal.subject || props.searchVal.lessonSubject)
+          ? Number(props.searchVal.subject|| props.searchVal.lessonSubject)
           : ''
       },
       {

src/helpers/imageFunction.ts

@@ -47,17 +47,32 @@ export const addWatermark = (canvas, text) => {
   // waterCtx.translate(-30, -30)
   waterCtx.font = '50pt Calibri' // 水印文字添加
   waterCtx.fillStyle = 'rgba(149,155,170,0.2)'
-  waterCtx.fillText('酷乐秀', -10,180)
+  waterCtx.fillText('酷乐秀', -10, 180)
   const pat = ctx.createPattern(water, 'repeat')
   ctx.fillStyle = pat
   ctx.fillRect(0, 0, canvas.width, canvas.height)
   return canvas
 }
 
+export const addMusicTitle = (canvas, info) => {
+  const ctx = canvas.getContext('2d')
+  const water = document.createElement('canvas')
 
+  // 小水印画布大小
+  water.width = canvas.width
+  water.height = canvas.height+30;
+  const waterCtx = water.getContext('2d') as CanvasRenderingContext2D
+  console.log(water,waterCtx,)
+  waterCtx.fillStyle = '#fff'
+  waterCtx.fillRect(0, 0,  canvas.width, canvas.height+70)
+  waterCtx.font = `40pt Calibri`
+  waterCtx.fillStyle = '#000'
+  waterCtx.textAlign = 'center'
+  waterCtx.drawImage(canvas, 0, 70)
+  waterCtx.fillText(info.title, canvas.width/2, 120, )
+  return water
+}
 
 export const convasToImg = canvas => {
-
-
   return canvas.toDataURL('image/png')
 }

src/views/albumDetail/modals/musicLIstItem/index.module.less

@@ -131,6 +131,7 @@
         border-radius: 50px;
         margin-right: 12px;
         border: 2px solid #2dc7aa;
+        object-fit: cover;
       }
       .authorName {
         font-weight: 600;

src/views/muiscDetial/index.module.less

@@ -79,7 +79,10 @@
       // justify-content: center;
       overflow-y: auto;
       padding: 34px 10px 0;
-
+      .musicTitle {
+        font-size: 20px;
+        font-weight: bold;
+      }
       .musicStag {
         width: 78px;
         height: 75px;
@@ -272,6 +275,7 @@
         display: flex;
         flex-direction: row;
         margin-bottom: 10px;
+        flex-wrap: wrap;
         .tag {
           // width: 66px;
           height: 26px;
@@ -282,6 +286,7 @@
           color: #00886d;
           padding: 0 16px;
           margin-right: 6px;
+          margin-bottom: 10px;
         }
       }
       .collect {
@@ -345,6 +350,8 @@
             border: 1px solid #2dc7aa;
             overflow: hidden;
             margin-right: 17px;
+            object-fit: cover;
+
           }
           .teacherHeadName {
             padding-top: 2px;

src/views/muiscDetial/index.tsx

@@ -43,7 +43,7 @@ import {
   setAuth
 } from '@/helpers/utils'
 
-import { imgToCanvas, addWatermark, convasToImg } from '@/helpers/imageFunction'
+import { imgToCanvas, addWatermark, convasToImg,addMusicTitle } from '@/helpers/imageFunction'
 import arrow from '@/views/home/images/moreArrow.png'
 import { Vue3Lottie } from 'vue3-lottie'
 import 'vue3-lottie/dist/style.css'
@@ -210,15 +210,13 @@ export default defineComponent({
       const tempCanvas = await imgToCanvas(state.imgData)
       const showImg = convasToImg(tempCanvas)
       state.showImg = showImg
-      const canvas = addWatermark(tempCanvas, '酷乐秀')
+      const titleCanvas = addMusicTitle(tempCanvas,{title:state.musicDetail.musicSheetName,size:18})
+      const canvas = addWatermark(titleCanvas, '酷乐秀')
       const imgUrl = convasToImg(canvas)
       const link = document.createElement('a')
       link.setAttribute('download', state.musicDetail.musicSheetName + '.png')
-
       // 添加时间戳，防止浏览器缓存图片
       state.imgUrl = imgUrl
-      // console.log('printHander',imgUrl)
-      // return
       link.href = imgUrl
       link.click()
     }
@@ -290,6 +288,7 @@ export default defineComponent({
 
                 <div class={classes.musicContent}>
                   {/*        id="iframe"       ref="iframe"*/}
+
                   <img class={classes.musicStag} src={chargeImg[ state.musicDetail.chargeType]} alt="" />
                   <iframe
                     id="containerPrint"
@@ -298,7 +297,7 @@ export default defineComponent({
                     src={state.accompanyUrl}
                     class={classes.iframe}
                   />
-
+                       <p class={classes.musicTitle}>{state.musicDetail.musicSheetName}</p>
                   {state.showImg ? (
                     <img src={state.showImg} alt="" />
                   ) : (
@@ -310,7 +309,6 @@ export default defineComponent({
                       <p class={classes.finchLoad}>加载中...</p>
                     </div>
                   )}
-                  {}
                 </div>
 
                 {state.mp3Type == 'MP3' ? (

src/views/muiscDetial/modals/musicItem.module.less

@@ -45,6 +45,7 @@
           height: 20px;
           border-radius: 27px;
           margin-right: 6px;
+          object-fit: cover;
         }
         .authorName {
           color: #333;

src/views/user-info/music-class/index.module.less

@@ -90,6 +90,7 @@
           height: 18px;
           border-radius: 27px;
           margin-right: 6px;
+          object-fit: cover;
         }
         .authorName {
           color: #333;

src/views/videoDetailList/index.module.less

@@ -37,23 +37,28 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    align-items: center;
+    align-items: top;
     margin-bottom: 10px;
+    word-break: break-all;
+    width: 580px;
     span {
       font-size: 28px;
       font-weight: 600;
       color: #000000;
       line-height: 40px;
+      word-break: break-all;
     }
     .courseTitleR {
       display: flex;
       flex-direction: row;
       align-items: bottom;
-
+      position: relative;
+      top: 10px;
+      width: 180px;
       span {
         font-size: 16px;
         font-weight: 600;
-        color: #00BF9B;
+        color: #00bf9b;
         line-height: 22px;
       }
       img {
@@ -63,7 +68,6 @@
       }
     }
   }
-
 }
 .tag {
   background-color: rgba(188, 253, 241, 0.46);
@@ -91,6 +95,7 @@
     font-weight: 600;
     color: #333;
     line-height: 28px;
+    word-break: break-all;
     img {
       width: 30px;
       height: 20px;
@@ -100,18 +105,28 @@
   .courseInfo {
     margin-top: 14px;
     padding-bottom: 53px;
+    word-break: break-all;
     // border-bottom: 1px solid #f0f0f0;
     p {
       font-size: 16px;
       font-weight: 400;
       color: #656565;
       line-height: 28px;
+      word-break: break-all;
+      // text-overflow: -o-ellipsis-lastline;
+      // overflow: hidden; //溢出内容隐藏
+      // text-overflow: ellipsis; //文本溢出部分用省略号表示
+      // display: -webkit-box; //特别显示模式
+      // -webkit-line-clamp: 2; //行数
+      // line-clamp: 2;
+      // -webkit-box-orient: vertical; //盒子中内容竖直排列
     }
   }
 }
 
 .courseListWrap {
   margin-top: 16px;
+  word-break: break-all;
   .courseTitle {
     display: flex;
     flex-direction: row;
@@ -138,7 +153,7 @@
       font-size: 16px;
       font-family: PingFangSC-Medium, PingFang SC;
       font-weight: 600;
-      color: #FF6422;
+      color: #ff6422;
       line-height: 22px;
       display: flex;
       flex-direction: row;
@@ -200,6 +215,7 @@
           border: 1px solid #2dc7aa;
           overflow: hidden;
           margin-right: 17px;
+          object-fit: cover;
         }
         .teacherHeadName {
           padding-top: 2px;
@@ -211,7 +227,7 @@
           font-weight: 600;
           color: #000;
           line-height: 22px;
-         span{
+          span {
             margin-bottom: 10px;
             display: block;
           }
@@ -312,7 +328,6 @@
           .player {
             visibility: visible;
           }
-
         }
         .player {
           position: absolute;
@@ -331,7 +346,7 @@
         .videoItemVideo {
           width: 160px;
           height: 160px;
-          object-fit:cover;
+          object-fit: cover;
           border-radius: 10px;
         }
         margin-right: 10px;

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

@@ -42,11 +42,11 @@
       font-weight: 400;
       color: #666666;
       line-height: 25px;
-      height: 56px;
+      // height: 56px;
       display: -webkit-box;
       overflow: hidden;
       text-overflow: ellipsis;
-      -webkit-line-clamp: 4;
+      -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
       line-height: 24px;
       // margin-bottom: 5px;