feat: vip标记修改

src/views/creation/index-share.tsx

@@ -6,7 +6,7 @@ import {
   reactive,
   ref,
   watch,
-  nextTick
+  nextTick,
 } from 'vue'
 // import WaveSurfer from 'wavesurfer.js';
 // import Regions from 'wavesurfer.js/dist/plugins/regions.js';
@@ -29,6 +29,8 @@ import musicBg from './share-model/images/music-bg.png';
 import playImg from './images/play.png';
 import btnImg from './images/btn.png';
 import iconUpward from './images/upward.png';
+import vipIcon from './images/vip_icon.png';
+import svipIcon from './images/svip_icon.png';
 import {
   browser,
   getAuth,
@@ -113,7 +115,6 @@ export default defineComponent({
     const wxStatus = ref(false)
     const staffDom= ref<HTMLIFrameElement>()
     const {playStaff, pauseStaff, updateProgressStaff} = staffMoveInstance()
-
     // 点赞
     const onStarChange = async () => {
       await checkLogin();
@@ -711,7 +712,11 @@ export default defineComponent({
             <div class={[styles.musicSection, styles.musicShareSection]}>
               <div class={styles.avatarInfoBox}>
                 <div class={styles.avatar}>
-                  <Image class={styles.userLogo} src={state.musicDetail.avatar} />
+                  <Image class={[styles.userLogo, state.musicDetail.vipType === 'VIP' ? styles.vipLogo : state.musicDetail.vipType === 'PERMANENT_SVIP' || state.musicDetail.vipType === 'SVIP' ? styles.svipLogo : '']} src={state.musicDetail.avatar} />
+                  {
+                    (state.musicDetail.vipType === 'VIP' || state.musicDetail.vipType === 'PERMANENT_SVIP' || state.musicDetail.vipType === 'SVIP') &&
+                    <img class={styles.vipIcon} src={state.musicDetail.vipType === 'VIP' ? vipIcon : svipIcon} />
+                  }
                   <div class={styles.infoCon}>
                     <div class={styles.info}>
                       <span class={styles.userName}>{state.musicDetail?.username}</span>

src/views/creation/index.module.less

@@ -252,13 +252,28 @@
     .avatar{
       display: flex;
       align-items: center;
+      position: relative;
       .userLogo{
         width: 44px;
         height: 44px;
-        border: 1px solid #FFFFFF;
+        border: 2px solid #FFFFFF;
         margin-right: 10px;
         border-radius: 50%;
         overflow: hidden;
+        &.vipLogo {
+          border: 2px solid #FADA9B;
+        }
+        &.svipLogo {
+          border: 2px solid #F0AF88;
+        }
+      }
+      .vipIcon {
+        position: absolute;
+        bottom: -8px;
+        left: 2px;
+        z-index: 1;
+        width: 40px;
+        height: 18px;
       }
       .infoCon{
         .info{

src/views/creation/index.tsx

@@ -671,7 +671,11 @@ export default defineComponent({
         <div class={styles.musicSection}>
           <div class={styles.avatarInfoBox}>
             <div class={styles.avatar}>
-              <Image class={styles.userLogo} src={state.musicDetail.avatar} />
+              <Image class={[styles.userLogo, state.musicDetail.vipType === 'VIP' ? styles.vipLogo : state.musicDetail.vipType === 'PERMANENT_SVIP' || state.musicDetail.vipType === 'SVIP' ? styles.svipLogo : '']} src={state.musicDetail.avatar} />
+              {
+                (state.musicDetail.vipType === 'VIP' || state.musicDetail.vipType === 'PERMANENT_SVIP' || state.musicDetail.vipType === 'SVIP') &&
+                <img class={styles.vipIcon} src={state.musicDetail.vipType === 'VIP' ? vipIcon : svipIcon} />
+              }
               <div class={styles.infoCon}>
                 <div class={styles.info}>
                   <span class={styles.userName}>{state.musicDetail?.username}</span>