docs: update header style

packages/vant-cli/site/desktop/components/Header.vue

@@ -13,12 +13,11 @@
             :key="index"
             class="van-doc-header__top-nav-item"
           >
-            <a
-              class="van-doc-header__logo-link"
-              target="_blank"
-              :href="item.url"
-            >
-              <img :src="item.logo" />
+            <a class="van-doc-header__link" target="_blank" :href="item.url">
+              <img v-if="item.logo" :src="item.logo" />
+              <span v-else-if="item.text">
+                {{ item.text }}
+              </span>
             </a>
           </li>
 
@@ -31,7 +30,7 @@
               class="van-doc-header__cube van-doc-header__version"
               @click="toggleVersionPop"
             >
-              {{ versions[0].label }}
+              {{ packageVersion }}
               <transition name="van-doc-dropdown">
                 <div v-if="showVersionPop" class="van-doc-header__version-pop">
                   <div
@@ -64,6 +63,7 @@
 
 <script>
 import SearchInput from './SearchInput';
+import { packageVersion } from 'site-desktop-shared';
 
 export default {
   name: 'van-doc-header',
@@ -81,6 +81,7 @@ export default {
 
   data() {
     return {
+      packageVersion,
       showVersionPop: false,
     };
   },
@@ -153,7 +154,6 @@ export default {
     align-items: center;
     height: @van-doc-header-top-height;
     padding: 0 @van-doc-padding;
-    line-height: @van-doc-header-top-height;
 
     &-nav {
       flex: 1;
@@ -167,7 +167,7 @@ export default {
       }
 
       &-item {
-        margin-left: 20px;
+        margin-left: 16px;
       }
 
       &-title {
@@ -183,7 +183,7 @@ export default {
     padding: 0 12px;
     color: #fff;
     font-size: 14px;
-    line-height: 24px;
+    line-height: 28px;
     text-align: center;
     border: 1px solid rgba(255, 255, 255, 0.7);
     border-radius: 20px;
@@ -196,8 +196,8 @@ export default {
 
     &::after {
       position: absolute;
-      top: 7px;
-      right: 7px;
+      top: 9px;
+      right: 9px;
       width: 5px;
       height: 5px;
       color: rgba(255, 255, 255, 0.9);
@@ -209,15 +209,16 @@ export default {
 
     &-pop {
       position: absolute;
-      top: 30px;
-      right: 0;
+      top: 34px;
       left: 0;
+      width: 100px;
       z-index: 99;
       color: #333;
       line-height: 36px;
       text-align: left;
+      overflow: hidden;
       background-color: #fff;
-      border-radius: @van-doc-border-radius;
+      border-radius: 8px;
       box-shadow: 0 4px 12px #ebedf0;
       transform-origin: top;
       transition: 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
@@ -228,6 +229,7 @@ export default {
 
         &:hover {
           color: @van-doc-blue;
+          background-color: #f7f8fa;
         }
       }
     }
@@ -243,8 +245,8 @@ export default {
     }
 
     img {
-      width: 24px;
-      margin-right: 10px;
+      width: 28px;
+      margin-right: 12px;
     }
 
     span {
@@ -253,11 +255,16 @@ export default {
     }
   }
 
-  &__logo-link {
+  &__link {
+    span {
+      color: #fff;
+      font-size: 16px;
+    }
+
     img {
       display: block;
-      width: 26px;
-      height: 26px;
+      width: 28px;
+      height: 28px;
       transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 
       &:hover {