更新

src/components/TheSong/index.module.less

@@ -9,12 +9,17 @@
     border-bottom: 1px solid #e8e8e8;
     padding: 16px 0;
   }
-  .item:last-child{
+  .item:last-child {
     border: none;
   }
   .play {
     flex-shrink: 0;
   }
+  .iconFine {
+    width: 16px;
+    height: 20px;
+    margin-left: 6px;
+  }
   .content {
     flex: 1;
     .top {
@@ -45,12 +50,11 @@
           color: var(--van-primary-color);
           padding: 4px 8px;
           margin-right: 4px;
-          
         }
       }
     }
     .title {
-      max-width: 150px;
+      max-width: 110px;
       font-size: 16px;
       font-weight: bold;
       color: #1a1a1a;

src/components/TheSong/index.tsx

@@ -1,7 +1,8 @@
-import { Icon, NoticeBar, Tag } from "vant";
+import { Icon, NoticeBar, Tag, Image } from "vant";
 import { defineComponent, PropType } from "vue";
 import styles from "./index.module.less";
 import IconPlay from "@/assets/icon-play.png";
+import IconFine from "@/assets/icon_fine.png";
 import { useRouter } from "vue-router";
 export default defineComponent({
   name: "TheSong",
@@ -46,6 +47,10 @@ export default defineComponent({
                 >
                   {colors[n.chargeType].text}
                 </Tag>
+                {n.exquisiteFlag === 1 && (
+                  <Image src={IconFine} class={styles.iconFine} />
+                )}
+
                 <span class={[styles.title, "van-ellipsis"]}>
                   {n.musicSheetName}
                 </span>