样式优化

src/components/ProTable/index.vue

@@ -11,7 +11,7 @@
   />
 
   <!-- 表格 -->
-  <div class="card flex-1 mt-2">
+  <div class="card flex-1">
     <!-- 表格主体 -->
     <div>
       <slot name="table_top"></slot>
@@ -62,7 +62,7 @@
     },
     searchCol: {
       type: Object,
-      default: () => ({ xs: 1, sm: 2, md: 2, lg: 3, xl: 4 }),
+      default: () => ({ xs: 1, sm: 2, md: 2, lg: 4, xl: 5 }),
     },
     initParam: {
       type: Object,

src/styles/element.scss

@@ -23,12 +23,10 @@
 /* custom card */
 .card {
   box-sizing: border-box;
-  padding: 20px;
+  padding: 10px;
+  padding-top: 5px;
   overflow-x: hidden;
   background-color: var(--el-bg-color);
-  border: 1px solid var(--el-border-color-light);
-  border-radius: 6px;
-  box-shadow: 0 0 12px rgb(0 0 0 / 5%);
 }
 
 /* ProTable 不需要 card 样式（在组件内使用 ProTable 会使用到） */
@@ -91,7 +89,6 @@
   // table-search 表格搜索样式
   .table-search {
     padding: 18px 18px 0;
-    margin-bottom: 10px;
     .el-form {
       .el-form-item__content > * {
         width: 100%;

src/styles/main.css

@@ -15,3 +15,19 @@ body,
 .vxe-modal--container {
   max-height: 100vh;
 }
+.el-form-item__label {
+  font-size: 13px !important;
+}
+td {
+  font-size: 12px !important;
+}
+.el-input__inner {
+  height: 28px !important;
+  line-height: 28px !important;
+}
+.el-form-item {
+  margin-bottom: 10px !important;
+}
+.el-tabs__item {
+  font-size: 13px !important;
+}
\ No newline at end of file

src/views/property/case-detail/components/repairModal.vue

@@ -137,9 +137,9 @@
 <style lang="scss" scoped>
   .box-title {
     font-weight: 600;
-    font-size: 18px;
+    font-size: 16px;
     color: #000000;
-    line-height: 45px;
+    line-height: 43px;
     border-bottom: 1px solid rgba(0, 0, 0, 0.06);
     margin-bottom: 10px;
   }

src/views/property/case-detail/components/returnModal.vue

@@ -344,9 +344,9 @@
 <style lang="scss" scoped>
   .box-title {
     font-weight: 600;
-    font-size: 18px;
+    font-size: 16px;
     color: #000000;
-    line-height: 45px;
+    line-height: 43px;
     border-bottom: 1px solid rgba(0, 0, 0, 0.06);
     margin-bottom: 10px;
   }

src/views/property/case-detail/index.vue

 <template>
   <div class="card table-box">
-    <div class="navigation-box absolute z-10 right-8 w-52 rounded-md pl-10 bg-white text-sm">
-      <el-affix :offset="140" style="width: 100% !important">
+    <div class="navigation-box absolute z-10 right-8 w-32 rounded-md pl-10 bg-white text-xs">
+      <el-affix :offset="80" style="width: 100% !important">
         <div @click="anchor('baseinfo')" class="anchor-item">案人基本信息</div>
         <div @click="anchor('caserelation')" class="anchor-item">案件联系人</div>
         <div @click="anchor('casedetail')" class="anchor-item">案件明细</div>
@@ -1005,9 +1005,9 @@
   }
   .box-title {
     font-weight: 600;
-    font-size: 18px;
+    font-size: 16px;
     color: #000000;
-    line-height: 70px;
+    line-height: 43px;
     border-bottom: 1px solid rgba(0, 0, 0, 0.06);
     margin-bottom: 10px;
     margin-top: 10px;

src/views/property/case-manage/index.vue

@@ -29,7 +29,7 @@
   import { onMounted } from 'vue';
 
   const router = useRouter();
-  const onCellClick = ({ row, rowIndex }) => {
+  const onCellClick = (row) => {
     router.push({
       path: '/property/case-detail',
       query: { id: row.id }, //这里不能直接写成 query: JSON.stringify(item)
@@ -73,7 +73,19 @@
   ];
   const config = reactive({
     columns: [
-      { field: 'caseId', title: '案件ID', search: { el: 'input', labelWidth: 85 }, width: 80 },
+      { field: 'caseId', title: '案件ID', search: { el: 'input', labelWidth: 85 }, width: 190,
+        slots: {
+          default: ({ row, rowIndex }) => {
+            return (
+              <>
+                <div onClick={() => onCellClick(row)} className=" text-blue-400 underline cursor-pointer">
+                  {row.caseId}
+                </div>
+              </>
+            );
+          },
+        },
+      },
       {
         field: 'loanPlatform.name',
         title: '借款机构',
@@ -158,7 +170,7 @@
       {
         field: 'cpeDate',
         title: '分配CPE日期',
-        width: 100,
+        width: 130,
         search: {
           el: 'date-picker',
           props: { type: 'date', valueFormat: 'YYYY-MM-DD' },
@@ -238,8 +250,7 @@
           },
         },
       },
-    ],
-    onCellClick: onCellClick,
+    ]
   });
 
   const query = () => caseLRef.value?.search();

src/views/property/import/index.vue

@@ -20,7 +20,7 @@
           </el-upload>
           <!-- 进度条 -->
           <!-- <el-progress v-if="progressFlag" :percentage="loadProgress" /> -->
-          <div class="mt-2 text-sm text-gray-400"> 仅支持1个文件上传，格式为xls和xlsx </div>
+          <div class="mt-2 text-xs text-gray-400"> 仅支持1个文件上传，格式为xls和xlsx </div>
           <div class="mt-1 text-blue-500 underline cursor-pointer" @click="downloadtemplate"
             >下载模板</div
           >
@@ -39,7 +39,7 @@
           <!-- 进度条 -->
           <!-- <el-progress v-if="progressFlag" :percentage="loadProgress" /> -->
           <div
-            class="mt-2 text-sm text-blue-500 underline cursor-pointer"
+            class="mt-2 text-xs text-blue-500 underline cursor-pointer"
             v-if="checkObj.check"
             @click="openError"
             >下载检查结果</div