更新readme

README.md

@@ -3,3 +3,34 @@
 # 使用 Vue 模仿抖音, 本项目持续更新
 
 ### 开源不易，麻烦给个 Star★ 吧(☺️ 右上角点击 ★Star，轻轻松松，一秒钟 🤣)！我会根据大家的关注度和个人时间持续更新代码！
+
+## 开发进度
+
+页面|进度
+---|---
+首页| ☑
+首页|<input type="checkbox" checked>
+
+## 目标功能
+ 
+- [x] 首页
+- [x] 直播
+- [x] 登录、注册
+- [x] 密码找回
+- [x] 修改个人资料
+- [x] 个人信息浏览（已发布、点赞的视频）
+- [x] 上传头像
+- [x] 发送邮件验证
+- [x] 视频浏览
+- [x] 关注与粉丝
+- [x] 视频点赞、评论点赞
+- [x] 视频评论、回复评论
+- [x] 评论@用户
+- [x] 关注动态浏览
+- [x] 好友（互相关注）间私信
+- [x] 发布动态
+- [x] 搜索视频，用户（根据视频描述，根据昵称或id）
+- [x] 私信、被关注、被评论、被@、被点赞、关注人发布动态的消息提醒
+- [ ] 删除评论
+- [ ] 删除视频
+- [ ] 分享

src/pages/me/MyMusic.vue

@@ -12,7 +12,7 @@
         v-model:active-index="slideIndex">
       <SlideItem>
         <div class="music-play">
-          <template v-show="false">
+          <div v-show="!isFullLyrics">
             <div class="cover">
               <img v-lazy="$imgPreview(music.cover)" alt="">
             </div>
@@ -21,13 +21,12 @@
                 <div class="lyrics" v-for="item in lyricsTexts">{{ item.c }}</div>
               </div>
             </div>
-            <!--          <div class="lyrics-mask"></div>-->
-          </template>
-          <div class="lyrics-full">
+            <div class="lyrics-mask" @click="isFullLyrics = true"></div>
+          </div>
+          <div class="lyrics-full" v-show="isFullLyrics" @click="isFullLyrics = false">
             <div class="list">
-              <div class="item" v-for="item in lyricsTexts">{{ item.c }}</div>
+              <div class="item" v-for="item in lyricsFullTexts">{{ item.c }}</div>
             </div>
-
           </div>
           <div class="bottom">
             <div class="desc">
@@ -106,9 +105,11 @@ export default {
         is_play: false,
       },
       lyricsTexts: [],
+      lyricsFullTexts: [],
       isPlay: false,
       isLoop: false,
       isMove: false,
+      isFullLyrics: false,
       lastPageX: 0,
       pageX: 0,
       audio: new Audio(),
@@ -137,22 +138,25 @@ export default {
     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
-            }
-          }
-        }
-      }
+      // 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) {
@@ -334,8 +338,17 @@ export default {
     }
 
     .lyrics-full {
+      width: 100vw;
+      height: 60vh;
+      display: flex;
+      //align-items: center;
+      justify-content: center;
+      overflow: hidden;
+
       .list {
         .item {
+          display: flex;
+          justify-content: center;
           height: 4rem;
         }
       }