diff --git a/src/mes/common/buttonComponent/index.js b/src/mes/common/buttonComponent/index.js
index 532eca2..8a21b7f 100644
--- a/src/mes/common/buttonComponent/index.js
+++ b/src/mes/common/buttonComponent/index.js
@@ -207,7 +207,7 @@ const ButtonComponent = props => {
   return (
     <div
       className={`${styles.buttonComponent} ${expand ? styles.expand : styles.packup
-        } ${dataList.length && dataList.length <= 8 ? styles.specialBtns : ""}`}
+        } ${dataList.length && dataList.length <= 8 ? styles.specialBtns : dataList.length > 16 ? styles.specialBtns1 : ""}`}
     >
       <div className={`btns`}>
         <div className={styles.btnsBox}>
diff --git a/src/mes/common/buttonComponent/index.less b/src/mes/common/buttonComponent/index.less
index 4bef40c..5752cc3 100644
--- a/src/mes/common/buttonComponent/index.less
+++ b/src/mes/common/buttonComponent/index.less
@@ -159,6 +159,31 @@
   }
 }
 
+.specialBtns1 {
+  .size(100%, calc(@specialBtns-height * 3));
+
+  :global {
+    .btns {
+      border: 1px solid black;
+      .size(100%, calc(@specialBtns-height * 3));
+    }
+  }
+
+  &.expand {
+    .size(100%, calc(@specialBtns-height * 3));
+    transition: all 0.5s ease-in-out;
+
+    :global {
+      .btns {
+        .size(100%, calc(@specialBtns-height * 3));
+        opacity: 1;
+        transition: all 0.5s ease-in-out;
+        border: none;
+      }
+    }
+  }
+}
+
 .workOverTime {
   .flex();
   flex-direction: column;