change - 可视化界面顶部菜单栏按钮样式调整

ruoyi-admin/src/main/resources/static/css/main.css

@@ -90,8 +90,10 @@ body.body-transformer-detail1 {
 }
 
 .tab-group-item {
-    display: inline-block;
+    /*display: inline-block;*/
-    min-width: 7.125rem;
+    display:flex;
+    /*min-width: 7.125rem;*/
+    width:auto !important;
     min-height: 1.4rem;
     padding: 0 0 0 6px;
     color: #01f8ff;
@@ -99,8 +101,9 @@ body.body-transformer-detail1 {
     letter-spacing: 1px;
     /*border: #FFFFFF solid 1px;*/
     border-radius: 0;
-    background: url("../img/tab-background.png");
+    /*background: url("../img/tab-background.png") no-repeat;*/
     text-align: left;
+    align-items: center;
 }
 
 .tab-group-item:hover, .tab-group-item.active {
@@ -114,8 +117,9 @@ body.body-transformer-detail1 {
     color: #FFFFFF;
     font-size: 80%;
     /*margin-left: 20%;*/
-    float: right;
+    /*float: right;*/
-    margin-right: 7%;
+    /*margin-right: 7%;*/
+    padding: 0 10px;
     z-index: 1;
 }
 

ruoyi-admin/src/main/resources/templates/index.html

@@ -120,7 +120,8 @@
                     return html
                 },
                 onRenderQueueItem(parent, index, item) {
-                    return `<button class="btn tab-group-item ${item.active ? "active" : ""}" id="queue-item-${index}">${item.name}<span class="close-btn"><i class="fa-solid fa-times"></i></span></button>`
+                    let info = `<button class="btn tab-group-item ${item.active ? "active" : ""}" id="queue-item-${index}">${item.name}<span class="close-btn"><i class="fa-solid fa-times"></i></span></button>`;
+                    return info;
                 },
                 onLinkQueue(parent, queue) {
                     for (let index in queue) {