项目列表搜索框样式修改

.env

@@ -11,4 +11,4 @@ VUE_APP_BookWebSI = '/GCLSBookWebSI/ServiceInterface'
 VUE_APP_EepServer = '/EEPServer/SI'
 
 #version
-VUE_APP_VERSION = '2026.06.15'
+VUE_APP_VERSION = '2026.06.16'

src/components/CoursewareList.vue

@@ -12,17 +12,15 @@
       </button>
 
       <div class="search-wrap">
-        <button v-if="!searchOpen" class="search-icon-btn" type="button" @click="openSearch">
-          <i class="el-icon-search"></i>
-        </button>
-        <input
-          v-else
-          ref="searchInput"
+        <el-input
           v-model.trim="searchText"
           class="search-input"
-          placeholder="输入教材名称"
-          @blur="closeSearch"
-        />
+          placeholder="搜素关键词..."
+          @keydown.enter.native="getList({ cur_page: 1 })"
+        >
+          <el-button slot="prepend" icon="el-icon-search" @click="getList({ cur_page: 1 })" />
+          <el-button slot="append" icon="el-icon-close" @click="clearSearch" />
+        </el-input>
       </div>
     </div>
 
@@ -69,7 +67,6 @@ export default {
     return {
       curStatus: this.currentStatus,
       searchText: '',
-      searchOpen: false,
     };
   },
   computed: {
@@ -87,16 +84,6 @@ export default {
       this.$emit('update:currentStatus', status);
       this.$emit('getList', { cur_page: 1, name: this.searchText });
     },
-    openSearch() {
-      this.searchOpen = true;
-      this.$nextTick(() => {
-        this.$refs.searchInput && this.$refs.searchInput.focus();
-      });
-    },
-    closeSearch() {
-      this.searchOpen = false;
-      this.$emit('getList', { cur_page: 1, name: this.searchText });
-    },
     /**
      * 获取列表数据
      * @param {Object} data - 额外的查询参数
@@ -104,6 +91,10 @@ export default {
     getList(data) {
       this.$emit('getList', { ...data, name: this.searchText });
     },
+    clearSearch() {
+      this.searchText = '';
+      this.getList({ cur_page: 1 });
+    },
   },
 };
 </script>
@@ -163,9 +154,38 @@ export default {
       padding: 0 12px;
       color: #1f2937;
       background: #fff;
-      border: 1px solid #2d3e8f;
+      border: 1px solid #fcfcfc;
       border-radius: 16px;
       outline: none;
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 15%);
+
+      :deep(.el-input__inner) {
+        background-color: #fff;
+        border: none;
+      }
+
+      .el-button {
+        background-color: #fff;
+      }
+
+      :deep(.el-input-group__prepend),
+      :deep(.el-input-group__append) {
+        color: #000;
+        background-color: #fff;
+        border: none;
+
+        .el-button {
+          padding: 8px 0;
+        }
+      }
+
+      :deep(.el-input-group__prepend) {
+        padding-right: 0;
+      }
+
+      :deep(.el-input-group__append) {
+        padding-right: 0;
+      }
     }
   }