提交一下

1

src/components/musicLIstItem/index.module.less

@@ -75,6 +75,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
+
     .imgWrap {
       width: 88px;
       height: 88px;
@@ -117,10 +118,12 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    margin-top: 35px;
+    margin-top: 26px;
+    height: 30px;
     .icon {
       width: 28px;
       height: 28px;
+
       border-radius: 50px;
       margin-right: 12px;
       border: 2px solid #2dc7aa;

src/views/muiscDetial/index.module.less

@@ -1,15 +1,21 @@
 .wall {
   height: 60px;
 }
+.wallWrap {
+  background-color: #f8f8f8;
+}
 .musicWraps {
-  min-height: 100vh;
+  // min-height: 100vh;
   background-color: #f8f8f8;
+
 }
 .width1200 {
   width: 1002px;
   margin: 20px auto 0;
 }
 .musicWrap {
+  border-radius: 10px;
+  overflow: hidden;
   display: flex;
   flex-direction: row;
   background-color: #fff;
@@ -196,7 +202,7 @@
 .right {
   .musicInfo {
     background-color: #fff;
-    padding: 18px 18px 22px;
+    padding: 18px 24px 22px;
     width: 360px;
     margin-bottom: 36px;
     h2 {
@@ -247,6 +253,7 @@
         }
       }
       .masker {
+        cursor: pointer;
         visibility: hidden;
         width: 110px;
         height: 110px;
@@ -276,7 +283,7 @@
       .tagList {
         display: flex;
         flex-direction: row;
-        margin-bottom: 10px;
+        margin-bottom: 5px;
         flex-wrap: wrap;
         .tag {
           // width: 66px;
@@ -288,7 +295,7 @@
           color: #00886d;
           padding: 0 16px;
           margin-right: 6px;
-          margin-bottom: 10px;
+          margin-bottom: 6px;
         }
       }
       .collect {
@@ -327,7 +334,7 @@
     // padding-top: 25px;
     width: 360px;
     .teacherInfo {
-      padding: 18px 14px;
+      padding: 18px 24px 50px;
       background-color: #fff;
       h2 {
         font-size: 18px;
@@ -381,6 +388,7 @@
           font-weight: 600;
           color: #ff8b00;
           line-height: 33px;
+          text-align: center;
         }
         .fens {
           font-size: 14px;
@@ -480,7 +488,7 @@
       }
     }
     .otherMusic {
-      padding: 0 20px;
+      padding: 0 24px;
       .videoNav {
         display: flex;
         flex-direction: row;
@@ -488,9 +496,9 @@
         justify-content: space-between;
         margin-bottom: 14px;
         h5 {
-          font-size: 16px;
+          font-size: 18px;
           font-weight: 600;
-          color: #333;
+          color: #000;
           line-height: 30px;
         }
         .wrapRight {

src/views/muiscDetial/index.tsx

@@ -42,8 +42,13 @@ import {
   getAuth,
   setAuth
 } from '@/helpers/utils'
-
-import { imgToCanvas, addWatermark, convasToImg,addMusicTitle } from '@/helpers/imageFunction'
+import { state as states } from '@/state'
+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,7 +215,10 @@ export default defineComponent({
       const tempCanvas = await imgToCanvas(state.imgData)
       const showImg = convasToImg(tempCanvas)
       state.showImg = showImg
-      const titleCanvas = addMusicTitle(tempCanvas,{title:state.musicDetail.musicSheetName,size:18})
+      const titleCanvas = addMusicTitle(tempCanvas, {
+        title: state.musicDetail.musicSheetName,
+        size: 18
+      })
       const canvas = addWatermark(titleCanvas, '酷乐秀')
       const imgUrl = convasToImg(canvas)
       const link = document.createElement('a')
@@ -233,6 +241,7 @@ export default defineComponent({
     const favoriteMusic = async () => {
       const tockn = getAuth()
       if (!tockn) {
+        states.loginPopupStatus = true
         return
       }
       ElMessageBox.confirm(
@@ -255,6 +264,7 @@ export default defineComponent({
     }
     return () => (
       <>
+      <div class={classes.wallWrap}>
         <div class={classes.wall}></div>
         <div class={classes.musicWraps}>
           <div class={[classes.width1200]}>
@@ -289,7 +299,11 @@ export default defineComponent({
                 <div class={classes.musicContent}>
                   {/*        id="iframe"       ref="iframe"*/}
 
-                  <img class={classes.musicStag} src={chargeImg[ state.musicDetail.chargeType]} alt="" />
+                  <img
+                    class={classes.musicStag}
+                    src={chargeImg[state.musicDetail.chargeType]}
+                    alt=""
+                  />
                   <iframe
                     id="containerPrint"
                     ref="print"
@@ -297,7 +311,9 @@ export default defineComponent({
                     src={state.accompanyUrl}
                     class={classes.iframe}
                   />
-                       <p class={classes.musicTitle}>{state.musicDetail.musicSheetName}</p>
+                  <p class={classes.musicTitle}>
+                    {state.musicDetail.musicSheetName}
+                  </p>
                   {state.showImg ? (
                     <img src={state.showImg} alt="" />
                   ) : (
@@ -357,11 +373,18 @@ export default defineComponent({
               <div class={classes.right}>
                 <div class={classes.musicInfo}>
                   <h2>
-                    <span class={[classes.musicTag,classes[chargeClass[state.musicDetail.chargeType]]]}>{chargeTypes[state.musicDetail.chargeType]}</span>
+                    <span
+                      class={[
+                        classes.musicTag,
+                        classes[chargeClass[state.musicDetail.chargeType]]
+                      ]}
+                    >
+                      {chargeTypes[state.musicDetail.chargeType]}
+                    </span>
                     {state.musicDetail.musicSheetName}
                   </h2>
                   <div class={classes.collectWrap}>
-                    <div class={classes.masker}>
+                    <div class={classes.masker} onClick={favoriteMusic}>
                       <img
                         src={state.musicDetail.favorite ? lineStart : start}
                         alt=""
@@ -458,7 +481,7 @@ export default defineComponent({
 
                   <div class={classes.otherMusic}>
                     <div class={classes.videoNav}>
-                      <h5>Ta的曲谱</h5>
+                      <h5>TA的曲谱</h5>
                       <div
                         class={classes.wrapRight}
                         onClick={() => gotoMusic()}
@@ -485,6 +508,7 @@ export default defineComponent({
             </div>
           </div>
         </div>
+        </div>
       </>
     )
   }

src/views/videoDetailList/index.module.less

@@ -29,6 +29,7 @@
       width: 628px;
       // height: 463px;
       margin-bottom: 24px;
+      border-radius: 10px;
     }
   }
 }
@@ -42,7 +43,7 @@
     word-break: break-all;
     width: 580px;
     span {
-      font-size: 28px;
+      font-size: 26px;
       font-weight: 600;
       color: #000000;
       line-height: 40px;
@@ -51,6 +52,7 @@
     .courseTitleR {
       display: flex;
       flex-direction: row;
+      justify-content: flex-end;
       align-items: bottom;
       position: relative;
       top: 10px;

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

@@ -35,6 +35,10 @@
       color: #333;
       line-height: 25px;
       margin-bottom: 4px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      width: 352px;
     }
     .courseDetial {
       font-size: 14px;
@@ -68,6 +72,28 @@
       //   margin-right: px;
       // }
     }
+    .gotoSaduntWrap {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+    }
+    .gotoSadunt {
+      font-size: 16px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #ffffff;
+      line-height: 36px;
+      padding: 0 25px;
+      background: #00BF9B;
+      border-radius: 19px;
+      width: 98px;
+      display: flex;
+      margin-top: 10px;
+      cursor: pointer;
+      &:active {
+        opacity: .9;
+      }
+    }
   }
 }
 .scanTxt {
@@ -76,6 +102,7 @@
   }
 }
 .videoWrap {
+  width: 100%;
   :global {
     .el-dialog {
       --el-dialog-width: 440px !important;

src/views/videoDetailList/modals/videoCourseItem.tsx

@@ -49,10 +49,13 @@ export default defineComponent({
           <div class={classes.courseInfo}>
             <h4>{state.item.videoTitle}</h4>
             <p class={classes.courseDetial}>{state.item.videoContent}</p>
-            <p class={classes.courseDetialTime}>
+            {/* <p class={classes.courseDetialTime}>
               <img src={clock} alt="" /> <span>课时：</span>
               <span>120分钟</span>
-            </p>
+            </p> */}
+            <div class={classes.gotoSaduntWrap}>
+              <div class={classes.gotoSadunt}>去学习</div>
+            </div>
           </div>
           <ElDialog
             modelValue={state.showDown}