更改12

src/views/enterprise/menu.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="top-menu-bar">
     <!-- 图标按钮 -->
-    <el-tooltip content="主页" placement="bottom">
+    <el-tooltip content="主页" placement="bottom" class="tooltip">
       <el-button icon="el-icon-house" circle></el-button>
     </el-tooltip>
 
     <!-- 操作按钮 -->
-    <el-button-group>
-      <el-button>田间规划</el-button>
+    <el-button-group class="custom-button-group">
+      <el-button >田间规划</el-button>
       <el-button>实验设计</el-button>
       <el-button>采集部署</el-button>
       <el-button>实验分析</el-button>
@@ -15,29 +15,29 @@
 
     <div class="text-with-icons">
       <!-- 使用 el-tag 和 el-icon 组件显示带图标的文本 -->
-      <el-tag size="medium">
-        <el-icon name="el-icon-farm"></el-icon>
-        创建农场
+      <el-tag size="medium" class="icon-button first-button">
+        <el-icon name="el-icon-farm" ></el-icon>
+        <p class="header-p">创建农场</p>
       </el-tag>
-      <el-tag size="medium">
+      <el-tag size="medium" class="icon-button second-button">
         <el-icon name="el-icon-community"></el-icon>
-        创建小区
+        <p class="header-p">创建小区</p>
       </el-tag>
-      <el-tag size="medium">
+      <el-tag size="medium" class="icon-button third-button">
         <el-icon name="el-icon-group"></el-icon>
-        小区编组
+        <p class="header-p">小区编组</p>
       </el-tag>
-      <el-tag size="medium">
+      <el-tag size="medium" class="icon-button four-button">
         <el-icon name="el-icon-road"></el-icon>
-        自由路块
+        <p class="header-p">自由路块</p>
       </el-tag>
-      <el-tag size="medium">
+      <el-tag size="medium" class="icon-button five-button">
         <el-icon name="el-icon-road-work"></el-icon>
-        作业路
+        <p class="header-p">作业路</p>
       </el-tag>
-      <el-tag size="medium">
+      <el-tag size="medium" class="icon-button six-button" style="margin-left: 15px">
         <el-icon name="el-icon-eye"></el-icon>
-        查看农场
+        <p class="header-p">查看农场</p>
       </el-tag>
     </div>
   </div>
@@ -52,20 +52,83 @@ import { ElButton, ElTooltip } from 'element-ui';
   display: flex;
   align-items: center;
   padding: 10px 0;
+  height: 50px;
+  background-color: #e7eaed;
+}
+.tooltip{
+  margin-left: 30px;
+  margin-right: 80px;
+
 }
 .text-with-icons {
   display: flex;
   align-items: center;
   justify-content: start;
   flex-wrap: wrap;
+  padding: 0px 50px;
+  margin-top: -15px;
+  margin-bottom: -15px;
+  height: 50px;
+  border-left: 3px solid #bbbbbb;
+  border-right: 3px solid #bbbbbb;
   el-tag {
     margin: 5px;
     display: flex;
     align-items: center;
+
   }
 }
-.el-button {
-  margin-right: 10px;
+.text-with-icons .el-tag {
+  margin-right: 20px;
+  padding: 0px 40px;
+}
+.header-p{
+    margin-top: 0px;
+    display: inline-block;
+    font-size: 15px
+}
+.custom-button-group .el-button {
+  margin-left: 10px;
+  font-size: 14px;
+  height: 34px;
+
+  //margin-right: 20px; /* 设置按钮之间的右间距为 10 像素 */
+}
+.custom-button-group .el-button:last-child {
+  margin-right: 110px; /* 去除最后一个按钮的右间距 */
+}
+.icon-button {
+  width: 25px;
+  height: 25px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: left;
+  border: none;
+  background-color: transparent;
+}
+.first-button {
+  margin-left: 40px;
+  background-image: url('../image/创建农场.png'); /* 第一张自定义图片 */
+}
+.second-button {
+  margin-left: 40px;
+  background-image: url('../image/农场.png'); /* 第一张自定义图片 */
+}
+.third-button {
+  margin-left: 40px;
+  background-image: url('../image/小区编组.png'); /* 第一张自定义图片 */
+}
+.four-button {
+   margin-left: 40px;
+   background-image: url('../image/自由路块.png'); /* 第一张自定义图片 */
+ }
+.five-button {
+  margin-left: 40px;
+  background-image: url('../image/作业路.png'); /* 第一张自定义图片 */
+}
+.six-button {
+  margin-left: 40px;
+  background-image: url('../image/农场列表.png'); /* 第一张自定义图片 */
 }
 </style>