diff --git a/index.html b/index.html
index 4004f22..66dd74f 100644
--- a/index.html
+++ b/index.html
@@ -1,45 +1,50 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8"/>
-    <link rel="icon" href="/favicon.ico"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" id="viewport" />
-    <title>Vite App</title>
-    <style>
-        ::-webkit-scrollbar {
-            display: none; /* Chrome Safari */
-        }
+  <meta charset="UTF-8"/>
+  <link rel="icon" href="/favicon.ico"/>
+  <meta name="viewport"
+        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
+        id="viewport"/>
+  <title>Vite App</title>
+  <style>
+      ::-webkit-scrollbar {
+          display: none; /* Chrome Safari */
+      }
 
-        .fade-in {
-            animation: fade-in .3s;
-        }
+      .fade-in {
+          animation: fade-in .3s;
+      }
 
-        .fade-out {
-            animation: fade-out .4s;
-        }
+      .fade-out {
+          animation: fade-out .4s;
+      }
 
-        @keyframes fade-in {
-            from {
-                opacity: 0;
-            }
-            to {
-                opacity: 1;
-            }
-        }
+      @keyframes fade-in {
+          from {
+              opacity: 0;
+          }
+          to {
+              opacity: 1;
+          }
+      }
+
+      @keyframes fade-out {
+          from {
+              opacity: 1;
+          }
+          to {
+              opacity: 0;
+              display: none;
+          }
+      }
+  </style>
+  <script crossorigin="anonymous"
+          integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
+          src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script>
+  <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
+  <script src= "https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.js"></script>
 
-        @keyframes fade-out {
-            from {
-                opacity: 1;
-            }
-            to {
-                opacity: 0;
-                display: none;
-            }
-        }
-    </style>
-    <script crossorigin="anonymous"
-            integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
-            src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script>
 </head>
 <body>
 <div id="app"></div>
diff --git a/src/components/BaseHeader.vue b/src/components/BaseHeader.vue
index f59fe52..694ba8b 100644
--- a/src/components/BaseHeader.vue
+++ b/src/components/BaseHeader.vue
@@ -1,7 +1,7 @@
 <template>
   <div id='BaseHeader' :class="[mode,isFixed?'fixed':'']">
     <div class="header">
-      <back
+      <dy-back
           :mode="backMode"
           :img="backImg"
           @click="back()"
diff --git a/src/components/Call.vue b/src/components/Call.vue
index 1cb6be0..dab397c 100644
--- a/src/components/Call.vue
+++ b/src/components/Call.vue
@@ -36,7 +36,7 @@
               <span>免提</span>
             </div>
             <div class="option">
-              <back mode="light" @click="isExpand = !isExpand" img="back" class="shrink"/>
+              <dy-back mode="light" @click="isExpand = !isExpand" img="back" class="shrink"/>
               <!--              <img src="@/assets/img/icon/message/chat/narrow.png" alt="">-->
             </div>
           </div>
diff --git a/src/components/Share.vue b/src/components/Share.vue
index 73fc02e..be09d38 100644
--- a/src/components/Share.vue
+++ b/src/components/Share.vue
@@ -12,7 +12,7 @@
     <div class="share">
       <div class="title">
         <span>私信给朋友</span>
-        <back mode="light" img="close" direction="right" @click.stop="closeShare"></back>
+        <dy-back mode="light" img="close" direction="right" @click.stop="closeShare"></dy-back>
       </div>
       <div class="friends">
         <div class="friend" v-for="item in friends.all" @click.stop="toggleCall(item)">
@@ -21,7 +21,7 @@
           <img v-if="item.select" class="checked" src="../assets/img/icon/components/check/check-red-share.png">
         </div>
         <div class="more" @click.stop="closeShare($nav('/message/share-to-friend'))">
-          <back mode="light" direction="right"></back>
+          <dy-back mode="light" direction="right"></dy-back>
           <span>更多</span>
         </div>
       </div>
diff --git a/src/components/UserPanel2.vue b/src/components/UserPanel2.vue
index 95da82f..c5d4b04 100644
--- a/src/components/UserPanel2.vue
+++ b/src/components/UserPanel2.vue
@@ -110,7 +110,7 @@
               </div>
               <div class="right" @click="$nav('/people/find-acquaintance')">
                 <span>查看更多</span>
-                <back direction="right"></back>
+                <back direction="right"></dy-back>
               </div>
             </div>
             <div class="friends"
@@ -122,7 +122,7 @@
                 <span class="tips">可能感兴趣的人</span>
                 <b-button type="primary">关注</b-button>
                 <div class="close">
-                  <back img="close" scale=".6"></back>
+                  <back img="close" scale=".6"></dy-back>
                 </div>
               </div>
               <div class="more" @click="$nav('/people/find-acquaintance')">
diff --git a/src/pages/home/LivePage.vue b/src/pages/home/LivePage.vue
index 5e8a801..229b5d8 100644
--- a/src/pages/home/LivePage.vue
+++ b/src/pages/home/LivePage.vue
@@ -33,13 +33,13 @@
             <img src="../../assets/img/icon/avatar/2.png" alt="" class="round">
             <img src="../../assets/img/icon/avatar/3.png" alt="" class="round">
             <div class="round count">107</div>
-            <back class="round close" img="close" mode="light" @click="$back"/>
+            <dy-back class="round close" img="close" mode="light" @click="$back"/>
           </div>
           <div class="more">
             <div class="wrapper">
               <!--              缺个icon-->
               <span>更多同城</span>
-              <back scale=".5" direction="right" class="back" img="back" mode="light"/>
+              <dy-back scale=".5" direction="right" class="back" img="back" mode="light"/>
             </div>
           </div>
         </div>
diff --git a/src/pages/home/Music.vue b/src/pages/home/Music.vue
index e63d40e..2b41ade 100644
--- a/src/pages/home/Music.vue
+++ b/src/pages/home/Music.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="Music">
     <div class="header">
-      <back mode="light" @click="$back"/>
+      <dy-back mode="light" @click="$back"/>
       <transition name="fade">
         <div class="center" v-if="isFixed">
           <span class="f16">{{ music.name }}</span>
diff --git a/src/pages/home/MusicRankList.vue b/src/pages/home/MusicRankList.vue
index 4224657..821b6cb 100644
--- a/src/pages/home/MusicRankList.vue
+++ b/src/pages/home/MusicRankList.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="MusicRankList" @scroll="scroll">
-    <back
+    <dy-back
         mode="light"
         img="back"
         @click="$back()"
diff --git a/src/pages/home/Report.vue b/src/pages/home/Report.vue
index c8b3848..33a3919 100644
--- a/src/pages/home/Report.vue
+++ b/src/pages/home/Report.vue
@@ -14,43 +14,43 @@
       </div>
       <div class="row" @click="$nav('/home/submit-report',{type:'色情低俗',mode})">
         <span>色情低俗</span>
-        <back scale=".8" direction="right"></back>
+        <dy-back scale=".8" direction="right"></dy-back>
       </div>
       <div class="row" @click="$nav('/home/submit-report',{type:'时政不实信息',mode})">
         <span>时政不实信息</span>
-        <back scale=".8" direction="right"></back>
+        <dy-back scale=".8" direction="right"></dy-back>
       </div>
       <div class="row" @click="$nav('/home/submit-report',{type:'违法犯罪',mode})">
         <span>违法犯罪</span>
-        <back scale=".8" direction="right"></back>
+        <dy-back scale=".8" direction="right"></dy-back>
       </div>
       <div class="row" @click="$nav('/home/submit-report',{type:'垃圾广告、售卖假货等',mode})">
         <span>垃圾广告、售卖假货等</span>
-        <back scale=".8" direction="right"></back>
+        <dy-back scale=".8" direction="right"></dy-back>
       </div>
       <div class="row" @click="$nav('/home/submit-report',{type:'造谣传播',mode})">
         <span>造谣传播</span>
-        <back scale=".8" direction="right"></back>
+        <dy-back scale=".8" direction="right"></dy-back>
       </div>
       <div class="row" @click="$nav('/home/submit-report',{type:'涉嫌欺诈',mode})">
         <span>涉嫌欺诈</span>
-        <back scale=".8" direction="right"></back>
+        <dy-back scale=".8" direction="right"></dy-back>
       </div>
       <div class="row" @click="$nav('/home/submit-report',{type:'侮辱漫骂',mode})">
         <span>侮辱漫骂</span>
-        <back scale=".8" direction="right"></back>
+        <dy-back scale=".8" direction="right"></dy-back>
       </div>
       <div class="row" @click="$nav('/home/submit-report',{type:'危险行为',mode})">
         <span>危险行为</span>
-        <back scale=".8" direction="right"></back>
+        <dy-back scale=".8" direction="right"></dy-back>
       </div>
       <div class="row" @click="$nav('/home/submit-report',{type:'涉嫌非法集资',mode})">
         <span>涉嫌非法集资</span>
-        <back scale=".8" direction="right"></back>
+        <dy-back scale=".8" direction="right"></dy-back>
       </div>
       <div class="row" @click="$nav('/home/submit-report',{type:'价值观导向不良',mode})">
         <span>价值观导向不良</span>
-        <back scale=".8" direction="right"></back>
+        <dy-back scale=".8" direction="right"></dy-back>
       </div>
       <div class="line"></div>
       <!--todo 没做详细的举报      -->
@@ -59,15 +59,15 @@
       </div>
       <div class="row" @click="$nav('/home/submit-report',{type:'侵犯名誉、隐私、肖像权等',mode})">
         <span>侵犯名誉、隐私、肖像权等</span>
-        <back scale=".8" direction="right"></back>
+        <dy-back scale=".8" direction="right"></dy-back>
       </div>
       <div class="row" @click="$nav('/home/submit-report',{type:'内容盗用本人作品',mode})">
         <span>内容盗用本人作品</span>
-        <back scale=".8" direction="right"></back>
+        <dy-back scale=".8" direction="right"></dy-back>
       </div>
       <div class="row" @click="$nav('/home/submit-report',{type:'内容盗用他人作品',mode})">
         <span>内容盗用他人作品</span>
-        <back scale=".8" direction="right"></back>
+        <dy-back scale=".8" direction="right"></dy-back>
       </div>
       <div class="line"></div>
       <div class="title">
@@ -75,11 +75,11 @@
       </div>
       <div class="row" @click="$nav('/home/submit-report',{type:'未成年人不当行为',mode})">
         <span>未成年人不当行为</span>
-        <back scale=".8" direction="right"></back>
+        <dy-back scale=".8" direction="right"></dy-back>
       </div>
       <div class="row" @click="$nav('/home/submit-report',{type:'内容不适合未成年观看',mode})">
         <span>内容不适合未成年观看</span>
-        <back scale=".8" direction="right"></back>
+        <dy-back scale=".8" direction="right"></dy-back>
       </div>
       <div class="line"></div>
       <div class="title">
@@ -87,19 +87,19 @@
       </div>
       <div class="row" @click="$nav('/home/submit-report',{type:'引人不适',mode})">
         <span>引人不适</span>
-        <back scale=".8" direction="right"></back>
+        <dy-back scale=".8" direction="right"></dy-back>
       </div>
       <div class="row" @click="$nav('/home/submit-report',{type:'疑似自我伤害',mode})">
         <span>疑似自我伤害</span>
-        <back scale=".8" direction="right"></back>
+        <dy-back scale=".8" direction="right"></dy-back>
       </div>
       <div class="row" @click="$nav('/home/submit-report',{type:'诱导点赞、分享、关注',mode})">
         <span>诱导点赞、分享、关注</span>
-        <back scale=".8" direction="right"></back>
+        <dy-back scale=".8" direction="right"></dy-back>
       </div>
       <div class="row" @click="$nav('/home/submit-report',{type:'其他',mode})">
         <span>其他</span>
-        <back scale=".8" direction="right"></back>
+        <dy-back scale=".8" direction="right"></dy-back>
       </div>
     </div>
   </div>
diff --git a/src/pages/home/SearchPage.vue b/src/pages/home/SearchPage.vue
index 55e80c5..a186106 100644
--- a/src/pages/home/SearchPage.vue
+++ b/src/pages/home/SearchPage.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="Search">
     <div class="header">
-      <back mode="light" @click="$back" class="mr1r"></back>
+      <dy-back mode="light" @click="$back" class="mr1r"></dy-back>
       <BSearch placeholder="搜索用户名字/抖音号"
                :isShowRightText="true"
                rightTextColor="white"
@@ -17,7 +17,7 @@
             <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>
+          <dy-back img="close" mode="gray" @click="history.splice(index,1)" scale=".7"></dy-back>
         </div>
         <div v-if="history.length>2" class="history-expand" @click="toggle">
           {{ isExpand ? '清除全部搜索记录' : '展开全部' }}
diff --git a/src/pages/home/components/FollowSetting.vue b/src/pages/home/components/FollowSetting.vue
index bde973e..674e6f8 100644
--- a/src/pages/home/components/FollowSetting.vue
+++ b/src/pages/home/components/FollowSetting.vue
@@ -14,7 +14,7 @@
           <span class="title">成都验证码</span>
           <span class="subtitle">私信给朋友</span>
         </div>
-        <back mode="dark" img="close" direction="right" @click="cancel()"></back>
+        <dy-back mode="dark" img="close" direction="right" @click="cancel()"></dy-back>
       </div>
       <div class="options">
         <div class="option" @click="cancel(e => $emit('showShare'))">
diff --git a/src/pages/home/components/FollowSetting2.vue b/src/pages/home/components/FollowSetting2.vue
index 9b7662c..deeaea4 100644
--- a/src/pages/home/components/FollowSetting2.vue
+++ b/src/pages/home/components/FollowSetting2.vue
@@ -14,7 +14,7 @@
           <span class="title">成都验证码</span>
           <span class="subtitle">私信给朋友</span>
         </div>
-        <back mode="dark" img="close" direction="right" @click="cancel()"></back>
+        <dy-back mode="dark" img="close" direction="right" @click="cancel()"></dy-back>
       </div>
       <div class="l-rows">
 
diff --git a/src/pages/home/components/PlayFeedback.vue b/src/pages/home/components/PlayFeedback.vue
index 6f9cac1..2c21398 100644
--- a/src/pages/home/components/PlayFeedback.vue
+++ b/src/pages/home/components/PlayFeedback.vue
@@ -4,7 +4,7 @@
       <div class="feedback-header">
         <span>&nbsp;</span>
         <div class="title">播放反馈</div>
-        <back mode="dark" img="close" @click="cancel"></back>
+        <dy-back mode="dark" img="close" @click="cancel"></dy-back>
       </div>
       <div class="content">
         <div class="notice">请选择要反馈的问题</div>
diff --git a/src/pages/home/components/ShareTo.vue b/src/pages/home/components/ShareTo.vue
index 570470e..6753db0 100644
--- a/src/pages/home/components/ShareTo.vue
+++ b/src/pages/home/components/ShareTo.vue
@@ -86,7 +86,7 @@
         <template v-if="showDownload">
           <b-button type="primary" @click="$no">
             去相册查看
-            <back scale="0.7" mode="light" direction="right"></back>
+            <dy-back scale="0.7" mode="light" direction="right"></dy-back>
           </b-button>
 
           <b-button class="mt1r" type="white" @click="$no">
diff --git a/src/pages/home/components/ShareToFriend.vue b/src/pages/home/components/ShareToFriend.vue
index 1a49812..4a3d7af 100644
--- a/src/pages/home/components/ShareToFriend.vue
+++ b/src/pages/home/components/ShareToFriend.vue
@@ -52,7 +52,7 @@
             <img class="left" src="../../../assets/img/icon/people-gray.png" alt="">
             <div class="right">
               <span>已加入的群聊</span>
-              <back direction="right" mode="gray" scale=".7"/>
+              <dy-back direction="right" mode="gray" scale=".7"/>
             </div>
           </div>
           <div class="friend-list">
@@ -71,7 +71,7 @@
       </div>
       <div class="joined-chat-group" v-show="showJoinedChat">
         <div class="nav">
-          <back @click="showJoinedChat = false" mode="light" scale="1"></back>
+          <dy-back @click="showJoinedChat = false" mode="light" scale="1"></dy-back>
           <span>已加入的群聊</span>
           <span>&nbsp;</span>
         </div>
diff --git a/src/pages/me/Me.vue b/src/pages/me/Me.vue
index 2a120aa..e7b2005 100644
--- a/src/pages/me/Me.vue
+++ b/src/pages/me/Me.vue
@@ -163,7 +163,7 @@
                     </div>
                     <div class="right">
                       <span>全部</span>
-                      <back direction="right"></back>
+                      <dy-back direction="right"></dy-back>
                     </div>
                   </div>
                   <div class="list">
@@ -186,7 +186,7 @@
                     </div>
                     <div class="right">
                       <span>全部</span>
-                      <back direction="right"></back>
+                      <dy-back direction="right"></dy-back>
                     </div>
                   </div>
                   <div class="list">
diff --git a/src/pages/me/MyCard.vue b/src/pages/me/MyCard.vue
index ea84192..834c283 100644
--- a/src/pages/me/MyCard.vue
+++ b/src/pages/me/MyCard.vue
@@ -1,7 +1,7 @@
 <template>
   <div id='MyCard'>
     <div class="header">
-      <back mode="light" @click="$back"/>
+      <dy-back mode="light" @click="$back"/>
       <!--      todo 差一-->
       <img class="share" src="../../assets/img/icon/share-white.png" @click="isSharing = true">
     </div>
diff --git a/src/pages/me/MyMusic.vue b/src/pages/me/MyMusic.vue
index 21a68c3..d15a632 100644
--- a/src/pages/me/MyMusic.vue
+++ b/src/pages/me/MyMusic.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="MyMusic">
     <div class="header">
-      <back class="back" mode="light" img="back" @click="$back"/>
+      <dy-back class="back" mode="light" img="back" @click="$back"/>
       <IndicatorLight
           name="myMusicList"
           :tabTexts="['猜你爱听','我的收藏']"
           v-model:active-index="slideIndex">
       </IndicatorLight>
-      <back style="opacity: 0;" mode="light" img="back"/>
+      <dy-back style="opacity: 0;" mode="light" img="back"/>
     </div>
     <SlideRowList name="myMusicList" v-model:active-index="slideIndex">
       <SlideItem>
@@ -102,9 +102,9 @@
     <transition name="my-collect-dialog">
       <div class="my-collect-dialog" v-show="isShowCollectDialog">
         <div class="dialog-header">
-          <back class="close" mode="light" img="back" @click="isShowCollectDialog = false"/>
+          <dy-back class="close" mode="light" img="back" @click="isShowCollectDialog = false"/>
           <span>我的收藏</span>
-          <back style="opacity: 0;" mode="light" img="back"/>
+          <dy-back style="opacity: 0;" mode="light" img="back"/>
         </div>
         <CollectMusic ref="CollectMusic" :list="page2Music" v-model:page2SlideIndex="page2SlideIndex"/>
       </div>
diff --git a/src/pages/me/Uploader.vue b/src/pages/me/Uploader.vue
index 90bcab4..c76fced 100644
--- a/src/pages/me/Uploader.vue
+++ b/src/pages/me/Uploader.vue
@@ -135,7 +135,7 @@
               </div>
               <div class="right" @click="$nav('/people/find-acquaintance')">
                 <span>查看更多</span>
-                <back direction="right"></back>
+                <dy-back direction="right"></dy-back>
               </div>
             </div>
             <div class="friends"
@@ -147,7 +147,7 @@
                 <span class="tips">可能感兴趣的人</span>
                 <b-button type="primary">关注</b-button>
                 <div class="close">
-                  <back img="close" scale=".6"></back>
+                  <dy-back img="close" scale=".6"></dy-back>
                 </div>
               </div>
               <div class="more" @click="$nav('/people/find-acquaintance')">
diff --git a/src/pages/me/VideoDetail.vue b/src/pages/me/VideoDetail.vue
index 4e905ef..7472851 100644
--- a/src/pages/me/VideoDetail.vue
+++ b/src/pages/me/VideoDetail.vue
@@ -3,7 +3,7 @@
     <SlideList key1="父" style="width: 100vw;" v-model:can-move="canMove">
       <SlideItem>
         <div class="search-wrapper">
-          <back class="back" @click="$back"/>
+          <dy-back class="back" @click="$back"/>
           <Search></Search>
         </div>
         <SlideList key1="子" direction="column" v-model:active-index="videoActiveIndex">
diff --git a/src/pages/me/components/CollectMusic.vue b/src/pages/me/components/CollectMusic.vue
index 493afd2..1180207 100644
--- a/src/pages/me/components/CollectMusic.vue
+++ b/src/pages/me/components/CollectMusic.vue
@@ -41,7 +41,7 @@
               <div class="name">{{ item.name }}</div>
               <div class="author">{{ item.author }}</div>
             </div>
-            <back class="right" mode="gray" img="close"/>
+            <dy-back class="right" mode="gray" img="close"/>
           </div>
         </div>
         <div class="footer" @click="isShowList = false">取消</div>
diff --git a/src/pages/me/components/GuessMusic.vue b/src/pages/me/components/GuessMusic.vue
index 391849a..c47ac37 100644
--- a/src/pages/me/components/GuessMusic.vue
+++ b/src/pages/me/components/GuessMusic.vue
@@ -41,7 +41,7 @@
               <div class="name">{{ item.name }}</div>
               <div class="author">{{ item.author }}</div>
             </div>
-            <back class="right" mode="gray" img="close"/>
+            <dy-back class="right" mode="gray" img="close"/>
           </div>
         </div>
         <div class="footer" @click="isShowList = false">取消</div>
diff --git a/src/pages/me/rightMenu/MinorProtection/DetailSetting.vue b/src/pages/me/rightMenu/MinorProtection/DetailSetting.vue
index 7d11d1c..e5c8090 100644
--- a/src/pages/me/rightMenu/MinorProtection/DetailSetting.vue
+++ b/src/pages/me/rightMenu/MinorProtection/DetailSetting.vue
@@ -30,7 +30,7 @@
         </div>
         <div class="right">
           <span>{{ triggerTime }}分钟</span>
-          <back direction="right"></back>
+          <dy-back direction="right"></dy-back>
         </div>
       </div>
       <div class="footer">
diff --git a/src/pages/me/rightMenu/MinorProtection/Index.vue b/src/pages/me/rightMenu/MinorProtection/Index.vue
index 20e2db8..461acf8 100644
--- a/src/pages/me/rightMenu/MinorProtection/Index.vue
+++ b/src/pages/me/rightMenu/MinorProtection/Index.vue
@@ -10,21 +10,21 @@
         <div class="left">时间锁</div>
         <div class="right">
           <span>未开启</span>
-          <back direction="right"></back>
+          <dy-back direction="right"></dy-back>
         </div>
       </div>
       <div class="row" @click="$nav('detail-setting',{type:1})">
         <div class="left">青少年模式</div>
         <div class="right">
           <span>未开启</span>
-          <back direction="right"></back>
+          <dy-back direction="right"></dy-back>
         </div>
       </div>
       <div class="row" @click="$nav('detail-setting',{type:2})">
         <div class="left">亲子平台</div>
         <div class="right">
           <span>未开启</span>
-          <back direction="right"></back>
+          <dy-back direction="right"></dy-back>
         </div>
       </div>
     </div>
diff --git a/src/pages/me/rightMenu/Setting.vue b/src/pages/me/rightMenu/Setting.vue
index fbb72e5..1fe710d 100644
--- a/src/pages/me/rightMenu/Setting.vue
+++ b/src/pages/me/rightMenu/Setting.vue
@@ -13,7 +13,7 @@
           <span>帐号与安全</span>
         </div>
         <div class="right">
-          <back direction="right"></back>
+          <dy-back direction="right"></dy-back>
         </div>
       </div>
       <div class="row">
@@ -22,7 +22,7 @@
           <span>隐私设置</span>
         </div>
         <div class="right">
-          <back direction="right"></back>
+          <dy-back direction="right"></dy-back>
         </div>
       </div>
 
@@ -35,7 +35,7 @@
           <span>通知设置</span>
         </div>
         <div class="right">
-          <back direction="right"></back>
+          <dy-back direction="right"></dy-back>
         </div>
       </div>
       <div class="row">
@@ -44,7 +44,7 @@
           <span>动态壁纸</span>
         </div>
         <div class="right">
-          <back direction="right"></back>
+          <dy-back direction="right"></dy-back>
         </div>
       </div>
       <div class="row">
@@ -53,7 +53,7 @@
           <span>通用设置</span>
         </div>
         <div class="right">
-          <back direction="right"></back>
+          <dy-back direction="right"></dy-back>
         </div>
       </div>
       <div class="line"></div>
@@ -66,7 +66,7 @@
           <span>头条主页</span>
         </div>
         <div class="right">
-          <back direction="right"></back>
+          <dy-back direction="right"></dy-back>
         </div>
       </div>
       <div class="line"></div>
@@ -79,7 +79,7 @@
           <span>广告反馈与设置</span>
         </div>
         <div class="right">
-          <back direction="right"></back>
+          <dy-back direction="right"></dy-back>
         </div>
       </div>
       <div class="row">
@@ -88,7 +88,7 @@
           <span>用户协议</span>
         </div>
         <div class="right">
-          <back direction="right"></back>
+          <dy-back direction="right"></dy-back>
         </div>
       </div>
       <div class="row">
@@ -97,7 +97,7 @@
           <span>社区自律公约</span>
         </div>
         <div class="right">
-          <back direction="right"></back>
+          <dy-back direction="right"></dy-back>
         </div>
       </div>
       <div class="row">
@@ -106,7 +106,7 @@
           <span>隐私政策</span>
         </div>
         <div class="right">
-          <back direction="right"></back>
+          <dy-back direction="right"></dy-back>
         </div>
       </div>
       <div class="row">
@@ -115,7 +115,7 @@
           <span>应用权限</span>
         </div>
         <div class="right">
-          <back direction="right"></back>
+          <dy-back direction="right"></dy-back>
         </div>
       </div>
       <div class="row">
@@ -124,7 +124,7 @@
           <span>第三方SDK列表</span>
         </div>
         <div class="right">
-          <back direction="right"></back>
+          <dy-back direction="right"></dy-back>
         </div>
       </div>
       <div class="row">
@@ -133,7 +133,7 @@
           <span>关于抖音</span>
         </div>
         <div class="right">
-          <back direction="right"></back>
+          <dy-back direction="right"></dy-back>
         </div>
       </div>
       <div class="row">
@@ -142,7 +142,7 @@
           <span>反馈与帮助</span>
         </div>
         <div class="right">
-          <back direction="right"></back>
+          <dy-back direction="right"></dy-back>
         </div>
       </div>
       <div class="row">
@@ -151,7 +151,7 @@
           <span>清理占用空间</span>
         </div>
         <div class="right">
-          <back direction="right"></back>
+          <dy-back direction="right"></dy-back>
         </div>
       </div>
       <div class="line"></div>
@@ -163,7 +163,7 @@
           <span>切换空间</span>
         </div>
         <div class="right">
-          <back direction="right"></back>
+          <dy-back direction="right"></dy-back>
         </div>
       </div>
       <div class="row">
@@ -172,7 +172,7 @@
           <span>退出登录</span>
         </div>
         <div class="right">
-          <back direction="right"></back>
+          <dy-back direction="right"></dy-back>
         </div>
       </div>
 
diff --git a/src/pages/me/userinfo/AddSchool.vue b/src/pages/me/userinfo/AddSchool.vue
index f82eb47..3a05266 100644
--- a/src/pages/me/userinfo/AddSchool.vue
+++ b/src/pages/me/userinfo/AddSchool.vue
@@ -15,21 +15,21 @@
         <div class="left">学校</div>
         <div class="right">
           <span>{{ isEmpty(localSchool.name) }}</span>
-          <back scale='1' direction="right"></back>
+          <dy-back scale='1' direction="right"></dy-back>
         </div>
       </div>
       <div class="row" @click="checkGo('/me/choose-department')">
         <div class="left">院系</div>
         <div class="right">
           <span>{{ isEmpty(localSchool.department) }}</span>
-          <back scale='1' direction="right"></back>
+          <dy-back scale='1' direction="right"></dy-back>
         </div>
       </div>
       <div class="row" @click="showJoinTimeDialog">
         <div class="left">入学时间</div>
         <div class="right">
           <span>{{ isEmpty(localSchool.joinTime) }}</span>
-          <back scale='1' direction="right"></back>
+          <dy-back scale='1' direction="right"></dy-back>
           <div v-show="false" id="trigger1"></div>
         </div>
       </div>
@@ -37,14 +37,14 @@
         <div class="left">学历</div>
         <div class="right">
           <span>{{ isEmpty(localSchool.education) }}</span>
-          <back scale='1' direction="right"></back>
+          <dy-back scale='1' direction="right"></dy-back>
         </div>
       </div>
       <div class="row" @click="$nav('/me/display-type',{displayType : localSchool.displayType})">
         <div class="left">展示范围</div>
         <div class="right">
           <span>{{ displayType }}</span>
-          <back scale='1' direction="right"></back>
+          <dy-back scale='1' direction="right"></dy-back>
         </div>
       </div>
     </div>
diff --git a/src/pages/me/userinfo/ChooseLocation.vue b/src/pages/me/userinfo/ChooseLocation.vue
index eb1fe4d..474300f 100644
--- a/src/pages/me/userinfo/ChooseLocation.vue
+++ b/src/pages/me/userinfo/ChooseLocation.vue
@@ -23,7 +23,7 @@
         <div class="row" @click="$nav('/me/choose-province')">
           <span>中国</span>
           <div class="right">
-            <back scale=".8" direction="right"></back>
+            <dy-back scale=".8" direction="right"></dy-back>
           </div>
         </div>
         <div v-for="(value, name)  of countryOk">
diff --git a/src/pages/me/userinfo/ChooseProvince.vue b/src/pages/me/userinfo/ChooseProvince.vue
index 77c4a6f..0a7ff9a 100644
--- a/src/pages/me/userinfo/ChooseProvince.vue
+++ b/src/pages/me/userinfo/ChooseProvince.vue
@@ -10,7 +10,7 @@
         <div class="row" @click="$nav('/me/choose-city')" v-for="item in list">
           <span>{{ item }}</span>
           <div class="right">
-            <back scale=".8" direction="right"></back>
+            <dy-back scale=".8" direction="right"></dy-back>
           </div>
         </div>
       </div>
diff --git a/src/pages/me/userinfo/EditUserInfo.vue b/src/pages/me/userinfo/EditUserInfo.vue
index 23d3852..0625250 100644
--- a/src/pages/me/userinfo/EditUserInfo.vue
+++ b/src/pages/me/userinfo/EditUserInfo.vue
@@ -20,28 +20,28 @@
         <div class="left">名字</div>
         <div class="right">
           <span>{{ isEmpty(userinfo.nickname) }}</span>
-          <back scale=".8" direction="right"></back>
+          <dy-back scale=".8" direction="right"></dy-back>
         </div>
       </div>
       <div class="row" @click="$nav('/me/edit-userinfo-item',{type:2})">
         <div class="left">抖音号</div>
         <div class="right">
           <span>{{ isEmpty(userinfo.unique_id) }}</span>
-          <back scale=".8" direction="right"></back>
+          <dy-back scale=".8" direction="right"></dy-back>
         </div>
       </div>
       <div class="row" @click="$nav('/me/edit-userinfo-item',{type:3})">
         <div class="left">简介</div>
         <div class="right">
           <span>{{ isEmpty(userinfo.desc) }}</span>
-          <back scale=".8" direction="right"></back>
+          <dy-back scale=".8" direction="right"></dy-back>
         </div>
       </div>
       <div class="row" @click="showSexDialog">
         <div class="left">性别</div>
         <div class="right">
           <span>{{ isEmpty(userinfo.sex) }}</span>
-          <back scale=".8" direction="right"></back>
+          <dy-back scale=".8" direction="right"></dy-back>
         </div>
       </div>
       <div class="row" @click="showBirthdayDialog">
@@ -49,21 +49,21 @@
         <div class="right">
           <span>{{ isEmpty(userinfo.birthday) }}</span>
           <div v-show="false" id="trigger1"></div>
-          <back scale=".8" direction="right"></back>
+          <dy-back scale=".8" direction="right"></dy-back>
         </div>
       </div>
       <div class="row" @click="$nav('/me/choose-location')">
         <div class="left">所在地</div>
         <div class="right">
           <span>{{ isEmpty(userinfo.location) }}</span>
-          <back scale=".8" direction="right"></back>
+          <dy-back scale=".8" direction="right"></dy-back>
         </div>
       </div>
       <div class="row" @click="$nav('/me/add-school')">
         <div class="left">学校</div>
         <div class="right">
           <span>{{ isEmpty(userinfo.school.name) }}</span>
-          <back scale=".8" direction="right"></back>
+          <dy-back scale=".8" direction="right"></dy-back>
         </div>
       </div>
     </div>
diff --git a/src/pages/message/AllMessage.vue b/src/pages/message/AllMessage.vue
index 6d1447d..1a27c4f 100644
--- a/src/pages/message/AllMessage.vue
+++ b/src/pages/message/AllMessage.vue
@@ -100,7 +100,7 @@
           </div>
           <div class="look-all" v-if="!showAll" @click="showAll = true">
             <span>查看全部</span>
-            <back/>
+            <dy-back/>
           </div>
         </div>
         <div class="title">
diff --git a/src/pages/message/Message.vue b/src/pages/message/Message.vue
index f1b61e8..23411a3 100644
--- a/src/pages/message/Message.vue
+++ b/src/pages/message/Message.vue
@@ -43,7 +43,7 @@
                 </div>
               </div>
               <div class="right">
-                <back class="arrow" mode="gray" img="back" direction="right"/>
+                <dy-back class="arrow" mode="gray" img="back" direction="right"/>
               </div>
             </div>
           </div>
@@ -62,7 +62,7 @@
                 </div>
               </div>
               <div class="right">
-                <back class="arrow" mode="gray" img="back" direction="right"/>
+                <dy-back class="arrow" mode="gray" img="back" direction="right"/>
               </div>
             </div>
           </div>
@@ -287,7 +287,7 @@
               <img class="left" src="../../assets/img/icon/people-gray.png" alt="">
               <div class="right">
                 <span>已加入的群聊</span>
-                <back direction="right" mode="light"></back>
+                <dy-back direction="right" mode="light"></dy-back>
               </div>
             </div>
             <div class="friend-list">
@@ -309,7 +309,7 @@
         </div>
         <div class="joined-chat-wrapper" v-show="showJoinedChat">
           <div class="nav">
-            <back @click="showJoinedChat = false" mode="light" scale="1.2"></back>
+            <dy-back @click="showJoinedChat = false" mode="light" scale="1.2"></dy-back>
             <span>已加入的群聊</span>
             <span>&nbsp;</span>
           </div>
@@ -322,7 +322,7 @@
                   <div class="name">{{ text.length > 20 ? text.substr(0, 20) + '...' : text }}</div>
                   <div class="num">(3)</div>
                 </div>
-                <back direction="right" mode="light"></back>
+                <dy-back direction="right" mode="light"></dy-back>
               </div>
             </div>
           </div>
@@ -372,7 +372,7 @@
             <span>联系人</span>
             <div class="right" v-if="searchFriendsAll.length > 3" @click="$nav('/message/more-search',{key:searchKey})">
               <span>更多联系人</span>
-              <back mode="gray" img="back" scale=".6" direction="right"/>
+              <dy-back mode="gray" img="back" scale=".6" direction="right"/>
             </div>
           </div>
           <People v-for="(item,index) in searchFriendsAll.slice(0,3)"
diff --git a/src/pages/message/Share2Friend.vue b/src/pages/message/Share2Friend.vue
index 3a459b0..e3cd7c6 100644
--- a/src/pages/message/Share2Friend.vue
+++ b/src/pages/message/Share2Friend.vue
@@ -58,7 +58,7 @@
       <div class="list">
         <div class="row" @click="$nav('/message/joined-group-chat')">
           <span>已加入的群聊</span>
-          <back :scale=".7" direction="right"></back>
+          <dy-back :scale=".7" direction="right"></dy-back>
         </div>
         <div class="title">最近聊天</div>
         <div class="local-row" v-for="item  of friends.recent" @click="toggleSelect(item)">
diff --git a/src/pages/message/chat/Chat.vue b/src/pages/message/chat/Chat.vue
index a9bea50..7ed7ace 100644
--- a/src/pages/message/chat/Chat.vue
+++ b/src/pages/message/chat/Chat.vue
@@ -3,7 +3,7 @@
     <div class="chat-content" @touchstart="tooltipTop = -1">
       <div class="header">
         <div class="left">
-          <back @click="$back"></back>
+          <dy-back @click="$back"></dy-back>
           <div class="badge">12</div>
           <span>zzzz</span>
         </div>
@@ -115,7 +115,7 @@
 
     <div class="preview-img" v-if="false">
       <div class="header">
-        <back mode="light"/>
+        <dy-back mode="light"/>
         <img src="../../../assets/img/icon/search-light.png" alt="">
       </div>
       <img :src="previewImg" alt="" class="img-src">
diff --git a/src/pages/message/chat/ChatDetail.vue b/src/pages/message/chat/ChatDetail.vue
index 0f0b53a..570b9b1 100644
--- a/src/pages/message/chat/ChatDetail.vue
+++ b/src/pages/message/chat/ChatDetail.vue
@@ -34,19 +34,19 @@
         <div class="row" @click="$nav('/set-remark')">
           <div class="left">设备备注</div>
           <div class="right">
-            <back direction="right" scale=".7"></back>
+            <dy-back direction="right" scale=".7"></dy-back>
           </div>
         </div>
         <div class="row" @click="$nav('/home/report',{mode:'chat'})">
           <div class="left">举报</div>
           <div class="right">
-            <back direction="right" scale=".7"></back>
+            <dy-back direction="right" scale=".7"></dy-back>
           </div>
         </div>
         <div class="row" @click="blockDialog = true">
           <div class="left">拉黑</div>
           <div class="right">
-            <back direction="right" scale=".7"></back>
+            <dy-back direction="right" scale=".7"></dy-back>
           </div>
         </div>
       </div>
diff --git a/src/pages/message/notice/DouyinHelper.vue b/src/pages/message/notice/DouyinHelper.vue
index 970e93d..341b544 100644
--- a/src/pages/message/notice/DouyinHelper.vue
+++ b/src/pages/message/notice/DouyinHelper.vue
@@ -19,7 +19,7 @@
             <div class="content-text">{{ item.content }}</div>
             <div class="look-detail">
               <span>查看详情</span>
-              <back direction="right" scale=".6"/>
+              <dy-back direction="right" scale=".6"/>
             </div>
           </div>
         </div>
diff --git a/src/pages/message/notice/MoneyNotice.vue b/src/pages/message/notice/MoneyNotice.vue
index fd9bf06..9e159c6 100644
--- a/src/pages/message/notice/MoneyNotice.vue
+++ b/src/pages/message/notice/MoneyNotice.vue
@@ -43,7 +43,7 @@
 
             <div class="look-detail">
               <span>查看详情</span>
-              <back direction="right" scale=".6"/>
+              <dy-back direction="right" scale=".6"/>
             </div>
           </div>
         </div>
diff --git a/src/pages/message/notice/SystemNotice.vue b/src/pages/message/notice/SystemNotice.vue
index 6c70a33..17738ed 100644
--- a/src/pages/message/notice/SystemNotice.vue
+++ b/src/pages/message/notice/SystemNotice.vue
@@ -22,7 +22,7 @@
             <div class="content-text">{{ item.content }}</div>
             <div class="look-detail" v-if="item.detail">
               <span>查看详情</span>
-              <back direction="right" scale=".6"/>
+              <dy-back direction="right" scale=".6"/>
             </div>
           </div>
         </div>
diff --git a/src/pages/message/notice/TaskNotice.vue b/src/pages/message/notice/TaskNotice.vue
index 30a8de5..4747f0f 100644
--- a/src/pages/message/notice/TaskNotice.vue
+++ b/src/pages/message/notice/TaskNotice.vue
@@ -31,7 +31,7 @@
             <div class="content-text">{{ item.content }}</div>
             <div class="look-detail" v-if="item.detail">
               <span>查看详情</span>
-              <back direction="right" scale=".6"/>
+              <dy-back direction="right" scale=".6"/>
             </div>
           </div>
         </div>
diff --git a/src/pages/people/FindAcquaintance.vue b/src/pages/people/FindAcquaintance.vue
index 2fe94f4..a44eee8 100644
--- a/src/pages/people/FindAcquaintance.vue
+++ b/src/pages/people/FindAcquaintance.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="FindAcquaintance" id="FindAcquaintance">
     <div class="header">
-      <back mode="light" @click="back"></back>
+      <dy-back mode="light" @click="back"></dy-back>
       <Indicator
           style="width: 50%;"
           tabStyleWidth="40%"
@@ -30,7 +30,7 @@
                 <div class="text1">查看通讯录朋友</div>
                 <div class="text2">看看有谁在抖音</div>
               </div>
-              <back direction="right"></back>
+              <dy-back direction="right"></dy-back>
             </div>
           </div>
           <div class="line"></div>
diff --git a/src/pages/slideHooks/Shop.vue b/src/pages/slideHooks/Shop.vue
index 7587742..b9c908c 100644
--- a/src/pages/slideHooks/Shop.vue
+++ b/src/pages/slideHooks/Shop.vue
@@ -1,13 +1,189 @@
 <template>
-
+  <div id="Shop">
+    <div class="search">
+      <div class="search-input">
+        <img src="@/assets/img/icon/search-gray.png" alt="">
+        <div class="placeholder">50元话费充值</div>
+        <img src="@/assets/img/icon/scan-gray.png" alt="">
+        <div class="search-notice">搜索</div>
+      </div>
+      <div class="more">
+        <img src="@/assets/img/icon/category-gray.png" alt="">
+        <span>更多</span>
+      </div>
+    </div>
+    <Scroll class="Scroll"
+            @pulldown="loadData">
+      <div class="options">
+        <div class="option">
+          <img src="@/assets/img/icon/scan-gray.png" alt="">
+          <span>我的订单 快捷查单</span>
+        </div>
+        <div class="option">
+          <img src="@/assets/img/icon/scan-gray.png" alt="">
+          <span>购物车 空空如也</span>
+        </div>
+      </div>
+      <div class="navs">
+        <div class="wrapper">
+          <div class="nav" v-for="i in 20">推荐</div>
+        </div>
+      </div>
+      <div class="goods-list">
+        <div class="goods" v-for="item in state.list">
+          <!--                <img class="poster" v-lazy="Utils.$imgPreview(item.src)"/>-->
+          <img class="poster" :src="Utils.$imgPreview(item.src)"/>
+        </div>
+      </div>
+    </Scroll>
+  </div>
 </template>
 
-<script>
-export default {
-  name: "Shop"
+<script setup>
+import {onMounted, reactive} from "vue";
+import Utils from "@/utils";
+import Scroll from "@/components/Scroll.vue";
+
+const state = reactive({
+  list: []
+})
+
+function loadData() {
+  console.log('loadData')
+  for (let i = 1; i < 12; i++) {
+    let temp = {
+      src: new URL(`../../assets/img/poster/${i}.jpg`, import.meta.url).href,
+      author: new URL(`../../assets/img/avatar.png`, import.meta.url).href,
+    }
+    state.list.push(temp)
+  }
 }
+
+onMounted(() => {
+  for (let i = 1; i < 12; i++) {
+    let temp = {
+      src: new URL(`../../assets/img/poster/${i}.jpg`, import.meta.url).href,
+      author: new URL(`../../assets/img/avatar.png`, import.meta.url).href,
+    }
+    state.list.push(temp)
+  }
+  setTimeout(() => {
+    // var $grid = $('.goods-list').imagesLoaded( function() {
+    //   // init Isotope after all images have loaded
+    //   $grid.isotope({
+    //     itemSelector: '.goods',
+    //   });
+    // });
+    let $grid = $('.goods-list').isotope({
+      // options...
+      itemSelector: '.goods',
+    });
+    console.log('$grid', $grid)
+    $grid.imagesLoaded().progress(function () {
+      $grid.isotope('layout');
+    });
+  })
+
+})
 </script>
 
-<style scoped>
+<style scoped lang="less">
+@import "@/assets/less/index";
 
+#Shop {
+  font-size: 14rem;
+  color: white;
+
+  .search {
+    display: flex;
+    align-items: center;
+    padding: 20rem;
+
+    img {
+      width: 20rem;
+    }
+
+    .search-input {
+      border: 3rem solid rgb(140, 48, 74);
+      border-radius: 8rem;
+      padding: 10rem 20rem;
+      flex: 1;
+      display: flex;
+
+      .placeholder {
+        flex: 1;
+      }
+
+      img {
+        margin-right: 10rem;
+      }
+
+      .search-notice {
+        color: rgb(242, 62, 92);
+      }
+    }
+
+    .more {
+      margin-left: 20rem;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 12rem;
+    }
+  }
+
+  .options {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20rem;
+    padding: 0 20rem;
+
+    img {
+      width: 20rem;
+      margin-right: 10rem;
+    }
+
+    .option {
+      flex: 1;
+      display: flex;
+      background: rgb(63, 58, 78);
+      padding: 8rem;
+      border-radius: 8rem;
+    }
+  }
+
+  .navs {
+    overflow: auto;
+    padding: 0 10rem;
+
+    .wrapper {
+      display: flex;
+      //flex-wrap: wrap;
+    }
+
+    .nav {
+      margin: 10rem;
+      padding-bottom: 10rem;
+      word-break: keep-all;
+      //border-bottom: 2rem solid white;
+    }
+  }
+
+  .Scroll {
+    //height: calc(100vh - @header-height) !important;
+    height: calc(100vh - 90rem) !important;
+  }
+
+  .goods-list {
+    .goods {
+      width: 50%;
+      overflow: hidden;
+
+      img {
+        width: 100%;
+      }
+    }
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/test/Test.vue b/src/pages/test/Test.vue
index 6c7e458..6739b5d 100644
--- a/src/pages/test/Test.vue
+++ b/src/pages/test/Test.vue
@@ -3,7 +3,8 @@
   <!--  <SlideUser></SlideUser>-->
   <!--  <SlideImgs></SlideImgs>-->
   <!--  <TestSwiperJs></TestSwiperJs>-->
-  <slideHooks/>
+<!--  <slideHooks/>-->
+  <Shop/>
 <!--  <UserPanel/>-->
 
   <!--  <div class="body">-->
@@ -23,10 +24,12 @@ import slideHooks from '../slideHooks'
 import TestSwiperJs from "./TestSwiperJs";
 import {mat4} from "gl-matrix";
 import UserPanel from "@/components/UserPanel.vue";
+import Shop from "@/pages/slideHooks/Shop.vue";
 
 export default {
   name: "Test",
   components: {
+    Shop,
     UserPanel,
     slideHooks,
     TestSlide,
