提交

1

src/components/musicLIstItem/index.tsx

@@ -23,7 +23,7 @@ type Props = {
 const chargeTypes = {
   CHARGE: '点播',
   FREE: '免费',
-  VIP: 'VIP'
+  VIP: '会员'
 }
 const chargeImg = {
   CHARGE: palyer,

src/views/albumDetail/index.module.less

@@ -2,110 +2,132 @@
   height: 70px;
   margin-bottom: 18px;
 }
+.wrap {
+  background-color: #f8f8f8 !important;
+}
 .w1200 {
-  width: 1200px;
+  width: 1002px;
   margin: 0 auto;
-}
-.wrap {
+  background-color: #fff;
+  border-radius: 10px;
   display: flex;
   flex-direction: row;
-  .albumInfo {
-    padding: 20px 30px 20px;
-    background-color: #fff;
-    .albumInfoTop {
-      display: flex;
-      flex-direction: row;
-      .albumInfoTopImg {
-        position: relative;
-        width: 240px;
-        height: 226px;
-        margin-right: 22px;
-        .albumCover {
-          width: 226px;
-          height: 226px;
-          position: absolute;
-          z-index: 100;
-          background-color: #fff;
-          border-radius: 14px;
-        }
-        .pan {
-          position: absolute;
-          width: 218px;
-          height: 218px;
-          right: 0;
-          top: 0;
-        }
-      }
-      .albumInfoTopConent {
+  padding: 20px 0;
+  .left {
+    width: 605px;
+    .albumInfo {
+      padding: 0 25px;
+      .albumTitle {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 22px;
         h2 {
-          font-size: 24px;
-          font-family: PingFangSC-Semibold, PingFang SC;
-          font-weight: 600;
-          color: #333;
-          line-height: 37px;
-          margin-bottom: 12px;
+          line-height: 40px;
+          font-weight: 500;
+          color: #000000;
+          font-size: 28px;
         }
-        p {
-          font-size: 18px;
-          font-family: PingFangSC-Regular, PingFang SC;
-          font-weight: 400;
-          color: #666666;
-          line-height: 28px;
-          width: 504px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          word-wrap: break-word;
-          white-space: normal !important;
-          -webkit-line-clamp: 4;
-          -webkit-box-orient: vertical;
-          height: 112px;
-        }
-        .tagWrap {
-          display: flex;
-          flex-direction: row;
-          margin-top: 35px;
+        img {
+          width: 28px;
+          height: 28px;
         }
       }
-    }
-    .albumInfoBottom {
-      font-size: 18px;
-      color: #666;
-      margin-top: 30px;
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      .albumInfoLeft {
+      .albumInfoTop {
         display: flex;
         flex-direction: row;
-        font-size: 16px;
-        img {
-          width: 22px;
-          height: 22px;
-          margin-right: 6px;
-          // height: 18px;
-        }
-        .itemBottomL {
-          margin-right: 21px;
+        .albumInfoTopImg {
+          position: relative;
+          width: 240px;
+          height: 226px;
+          margin-right: 22px;
+          .albumCover {
+            width: 226px;
+            height: 226px;
+            position: absolute;
+            z-index: 100;
+            background-color: #fff;
+            border-radius: 14px;
+          }
+          .pan {
+            position: absolute;
+            width: 218px;
+            height: 218px;
+            right: 0;
+            top: 0;
+          }
         }
-        .itemBottomL,
-        .itemBottomR {
-
-          display: flex;
-          flex-direction: row;
-          justify-content: flex-start;
-          align-items: center;
+        .albumInfoTopConent {
+          h2 {
+            font-size: 24px;
+            font-family: PingFangSC-Semibold, PingFang SC;
+            font-weight: 600;
+            color: #333;
+            line-height: 37px;
+            margin-bottom: 12px;
+          }
+          p {
+            font-size: 18px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #666666;
+            line-height: 28px;
+            // width: 504px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            word-wrap: break-word;
+            white-space: normal !important;
+            -webkit-line-clamp: 4;
+            -webkit-box-orient: vertical;
+            height: 112px;
+          }
+          .tagWrap {
+            display: flex;
+            flex-direction: row;
+            margin-top: 35px;
+          }
         }
       }
-      .albumInfoRight {
-        .itemBottomR {
-          cursor: pointer;
+      .albumInfoBottom {
+        font-size: 18px;
+        color: #666;
+        margin-top: 30px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        .albumInfoLeft {
           display: flex;
           flex-direction: row;
-          justify-content: flex-start;
-          align-items: center;
+          font-size: 16px;
           img {
-            width: 23px;
+            width: 22px;
+            height: 22px;
             margin-right: 6px;
+            // height: 18px;
+          }
+          .itemBottomL {
+            margin-right: 21px;
+          }
+          .itemBottomL,
+          .itemBottomR {
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-start;
+            align-items: center;
+          }
+        }
+        .albumInfoRight {
+          .itemBottomR {
+            cursor: pointer;
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-start;
+            align-items: center;
+            img {
+              width: 23px;
+              margin-right: 6px;
+            }
           }
         }
       }

src/views/albumDetail/index.tsx

@@ -2,7 +2,6 @@ import { defineComponent, toRefs, reactive, onMounted, ref } from 'vue'
 import hold from '@/components/albumItem/images/hold.png'
 import start from '@/components/albumItem/images/start.png'
 import lineStart from '@/components/albumItem/images/lineStart.png'
-
 import smallPan from '@/components/albumItem/images/pan.png'
 import classes from './index.module.less'
 import arrow from '@/components/musicLIstItem/images/arrow.png'
@@ -17,6 +16,8 @@ import musicLIstItem from '@/components/musicLIstItem'
 import { getUserInfo, getUserType, getAuth } from '@/helpers/utils'
 import ColEmpty from '@/components/col-empty'
 import { useRoute, useRouter } from 'vue-router'
+// import start from '@/common/images/start.png'
+// import lineStart from '@/common/images/lineStart.png'
 import { watch } from 'fs'
 export default defineComponent({
   name: 'albumDetail',
@@ -26,7 +27,7 @@ export default defineComponent({
       default: ''
     }
   },
-  components: { tagItem, pagination, albumItem, musicLIstItem,ColEmpty },
+  components: { tagItem, pagination, albumItem, musicLIstItem, ColEmpty },
   setup(props, conent) {
     const state = reactive({
       title: props.title,
@@ -44,7 +45,7 @@ export default defineComponent({
       },
       details: {} as any,
       userType: '',
-      isshowData: false,
+      isshowData: false
     })
     const route = useRoute()
     const router = useRouter()
@@ -96,126 +97,144 @@ export default defineComponent({
       getList()
     }
 
-    const gotoMore = ()=>{
-      router.push({path:'/searchdetail'})
+    const gotoMore = () => {
+      router.push({ path: '/searchdetail' })
     }
     return () => (
       <>
-        <div class={classes.wall}></div>
-        <div class={[classes.w1200, classes.wrap]}>
-          <div class={classes.left}>
-            <div class={classes.albumInfo}>
-              <div class={classes.albumInfoTop}>
-                <div class={classes.albumInfoTopImg}>
-                  <img
-                    src={
-                      state.details.albumCoverUrl
-                        ? state.details.albumCoverUrl
-                        : hold
-                    }
-                    alt=""
-                    class={classes.albumCover}
-                  />
-                  <img src={pan} alt="" class={classes.pan} />
-                </div>
-                <div class={classes.albumInfoTopConent}>
+        <div class={[classes.wrap]}>
+          <div class={classes.wall}></div>
+          <div class={[classes.w1200]}>
+            <div class={classes.left}>
+              <div class={classes.albumInfo}>
+                <div class={classes.albumTitle}>
                   <h2>{state.details.albumName}</h2>
-                  <p>{state.details.albumDesc}</p>
-                  <div class={classes.tagWrap}>
-                    {state.hotTagList.map((item: any) => {
-                      return <tagItem title={item}></tagItem>
-                    })}
-                  </div>
+                  <img src={state.details.favorite ? lineStart : start} alt="" />
                 </div>
-              </div>
-              <div class={classes.albumInfoBottom}>
-                <div class={classes.albumInfoLeft}>
-                  <div class={classes.itemBottomL}>
-                    <img src={smallPan} alt="" />
-                    <span>{state.details.musicSheetCount}首</span>
+
+                <div class={classes.albumInfoTop}>
+                  <div class={classes.albumInfoTopImg}>
+                    <img
+                      src={
+                        state.details.albumCoverUrl
+                          ? state.details.albumCoverUrl
+                          : hold
+                      }
+                      alt=""
+                      class={classes.albumCover}
+                    />
+                    {/* <img src={pan} alt="" class={classes.pan} /> */}
                   </div>
-                  <div class={classes.itemBottomR}>
-                    <img src={start} alt="" />
-                    <span>{state.details.favorite}人收藏</span>
+                  <div class={classes.albumInfoTopConent}>
+                    <p>{state.details.albumDesc}</p>
+                    <div class={classes.tagWrap}>
+                      {state.hotTagList.map((item: any) => {
+                        return <tagItem title={item}></tagItem>
+                      })}
+                    </div>
                   </div>
                 </div>
-                {state.userType == 'STUDENT' ? (
-                  <div class={classes.albumInfoRight}>
-                    <div
-                      class={classes.itemBottomR}
-                      onClick={() => favoriteAlbum()}
-                    >
-                      <img
-                        src={state.details.favorite ? lineStart : start}
-                        alt=""
-                      />
-                      <span>{state.details.favorite ? '已收藏' : '收藏'}</span>
+                <div class={classes.albumInfoBottom}>
+                  <div class={classes.albumInfoLeft}>
+                    <div class={classes.itemBottomL}>
+                      <img src={smallPan} alt="" />
+                      <span>{state.details.musicSheetCount}首</span>
+                    </div>
+                    <div class={classes.itemBottomR}>
+                      <img src={start} alt="" />
+                      <span>{state.details.favorite}人收藏</span>
                     </div>
                   </div>
-                ) : null}
-              </div>
-            </div>
-            <div class={classes.musicWrap}>
-              <div class={classes.title}>
-                <div class={classes.dot}></div>
-                <span>曲目列表</span>
-              </div>
-              <div>
-                {state.musicList.map(item => {
-                  return <musicLIstItem item={item}></musicLIstItem>
-                })}
-                  {state.isshowData&&<ColEmpty></ColEmpty>}
+                  {state.userType == 'STUDENT' ? (
+                    <div class={classes.albumInfoRight}>
+                      <div
+                        class={classes.itemBottomR}
+                        onClick={() => favoriteAlbum()}
+                      >
+                        <img
+                          src={state.details.favorite ? lineStart : start}
+                          alt=""
+                        />
+                        <span>
+                          {state.details.favorite ? '已收藏' : '收藏'}
+                        </span>
+                      </div>
+                    </div>
+                  ) : null}
+                </div>
               </div>
-            </div>
-            <pagination
-              total={state.pageInfo.total}
-              v-model:page={state.pageInfo.page}
-              v-model:limit={state.pageInfo.limit}
-              pageSizes={state.pageInfo.page_size}
-              pagination={getList}
-            ></pagination>
-          </div>
-          <div class={classes.right}>
-            <div class={classes.some}>
-              <div class={classes.someTitle}>
-                <div class={classes.tilteL}>
-                  <img src={somePan} alt="" />
-                  <span>相关专辑</span>
+              <div class={classes.musicWrap}>
+                <div class={classes.title}>
+                  <div class={classes.dot}></div>
+                  <span>曲目列表</span>
                 </div>
-                <div class={classes.tilteR} onClick={()=>{gotoMore()}}>
-                  <span>更多</span>
-                  <img class={classes.arrow} src={arrow} alt="" />
+                <div>
+                  {state.musicList.map(item => {
+                    return <musicLIstItem item={item}></musicLIstItem>
+                  })}
+                  {state.isshowData && <ColEmpty></ColEmpty>}
                 </div>
               </div>
-
-              <div class={classes.someWrap}>
-                {state.relatedMusicAlbum.map(item => (
-                  <albumItem
-                    detail={item}
-                    onAlbumDetail={id => getDetail(id)}
-                  ></albumItem>
-                ))}
-              </div>
+              <pagination
+                total={state.pageInfo.total}
+                v-model:page={state.pageInfo.page}
+                v-model:limit={state.pageInfo.limit}
+                pageSizes={state.pageInfo.page_size}
+                pagination={getList}
+              ></pagination>
             </div>
-            <div class={classes.some}>
-              <div class={classes.someTitle}>
-                <div class={classes.tilteL}>
-                  <img src={hot} alt="" />
-                  <span>热门专辑</span>
+            <div class={classes.right}>
+              <div class={classes.some}>
+                <div class={classes.someTitle}>
+                  <div class={classes.tilteL}>
+                    <img src={somePan} alt="" />
+                    <span>相关专辑</span>
+                  </div>
+                  <div
+                    class={classes.tilteR}
+                    onClick={() => {
+                      gotoMore()
+                    }}
+                  >
+                    <span>更多</span>
+                    <img class={classes.arrow} src={arrow} alt="" />
+                  </div>
                 </div>
-                <div class={classes.tilteR} onClick={()=>{gotoMore()}}>
-                  <span>更多</span>
-                  <img class={classes.arrow} src={arrow} alt="" />
+
+                <div class={classes.someWrap}>
+                  {state.relatedMusicAlbum.map(item => (
+                    <albumItem
+                      detail={item}
+                      onAlbumDetail={id => getDetail(id)}
+                    ></albumItem>
+                  ))}
                 </div>
               </div>
+              <div class={classes.some}>
+                <div class={classes.someTitle}>
+                  <div class={classes.tilteL}>
+                    <img src={hot} alt="" />
+                    <span>热门专辑</span>
+                  </div>
+                  <div
+                    class={classes.tilteR}
+                    onClick={() => {
+                      gotoMore()
+                    }}
+                  >
+                    <span>更多</span>
+                    <img class={classes.arrow} src={arrow} alt="" />
+                  </div>
+                </div>
 
-              <div class={classes.someWrap}>
-                {state.hotList.map(item => (
-                  <albumItem
-                    detail={item}
-                    onAlbumDetail={id => getDetail(id)}
-                  ></albumItem>
-                ))}
+                <div class={classes.someWrap}>
+                  {state.hotList.map(item => (
+                    <albumItem
+                      detail={item}
+                      onAlbumDetail={id => getDetail(id)}
+                    ></albumItem>
+                  ))}
+                </div>
               </div>
             </div>
           </div>

src/views/muiscDetial/index.module.less

@@ -52,6 +52,19 @@
         }
       }
     }
+    :global {
+      ::-webkit-scrollbar {
+        width: 4px;
+      }
+      /* 滚动槽 */
+      ::-webkit-scrollbar-track {
+        border-radius: 2px;
+      }
+      // /* 滚动条滑块 */
+      ::-webkit-scrollbar-thumb {
+        border-radius: 2px;
+      }
+    }
     .musicContent {
       border: 1px solid #e9e8e8;
       page-break-after: always;
@@ -65,7 +78,15 @@
       align-items: center;
       // justify-content: center;
       overflow-y: auto;
-      padding: 34px 20px 0;
+      padding: 34px 10px 0;
+
+      .musicStag {
+        width: 78px;
+        height: 75px;
+        position: absolute;
+        right: 0;
+        top: 0;
+      }
       img {
         width: 100%;
       }
@@ -108,8 +129,8 @@
         height: 74px;
         position: absolute;
         z-index: 10;
-        top: 10px;
-        left: 10px;
+        top: 13px;
+        left: 13px;
       }
       .title {
         padding: 0;
@@ -201,6 +222,17 @@
         margin-top: 2px;
         min-width: 42px;
       }
+
+        .charge{
+          color: #fff;
+          background-color: #3F90D6;
+        }
+        .gou{
+          color: #fff;
+          background-color: #4CA751;
+        }
+
+
     }
     .collectWrap {
       display: flex;
@@ -267,29 +299,28 @@
           margin-right: 6px;
         }
         p {
-          font-size: 16px;
+          font-size: 14px;
           font-family: PingFangSC-Regular, PingFang SC;
           font-weight: 400;
-          color: #333;
+          color: #666660;
           line-height: 25px;
         }
       }
     }
     .subTitle {
       margin-bottom: 5px;
+      font-size: 14px;
+      line-height: 22px;
+      color: #666660;
       &:last-child {
         margin-bottom: 0;
       }
-      span {
-        font-size: 14px;
-        line-height: 22px;
-        color: #666660;
-      }
     }
   }
   .btooom {
     background-color: #fff;
     // padding-top: 25px;
+    width: 360px;
     .teacherInfo {
       padding: 18px 14px;
       background-color: #fff;
@@ -313,7 +344,7 @@
             width: 68px;
             height: 68px;
             border-radius: 50%;
-            border: 1px solid #2DC7AA;
+            border: 1px solid #2dc7aa;
             overflow: hidden;
             margin-right: 17px;
           }
@@ -354,7 +385,7 @@
         .teacherHeadRight {
           width: 67px;
           height: 26px;
-          background: #FF6969;
+          background: #ff6969;
           border-radius: 13px;
           font-size: 14px;
           color: #ffffff;
@@ -364,9 +395,9 @@
         }
         .teacherHeadRight.isStart {
           height: 28px;
-          border: 1px solid #FF6969;
+          border: 1px solid #ff6969;
           background: #fff;
-          color: #FF6969;
+          color: #ff6969;
         }
       }
       //

src/views/muiscDetial/index.tsx

@@ -29,7 +29,7 @@ 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 code from '@/common/images/student_download.png'
 import musicItem from './modals/musicItem'
 import request from '@/helpers/request'
 import { useRoute, useRouter } from 'vue-router'
@@ -52,13 +52,18 @@ import printJS from 'print-js'
 const chargeTypes = {
   CHARGE: '点播',
   FREE: '免费',
-  VIP: 'VIP'
+  VIP: '会员'
 }
 const chargeImg = {
   CHARGE: palyer,
   FREE: gou,
   VIP: member
 }
+const chargeClass = {
+  CHARGE: 'charge',
+  FREE: 'gou',
+  VIP: 'member'
+}
 export default defineComponent({
   name: 'muiscDetial',
   props: {
@@ -285,7 +290,7 @@ export default defineComponent({
 
                 <div class={classes.musicContent}>
                   {/*        id="iframe"       ref="iframe"*/}
-                  <img src={chargeImg[state.activeRow.chargeType]} alt="" />
+                  <img class={classes.musicStag} src={chargeImg[ state.musicDetail.chargeType]} alt="" />
                   <iframe
                     id="containerPrint"
                     ref="print"
@@ -354,7 +359,7 @@ export default defineComponent({
               <div class={classes.right}>
                 <div class={classes.musicInfo}>
                   <h2>
-                    <span class={classes.musicTag}>会员</span>
+                    <span class={[classes.musicTag,classes[chargeClass[state.musicDetail.chargeType]]]}>{chargeTypes[state.musicDetail.chargeType]}</span>
                     {state.musicDetail.musicSheetName}
                   </h2>
                   <div class={classes.collectWrap}>

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

@@ -22,6 +22,7 @@
     }
     .textWrap {
       p {
+        width: 226px;
         font-weight: 600;
         color: #333333;
         line-height: 22px;