perf[documentation]: refine css

Author: PanJiaChen

src/components/Share/DropdownMenu.vue

@@ -44,6 +44,7 @@ $t: .1s;
   width: 250px;
   position: relative;
   z-index: 1;
+  height: auto!important;
   &-title {
     width: 100%;
     display: block;
@@ -65,10 +66,12 @@ $t: .1s;
     position: absolute;
     width: 100%;
     background: #e0e0e0;
+    color: #000;
     line-height: 60px;
     height: 60px;
     cursor: pointer;
-    font-size: 20px;
+    font-size: 18px;
+    overflow: hidden;
     opacity: 1;
     transition: transform 0.28s ease;
     &:hover {

src/views/documentation/index.vue

@@ -1,26 +1,10 @@
 <template>
   <div class="app-container documentation-container">
-    <a
-      class="document-btn"
-      target="_blank"
-      href="https://panjiachen.github.io/vue-element-admin-site/"
-    >Documentation</a>
-    <a
-      class="document-btn"
-      target="_blank"
-      href="https://github.com/PanJiaChen/vue-element-admin/"
-    >Github Repository</a>
-    <a
-      class="document-btn"
-      target="_blank"
-      href="https://panjiachen.gitee.io/vue-element-admin-site/zh/"
-    >国内文档</a>
-    <dropdown-menu :items="articleList" style="float:left;margin-left:50px;" title="系列文章" />
-    <a
-      class="document-btn"
-      target="_blank"
-      href="https://panjiachen.github.io/vue-element-admin-site/zh/job/"
-    >内推招聘</a>
+    <a class="document-btn" target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/">Documentation</a>
+    <a class="document-btn" target="_blank" href="https://github.com/PanJiaChen/vue-element-admin/">Github Repository</a>
+    <a class="document-btn" target="_blank" href="https://panjiachen.gitee.io/vue-element-admin-site/zh/">国内文档</a>
+    <dropdown-menu class="document-btn" :items="articleList" title="系列文章" />
+    <a class="document-btn" target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/zh/job/">内推招聘</a>
   </div>
 </template>
 
@@ -53,8 +37,10 @@ export default {
   margin: 50px;
   display: flex;
   flex-wrap: wrap;
+  justify-content: space-evenly;
+
   .document-btn {
-    margin-left: 50px;
+    flex-shrink: 0;
     display: block;
     cursor: pointer;
     background: black;