diff --git a/.env b/.env
index 3852d45..86e2b46 100644
--- a/.env
+++ b/.env
@@ -1,5 +1,5 @@
-TARO_APP_API=https://yjx.dev.yaojiankang.top
-#TARO_APP_API=https://mooc.yaojiankang.top
+#TARO_APP_API=https://yjx.dev.yaojiankang.top
+TARO_APP_API=https://mooc.yaojiankang.top
 #TARO_APP_API=https://shopfix.yaojiankang.top
 #TARO_APP_API=https://playedu.yaojiankang.top
 TARO_APP_LGOIN=true
diff --git a/src/api/brand.ts b/src/api/brand.ts
index fe673cc..4848853 100644
--- a/src/api/brand.ts
+++ b/src/api/brand.ts
@@ -11,12 +11,14 @@ export type BrandRecord = {
   introductory_video_resource: any
   article_count: number
   created_at: string
+  page_view:number
 }
 export type ArticleRecord = {
   title: string
   page_view: number
   created_at: string
   content: string
+  brands: BrandRecord[]
 }
 
 export const brandApi = {
diff --git a/src/app.scss b/src/app.scss
index 5f2fd71..af88b78 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -270,7 +270,7 @@
 .text-hover-danger { color: #a71d2a;}
 .text-light { color: #f8f9fa;}
 .text-hover-light { color: #cbd3da;}
-.text-dark { color: #343a40;}
+.text-dark { color: #323635;}
 .text-hover-dark{ color: #121416;}
 .text-body { color: #212529;}
 .text-muted { color: #909795;}
diff --git a/src/pages/home/components/curRecommended.tsx b/src/pages/home/components/curRecommended.tsx
index 7a638c1..95aa016 100644
--- a/src/pages/home/components/curRecommended.tsx
+++ b/src/pages/home/components/curRecommended.tsx
@@ -1,13 +1,29 @@
 import {FC, ReactNode, useEffect, useState} from "react";
 import {Image, View} from "@tarojs/components";
 import {HomeApi} from "@/api";
-import {useReachBottom} from "@tarojs/taro";
+import Taro, {useReachBottom} from "@tarojs/taro";
 import styles from "../home.module.scss";
 import VideoCover from "@/components/videoCover/videoCover";
 import courseTag from '@/static/img/courseTag.png'
 import {rfc33392time} from "@/utils/day";
 import Img from "@/components/image/image";
 
+const toArticlePage = (d: any) => {
+  console.log({d})
+  switch (d.owner_type) {
+    case 1:
+      Taro.navigateTo({
+        url: `/pages/preview/brand/article/article?id=${d.id}`
+      })
+      return
+    case 2:
+      Taro.navigateTo({
+        url: `/pages/preview/illness/article/article?id=${d.id}`
+      })
+      return
+  }
+}
+
 const CurRecommended: FC = () => {
   const [page, setPage] = useState(1)
   const [data, setData] = useState<Curriculum[]>([])
@@ -44,9 +60,9 @@ const CurRecommended: FC = () => {
       <View className="mb-5">
         <View className='text-center my-2'>推荐文章</View>
         <View className='bg-white rounded-20 clip'>
-          {articles.map((d, i) => <View className='p-3 relative'>
+          {articles.map((d, i) => <View className='p-3 relative' onClick={() =>toArticlePage(d)}>
             {i > 0 && <View className='absolute top left right divided ml-3 mr-3' />}
-            <View className="font-34 bold text-black">{d.title}</View>
+            <View className="font-34 text-black">{d.title}</View>
             {(d.intro || '').length > 40 && (<View className='flex mt-1'>
               <View className="flex-1 font-24 lh1_5">{d.intro}</View>
               {d.cover && <Img className='ml-l' width={140} height={100} src={d.cover} errorType="acquiesce" />}
diff --git a/src/pages/preview/brand/article/article.module.scss b/src/pages/preview/brand/article/article.module.scss
index e28c2e9..c6d9d5f 100644
--- a/src/pages/preview/brand/article/article.module.scss
+++ b/src/pages/preview/brand/article/article.module.scss
@@ -1,30 +1,33 @@
-.fixedBox{
+.fixedBox {
   position: fixed;
   z-index: 1000;
-  top:0;
+  top: 0;
   width: 100vw;
   height: 100vh;
   background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 1));
-  &-inner{
+
+  &-inner {
     position: absolute;
     width: 100vw;
-    top:45vh;
+    top: 45vh;
     display: flex;
     flex-direction: column;
     align-items: center;
-    &-icon{
-      image{
+
+    &-icon {
+      image {
         width: 32rpx;
         height: 32rpx;
       }
     }
-    &-box{
+
+    &-box {
       margin-top: 24rpx;
       width: 680rpx;
-      left:35rpx;
+      left: 35rpx;
       height: 76rpx;
       background-color: #45D4A8;
-      color:#fff;
+      color: #fff;
       line-height: 76rpx;
       text-align: center;
       font-size: 32rpx;
@@ -34,3 +37,18 @@
 
   }
 }
+
+.article {
+  font-size: 30rpx;
+  display: flex;
+  margin-bottom: 40rpx;
+}
+
+.articleImag {
+  border-radius: 100rpx;
+}
+
+.articleTitle {
+  font-size: 40rpx;
+  margin-bottom: 50rpx;
+}
diff --git a/src/pages/preview/brand/article/article.tsx b/src/pages/preview/brand/article/article.tsx
index 25da6a9..f8b72a6 100644
--- a/src/pages/preview/brand/article/article.tsx
+++ b/src/pages/preview/brand/article/article.tsx
@@ -2,12 +2,14 @@ import {FC, useCallback, useEffect, useMemo, useState} from "react";
 import {Image, Text, View} from "@tarojs/components";
 import Taro, {useRouter} from "@tarojs/taro";
 import {ArticleRecord, brandApi} from "@/api";
-import styles from "@/pages/preview/illness/article/article.module.scss";
+import styles from "./article.module.scss";
 import down from "@/static/img/doubleDown.png";
 import {Profile} from "@/store";
 import {parse} from "@/utils/marked/marked";
 import Empty from "@/components/empty/empty";
 import Spin from "@/components/spinner";
+import {beforeTime} from "@/utils/time";
+import Img from "@/components/image/image";
 
 
 const article: FC = () => {
@@ -25,8 +27,8 @@ const article: FC = () => {
       const query = Taro.createSelectorQuery()
       query.select('#childrenNode').boundingClientRect((res) => {
         if (!Array.isArray(res)) {
-            console.log({childrenNode: res})
-            setUltra(pageHeight * .45 <= res.height)
+          console.log({childrenNode: res})
+          setUltra(pageHeight * .45 <= res.height)
         }
       }).exec()
     }, 300)
@@ -59,8 +61,25 @@ const article: FC = () => {
           overflow: !token ? 'hidden' : 'auto'
         }}>
           <View id="childrenNode">
+            <View className={styles.articleTitle}>{articleInfo?.title}</View>
             {
-              children.length > 0 ? children : <Empty name='暂无数据'/>
+              children.length > 0 ?
+                <View>
+                  {
+                    articleInfo?.brands.map(d => <View className={styles.article}>
+                      <Img src={d.logo} width={80} height={80} className={styles.articleImag}/>
+                      <View className='ml-2'>
+                        <View>{d?.name}</View>
+                        <View className='flex mt-1 text-muted font-24'>
+                          <View className='mr-2'>{beforeTime(articleInfo?.created_at)} . </View>
+                          <View>阅读 {articleInfo.page_view || 1}</View>
+                        </View>
+                      </View>
+                    </View>)
+                  }
+                  {children}
+                </View>
+                : <Empty name='暂无数据'/>
             }
           </View>
         </View>
@@ -71,9 +90,8 @@ const article: FC = () => {
               <View className={styles['fixedBox-inner-icon']}>
                 <Image src={down}/>
               </View>
-              <View className={styles['fixedBox-inner-box']} onClick={() => {
-                Taro.navigateTo({url: '/pages/login/login'})
-              }}>
+              <View className={styles['fixedBox-inner-box']}
+                    onClick={() => Taro.navigateTo({url: '/pages/login/login'})}>
                 <Text>登录查看更多内容</Text>
               </View>
             </View>
diff --git a/src/pages/preview/illness/article/article.module.scss b/src/pages/preview/illness/article/article.module.scss
index 6b00ae0..1fbc3f1 100644
--- a/src/pages/preview/illness/article/article.module.scss
+++ b/src/pages/preview/illness/article/article.module.scss
@@ -1,4 +1,4 @@
-.botmBox{
+.botmBox {
   z-index: 99;
   position: fixed;
   bottom: 0;
@@ -10,7 +10,8 @@
   justify-content: center;
   align-items: center;
   background: #F5F8F7;
-  view{
+
+  view {
     width: 560rpx;
     height: 76rpx;
     background: #45D4A8;
@@ -22,33 +23,37 @@
     line-height: 76rpx;
   }
 }
-.fixedBox{
+
+.fixedBox {
   position: fixed;
   z-index: 100;
-  top:0;
+  top: 0;
   width: 100vw;
   height: 100vh;
   background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 1));
-  &-inner{
+
+  &-inner {
     position: absolute;
     width: 100vw;
-    top:45vh;
+    top: 45vh;
     display: flex;
     flex-direction: column;
     align-items: center;
-    &-icon{
-      image{
+
+    &-icon {
+      image {
         width: 32rpx;
         height: 32rpx;
       }
     }
-    &-box{
+
+    &-box {
       margin-top: 24rpx;
       width: 680rpx;
-      left:35rpx;
+      left: 35rpx;
       height: 76rpx;
       background-color: #45D4A8;
-      color:#fff;
+      color: #fff;
       line-height: 76rpx;
       text-align: center;
       font-size: 32rpx;
@@ -58,3 +63,19 @@
 
   }
 }
+
+
+.article {
+  font-size: 30rpx;
+  display: flex;
+  margin-bottom: 40rpx;
+}
+
+.articleImag {
+  border-radius: 100rpx;
+}
+
+.articleTitle {
+  font-size: 40rpx;
+  margin-bottom: 50rpx;
+}
diff --git a/src/pages/preview/illness/article/article.tsx b/src/pages/preview/illness/article/article.tsx
index ba0e38e..172a5c1 100644
--- a/src/pages/preview/illness/article/article.tsx
+++ b/src/pages/preview/illness/article/article.tsx
@@ -6,7 +6,8 @@ import styles from './article.module.scss'
 import down from '@/static/img/doubleDown.png'
 import {Profile} from "@/store";
 import {parse} from "@/utils/marked/marked";
-import {formatDate} from "@/utils/time";
+import {beforeTime} from "@/utils/time";
+import Img from "@/components/image/image";
 
 const article: FC = () => {
   const {token} = Profile.useContainer()
@@ -58,9 +59,20 @@ const article: FC = () => {
           height: !token ? Taro.getWindowInfo().windowHeight - 60 + 'px' : 'auto',
           overflow: !token ? 'hidden' : 'auto'
         }}>
-          <View className='text-center'>
-            <View className='font-50 font-weight '>{articleInfo?.title}</View>
-            <View className='mt-2'>{formatDate(new Date(articleInfo?.created_at || 0), "YY-mm-dd hh:mm:dd")}</View>
+          <View>
+            <View className={styles.articleTitle}>{articleInfo?.title}</View>
+            {
+              articleInfo?.brands.map(d => <View className={styles.article}>
+                <Img src={d.logo} width={80} height={80} className={styles.articleImag} errorType="avatar"/>
+                <View className='ml-2'>
+                  <View>{d?.name}</View>
+                  <View className='flex mt-1 text-muted font-24'>
+                    <View className='mr-2'>{beforeTime(articleInfo?.created_at)} . </View>
+                    <View>阅读 {articleInfo.page_view || 1}</View>
+                  </View>
+                </View>
+              </View>)
+            }
           </View>
           <View></View>
           {children}
@@ -93,11 +105,9 @@ const article: FC = () => {
             }
           </View>
         </PageContainer>
-
       </>
     )
   }
-
   return helloWorld()
 }
 export default article
diff --git a/src/pages/preview/search/search/components/list.tsx b/src/pages/preview/search/search/components/list.tsx
index e99f42a..d07e620 100644
--- a/src/pages/preview/search/search/components/list.tsx
+++ b/src/pages/preview/search/search/components/list.tsx
@@ -4,17 +4,16 @@ 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}) => {
   const globalData = Taro.getApp().globalData
   const [page, setPage] = useState(1)
   const [brands, setBrands] = useState<any[]>([])
@@ -22,21 +21,21 @@ 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('没有更多了~')
@@ -46,7 +45,7 @@ const SearchList: FC<Props> = ({name,clear}) => {
         setBrands([
           ...data.data
         ])
-      }else{
+      } else {
         setBrands([
           ...brands,
           ...data.data
@@ -57,13 +56,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 +73,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 +82,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 +96,71 @@ const SearchList: FC<Props> = ({name,clear}) => {
       className='scrollview'
       scrollY
       scrollWithAnimation
-      style={{height:`${globalData.windowHeight-60}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 style={{width: '750rpx', textAlign: 'center', color: '#999'}}
+                className="font-28 mt-3 mb-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.config.ts b/src/pages/preview/search/search/index.config.ts
index 4fdde3a..0b7d560 100644
--- a/src/pages/preview/search/search/index.config.ts
+++ b/src/pages/preview/search/search/index.config.ts
@@ -1,5 +1,6 @@
 export default definePageConfig({
   navigationBarTitleText: '搜索',
-  navigationBarBackgroundColor:'#F2F8F6',
-  onReachBottomDistance: 50
+  navigationBarBackgroundColor: '#F2F8F6',
+  onReachBottomDistance: 50,
+  navigationStyle: 'custom',
 })
diff --git a/src/pages/preview/search/search/index.module.scss b/src/pages/preview/search/search/index.module.scss
index 9dddadd..fb4571b 100644
--- a/src/pages/preview/search/search/index.module.scss
+++ b/src/pages/preview/search/search/index.module.scss
@@ -1,42 +1,58 @@
-page{
-  background-color:#F2F8F6;
-  padding-left: 30rpx;
-  .searchBox{
-    width: 690rpx;
+page {
+  background-color: #F2F8F6;
+
+  .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 {
+    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{
+
+  .titleBox {
     margin-top: 60rpx;
     width: 100%;
     display: flex;
     box-sizing: border-box;
     padding-right: 30rpx;
     justify-content: space-between;
-    .title{
+
+    .title {
       font-size: 28rpx;
       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 554655f..a854d64 100644
--- a/src/pages/preview/search/search/index.tsx
+++ b/src/pages/preview/search/search/index.tsx
@@ -1,116 +1,136 @@
-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 React, {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 search from '@/static/img/search.png'
+import NavigationBar from "@/components/navigationBar/navigationBar";
+import del from '@/static/img/del.png'
 
 
-const Search:FC = () => {
+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()
-  })
+  useDidShow(getRecentSearch)
 
-  useEffect(()=>{
-    if(!show){
+  useEffect(() => {
+    if (!show) {
       getRecentSearch()
     }
-  },[show])
+  }, [show])
 
-  function inpFn(e){
+  function inpFn(e) {
     setValue(e.detail.value)
   }
 
-  function clearSearch(){
+  function clearSearch() {
     Taro.removeStorageSync('recentSearch')
     getRecentSearch()
   }
 
-  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)])
+  }
 
+  const searchStyles = useMemo((): React.CSSProperties | undefined => {
+    if (focus || show) {
+      return {
+        transform: "translateY(-43px)",
+        width: "70%",
+      }
+    }
+  }, [focus, show])
 
   return (
-    <View className="flex flex-column">
+    <>
+      <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'
+            confirmType='search'
+            onInput={inpFn}
+            onConfirm={searchInput}/>
+
         </View>
+        {focus || show ? <View className='px-2 text-dark' onClick={() => setShow(false)}>取消</View> : null}
+      </View>
 
-      {
-        recentSearch.length >= 1 && !show &&
-        <>
-          <View className={styles.titleBox} >
-            <Text className={styles.title}>最近搜索</Text>
-            <AtIcon onClick={clearSearch} value='trash' size='16' color='#909795'></AtIcon>
-          </View>
+      <View className="flex flex-column px-2">
+        {
+          recentSearch.length >= 1 && !show &&
+          <>
+            <View className={styles.titleBox}>
+              <Text className={styles.title}>搜索历史</Text>
+              <Image src={del} mode='widthFix' style={{width: '16px'}} 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>)
+                recentSearch?.map(d => <View className={styles.items}>
+                  <View onClick={() => getSearchItem(d)} className="font-28">{d}</View>
+                </View>)
               }
             </View>
-        </>
-      }
-      {
-        hotSearch.length >= 1 && !show &&
-        <>
-          <View className={`flex justify-between ${styles.titleBox}`} >
-
-            <Text className="font-32 fwb">热门搜索</Text>
-          </View>
-          <View className="wid100 pt-3 pl-3 box-b">
-            <View className="wid100 flex flex-wrap">
-              {
-                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>)
-              }
+          </>
+        }
+        {
+          hotSearch.length >= 1 && !show &&
+          <>
+            <View className={`flex justify-between ${styles.titleBox}`}>
+
+              <Text className="font-32 fwb">热门搜索</Text>
             </View>
-          </View>
-        </>
-      }
+            <View className="wid100 pt-3 pl-3 box-b">
+              <View className="wid100 flex flex-wrap">
+                {
+                  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>)
+                }
+              </View>
+            </View>
+          </>
+        }
 
-      <PageContainer onClickOverlay={()=>{ setShow(false)}} show={show} round={true} overlay={true} overlayStyle={'background:rgba(0,0,0,0)'} >
-        <SearchList name={value} clear={show} />
-      </PageContainer>
+        <PageContainer
+          onClickOverlay={() => setShow(false)}
+          show={show}
+          overlay
+          overlayStyle={'background:rgba(0,0,0,0)'}>
+          <SearchList name={value} clear={show}/>
+        </PageContainer>
+      </View>
+    </>
 
-    </View>
   )
 }
 export default Search
diff --git a/src/static/img/del.png b/src/static/img/del.png
new file mode 100644
index 0000000..d434ff8
Binary files /dev/null and b/src/static/img/del.png differ
diff --git a/src/utils/time.tsx b/src/utils/time.tsx
index 4759388..7dd1e6c 100644
--- a/src/utils/time.tsx
+++ b/src/utils/time.tsx
@@ -147,3 +147,22 @@ export function everyDay(start_time: number, end_time: number, data: Record<numb
     return []
   }
 }
+
+/** 时间前 */
+export function beforeTime(time?: string): string {
+  const initiateTime = new Date(time || 0).getTime()
+  const today = Date.now()
+  const timeDifference = Math.floor((today - initiateTime) / 86400000)
+  console.log(timeDifference)
+  if (timeDifference < 0) {
+    return '今天'
+  } else if (timeDifference >= 365) {
+    return `${Math.floor(timeDifference / 365)}年前`
+  } else if (timeDifference >= 31) {
+    return `${Math.floor(timeDifference / 31)}月前`
+  } else if (timeDifference >= 7) {
+    return `${Math.floor(timeDifference / 7)}星期前`
+  } else {
+    return `${timeDifference}天前`
+  }
+}