提交

1

src/views/albumDetail/index.module.less

@@ -14,13 +14,14 @@
   flex-direction: row;
   padding: 20px 0;
   .left {
+    border-right: 1px solid #E7E6E6;
     width: 605px;
     .albumInfo {
       padding: 0 25px;
       .albumTitle {
         display: flex;
         flex-direction: row;
-        align-items: center;
+        align-items: top;
         justify-content: space-between;
         margin-bottom: 22px;
         h2 {
@@ -30,8 +31,10 @@
           font-size: 28px;
         }
         img {
+          margin-top: 6px;
           width: 28px;
           height: 28px;
+          cursor: pointer;
         }
       }
       .albumInfoTop {
@@ -39,24 +42,24 @@
         flex-direction: row;
         .albumInfoTopImg {
           position: relative;
-          width: 240px;
-          height: 226px;
+          width: 190px;
+          height: 190px;
           margin-right: 22px;
           .albumCover {
-            width: 226px;
-            height: 226px;
+            width: 190px;
+            height: 190px;
             position: absolute;
             z-index: 100;
             background-color: #fff;
             border-radius: 14px;
           }
-          .pan {
-            position: absolute;
-            width: 218px;
-            height: 218px;
-            right: 0;
-            top: 0;
-          }
+          // .pan {
+          //   position: absolute;
+          //   width: 218px;
+          //   height: 218px;
+          //   right: 0;
+          //   top: 0;
+          // }
         }
         .albumInfoTopConent {
           h2 {
@@ -68,10 +71,10 @@
             margin-bottom: 12px;
           }
           p {
-            font-size: 18px;
+            font-size: 16px;
             font-family: PingFangSC-Regular, PingFang SC;
             font-weight: 400;
-            color: #666666;
+            color: #656565;
             line-height: 28px;
             // width: 504px;
             overflow: hidden;
@@ -80,19 +83,32 @@
             white-space: normal !important;
             -webkit-line-clamp: 4;
             -webkit-box-orient: vertical;
-            height: 112px;
+            height: 95px;
           }
           .tagWrap {
             display: flex;
             flex-direction: row;
-            margin-top: 35px;
+            margin-top: 26px;
+            align-items: center;
+            .tag {
+              background-color: rgba(188, 253, 241, 0.46);
+              color: #00886d;
+              // padding: 0px 4px;
+              font-size: 14px;
+              margin-right: 16px;
+              border-radius: 20px;
+              padding: 0 16px;
+              height: 30px;
+              line-height: 30px;
+              text-align: center;
+            }
           }
         }
       }
       .albumInfoBottom {
-        font-size: 18px;
-        color: #666;
-        margin-top: 30px;
+        font-size: 14px;
+        color: #999;
+        margin-top: 20px;
         display: flex;
         flex-direction: row;
         justify-content: space-between;
@@ -101,8 +117,8 @@
           flex-direction: row;
           font-size: 16px;
           img {
-            width: 22px;
-            height: 22px;
+            width: 20px;
+            height: 20px;
             margin-right: 6px;
             // height: 18px;
           }
@@ -125,7 +141,8 @@
             justify-content: flex-start;
             align-items: center;
             img {
-              width: 23px;
+              width: 20px;
+              height: 20px;
               margin-right: 6px;
             }
           }
@@ -134,6 +151,7 @@
     }
   }
   .musicWrap {
+    padding: 0 25px;
     .title {
       line-height: 48px;
       font-size: 20px;
@@ -142,21 +160,25 @@
       display: flex;
       flex-direction: row;
       align-items: center;
-      padding: 0 15px;
+      padding: 0 25px;
       .dot {
-        width: 4px;
-        height: 18px;
-        background: #2dc7aa;
-        border-radius: 3px;
-        margin-right: 11px;
+        width: 30px;
+        height: 20px;
+        // background: #2dc7aa;
+        // border-radius: 3px;
+        margin-left: 10px;
+        img {
+          width: 30px;
+          height: 20px;
+        }
       }
     }
   }
 
   // 右边
   .right {
+    width: 373px;
     margin-left: 14px;
-    width: 100%;
     .some {
       padding: 20px 20px 10px;
       background-color: #fff;

src/views/albumDetail/index.tsx

@@ -12,12 +12,13 @@ import tagItem from '@/components/tagItem'
 import pagination from '@/components/pagination'
 import albumItem from './modals/albumItem'
 import request from '@/helpers/request'
-import musicLIstItem from '@/components/musicLIstItem'
+import musicLIstItem from './modals/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 oStart from '@/common/images/oStart.png'
+import oLineStart from '@/common/images/oLineStart.png'
+import titleDot from '@/views/home/images/titleDot.png'
 import { watch } from 'fs'
 export default defineComponent({
   name: 'albumDetail',
@@ -109,7 +110,11 @@ export default defineComponent({
               <div class={classes.albumInfo}>
                 <div class={classes.albumTitle}>
                   <h2>{state.details.albumName}</h2>
-                  <img src={state.details.favorite ? lineStart : start} alt="" />
+                  <img
+                    src={state.details.favorite ? lineStart : start}
+                    alt=""
+                    onClick={() => favoriteAlbum()}
+                  />
                 </div>
 
                 <div class={classes.albumInfoTop}>
@@ -129,44 +134,47 @@ export default defineComponent({
                     <p>{state.details.albumDesc}</p>
                     <div class={classes.tagWrap}>
                       {state.hotTagList.map((item: any) => {
-                        return <tagItem title={item}></tagItem>
+                        return <div class={classes.tag}>{item}</div>
                       })}
                     </div>
-                  </div>
-                </div>
-                <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>
-                  {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={pan} alt="" />
+                          <span>共{state.details.musicSheetCount}首曲目</span>
+                        </div>
+                        <div class={classes.itemBottomR}>
+                          <img src={state.details.favorite ?oLineStart:oStart} alt=""     onClick={() => favoriteAlbum()}/>
+                          <span>共{state.details.favorite}人收藏</span>
+                        </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>
+                        </div>
+                      ) : null} */}
                     </div>
-                  ) : null}
+                  </div>
                 </div>
               </div>
               <div class={classes.musicWrap}>
                 <div class={classes.title}>
-                  <div class={classes.dot}></div>
+
                   <span>曲目列表</span>
+                  <div class={classes.dot}>
+                      <img src={titleDot} alt="" />
+                  </div>
                 </div>
                 <div>
                   {state.musicList.map(item => {

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

@@ -0,0 +1,224 @@
+.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: #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;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+  padding: 16px 0px;
+  border-bottom: 1px solid #ececec;
+  cursor: pointer;
+  .left {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    .imgWrap {
+      width: 88px;
+      height: 88px;
+      margin-right: 30px;
+      border-radius: 5px;
+      overflow: hidden;
+    }
+    .textWrap {
+      position: relative;
+      .musicName {
+        font-size: 18px;
+        font-weight: 500;
+        color: #000000;
+        line-height: 25px;
+        margin-bottom: 6px;
+      }
+      .authorName {
+        font-weight: 500;
+        color: #666;
+        line-height: 22px;
+        font-size: 16px;
+        margin-bottom: 7px;
+        margin-bottom: 13px;
+      }
+      .favoriteWrap {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        font-size: 14px;
+        color: #999999;
+        line-height: 20px;
+        img {
+          width: 16px;
+          height: 16px;
+          margin-right: 10px;
+        }
+      }
+    }
+  }
+  .authorBottom {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 35px;
+    .authorInfo {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      .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;
+    .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;
+      }
+    }
+    .touchButtonO {
+      right: -100px;
+      top: 38px;
+      position: absolute;
+      &:hover {
+        .vip {
+          // width: 96px;
+          color: #fff !important;
+          background-color: var(--music-list-item-vip-bg);
+          width: 96px !important;
+          height: 42px;
+          text-align: center !important;
+          color: #fff !important;
+
+          p {
+            width: 96px !important;
+          }
+        }
+        .free {
+          width: 96px !important;
+          height: 42px;
+          text-align: center !important;
+          color: #fff !important;
+
+          p {
+            width: 96px !important;
+          }
+          background-color: var(--music-list-item-free-bg);
+        }
+        .charge {
+          text-align: center;
+          color: #fff !important;
+          background-color: var(--music-list-item-charge-bg);
+          width: 96px !important;
+          height: 42px;
+          text-align: center !important;
+          color: #fff !important;
+
+          p {
+            width: 96px !important;
+          }
+        }
+      }
+      .touchButton {
+        background: #fff;
+        border-radius: 12px;
+        line-height: 42px;
+        font-size: 18px;
+        width: 96px;
+        height: 42px;
+        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 {
+      width: 20px;
+      height: 20px;
+      margin-left: 12px;
+    }
+  }
+// }

src/views/albumDetail/modals/musicLIstItem/index.tsx

@@ -0,0 +1,144 @@
+import { defineComponent, reactive, watch } from 'vue'
+import icon from '@/components/videoDetailItem/images/icon.png'
+import classes from './index.module.less'
+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
+  addName: String
+  addUserAvatar: String
+  musicSheetName: String
+  subjectNames: String
+  composer: String
+  chargeType: String
+}
+const chargeTypes = {
+  CHARGE: '点播',
+  FREE: '免费',
+  VIP: '会员'
+}
+const chargeImg = {
+  CHARGE: palyer,
+  FREE: gou,
+  VIP: member
+}
+export default defineComponent({
+  name: 'musicLIstItem',
+  props: {
+    item: {
+      type: Object as () => Props,
+      default: () => ({})
+    },
+    onClick: {
+      type: Function,
+      default: (item: any) => {}
+    }
+  },
+
+  setup(props: any) {
+    const state = reactive({
+      item: props.item
+    })
+    const router = useRouter()
+    watch(
+      () => props.item,
+      item => {
+        state.item = item
+      }
+    )
+    const gotoMusicDetail = () => {
+      router.push({ path: '/muiscDetial', query: { id: state.item.id } })
+    }
+    return () => (
+      <div
+        onClick={() => {
+          props.onClick(state.item)
+        }}
+      >
+        <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
+                onMouseover={() => {
+                  state.item.hoverTop = true
+                }}
+                onMouseout={() => {
+                  state.item.hoverTop = false
+                }}
+                class={[classes.touchButtonO]}
+              >
+                {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>
+              </div>
+            </div>
+            <div class={classes.authorBottom}>
+              <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>
+
+              {/* <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>
+            </div>
+          </div>
+          {/* <div class={classes.right}></div> */}
+        </div>
+      </div>
+    )
+  }
+})