From c2d105a0f281e9f02594ec03ac844a954d062101 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Thu, 7 Oct 2021 23:53:31 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E6=88=91=E7=9A=84=E9=9F=B3?=
 =?UTF-8?q?=E4=B9=90=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                    |   4 +-
 src/App.vue                                  |  27 +-
 src/assets/img/icon/me/float-play.png        | Bin 0 -> 6789 bytes
 src/components/Comment.vue                   |   1 +
 src/components/Mask.vue                      |   6 +-
 src/components/Share.vue                     |  93 +++++--
 src/components/dialog/FromBottomDialog.vue   |  61 ++---
 src/components/slide/SlideColumnList.vue     |  45 +++-
 src/pages/home/Music.vue                     |   3 +-
 src/pages/home/components/FollowSetting.vue  |   1 +
 src/pages/home/components/FollowSetting2.vue |   1 +
 src/pages/home/components/ShareToFriend.vue  |   9 +-
 src/pages/login/OtherLogin.vue               |   3 +-
 src/pages/me/MyMusic.vue                     | 268 ++++++------------
 src/pages/me/RequestUpdate.vue               |   3 +-
 src/pages/me/components/CollectMusic.vue     | 269 +++++++++++++++++++
 src/pages/me/components/GuessMusic.vue       | 251 +++++++++++++++++
 src/pages/me/components/SlideItemMusic.vue   |  70 ++---
 src/pages/message/Message.vue                |   2 +-
 src/pages/message/components/BlockDialog.vue |   1 +
 src/pages/people/FindAcquaintance.vue        |   3 +-
 src/utils/dom.js                             |  21 ++
 22 files changed, 815 insertions(+), 327 deletions(-)
 create mode 100644 src/assets/img/icon/me/float-play.png
 create mode 100644 src/pages/me/components/CollectMusic.vue
 create mode 100644 src/pages/me/components/GuessMusic.vue

diff --git a/README.md b/README.md
index 2771c07..6f45d63 100644
--- a/README.md
+++ b/README.md
@@ -24,9 +24,9 @@
 -- 粉丝|0
 -- 编辑资料|&#9745;
 -- 添加朋友|&#9745;
--- 我的音乐|50%
--- 收藏视频\音乐|50%
+-- 我的音乐|&#9745;
 -- 抖音商城|0
+-- 收藏视频\音乐|50%
 -- 右侧菜单子页面|10%
 -- 设置|&#9745;
 -- -- 子页面|&#9745;
diff --git a/src/App.vue b/src/App.vue
index d07d9e1..faa0801 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,5 @@
 <template>
   <router-view v-slot="{ Component }">
-    <transition name="fade">
-      <Mask v-if="maskDialog" @click="hideMaskDialog" :mode="maskDialogMode"></Mask>
-    </transition>
     <transition :name="transitionName">
       <!--      <keep-alive>-->
       <!--      </keep-alive>-->
@@ -19,26 +16,22 @@
 * try {navigator.control.gesture(false);} catch (e) {} //UC浏览器关闭默认手势事件
 try {navigator.control.longpressMenu(false);} catch (e) {} //关闭长按弹出菜单
 * */
+import * as Vue from "vue";
+import Loading from "./components/Loading";
+import Mask from "./components/Mask";
+
 export default {
   name: 'App',
+  components: {
+    Mask
+  },
   data() {
     return {
       transitionName: 'go',
     }
   },
-  computed: {
-    maskDialog() {
-      return this.$store.state.maskDialog
-    },
-    maskDialogMode() {
-      return this.$store.state.maskDialogMode
-    },
-  },
-  methods: {
-    hideMaskDialog() {
-      this.$store.commit('setMaskDialog', {state: false, mode: this.maskDialogMode})
-    }
-  },
+  computed: {},
+  methods: {},
   // watch $route 决定使用哪种过渡
   watch: {
     '$route'(to, from) {
@@ -107,7 +100,7 @@ export default {
       const toDepth = routeDeep.indexOf(to.path)
       const fromDepth = routeDeep.indexOf(from.path)
       this.transitionName = toDepth > fromDepth ? 'go' : 'back'
-    }
+    },
   },
   mounted() {
     // this.$store.dispatch('getFriends')
diff --git a/src/assets/img/icon/me/float-play.png b/src/assets/img/icon/me/float-play.png
new file mode 100644
index 0000000000000000000000000000000000000000..9bfda2a35eb874a2134174aecd89508eab4272d5
GIT binary patch
literal 6789
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

literal 0
HcmV?d00001

diff --git a/src/components/Comment.vue b/src/components/Comment.vue
index 5f37837..3581504 100644
--- a/src/components/Comment.vue
+++ b/src/components/Comment.vue
@@ -1,5 +1,6 @@
 <template>
   <from-bottom-dialog
+      page-id="home-index"
       v-model="modelValue"
       @cancel="cancel"
       :show-heng-gang="false"
diff --git a/src/components/Mask.vue b/src/components/Mask.vue
index a050473..6a36a63 100644
--- a/src/components/Mask.vue
+++ b/src/components/Mask.vue
@@ -4,6 +4,8 @@
   ></div>
 </template>
 <script>
+//未以组件的方式使用，FromBottomDialog.vue里面是用js append到dom里面去的，
+//以组件的方式使用，不好随意插位置，插到app下面，又会出现定位覆盖的问题
 export default {
   name: "Mask",
   props: {
@@ -15,7 +17,7 @@ export default {
 }
 </script>
 
-<style scoped lang="less">
+<style lang="less">
 
 .Mask {
   z-index: 3;
@@ -35,7 +37,7 @@ export default {
   }
 
   &.lightgray {
-    background: rgba(0, 0, 0, 0.15);
+    background: rgba(0, 0, 0, 0.25);
   }
 
   &.white {
diff --git a/src/components/Share.vue b/src/components/Share.vue
index b5e86b3..cc215cf 100644
--- a/src/components/Share.vue
+++ b/src/components/Share.vue
@@ -1,5 +1,6 @@
 <template>
   <from-bottom-dialog
+      :page-id="pageId"
       v-model="modelValue"
       @cancel="closeShare"
       :show-heng-gang="false"
@@ -24,34 +25,32 @@
         </div>
       </div>
       <div class="line"></div>
-      <div class="shares ">
+      <div class="shares">
         <template v-if="mode === 'video'">
           <div class="share-to" @click="$no">
             <img src="../assets/img/icon/components/video/torichang.png" alt="">
             <span>分享日常</span>
           </div>
-        </template>
-        <div class="share-to" @click="closeShare($emit('ShareToFriend'))">
-          <img src="../assets/img/icon/components/video/tofriend.webp" alt="">
-          <span>私信朋友</span>
-        </div>
-        <div class="share-to" @click="closeShare($emit('showShare2WeChatZone'))">
-          <img src="../assets/img/icon/components/video/towechat.webp" alt="">
-          <span>朋友圈</span>
-        </div>
-        <div class="share-to" @click="closeShare($emit('share2WeChat'))">
-          <img src="../assets/img/icon/components/video/towechatchat.webp" alt="">
-          <span>微信好友</span>
-        </div>
-        <div class="share-to" @click="closeShare($emit('share2QQZone'))">
-          <img src="../assets/img/icon/components/video/tozone.webp" alt="">
-          <span>QQ空间</span>
-        </div>
-        <div class="share-to" @click="closeShare($emit('share2QQ'))">
-          <img src="../assets/img/icon/components/video/toqq.webp" alt="">
-          <span>QQ好友</span>
-        </div>
-        <template v-if="mode === 'video'">
+          <div class="share-to" @click="closeShare($emit('ShareToFriend'))">
+            <img src="../assets/img/icon/components/video/tofriend.webp" alt="">
+            <span>私信朋友</span>
+          </div>
+          <div class="share-to" @click="closeShare($emit('showShare2WeChatZone'))">
+            <img src="../assets/img/icon/components/video/towechat.webp" alt="">
+            <span>朋友圈</span>
+          </div>
+          <div class="share-to" @click="closeShare($emit('share2WeChat'))">
+            <img src="../assets/img/icon/components/video/towechatchat.webp" alt="">
+            <span>微信好友</span>
+          </div>
+          <div class="share-to" @click="closeShare($emit('share2QQZone'))">
+            <img src="../assets/img/icon/components/video/tozone.webp" alt="">
+            <span>QQ空间</span>
+          </div>
+          <div class="share-to" @click="closeShare($emit('share2QQ'))">
+            <img src="../assets/img/icon/components/video/toqq.webp" alt="">
+            <span>QQ好友</span>
+          </div>
           <div class="share-to" @click="closeShare($emit('showShareDuoshan'))">
             <img src="../assets/img/icon/components/video/duoshan.png" alt="">
             <span>多闪</span>
@@ -60,11 +59,47 @@
             <img src="../assets/img/icon/components/video/totoutiao.webp" alt="">
             <span>今日头条</span>
           </div>
+          <div class="share-to" @click="closeShare($emit('share2Webo'))">
+            <img src="../assets/img/icon/components/video/toweibo.webp" alt="">
+            <span>微博</span>
+          </div>
+        </template>
+        <template v-if="mode === 'music'">
+          <div class="share-to" @click="closeShare($emit('ShareToFriend'))">
+            <img src="../assets/img/icon/components/video/tofriend.webp" alt="">
+            <span>私信朋友</span>
+          </div>
+          <div class="share-to" @click="closeShare($emit('showShare2WeChatZone'))">
+            <img src="../assets/img/icon/components/video/towechat.webp" alt="">
+            <span>朋友圈</span>
+          </div>
+          <div class="share-to" @click="closeShare($emit('share2WeChat'))">
+            <img src="../assets/img/icon/components/video/towechatchat.webp" alt="">
+            <span>微信好友</span>
+          </div>
+          <div class="share-to" @click="closeShare($emit('share2QQZone'))">
+            <img src="../assets/img/icon/components/video/tozone.webp" alt="">
+            <span>QQ空间</span>
+          </div>
+          <div class="share-to" @click="closeShare($emit('share2QQ'))">
+            <img src="../assets/img/icon/components/video/toqq.webp" alt="">
+            <span>QQ好友</span>
+          </div>
+          <div class="share-to" @click="closeShare($emit('share2Webo'))">
+            <img src="../assets/img/icon/components/video/toweibo.webp" alt="">
+            <span>微博</span>
+          </div>
+        </template>
+        <template v-if="mode === 'my-music'">
+          <div class="share-to" @click="$no">
+            <img src="../assets/img/icon/components/video/torichang.png" alt="">
+            <span>转发到日常</span>
+          </div>
+          <div class="share-to" @click="closeShare($emit('ShareToFriend'))">
+            <img src="../assets/img/icon/components/video/tofriend.webp" alt="">
+            <span>私信朋友</span>
+          </div>
         </template>
-        <div class="share-to" @click="closeShare($emit('share2Webo'))">
-          <img src="../assets/img/icon/components/video/toweibo.webp" alt="">
-          <span>微博</span>
-        </div>
       </div>
       <div class="toolbar ">
         <template v-if="mode === 'qrcode'">
@@ -174,6 +209,10 @@ export default {
       type: String,
       default: null
     },
+    pageId: {
+      type: String,
+      default: 'home-index'
+    },
     canDownload: {
       type: Boolean,
       default: true
diff --git a/src/components/dialog/FromBottomDialog.vue b/src/components/dialog/FromBottomDialog.vue
index b3a306a..ed9b87f 100644
--- a/src/components/dialog/FromBottomDialog.vue
+++ b/src/components/dialog/FromBottomDialog.vue
@@ -42,11 +42,6 @@ export default {
       // default: 'light'
       // default: 'white'
     },
-    //触摸，是否可以滑动
-    touchMoved: {
-      type: Boolean,
-      default: true
-    },
     maskMode: {
       type: String,
       default: 'dark'
@@ -61,41 +56,40 @@ export default {
     },
     pageId: {
       type: String,
-      default: null
-    }
+      default: null,
+      required: true
+    },
+    borderRadius: {
+      type: String,
+      default: '.5rem .5rem 0 0'
+    },
   },
   watch: {
     modelValue(newVal) {
-      let app = document.getElementById('app')
+      let page = document.getElementById(this.pageId)
       if (newVal) {
-        if (this.pageId) {
-          let page = document.getElementById(this.pageId)
-          this.pagePosition = this.$getCss2(page, 'position')
-          page.style.position = 'absolute'
-        } else {
-          this.pagePosition = this.$getCss2(app.children[0], 'position')
-          app.children[0].style.position = 'absolute'
-        }
+        this.pagePosition = this.$getCss2(page, 'position')
+        page.style.position = 'absolute'
         this.scroll = document.documentElement.scrollTop
         document.body.style.position = 'fixed'
         document.body.style.top = -this.scroll + 'px'
+
+        let maskTemplate = `<div class="Mask fade-in ${this.maskMode}"></div>`
+        let mask = new Dom().create(maskTemplate)
+        mask.on('click', () => this.hide(false))
+        page.appendChild(mask.els[0])
       } else {
-        if (this.pageId) {
-          let page = document.getElementById(this.pageId)
-          page.style.position = this.pagePosition || 'fixed'
-        } else {
-          app.children[1].style.position = this.pagePosition || 'fixed'
-        }
+        let page = document.getElementById(this.pageId)
+        page.style.position = this.pagePosition || 'fixed'
         document.body.style.position = 'static'
         document.documentElement.scrollTop = this.scroll
+
+        let mask = new Dom('.Mask').replaceClass('fade-in', 'fade-out')
+        setTimeout(() => {
+          mask.remove()
+        }, 300)
       }
-      this.$store.commit('setMaskDialog', {state: newVal, mode: this.maskMode})
     },
-    maskDialog(newVal) {
-      if (!newVal) {
-        this.hide(newVal)
-      }
-    }
   },
   data() {
     return {
@@ -106,11 +100,7 @@ export default {
       pagePosition: null
     }
   },
-  computed: {
-    maskDialog() {
-      return this.$store.state.maskDialog
-    },
-  },
+  computed: {},
   created() {
   },
   methods: {
@@ -149,13 +139,11 @@ export default {
       this.$emit('cancel')
     },
     start(e) {
-      if (!this.touchMoved) return;
       if (this.$refs.dialog.scrollTop !== 0) return
       this.startLocationY = e.touches[0].pageY
       this.startTime = Date.now()
     },
     move(e) {
-      if (!this.touchMoved) return;
       if (this.$refs.dialog.scrollTop !== 0) return
       this.moveYDistance = e.touches[0].pageY - this.startLocationY
       if (this.moveYDistance > 0) {
@@ -164,7 +152,6 @@ export default {
       }
     },
     end(e) {
-      if (!this.touchMoved) return;
 
       //点击
       if (Date.now() - this.startTime < 150 && Math.abs(this.moveYDistance) < 30) {
@@ -203,7 +190,7 @@ export default {
   bottom: 0;
   left: 0;
   box-sizing: border-box;
-  border-radius: .5rem .5rem 0 0;
+  border-radius: v-bind(borderRadius);
   transition: all .3s;
 
   &.dark {
diff --git a/src/components/slide/SlideColumnList.vue b/src/components/slide/SlideColumnList.vue
index b6a0a1b..da5eea5 100644
--- a/src/components/slide/SlideColumnList.vue
+++ b/src/components/slide/SlideColumnList.vue
@@ -10,6 +10,8 @@
   </div>
 </template>
 <script>
+import {nextTick} from "vue";
+
 export default {
   name: "BaseSlideList",
   props: {
@@ -17,6 +19,15 @@ export default {
       type: Number,
       default: () => 0
     },
+    //改变index，是否使用动画
+    changeActiveIndexUseAnim: {
+      type: Boolean,
+      default: true
+    },
+    canMove: {
+      type: Boolean,
+      default: true
+    },
   },
   data() {
     return {
@@ -42,8 +53,7 @@ export default {
     }
   },
   watch: {
-    activeIndex() {
-      // console.log('activeIndex')
+    activeIndex(newVal) {
       this.changeIndex()
     },
   },
@@ -52,14 +62,29 @@ export default {
     await this.checkChildren()
   },
   methods: {
-    checkChildren() {
-      this.slideList = this.$refs.slideList
-      this.slideItems = this.slideList.children
-      this.wrapperHeight = this.$getCss(this.slideList, 'height')
-      for (let i = 0; i < this.slideItems.length; i++) {
-        let el = this.slideItems[i]
-        this.slideItemsHeights.push(this.$getCss(el, 'height'))
+    async changeIndex() {
+      await this.checkChildren()
+      this.currentSlideItemIndex = this.activeIndex
+      if (this.changeActiveIndexUseAnim) {
+        this.$setCss(this.slideList, 'transition-duration', `300ms`)
       }
+      this.$setCss(this.slideList, 'transform', `translate3d(0px, ${-this.getHeight(this.currentSlideItemIndex) + this.moveYDistance}px, 0px)`)
+      this.$attrs['onUpdate:active-index'] && this.$emit('update:active-index', this.currentSlideItemIndex)
+    },
+    checkChildren() {
+      return new Promise(resolve => {
+        nextTick(() => {
+          this.slideList = this.$refs.slideList
+          this.slideItems = this.slideList.children
+          this.wrapperHeight = this.$getCss(this.slideList, 'height')
+          this.slideItemsHeights = []
+          for (let i = 0; i < this.slideItems.length; i++) {
+            let el = this.slideItems[i]
+            this.slideItemsHeights.push(this.$getCss(el, 'height'))
+          }
+          resolve()
+        })
+      })
     },
     touchStart(e) {
       this.checkChildren()
@@ -70,6 +95,7 @@ export default {
       this.startTime = Date.now()
     },
     touchMove(e) {
+      if (!this.canMove) return;
       this.moveXDistance = e.touches[0].pageX - this.startLocationX
       this.moveYDistance = e.touches[0].pageY - this.startLocationY
 
@@ -90,6 +116,7 @@ export default {
       }
     },
     touchEnd(e) {
+      if (!this.canMove) return;
       if (this.isCanDownWiping) {
         if (this.currentSlideItemIndex === 0 && !this.isDrawDown) return
         if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawDown) return this.$attrs['onEnd'] && this.$emit('end')
diff --git a/src/pages/home/Music.vue b/src/pages/home/Music.vue
index 1ae894e..1743dc9 100644
--- a/src/pages/home/Music.vue
+++ b/src/pages/home/Music.vue
@@ -60,6 +60,7 @@
     <Share v-model="isSharing"
            mode="music"
            ref="share"
+           pageId="Music"
            @showDouyinCode="showDouyinCode = true"
            @showShare2WeChatZone="shareType = 2"
            @share2WeChat="shareType = 3"
@@ -85,7 +86,7 @@
       </template>
     </ConfirmDialog>
 
-    <ShareToFriend v-model="shareToFriend"/>
+    <ShareToFriend pageId="Music" v-model="shareToFriend"/>
 
   </div>
 </template>
diff --git a/src/pages/home/components/FollowSetting.vue b/src/pages/home/components/FollowSetting.vue
index cc52b44..b4d1940 100644
--- a/src/pages/home/components/FollowSetting.vue
+++ b/src/pages/home/components/FollowSetting.vue
@@ -1,5 +1,6 @@
 <template>
   <from-bottom-dialog
+      page-id="home-index"
       v-model="modelValue"
       :show-heng-gang="false"
       maskMode="dark"
diff --git a/src/pages/home/components/FollowSetting2.vue b/src/pages/home/components/FollowSetting2.vue
index 603e8bf..c539f20 100644
--- a/src/pages/home/components/FollowSetting2.vue
+++ b/src/pages/home/components/FollowSetting2.vue
@@ -1,5 +1,6 @@
 <template>
   <from-bottom-dialog
+      page-id="home-index"
       v-model="modelValue"
       :show-heng-gang="false"
       maskMode="dark"
diff --git a/src/pages/home/components/ShareToFriend.vue b/src/pages/home/components/ShareToFriend.vue
index 398e858..d012a44 100644
--- a/src/pages/home/components/ShareToFriend.vue
+++ b/src/pages/home/components/ShareToFriend.vue
@@ -1,5 +1,6 @@
 <template>
   <from-bottom-dialog
+      :page-id="pageId"
       v-model="modelValue"
       @cancel="cancel"
       maskMode="light"
@@ -108,7 +109,11 @@ export default {
     Check
   },
   props: {
-    modelValue: false
+    modelValue: false,
+    pageId: {
+      type: String,
+      default: 'home-index'
+    },
   },
   data() {
     return {
@@ -167,7 +172,7 @@ export default {
 
 .button {
   width: 6.4rem;
-  height: 2.6rem!important;
+  height: 2.6rem !important;
 }
 
 @avatar-width: 3.8rem;
diff --git a/src/pages/login/OtherLogin.vue b/src/pages/login/OtherLogin.vue
index 26e068b..1a299dc 100644
--- a/src/pages/login/OtherLogin.vue
+++ b/src/pages/login/OtherLogin.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="other-login">
+  <div class="other-login" id="other-login">
     <BaseHeader mode="light" backMode="dark" backImg="back">
       <template v-slot:right>
         <span class="f16">帮助</span>
@@ -41,6 +41,7 @@
       </div>
 
       <from-bottom-dialog
+          page-id="other-login"
           v-model="isOtherLogin"
           :show-heng-gang="false"
           height="27rem"
diff --git a/src/pages/me/MyMusic.vue b/src/pages/me/MyMusic.vue
index eeb7df8..ad1426b 100644
--- a/src/pages/me/MyMusic.vue
+++ b/src/pages/me/MyMusic.vue
@@ -9,13 +9,9 @@
       </IndicatorLight>
       <back style="opacity: 0;" mode="light" img="back"/>
     </div>
-    <SlideRowList
-        name="myMusicList"
-        v-model:active-index="slideIndex">
+    <SlideRowList name="myMusicList" v-model:active-index="slideIndex">
       <SlideItem>
-        <SlideColumnList>
-          <SlideItemMusic v-model="guessMusic[index]" v-for="(item,index) in guessMusic "/>
-        </SlideColumnList>
+        <GuessMusic :list="guessMusic"/>
       </SlideItem>
       <SlideItem style="overflow: auto;">
         <div class="my-collect">
@@ -29,7 +25,7 @@
               <img class="menu" src="../../assets/img/icon/menu-white.png" alt="">
             </div>
             <div class="collect-list">
-              <div class="item" v-for="item in collectMusic" @click="playMusic(item)">
+              <div class="item" v-for="(item,index) in collectMusic" @click="page2PlayMusic(item)">
                 <div class="left">
                   <div class="cover-wrapper">
                     <img v-lazy="$imgPreview(item.cover)" alt="" class="cover">
@@ -44,7 +40,8 @@
                   </div>
                 </div>
                 <div class="right">
-                  <img v-if="item.is_play" class="playing-icon" src="../../assets/img/icon/me/pinlv.gif">
+                  <img v-if="page2SlideIndex === index" class="playing-icon"
+                       src="../../assets/img/icon/me/pinlv.gif">
                 </div>
               </div>
             </div>
@@ -56,7 +53,7 @@
               </div>
             </div>
             <div class="recommend-list">
-              <div class="item" v-for="item in recommendMusic" @click="playMusic(item)">
+              <div class="item" v-for="(item,index) in recommendMusic" @click="page2PlayMusic(item)">
                 <div class="left">
                   <div class="cover-wrapper">
                     <img v-lazy="$imgPreview(item.cover)" alt="" class="cover">
@@ -71,39 +68,46 @@
                   </div>
                 </div>
                 <div class="right">
-                  <img v-if="item.is_play" class="playing-icon" src="../../assets/img/icon/me/pinlv.gif">
+                  <img v-if="page2SlideIndex - collectMusic.length === index" class="playing-icon"
+                       src="../../assets/img/icon/me/pinlv.gif">
                   <div class="collect-icon">
-                    <img src="../../assets/img/icon/star-white.png" v-show="!isCollect" @click="isCollect = !isCollect">
-                    <img src="../../assets/img/icon/star-yellow.png" v-show="isCollect" @click="isCollect = !isCollect">
+                    <img src="../../assets/img/icon/star-white.png" v-show="!item.isCollect"
+                         @click.stop="item.isCollect = !item.isCollect">
+                    <img src="../../assets/img/icon/star-yellow.png" v-show="item.isCollect"
+                         @click.stop="item.isCollect = !item.isCollect">
                   </div>
                 </div>
               </div>
             </div>
           </div>
-          <div class="playing" @click="isShowCollectDialog = true">
-            <div class="playing-wrapper">
-              <div class="cover-wrapper">
-                <img v-lazy="$imgPreview(currentMusic.cover)" alt="" class="cover">
+          <transition name="float-play">
+            <div v-if="isShowFloatPlay" class="playing" @click="isShowCollectDialog = true">
+              <div class="playing-wrapper">
+                <div class="cover-wrapper">
+                  <img v-lazy="$imgPreview(currentMusic.cover)" alt="" class="cover">
+                </div>
+                <div class="name">{{ currentMusic.name }}</div>
+                <img v-show="page2IsPlay" @click.stop="togglePage2Play" class="option"
+                     src="../../assets/img/icon/me/float-pause-one.png" alt="">
+                <img v-show="!page2IsPlay" @click.stop="togglePage2Play" class="option"
+                     src="../../assets/img/icon/me/float-play.png" alt="">
+                <img @click.stop="$no" class="menu-list" src="../../assets/img/icon/me/music-list.png" alt="">
               </div>
-              <div class="name">{{ currentMusic.name }}</div>
-              <img class="option" src="../../assets/img/icon/me/float-pause-one.png" alt="">
-              <img class="menu-list" src="../../assets/img/icon/me/music-list.png" alt="">
             </div>
-          </div>
+          </transition>
         </div>
       </SlideItem>
     </SlideRowList>
 
+
     <transition name="my-collect-dialog">
-      <div class="my-collect-dialog" v-if="isShowCollectDialog">
+      <div class="my-collect-dialog" v-show="isShowCollectDialog">
         <div class="dialog-header">
           <back class="close" mode="light" img="back" @click="isShowCollectDialog = false"/>
           <span>我的收藏</span>
           <back style="opacity: 0;" mode="light" img="back"/>
         </div>
-        <SlideColumnList>
-          <SlideItemMusic v-model="guessMusic[index]" v-for="(item,index) in guessMusic "/>
-        </SlideColumnList>
+        <CollectMusic ref="CollectMusic" :list="page2Music" v-model:page2SlideIndex="page2SlideIndex"/>
       </div>
     </transition>
   </div>
@@ -116,17 +120,24 @@ import gaobaiqiqiu from '../../assets/data/lyrics/gaobaiqiqiu.lrc'
 import Switches from "../message/components/swtich/switches";
 import SlideItemMusic from "./components/SlideItemMusic";
 import IndicatorLight from "../../components/slide/IndicatorLight";
+import FromBottomDialog from "../../components/dialog/FromBottomDialog";
+import GuessMusic from "./components/GuessMusic";
+import CollectMusic from "./components/CollectMusic";
 
+//TODO 两个page页面的播放冲突未做
 export default {
   name: "MyMusic",
   components: {
+    FromBottomDialog,
     Switches,
     SlideItemMusic,
-    IndicatorLight
+    IndicatorLight,
+    GuessMusic,
+    CollectMusic
   },
   data() {
     return {
-      slideIndex: 0,
+      slideIndex: 1,
       currentMusic: {
         name: '告白气球',
         mp3: 'https://mp32.9ku.com/upload/128/2017/02/05/858423.mp3',
@@ -140,99 +151,43 @@ export default {
       collectMusic: [],
       recommendMusic: [],
       guessMusic: [],
-      lyricsTexts: [],
-      lyricsFullTexts: [],
+
       isShowCollectDialog: false,
-      isPlay: false,
+      isShowFloatPlay: false,
+
       isAutoPlay: true,
-      isLoop: false,
-      isMove: false,
       isCollect: false,
-      isFullLyrics: false,
-      lastPageX: 0,
-      pageX: 0,
-      audio: new Audio(),
-      duration: 0,
-      currentTime: 0,
-      step: 0,
-      startX: 0,
-      slideBarWidth: 0
+
+      page2SlideIndex: -1,
+      page2IsPlay: false
     }
   },
   computed: {
-    ...mapState(['bodyWidth'])
+    ...mapState(['bodyWidth']),
+    page2Music() {
+      return this.collectMusic.concat(this.recommendMusic)
+    }
   },
   created() {
     this.getCollectMusic()
   },
-  mounted() {
-    if (process.env.NODE_ENV === 'development') {
-      this.audio.volume = .2
-    }
-    this.audio.addEventListener('loadedmetadata', e => {
-      this.duration = this.audio.duration
-      this.slideBarWidth = this.$refs.slideBar.clientWidth
-      this.step = this.slideBarWidth / Math.floor(this.duration)
-    })
-    let lrcObj = this.createLrcObj(gaobaiqiqiu);
-    this.lyricsTexts.push(lrcObj.ms[0])
-    this.lyricsTexts.push(lrcObj.ms[1])
-    lrcObj.ms.map(v => {
-      if (v.c) this.lyricsFullTexts.push(v)
-    })
-    console.log(lrcObj.ms)
-    this.audio.addEventListener('timeupdate', e => {
-      let currentTime = Math.ceil(e.target.currentTime)
-      // let lastLyricsText = this.lyricsTexts[this.lyricsTexts.length - 1]
-      // if (Number(lastLyricsText.t) < currentTime) {
-      //   for (let i = 0; i < lrcObj.ms.length; i++) {
-      //     let item = lrcObj.ms[i]
-      //     if (Number(item.t) > currentTime) {
-      //       if (item.c) {
-      //         console.log(item)
-      //         this.t(item)
-      //         break
-      //       }
-      //     }
-      //   }
-      // }
-      if (!this.isMove) {
-        this.currentTime = currentTime
-        if (Math.ceil(e.target.currentTime) * this.step > this.slideBarWidth - 5) {
-          this.pageX = this.slideBarWidth - 5
-        } else {
-          this.pageX = Math.ceil(e.target.currentTime) * this.step
-        }
-      }
-    })
-    this.audio.addEventListener('play', e => this.isPlay = true)
-    this.audio.addEventListener('ended', e => {
-      if (this.isLoop) {
-        this.lastPageX = 0
-        this.audio.currentTime = 0
-        this.audio.play()
-      } else {
-        this.isPlay = false
-      }
-    })
-  },
   methods: {
-    playMusic(item) {
-      this.collectMusic.map(v => v.is_play = false)
-      this.recommendMusic.map(v => v.is_play = false)
-      item.is_play = true
-      this.currentMusic = item
-      this.audio.src = this.currentMusic.mp3
-      this.togglePlay(true)
-    },
-    togglePlay(state) {
-      this.currentMusic.is_play = state || !this.currentMusic.is_play
-      if (this.currentMusic.is_play) {
-        this.audio.play()
+    togglePage2Play() {
+      this.page2IsPlay = !this.page2IsPlay
+      if (this.page2IsPlay) {
+        this.$refs.CollectMusic.play(this.page2SlideIndex)
       } else {
-        this.audio.pause()
+        this.$refs.CollectMusic.pause()
       }
     },
+    page2PlayMusic(item) {
+      this.currentMusic = item
+      this.isShowFloatPlay = true
+      this.page2IsPlay = true
+      this.page2SlideIndex = this.page2Music.findIndex(v => v.name === item.name)
+      this.isShowCollectDialog = true
+      this.$refs.CollectMusic.play(this.page2SlideIndex)
+    },
     async getCollectMusic() {
       this.loading = true
       let res = await this.$api.videos.collect()
@@ -242,93 +197,6 @@ export default {
         this.guessMusic = this.recommendMusic = res.data.music.list.slice(2, -1)
       }
     },
-    createLrcObj(lrc) {
-      let oLRC = {
-        ti: "", //歌曲名
-        ar: "", //演唱者
-        al: "", //专辑名
-        by: "", //歌词制作人
-        offset: 0, //时间补偿值，单位毫秒，用于调整歌词整体位置
-        ms: [] //歌词数组{t:时间,c:歌词}
-      };
-      if (lrc.length === 0) return;
-      let lrcs = lrc.split('\n');//用回车拆分成数组
-      for (let i in lrcs) {//遍历歌词数组
-        lrcs[i] = lrcs[i].replace(/(^\s*)|(\s*$)/g, ""); //去除前后空格
-        let t = lrcs[i].substring(lrcs[i].indexOf("[") + 1, lrcs[i].indexOf("]"));//取[]间的内容
-        let s = t.split(":");//分离:前后文字
-        if (isNaN(parseInt(s[0]))) { //不是数值
-          for (let i in oLRC) {
-            if (i != "ms" && i == s[0].toLowerCase()) {
-              oLRC[i] = s[1];
-            }
-          }
-        } else { //是数值
-          let arr = lrcs[i].match(/\[(\d+:.+?)\]/g);//提取时间字段，可能有多个
-          let start = 0;
-          for (let k in arr) {
-            start += arr[k].length; //计算歌词位置
-          }
-          let content = lrcs[i].substring(start);//获取歌词内容
-          for (let k in arr) {
-            let t = arr[k].substring(1, arr[k].length - 1);//取[]间的内容
-            let s = t.split(":");//分离:前后文字
-            oLRC.ms.push({//对象{t:时间,c:歌词}加入ms数组
-              t: (parseFloat(s[0]) * 60 + parseFloat(s[1])).toFixed(3),
-              c: content
-            });
-          }
-        }
-      }
-      oLRC.ms.sort(function (a, b) {//按时间顺序排序
-        return a.t - b.t;
-      });
-      return oLRC
-      /*
-      for(let i in oLRC){ //查看解析结果
-          console.log(i,":",oLRC[i]);
-      }*/
-    },
-    t(txt) {
-      // if (this.test.length === 2) return
-      this.lyricsTexts.push(txt)
-      nextTick(() => {
-        let comments = this.$refs['lyrics-wrapper']
-        comments.scrollTo({top: comments.scrollHeight - comments.clientHeight, behavior: 'smooth'})
-      })
-    },
-    start(e) {
-      this.startX = e.touches[0].pageX
-    },
-    move(e) {
-      this.isMove = true
-      this.pageX = this.lastPageX + (e.touches[0].pageX - this.startX)
-      if (this.pageX < 0) this.pageX = 0
-      if (this.pageX > this.slideBarWidth) this.pageX = this.slideBarWidth - 5
-      this.currentTime = Math.ceil(this.pageX / this.step)
-      globalMethods.$stopPropagation(e)
-    },
-    end(e) {
-      this.lastPageX = this.pageX
-      this.currentTime = Math.ceil(this.pageX / this.step)
-      this.audio.currentTime = this.currentTime
-      this.audio.play()
-      this.isMove = false
-      globalMethods.$stopPropagation(e)
-    },
-    $durationTime(time) {
-      if (time === 0) return '00:00'
-      else {
-        return this.$duration(time)
-      }
-    },
-    durationStyle(type) {
-      // return {}
-      if (type === 1) {
-        return {width: this.pageX + 'px'}
-      }
-      return {left: this.pageX + 'px'}
-    },
   }
 }
 </script>
@@ -383,6 +251,7 @@ export default {
       display: flex;
       justify-content: space-between;
       align-items: center;
+      color: white;
 
       .left {
         display: flex;
@@ -394,6 +263,7 @@ export default {
         }
 
         .num {
+          font-size: 1.3rem;
           color: gray;
           margin-left: .5rem;
         }
@@ -406,6 +276,7 @@ export default {
 
     .collect-list, .recommend-list {
       .item {
+        color: white;
         display: flex;
         justify-content: space-between;
         margin-bottom: 1.5rem;
@@ -584,7 +455,6 @@ export default {
     }
   }
 
-
   .my-collect-dialog-enter-active,
   .my-collect-dialog-leave-active {
     transition-duration: 300ms;
@@ -596,5 +466,17 @@ export default {
     transition-duration: 300ms;
     transform: translateY(100vh);
   }
+
+  .float-play-enter-active,
+  .float-play-leave-active {
+    transition-duration: 200ms;
+    transform: translateY(0);
+  }
+
+  .float-play-enter-from,
+  .float-play-leave-to {
+    transition-duration: 200ms;
+    transform: translateY(100%);
+  }
 }
 </style>
diff --git a/src/pages/me/RequestUpdate.vue b/src/pages/me/RequestUpdate.vue
index 5820556..d6cab12 100644
--- a/src/pages/me/RequestUpdate.vue
+++ b/src/pages/me/RequestUpdate.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="RequestUpdate">
+  <div class="RequestUpdate" id="RequestUpdate">
     <BaseHeader>
       <template v-slot:center>
         <span class="f16">求更新</span>
@@ -37,6 +37,7 @@
     </div>
 
     <from-bottom-dialog
+        page-id="RequestUpdate"
         height="16rem"
         :show-heng-gang="false"
         mode="white"
diff --git a/src/pages/me/components/CollectMusic.vue b/src/pages/me/components/CollectMusic.vue
new file mode 100644
index 0000000..c89a6e2
--- /dev/null
+++ b/src/pages/me/components/CollectMusic.vue
@@ -0,0 +1,269 @@
+<template>
+  <div id="CollectMusic">
+    <SlideColumnList
+        :changeActiveIndexUseAnim="false"
+        v-model:active-index="activeIndex"
+        :canMove="slideCanMove">
+      <SlideItemMusic
+          :ref="setItemRef"
+          @showList="isShowList = true"
+          @showShare="isSharing = true"
+          @previous="previous"
+          @next="next"
+          @slideCanMove="e => this.slideCanMove = e"
+          v-model="list[index]"
+          v-model:isLoop="isLoop"
+          v-for="(item,index) in list "/>
+    </SlideColumnList>
+    <from-bottom-dialog
+        mask-mode="lightgray"
+        page-id="CollectMusic"
+        border-radius="1.5rem 1.5rem 0 0"
+        :show-heng-gang="false"
+        height="70vh"
+        v-model="isShowList">
+      <div class="music-list-dialog">
+        <div class="music-list-header">
+          <div class="left">待播清单</div>
+          <div class="right" @click="isLoop = !isLoop">
+            <img v-show="isLoop" src="@/assets/img/icon/me/loop.png" alt="">
+            <img v-show="!isLoop" src="@/assets/img/icon/me/play-normal.png" alt="">
+            <span>{{ isLoop ? '单曲循环' : '顺序播放' }}</span>
+          </div>
+        </div>
+        <div class="wrapper">
+          <div class="l-row"
+               @click="play(index)"
+               :class="{active:activeIndex === index}"
+               v-for="(item,index) in list">
+            <div class="left">
+              <img v-if="activeIndex === index" src="@/assets/img/icon/me/pinlv.gif" alt="" class="play-icon">
+              <div class="name">{{ item.name }}</div>
+              <div class="author">{{ item.author }}</div>
+            </div>
+            <back class="right" mode="gray" img="close"/>
+          </div>
+        </div>
+        <div class="footer" @click="isShowList = false">取消</div>
+      </div>
+    </from-bottom-dialog>
+
+    <Share v-model="isSharing"
+           mode="my-music"
+           ref="share"
+           pageId="GuessMusic"
+           @ShareToFriend="delayShowDialog( e => this.isShowShareToFriend = true)"
+    />
+
+    <ShareToFriend pageId="GuessMusic" v-model="isShowShareToFriend"/>
+  </div>
+</template>
+<script>
+import FromBottomDialog from "../../../components/dialog/FromBottomDialog";
+import Switches from "../../message/components/swtich/switches";
+import SlideItemMusic from "./SlideItemMusic";
+import IndicatorLight from "../../../components/slide/IndicatorLight";
+import SlideColumnList from "../../../components/slide/SlideColumnList";
+import Share from "../../../components/Share";
+import ShareToFriend from "../../home/components/ShareToFriend";
+
+export default {
+  name: "GuessMusic",
+  components: {
+    FromBottomDialog,
+    Switches,
+    SlideItemMusic,
+    IndicatorLight,
+    SlideColumnList,
+    Share,
+    ShareToFriend
+  },
+  props: {
+    list: {
+      type: Array,
+      default: []
+    },
+    page2SlideIndex: {
+      type: Number,
+      default: 0
+    },
+  },
+  data() {
+    return {
+      slideCanMove: true,
+      isShowShareToFriend: false,
+      isShowList: false,
+      isSharing: false,
+      isLoop: false,
+      collectSlideIndex: 0,
+      isShowCollectDialog: false,
+      itemRefs: []
+    }
+  },
+  computed: {
+    activeIndex: {
+      get() {
+        return this.page2SlideIndex
+      },
+      set(val) {
+        this.$emit('update:page2SlideIndex', val)
+      }
+    }
+  },
+  created() {
+  },
+  watch: {
+    activeIndex(newVal, oldVal) {
+      this.itemRefs.map(ref => {
+        ref.togglePlay(false)
+      })
+      this.itemRefs[newVal].togglePlay(true, true)
+    }
+  },
+  methods: {
+    previous() {
+      if (this.activeIndex > 0) {
+        this.play(this.activeIndex - 1)
+      }
+    },
+    next() {
+      if (this.activeIndex < this.list.length - 1) {
+        this.play(this.activeIndex + 1)
+      }
+    },
+    delayShowDialog(cb) {
+      setTimeout(() => {
+        cb()
+      }, 100)
+    },
+    setItemRef(el) {
+      if (el) {
+        this.itemRefs.push(el)
+      }
+    },
+    play(index) {
+      this.activeIndex = index
+      this.itemRefs.map(ref => {
+        ref.togglePlay(false)
+      })
+      this.itemRefs[index].togglePlay(true, true)
+    },
+    pause() {
+      this.itemRefs.map(ref => {
+        ref.togglePlay(false)
+      })
+    }
+  }
+}
+</script>
+<style scoped lang="less">
+@import "@/assets/less/index";
+
+#CollectMusic {
+  //width: 100vw;
+  //height: 100vh;
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  overflow: auto;
+  color: white;
+  font-size: 1.4rem;
+}
+
+.music-list-dialog {
+  height: 70vh;
+  @bg-color: #1e1d1d;
+  background: @bg-color;
+
+  .music-list-header {
+    position: fixed;
+    width: 100vw;
+    background: @bg-color;
+    box-sizing: border-box;
+    border-bottom: 1px solid #2a2828;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 5rem;
+    padding: 0 @padding-page;
+    border-radius: 1.5rem 1.5rem 0 0;
+    z-index: 9;
+
+    .left {
+      font-size: 1.6rem;
+    }
+
+    .right {
+      display: flex;
+      align-items: center;
+      font-size: 1.2rem;
+
+      img {
+        width: 2rem;
+        margin-right: .5rem;
+      }
+    }
+  }
+
+  .wrapper {
+    padding-top: 5rem;
+  }
+
+  .l-row {
+    background: @bg-color;
+    height: 5rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 @padding-page;
+
+    &.active {
+      color: @primary-btn-color;
+    }
+
+    .left {
+      display: flex;
+      align-items: center;
+
+      .author {
+        font-size: 1.2rem;
+        color: @second-text-color;
+        margin-left: 2rem;
+        position: relative;
+        display: flex;
+        align-items: center;
+
+        &:after {
+          content: '';
+          width: .6rem;
+          height: .5px;
+          background: @second-text-color;
+          position: absolute;
+          left: -1.2rem;
+        }
+      }
+
+      .play-icon {
+        width: 1.5rem;
+        margin-right: 1rem;
+      }
+    }
+
+    .right {
+      width: 1.5rem;
+    }
+  }
+
+  .footer {
+    background: @bg-color;
+    border-top: 1px solid #2a2828;
+    height: 6rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+</style>
diff --git a/src/pages/me/components/GuessMusic.vue b/src/pages/me/components/GuessMusic.vue
new file mode 100644
index 0000000..0d5cf5b
--- /dev/null
+++ b/src/pages/me/components/GuessMusic.vue
@@ -0,0 +1,251 @@
+<template>
+  <div id="GuessMusic">
+    <SlideColumnList
+        :changeActiveIndexUseAnim="false"
+        v-model:active-index="guessSlideIndex"
+        :canMove="slideCanMove">
+      <SlideItemMusic
+          :ref="setItemRef"
+          @showList="isShowList = true"
+          @showShare="isSharing = true"
+          @previous="previous"
+          @next="next"
+          @slideCanMove="e => this.slideCanMove = e"
+          v-model="list[index]"
+          v-model:isLoop="isLoop"
+          v-for="(item,index) in list "/>
+    </SlideColumnList>
+    <from-bottom-dialog
+        mask-mode="lightgray"
+        page-id="GuessMusic"
+        border-radius="1.5rem 1.5rem 0 0"
+        :show-heng-gang="false"
+        height="70vh"
+        v-model="isShowList">
+      <div class="music-list-dialog">
+        <div class="music-list-header">
+          <div class="left">待播清单</div>
+          <div class="right" @click="isLoop = !isLoop">
+            <img v-show="isLoop" src="@/assets/img/icon/me/loop.png" alt="">
+            <img v-show="!isLoop" src="@/assets/img/icon/me/play-normal.png" alt="">
+            <span>{{ isLoop ? '单曲循环' : '顺序播放' }}</span>
+          </div>
+        </div>
+        <div class="wrapper">
+          <div class="l-row"
+               @click="play(index)"
+               :class="{active:guessSlideIndex === index}"
+               v-for="(item,index) in list">
+            <div class="left">
+              <img v-if="guessSlideIndex === index" src="@/assets/img/icon/me/pinlv.gif" alt="" class="play-icon">
+              <div class="name">{{ item.name }}</div>
+              <div class="author">{{ item.author }}</div>
+            </div>
+            <back class="right" mode="gray" img="close"/>
+          </div>
+        </div>
+        <div class="footer" @click="isShowList = false">取消</div>
+      </div>
+    </from-bottom-dialog>
+
+    <Share v-model="isSharing"
+           mode="my-music"
+           ref="share"
+           pageId="GuessMusic"
+           @ShareToFriend="delayShowDialog( e => this.isShowShareToFriend = true)"
+    />
+
+    <ShareToFriend pageId="GuessMusic" v-model="isShowShareToFriend"/>
+  </div>
+</template>
+<script>
+import FromBottomDialog from "../../../components/dialog/FromBottomDialog";
+import Switches from "../../message/components/swtich/switches";
+import SlideItemMusic from "./SlideItemMusic";
+import IndicatorLight from "../../../components/slide/IndicatorLight";
+import SlideColumnList from "../../../components/slide/SlideColumnList";
+import Share from "../../../components/Share";
+import ShareToFriend from "../../home/components/ShareToFriend";
+
+export default {
+  name: "GuessMusic",
+  components: {
+    FromBottomDialog,
+    Switches,
+    SlideItemMusic,
+    IndicatorLight,
+    SlideColumnList,
+    Share,
+    ShareToFriend
+  },
+  props: {
+    list: {
+      type: Array,
+      default: []
+    }
+  },
+  data() {
+    return {
+      slideCanMove: true,
+      isShowShareToFriend: false,
+      isShowList: false,
+      isSharing: false,
+      isLoop: false,
+      guessSlideIndex: 0,
+      isShowCollectDialog: false,
+      itemRefs: []
+    }
+  },
+  watch: {
+    guessSlideIndex(newVal, oldVal) {
+      this.itemRefs.map(ref => {
+        ref.togglePlay(false)
+      })
+      this.itemRefs[newVal].togglePlay(true, true)
+    }
+  },
+  computed: {},
+  created() {
+  },
+  methods: {
+    previous() {
+      if (this.guessSlideIndex > 0) {
+        this.play(this.guessSlideIndex - 1)
+      }
+    },
+    next() {
+      if (this.guessSlideIndex < this.list.length - 1) {
+        this.play(this.guessSlideIndex + 1)
+      }
+    },
+    delayShowDialog(cb) {
+      setTimeout(() => {
+        cb()
+      }, 100)
+    },
+    setItemRef(el) {
+      if (el) {
+        this.itemRefs.push(el)
+      }
+    },
+    play(index) {
+      this.guessSlideIndex = index
+      this.itemRefs.map(ref => {
+        ref.togglePlay(false)
+      })
+      this.itemRefs[index].togglePlay(true, true)
+    }
+  }
+}
+</script>
+<style scoped lang="less">
+@import "@/assets/less/index";
+
+#GuessMusic {
+  //width: 100vw;
+  //height: 100vh;
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  overflow: auto;
+  color: white;
+  font-size: 1.4rem;
+}
+
+.music-list-dialog {
+  height: 70vh;
+  @bg-color: #1e1d1d;
+  background: @bg-color;
+
+  .music-list-header {
+    position: fixed;
+    width: 100vw;
+    background: @bg-color;
+    box-sizing: border-box;
+    border-bottom: 1px solid #2a2828;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 5rem;
+    padding: 0 @padding-page;
+    border-radius: 1.5rem 1.5rem 0 0;
+    z-index: 9;
+
+    .left {
+      font-size: 1.6rem;
+    }
+
+    .right {
+      display: flex;
+      align-items: center;
+      font-size: 1.2rem;
+
+      img {
+        width: 2rem;
+        margin-right: .5rem;
+      }
+    }
+  }
+
+  .wrapper {
+    padding-top: 5rem;
+  }
+
+  .l-row {
+    background: @bg-color;
+    height: 5rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 @padding-page;
+
+    &.active {
+      color: @primary-btn-color;
+    }
+
+    .left {
+      display: flex;
+      align-items: center;
+
+      .author {
+        font-size: 1.2rem;
+        color: @second-text-color;
+        margin-left: 2rem;
+        position: relative;
+        display: flex;
+        align-items: center;
+
+        &:after {
+          content: '';
+          width: .6rem;
+          height: .5px;
+          background: @second-text-color;
+          position: absolute;
+          left: -1.2rem;
+        }
+      }
+
+      .play-icon {
+        width: 1.5rem;
+        margin-right: 1rem;
+      }
+    }
+
+    .right {
+      width: 1.5rem;
+    }
+  }
+
+  .footer {
+    background: @bg-color;
+    border-top: 1px solid #2a2828;
+    height: 6rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+</style>
diff --git a/src/pages/me/components/SlideItemMusic.vue b/src/pages/me/components/SlideItemMusic.vue
index c90e4c3..e132fd9 100644
--- a/src/pages/me/components/SlideItemMusic.vue
+++ b/src/pages/me/components/SlideItemMusic.vue
@@ -12,7 +12,10 @@
       <!--            <div class="lyrics-mask" @click="isFullLyrics = true"></div>-->
     </div>
     <div class="lyrics-full" v-show="isFullLyrics" @click="isFullLyrics = false">
-      <div class="list" style="overflow:auto;">
+      <div class="list" style="overflow:auto;"
+           @touchmove="$emit('slideCanMove', false)"
+           @touchend="$emit('slideCanMove', true)"
+      >
         <div class="item" v-for="item in lyricsFullTexts">{{ item.c }}</div>
       </div>
     </div>
@@ -28,7 +31,7 @@
             <img src="@/assets/img/icon/star-yellow.png" v-show="isCollect" @click="isCollect = !isCollect">
             <span>收藏</span>
           </div>
-          <div class="btn">
+          <div class="btn" @click="$emit('showShare')">
             <img src="@/assets/img/icon/share-white-full.png" alt="">
             <span>分享</span>
           </div>
@@ -48,17 +51,17 @@
         <div class="end">{{ $durationTime(duration) }}</div>
       </div>
       <div class="options">
-        <img v-show="isLoop" src="@/assets/img/icon/me/loop.png" @click="isLoop = !isLoop">
-        <img v-show="!isLoop" src="@/assets/img/icon/me/play-normal.png" @click="isLoop = !isLoop">
+        <img v-show="isLoop" src="@/assets/img/icon/me/loop.png" @click="$emit('update:isLoop',false)">
+        <img v-show="!isLoop" src="@/assets/img/icon/me/play-normal.png" @click="$emit('update:isLoop',true)">
         <div class="center">
-          <img src="@/assets/img/icon/me/previous.png" @click="t">
-          <img v-show="modelValue.is_play" class="control" src="@/assets/img/icon/me/pause.png"
+          <img src="@/assets/img/icon/me/previous.png" @click="slide('previous')">
+          <img v-show="isPlay" class="control" src="@/assets/img/icon/me/pause.png"
                @click="togglePlay()">
-          <img v-show="!modelValue.is_play" class="control" src="@/assets/img/icon/me/play.png"
+          <img v-show="!isPlay" class="control" src="@/assets/img/icon/me/play.png"
                @click="togglePlay()">
-          <img src="@/assets/img/icon/me/next.png">
+          <img src="@/assets/img/icon/me/next.png" @click="slide('next')">
         </div>
-        <img src="@/assets/img/icon/me/music-list.png">
+        <img src="@/assets/img/icon/me/music-list.png" @click="$emit('showList')">
       </div>
     </div>
   </div>
@@ -77,30 +80,19 @@ export default {
       default: function () {
         return {}
       }
-    }
+    },
+    isLoop: {
+      type: Boolean,
+      default: false
+    },
   },
   data() {
     return {
       slideIndex: 1,
-      currentMusic: {
-        name: '告白气球',
-        mp3: 'https://mp32.9ku.com/upload/128/2017/02/05/858423.mp3',
-        cover: require('../../../assets/img/music-cover/7.png'),
-        author: '周杰伦',
-        duration: 60,
-        use_count: 37441000,
-        is_collect: false,
-        is_play: false,
-      },
-      collectMusic: [],
-      recommendMusic: [],
-      guessMusic: [],
       lyricsTexts: [],
       lyricsFullTexts: [],
-      isShowCollectDialog: false,
       isPlay: false,
       isAutoPlay: true,
-      isLoop: false,
       isMove: false,
       isCollect: false,
       isFullLyrics: false,
@@ -127,12 +119,14 @@ export default {
       this.slideBarWidth = this.$refs.slideBar.clientWidth
       this.step = this.slideBarWidth / Math.floor(this.duration)
     })
+
     let lrcObj = this.createLrcObj(gaobaiqiqiu);
     this.lyricsTexts.push(lrcObj.ms[0])
     this.lyricsTexts.push(lrcObj.ms[1])
     lrcObj.ms.map(v => {
       if (v.c) this.lyricsFullTexts.push(v)
     })
+
     // console.log(lrcObj.ms)
     this.audio.addEventListener('timeupdate', e => {
       let currentTime = Math.ceil(e.target.currentTime)
@@ -170,10 +164,19 @@ export default {
     })
   },
   methods: {
-    togglePlay(state) {
-      this.modelValue.is_play = state || !this.modelValue.is_play
-      if (this.modelValue.is_play) {
-        this.audio.play()
+    slide(state) {
+      this.togglePlay(false)
+      this.$emit(state)
+    },
+    //TODO DOMException: The play() request was interrupted by a call to pause()
+    //TODO page2会报错，能放歌但是进度条不动
+    async togglePlay(state, reStart = false) {
+      this.isPlay = state !== undefined ? state : !this.isPlay
+      if (reStart) {
+        this.audio.currentTime = 0
+      }
+      if (this.isPlay) {
+        await this.audio.play()
       } else {
         this.audio.pause()
       }
@@ -303,6 +306,7 @@ export default {
       object-fit: cover;
       width: 100%;
       height: 100%;
+      box-shadow: 0 0 1.5rem .5rem #514f4f;
     }
 
   }
@@ -412,11 +416,11 @@ export default {
           height: 2rem;
           width: 100%;
           top: -1rem;
-          z-index: 11;
+          z-index: 9;
         }
 
         &:before {
-          z-index: 9;
+          z-index: 8;
           content: ' ';
           height: 1.5px;
           width: 100%;
@@ -426,7 +430,7 @@ export default {
         }
 
         .bar-line {
-          z-index: 10;
+          z-index: 9;
           content: '';
           position: absolute;
           top: 0;
@@ -436,7 +440,7 @@ export default {
         }
 
         .bar-point {
-          z-index: 10;
+          z-index: 9;
           position: absolute;
           left: 50vw;
           top: -3px;
diff --git a/src/pages/message/Message.vue b/src/pages/message/Message.vue
index a7f7f82..088ef88 100644
--- a/src/pages/message/Message.vue
+++ b/src/pages/message/Message.vue
@@ -57,7 +57,7 @@
     </div>
     <Footer v-bind:init-tab="4"/>
 
-    <from-bottom-dialog v-model="createChatDialog">
+    <from-bottom-dialog page-id="Message" v-model="createChatDialog">
       <div class="create-chat-wrapper" v-show="!showJoinedChat">
         <Search :isShowText="isShowText"
                 @click="isShowText = true"
diff --git a/src/pages/message/components/BlockDialog.vue b/src/pages/message/components/BlockDialog.vue
index 4e8ee0a..f033d57 100644
--- a/src/pages/message/components/BlockDialog.vue
+++ b/src/pages/message/components/BlockDialog.vue
@@ -1,5 +1,6 @@
 <template>
   <from-bottom-dialog
+      page-id="home-index"
       v-model="modelValue"
       :show-heng-gang="false"
       height="20rem"
diff --git a/src/pages/people/FindAcquaintance.vue b/src/pages/people/FindAcquaintance.vue
index e5b0e51..7c65ed1 100644
--- a/src/pages/people/FindAcquaintance.vue
+++ b/src/pages/people/FindAcquaintance.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="FindAcquaintance">
+  <div class="FindAcquaintance" id="FindAcquaintance">
     <div class="header">
       <back mode="light" @click="back"></back>
       <Indicator
@@ -80,6 +80,7 @@
     </transition>
 
     <from-bottom-dialog
+        page-id="FindAcquaintance"
         v-model="moreOptionDialog"
         :show-heng-gang="false"
         height="21rem"
diff --git a/src/utils/dom.js b/src/utils/dom.js
index c785680..4b02a1d 100644
--- a/src/utils/dom.js
+++ b/src/utils/dom.js
@@ -16,6 +16,27 @@ export default class Dom {
     return this
   }
 
+  addClass(class1) {
+    if (typeof class1 === 'string') {
+      this.els.forEach(el => {
+        el.classList.add(class1)
+      })
+    } else {
+      this.els.forEach(el => {
+        el.classList.add(...class1)
+      })
+    }
+    return this
+  }
+
+  replaceClass(class1, class2) {
+    this.els.forEach(el => {
+      el.classList.replace(class1, class2)
+    })
+    return this
+  }
+
+
   find(tag) {
     let els = []
     if (this.els.length) {