diff --git a/src/App.vue b/src/App.vue
index b1417fa..19940c9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -40,7 +40,9 @@ const restoreMenuInteraction = () => {
 
 <template>
   <HeaderNav></HeaderNav>
-  <router-view :key="`${$route.fullPath}-${routerUpdateKey}`"></router-view>
+  <div style="min-height: 800px">
+    <router-view :key="`${$route.fullPath}-${routerUpdateKey}`"></router-view>
+  </div>
   <Footer></Footer>
 </template>
 
diff --git a/src/assets/img/search1.png b/src/assets/img/search1.png
new file mode 100644
index 0000000..d475a41
Binary files /dev/null and b/src/assets/img/search1.png differ
diff --git a/src/assets/img/searchSvg.svg b/src/assets/img/searchSvg.svg
new file mode 100644
index 0000000..58e465e
--- /dev/null
+++ b/src/assets/img/searchSvg.svg
@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.0644 11.4512H2.96103C2.74829 11.4512 2.57617 11.2791 2.57617 11.0663V2.96298C2.57617 2.75024 2.74829 2.57812 2.96103 2.57812H6.31889C6.53163 2.57812 6.70374 2.75024 6.70374 2.96298C6.70374 3.17572 6.53163 3.34784 6.31889 3.34784H3.34588V10.6815H10.6795V7.72556C10.6795 7.51282 10.8516 7.34071 11.0644 7.34071C11.2771 7.34071 11.4492 7.51282 11.4492 7.72556V11.0663C11.4492 11.2791 11.2771 11.4512 11.0644 11.4512Z" fill="#666666"/>
+<path d="M12.6858 1.79922V1.79238C12.6844 1.76914 12.6803 1.74727 12.6762 1.72539C12.6762 1.72402 12.6762 1.72266 12.6749 1.72129C12.6694 1.69805 12.6625 1.67617 12.6543 1.6543V1.65293C12.6461 1.63105 12.6352 1.61055 12.6243 1.59004C12.6243 1.58867 12.6229 1.58867 12.6229 1.5873C12.612 1.56816 12.5997 1.54902 12.586 1.53125C12.5846 1.52988 12.5833 1.52715 12.5819 1.52578C12.575 1.51758 12.5696 1.51074 12.5627 1.50254C12.5627 1.50117 12.5614 1.50117 12.5614 1.4998C12.5545 1.4916 12.5477 1.48477 12.5395 1.47793L12.534 1.47246C12.5272 1.46562 12.519 1.45879 12.5122 1.45195L12.5108 1.45059C12.5026 1.44375 12.4944 1.43691 12.4848 1.43145C12.4834 1.43008 12.4807 1.42871 12.4793 1.42734C12.4602 1.41367 12.4411 1.40273 12.4206 1.3918L12.4192 1.39043C12.3973 1.37949 12.3754 1.36992 12.3522 1.36309C12.3303 1.35625 12.3071 1.34941 12.2838 1.34668C12.2825 1.34668 12.2811 1.34668 12.2797 1.34531L12.2469 1.34121H12.2428C12.2333 1.33984 12.225 1.33984 12.2155 1.33984H8.75102C8.47895 1.33984 8.25884 1.55996 8.25884 1.83203C8.25884 2.1041 8.47895 2.32422 8.75102 2.32422H11.0069L6.66606 6.66641C6.47329 6.85918 6.47329 7.1709 6.66606 7.3623C6.76177 7.45801 6.88755 7.50586 7.0147 7.50586C7.14048 7.50586 7.26626 7.45801 7.36333 7.3623L11.7028 3.02148V5.24727C11.7028 5.51934 11.9229 5.73945 12.195 5.73945C12.467 5.73945 12.6872 5.51934 12.6872 5.24727V1.8334C12.6872 1.82246 12.6872 1.81016 12.6858 1.79922Z" fill="#666666"/>
+</svg>
diff --git a/src/components/HeaderNav.vue b/src/components/HeaderNav.vue
index 2c3077e..37c8ecc 100644
--- a/src/components/HeaderNav.vue
+++ b/src/components/HeaderNav.vue
@@ -10,10 +10,8 @@ const menuKey = ref(0)
 const route=useRoute()
 // 选中逻辑
 const handleSelect = (key, keyPath) => {
-  // console.log(activeMenuIndex.value,key,keyPath)
-  if(key!=='/'){
     localStorage.setItem('activeMenu',key)
-  }
+
 }
 const loadActiveMenu=()=>{
   const savedMenu=localStorage.getItem('activeMenu')
@@ -22,7 +20,6 @@ const loadActiveMenu=()=>{
     router.push(savedMenu)
   }else{
     activeMenuIndex.value = route.path
-    router.push(savedMenu)
   }
 }
 
@@ -55,6 +52,16 @@ const openSearchMask=()=>{
     searchInputRef.value.focus()
   })
 }
+const searchEvent=()=>{
+  if(input1.value){
+    visible.value=false
+    activeMenuIndex.value=null
+    localStorage.setItem('activeMenu',route.fullPath)
+    menuKey.value += 1 //强制刷新
+    router.push({path:'/search',query:{keyword:input1.value}})
+
+  }
+}
 </script>
 
 <template>
@@ -117,6 +124,8 @@ const openSearchMask=()=>{
         placeholder="关键词搜索产品、文档、新闻"
         size="large"
         style="height:52px; font-size: 20px; width: 573px;"
+        @keyup.enter="searchEvent"
+
     ></el-input>
   </Mask>
 </template>
diff --git a/src/components/Mask.vue b/src/components/Mask.vue
index 6efbd31..4c41fbe 100644
--- a/src/components/Mask.vue
+++ b/src/components/Mask.vue
@@ -65,24 +65,16 @@ const handleClose = () => {
 }
 
 .mask-content {
-  /* 背景色 */
   background-color: #fff;
-  /* 边框圆角 */
   border-radius: 8px;
-  /* 内边距 */
   padding: 24px;
-  /* 阴影效果 */
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  /* 最大宽度 */
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
   max-width: 700px;
-  /* 最小宽度 */
   min-width: 300px;
-  /* 最大高度 */
   height: auto;
   display: inline-block;
   max-height: 80vh;
-  /* 超出内容滚动 */
-  overflow-y: auto;
+  overflow-x: auto;
   margin-top: 5%;
 }
 </style>
diff --git a/src/components/SearchResults/Classify.vue b/src/components/SearchResults/Classify.vue
new file mode 100644
index 0000000..484d81d
--- /dev/null
+++ b/src/components/SearchResults/Classify.vue
@@ -0,0 +1,49 @@
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+  // 分类列表
+  classifyList: {
+    type: Array,
+    default: () => []
+  },
+  // 当前选中的分类
+  activeClassify: {
+    type: String,
+    default: ''
+  }
+})
+</script>
+
+<template>
+  <div class="classify">
+    <p class="title">分类</p>
+    <div class="classify-item" v-for="item in classifyList" :key="item.value" :class="{'active':item.value===activeClassify}">
+      <div class="circle"></div>{{item.label}}（{{item.count}}）
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.classify{
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 268px;
+  gap: 20px;
+  .title{
+    font-weight: 500;
+    font-size: 24px;
+    line-height: 100%;
+    color: #333333;
+  }
+  .classify-item{
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 22px;
+    color: #666666;
+    display: flex;
+    align-items: center;
+  }
+}
+</style>
diff --git a/src/components/SearchResults/ResultItem.vue b/src/components/SearchResults/ResultItem.vue
new file mode 100644
index 0000000..d482c87
--- /dev/null
+++ b/src/components/SearchResults/ResultItem.vue
@@ -0,0 +1,108 @@
+<script setup>
+import { ref } from 'vue'
+
+const props=defineProps({
+  item:{
+    type:Object,
+    default:()=>{
+      return {
+        href:'',
+        url:'',
+        title:'',
+        description:'',
+        source:''
+      }
+    }
+  }
+})
+</script>
+
+<template>
+<div class="search-results-item">
+ <div class="href">
+    {{item.href}}
+ </div>
+  <el-Row :gutter="20">
+    <el-col :span="5" v-if="item.url">
+      <div class="image">
+        <img :src="item.url" alt="">
+      </div>
+    </el-col>
+    <el-col :span="19" style="flex:1 ;max-width: 100%;">
+      <div class="content">
+          <div class="title">
+            {{item.title}}
+          </div>
+          <div class="description">
+            {{item.description}}
+          </div>
+          <div class="source" >
+            <span style="margin-right: 10px">来源:</span>{{item.source}}
+            <img style="margin-left: 5px;" src="@/assets/img/searchSvg.svg" alt="">
+          </div>
+      </div>
+    </el-col>
+  </el-Row>
+</div>
+</template>
+
+<style scoped lang="less">
+.search-results-item {
+  padding: 20px 10px;
+  border-bottom: 1px solid #E3E3E3;
+
+  .href {
+    margin-bottom: 60px;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 100%;
+    color: #BDBCBC;
+
+  }
+
+  .image {
+    height: 100%;
+    background-color: #F4F6F8;
+    border-radius: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    img {
+      width: 163.13px;
+      height: 93.85px;
+    }
+  }
+  //.content{
+  //  padding:0 10px;
+  //}
+  .title {
+    font-weight: 500;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: 0.06em;
+    color: #333333;
+  }
+
+  .description {
+    font-weight: 400;
+    font-size: 15px;
+    line-height: 1.5em;
+    letter-spacing: 0.06em;
+    margin: 30px 0;
+    display: -webkit-box;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .source{
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 1;
+    color:#BDBCBC;
+    display: flex;
+    align-items: center;
+  }
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 964fa6d..09b8146 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -32,6 +32,11 @@ const router = createRouter({
       path:'/about',
       name:'about',
       component:AboutUs
+    },
+    {
+      path:'/search',
+      name:'search',
+      component:()=>import('@/views/SearchResults.vue')
     }
   ],
 })
diff --git a/src/views/SearchResults.vue b/src/views/SearchResults.vue
new file mode 100644
index 0000000..a111e1c
--- /dev/null
+++ b/src/views/SearchResults.vue
@@ -0,0 +1,115 @@
+<script setup>
+
+import {Search} from "@element-plus/icons-vue";
+import {nextTick, ref} from "vue";
+import {useRouter,useRoute} from "vue-router";
+import ResultItem from "@/components/SearchResults/ResultItem.vue";
+import img from "@/assets/img/search1.png"
+import Classify from "@/components/SearchResults/Classify.vue";
+
+const router=useRouter()
+const route=useRoute()
+
+const searchKey=ref(route.query.keyword ||localStorage.getItem('searchKey') || '')
+if(route.query.keyword){
+  localStorage.setItem('searchKey',route.query.keyword)
+}
+
+const input=ref(searchKey.value)
+const searchEvent=()=>{
+  if(input.value){
+    // 保存搜索词到本地存储
+    console.log(route)
+
+
+    localStorage.setItem('searchKey',input.value)
+
+    // 跳转到搜索结果页面并携带搜索词参数
+    router.push({
+      path:'/search',
+      query:{keyword:input.value}
+    }).then(()=>{
+      localStorage.setItem('activeMenu',route.fullPath)
+    })
+  }
+}
+
+
+//模拟数据
+const searchResults=ref([
+  {
+    href:'wwww.philisense/cn/dkoudosuoaud/sodusod/',
+    url:'',
+    title:'反馈抑制模块',
+    description:'这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。模块这是这个产品介绍内容里的介绍等文字。模块这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。模块',
+    source:'产品中心'
+  },
+  {
+    href:'wwww.philisense/cn/dkoudosuoaud/sodusod/',
+    url:img,
+    title:'反馈抑制模块',
+    description:'这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。模块这是这个产品介绍内容里的介绍等文字。模块这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。模块',
+    source:'产品中心'
+  }
+])
+const classifyList=ref([
+  {label:'全部',value:'全部',count:256},
+  {label:'核心技术',value:'产品中心',count:128},
+  {label:'产品',value:'解决方案',count:64},
+  {label:'解决方案',value:'服务交流',count:32},
+  {label:'服务交流',value:'关于我们',count:16},
+  {label:'公司&新闻',value:'关于我们',count:8},
+])
+const activeClassify=ref('全部')
+</script>
+
+<template>
+<div class="search-results">
+    <div class="title">
+      搜索结果
+    </div>
+  <div class="search-input">
+    <el-input
+        v-model="input"
+        :suffix-icon="Search"
+        placeholder="关键词搜索产品、文档、新闻"
+        size="large"
+        style="height:52px; font-size: 20px; width: 573px;"
+        @keyup.enter="searchEvent"
+    ></el-input>
+  </div>
+  <div class="search-results-list">
+      <Classify :classifyList=classifyList :activeClassify="activeClassify"></Classify>
+       <div>
+         <ResultItem v-for="item in searchResults" :key="item.href" :item="item"></ResultItem>
+      </div>
+  </div>
+
+</div>
+</template>
+
+<style scoped lang="less">
+.search-results{
+  padding: 24px;
+  background: #fff;
+  .title{
+    font-weight: 500;
+    font-size: 54px;
+    line-height: 1;
+    letter-spacing: 0.06em;
+    margin-top: 200px;
+    color: #000;
+    text-align: center;
+  }
+  .search-input{
+    margin: 40px auto;
+    width:573px ;
+  }
+  .search-results-list{
+    width: 1400px;
+    margin:auto;
+    display: flex;
+    gap: 30px;
+  }
+}
+</style>