0

public/mg/mps_school.html

@@ -15,12 +15,11 @@
         .main00 {
             width: 100%;
             height: 100vh;
-            /* 使用视口高度确保全屏 */
             min-height: 600px;
-            /* 设置最小高度 */
             background: white;
             display: flex;
             flex-direction: column;
+            overflow: hidden; /* 防止出现滚动条 */
         }
 
         .ListTop {
@@ -29,6 +28,7 @@
             background: white;
             border-bottom: 1px solid #EEEEEE;
             justify-content: flex-start;
+            flex-shrink: 0; /* 防止头部被压缩 */
         }
 
         .ListTop3 {
@@ -68,14 +68,12 @@
         .main0 {
             width: 100%;
             background: white;
-            align-items: flex-start;
-            height: calc(100vh - 60px);
-            /* 使用视口高度减去标题栏 */
-            min-height: 540px;
-            /* 600px - 60px */
+            flex: 1; /* 使用flex: 1代替固定高度 */
+            min-height: 0; /* 确保flex子项可以收缩 */
             overflow: hidden;
-            /* 防止内部滚动影响外部 */
             display: flex;
+            position: relative;
+            align-items: flex-start;
         }
 
         .school-list {
@@ -84,26 +82,29 @@
             background: #F9F9F9;
             display: flex;
             flex-direction: column;
-            align-items: flex-start;
-            height: calc(100vh - 120px);
-            /* 视口高度减去标题栏和搜索框 */
-            min-height: 480px;
-            /* 600px - 120px */
+            height: 100%;
             position: relative;
             flex-shrink: 0;
-            /* 防止flex压缩 */
         }
 
         .school-list-scrollable {
             flex: 1;
             overflow-y: auto;
             width: 100%;
+            min-height: 0; /* 确保flex子项可以收缩 */
+            display: flex;
+            flex-direction: column;
+        }
+
+        .search-box {
+            flex-shrink: 0; /* 防止搜索框被压缩 */
         }
 
         .school-detail {
             width: calc(100% - 400px);
             padding: 20px;
             overflow-y: auto;
+            margin-top: 50px;
         }
 
         .search-box {
@@ -111,12 +112,13 @@
             border-bottom: 1px solid #EEEEEE;
             background: white;
             width: 100%;
+            justify-content: center;
         }
 
         .search-input {
             width: 200px;
             height: 32px;
-            padding: 0 12px;
+            padding: 0 32px 0 12px;
             border: 1px solid #DDDDDD;
             border-radius: 4px;
             font-size: 14px;
@@ -432,6 +434,51 @@
         .toast.info {
             background: #2196F3;
         }
+        
+        /* 清空按钮样式 */
+        .clear-btn {
+            position: absolute;
+            right: 12px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 16px;
+            height: 16px;
+            background-color: #999;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: background-color 0.2s;
+        }
+        
+        .clear-btn:hover {
+            background-color: #666;
+        }
+        
+        .clear-x {
+            position: relative;
+            width: 8px;
+            height: 8px;
+        }
+        
+        .clear-x:before, .clear-x:after {
+            content: '';
+            position: absolute;
+            width: 8px;
+            height: 2px;
+            background-color: white;
+            top: 3px;
+            left: 0;
+        }
+        
+        .clear-x:before {
+            transform: rotate(45deg);
+        }
+        
+        .clear-x:after {
+            transform: rotate(-45deg);
+        }
     </style>
 </head>
 
@@ -446,8 +493,13 @@
             <!-- 左侧学校列表 -->
             <div class="school-list FlexColumn">
                 <div class="search-box FlexRow">
-                    <input type="text" class="search-input" v-model="searchText" @input="debounceSearch"
-                        @keyup.enter="searchSchools" placeholder="输入学校名称搜索...">
+                    <div style="position: relative;">
+                        <input type="text" class="search-input" v-model="searchText" @input="debounceSearch"
+                            @keyup.enter="searchSchools" placeholder="输入学校名称搜索...">
+                        <div class="clear-btn" v-show="searchText" @click="clearSearch">
+                            <span class="clear-x"></span>
+                        </div>
+                    </div>
                     <div class="btn33 btn31 btn FlexRow" @click="searchSchools">
                         <img title="搜索" alt="搜索"
                             src="https://kylx365-1253256735.file.myqcloud.com/web/universalpic_search_gray_30x30.png"
@@ -500,7 +552,9 @@
             </div>
 
             <!-- 右侧学校详情 -->
-            <div class="school-detail FlexColumn" v-if="!selectedSchool"></div>
+            <div class="school-detail FlexColumn" v-if="!selectedSchool">
+                <div style="font-size:36px;margin-top: 340px;">欢迎使用学校信息管理平台</div>
+            </div>
             <div class="school-detail FlexColumn" v-if="selectedSchool">
                 <form @submit.prevent="saveSchool">
                     <!-- 基本信息 -->
@@ -830,6 +884,11 @@
                     showToastFlag: false
                 },
                 methods: {
+                    // 清空搜索
+                    clearSearch() {
+                        this.searchText = '';
+                        this.loadDistricts();
+                    },
                     // 搜索学校
                     searchSchools() {
                         // 如果搜索框为空，恢复所有学校显示