web登录注册修改

schoolNewsWeb/src/views/user/resource-center/SearchView.vue

@@ -25,23 +25,19 @@
 
         <!-- 搜索框 -->
         <div class="header-search">
-          <el-input
-            v-model="localSearchKeyword"
-            placeholder="搜索文章和课程内容"
-            class="search-input"
-            @keyup.enter="handleSearch"
-          >
-            <template #suffix>
-              <el-button 
-                type="primary" 
-                :icon="Search" 
-                @click="handleSearch"
-                class="search-button"
-              >
-                搜索
-              </el-button>
-            </template>
-          </el-input>
+          <div class="search-box">
+            <input
+              v-model="localSearchKeyword"
+              type="text"
+              placeholder="搜索文章和课程内容"
+              @keyup.enter="handleSearch"
+            />
+            <div class="search-button" @click="handleSearch">
+              <el-icon>
+                <Search />
+              </el-icon>
+            </div>
+          </div>
         </div>
       </div>
 
@@ -438,19 +434,20 @@ onMounted(() => {
 .back-button {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
   padding: 8px 16px;
-  background: #f5f7fa;
-  border: none;
-  border-radius: 4px;
-  color: #606266;
-  cursor: pointer;
-  transition: all 0.3s;
+  background: #F9FAFB;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
   font-size: 14px;
+  color: #4A5565;
+  cursor: pointer;
+  transition: all 0.2s;
 
   &:hover {
-    background: #e4e7ed;
-    color: #409eff;
+    background: #F3F4F6;
+    color: #E7000B;
+    border-color: #E7000B;
   }
 }
 
@@ -486,21 +483,55 @@ onMounted(() => {
 
 .header-search {
   width: 400px;
+}
 
-  .search-input {
-    :deep(.el-input__wrapper) {
-      border-radius: 24px;
-      padding-right: 0;
-    }
+.search-box {
+  position: relative;
+  width: 100%;
+  height: 40px;
+  background: #FFFFFF;
+  border: 1px solid rgba(186, 192, 204, 0.5);
+  border-radius: 30px;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
 
-    :deep(.el-input__suffix) {
-      margin-right: 4px;
+  input {
+    flex: 1;
+    height: 100%;
+    padding: 0 90px 0 20px;
+    border: none;
+    outline: none;
+    font-family: "Source Han Sans SC";
+    font-size: 14px;
+    color: #141F38;
+
+    &::placeholder {
+      color: rgba(0, 0, 0, 0.3);
     }
   }
 
   .search-button {
-    border-radius: 20px;
-    padding: 8px 24px;
+    position: absolute;
+    right: 0;
+    width: 60px;
+    height: 100%;
+    background: #C62828;
+    border-radius: 0 30px 30px 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: background 0.3s;
+    color: white;
+
+    &:hover {
+      background: #B71C1C;
+    }
+
+    .el-icon {
+      font-size: 18px;
+    }
   }
 }