优化

src/views/homePage/index.vue

 <template>
   <div class="home-container">
     <div class="header">
-      <el-row :gutter="20">
-        <el-col :span="5" class="header-left">
-          <div
-            class="nav-btn"
-            :class="{ active: selectedLeftBtn === 'equity' }"
-            @click="selectLeftBtn('equity')"
-          >
-            股权投资
-          </div>
-          <div
-            class="nav-btn"
-            :class="{ active: selectedLeftBtn === 'risk' }"
-            @click="selectLeftBtn('risk')"
-          >
-            固定风险投资
-          </div>
-        </el-col>
-        <el-col :span="14" class="title-section">
-          <p class="system-title">葛洲坝集团交通投资有限公司投资决策分析系统</p>
-        </el-col>
-        <el-col :span="5" class="header-right">
-          <div
-            class="nav-btn"
-            :class="{ active: selectedRightBtn === 'realestate' }"
-            @click="selectRightBtn('realestate')"
-          >
-            房地产投资
-          </div>
-          <div
-            class="nav-btn"
-            :class="{ active: selectedRightBtn === 'finance' }"
-            @click="selectRightBtn('finance')"
-          >
-            融资建设投资
-          </div>
-        </el-col>
-      </el-row>
+      <div class="header-left">
+        <div
+          class="nav-btn"
+          :class="{ active: selectedLeftBtn === 'equity' }"
+          @click="selectLeftBtn('equity')"
+        >
+          股权投资
+        </div>
+        <div
+          class="nav-btn"
+          :class="{ active: selectedLeftBtn === 'risk' }"
+          @click="selectLeftBtn('risk')"
+        >
+          固定风险投资
+        </div>
+      </div>
+      <div class="header-middile">
+        葛洲坝集团交通投资有限公司投资决策分析系统
+      </div>
+      <div class="header-right">
+        <div
+          class="nav-btn"
+          :class="{ active: selectedRightBtn === 'realestate' }"
+          @click="selectRightBtn('realestate')"
+        >
+          房地产投资
+        </div>
+        <div
+          class="nav-btn"
+          :class="{ active: selectedRightBtn === 'finance' }"
+          @click="selectRightBtn('finance')"
+        >
+          融资建设投资
+        </div>
+      </div>
     </div>
     <div class="content">
       <div class="fullscreen-btn">
@@ -203,48 +201,65 @@ window.addEventListener("fullscreenchange", () => {
   .header {
     width: 100%;
     .vh(height, 80);
-    text-align: center;
-    .title-section {
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    .header-middile {
       background-image: url("@/assets/images/header.png");
       background-repeat: no-repeat;
       background-position: center;
-      background-size: 170% 100%;
-      .vh(margin-top, -15);
-      .font(28);
+      // background-size: 170% 100%;
+      background-size: cover;
       letter-spacing: 1px;
       font-weight: 400;
-      text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
       font-family: "YouSheBiaoTiHei";
-      width: 950px;
-      height: 74px;
+      // .vw(width,950);
+      .vh(height,75);
       display: flex;
       justify-content: center;
       align-items: center;
+      @media screen and (max-width: 2560px) {
+        flex: 1;
+        .font(28);
+      }
+      @media screen and (max-width: 1920px) {
+        flex: 0.7;
+        .font(28);
+      }
+
+      @media screen and (max-width: 1440px) {
+        .font(24);
+        flex: 0.8;
+      }
+
+      // @media screen and (max-width: 1280px) {
+      //   flex: 0.4;
+      //   .font(20);
+      // }
     }
     .header-left {
       display: flex;
       align-items: center;
-      .vw( padding-left, 75);
+      justify-content: center;
       .nav-btn {
-        .vh(line-height, 36);
-        .font(14);
+        .font(16);
         cursor: pointer;
         color: #fff;
+        font-family: YouSheBiaoTiYuan;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .vh(height,36);
+        .vw(width,155);
         background-repeat: no-repeat;
-        background-size: 85%, 100%;
         background-position: center;
-        font-family: YouSheBiaoTiYuan;
-        font-weight: 100;
+        background-size: 100% 100%;
         &:not(.active) {
           background-image: url("@/assets/images/left-btn.png");
-          .vh(height,36);
-          .vw(width,208);
         }
 
         &.active {
           background-image: url("@/assets/images/left-hlightBtn.png");
-          .vh(height,36);
-          .vw(width,208);
         }
       }
     }
@@ -253,24 +268,24 @@ window.addEventListener("fullscreenchange", () => {
       justify-content: center;
       align-items: center;
       .nav-btn {
-        .vh(line-height, 36);
-        .font(14);
+        .font(16);
         cursor: pointer;
         color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: YouSheBiaoTiYuan;
+        .vh(height,36);
+        .vw(width,155);
         background-repeat: no-repeat;
-        background-size: cover;
         background-position: center;
-        font-family: YouSheBiaoTiYuan;
+        background-size: 100% 100%;
         &:not(.active) {
           background-image: url("@/assets/images/right-btn.png");
-          .vh(height,36);
-          .vw(width,208);
         }
 
         &.active {
           background-image: url("@/assets/images/right-hight-btn.png");
-          .vh(height,36);
-          .vw(width,208);
         }
       }
     }