vip标识样式

src/layout/personal/navBar.vue

@@ -50,16 +50,16 @@
 
             <v-menu open-on-hover>
               <template v-slot:activator="{ props }">
-                <div class="d-flex ml-3 align-center cursor-pointer" :class="{'active-route': routeActive === 5}" v-bind="props" @click="handleToPersonalCenter">
+                <div class="d-flex ml-3 align-center cursor-pointer" :class="{'active-route': routeActive === 5, 'vipBox': vip}" v-bind="props" @click="handleToPersonalCenter">
                   <div style="position: relative;">
-                    <v-avatar>
-                      <v-img alt="John" :src="getUserAvatar(baseInfo?.avatar, baseInfo?.sex)"></v-img>
+                    <v-avatar class="avatar">
+                      <v-img alt="John" :src="getUserAvatar(baseInfo?.avatar, baseInfo?.sex)" ></v-img>
                     </v-avatar>
-                    <div v-if="canUse" style="position: absolute; right: -9px; bottom: -3px;">
+                    <div v-if="vip" style="position: absolute; left: -9px; bottom: -3px;">
                       <svg-icon name="huangguan1" size="25"></svg-icon>
                     </div>
                   </div>
-                  <div class="ml-3 commonHover">
+                  <div class="ml-3 commonHover userName">
                     {{ baseInfo?.name || userInfo.phone }}
                     <v-icon :color="routeActive === 5 ? '#008979' : '#333'" size="30">mdi-menu-down</v-icon>
                   </div>
@@ -200,7 +200,7 @@ const routeActive = computed(() => {
   return index
 })
 
-const canUse = computed(() => {
+const vip = computed(() => {
   return new Date().getTime() < userStore.userInfo?.vipExpireDate
 })
 

src/styles/personal/navBar.scss

@@ -7,6 +7,15 @@
   }
 }
 
+.vipBox {
+  .avatar {
+    border: 1px solid gold;
+  }
+  .userName {
+    color: #a18a0f;
+  }
+}
+
 .user-nav .nav-resume-tools {
   display: inline-block;
   vertical-align: middle;