修改顶部样式

src/views/home/homeView.vue

@@ -51,35 +51,29 @@ export default {
       <el-container>
         <!-- 顶部 -->
         <el-header>
-          <el-row>
+          <div class="dhl">
-            <div class="dhl">
+            <div class="left-box">
-              <el-col :span="3">
+              <img class="img-1" :src="imagePath.logo" alt="Logo" />
-                <div class="grid-content ep-bg-purple-home" />
+              <span class="sys-title">辉擎科技</span>
-                <img class="img-1" :src="imagePath.logo" alt="Logo" width="90" height="90" />
-                <em class="em-1">辉擎科技</em>
-              </el-col>
-              <el-col :span="9">
-                <div class="grid-content ep-bg-purple" />
-              </el-col>
-              <el-col :span="6">
-                <div class="grid-content ep-bg-purple-light" />
-                <div class="dhl-x">
-                  <el-breadcrumb separator="">
-                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
-                    <el-breadcrumb-item :to="{ path: '/' }">产品方案</el-breadcrumb-item>
-                    <el-breadcrumb-item :to="{ path: '/' }">行业解决问题</el-breadcrumb-item>
-                    <el-breadcrumb-item :to="{ path: '/' }">客户案例</el-breadcrumb-item>
-                    <el-breadcrumb-item :to="{ path: '/' }">关于我们</el-breadcrumb-item>
-                    <el-breadcrumb-item :to="{ path: '/' }"> </el-breadcrumb-item>
-                  </el-breadcrumb>
-                </div>
-              </el-col>
-              <el-col :span="1">
-                <div class="grid-content ep-bg-purple" />
-                <el-button class="an-3" type="primary">免费咨询</el-button>
-              </el-col>
             </div>
-          </el-row>
+            <div class="right-box">
+              <div class="dhl-x">
+                <div>首页</div>
+                <div>产品方案</div>
+                <div>行业解决问题</div>
+                <div>客户案例</div>
+                <div>关于我们</div>
+              </div>
+              <el-button class="an-3" type="primary">免费咨询</el-button>
+            </div>
+            <!-- <div class="grid-content ep-bg-purple-home" />
+            
+            <em class="em-1"></em>
+            <div class="grid-content ep-bg-purple-light" />
+            
+            <div class="grid-content ep-bg-purple" />
+             -->
+          </div>
         </el-header>
         <el-main style="padding: 0 20px">
           <div class="carousel">
@@ -182,7 +176,7 @@ export default {
                   部署时间：xxxx年
                   <el-link :underline="false" style="color: #2d3fdd">查看详情</el-link>
                 </div>
-                <el-button class="an-4" >查看更多案例</el-button>
+                <el-button class="an-4">查看更多案例</el-button>
               </el-col>
             </el-row>
           </div>
@@ -200,7 +194,7 @@ export default {
                   本次峰会汇聚行业专家，深入探讨数字化转型趋势与实践经验，共同展望为了发展方向。
                 </div>
                 <div class="an-5">
-                <el-link :underline="false" style="color: #2d3fdd" >查看详情</el-link>
+                  <el-link :underline="false" style="color: #2d3fdd">查看详情</el-link>
                 </div>
               </el-col>
               <el-col :span="6" class="bk-3-1">
@@ -212,7 +206,7 @@ export default {
                   本次峰会汇聚行业专家，深入探讨数字化转型趋势与实践经验，共同展望为了发展方向。
                 </div>
                 <div class="an-5">
-                <el-link :underline="false" style="color: #2d3fdd" >查看详情</el-link>
+                  <el-link :underline="false" style="color: #2d3fdd">查看详情</el-link>
                 </div>
               </el-col>
               <el-col :span="6" class="bk-3-1">
@@ -224,7 +218,7 @@ export default {
                   本次峰会汇聚行业专家，深入探讨数字化转型趋势与实践经验，共同展望为了发展方向。
                 </div>
                 <div class="an-5">
-                <el-link :underline="false" style="color: #2d3fdd" >查看详情</el-link>
+                  <el-link :underline="false" style="color: #2d3fdd">查看详情</el-link>
                 </div>
               </el-col>
             </el-row>
@@ -236,8 +230,7 @@ export default {
   </div>
 </template>
 <style scoped>
-
+.an-5 {
-.an-5{
   margin-left: -20px;
   margin-top: 20px;
   width: 100px;
@@ -308,7 +301,8 @@ export default {
   margin-left: 30px;
 }
 .img-1 {
-  margin-top: 8px;
+  width: 60px;
+  height: 60px;
 }
 .bt-1 {
   margin-top: -70px;
@@ -360,7 +354,7 @@ export default {
   font-size: 30px;
 }
 .an-3 {
-  margin-right: -20px;
+  /* margin-right: -20px; */
 }
 .an-1 {
   position: absolute;
@@ -407,14 +401,12 @@ export default {
   font-weight: bold;
 }
 .dhl {
-  float: right;
   width: 100%;
-  height: 50px;
+  height: 60px;
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
   background-color: #fff;
-  margin-top: 10px;
 }
 .el-link {
   margin-right: 25px;
@@ -424,7 +416,7 @@ export default {
 .dhl-x {
   display: flex;
   gap: 20px;
-  margin-right: 0px;
+  margin-right: 80px;
 }
 .carousel {
   position: relative;
@@ -469,4 +461,19 @@ export default {
 .next {
   right: 10px;
 }
+
+.left-box {
+  display: flex;
+  align-items: center;
+}
+
+.sys-title {
+  font-size: 24px;
+  font-weight: 600;
+}
+
+.right-box {
+  display: flex;
+  align-items: center;
+}
 </style>