提交

1

src/components/albumItem/index.module.less

@@ -4,7 +4,6 @@
   position: relative;
 
   &:hover {
-
     .hold {
       transform: translateY(-10px);
       transition: linear 0.1s;

src/components/col-video/index.tsx

@@ -67,21 +67,27 @@ export default defineComponent({
       // ] ;
       // 'current-time',
       const controls = [
-        'play-large',
         'play',
-        'captions',
+        'progress',
         'fullscreen',
-        'duration'
+        'setting',
+        'play-large',
+        'current-time',
+        'duration',
+        'mute',
+        'captions',
+        'volume',
       ]
-      if (this.progress) {
-        controls.push('progress')
-      }
-      if (this.volume) {
-        controls.push('volume')
-      }
+      // if (this.progress) {
+      //   controls.push('progress')
+      // }
+      // if (this.volume) {
+      //   controls.push('volume')
+      // }
       this.player = new Plyr((this as any).$refs.video, {
         controls: controls,
-        ...this.setting
+        ...this.setting,
+
       })
       // console.log(this.player.elements.container)
       // this.player.elements.container
@@ -106,6 +112,7 @@ export default defineComponent({
               object-fit="fill"
               ref="video"
               src={this.src}
+              controls
               // poster={this.poster}
               style={{ ...this.styleValue }}
             />

src/components/musicLIstItem/index.module.less

@@ -1,107 +1,212 @@
 .itemWrap {
+  &:hover {
+    background-color: #f8f8f8;
+  }
   --music-list-item-background-color: #fff;
   --music-list-item-title-color: #333;
   --music-list-item-desc-color: #333;
   --music-list-item-mate-color: #6a6a6a;
   --music-list-item-border-color: #f1f1f1;
-  --music-list-item-vip-bg: #fff1cd;
-  --music-list-item-vip-color: #ff6c00;
-  --music-list-item-free-bg: #fff1e7;
-  --music-list-item-free-color: #ff4700;
-  --music-list-item-charge-bg: #e1f0ff;
-  --music-list-item-charge-color: #0086ff;
 
-  height: 78px;
+  --music-list-item-vip-bg: #c8a430;
+  --music-list-item-vip-color: #c8a430;
+  --music-list-item-free-bg: #4ca751;
+  --music-list-item-free-color: #4ca751;
+  --music-list-item-charge-bg: #3f90d6;
+  --music-list-item-charge-color: #3f90d6;
+
+  height: 188px;
   background: #ffffff;
-  border-radius: 12px;
+  // border-radius: 12px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   width: 100%;
-  border-radius: 12px;
-  margin-bottom: 10px;
-  padding: 10px 12px;
+  padding: 16px 0px;
+  border-bottom: 1px solid #ececec;
   cursor: pointer;
   .left {
     display: flex;
     flex-direction: row;
     align-items: center;
     .imgWrap {
-      width: 58px;
-      height: 58px;
-      margin-right: 20px;
+      width: 88px;
+      height: 88px;
+      margin-right: 30px;
+      border-radius: 5px;
+      overflow: hidden;
     }
     .textWrap {
-      p {
-        font-weight: 600;
-        color: #333333;
+      .musicName {
+        font-size: 20px;
+        font-weight: 500;
+        color: #000000;
+        line-height: 28px;
+        margin-bottom: 6px;
+      }
+      .authorName {
+        font-weight: 500;
+        color: #666;
         line-height: 22px;
         font-size: 16px;
         margin-bottom: 7px;
-        span {
-          font-weight: 400;
-          color: #6a6a6a;
-          margin-left: 10px;
-          font-size: 14px;
-        }
+        margin-bottom: 13px;
       }
-      .authorInfo {
+      .favoriteWrap {
         display: flex;
         flex-direction: row;
         align-items: center;
-        .icon {
-          width: 18px;
-          height: 18px;
-          border-radius: 27px;
-          margin-right: 6px;
-        }
-        .authorName {
-          color: #333;
-          font-size: 12px;
-          margin-right: 8px;
-        }
-        .tagList {
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-          .tag {
-            background-color: #fff1de;
-            color: #ff8c00;
-            padding: 2px 4px;
-            font-size: 12px;
-            margin-right: 5px;
-            border-radius: 4px;
-          }
+        font-size: 14px;
+        color: #999999;
+        line-height: 20px;
+        img {
+          width: 16px;
+          height: 16px;
+          margin-right: 10px;
         }
       }
     }
   }
-  .right {
+  .authorInfo {
     display: flex;
     flex-direction: row;
     align-items: center;
+    margin-top: 35px;
+    .icon {
+      width: 28px;
+      height: 28px;
+      border-radius: 50px;
+      margin-right: 12px;
+      border: 2px solid #2dc7aa;
+    }
+    .authorName {
+      font-weight: 500;
+      color: #000000;
+      line-height: 25px;
+      font-size: 18px;
+    }
+  }
+  .right {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    // justify-content: center;
     cursor: pointer;
-    .touchButton {
-      width: 48px;
-      height: 22px;
-      background: #e1f0ff;
-      border-radius: 12px;
-      line-height: 22px;
-      color: #0086ff;
-      text-align: center;
-      font-size: 13px;
-
-      &.vip {
-        background-color: var(--music-list-item-vip-bg);
-        color: var(--music-list-item-vip-color);
+    .tagList {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      .tag {
+        background-color: rgba(188, 253, 241, 0.46);
+        color: #00886d;
+        // padding: 0px 4px;
+        font-size: 14px;
+        margin-left: 16px;
+        border-radius: 20px;
+        padding: 0 16px;
+        height: 30px;
+        line-height: 30px;
+        text-align: center;
       }
-      &.free {
-        background-color: var(--music-list-item-free-bg);
-        color: var(--music-list-item-free-color);
+    }
+    .touchButtonO {
+      &:hover {
+        .vip {
+          width: 150px;
+          height: 48px;
+          color: #fff!important;
+          background-color: var(--music-list-item-vip-bg);
+          width: 150px!important;
+          height: 48px;
+          text-align: center!important;
+          color: #fff!important;
+
+          p{
+            width: 150px!important;
+
+          }
+        }
+        .free {
+          width: 150px!important;
+          height: 48px;
+          text-align: center!important;
+          color: #fff!important;
+
+          p{
+            width: 150px!important;
+
+          }
+          background-color: var(--music-list-item-free-bg);
+        }
+        .charge {
+          width: 150px;
+          height: 48px;
+          text-align: center;
+          color: #fff!important;
+          background-color: var(--music-list-item-charge-bg);
+          width: 150px!important;
+          height: 48px;
+          text-align: center!important;
+          color: #fff!important;
+
+          p{
+            width: 150px!important;
+
+          }
+        }
       }
-      &.charge {
-        background-color: var(--music-list-item-charge-bg);
-        color: var(--music-list-item-charge-color);
+      .touchButton {
+        background: #fff;
+        border-radius: 12px;
+        line-height: 48px;
+        font-size: 18px;
+        width: 150px;
+        height: 48px;
+        border-radius: 10px;
+        border: 1px solid #4ca751;
+        display: flex;
+        margin-bottom: 65px;
+        .touchButtonWrap {
+          width: 54px;
+          height: 100%;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: center;
+          border-right: 1px solid rgba(76, 167, 81, 1);
+          img {
+            width: 30px;
+            height: 30px;
+          }
+        }
+        .touchButtonText {
+          width: 95px;
+          text-align: center;
+        }
+        &.vip {
+          // background-color: var(--music-list-item-vip-bg);
+          .touchButtonWrap {
+            border-right: 1px solid var(--music-list-item-vip-bg);
+          }
+          color: var(--music-list-item-vip-color);
+          border: 1px solid var(--music-list-item-vip-color);
+        }
+        &.free {
+          // background-color: var(--music-list-item-free-bg);
+          .touchButtonWrap {
+            border-right: 1px solid var(--music-list-item-free-bg);
+          }
+          color: var(--music-list-item-free-color);
+          border: 1px solid var(--music-list-item-free-color);
+        }
+        &.charge {
+          .touchButtonWrap {
+            border-right: 1px solid var(--music-list-item-charge-bg);
+          }
+          // background-color: var(--music-list-item-charge-bg);
+          color: var(--music-list-item-charge-color);
+          border: 1px solid var(--music-list-item-charge-color);
+        }
       }
     }
     .arrow {

src/components/musicLIstItem/index.tsx

@@ -1,11 +1,15 @@
 import { defineComponent, reactive, watch } from 'vue'
 import icon from '../videoDetailItem/images/icon.png'
 import classes from './index.module.less'
-import detaile from './images/detaile.png'
+import gou from './images/gou.png'
 import music from './images/music.png'
+import member from './images/member.png'
+import palyer from './images/palyer.png'
 import arrow from './images/arrow.png'
 import { goodsType } from '@/constant'
 import { useRouter } from 'vue-router'
+import start from '@/common/images/start.png'
+import lineStart from '@/common/images/lineStart.png'
 
 type Props = {
   id?: Number
@@ -21,7 +25,11 @@ const chargeTypes = {
   FREE: '免费',
   VIP: 'VIP'
 }
-
+const chargeImg = {
+  CHARGE: palyer,
+  FREE: gou,
+  VIP: member
+}
 export default defineComponent({
   name: 'musicLIstItem',
   props: {
@@ -37,7 +45,7 @@ export default defineComponent({
 
   setup(props: any) {
     const state = reactive({
-      item:props.item
+      item: props.item
     })
     const router = useRouter()
     watch(
@@ -47,7 +55,7 @@ export default defineComponent({
       }
     )
     const gotoMusicDetail = () => {
-      router.push({path:'/muiscDetial',query:{id:state.item.id}})
+      router.push({ path: '/muiscDetial', query: { id: state.item.id } })
     }
     return () => (
       <div
@@ -55,44 +63,78 @@ export default defineComponent({
           props.onClick(state.item)
         }}
       >
-        <div class={classes.itemWrap}    onClick={() => gotoMusicDetail()}>
-          <div class={classes.left}>
-            <div class={classes.imgWrap}>
-              <img src={music} alt="" />
-            </div>
-            <div class={classes.textWrap}>
-              <p>
-                {state.item.musicSheetName}
-                <span>作曲: {state.item.composer}</span>
-              </p>
-              <div class={classes.authorInfo}>
-                <img
-                  class={classes.icon}
-                  src={state.item.addUserAvatar || icon}
-                  alt=""
-                />
-                <span class={classes.authorName}>{state.item.addName?state.item.addName:'小酷有谱'}</span>
-                <div class={classes.tagList}>
-                  {state.item.subjectNames?<div class={classes.tag}>{state.item.subjectNames}</div>:null}
-
-                  {/* <div class={classes.tag}>圆号</div> */}
+        <div class={classes.itemWrap} onClick={() => gotoMusicDetail()}>
+          <div class={classes.leftWrap}>
+            <div class={classes.left}>
+              <div class={classes.imgWrap}>
+                <img src={music} alt="" />
+              </div>
+              <div class={classes.textWrap}>
+                <p class={classes.musicName}>{state.item.musicSheetName}</p>
+                <p class={classes.authorName}>作曲:{state.item.composer}</p>
+                <div class={classes.favoriteWrap}>
+                  <img src={state.item.favorite ? lineStart : start} alt="" />
+                  <span>{state.item.favoriteCount | 0} 收藏</span>
                 </div>
               </div>
             </div>
+            <div class={classes.authorInfo}>
+              <img
+                class={classes.icon}
+                src={state.item.addUserAvatar || icon}
+                alt=""
+              />
+              <span class={classes.authorName}>
+                {state.item.addName ? state.item.addName : '小酷有谱'}
+              </span>
+            </div>
           </div>
           <div class={classes.right}>
             <div
-              class={[
-                classes.touchButton,
-                classes[state.item.chargeType?.toLocaleLowerCase()]
-              ]}
-
+              onMouseover={() => {
+                state.item.hoverTop = true
+              }}
+              onMouseout={() => {
+                state.item.hoverTop = false
+              }}
+              class={[classes.touchButtonO]}
             >
-              {chargeTypes[state.item.chargeType]
-                ? chargeTypes[state.item.chargeType]
-                : '点播'}
+              {state.item.hoverTop ? (
+                <div
+                  class={[
+                    classes.touchButton,
+                    classes[state.item.chargeType?.toLocaleLowerCase()]
+                  ]}
+                >
+                  <p>查看详情</p>
+
+                </div>
+              ) : (
+                <div
+                  class={[
+                    classes.touchButton,
+                    classes[state.item.chargeType?.toLocaleLowerCase()]
+                  ]}
+                >
+                  <div class={classes.touchButtonWrap}>
+                    <img src={chargeImg[state.item.chargeType]} alt="" />
+                  </div>
+                  <div class={classes.touchButtonText}>
+                    {chargeTypes[state.item.chargeType]
+                      ? chargeTypes[state.item.chargeType]
+                      : '点播'}
+                  </div>
+                </div>
+              )}
+            </div>
+            {/* <img class={classes.arrow} src={arrow} alt="" /> */}
+            <div class={classes.tagList}>
+              {state.item.subjectNames ? (
+                <div class={classes.tag}>{state.item.subjectNames}</div>
+              ) : null}
+
+              {/* <div class={classes.tag}>圆号</div> */}
             </div>
-            <img class={classes.arrow} src={arrow} alt="" />
           </div>
         </div>
       </div>

src/views/home/index.module.less

@@ -72,7 +72,8 @@
       position: relative;
       .line {
         opacity: 0.2;
-        border: 1px solid #979797;
+        // border: 1px solid #979797;
+        background-color:  #979797;
         width: 1px;
         height: calc(100% - 30px);
         position: absolute;

src/views/muiscDetial/index.module.less

@@ -1,20 +1,28 @@
 .wall {
   height: 70px;
 }
+.musicWraps {
+  min-height: 100vh;
+  background-color: #f8f8f8;
+}
 .width1200 {
-  width: 1200px;
+  width: 1002px;
   margin: 20px auto 0;
 }
 .musicWrap {
   display: flex;
   flex-direction: row;
+  background-color: #fff;
+  margin-bottom: 104px;
   .left {
     width: 826px;
-    background-color: #fff;
-    margin-right: 14px;
-    margin-bottom: 100px;
+    // margin-right: 14px;
+    // margin-bottom: 100px;
+    padding: 0 24px 37px;
+    margin: 18px 0;
+    border-right: 1px solid #e7e6e6;
     .title {
-      padding: 28px 28px 0;
+      padding: 28px 0 0;
       background-color: #fff;
       display: flex;
       flex-direction: row;
@@ -45,13 +53,25 @@
       }
     }
     .musicContent {
+      border: 1px solid #e9e8e8;
       page-break-after: always;
-      width: 702px;
-      min-height: 665px;
-      margin: 0 auto;
-      border: 1px dotted #ccc;
+      position: relative;
+      width: 580px;
+      height: 600px;
+      margin: 0 auto 20px;
+      // border: 1px dotted #ccc;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      // justify-content: center;
+      overflow-y: auto;
+      padding: 34px 20px 0;
+      img {
+        width: 100%;
+      }
       .finch {
-        width: 15%;
+        width: 150px;
+        margin-top: 80px;
       }
       .finchLoad {
         text-align: center;
@@ -64,9 +84,16 @@
   .showCode {
     position: relative;
     .showCodeWrap {
-      position: absolute;
-      z-index: 10;
-      bottom: 0;
+      // position: absolute;
+      // z-index: 10;
+      // bottom: 0;
+      width: 100%;
+      height: 99px;
+      margin-top: 20px;
+      .banner {
+        width: 100%;
+        height: 99px;
+      }
       .close {
         width: 19px;
         height: 19px;
@@ -134,7 +161,7 @@
     align-items: center;
     padding: 0 26px;
     font-size: 15px;
-    color: #FFFFFF;
+    color: #ffffff;
     img {
       width: 20px;
       height: 20px;
@@ -147,46 +174,116 @@
     background-color: #fff;
     padding: 18px 18px 22px;
     width: 360px;
-    margin-bottom: 14px;
+    margin-bottom: 36px;
     h2 {
-      font-size: 18px;
+      font-size: 20px;
       font-family: PingFangSC-Semibold, PingFang SC;
       font-weight: 600;
       color: #333;
       line-height: 28px;
-      margin-bottom: 12px;
-    }
-    .tagList {
       margin-bottom: 14px;
-    }
-    .collect {
       display: flex;
       flex-direction: row;
-      align-items: center;
-      margin-bottom: 14px;
-      font-size: 16px;
-      .start {
-        width: 23px;
-        height: 23px;
+      align-items: top;
+      line-height: 28px;
+      // flex-wrap: wrap;
+      .musicTag {
+        background: #ffc970;
+        border-radius: 8px;
+        font-size: 12px;
+        color: #994624;
+        line-height: 24px;
+        // width: 40px;
+        padding: 0 8px;
+        height: 24px;
+        text-align: center;
         margin-right: 6px;
+        margin-top: 2px;
+        min-width: 42px;
       }
-      p {
-        font-size: 16px;
-        font-family: PingFangSC-Regular, PingFang SC;
-        font-weight: 400;
-        color: #333;
-        line-height: 25px;
+    }
+    .collectWrap {
+      display: flex;
+      flex-direction: row;
+      position: relative;
+      &:hover {
+        .masker {
+          visibility: visible;
+        }
+      }
+      .masker {
+        visibility: hidden;
+        width: 110px;
+        height: 110px;
+        background-color: rgba(0, 0, 0, 0.4);
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        img {
+          width: 28px;
+          height: 28px;
+        }
+      }
+      .musiceIcon {
+        width: 110px;
+        height: 110px;
+        margin-right: 16px;
+        cursor: pointer;
+
+        // background: #000000;
+        // opacity: 0.2;
+      }
+      .tagList {
+        display: flex;
+        flex-direction: row;
+        margin-bottom: 10px;
+        .tag {
+          // width: 66px;
+          height: 26px;
+          line-height: 26px;
+          background: rgba(188, 253, 241, 0.46);
+          border-radius: 20px;
+          font-size: 12px;
+          color: #00886d;
+          padding: 0 16px;
+          margin-right: 6px;
+        }
+      }
+      .collect {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-bottom: 6px;
+        font-size: 14px;
+        cursor: pointer;
+        .start {
+          width: 19px;
+          height: 19px;
+          margin-right: 6px;
+        }
+        p {
+          font-size: 16px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #333;
+          line-height: 25px;
+        }
       }
     }
     .subTitle {
-      margin-bottom: 14px;
+      margin-bottom: 5px;
       &:last-child {
         margin-bottom: 0;
       }
       span {
-        font-size: 16px;
+        font-size: 14px;
         line-height: 22px;
-        color: #666;
+        color: #666660;
       }
     }
   }
@@ -196,7 +293,13 @@
     .teacherInfo {
       padding: 18px 14px;
       background-color: #fff;
-
+      h2 {
+        font-size: 18px;
+        font-weight: 500;
+        color: #000000;
+        line-height: 25px;
+        margin-bottom: 23px;
+      }
       .teacherHeadWrap {
         display: flex;
         flex-direction: row;
@@ -207,24 +310,25 @@
           flex-direction: row;
           align-items: center;
           .teacherHeader {
-            width: 50px;
-            height: 50px;
+            width: 68px;
+            height: 68px;
             border-radius: 50%;
+            border: 1px solid #2DC7AA;
             overflow: hidden;
-            margin-right: 10px;
+            margin-right: 17px;
           }
           .teacherHeadName {
             padding-top: 2px;
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            font-size: 18px;
+            // display: flex;
+            // flex-direction: row;
+            // align-items: center;
+            font-size: 16px;
             font-family: PingFangSC-Semibold, PingFang SC;
-            font-weight: 600;
+            font-weight: 500;
             color: #333;
-            line-height: 28px;
-            span {
-              margin-right: 12px;
+            line-height: 22px;
+            p {
+              margin-bottom: 10px;
             }
             .teacherIcon {
               width: 54px;
@@ -232,32 +336,37 @@
               margin-right: 5px;
             }
           }
-          .fens {
-            font-size: 14px;
-            font-family: PingFangSC-Regular, PingFang SC;
-            font-weight: 400;
-            color: #999999;
-            line-height: 22px;
-            span {
-              color: #333333;
-            }
-          }
+        }
+        .fensNum {
+          font-size: 24px;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 500;
+          color: #ff8b00;
+          line-height: 33px;
+        }
+        .fens {
+          font-size: 14px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #999999;
+          line-height: 20px;
         }
         .teacherHeadRight {
           width: 67px;
-          background: #2dc7aa;
-          border-radius: 21px;
+          height: 26px;
+          background: #FF6969;
+          border-radius: 13px;
           font-size: 14px;
-          font-family: PingFangSC-Semibold, PingFang SC;
           color: #ffffff;
-          line-height: 30px;
+          line-height: 26px;
           text-align: center;
           cursor: pointer;
         }
         .teacherHeadRight.isStart {
-          border: 1px solid #2dc7aa;
+          height: 28px;
+          border: 1px solid #FF6969;
           background: #fff;
-          color: #2dc7aa;
+          color: #FF6969;
         }
       }
       //
@@ -351,7 +460,7 @@
           flex-direction: row;
           cursor: pointer;
           span {
-            color: #666;
+            color: #000;
           }
           .arrow {
             width: 20px;
@@ -370,7 +479,7 @@
       }
       .otherMusicList {
         padding: 18px 0;
-        border-top: 1px solid #dedede;
+        // border-top: 1px solid #dedede;
       }
     }
   }
@@ -379,12 +488,14 @@
 :global {
   #containerPrint {
     visibility: hidden;
+    height: 10px;
   }
   .subjectChiose {
-    border-radius: 14px;
+    border-radius: 8px;
     overflow: hidden;
+    border: 1px solid #2dc7aa;
     .el-input__wrapper {
-      background-color: #f1f1f1;
+      background-color: #fff;
       border: none;
       box-shadow: none !important;
     }
@@ -394,7 +505,7 @@
     }
     .el-input.is-focus {
       .el-input__wrapper {
-        background-color: #f1f1f1;
+        background-color: #fff;
         border: none;
         box-shadow: none !important;
       }
@@ -405,7 +516,8 @@
   }
 }
 :global {
-  .iframe {
+  iframe {
+    visibility: hidden;
     body {
       ::-webkit-scrollbar-thumb {
         background-color: #efeff0;

src/views/muiscDetial/index.tsx

@@ -8,24 +8,40 @@ import {
   nextTick
 } from 'vue'
 import classes from './index.module.less'
-import { ElButton, ElOption, ElSelect, ElScrollbar } from 'element-plus'
+import {
+  ElButton,
+  ElOption,
+  ElSelect,
+  ElScrollbar,
+  ElMessageBox
+} 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'
 import start from '@/components/albumItem/images/start.png'
+import lineStart from '@/components/albumItem/images/lineStart.png'
+import oStart from '@/common/images/oStart.png'
+import oLineStart from '@/common/images/oLineStart.png'
 import teacher from '@/views/videoDetailList/images/teacher.png'
 import teacherHeader from '@/common/images/icon_teacher.png'
 import musiceIcon from '@/views/videoDetailList/images/musiceIcon.png'
+import music from '@/components/musicLIstItem/images/music.png'
 import tagItem from '@/components/tagItem'
 import code from './images/code.png'
 import musicItem from './modals/musicItem'
 import request from '@/helpers/request'
 import { useRoute, useRouter } from 'vue-router'
-import { getUserType, vaildTeachingUrl } from '@/helpers/utils'
+import {
+  getUserType,
+  vaildTeachingUrl,
+  getAuth,
+  setAuth
+} from '@/helpers/utils'
+
 import { imgToCanvas, addWatermark, convasToImg } from '@/helpers/imageFunction'
-import arrow from '@/components/musicLIstItem/images/arrow.png'
+import arrow from '@/views/home/images/moreArrow.png'
 import { Vue3Lottie } from 'vue3-lottie'
 import 'vue3-lottie/dist/style.css'
 import AstronautJSON from '@/common/animate/bigLoad.json'
@@ -66,26 +82,26 @@ export default defineComponent({
       imgUrl: '',
       showImg: ''
     })
-   nextTick(() => {
-      // 禁用右键
-       // @ts-ignore：无法被执行的代码的错误
-      document.oncontextmenu  = new Function('event.returnValue=false')
-       // @ts-ignore：无法被执行的代码的错误
-      // 禁用选择
-      document.onselectstart = new Function('event.returnValue=false')
-       // @ts-ignore：无法被执行的代码的错误
-      //禁止f12
-      document.οnkeydοwn  = new Function('event.returnValue=false')
-    })
+    //  nextTick(() => {
+    //     // 禁用右键
+    //      // @ts-ignore：无法被执行的代码的错误
+    //     document.oncontextmenu  = new Function('event.returnValue=false')
+    //      // @ts-ignore：无法被执行的代码的错误
+    //     // 禁用选择
+    //     document.onselectstart = new Function('event.returnValue=false')
+    //      // @ts-ignore：无法被执行的代码的错误
+    //     //禁止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
-      }
-    }
+    //   // 上面的禁止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 {
@@ -108,7 +124,6 @@ export default defineComponent({
 
         state.teacherDetail = res.data.teacher
         setAccompanyUrl()
-        console.log('调用')
       } catch (e) {
         console.log(e)
       }
@@ -178,7 +193,6 @@ export default defineComponent({
       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')
@@ -193,142 +207,191 @@ export default defineComponent({
     }
     const gotoMusic = () => {
       router.push({
-        path: '/searchdetail',
-        query: { search: state.teacherDetail.userName as string, type: 'music' }
+        name: 'searchdetail',
+        params: { search: state.teacherDetail.userName as string, type: 'music' }
+      })
+    }
+
+    const favoriteMusic = async () => {
+      const tockn = getAuth()
+      if (!tockn) {
+        return
+      }
+      ElMessageBox.confirm(
+        `是否${state.musicDetail.favorite ? '取消收藏' : '收藏'}该曲目？`,
+        '提示',
+        {
+          type: 'warning'
+        }
+      ).then(async () => {
+        try {
+          const res = await request.post(
+            `/api-website/music/sheet/favorite/${state.id}`
+          )
+          getMusicList()
+          // state.otherVideoList = res.data
+        } catch (e) {
+          console.log(e)
+        }
       })
     }
     return () => (
       <>
         <div class={classes.wall}></div>
-        <div class={[classes.width1200, classes.musicWrap]}>
-          <div class={classes.left}>
-            <div class={classes.title}>
-              <div class={classes.titleLeft}>
-                <p>声部：</p>
-                <ElSelect
-                  class="w-full subjectChiose"
-                  v-model={state.subjectId}
-                  placeholder="请选择声部"
-                  onChange={() => {
-                    setAccompanyUrl()
-                  }}
-                >
-                  {state.subjectList.map((item: any) => (
-                    <ElOption
-                      key={item.id}
-                      value={item.id}
-                      label={item.track}
-                    />
-                  ))}
-                </ElSelect>
-              </div>
-              <div class={classes.titleRight} onClick={() => printHander()}>
-                <img src={printIcon} alt="" />
-                <p>下载乐谱</p>
-              </div>
-            </div>
+        <div class={classes.musicWraps}>
+          <div class={[classes.width1200]}>
+            <div class={[classes.musicWrap]}>
+              <div class={classes.left}>
+                <div class={classes.title}>
+                  <div class={classes.titleLeft}>
+                    <p>声部：</p>
+                    <ElSelect
+                      class="w-full subjectChiose"
+                      v-model={state.subjectId}
+                      placeholder="请选择声部"
+                      onChange={() => {
+                        setAccompanyUrl()
+                      }}
+                    >
+                      {state.subjectList.map((item: any) => (
+                        <ElOption
+                          key={item.id}
+                          value={item.id}
+                          label={item.track}
+                        />
+                      ))}
+                    </ElSelect>
+                  </div>
+                  <div class={classes.titleRight} onClick={() => printHander()}>
+                    <img src={printIcon} alt="" />
+                    <p>下载乐谱</p>
+                  </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: 538px;page-break-after:always; "
+                    src={state.accompanyUrl}
+                    class={classes.iframe}
+                  />
 
-              {state.showImg ? (
-                <img src={state.showImg} alt="" />
-              ) : (
-                <div>
-                  <Vue3Lottie
-                    animationData={AstronautJSON}
-                    class={classes.finch}
-                  ></Vue3Lottie>
-                  <p class={classes.finchLoad}>加载中...</p>
+                  {state.showImg ? (
+                    <img src={state.showImg} alt="" />
+                  ) : (
+                    <div>
+                      <Vue3Lottie
+                        animationData={AstronautJSON}
+                        class={classes.finch}
+                      ></Vue3Lottie>
+                      <p class={classes.finchLoad}>加载中...</p>
+                    </div>
+                  )}
+                  {}
                 </div>
-              )}
-              {}
-            </div>
 
-            {state.showCode ? (
-              <div class={classes.showCode}>
-                <div class={classes.showCodeWrap}>
-                  <img
-                    class={classes.close}
-                    src={iconClose}
-                    alt=""
-                    onClick={() => {
-                      state.showCode = false
+                {state.mp3Type == 'MP3' ? (
+                  <colVideo
+                    src={state.activeRow.audioFileUrl}
+                    styleValue={{
+                      height: '68px',
+                      bacground: '#333'
                     }}
-                  />
-                  <img class={classes.code} src={code} alt="" />
-                  {/* <h2 class={classes.title}>酷乐秀</h2>
+                    type={'audto'}
+                    settings={['captions', 'quality', 'speed', 'loop', 'title']}
+                    class={classes.audios}
+                    poster={state.activeRow.title}
+                  ></colVideo>
+                ) : (
+                  <>
+                    <div class={classes.noMoreWrap}>
+                      <img src={noMore} alt="" />
+                      <p>温馨提示：该曲目暂不支持播放喔～</p>
+                    </div>
+                  </>
+                )}
+
+                {state.showCode ? (
+                  <div class={classes.showCode}>
+                    <div class={classes.showCodeWrap}>
+                      <img
+                        class={classes.close}
+                        src={iconClose}
+                        alt=""
+                        onClick={() => {
+                          state.showCode = false
+                        }}
+                      />
+                      <img class={classes.code} src={code} alt="" />
+                      {/* <h2 class={classes.title}>酷乐秀</h2>
                   <p class={classes.conent}>扫码下载酷乐秀APP</p>
                   <p class={classes.subConent}>
                     使用小酷Ai即可智能练习本首曲目哦！
                   </p> */}
-                  <img src={banner} alt="" />
-                </div>
-              </div>
-            ) : null}
-
-            {state.mp3Type == 'MP3' ? (
-              <colVideo
-                src={state.activeRow.audioFileUrl}
-                styleValue={{
-                  height: '68px',
-                  bacground: '#333'
-                }}
-                type={'audto'}
-                settings={['captions', 'quality', 'speed', 'loop']}
-                class={classes.audios}
-              ></colVideo>
-            ) : <>
-            <div  class={classes.noMoreWrap}>
-                <img src={noMore} alt="" />
-                <p>温馨提示：该曲目暂不支持播放喔～</p>
-            </div>
-            </>}
-          </div>
-          <div class={classes.right}>
-            <div class={classes.musicInfo}>
-              <h2>{state.musicDetail.musicSheetName}</h2>
-              <div class={classes.collect}>
-                <img src={start} class={classes.start} alt="" />
-                <p>{state.musicDetail.favoriteNum}人收藏</p>
-              </div>
-              <div class={classes.tagList}>
-                {state.tagList.map((item: any) => {
-                  return <tagItem title={item}>{item}</tagItem>
-                })}
+                      <img src={banner} class={classes.banner} alt="" />
+                    </div>
+                  </div>
+                ) : null}
               </div>
-              <p class={classes.subTitle}>
-                作曲人：<span>{state.musicDetail.composer}</span>
-              </p>
-              <p class={classes.subTitle}>
-                声部：<span>{state.musicDetail.subjectNames}</span>
-              </p>
-            </div>
-            <div class={classes.btooom}>
-              {state.teacherDetail.userId ? (
-                <div class={classes.teacherInfo}>
-                  <div class={classes.teacherHeadWrap}>
-                    <div class={classes.teacherHeadLeft}>
+              <div class={classes.right}>
+                <div class={classes.musicInfo}>
+                  <h2>
+                    <span class={classes.musicTag}>会员</span>
+                    {state.musicDetail.musicSheetName}
+                  </h2>
+                  <div class={classes.collectWrap}>
+                    <div class={classes.masker}>
                       <img
-                        src={
-                          state.teacherDetail.avatar
-                            ? state.teacherDetail.avatar
-                            : teacherHeader
-                        }
+                        src={state.musicDetail.favorite ? lineStart : start}
                         alt=""
-                        class={classes.teacherHeader}
                       />
-                      <div class={classes.teacherHeadInfo}>
-                        <div class={classes.teacherHeadName}>
-                          <span>{state.teacherDetail.userName}</span>
-                          {/* {!state.teacherDetail.entryFlag ? (
+                    </div>
+                    <img src={music} class={classes.musiceIcon} alt="" />
+                    <div>
+                      <div class={classes.collect} onClick={favoriteMusic}>
+                        <img
+                          src={state.musicDetail.favorite ? oLineStart : oStart}
+                          class={classes.start}
+                          alt=""
+                        />
+                        <p>{state.musicDetail.favoriteNum}人收藏</p>
+                      </div>
+
+                      <div class={classes.tagList}>
+                        {state.tagList.map((item: any) => {
+                          return <div class={classes.tag}>{item}</div>
+                        })}
+                      </div>
+                      <p class={classes.subTitle}>
+                        作曲人：<span>{state.musicDetail.composer}</span>
+                      </p>
+                      <p class={classes.subTitle}>
+                        声部：<span>{state.musicDetail.subjectNames}</span>
+                      </p>
+                    </div>
+                  </div>
+                </div>
+                <div class={classes.btooom}>
+                  {state.teacherDetail.userId ? (
+                    <div class={classes.teacherInfo}>
+                      <h2>上传者</h2>
+                      <div class={classes.teacherHeadWrap}>
+                        <div class={classes.teacherHeadLeft}>
+                          <img
+                            src={
+                              state.teacherDetail.avatar
+                                ? state.teacherDetail.avatar
+                                : teacherHeader
+                            }
+                            alt=""
+                            class={classes.teacherHeader}
+                          />
+                          <div class={classes.teacherHeadInfo}>
+                            <div class={classes.teacherHeadName}>
+                              <p>{state.teacherDetail.userName}</p>
+                              {/* {!state.teacherDetail.entryFlag ? (
                             ''
                           ) : (
                             <img
@@ -346,50 +409,60 @@ export default defineComponent({
                               alt=""
                             />
                           )} */}
+                              {state.userType == 'STUDENT' ? (
+                                <div
+                                  class={[
+                                    classes.teacherHeadRight,
+                                    state.teacherDetail.star
+                                      ? classes.isStart
+                                      : ''
+                                  ]}
+                                  onClick={() => followVideo()}
+                                >
+                                  {state.teacherDetail.star ? '已关注' : '+ 关注'}
+                                </div>
+                              ) : null}
+                            </div>
+                          </div>
+                        </div>
+                        <div>
+                          <p class={classes.fensNum}>{state.teacherDetail.fansNum}</p>
+                          <p class={classes.fens}>
+                            粉丝数
+                          </p>
                         </div>
-                        <p class={classes.fens}>
-                          粉丝 <span>{state.teacherDetail.fansNum}</span>
-                        </p>
                       </div>
                     </div>
-                    {state.userType == 'STUDENT' ? (
+                  ) : null}
+
+                  <div class={classes.otherMusic}>
+                    <div class={classes.videoNav}>
+                      <h5>Ta的曲谱</h5>
                       <div
-                        class={[
-                          classes.teacherHeadRight,
-                          state.teacherDetail.star ? classes.isStart : ''
-                        ]}
-                        onClick={() => followVideo()}
+                        class={classes.wrapRight}
+                        onClick={() => gotoMusic()}
                       >
-                        {state.teacherDetail.star ? '已关注' : '关注'}
+                        <span>更多</span>
+                        <img class={classes.arrow} src={arrow} alt="" />
                       </div>
-                    ) : null}
-                  </div>
-                </div>
-              ) : null}
+                    </div>
 
-              <div class={classes.otherMusic}>
-                <div class={classes.videoNav}>
-                  <h5>Ta的曲谱</h5>
-                  <div class={classes.wrapRight} onClick={() => gotoMusic()}>
-                    <span>更多</span>
-                    <img class={classes.arrow} src={arrow} alt="" />
+                    <div class={classes.otherMusicList}>
+                      {state.musicList.map(item => {
+                        return (
+                          <musicItem
+                            item={item}
+                            onMusicDetail={val => getDetail(val)}
+                          ></musicItem>
+                        )
+                      })}
+                    </div>
                   </div>
                 </div>
-
-                <div class={classes.otherMusicList}>
-                  {state.musicList.map(item => {
-                    return (
-                      <musicItem
-                        item={item}
-                        onMusicDetail={val => getDetail(val)}
-                      ></musicItem>
-                    )
-                  })}
-                </div>
               </div>
+              {/* <img src={state.imgUrl} alt="" /> */}
             </div>
           </div>
-          {/* <img src={state.imgUrl} alt="" /> */}
         </div>
       </>
     )

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

@@ -1,32 +1,35 @@
 .itemWrap {
-  height: 40px;
+  // height: 40px;
   background: #ffffff;
-  border-radius: 12px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   width: 100%;
-  border-radius: 12px;
   margin-bottom: 20px;
+  padding: 14px 0;
+  &:hover {
+    background: #F4F4F4;
+  }
   cursor: pointer;
   .left {
     display: flex;
     flex-direction: row;
     align-items: center;
     .imgWrap {
-      width: 40px;
-      height: 40px;
-      margin-right: 18px;
+      width: 72px;
+      height: 72px;
+      margin-right: 14px;
     }
     .textWrap {
       p {
         font-weight: 600;
         color: #333333;
         line-height: 22px;
-        font-size: 14px;
+        font-size: 18px;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
+        margin-bottom: 7px;
         span {
           font-weight: 400;
           color: #6a6a6a;

src/views/musicLibrary/index.module.less

@@ -24,7 +24,7 @@
       }
       .el-tabs__item {
         font-size: 20px;
-        margin-bottom: 8px;
+        // margin-bottom: 8px;
         color: #666;
         // margin-left: 40px;
         width: 100px;

src/views/musicLibrary/index.tsx

@@ -69,14 +69,14 @@ export default defineComponent({
     }
     const gotoSearch = (val:string|object)=>{
       if(typeof val == 'string'){
-        router.push({path:'/searchdetail',query:{search:val}})
+        router.push({name:'searchdetail',params:{search:val}})
       }else{
-        router.push({path:'/searchdetail',query:{...val}})
+        router.push({name:'searchdetail',params:{...val}})
       }
 
     }
     const gotoMusic=()=>{
-      router.push({path:'/searchdetail',query:{type:'music'}})
+      router.push({name:'searchdetail',params:{type:'music'}})
     }
     onMounted(() => {
       getAlbumList()