修改头部导航显示效果

src/assets/header-drop-active.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><g><g><path d="M2.41611984,5.50065616L8,10.1538897L13.583845,5.5006856L13.58388,5.50065616Q13.671492,5.42764693,13.778725,5.38882351Q13.885956,5.3500000199999995,14,5.3500000199999995Q14.064018,5.3500000199999995,14.126807,5.36248958Q14.189596,5.37497914,14.248743,5.39947838Q14.307889,5.42397749,14.361119,5.45954478Q14.41435,5.49511206,14.459619,5.54038063Q14.504887,5.58564919,14.540454,5.63887939Q14.576021,5.69210958,14.60052,5.75125581Q14.625019,5.81040204,14.637508,5.87319131Q14.649999,5.935980596,14.65,6Q14.65,6.14467999,14.588634,6.27570069Q14.527267,6.40672141,14.416121,6.49934337L8.4161201,11.4993439Q8.3726463,11.5355721,8.3235664,11.5637422Q8.2744865,11.5919123,8.2212763,11.6111765Q8.168067,11.6304412,8.1123285,11.6402206Q8.056590100000001,11.649999600000001,8,11.649999600000001Q7.9434099,11.649999600000001,7.8876719,11.6402206Q7.8319335,11.630440700000001,7.7787237,11.611176Q7.7255144,11.5919118,7.6764345,11.5637417Q7.6273541,11.5355721,7.5838804,11.4993439L1.58388016,6.49934384Q1.47273374,6.40672189,1.41136682,6.27570105Q1.3499999599999999,6.14468019,1.35000002,6Q1.35000002,5.935980596,1.36248958,5.87319131Q1.37497914,5.81040204,1.3994783800000001,5.75125581Q1.42397749,5.69210958,1.4595447799999999,5.63887939Q1.4951120599999999,5.58564919,1.54038063,5.54038063Q1.58564919,5.49511206,1.63887939,5.45954478Q1.69210958,5.42397749,1.75125581,5.39947838Q1.81040204,5.37497914,1.87319131,5.36248958Q1.935980596,5.3500000199999995,2,5.3500000199999995Q2.11404403,5.3500000199999995,2.2212764,5.38882351Q2.32850876,5.42764693,2.41611984,5.50065616Z" fill-rule="evenodd" fill="#006AFF" fill-opacity="1"/></g></g></svg>

src/components/Header.vue

@@ -10,7 +10,7 @@
                 <div class="right-item flex el-dropdown-link">
                     <img class="right-item-icon" src="../assets/header-icon.png" alt="">
                     <span>{{user}}</span>
-                    <img src="../assets/header-drop.svg" alt="">
+                    <div class="img"></div>
                 </div>
                 <el-dropdown-menu slot="dropdown">
                     <el-dropdown-item><a href="/agent/domainList" target="_blank">我的域名</a></el-dropdown-item>
@@ -90,6 +90,11 @@ a:hover {
             padding: 10px;
             transition: all .3s;
             cursor: pointer;
+            .img{
+                width: 16px;
+                height: 16px;
+                background-image: url('../assets/header-drop.svg');
+            }
             &:hover{
                 border-radius: 6px;
                 background: rgba(255, 255, 255, 0.4);
@@ -97,6 +102,9 @@ a:hover {
                 transition: all .3s;
             }
         }
+        .right-item:hover .img{
+            background-image: url('../assets/header-drop-active.svg');
+        }
         .el-dropdown .right-item{
             padding: 0 10px;
             cursor: pointer;