Просмотр исходного кода

fix: align logo and company name, reduce spacing

Alignment fixes:
- Remove gap: 40px from .header-nav (caused extra space)
- Add justify-content: flex-start to .header-logo
- Set logo img width: auto (prevent stretching)

Spacing reductions:
- Logo width: 120px → 100px
- Padding/margin: 16px → 12px
- Font size: 15px → 14px

Result:
- Logo left-aligned ✓
- Company name left-aligned (no extra gap) ✓
- Tighter spacing (saved ~20px) ✓
- Clean, professional layout ✓

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
Ryuiso 3 недель назад
Родитель
Сommit
2ae193ff43
1 измененных файлов с 6 добавлено и 6 удалено
  1. 6 6
      src/components/Header.vue

+ 6 - 6
src/components/Header.vue

@@ -181,20 +181,20 @@ export default {
   display: flex;
   align-items: center;
   height: 80px;
-  gap: 40px;
 }
 
 /* Logo */
 .header-logo {
   flex-shrink: 0;
-  width: 120px;
+  width: 100px;
   height: 50px;
   display: flex;
   align-items: center;
+  justify-content: flex-start;
 }
 
 .header-logo img {
-  width: 100%;
+  width: auto;
   height: 100%;
   object-fit: contain;
 }
@@ -204,13 +204,13 @@ export default {
   flex-shrink: 0;
   display: flex;
   align-items: center;
-  padding-left: 16px;
-  margin-left: 16px;
+  padding-left: 12px;
+  margin-left: 12px;
   border-left: 1px solid #e0e0e0;
 }
 
 .header-company-name span {
-  font-size: 15px;
+  font-size: 14px;
   font-weight: 600;
   color: #333;
   letter-spacing: 0.5px;