从接口中获取国富之星样式

src/components/ebiz/manpower/UserInfoHeader.vue

@@ -1,12 +1,13 @@
 <!-- 头部用户信息 -->
 <template>
   <div class="user-info flex p15 bg-head align-items-e">
-    <div class="avatar">
+    <div class="avatar w40 h40">
-      <img class="w40 star" src="../../../assets/images/avatar-border.gif" />
+      <img class="w40 absolute-center" :src="avatarUrl" />
-      <img class="w40" src="../../../assets/images/bnf_avatar.png" />
+      <img v-if="isGfStar" class="w40 star absolute-center" :src="avatarBorderUrl" />
     </div>
     <div class="add-list flex1 ml15">
       <span class="fs16 font-bold name">{{ userInfo.encryptionName }}</span>
+      <img v-if="isGfStar" id="gf-star" class="ml2" :src="titleUrl" />
       <div class="">工号 | {{ userInfo.encryptionJobNo }}</div>
     </div>
   </div>
@@ -14,12 +15,18 @@
 
 <script>
 import { getAgentInfo } from '@/api/ebiz/my/my.js'
+import defaultAvatar from '@/assets/images/bnf_avatar.png'
+import avatarBorderUrl from '@/assets/images/avatar-border.gif'
 export default {
   name: 'UserInfoHeader',
   data() {
     return {
       userInfo: '', // 代理人信息
-      activeNames: ['1']
+      activeNames: ['1'],
+      avatarUrl: defaultAvatar,
+      avatarBorderUrl: avatarBorderUrl,
+      titleUrl: '',
+      isGfStar: false
     }
   },
   created() {
@@ -41,6 +48,16 @@ export default {
           this.$toast(res.resultMessage)
         }
       }
+      if (this.userInfo.agentHeadImgUrl) {
+        this.avatarUrl = this.userInfo.agentHeadImgUrl
+      }
+      if (this.userInfo.starForGFLabelImgUrl) {
+        this.titleUrl = this.userInfo.starForGFLabelImgUrl
+      }
+      if (this.userInfo.starForGFFrameUrl) {
+        this.avatarBorderUrl = this.userInfo.starForGFFrameUrl
+      }
+      this.isGfStar = this.userInfo.starForGFFlag === 'Y'
     }
   },
   components: {}
@@ -48,6 +65,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.absolute-center {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
 .user-info {
   background-image: url('~@/assets/images/headerBg.png');
   background-size: cover;
@@ -58,7 +82,7 @@ export default {
     position: relative;
     .star {
       position: absolute;
-      transform: scale(1.5);
+      transform: translate(-50%, -50%) scale(1.6);
     }
   }
 
@@ -69,18 +93,12 @@ export default {
     line-height: 22px;
     .name {
       position: relative;
+      vertical-align: middle;
     }
-    .name::after {
+    #gf-star {
-      content: ' ';
+      display: inline-block;
-      background-image: url('~@/assets/images/gf-star.gif');
+      max-width: 40px;
-      background-size: contain;
+      vertical-align: top;
-      width: 88px;
-      height: 30px;
-      position: absolute;
-      transform-origin: 0 0;
-      transform: scale(0.5);
-      top: 0;
-      margin-left: 2px;
     }
   }
   .font-bold {