优化视频播放页，但是双击爱心效果好卡

src/App.vue

@@ -53,6 +53,7 @@ export default {
         '/message', '/attention', '/home', '/me', '/publish',
         '/home/report',
         '/home/submit-report',
+        '/home/music',
         '/message/share-to-friend',
         '/message/joined-group-chat',
         '/country-choose',

src/components/BaseMarquee.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="marquee" :class="name+'-marquee'" ref="marquee">
+    <span class="text" ref="marqueeText">
+      {{ text }}<span class="space"></span>
+      {{ text }}<span class="space"></span>
+      {{ text }}<span class="space"></span>
+    </span>
+  </div>
+</template>
+<script>
+import Dom from "../utils/dom";
+import {nextTick} from "vue";
+
+export default {
+  name: "BaseMarquee",
+  props: {
+    text: {
+      type: String,
+      default: ''
+    },
+    name: {
+      type: String,
+      default: ''
+    },
+    //用于第一条数据，自动播放，如果都用事件去触发播放，有延迟
+    isPlay: {
+      type: Boolean,
+      default: () => {
+        return true
+      }
+    },
+  },
+  data() {
+    return {
+      timer: null,
+      contentWidth: 0,
+      transformX: 0,
+      $marqueeContent: null,
+    }
+  },
+  methods: {
+    pause() {
+      // console.log('pause')
+      cancelAnimationFrame(this.timer)
+    },
+    stop() {
+      // console.log('stop')
+      cancelAnimationFrame(this.timer)
+      this.transformX = 0
+      this.marqueeText.css('transform', `translate3d(0,0,0)`)
+    },
+    start() {
+      // console.log('start')
+      if (this.contentWidth <= 0) { // 没有内容搞什么动画
+        return;
+      }
+      let fn = () => {
+        if (this.transformX > (-this.contentWidth / 3)) {
+          this.transformX -= 1
+          this.marqueeText.css('transform', `translate3d(${this.transformX}px,0,0)`)
+        } else {
+          this.transformX = 0
+        }
+        this.timer = requestAnimationFrame(fn)
+      }
+      fn()
+    }
+  },
+  mounted() {
+    nextTick(() => {
+      //直接document.querySelectorAll，找不到dom，必须用$refs的方式
+      this.marqueeText = new Dom(this.$refs.marqueeText)
+      //必须在nextTick在调用，不然后新生成dom，获取不到width
+      this.contentWidth = this.marqueeText.getWidth()
+
+      // console.log(this.name, this.isPlay, this.marqueeText)
+      // console.log(this.name, this.isPlay, this.contentWidth)
+
+      new Dom(this.$refs.marquee).on('pause', this.pause)
+      new Dom(this.$refs.marquee).on('start', this.start)
+      new Dom(this.$refs.marquee).on('stop', this.stop)
+      if (this.isPlay) {
+        this.start()
+      }
+    })
+  }
+}
+</script>
+
+<style scoped lang="less">
+.marquee {
+  width: 100%;
+  display: block;
+  margin: 0 auto;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: clip;
+  position: relative;
+
+  .text {
+    color: white;
+    display: inline-block;
+    position: relative;
+    white-space: nowrap;
+
+    .space {
+      display: inline-block;
+      width: 5rem;
+    }
+  }
+
+}
+
+
+</style>

src/components/BaseMusic.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="music-wrapper" :class="name+'-music'" ref="musicWrapper">
+    <template v-if="!isStop">
+      <img class="music1" src="../assets/img/icon/home/music1.png" alt="">
+      <img class="music2" src="../assets/img/icon/home/music2.png" alt="">
+    </template>
+    <div class="music-bg" ref="musicBg">
+      <img class="music" :src="cover">
+    </div>
+  </div>
+</template>
+<script>
+import Dom from "../utils/dom";
+import {nextTick} from "vue";
+import BaseButton from "./BaseButton";
+
+export default {
+  name: "BaseMusic",
+  components: {
+    BaseButton
+  },
+  props: {
+    cover: {
+      type: String,
+      default: ''
+    },
+    name: {
+      type: String,
+      default: ''
+    },
+    //用于第一条数据，自动播放，如果都用事件去触发播放，有延迟
+    isPlay: {
+      type: Boolean,
+      default: () => {
+        return true
+      }
+    },
+  },
+  data() {
+    return {
+      isStop: false,
+      musicBg: null,
+    }
+  },
+  methods: {
+    // triggerPause() {
+    //   new Dom('.music-wrapper').trigger('pause')
+    // },
+    // triggerStart() {
+    //   new Dom('.music-wrapper').trigger('start')
+    // },
+    pause() {
+      this.isStop = true
+      this.musicBg.css('webkitAnimationPlayState', 'paused')
+    },
+    stop() {
+      this.isStop = true
+      this.musicBg.css('webkitAnimationPlayState', 'paused')
+    },
+    start() {
+      this.isStop = false
+      this.musicBg.css('webkitAnimationPlayState', 'running')
+    }
+  },
+  mounted() {
+    nextTick(() => {
+      //直接document.querySelectorAll，找不到dom，必须用$refs的方式
+      this.musicBg = new Dom(this.$refs.musicBg)
+
+      new Dom(this.$refs.musicWrapper).on('pause', this.pause)
+      new Dom(this.$refs.musicWrapper).on('start', this.start)
+      new Dom(this.$refs.musicWrapper).on('stop', this.stop)
+      if (this.isPlay) {
+        this.start()
+      } else {
+        this.stop()
+      }
+    })
+  }
+}
+</script>
+
+<style lang="less">
+.music-wrapper {
+  position: relative;
+
+  .music-bg {
+    background-image: linear-gradient(black, #424242, black);
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    animation: animations 5s linear forwards infinite;
+
+    //animation-play-state:paused;
+    //display: none;
+
+    .music {
+      //display: none;
+      width: 25px;
+      height: 25px;
+      border-radius: 50%;
+    }
+  }
+
+
+  .music1, .music2 {
+    //display: none;
+    position: absolute;
+    width: 18px;
+    height: 18px;
+    top: 10px;
+  }
+
+  .music1 {
+    animation: anim-music1 2s linear forwards infinite;
+  }
+
+  .music2 {
+    animation: anim-music1 2s linear forwards infinite;
+    animation-delay: 1s;
+  }
+
+
+  @keyframes animations {
+    0% {
+      transform: rotate(0deg);;
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes anim-music1 {
+    0% {
+      transform: translate3d(0, 0, 0);
+      opacity: 0;
+    }
+    20% {
+      transform: translate3d(-8px, 0px, 0) rotate(30deg);
+      opacity: .3;
+    }
+    40% {
+      transform: translate3d(-16px, -5px, 0) rotate(15deg);
+      opacity: .5;
+    }
+    60% {
+      transform: translate3d(-24px, -15px, 0) rotate(0deg);
+      opacity: 1;
+    }
+    80% {
+      transform: translate3d(-32px, -30px, 0) rotate(-15deg);
+      opacity: 1;
+    }
+    100% {
+      transform: translate3d(-32px, -50px, 0) rotate(-30deg);
+      opacity: 0;
+    }
+  }
+}
+
+</style>

src/components/Footer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="footer f16 " @touchmove.stop="false">
+  <div class="footer f16 ">
     <div class="l-button" @click="refresh(1)">
       <span v-if="!isRefresh1" :class="{active:currentTab===1}">首页</span>
       <img v-if="isRefresh1 " src="../assets/img/icon/refresh1.png" alt="" class="refresh">
@@ -32,6 +32,9 @@ export default {
     }
   },
   methods: {
+    stop() {
+
+    },
     tab(index) {
       this.currentTab = index
       switch (index) {

src/components/common/Music.vue

@@ -1,193 +0,0 @@
-<template>
-    <div class='Music'>
-        <header class="pl15p pr15p pt20p">
-            <div class="top pb20p d-flex justify-content-between">
-                <img src="../../assets/img/icon/next.svg" alt="" @click="back()">
-                <img src="../../assets/img/icon/share.svg" alt="">
-            </div>
-            <div class="bottom">
-                <img class="logo" src="../../assets/img/poster/src1-bg.png" alt="">
-                <div class="info">
-                    <div class="name">MT创作的原声</div>
-                    <div class="user">NT ></div>
-                    <div class="peoples">1人使用</div>
-                    <div class="collection">
-                        <img src="../../assets/img/icon/collect-white.svg" alt="">
-                        <span>收藏</span>
-                    </div>
-                </div>
-            </div>
-        </header>
-        <div class="content">
-            <div class="tabs">
-                <div class="tab active" @click="toggleTab($event,0)">热门</div>
-                <div class="tab" @click="toggleTab($event,1)">最新</div>
-            </div>
-            <div class="video-container" v-for="(item,index) of videos" v-bind:style="{'height':width/3*1.2+'px'}">
-                <video src="../../assets/video/1.mp4" poster="../../assets/img/poster/src1-bg.png"></video>
-                <div class="no" v-if="index===1||index===2">
-                    NO. <span>{{index+1}}</span>
-                </div>
-                <span v-if="index===0" class="first">首发</span>
-            </div>
-        </div>
-    </div>
-</template>
-<script>
-
-    export default {
-        name: "Music",
-        components: {},
-        data() {
-            return {
-                videos: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
-            }
-        },
-        created() {
-        },
-        computed: {},
-        methods: {
-            toggleTab(e, index) {
-                if (!e.target.classList.contains('active')) {
-                    e.target.classList.toggle('active')
-                }
-
-                if (index === 1) {
-                    let pre = e.target.previousElementSibling
-                    pre.classList.remove('active')
-                } else {
-                    let pre = e.target.nextElementSibling
-                    pre.classList.remove('active')
-                }
-
-            },
-            back() {
-                window.history.back()
-            }
-        }
-    }
-</script>
-
-<style scoped lang="less">
-    .Music {
-        header {
-            background: #454b66;
-            padding-bottom: 30px;
-
-            .top {
-                img {
-                    width: 20px;
-                    height: 20px;
-
-                    &:nth-child(1) {
-                        transform: rotate(180deg);
-                    }
-                }
-            }
-
-            .bottom {
-                display: flex;
-                height: 120px;
-
-                .logo {
-                    width: 120px;
-                    height: 100%;
-                    border-radius: 4px;
-                }
-
-                .info {
-                    margin-left: 15px;
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: space-between;
-
-                    .name {
-                        font-size: 18px;
-                        color: #fff;
-                        font-weight: bold;
-                        margin-bottom: 10px;
-                    }
-
-                    .user, .peoples {
-                        margin-bottom: 5px;
-                        color: #999999;
-                    }
-
-                    .collection {
-                        display: flex;
-                        justify-content: center;
-                        height: 25px;
-                        width: 80px;
-                        align-items: center;
-                        color: #ffffff;
-                        background: #999;
-                        border-radius: 2px;
-
-                        img {
-                            margin-right: 10px;
-                            width: 15px;
-                            height: 15px;
-                        }
-                    }
-                }
-            }
-        }
-
-        .content {
-            .tabs {
-                height: 40px;
-                display: flex;
-                align-items: center;
-                color: #fff;
-
-                .tab {
-                    height: 90%;
-                    width: 50%;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    margin: 10px;
-
-                    &.active {
-                        border-bottom: 3px solid yellow;
-                    }
-                }
-            }
-
-            .video-container {
-                width: 33%;
-                float: left;
-                position: relative;
-                overflow: hidden;
-                border: .5px solid black;
-
-                video {
-                    width: 100%;
-                }
-
-                .first {
-                    padding: 0 5px;
-                    border-radius: 4px;
-                    position: absolute;
-                    top: 10px;
-                    left: 10px;
-                    background: yellow;
-                }
-
-                .no {
-                    position: absolute;
-                    color: #bdbdbd;
-                    bottom: 10px;
-                    right: 10px;
-                    font-style: italic;
-
-                    span {
-                        color: #ffffff;
-                        font-size: 20px;
-                    }
-                }
-
-            }
-        }
-    }
-</style>

src/components/slide/SlideColumnVirtualList.vue

@@ -118,6 +118,7 @@ export default {
   },
   methods: {
     getInsEl(item, index, play = false) {
+      // console.log('index',index,play)
       let slideVNode = this.renderSlide(item, index, play)
       const app = Vue.createApp({
         render() {

src/pages/Test3.vue

@@ -16,7 +16,7 @@ export default {
           let id = 'a' + Date.now()
           let elWidth = 80
           let rotate = randomNum(0, 1)
-          let template = `<img class="${rotate ? 'left' : 'right'}" id="${id}" src="${require('../assets/img/icon/loved.svg')}" alt="">`
+          let template = `<img class="${rotate ? 'left love-dbclick' : 'right love-dbclick'}" id="${id}" src="${require('../assets/img/icon/loved.svg')}" alt="">`
           let el = new Dom().create(template)
           el.css({top: e.y - elWidth, left: e.x - elWidth / 2,})
           new Dom().find('.test').append(el)
@@ -36,6 +36,7 @@ export default {
           }
         }
         el.addEventListener('click', click)
+        // el.addEventListener('dblclick', click)
       }
     }
   },

src/pages/Test4.vue

@@ -1,27 +1,25 @@
 <template>
   <div class="Test">
     <div class="content1">
-      <div style="width: 50%;">
+      <BaseMarquee :is-play="true" :text="text" style="width: 150px;"/>
-        <div class="marquee">
+      <BaseButton @click="triggerPause">pause</BaseButton>
-          <span class="content">{{ text }}<span class="content-space"></span></span>
+      <BaseButton @click="triggerStart">start</BaseButton>
-        </div>
-      </div>
-      <base-button @click="pause">stop</base-button>
-      <base-button @click="start">start</base-button>
     </div>
   </div>
 </template>
 <script>
 
 import BaseButton from "../components/BaseButton";
+import BaseMarquee from "../components/BaseMarquee";
+import Dom from "../utils/dom";
 
 export default {
   name: "Test4",
-  components: {BaseButton},
+  components: {BaseButton, BaseMarquee},
   props: {
     text: {
       type: String,
-      default: '跑马灯测试。跑马灯测试。跑马灯测试。'
+      default: '@喵嗷污说电影创作的原声'
     }
   },
   data() {
@@ -33,35 +31,14 @@ export default {
     }
   },
   methods: {
-    pause() {
+    triggerPause() {
-      cancelAnimationFrame(this.timer)
+      new Dom('.text').trigger('pause')
+    },
+    triggerStart() {
+      new Dom('.text').trigger('start')
     },
-    start() {
-      if (this.contentWidth <= 0) { // 没有内容搞什么动画
-        return;
-      }
-      let fn = () => {
-        if (this.transformX > (-this.contentWidth / 3)) {
-          this.transformX -= 2
-          this.$marqueeContent.style.transform = `translate3d(${this.transformX}px,0,0)`
-        } else {
-          this.transformX = 0
-        }
-        this.timer = requestAnimationFrame(fn)
-      }
-      // this.timer = requestAnimationFrame(fn);
-      fn()
-    }
   },
   mounted() {
-    let speed = 150; // 速度 -- px每秒
-
-    let $marquee = document.querySelector('.marquee');
-    let $marqueeContent = this.$marqueeContent = $marquee.querySelector('.content');
-    // 内容复制3份好有连续性
-    $marqueeContent.innerHTML = $marqueeContent.innerHTML + $marqueeContent.innerHTML + $marqueeContent.innerHTML
-    this.contentWidth = $marqueeContent.getBoundingClientRect().width;
-    this.start()
   }
 }
 </script>
@@ -82,30 +59,6 @@ export default {
   .content1 {
     padding-top: 6rem;
 
-    .marquee {
-      width: 100%;
-      height: 4rem;
-      line-height: 4rem;
-      display: block;
-      margin: 0 auto;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: clip;
-      position: relative;
-    }
-
-    .marquee .content {
-      color: white;
-      display: inline-block;
-      position: relative;
-      white-space: nowrap;
-    }
-
-    .marquee .content-space {
-      display: inline-block;
-      width: 3rem;
-    }
-
   }
 
 

src/pages/Test5.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="Test">
+    <div class="content1">
+      <BaseMarquee :is-play="true" :text="text" style="width: 150px;"/>
+      <BaseButton @click="triggerPause">pause</BaseButton>
+      <BaseButton @click="triggerStart">start</BaseButton>
+    </div>
+  </div>
+</template>
+<script>
+
+import BaseButton from "../components/BaseButton";
+import BaseMarquee from "../components/BaseMarquee";
+import Dom from "../utils/dom";
+
+export default {
+  name: "Test4",
+  components: {BaseButton, BaseMarquee},
+  props: {
+    text: {
+      type: String,
+      default: '@喵嗷污说电影创作的原声'
+    }
+  },
+  data() {
+    return {
+      timer: null,
+      contentWidth: 0,
+      transformX: 0,
+      $marqueeContent: null,
+    }
+  },
+  methods: {
+    triggerPause() {
+      new Dom('.text').trigger('pause')
+    },
+    triggerStart() {
+      new Dom('.text').trigger('start')
+    },
+  },
+  mounted() {
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "../assets/scss/index";
+
+.Test {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  overflow: auto;
+  font-size: 1.4rem;
+  color: white;
+
+  .content1 {
+    padding-top: 6rem;
+
+  }
+
+
+}
+</style>

src/pages/home/Index2.vue

@@ -197,6 +197,7 @@ import BlockDialog from "../message/components/BlockDialog";
 import Search from "../../components/Search";
 import ConfirmDialog from "../../components/dialog/ConfirmDialog";
 import FollowSetting2 from "./components/FollowSetting2";
+import Dom from "../../utils/dom";
 
 export default {
   name: "HomeIndex",
@@ -226,7 +227,7 @@ export default {
           "cover": "https://p11.douyinpic.com/img/tos-cn-p-0015/48e513ae1df94a6cb0e23eabdacfdb64~c5_300x400.webp?from=4257465056_large",
           "dynamic_cover": "https://p3.douyinpic.com/obj/tos-cn-p-0015/80e3288d63094603beaaf2f0e1568e19_1577426215?from=4257465056_large",
           "origin_cover": "https://p3.douyinpic.com/tos-cn-p-0015/be6a2e67b69646778749e932c6d456b6_1577426215~tplv-dy-360p.webp?from=4257465056&s=&se=false&sh=&sc=&l=202108311459040102120742003404DFC4&biz_tag=feed_cover",
-          video:mp40,
+          video: mp40,
           "video_data_size": 26829508,
           "duration": 427780,
           "desc": "几人到深山探险，发现里面一只动物昆虫都没有，知道原因后都怕了 #看电影",
@@ -298,7 +299,7 @@ export default {
           "cover": "https://p3.douyinpic.com/img/tos-cn-p-0015/9208072278a34d01b3836cce1e0fca9a~c5_300x400.jpeg?from=4257465056_large",
           "dynamic_cover": "https://p9.douyinpic.com/obj/tos-cn-p-0015/9208072278a34d01b3836cce1e0fca9a?from=4257465056_large",
           "origin_cover": "https://p3.douyinpic.com/tos-cn-p-0015/9ecfae1dda2141d19f3e2396d18c4f52_1610439608~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108311440160102120461454502506A&biz_tag=feed_cover",
-          video:mp41,
+          video: mp41,
           "video_data_size": 6038796,
           "duration": 90927,
           "desc": "几分钟看科幻片《寄生异种》 #我的观影报告  #抖音电影",
@@ -377,7 +378,7 @@ export default {
           "cover": "https://p11.douyinpic.com/img/tos-cn-p-0015/3d6a0342b7f247ed999a13bd566b360e~c5_300x400.jpeg?from=4257465056_large",
           "dynamic_cover": "https://p26.douyinpic.com/obj/tos-cn-p-0015/3d6a0342b7f247ed999a13bd566b360e?from=4257465056_large",
           "origin_cover": "https://p5-ipv6.douyinpic.com/tos-cn-p-0015/48891e08b43e47e2a3af9f3945cf941f_1607739586~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108311440220102120691615D029CD1&biz_tag=feed_cover",
-          video:mp42,
+          video: mp42,
           "video_data_size": 8996120,
           "duration": 118703,
           "desc": "美女失去记忆，被囚禁在密室内，没想到逃出去后才是她噩梦的开始 #我的观影报告",
@@ -449,7 +450,7 @@ export default {
           "cover": "https://p11.douyinpic.com/img/tos-cn-p-0015/c3bbe172b24844eb8e576a1897e04435~c5_300x400.webp?from=4257465056_large",
           "dynamic_cover": "https://p11.douyinpic.com/obj/tos-cn-p-0015/12fc583b6eaa49b4a0086664c8f54a5d?from=4257465056_large",
           "origin_cover": "https://p26.douyinpic.com/tos-cn-p-0015/e7db9fba822c4d81b4ec4614f5c60cae~tplv-dy-360p.webp?from=4257465056&s=&se=false&sh=&sc=&l=202108311459170102040221632C04B06F&biz_tag=feed_cover",
-          video:mp43,
+          video: mp43,
           "video_data_size": 37824020,
           "duration": 312474,
           "desc": "夫妇二人来到一个诡异小镇，看到一个孩子的手，被吓到了 #看电影 ",
@@ -521,7 +522,7 @@ export default {
           "cover": "https://p29.douyinpic.com/img/tos-cn-p-0015/1ce2018b919d49cfbdc380e9b7bc17ce~c5_300x400.jpeg?from=4257465056_large",
           "dynamic_cover": "https://p11.douyinpic.com/obj/tos-cn-p-0015/1ce2018b919d49cfbdc380e9b7bc17ce?from=4257465056_large",
           "origin_cover": "https://p5-ipv6.douyinpic.com/tos-cn-p-0015/697621dc8ff247aba499fdaedcf172fb_1606272887~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=2021083114402801021219919632028316&biz_tag=feed_cover",
-          video:mp44,
+          video: mp44,
           "video_data_size": 12371092,
           "duration": 139652,
           "desc": "茂密森林中却没有一个动物或昆虫，专家进去研究，被吓得转身就跑 #我的观影报告",
@@ -593,7 +594,7 @@ export default {
           "cover": "https://p3.douyinpic.com/img/tos-cn-p-0015/3099e1f9facb4f11a8d07221b39b9ffb_1575186937~c5_300x400.webp?from=4257465056_large",
           "dynamic_cover": "https://p11.douyinpic.com/obj/tos-cn-p-0015/f80ce3457bf34f66be9254df9544f9d8_1575186867?from=4257465056_large",
           "origin_cover": "https://p11.douyinpic.com/tos-cn-p-0015/af2ef1dd2e864379a7a475b1db005b62_1575186867~tplv-dy-360p.webp?from=4257465056&s=&se=false&sh=&sc=&l=202108311459070102112011425F04ED8F&biz_tag=feed_cover",
-          video:mp45,
+          video: mp45,
           "video_data_size": 16916839,
           "duration": 384068,
           "desc": "男子在沙漠无意中召唤出可怕怪物，怪物的能力让他很绝望 #看电影",
@@ -665,7 +666,7 @@ export default {
           "cover": "https://p11.douyinpic.com/img/tos-cn-i-0004/b8d9811844d14f28a5d71b13ea30d89a~c5_300x400.jpeg?from=4257465056_large",
           "dynamic_cover": "https://p29.douyinpic.com/obj/tos-cn-i-0004/b8d9811844d14f28a5d71b13ea30d89a?from=4257465056_large",
           "origin_cover": "https://p11.douyinpic.com/tos-cn-p-0015/ac6b1eb1b6994ee1a284401f422f4d93_1627866958~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108301444360102111780824E10113C&biz_tag=feed_cover",
-          video:mp46,
+          video: mp46,
           "video_data_size": 26944285,
           "duration": 276000,
           "desc": "2100年人口锐减，文明疯狂倒退，现今科技成了神话般的存在  #抖音电影#我的观影报告 ",
@@ -737,7 +738,7 @@ export default {
           "cover": "https://p3.douyinpic.com/img/tos-cn-p-0015/bffc96dac41548d99a23e555d2bd3d62~c5_300x400.jpeg?from=4257465056_large",
           "dynamic_cover": "https://p11.douyinpic.com/obj/tos-cn-p-0015/bffc96dac41548d99a23e555d2bd3d62?from=4257465056_large",
           "origin_cover": "https://p1.douyinpic.com/tos-cn-p-0015/813c7bded67f4e3da0972f85be32eb3f_1608893061~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108311440220102120691615D029CD1&biz_tag=feed_cover",
-          video:mp47,
+          video: mp47,
           "video_data_size": 9321536,
           "duration": 129583,
           "desc": "几分钟看科幻片《登月先锋》 #我的观影报告  #抖音电影",
@@ -816,7 +817,7 @@ export default {
           "cover": "https://p9.douyinpic.com/img/tos-cn-p-0015/9f47c686c9224036b82f5c7b147e6119~c5_300x400.webp?from=4257465056_large",
           "dynamic_cover": "https://p26.douyinpic.com/obj/tos-cn-p-0015/fde5131f00e54106877d06f775cd21ca_1572239688?from=4257465056_large",
           "origin_cover": "https://p11.douyinpic.com/tos-cn-p-0015/8a757ad4df69407f8d0d443eaa0b60a2_1572239690~tplv-dy-360p.webp?from=4257465056&s=&se=false&sh=&sc=&l=202108311459110102112011425F04EF3F&biz_tag=feed_cover",
-          video:mp48,
+          video: mp48,
           "video_data_size": 25251313,
           "duration": 449263,
           "desc": "",
@@ -888,7 +889,7 @@ export default {
           "cover": "https://p5-ipv6.douyinpic.com/img/tos-cn-p-0015/1941731e18714268a52855ce869e3092_1572771120~c5_300x400.webp?from=4257465056_large",
           "dynamic_cover": "https://p11.douyinpic.com/obj/tos-cn-p-0015/55b40ca5368a49eca282fb868c8fb98b_1572771083?from=4257465056_large",
           "origin_cover": "https://p5-ipv6.douyinpic.com/tos-cn-p-0015/cd59468a8d0149aeb5291966004ae4e0_1572771088~tplv-dy-360p.webp?from=4257465056&s=&se=false&sh=&sc=&l=202108311459110102112011425F04EF3F&biz_tag=feed_cover",
-          video:mp49,
+          video: mp49,
           "video_data_size": 17839401,
           "duration": 262127,
           "desc": "灰姑娘被前男友羞辱，霸道总裁看不下去充当男友，瞬间让渣男无地自容#西瓜放映厅",
@@ -1180,12 +1181,13 @@ export default {
         return (
             <div className="base-slide-item video-slide-item" data-index={itemIndex}>
               <Video1
-                  play={play}
+                  isPlay={play}
                   video={item}
                   index={itemIndex}
                   onShowComments={e => this.isCommenting = true}
                   onShowShare={e => this.isSharing = true}
                   onGoUserInfo={e => this.baseActiveIndex = 1}
+                  onGoMusic={e => this.$nav('/home/music')}
                   v-model={[this.videos[itemIndex], 'video']}
               />
             </div>
@@ -1194,18 +1196,12 @@ export default {
     }
   },
   watch: {
-    videoActiveIndex(newVal) {
+    videoActiveIndex(newVal, oldVal) {
-      $(".video-slide-item").each(function () {
+      // console.log('videoActiveIndex', newVal, oldVal)
-        let video = $(this).find('video')
+      new Dom(`.v-${newVal}-video`).trigger('play')
-        if ($(this).data('index') === newVal) {
+      setTimeout(() => {
-          video.trigger('play')
+        new Dom(`.v-${oldVal}-video`).trigger('stop')
-        } else {
+      }, 200)
-          video.trigger('pause')
-          setTimeout(() => {
-            video[0].currentTime = 0
-          }, 100)
-        }
-      })
       if (newVal >= this.videos.length - 3 && newVal < this.totalSize) {
         if (this.loading) return
         this.pageNo++
@@ -1233,6 +1229,7 @@ export default {
       if (process.env.NODE_ENV === 'development') {
         this.totalSize = 11
         // return this.videos = this.$clone(this.localVideos)
+        // await this.$sleep(200)
         return this.videos = this.$clone(this.webVideos)
       }
       this.loading = true
@@ -1255,11 +1252,75 @@ export default {
   }
 }
 </script>
-<style scoped lang="less">
+<style lang="less">
 #home-index {
   height: 100%;
   width: 100%;
   //z-index: 4;
   position: relative;
+
+  .love-dbclick {
+    position: absolute;
+    @width: 8rem;
+    width: @width;
+    height: @width;
+
+    &.left {
+      animation: loveLeft 1.1s linear;
+    }
+
+    &.right {
+      animation: loveRight 1.1s linear;
+    }
+
+    @scale: scale(1.2);
+    @rotate: 10deg;
+
+    @keyframes loveLeft {
+      0% {
+        opacity: 0;
+        transform: scale(2) rotate(0-@rotate);
+      }
+      10% {
+        opacity: 1;
+        transform: scale(1) rotate(0-@rotate);
+      }
+      15% {
+        opacity: 1;
+        transform: @scale rotate(0-@rotate);
+      }
+      40% {
+        opacity: 1;
+        transform: @scale rotate(0-@rotate);
+      }
+      100% {
+        transform: translateY(-12rem) scale(2) rotate(0-@rotate);
+        opacity: 0;
+      }
+    }
+    @keyframes loveRight {
+      0% {
+        opacity: 0;
+        transform: scale(2) rotate(0+@rotate);
+      }
+      10% {
+        opacity: 1;
+        transform: scale(1) rotate(0+@rotate);
+      }
+      15% {
+        opacity: 1;
+        transform: @scale rotate(0+@rotate);
+      }
+      40% {
+        opacity: 1;
+        transform: @scale rotate(0+@rotate);
+      }
+      100% {
+        transform: translateY(-12rem) scale(2) rotate(0+@rotate);
+        opacity: 0;
+      }
+    }
+  }
+
 }
 </style>

src/pages/home/Music.vue

@@ -0,0 +1,199 @@
+<template>
+  <div class="Music">
+    <BaseHeader>
+      <template v-slot:center>
+        <span class="f16">申报学校信息</span>
+      </template>
+      <template v-slot:right>
+        <img src="../../assets/img/icon/share.svg" alt="">
+      </template>
+    </BaseHeader>
+    <div class="content">
+      <div class="bottom">
+        <img class="logo" src="../../assets/img/poster/src1-bg.png" alt="">
+        <div class="info">
+          <div class="name">MT创作的原声</div>
+          <div class="user">NT ></div>
+          <div class="peoples">1人使用</div>
+          <div class="collection">
+            <img src="../../assets/img/icon/collect-white.svg" alt="">
+            <span>收藏</span>
+          </div>
+        </div>
+      </div>
+      <div class="tabs">
+        <div class="tab active" @click="toggleTab($event,0)">热门</div>
+        <div class="tab" @click="toggleTab($event,1)">最新</div>
+      </div>
+      <div class="video-container" v-for="(item,index) of videos" v-bind:style="{'height':width/3*1.2+'px'}">
+        <video src="../../assets/video/1.mp4" poster="../../assets/img/poster/src1-bg.png"></video>
+        <div class="no" v-if="index===1||index===2">
+          NO. <span>{{ index + 1 }}</span>
+        </div>
+        <span v-if="index===0" class="first">首发</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+export default {
+  name: "Music",
+  components: {},
+  data() {
+    return {
+      videos: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
+    }
+  },
+  created() {
+  },
+  computed: {},
+  methods: {
+    toggleTab(e, index) {
+      if (!e.target.classList.contains('active')) {
+        e.target.classList.toggle('active')
+      }
+
+      if (index === 1) {
+        let pre = e.target.previousElementSibling
+        pre.classList.remove('active')
+      } else {
+        let pre = e.target.nextElementSibling
+        pre.classList.remove('active')
+      }
+
+    },
+    back() {
+      window.history.back()
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+@import "../../assets/scss/index";
+
+.Music {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  overflow: auto;
+  color: white;
+  font-size: 1.4rem;
+
+  img {
+    width: 2rem;
+    height: 2rem;
+  }
+
+  .content {
+    padding-top: 6rem;
+
+    .bottom {
+      display: flex;
+      height: 120px;
+
+      .logo {
+        width: 120px;
+        height: 100%;
+        border-radius: 4px;
+      }
+
+      .info {
+        margin-left: 15px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+
+        .name {
+          font-size: 18px;
+          color: #fff;
+          font-weight: bold;
+          margin-bottom: 10px;
+        }
+
+        .user, .peoples {
+          margin-bottom: 5px;
+          color: #999999;
+        }
+
+        .collection {
+          display: flex;
+          justify-content: center;
+          height: 25px;
+          width: 80px;
+          align-items: center;
+          color: #ffffff;
+          background: #999;
+          border-radius: 2px;
+
+          img {
+            margin-right: 10px;
+            width: 15px;
+            height: 15px;
+          }
+        }
+      }
+    }
+
+    .tabs {
+      height: 40px;
+      display: flex;
+      align-items: center;
+      color: #fff;
+
+      .tab {
+        height: 90%;
+        width: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 10px;
+
+        &.active {
+          border-bottom: 3px solid yellow;
+        }
+      }
+    }
+
+    .video-container {
+      width: 33%;
+      float: left;
+      position: relative;
+      overflow: hidden;
+      border: .5px solid black;
+
+      video {
+        width: 100%;
+      }
+
+      .first {
+        padding: 0 5px;
+        border-radius: 4px;
+        position: absolute;
+        top: 10px;
+        left: 10px;
+        background: yellow;
+      }
+
+      .no {
+        position: absolute;
+        color: #bdbdbd;
+        bottom: 10px;
+        right: 10px;
+        font-style: italic;
+
+        span {
+          color: #ffffff;
+          font-size: 20px;
+        }
+      }
+
+    }
+  }
+}
+
+</style>

src/router/index.js

@@ -4,7 +4,7 @@ import Index from "../pages/home/Index";
 import Attention from "../pages/home/Attention";
 import Message from "../pages/message/Message";
 import Me from "../pages/me/Me";
-import Music from "../components/common/Music";
+import Music from "../pages/home/Music";
 import countryChoose from "../pages/login/countryChoose";
 import MyCard from "../pages/me/MyCard";
 import MyCollect from "../pages/me/MyCollect";
@@ -61,6 +61,7 @@ const routes = [
   {path: '/home', component: Index},
   {path: '/home/report', component: Report},
   {path: '/home/submit-report', component: SubmitReport},
+  {path: '/home/music', component: Music},
   {path: '/attention', component: Attention},
   {path: '/publish', component: Publish},
   {path: '/message', component: Message},
@@ -72,7 +73,6 @@ const routes = [
   {path: '/me/request-update', component: RequestUpdate},
   {path: '/edit-userinfo', component: EditUserInfo},
   {path: '/edit-userinfo-item', component: EditUserInfoItem},
-  {path: '/music', component: Music},
   {path: '/country-choose', component: countryChoose},
   {path: '/my-card', component: MyCard},
   {path: '/my-collect', component: MyCollect},

src/utils/dom.js

@@ -1,11 +1,26 @@
 export default class Dom {
+  els = []
 
-  constructor() {
+  constructor(arg) {
-
+    if (typeof arg === 'string') {
+      return this.find(arg)
+    }
+    if (typeof arg === 'object') {
+      this.els.push(arg)
+    }
+    if (typeof arg === 'function') {
+      document.addEventListener("DOMContentLoaded", arg);
+    }
+    return this
   }
 
   find(tag) {
-    let els = document.querySelectorAll(tag)
+    let els = []
+    if (this.els.length) {
+      els = this.els[0].querySelectorAll(tag)
+    } else {
+      els = document.querySelectorAll(tag)
+    }
     if (els.length) {
       this.els = els
     }
@@ -21,7 +36,7 @@ export default class Dom {
 
   append(that) {
     this.els.forEach(el => {
-      that.els.map(v => {
+      that.els.forEach(v => {
         el.appendChild(v)
       })
     })
@@ -35,22 +50,57 @@ export default class Dom {
     return this
   }
 
-  css(style, value = null) {
+  css(...args) {
-    if (!value) {
+    if (args.length === 1) {
-      Object.keys(style).map(key => {
+      //情况一：获取样式
-          this.els.map(el => {
+      if (typeof args[0] === 'string') {
-            el.style[key] = this.getStyleValue(key, style[key])
+        return this.els[0].style[args[0]]
-          })
+      } else {
-        }
+        //情况三：设置多个样式
-      )
+        Object.keys(args[0]).map(key => {
+            this.els.forEach(el => {
+              el.style[key] = this.getStyleValue(key, args[0][key])
+            })
+          }
+        )
+      }
     } else {
-      this.els.map(el => {
+      //情况二，设置一对css样式
-        el.style[style] = this.getStyleValue(style, value)
+      this.els.forEach(el => {
+        el.style[args[0]] = this.getStyleValue(args[0], args[1])
       })
     }
     return this
   }
 
+  on(eventName, fn) {
+    let eventArray = eventName.split(" ");
+    this.els.forEach(el => {
+      eventArray.map(event => {
+        el.addEventListener(event, fn);
+      })
+    })
+    return this;
+  }
+
+  trigger(eventName) {
+    let eventArray = eventName.split(" ");
+    this.els.forEach(el => {
+      eventArray.map(event => {
+        el.dispatchEvent(new Event(event));
+      })
+    })
+    return this;
+  }
+
+  getWidth() {
+    return this.els[0].getBoundingClientRect().width
+  }
+
+  getHeight() {
+    return this.els[0].getBoundingClientRect().height
+  }
+
   getStyleValue(key, value) {
     let whiteList = [
       'top',