Procházet zdrojové kódy

header布局优化

任一存 před 2 roky
rodič
revize
a6c072e065

+ 9 - 6
code/src/views/layout/header.vue

@@ -75,27 +75,30 @@ onMounted(() => {
   align-items: center;
 
   .logo {
-    min-width: 200px;
     flex-shrink: 0;
     font-size: 30px;
     font-weight: bold;
+    flex: 1 1 auto;
+    min-width: 200px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
 
   >ul {
+    flex: 1 0 auto;
     display: flex;
     height: 100%;
-    flex: auto;
-    justify-content: flex-end;
-
+    justify-content: space-between;
     >li {
-      width: 14%;
       position: relative;
       display: flex;
       align-items: center;
       justify-content: center;
       height: 100%;
       cursor: pointer;
-
+      white-space: nowrap;
+      margin-left: 10px;
       >div {
         font-size: 20px;
       }

+ 4 - 0
code/src/views/layout/mheader.vue

@@ -87,6 +87,10 @@ onMounted(() => {
 
   >h3 {
     text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: calc(100% - (20px + 20px) * 2);
   }
 
   .menu {