更新

src/views/co-ai/index.module.less

@@ -356,6 +356,25 @@
     }
   }
 
+  .iconType {
+    position: absolute;
+    width: 27px;
+    height: 16px;
+    left: calc(7.2vw - 27px);
+    top: 0;
+    z-index: 9;
+
+    &.FREE {
+      background: url('./image/icon-music-default.png') no-repeat center;
+      background-size: contain;
+    }
+
+    &.VIP {
+      background: url('./image/icon-music-vip.png') no-repeat center;
+      background-size: contain;
+    }
+  }
+
   .musicAvtor {
     display: block;
     width: 7.2vw;

src/views/co-ai/index.tsx

@@ -650,6 +650,8 @@ export default defineComponent({
                         data.musicIndex = index;
                         musicIframeLoad();
                       }}>
+                      <i
+                        class={[styles.iconType, styles[item.paymentType]]}></i>
                       <img
                         class={styles.musicAvtor}
                         src={item.titleImg}
@@ -717,7 +719,7 @@ export default defineComponent({
                         </div>
                       )} */}
                       {
-                        data.musics[data.musicIndex]?.id && 
+                        data.musics[data.musicIndex]?.id &&
                         <iframe
                           id="staffIframeRef"
                           style={{
@@ -812,10 +814,10 @@ export default defineComponent({
                 <img id="coai-2" src={icon_down} onClick={handleSave} />
               )}
               {
-                data.musics[data.musicIndex]?.id && 
+                data.musics[data.musicIndex]?.id &&
                 <div class={styles.rightBtnsRight} id="coai-3">
                   <img src={icons.icon_start} onClick={() => handleGoto()} />
-                </div>                
+                </div>
               }
             </div>
           </div>