跟新样式

src/views/zf/zflb.vue

@@ -255,21 +255,21 @@ onMounted(() => {
 </script>
 
 <template>
-  <el-container class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
-    <el-button
-      type="primary"
-      @click="goBack"
-      class="relative top-1 left-28 z-50 bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white font-semibold py-3 px-6 rounded-full shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105"
-    >
-      <el-icon class="mr-1"><ArrowLeft /></el-icon>
-      返回
-    </el-button>
+  <el-container class="min-h-screen bg-gradient-to-br from-blue-50">
     <el-main class="h-full p-0">
+      <el-button
+        type="primary"
+        @click="goBack"
+        class="relative top-1 z-50 bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white font-semibold py-3 px-6 rounded-full shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105"
+      >
+        <el-icon class="mr-1"><ArrowLeft /></el-icon>
+        返回
+      </el-button>
       <!-- 主要内容区域 -->
-      <div class="py-12 px-8">
+      <div class="pt-5">
         <div class="w-full">
           <!-- 标签页导航 -->
-          <el-tabs v-model="activeTab" class="mb-8" @tab-click="handleTabClick">
+          <el-tabs v-model="activeTab" class="mb-2" @tab-click="handleTabClick">
             <el-tab-pane label="公租房" name="housing">
               <template #label>
                 <div class="flex items-center">
@@ -297,9 +297,8 @@ onMounted(() => {
           </el-tabs>
 
           <!-- 筛选条件区域 -->
-          <el-card class="mb-8 shadow-lg rounded-2xl border-0">
-            <div class="p-4">
-              <h3 class="text-lg font-semibold mb-4 text-gray-800">筛选条件</h3>
+          <el-card class="mb-4 shadow-lg rounded-2xl border-0">
+            <div>
               <el-row :gutter="24">
                 <el-col :xs="24" :sm="12" :md="6">
                   <div class="mb-4">
@@ -315,6 +314,7 @@ onMounted(() => {
                         :step="50"
                         class="flex-1"
                         controls-position="right"
+                        size="default"
                       />
                       <span class="text-gray-500">-</span>
                       <el-input-number
@@ -325,6 +325,7 @@ onMounted(() => {
                         :step="50"
                         class="flex-1"
                         controls-position="right"
+                        size="default"
                       />
                     </div>
                   </div>
@@ -343,6 +344,7 @@ onMounted(() => {
                         :step="10"
                         class="flex-1"
                         controls-position="right"
+                        size="default"
                       />
                       <span class="text-gray-500">-</span>
                       <el-input-number
@@ -353,6 +355,7 @@ onMounted(() => {
                         :step="10"
                         class="flex-1"
                         controls-position="right"
+                        size="default"
                       />
                     </div>
                   </div>
@@ -367,6 +370,7 @@ onMounted(() => {
                       :max="999"
                       class="w-full"
                       controls-position="right"
+                      size="default"
                     />
                   </div>
                 </el-col>
@@ -380,16 +384,17 @@ onMounted(() => {
                       :max="99"
                       class="w-full"
                       controls-position="right"
+                      size="default"
                     />
                   </div>
                 </el-col>
-                <el-col :xs="24" :sm="12" :md="6">
+                <el-col :xs="24" :sm="12" :md="6" style="display: flex">
                   <div class="mb-4 flex items-end">
-                    <el-button type="primary" @click="applyFilters" class="mr-2" :loading="loading">
+                    <el-button type="primary" @click="applyFilters" class="mr-2" :loading="loading" size="default">
                       <el-icon class="mr-1"><Search /></el-icon>
                       搜索
                     </el-button>
-                    <el-button @click="resetFilters">
+                    <el-button @click="resetFilters" size="default">
                       <el-icon class="mr-1"><RotateCcw /></el-icon>
                       重置
                     </el-button>
@@ -400,18 +405,18 @@ onMounted(() => {
           </el-card>
 
           <!-- 列表展示区域 -->
-          <div class="mb-6 flex justify-between items-center">
+          <div class="mb-4 flex justify-between items-center">
             <div class="text-gray-600">
               共找到
               <span class="font-semibold text-blue-600">{{ total }}</span> 个结果
             </div>
-            <el-select v-model="sortBy" placeholder="排序方式" class="w-48">
-              <el-option label="默认排序" value="default"></el-option>
-              <el-option label="租金从低到高" value="price-asc"></el-option>
-              <el-option label="租金从高到低" value="price-desc"></el-option>
-              <el-option label="面积从小到大" value="area-asc"></el-option>
-              <el-option label="面积从大到小" value="area-desc"></el-option>
-            </el-select>
+<!--            <el-select v-model="sortBy" placeholder="排序方式" class="w-48" size="default">-->
+<!--              <el-option label="默认排序" value="default"></el-option>-->
+<!--              <el-option label="租金从低到高" value="price-asc"></el-option>-->
+<!--              <el-option label="租金从高到低" value="price-desc"></el-option>-->
+<!--              <el-option label="面积从小到大" value="area-asc"></el-option>-->
+<!--              <el-option label="面积从大到小" value="area-desc"></el-option>-->
+<!--            </el-select>-->
           </div>
 
           <!-- 加载状态 -->
@@ -434,8 +439,8 @@ onMounted(() => {
               <el-card
                 class="h-full shadow-xl hover:shadow-2xl transition-all duration-300 rounded-2xl border-0 overflow-hidden group cursor-pointer"
               >
-                <div class="p-6">
-                  <div class="flex justify-between items-start mb-4">
+                <div>
+                  <div class="flex justify-between items-start">
                     <h3 class="text-xl font-bold text-gray-800">{{ item.buildingNumber }}</h3>
                     <div class="text-right">
                       <div class="text-2xl font-bold text-blue-600">{{ item.priceRange }}</div>
@@ -461,7 +466,7 @@ onMounted(() => {
                     </div>
                     <!-- 状态标签移至下方 -->
                     <div class="flex items-center pt-2">
-                      <el-tag :type="item.status === '可租' ? 'success' : 'warning'" size="small">
+                      <el-tag :type="item.status === '可租' ? 'success' : 'warning'" size="default">
                         {{ item.status }}
                       </el-tag>
                     </div>
@@ -469,7 +474,7 @@ onMounted(() => {
                   <div class="flex gap-2">
                     <el-button
                       type="primary"
-                      size="small"
+                      size="default"
                       class="w-full"
                       @click="viewDetails(item)"
                     >