统一信息维护正式化外壳样式

ruoyi-ui/src/views/ccdiAccountInfo/index.vue

@@ -113,7 +113,8 @@
         <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
       </el-row>
 
-      <el-table v-loading="loading" :data="rows" stripe border class="account-table">
+      <div class="formal-table-shell">
+        <el-table v-loading="loading" :data="rows" stripe border class="account-table">
         <el-table-column label="员工姓名" prop="staffName" min-width="120">
           <template slot-scope="scope">{{ scope.row.staffName || '-' }}</template>
         </el-table-column>
@@ -193,9 +194,10 @@
             >删除</el-button>
           </template>
         </el-table-column>
-      </el-table>
+        </el-table>
 
-      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+      </div>
     </div>
 
     <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="1160px" append-to-body>
@@ -872,19 +874,89 @@ export default {
 
 .account-page {
   min-height: calc(100vh - 84px);
-  background: #f5f7fa;
+  padding: 24px;
+  background: #f5f6f8;
 }
 
 .board {
-  padding: 20px;
-  border-radius: 8px;
+  padding: 0;
+  border-radius: 0;
+  background: transparent;
+  border: 0;
+}
+
+.query-form {
+  margin-bottom: 16px;
+  padding: 18px 20px 2px;
+  border: 1px solid #dde3ec;
+  border-radius: 3px;
   background: #fff;
-  border: 1px solid #ebeef5;
+}
+
+.query-form ::v-deep .el-form-item {
+  margin-bottom: 16px;
+}
+
+.query-form ::v-deep .el-form-item__label {
+  color: #637187;
+  font-weight: 600;
+}
+
+.query-form ::v-deep .el-input__inner,
+.query-form ::v-deep .el-select .el-input__inner {
+  border-color: #dde3ec;
+  border-radius: 3px;
+}
+
+.mb8 {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-bottom: 16px;
+  padding: 14px 20px;
+  border: 1px solid #dde3ec;
+  border-radius: 3px;
+  background: #ffffff;
+}
+
+.mb8 ::v-deep .el-button {
+  border-radius: 4px;
+}
+
+.mb8 ::v-deep .top-right-btn {
+  margin-left: auto;
+}
+
+.formal-table-shell {
+  padding: 4px 0 16px;
+  border: 1px solid #dde3ec;
+  border-radius: 3px;
+  background: #ffffff;
+  overflow: hidden;
 }
 
 .account-table ::v-deep .el-table__header th {
-  background: #f8f8f9;
-  color: #515a6e;
+  background: #f6f8fb;
+  color: #607086;
+  padding: 9px 0;
+}
+
+.account-table ::v-deep .el-table td,
+.account-table ::v-deep .el-table th.is-leaf {
+  border-bottom-color: #edf1f5;
+}
+
+.account-table ::v-deep .el-table td {
+  padding: 8px 0;
+}
+
+.account-table ::v-deep .el-table th > .cell,
+.account-table ::v-deep .el-table td > .cell {
+  line-height: 1.4;
+}
+
+.formal-table-shell ::v-deep .pagination-container {
+  padding: 16px 20px 0;
 }
 
 .form-section {
@@ -913,4 +985,18 @@ export default {
   font-weight: 700;
 }
 
+::v-deep .el-dialog {
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+::v-deep .el-dialog__header {
+  border-bottom: 1px solid #dde3ec;
+  background: #ffffff;
+}
+
+::v-deep .el-dialog__body {
+  background: #f8fafc;
+}
+
 </style>