style: 调整布局和样式以改善UI一致性和间距

- 减少主内容区域的边距以优化空间利用
- 注释掉无效的CSS规则
- 调整表单和卡片组件的间距和布局
- 统一按钮和分页组件的内边距

src/layout/components/appMain.vue

@@ -143,6 +143,6 @@ const transitionMain = defineComponent({
 }
 
 .main-content {
-  margin: 24px;
+  margin: 12px;
 }
 </style>

src/layout/components/sidebar/horizontal.vue

@@ -77,9 +77,9 @@ nextTick(() => {
   opacity: 0.45;
 }
 
-:deep(.el-sub-menu.is-active .el-sub-menu__title) {
+/* :deep(.el-sub-menu.is-active .el-sub-menu__title) {
   border-bottom: 0;
-}
+} */
 
 .logout {
   max-width: 120px;

src/views/cabinet/smart-cabinet-card/index.vue

@@ -78,12 +78,12 @@ onMounted(() => {
   <div class="main">
     <div class="float-right w-full">
       <el-form ref="formRef" :inline="true" :model="searchFormParams"
-        class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]">
+        class="search-form bg-bg_color flex w-[99/100] pl-[22px] pt-[12px]">
-        <el-form-item label="柜体名称：" prop="cabinetName">
+        <el-form-item label="" prop="cabinetName">
           <el-input v-model="searchFormParams.cabinetName" placeholder="请输入柜体名称" clearable class="!w-[200px]" />
         </el-form-item>
-        <el-form-item label="柜体类型：" prop="cabinetType">
+        <el-form-item label="" prop="cabinetType">
-          <el-select v-model="searchFormParams.cabinetType" placeholder="请选择类型" clearable class="!w-[180px]">
+          <el-select v-model="searchFormParams.cabinetType" placeholder="请选择柜体类型" clearable class="!w-[180px]">
             <el-option label="主柜" :value="0" />
             <el-option label="副柜" :value="1" />
           </el-select>
@@ -98,6 +98,8 @@ onMounted(() => {
             重置
           </el-button>
         </el-form-item>
+        <el-form-item class="space-item">
+        </el-form-item>
         <el-form-item>
           <el-button type="primary" :icon="useRenderIcon(AddFill)" @click="modalVisible = true"
             style="margin-right: 10px;">
@@ -107,7 +109,7 @@ onMounted(() => {
       </el-form>
 
       <div class="grid-container">
-        <el-row :gutter="20">
+        <el-row :gutter="12">
           <el-col v-for="(item, index) in dataList" :key="item.cabinetId" :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
             <el-card class="cabinet-card" :body-style="{ padding: '8px 20px' }">
               <div class="card-content">
@@ -143,13 +145,14 @@ onMounted(() => {
 .search-form {
   :deep(.el-form-item) {
     margin-bottom: 12px;
+    margin-right: 12px;
   }
 }
 :deep(.el-descriptions__cell) {
   padding-bottom: 1px!important;
 }
 .cabinet-card {
-  margin-bottom: 20px;
+  margin-bottom: 12px;
   min-height: 210px;
   display: flex;
   flex-direction: column;
@@ -192,20 +195,19 @@ onMounted(() => {
   }
 
   .divider {
-    margin: 10px 0px;
+    margin: 5px 0px;
   }
 
   .detail-btn {
     width: 100%;
     border: 0;
     margin-top: auto;
-    padding: 12px 0;
+    padding: 8px 0;
   }
 }
 
 .grid-container {
-  margin: 20px 0;
+  margin: 12px 0;
-  padding-bottom: 60px;
   position: relative;
 
   .el-row {
@@ -216,13 +218,18 @@ onMounted(() => {
 .pagination-wrapper {
   position: relative;
   background: var(--el-bg-color);
-  padding: 12px 12px;
+  padding: 8px 12px;
   margin-top: 20px;
   text-align: center;
 
   :deep(.el-pagination) {
     margin: 0;
-    padding: 8px 0;
+    padding: 4px 0;
   }
 }
+
+.space-item {
+  flex: 1;
+  width: 100%;
+}
 </style>