添加标

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

@@ -1,9 +1,8 @@
-
 .itemAllWrap {
   padding: 0 24px;
-  &:nth-last-child(1){
+  &:nth-last-child(1) {
     .itemWrap {
-    border-bottom:none;
+      border-bottom: none;
     }
   }
   &:hover {
@@ -13,7 +12,7 @@
       .vip {
         // width: 96px;
         color: #fff !important;
-        background-color: var(--music-list-item-vip-bg)!important;
+        background-color: var(--music-list-item-vip-bg) !important;
         width: 96px !important;
         height: 42px;
         text-align: center !important;
@@ -31,28 +30,24 @@
         p {
           width: 96px !important;
         }
-        background-color: var(--music-list-item-free-bg)!important;
+        background-color: var(--music-list-item-free-bg) !important;
       }
       .charge {
         text-align: center;
         color: #fff !important;
-        background-color: var(--music-list-item-charge-bg)!important;
+        background-color: var(--music-list-item-charge-bg) !important;
         width: 96px !important;
         height: 42px;
         text-align: center !important;
 
-
         p {
           width: 96px !important;
         }
       }
     }
-
   }
-
 }
 .itemWrap {
-
   --music-list-item-background-color: #fff;
   --music-list-item-title-color: #333;
   --music-list-item-desc-color: #333;
@@ -72,7 +67,7 @@
   flex-direction: row;
   justify-content: space-between;
   width: 100%;
-  padding: 20px 0px ;
+  padding: 20px 0px;
   border-bottom: 1px solid #ececec;
 
   cursor: pointer;
@@ -156,90 +151,90 @@
   //   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;
-      }
+  .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: 0;
-      top: 38px;
-      position: absolute;
-      margin-bottom: 65px;
+  }
+  .touchButtonO {
+    right: 0;
+    top: 38px;
+    position: absolute;
+    margin-bottom: 65px;
+    display: flex;
+    .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;
-      .touchButton {
-        background: #fff;
-        border-radius: 12px;
-        line-height: 42px;
-        font-size: 18px;
-        width: 96px;
-        height: 42px;
-        border-radius: 10px;
-        border: 1px solid #4ca751;
+      margin-left: 10px;
+
+      .touchButtonWrap {
+        width: 54px;
+        height: 100%;
         display: flex;
-        margin-left: 10px;
-        
-        .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;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        border-right: 1px solid rgba(76, 167, 81, 1);
+        img {
+          width: 30px;
+          height: 30px;
         }
-        &.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);
+      }
+      .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);
         }
-        &.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);
+        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);
         }
-        &.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);
+        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;
-    }
   }
+  .arrow {
+    width: 20px;
+    height: 20px;
+    margin-left: 12px;
+  }
+}
 // }
 
 .iconFine {
@@ -248,4 +243,9 @@
   height: 22px;
   margin-right: 8px;
 }
-
+.iconAlbum {
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  margin-right: 8px;
+}

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

@@ -12,6 +12,7 @@ import start from '@/common/images/start.png'
 import lineStart from '@/common/images/lineStart.png'
 import arrow from '@/views/home/images/moreArrow.png'
 import iconFine from '@/common/images/icon_fine.png'
+import iconAlbum from '@/common/images/icon_album_active.png'
 
 type Props = {
   id?: Number
@@ -84,6 +85,9 @@ export default defineComponent({
                   {state.item.exquisiteFlag === 1 && (
                     <img src={iconFine} class={classes.iconFine} />
                   )}
+                  {state.item.albumNums > 0 && (
+                    <img src={iconAlbum} class={classes.iconAlbum} />
+                  )}
                   {state.item.musicSheetName}
                 </p>
                 <p class={classes.authorName}>作曲:{state.item.composer}</p>