diff --git a/src/pages/preview/search/search/components/list.tsx b/src/pages/preview/search/search/components/list.tsx
index 88c0e32..b2be759 100644
--- a/src/pages/preview/search/search/components/list.tsx
+++ b/src/pages/preview/search/search/components/list.tsx
@@ -4,17 +4,17 @@ import styles from './list.module.scss'
 import Taro from "@tarojs/taro";
 import Empty from "@/components/empty/empty";
 import Img from "@/components/image/image";
-import { SearchApi } from "@/api/search";
-import { AtLoadMore } from 'taro-ui'
+import {SearchApi} from "@/api/search";
+import {AtLoadMore} from 'taro-ui'
 import {rfc33392time} from "@/utils/day";
 import play from "@/static/img/play.png";
 
 type Props = {
-  name:string
-  clear:boolean
+  name: string
+  clear: boolean
 }
-const SearchList: FC<Props> = ({name,clear}) => {
-  console.log(name,'name')
+const SearchList: FC<Props> = ({name, clear}) => {
+  console.log(name, 'name')
   const globalData = Taro.getApp().globalData
   const [page, setPage] = useState(1)
   const [brands, setBrands] = useState<any[]>([])
@@ -22,31 +22,31 @@ const SearchList: FC<Props> = ({name,clear}) => {
   const [text, setText] = useState('')
   const [loading, setLoading] = useState(true)
 
-  useEffect(()=>{
-    if(!clear){
+  useEffect(() => {
+    if (!clear) {
       setBrands([])
       setLoading(true)
     }
-  },[clear])
+  }, [clear])
   useEffect(() => {
-    if(name && clear){
+    if (name && clear) {
       getData()
     }
-  }, [page,name,clear])
+  }, [page, name, clear])
 
   const getData = useCallback(async () => {
     try {
-      const data = await SearchApi.list(page, 10,name)
+      const data = await SearchApi.list(page, 10, name)
       if (page === 1) {
         if (data.data.length < 10) {
-          setText('没有更多了~')
+          setText('没有更多了')
         } else {
-          setText('上拉加载更多~')
+          setText('上拉加载更多')
         }
         setBrands([
           ...data.data
         ])
-      }else{
+      } else {
         setBrands([
           ...brands,
           ...data.data
@@ -57,13 +57,13 @@ const SearchList: FC<Props> = ({name,clear}) => {
     } catch (e) {
     }
     setLoading(false)
-  }, [page,name])
+  }, [page, name])
 
 
-  function jumpInfo(id: number,type:string,health:any) {
-    console.log(type,'type')
+  function jumpInfo(id: number, type: string, health: any) {
+    console.log(type, 'type')
     let url = ''
-    switch (type){
+    switch (type) {
       case 'brand':
         url = '/pages/preview/brand/info/info';
         break;
@@ -74,7 +74,7 @@ const SearchList: FC<Props> = ({name,clear}) => {
         url = '/pages/preview/illness/article/article'
         break
       case 'video_records':
-        return  Taro.navigateTo({url: `/pages/preview/videoFull/videoFull?url=${health.resources.url}&poster=${health.url_path}&title=${health.title}`})
+        return Taro.navigateTo({url: `/pages/preview/videoFull/videoFull?url=${health.resources.url}&poster=${health.url_path}&title=${health.title}`})
       case 'courses':
         url = '/pages/business/videoInfo/videoInfo'
         break
@@ -83,13 +83,13 @@ const SearchList: FC<Props> = ({name,clear}) => {
 
   }
 
-  function onScrollToLower(){
-      if (brands?.length < total) {
-        setPage(page + 1)
-        getData().then()
-      } else {
-        setText('没有更多了~')
-      }
+  function onScrollToLower() {
+    if (brands?.length < total) {
+      setPage(page + 1)
+      getData().then()
+    } else {
+      setText('没有更多了')
+    }
   }
 
   return (
@@ -97,68 +97,70 @@ const SearchList: FC<Props> = ({name,clear}) => {
       className='scrollview'
       scrollY
       scrollWithAnimation
-      style={{height:`${globalData.windowHeight-140}px`,backgroundColor:`#f5f5f5`}}
+      style={{height: `${globalData.pageHeight - 20}px`, backgroundColor: `#f5f5f5`}}
       onScrollToLower={onScrollToLower}
     >
-      { loading && <AtLoadMore status={'loading'}/>}
+      {loading && <AtLoadMore status={'loading'}/>}
       {
         brands.length >= 1 && !loading &&
-          <>
-            {brands.map((d) =>
-              <View onClick={() => jumpInfo(d.data.id,d.data.table,d.data['@data'])} className={styles.box} key={d.data.id}>
-                {
-                  d.data.table === 'brand' &&
-                  <>
-                    <Img width={128} height={128} src={d.data['@data'].logo} mode='aspectFill' className={styles.image}/>
-                    <View className={styles.rightBox}>
-                      <View className='font-weight mb-2 font-28'>{d.data.title}</View>
-                      <View className={styles.desc}>{d.data.content || '暂无品牌简介'}</View>
-                    </View>
-                  </>
-                }
-                {
-                  d.data.table === 'article' &&
-                  <>
-                    <View className={styles.articleLeftBox}>
-                      <View className='font-weight mb-2 font-28 lh-40'>{d.data['@data'].title}</View>
-                      <View className={styles.desc}>{rfc33392time(d.data['@data'].created_at)} {d.data['@data'].page_view}阅读</View>
-                    </View>
-                    <Img width={172} height={128} src={d.data['@data'].logo} mode='aspectFill' className={styles.image}/>
-                  </>
-                }
-                {
-                  d.data.table === 'video_records' &&
-                  <>
-                    <Img width={192} height={192} src={d.data['@data'].url_path} mode='aspectFill' className={styles.image}/>
-                    <Image src={play} className={styles.play} mode='aspectFit'/>
-                    <View className={styles.videoRightBox}>
-                      <View className='font-weight mb-2 font-28 lh-40'>{d.data['@data'].title}</View>
-                      <View className={styles.desc}>{d.data['@data'].introduction}</View>
-                      <View className={`${styles.desc} mt-2`}>播放量: {d.data['@data'].video_view}</View>
-                    </View>
-                  </>
-                }
-                {
-                  d.data.table === 'courses' &&
-                  <>
-                    <Img width={192} height={138} src={d.data['@data'].thumb} mode='aspectFill' className={styles.image}/>
-                    <View className={styles.articleLeftBox}>
-                      <View className='font-weight mb-2 font-28 lh-40'>{d.data['@data'].title}</View>
-                      <View className={styles.desc}>课时:{d.data['@data'].class_hour}节   销量：{d.data['@data'].charge}</View>
-                    </View>
-                  </>
-                }
-
-
+        <>
+          {brands.map((d) =>
+            <View onClick={() => jumpInfo(d.data.id, d.data.table, d.data['@data'])} className={styles.box}
+                  key={d.data.id}>
+              {
+                d.data.table === 'brand' &&
+                <>
+                  <Img width={128} height={128} src={d.data['@data'].logo} mode='aspectFill' className={styles.image}/>
+                  <View className={styles.rightBox}>
+                    <View className='font-weight mb-2 font-28'>{d.data.title}</View>
+                    <View className={styles.desc}>{d.data.content || '暂无品牌简介'}</View>
+                  </View>
+                </>
+              }
+              {
+                d.data.table === 'article' &&
+                <>
+                  <View className={styles.articleLeftBox}>
+                    <View className='font-weight mb-2 font-28 lh-40'>{d.data['@data'].title}</View>
+                    <View
+                      className={styles.desc}>{rfc33392time(d.data['@data'].created_at)} {d.data['@data'].page_view}阅读</View>
+                  </View>
+                  <Img width={172} height={128} src={d.data['@data'].logo} mode='aspectFill' className={styles.image}/>
+                </>
+              }
+              {
+                d.data.table === 'video_records' &&
+                <>
+                  <Img width={192} height={192} src={d.data['@data'].url_path} mode='aspectFill'
+                       className={styles.image}/>
+                  <Image src={play} className={styles.play} mode='aspectFit'/>
+                  <View className={styles.videoRightBox}>
+                    <View className='font-weight mb-2 font-28 lh-40'>{d.data['@data'].title}</View>
+                    <View className={styles.desc}>{d.data['@data'].introduction}</View>
+                    <View className={`${styles.desc} mt-2`}>播放量: {d.data['@data'].video_view}</View>
+                  </View>
+                </>
+              }
+              {
+                d.data.table === 'courses' &&
+                <>
+                  <Img width={192} height={138} src={d.data['@data'].thumb} mode='aspectFill' className={styles.image}/>
+                  <View className={styles.articleLeftBox}>
+                    <View className='font-weight mb-2 font-28 lh-40'>{d.data['@data'].title}</View>
+                    <View className={styles.desc}>课时:{d.data['@data'].class_hour}节
+                      销量：{d.data['@data'].charge}</View>
+                  </View>
+                </>
+              }
 
 
-              </View>
-            )
-            }
-            <View style={{width: '750rpx', textAlign: 'center', color: '#999'}} className="font-28 mt-3 mb-3">{text}</View>
-          </>
+            </View>
+          )
+          }
+          <View className='text-center font-24 text-dark mt-3'>{text}</View>
+        </>
       }
-      { !loading && brands.length === 0 && <Empty name='空空如也'/>}
+      {!loading && brands.length === 0 && <Empty name='空空如也'/>}
     </ScrollView>
   )
 }
diff --git a/src/pages/preview/search/search/index.module.scss b/src/pages/preview/search/search/index.module.scss
index 88d34c3..3ead51e 100644
--- a/src/pages/preview/search/search/index.module.scss
+++ b/src/pages/preview/search/search/index.module.scss
@@ -1,46 +1,58 @@
-page{
-  background-color:#F2F8F6;
+page {
+  background-color: #F2F8F6;
 
-  .navBox{
-    position: fixed;
-    width:750rpx;
+  .searchHeader {
+    margin-top: 10px;
+    padding: 0 20rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    transition: all 200ms;
+    position: sticky;
+    z-index: 200 ;
+    overflow: hidden;
   }
-  .searchBox{
-    width: 690rpx;
+
+  .searchBox {
+    flex: 1;
     height: 68rpx;
     background: #FFFFFF;
-    border-radius: 32rpx 32rpx 32rpx 32rpx;
+    border-radius: 32rpx;
     box-sizing: border-box;
     display: flex;
     align-items: center;
-    padding:0 24rpx;
-    .input{
+    padding: 0 24rpx;
+
+    .input {
       font-size: 28rpx;
-      font-weight: 500;
-      margin-left: 24rpx;
-      flex:1;
+      margin-left: 20rpx;
+      flex: 1;
     }
   }
-  .titleBox{
-    margin-top: 60rpx;
+
+  .titleBox {
+    margin-top: 40rpx;
     width: 100%;
     display: flex;
     box-sizing: border-box;
     padding-right: 30rpx;
     justify-content: space-between;
-    .title{
-      font-size: 28rpx;
+
+    .title {
+      font-size: 30rpx;
       font-weight: bold;
       color: #323635;
     }
   }
-  .contentBox{
+
+  .contentBox {
     display: flex;
     flex-wrap: wrap;
-    .items{
+
+    .items {
       display: inline-block;
       background: #FFFFFF;
-      border-radius:32rpx;
+      border-radius: 32rpx;
       padding: 10rpx 24rpx;
       font-size: 24rpx;
       font-weight: 500;
diff --git a/src/pages/preview/search/search/index.tsx b/src/pages/preview/search/search/index.tsx
index 4641474..f68dbaa 100644
--- a/src/pages/preview/search/search/index.tsx
+++ b/src/pages/preview/search/search/index.tsx
@@ -1,110 +1,121 @@
-import {Input, View, Text, PageContainer} from "@tarojs/components";
-import {FC, useEffect, useState} from "react";
-import { AtIcon } from 'taro-ui'
+import {Input, View, Text, PageContainer, Image} from "@tarojs/components";
+import {FC, useEffect, useMemo, useState} from "react";
 import styles from './index.module.scss'
 import Taro from "@tarojs/taro";
-import { useReady, useDidShow } from '@tarojs/taro'
+import {useDidShow} from '@tarojs/taro'
 import SearchList from './components/list'
+import NavigationBar from "@/components/navigationBar/navigationBar";
+import search from '@/static/img/search.png'
+import del from '@/static/img/del.png'
 
 
-const Search:FC = () => {
-  const globalData = Taro.getApp().globalData
+const Search: FC = () => {
   const [value, setValue] = useState('')
   const [recentSearch, setRecentSearch] = useState<string[]>([])
-  const [hotSearch,setHotSearch] = useState<any[]>([])
+  const [hotSearch] = useState<any[]>([])
   const [show, setShow] = useState(false)
+  const [focus, setFocus] = useState(false)
 
-  useReady(()=>{
-    console.log('onReady')
-  })
-  useDidShow(()=>{
-    getRecentSearch()
-  })
 
-  useEffect(()=>{
-    if(!show){
-      getRecentSearch()
-    }
-  },[show])
+  useDidShow(getRecentSearch)
 
-  function inpFn(e){
+  useEffect(() => {
+    !show && getRecentSearch()
+  }, [show])
+
+  function inpFn(e) {
     setValue(e.detail.value)
   }
 
-  function clearSearch(){
+  function clearSearch() {
     Taro.removeStorageSync('recentSearch')
     getRecentSearch()
+    Taro.showToast({title: '删除成功'})
   }
 
-  function getRecentSearch () {
+  function getRecentSearch() {
     setRecentSearch(Taro.getStorageSync('recentSearch'))
   }
+
   function getSearchItem(value) {
     setValue(value)
-    // Taro.navigateTo({
-    //   url:`/pages/preview/search/list/index?name=${value}`
-    // })
     setShow(true)
   }
 
- function searchInput(){
-   if (value === "") return;
-   getSearchItem(value)
-   //记录最近搜索
-   let recentSearch = Taro.getStorageSync('recentSearch') || [];
-   recentSearch.unshift(value);
-   Taro.setStorageSync('recentSearch', [...new Set(recentSearch)])
- }
+  function searchInput() {
+    if (value === "") return;
+    getSearchItem(value)
+    //记录最近搜索
+    let recentSearch = Taro.getStorageSync('recentSearch') || [];
+    recentSearch.unshift(value);
+    Taro.setStorageSync('recentSearch', [...new Set(recentSearch)])
+  }
 
- function navBack(){
-    Taro.navigateBack()
- }
+  function cancelSearch(){
+    setValue('')
+    setShow(false)
+    setFocus(false)
+  }
+
+
+  const searchStyles = useMemo((): React.CSSProperties | undefined => {
+    if (focus || show) {
+      return {
+        transform: "translateY(-43px)",
+        width: "70%",
+      }
+    }
+  }, [focus, show])
 
 
   return (
     <View className="flex flex-column">
-        <View className={styles.navBox} style={{height:`${globalData.statusBarHeight+globalData.textBarHeight}px`}}>
-          <View style={{height:`${globalData.statusBarHeight}px`}}></View>
-          <View  style={{height:`${globalData.textBarHeight}px`,display:'flex',alignItems:'center'}}>
-            <View className="flex justify-end" style={{width:'40px'}}>
-              <AtIcon value='chevron-left' size='25' color='#333' onClick={navBack}></AtIcon>
-            </View>
-            <View className="font-28 font-weight flex-1" style={{display:'flex',justifyContent:'center',paddingRight:'40px',boxSizing:'border-box'}}>搜索</View>
-          </View>
-        </View>
-
-        <View style={{paddingLeft: '30rpx'}}>
-        <View style={{height:`${globalData.statusBarHeight+globalData.textBarHeight}px`}}></View>
+      <NavigationBar text='搜索'/>
+      <View className={styles.searchHeader} style={searchStyles}>
         <View className={styles.searchBox}>
-          <AtIcon value='search' size='20' color='#ccc'></AtIcon>
-          { show ?
-            <Text className={styles.input} >{value}</Text>:
-            <Input className={styles.input} placeholder="输入关键字搜索" type={'text'} confirmType={'search'} onInput={inpFn} onConfirm={searchInput} />
-          }
+          <Image src={search} style={{width: '32rpx', height: '32rpx'}} mode='widthFix'/>
+          <Input
+            onFocus={() => setFocus(true)}
+            onBlur={() => setFocus(false)}
+            className={styles.input}
+            placeholder={(focus || show) ? '' : "输入关键字搜索"}
+            type='text'
+            value={value}
+            confirmType='search'
+            onInput={inpFn}
+            onConfirm={searchInput}/>
+
         </View>
+        {focus || show ? <View className='px-2 text-dark' onClick={cancelSearch}>取消</View> : null}
+      </View>
+
 
       {
         recentSearch.length >= 1 && !show &&
-        <>
-          <View className={styles.titleBox} >
+        <View className='px-2'>
+          <View className={styles.titleBox}>
             <Text className={styles.title}>最近搜索</Text>
-            <AtIcon onClick={clearSearch} value='trash' size='16' color='#909795'></AtIcon>
+            <Image
+              src={del}
+              mode='widthFix'
+              style={{width: '16px', height: '16px', padding: '0 20rpx'}}
+              onClick={clearSearch}/>
           </View>
-            <View className={styles.contentBox}>
-              {
-                recentSearch.length &&
-                recentSearch?.map(d =>
-                  <View className={styles.items}>
-                    <View onClick={()=>{getSearchItem(d)}} className="font-28" >{d}</View>
-                  </View>)
-              }
-            </View>
-        </>
+          <View className={styles.contentBox}>
+            {
+              recentSearch.length > 0 &&
+              recentSearch?.map(d =>
+                <View className={styles.items}>
+                  <View onClick={() => getSearchItem(d)} className="font-28">{d}</View>
+                </View>)
+            }
+          </View>
+        </View>
       }
       {
         hotSearch.length >= 1 && !show &&
         <>
-          <View className={`flex justify-between ${styles.titleBox}`} >
+          <View className={`flex justify-between ${styles.titleBox}`}>
 
             <Text className="font-32 fwb">热门搜索</Text>
           </View>
@@ -114,7 +125,9 @@ const Search:FC = () => {
                 hotSearch.length &&
                 hotSearch.map(d =>
                   <View className="py-1 px-2 rounded-40 mr-2 mb-2 bg-warning text-white">
-                    <View onClick={()=>{getSearchItem(d)}} className="font-28" >{d}</View>
+                    <View onClick={() => {
+                      getSearchItem(d)
+                    }} className="font-28">{d}</View>
                   </View>)
               }
             </View>
@@ -122,11 +135,15 @@ const Search:FC = () => {
         </>
       }
 
-      <PageContainer onBeforeLeave={() => {setShow(false)}}  onClickOverlay={()=>{ setShow(false)}} show={show} round={true} overlay={true} overlayStyle={'background:rgba(0,0,0,0)'} >
-        <SearchList name={value} clear={show} />
+      <PageContainer
+        onBeforeLeave={cancelSearch}
+        onClickOverlay={cancelSearch}
+        show={show}
+        round
+        overlay
+        overlayStyle={'background:rgba(0,0,0,0)'}>
+        <SearchList name={value} clear={show}/>
       </PageContainer>
-        </View>
-
     </View>
   )
 }