diff --git a/src/assets/scss/custom.less b/src/assets/scss/custom.less
index 9084f10..8f08b01 100644
--- a/src/assets/scss/custom.less
+++ b/src/assets/scss/custom.less
@@ -1,4 +1,5 @@
 @import "color";
+@import "variables";
 
 .op0 {
   opacity: 0;
@@ -18,7 +19,7 @@
 }
 
 .row {
-  padding: 0 1.5rem;
+  padding: 0 @padding-page;
   display: flex;
   justify-content: space-between;
   align-items: center;
diff --git a/src/assets/scss/variables.less b/src/assets/scss/variables.less
index 35ca1d5..5f403a5 100644
--- a/src/assets/scss/variables.less
+++ b/src/assets/scss/variables.less
@@ -1,2 +1,4 @@
 @footer-height: 6rem;
-@header-height: 6rem;
\ No newline at end of file
+@header-height: 6rem;
+
+@padding-page: 1.5rem;
\ No newline at end of file
diff --git a/src/components/Search.vue b/src/components/Search.vue
index 0419c92..ace2c8c 100644
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@@ -92,7 +92,7 @@ export default {
   }
 
   .notice {
-    margin-left: 2rem;
+    margin-left: 1.5rem;
     font-size: 1.6rem;
   }
 
@@ -107,9 +107,9 @@ export default {
     align-items: center;
 
     .search-icon {
-      height: 2rem;
-      width: 2rem;
-      margin-left: 1rem;
+      height: 2.2rem;
+      width: 2.2rem;
+      margin-left: .7rem;
     }
 
     input {
@@ -119,7 +119,7 @@ export default {
       width: 100%;
       outline: none;
       border: none;
-      padding: 0 0 0 1rem;
+      padding: 0 0 0 .7rem;
       background: transparent;
 
       &::-webkit-input-placeholder {
diff --git a/src/components/dialog/FromBottomDialog.vue b/src/components/dialog/FromBottomDialog.vue
index 405a8b7..c493a6e 100644
--- a/src/components/dialog/FromBottomDialog.vue
+++ b/src/components/dialog/FromBottomDialog.vue
@@ -25,7 +25,6 @@
       <slot></slot>
     </div>
   </transition>
-
 </template>
 <script>
 import Dom from "../../utils/dom";
diff --git a/src/components/dialog/SimpleConfirmDialog.vue b/src/components/dialog/SimpleConfirmDialog.vue
index 7caa765..b8ae095 100644
--- a/src/components/dialog/SimpleConfirmDialog.vue
+++ b/src/components/dialog/SimpleConfirmDialog.vue
@@ -3,8 +3,8 @@
     <div class="content" @click.stop="stop">
       <div class="item">{{ title }}</div>
       <div class="footer">
-        <div class="cancel" @click.stop="$emit('cancel')">放弃</div>
-        <div class="ok" @click.stop="$emit('ok')">保存</div>
+        <div class="cancel" @click.stop="$emit('cancel')">{{ cancelText }}</div>
+        <div class="ok" @click.stop="$emit('ok')">{{ okText }}</div>
       </div>
     </div>
   </div>
@@ -22,13 +22,26 @@ export default {
       default() {
         return ''
       }
-    }
+    },
+    okText: {
+      type: String,
+      default() {
+        return '保存'
+      }
+    },
+    cancelText: {
+      type: String,
+      default() {
+        return '放弃'
+      }
+    },
   },
   data() {
     return {}
   },
-  methods:{
-    stop(){}
+  methods: {
+    stop() {
+    }
   }
 }
 </script>
diff --git a/src/components/slide/SlideRowList.vue b/src/components/slide/SlideRowList.vue
index f6f8d2a..b22a22e 100644
--- a/src/components/slide/SlideRowList.vue
+++ b/src/components/slide/SlideRowList.vue
@@ -18,6 +18,7 @@
         </div>
         <img src="../../assets/img/icon/search-gray.png" alt=""
              :style="{opacity:loading ? 0 : 1}"
+             @click="$nav('/home/search')"
              style="margin-top: .5rem;">
       </div>
       <Loading class="loading" style="width: 4rem;" :style="loadingStyle" :is-full-screen="false"/>
diff --git a/src/config/index.js b/src/config/index.js
index 930589f..2ed0b0f 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -1,8 +1,8 @@
 export default {
-  baseUrl: 'http://192.168.0.103/index.php/v1',
-  filePreview:'http://192.168.0.103/static/uploads/',
-  // baseUrl: 'http://192.168.10.164/index.php/v1',
-  // filePreview:'http://192.168.10.164/static/uploads/'
+  // baseUrl: 'http://192.168.0.103/index.php/v1',
+  // filePreview:'http://192.168.0.103/static/uploads/',
+  baseUrl: 'http://192.168.10.164/index.php/v1',
+  filePreview:'http://192.168.10.164/static/uploads/'
   // baseUrl: 'http://localhost/index.php/v1',
   // filePreview:'http://localhost/static/uploads/'
 }
\ No newline at end of file
diff --git a/src/pages/home/Attention.vue b/src/pages/home/Attention.vue
index 4900aa9..9eab665 100644
--- a/src/pages/home/Attention.vue
+++ b/src/pages/home/Attention.vue
@@ -62,7 +62,7 @@
             <div class="item" v-for="item in left" @click="scrollToTop">
               <template v-if="item.type === 0">
                 <div class="wrapper">
-                  <img class="poster" :src="item.src"/>
+                  <img class="poster" v-lazy="$imgPreview(item.src)"/>
                   <img :src="item.author" alt="" class="author">
                 </div>
                 <div class="location" v-if="item.address">
@@ -120,7 +120,7 @@
             <div class="item" v-for="item in right">
               <template v-if="item.type === 0">
                 <div class="wrapper">
-                  <img class="poster" :src="item.src"/>
+                  <img class="poster" v-lazy="$imgPreview(item.src)"/>
                   <img :src="item.author" alt="" class="author">
                 </div>
                 <div class="location" v-if="item.address">
diff --git a/src/pages/home/Index2.vue b/src/pages/home/Index2.vue
index 0ca946b..63ef7b8 100644
--- a/src/pages/home/Index2.vue
+++ b/src/pages/home/Index2.vue
@@ -127,7 +127,8 @@
            :videoId="videos[videoActiveIndex]?.id"
            :canDownload="videos[videoActiveIndex]?.canDownload"
            @play-feedback="showPlayFeedback = true"
-           @showShareDuoshan="showShareDuoshan = true"
+           @showShareDuoshan="delayShowDialog(e => this.showShareDuoshan = true)"
+           @shareToFriend="delayShowDialog(e => this.shareToFriend = true)"
            @showDouyinCode="showDouyinCode = true"
            @showShare2WeChatZone="shareType = 2"
            @share2WeChat="shareType = 3"
@@ -167,6 +168,9 @@
     >
       <Search mode="light" v-model="test" :isShowSearchIcon="false"/>
     </ConfirmDialog>
+
+    <ShareToFriend v-model="shareToFriend"/>
+
   </div>
 </template>
 <script>
@@ -198,6 +202,7 @@ import Search from "../../components/Search";
 import ConfirmDialog from "../../components/dialog/ConfirmDialog";
 import FollowSetting2 from "./components/FollowSetting2";
 import Dom from "../../utils/dom";
+import ShareToFriend from "./components/ShareToFriend";
 
 export default {
   name: "HomeIndex",
@@ -217,7 +222,8 @@ export default {
     FollowSetting2,
     BlockDialog,
     Search,
-    ConfirmDialog
+    ConfirmDialog,
+    ShareToFriend
   },
   data() {
     return {
@@ -1167,6 +1173,7 @@ export default {
       showFollowSetting2: false,
       showBlockDialog: false,
       showChangeNote: false,
+      shareToFriend: false,
 
       test: '',
 
@@ -1220,7 +1227,7 @@ export default {
     delayShowDialog(cb) {
       setTimeout(() => {
         cb()
-      }, 500)
+      }, 400)
     },
     dislike() {
       this.$notice('操作成功，将减少此类视频的推荐')
diff --git a/src/pages/home/Music.vue b/src/pages/home/Music.vue
index dee41fd..0b96ceb 100644
--- a/src/pages/home/Music.vue
+++ b/src/pages/home/Music.vue
@@ -1,5 +1,5 @@
 <template>
-  <div  id="Music">
+  <div id="Music">
     <div class="header">
       <back mode="light" @click="$back"/>
       <transition name="fade">
@@ -65,7 +65,7 @@
            @share2QQZone="shareType = 4"
            @share2QQ="shareType = 5"
            @share2Webo="shareType = 8"
-           @ShareToFriend="shareToFriend = true"
+           @ShareToFriend="delayShowDialog( e => this.shareToFriend = true)"
     />
 
     <DouyinCode v-model="showDouyinCode"/>
@@ -120,6 +120,7 @@ export default {
       shareType: -1,
 
       showDouyinCode: false,
+      audio: new Audio(),
 
       videos: [
         {
@@ -2510,10 +2511,34 @@ export default {
       this.loading = false
     },
     togglePlay() {
+      let src = 'https://m3.8js.net:99/2014/211204142150965.mp3'
       this.isPlay = !this.isPlay
+      if (this.isPlay) {
+        this.audio.pause()
+        this.audio.src = src
+        this.audio.currentTime = 0
+        this.audio.play();
+        this.audio.addEventListener('ended', () => this.isPlay = false)
+      } else {
+        this.stopPlay()
+      }
+    },
+    delayShowDialog(cb) {
+      setTimeout(() => {
+        cb()
+      }, 100)
+    },
+    stopPlay() {
+      this.audio.pause()
+      this.audio.currentTime = 0
+      this.audio.removeEventListener('ended', null)
     }
   },
-  mounted() {
+  unmounted() {
+    this.stopPlay()
+  },
+  deactivated() {
+    this.stopPlay()
   }
 }
 </script>
diff --git a/src/pages/home/Search.vue b/src/pages/home/Search.vue
new file mode 100644
index 0000000..f73ea38
--- /dev/null
+++ b/src/pages/home/Search.vue
@@ -0,0 +1,344 @@
+<template>
+  <div class="Search">
+    <div class="header">
+      <back mode="light" @click="$back" class="mr1r"></back>
+      <BSearch placeholder="搜索用户名字/抖音号"
+               :isShowText="true"
+               notice="gray"
+      >
+        <img class="scan" src="../../assets/img/icon/scan-gray.png" @click.stop="$nav('/scan')">
+      </BSearch>
+    </div>
+    <div class="content">
+      <div class="history">
+        <div class="row" v-for="(item,index) in lHistory">
+          <div class="left">
+            <img src="../../assets/img/icon/home/time-white.png" alt="">
+            <span> {{ item }}</span>
+          </div>
+          <back img="close" mode="gray" @click="history.splice(index,1)" scale=".7"></back>
+        </div>
+        <div v-if="history.length>2" class="history-expand" @click="toggle">
+          {{ isExpand ? '清除全部搜索记录' : '展开全部' }}
+        </div>
+      </div>
+      <div class="guess">
+        <div class="title">
+          <div class="left">猜你想搜</div>
+          <div class="right">
+            <img class="scan" src="../../assets/img/icon/home/refresh-gray.png" @click.stop="refresh">
+            <span>换一换</span>
+          </div>
+        </div>
+        <div class="keys">
+          <div class="key" v-for="(item,index ) in randomGuess">{{ item }}</div>
+        </div>
+      </div>
+      <div class="rank-list">
+        <div class="indicator">
+          <div class="tab" :class="{active:slideIndex === 0}">抖音热榜</div>
+          <div class="tab" :class="{active:slideIndex === 1}">直播榜</div>
+          <div class="tab" :class="{active:slideIndex === 2}">音乐榜</div>
+          <div class="tab" :class="{active:slideIndex === 3}">品牌榜</div>
+        </div>
+        <SlideRowList v-model:active-index="slideIndex">
+          <SlideItem>
+            <div class="slide1">
+              <div class="l-row" v-for="(item,index) in 50">
+                <div class="rank-wrapper">
+                  <img v-if="index === 0" src="../../assets/img/icon/rank1.webp" alt="" class="rank">
+                  <img v-else-if="index === 1" src="../../assets/img/icon/rank2.webp" alt="" class="rank">
+                  <img v-else-if="index === 2" src="../../assets/img/icon/rank3.webp" alt="" class="rank">
+                  <div v-else class="rank">{{ index + 1 }}</div>
+                </div>
+                <div class="right">
+                  <div class="center">
+                    <div class="desc">下撒打发手动阀手动阀压下撒打发手动阀手动阀压顶发撒打发打法顶发撒打发打法</div>
+                    <div class="type">热</div>
+                  </div>
+                  <div class="hot-count">999w</div>
+                </div>
+              </div>
+              <div class="more">查看完整热点榜 ></div>
+            </div>
+          </SlideItem>
+          <SlideItem>
+            <div class="slide1">
+              <div class="l-row" v-for="(item,index) in 15">
+                <div class="rank-wrapper">
+                  <img v-if="index === 0" src="../../assets/img/icon/rank1.webp" alt="" class="rank">
+                  <img v-else-if="index === 1" src="../../assets/img/icon/rank2.webp" alt="" class="rank">
+                  <img v-else-if="index === 2" src="../../assets/img/icon/rank3.webp" alt="" class="rank">
+                  <div v-else class="rank">{{ index + 1 }}</div>
+                </div>
+                <div class="center">
+                  <span>下撒打发手动阀手动阀压顶发撒打发打法</span>
+                  <div class="type">热</div>
+                </div>
+                <div class="hot-count">999w</div>
+              </div>
+            </div>
+          </SlideItem>
+        </SlideRowList>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import Search from "../../components/Search";
+import _ from 'lodash'
+
+export default {
+  name: "SearchPage",
+  components: {
+    'BSearch': Search
+  },
+  data() {
+    return {
+      isShowText: false,
+      isExpand: false,
+      history: [
+        '历史记录1',
+        '历史记录2',
+        '历史记录3',
+        '历史记录4',
+        '历史记录5',
+        '历史记录6',
+        '历史记录7',
+        '历史记录8',
+        '历史记录9',
+        '历史记录10',
+      ],
+      guess: [
+        '少年透明人',
+        '花呗分批次接入征信',
+        '新娘婚礼上跪求悔婚',
+        '当你想换iPhone13时',
+        'Ling OS灵犀系统',
+        '桑塔纳2022款',
+        '透明人',
+        '恒大集团凌晨发公告',
+        '2022款日产GT-R',
+        '四川双一流大学名单',
+        '一公司放假通知走红',
+        '成都新全优教育倒闭',
+        '当代女生社交现状',
+        '恒大集团凌晨发公告',
+      ],
+      randomGuess: [],
+      slideIndex: 0,
+      list1: [],
+      list2: [],
+    }
+  },
+  computed: {
+    lHistory() {
+      if (this.isExpand) {
+        if (this.history.length > 10) return this.history.slice(0, 10)
+        return this.history
+      } else {
+        if (this.history.length > 2) return this.history.slice(0, 2)
+        return this.history
+      }
+    }
+  },
+  created() {
+    this.history = this.history.reverse()
+    this.refresh()
+  },
+  methods: {
+    refresh() {
+      this.randomGuess = _.sampleSize(this.guess, 6)
+    },
+    toggle() {
+      if (this.isExpand) {
+        this.$showSimpleConfirmDialog('是否清空历史记录？', () => {
+          this.history = []
+        }, null, '确定', '取消')
+      } else {
+        this.isExpand = true
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "../../assets/scss/index";
+
+.Search {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  overflow: auto;
+  color: white;
+  font-size: 1.4rem;
+
+  .header {
+    height: 6rem;
+    font-size: 1.4rem;
+    padding: 0 @padding-page;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid @line-color;
+    position: fixed;
+    width: 100vw;
+    box-sizing: border-box;
+    top: 0;
+
+    .search-ctn {
+      flex: 1;
+    }
+
+    .scan {
+      transform: scale(2);
+      height: 1rem;
+      width: 1rem;
+    }
+  }
+
+  .content {
+    padding-top: 6rem;
+
+    .history {
+      .history-expand {
+        text-align: center;
+        padding: 1rem;
+        color: @second-text-color;
+      }
+    }
+
+    .guess {
+      padding: 0 @padding-page;
+
+      .title {
+        font-size: 1.4rem;
+        padding: 1rem 0;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .right {
+          color: @second-text-color;
+          display: flex;
+          align-items: center;
+
+          img {
+            margin-right: .5rem;
+            width: 1.3rem;
+            height: 1.3rem;
+          }
+        }
+      }
+
+      .keys {
+        font-size: 1.6rem;
+        display: flex;
+        flex-wrap: wrap;
+
+        .key {
+          box-sizing: border-box;
+          padding: .8rem 0;
+          width: 49%;
+        }
+      }
+    }
+
+    .rank-list {
+      .indicator {
+        padding: 1.5rem;
+        display: flex;
+        align-items: center;
+        font-size: 1.4rem;
+
+        .tab {
+          color: @second-text-color;
+          margin-right: 2rem;
+
+          &.active {
+            transform: scale(1.2);
+            color: white;
+          }
+
+          &:nth-child(1) {
+            &.active {
+              font-weight: bold;
+              background: linear-gradient(to right, rgb(255, 165, 71), rgb(218, 77, 115));
+              -webkit-background-clip: text;
+              color: transparent;
+            }
+          }
+        }
+      }
+
+      .slide1 {
+        margin: 0 @padding-page 5rem @padding-page;
+        background: linear-gradient(to right, rgb(32, 29, 36), rgb(50, 29, 38));
+        padding: @padding-page;
+        border-radius: 1rem;
+
+        .l-row {
+          font-size: 1.4rem;
+          display: flex;
+          margin-bottom: 1.5rem;
+          align-items: center;
+          color: @second-text-color;
+
+          .rank-wrapper {
+            .rank {
+              width: 1.8rem;
+              height: 1.8rem;
+              line-height: 1.8rem;
+              text-align: center;
+              margin-right: 1.5rem;
+            }
+          }
+
+          .right {
+            flex: 1;
+            display: flex;
+            justify-content: space-between;
+
+            .center {
+              width: calc(100vw - 13rem);
+              box-sizing: border-box;
+              //padding: 0 1rem;
+              //flex: 1;
+              display: flex;
+              font-size: 1.2rem;
+
+
+              .desc {
+                color: white;
+                font-size: 1.4rem;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+              }
+              .type{
+                border-radius: .2rem;
+                padding: .2rem;
+                background: red;
+              }
+            }
+
+            .hot-count {
+              font-size: 1.2rem;
+            }
+          }
+        }
+
+        .more {
+          font-size: 1.2rem;
+          padding: 1rem 1rem 0 1rem;
+          text-align: center;
+          color: yellow;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/pages/home/components/ShareToFriend.vue b/src/pages/home/components/ShareToFriend.vue
index 4daeb14..64152ba 100644
--- a/src/pages/home/components/ShareToFriend.vue
+++ b/src/pages/home/components/ShareToFriend.vue
@@ -1,6 +1,5 @@
 <template>
   <from-bottom-dialog
-      page-id="Music"
       v-model="modelValue"
       @cancel="cancel"
       maskMode="light"
@@ -168,7 +167,7 @@ export default {
 
 .button {
   width: 6.4rem;
-  height: 2.6rem;
+  height: 2.6rem!important;
 }
 
 @avatar-width: 3.8rem;
@@ -215,6 +214,7 @@ export default {
 }
 
 .content {
+  color: white;
 
   .create-chat {
     padding-bottom: 4rem;
diff --git a/src/pages/me/Uploader.vue b/src/pages/me/Uploader.vue
index 1f971ce..361b832 100644
--- a/src/pages/me/Uploader.vue
+++ b/src/pages/me/Uploader.vue
@@ -36,7 +36,7 @@
         <div class="detail">
           <div class="detail-wrapper">
             <div class="head">
-              <img :src="localAuthor.avatar" class="head-image"
+              <img v-lazy="$imgPreview(localAuthor.avatar)" class="head-image"
                    @click="previewImg = localAuthor.avatar">
               <div class="heat">
                 <div class="text">
@@ -52,7 +52,6 @@
                   <span class="num">{{ localAuthor.following_count }}</span>
                 </div>
               </div>
-
             </div>
             <div class="description">
               <p class="name f22 mt1r mb1r">{{ localAuthor.nickname }}</p>
@@ -382,7 +381,7 @@ export default {
     bus.on('baseSlide-end', () => this.canScroll = true)
   },
   methods: {
-    cancelFollow(){
+    cancelFollow() {
       this.localAuthor.is_follow = false
     },
     changeIndicatorIndex(index) {
diff --git a/src/router/index.js b/src/router/index.js
index e3ced4f..895fb8e 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -50,6 +50,7 @@ import Report from "../pages/home/Report";
 import SubmitReport from "../pages/home/SubmitReport";
 import RequestUpdate from "../pages/me/RequestUpdate";
 import Test4 from "../pages/Test4";
+import Search from "../pages/home/Search";
 
 const routes = [
   // {path: '', component: Music},
@@ -64,6 +65,7 @@ const routes = [
   {path: '/home/music', component: Music},
   {path: '/home/music-rank-list', component: MusicRankList},
   {path: '/home/report', component: Report},
+  {path: '/home/search', component: Search},
 
 
   {path: '/attention', component: Attention},
diff --git a/src/utils/global-methods.js b/src/utils/global-methods.js
index 011b3b1..c8aaa13 100644
--- a/src/utils/global-methods.js
+++ b/src/utils/global-methods.js
@@ -45,7 +45,11 @@ export default {
     document.body.append(parent)
     app.mount(parent)
   },
-  $showSimpleConfirmDialog(title, okCb, cancelCb) {
+  $showSimpleConfirmDialog(title, okCb, cancelCb, okText, cancelText,) {
+    if (!cancelCb) {
+      cancelCb = () => {
+      }
+    }
     let remove = () => {
       let parent = document.querySelector('.dialog-ctn')
       parent.classList.replace('fade-in', 'fade-out')
@@ -63,7 +67,13 @@ export default {
     }
     const app = Vue.createApp({
       render() {
-        return <SimpleConfirmDialog onCancel={tempCancelCb} onDismiss={remove} title={title} onOk={tempOkCb}/>
+        return <SimpleConfirmDialog
+          onCancel={tempCancelCb}
+          onDismiss={remove}
+          title={title}
+          okText={okText}
+          cancelText={cancelText}
+          onOk={tempOkCb}/>
       },
     })
     let parent = document.createElement('div')
@@ -254,7 +264,7 @@ export default {
     // console.log(url)
     if (!url) return
     //本地图片
-    if (url.includes('img') ||url.includes('data:image')) {
+    if (url.includes('img') || url.includes('data:image')) {
       return url
     }
     //网络，全路径图片
@@ -303,7 +313,7 @@ export default {
     if (!val) return
     if (typeof val === 'number') {
 
-    }else {
+    } else {
       if (val.length === 10) {
         val += '000'
       }