工器具页面优化

src/views/enterpriseLibrary/tool/components/ToolForm.vue

@@ -2,7 +2,7 @@
     <!-- 小型弹窗，用于完成，删除，保存等操作 -->
     <el-dialog class="l-dialog" :class="lDialog" :title="title" :visible.sync="dialogVisible" :showClose="true"
         :closeOnClickModal="false" @close="handleClose" :append-to-body="true">
-        <div>
+        <div class="dialog-content-scrollable">
             <el-form :model="form" :rules="rules" ref="ruleForm" label-width="110px" label-position="top">
                 <el-form-item label="工器具名称" prop="toolName">
                     <el-input class="form-item" v-model="form.toolName" clearable show-word-limit placeholder="请输入工器具名称"
@@ -289,15 +289,38 @@ export default {
 .w700 ::v-deep .el-dialog {
     width: 700px;
     font-family: Source Han Sans CN, Source Han Sans CN;
+    max-height: 90vh;
+    display: flex;
+    flex-direction: column;
+    margin-top: 5vh !important;
+    margin-bottom: 5vh !important;
 }
 
 .w500 ::v-deep .el-dialog {
     width: 500px;
     font-family: Source Han Sans CN, Source Han Sans CN;
+    max-height: 90vh;
+    display: flex;
+    flex-direction: column;
+    margin-top: 5vh !important;
+    margin-bottom: 5vh !important;
+}
+
+// 弹窗主体区域
+.w500 ::v-deep .el-dialog__body,
+.w700 ::v-deep .el-dialog__body {
+    flex: 1;
+    overflow: hidden;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
 }
 
 .w500 ::v-deep .el-dialog__header,
 .w700 ::v-deep .el-dialog__header {
+    flex-shrink: 0;
+    border-bottom: 1px solid #EBEEF5;
+    
     .el-dialog__title {
         font-size: 16px;
     }
@@ -356,5 +379,33 @@ export default {
 
 ::v-deep .el-dialog__footer {
     text-align: center;
+    flex-shrink: 0;
+}
+
+// 内容区域可滚动
+.dialog-content-scrollable {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding-right: 6px;
+    max-height: calc(90vh - 120px); // 减去头部和底部的高度
+
+    // 自定义滚动条样式
+    &::-webkit-scrollbar {
+        width: 6px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: rgba(0, 0, 0, 0.2);
+        border-radius: 3px;
+
+        &:hover {
+            background: rgba(0, 0, 0, 0.3);
+        }
+    }
 }
 </style>