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

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

@@ -40,7 +40,8 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
     </el-row>
 
-    <el-table :data="creditInfoList" v-loading="loading">
+    <div class="formal-table-shell">
+      <el-table :data="creditInfoList" v-loading="loading">
       <el-table-column label="姓名" prop="name" align="center" />
       <el-table-column label="身份证号" prop="idCard" align="center" />
       <el-table-column label="最近征信查询日期" align="center" width="160">
@@ -59,15 +60,16 @@
           <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</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>
 
     <el-dialog title="批量上传征信HTML" :visible.sync="uploadDialogVisible" width="720px" append-to-body>
       <el-upload
@@ -335,6 +337,12 @@ export default {
 </script>
 
 <style scoped>
+.app-container {
+  min-height: calc(100vh - 84px);
+  padding: 24px;
+  background: #f5f6f8;
+}
+
 .query-form ::v-deep .el-row {
   display: flex;
   flex-wrap: wrap;
@@ -346,6 +354,82 @@ export default {
 
 .query-form ::v-deep .el-form-item {
   margin-right: 0;
+  margin-bottom: 16px;
+}
+
+.query-form {
+  margin-bottom: 16px;
+  padding: 18px 20px 2px;
+  border: 1px solid #dde3ec;
+  border-radius: 3px;
+  background: #ffffff;
+}
+
+.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;
+}
+
+.formal-table-shell ::v-deep .el-table th {
+  background: #f6f8fb;
+  color: #607086;
+  padding: 9px 0;
+}
+
+.formal-table-shell ::v-deep .el-table td,
+.formal-table-shell ::v-deep .el-table th.is-leaf {
+  border-bottom-color: #edf1f5;
+}
+
+.formal-table-shell ::v-deep .el-table td {
+  padding: 8px 0;
+}
+
+.formal-table-shell ::v-deep .el-table th > .cell,
+.formal-table-shell ::v-deep .el-table td > .cell {
+  text-align: left;
+  line-height: 1.4;
+}
+
+.formal-table-shell ::v-deep .fixed-width .cell {
+  text-align: center;
+}
+
+.formal-table-shell ::v-deep .pagination-container {
+  padding: 16px 20px 0;
 }
 
 .upload-result {
@@ -385,4 +469,18 @@ export default {
   font-weight: 600;
   color: #303133;
 }
+
+::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>