diff --git a/src/pages/home/Index2.vue b/src/pages/home/Index2.vue index 06a3400..a030729 100644 --- a/src/pages/home/Index2.vue +++ b/src/pages/home/Index2.vue @@ -37,7 +37,7 @@ export default { components: {SlideListVirtual, Video1, Comment, Share,}, data() { return { - videos: [ + videos1: [ { // videoUrl: mp40, videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/0.mp4', @@ -149,6 +149,118 @@ export default { duration: 99 }, ], + videos: [ + { + videoUrl: mp40, + // videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/0.mp4', + videoPoster: src1Bg, + isLoved: true, + loves: 1234, + comments: 666, + shared: 999, + duration: 99 + }, + { + videoUrl: mp41, + // videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/1.mp4', + videoPoster: src1Bg, + isLoved: true, + loves: 1234, + comments: 666, + shared: 999, + duration: 99 + }, + { + videoUrl: mp42, + // videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/2.mp4', + videoPoster: src1Bg, + isLoved: false, + loves: 1234, + comments: 666, + shared: 999, + duration: 99 + }, + { + videoUrl: mp43, + // videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/3.mp4', + videoPoster: src1Bg, + isLoved: false, + loves: 1234, + comments: 666, + shared: 999, + duration: 99 + }, + { + videoUrl: mp44, + // videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/4.mp4', + videoPoster: src1Bg, + isLoved: false, + loves: 1234, + comments: 666, + shared: 999, + duration: 99 + }, + { + videoUrl: mp45, + // videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/5.mp4', + videoPoster: src1Bg, + isLoved: false, + loves: 1234, + comments: 666, + shared: 999, + duration: 99 + }, + { + videoUrl: mp46, + // videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/6.mp4', + videoPoster: src1Bg, + isLoved: false, + loves: 1234, + comments: 666, + shared: 999, + duration: 99 + }, + { + videoUrl: mp47, + // videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/7.mp4', + videoPoster: src1Bg, + isLoved: false, + loves: 1234, + comments: 666, + shared: 999, + duration: 99 + }, + { + videoUrl: mp48, + // videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/8.mp4', + videoPoster: src1Bg, + isLoved: false, + loves: 1234, + comments: 666, + shared: 999, + duration: 99 + }, + { + videoUrl: mp49, + // videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/9.mp4', + videoPoster: src1Bg, + isLoved: false, + loves: 1234, + comments: 666, + shared: 999, + duration: 99 + }, + { + videoUrl: mp410, + // videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/10.mp4', + videoPoster: src1Bg, + isLoved: false, + loves: 1234, + comments: 666, + shared: 999, + duration: 99 + }, + ], isCommenting: false, isSharing: false, videoActiveIndex: 0, diff --git a/src/pages/home/SlideListVirtual.vue b/src/pages/home/SlideListVirtual.vue index e97695d..cba769a 100644 --- a/src/pages/home/SlideListVirtual.vue +++ b/src/pages/home/SlideListVirtual.vue @@ -235,7 +235,6 @@ export default { getHeight(index) { return this.slideItemsHeights.reduce((p, c, i) => { if (i < index) { - //最后一页,如果宽度不够屏幕宽度,那不能拉完 if (this.slideItemsHeights.length - 1 === i + 1) { p = p + c - (this.wrapperHeight - this.slideItemsHeights[index]) } else { @@ -272,7 +271,6 @@ export default { height: 100%; overflow: hidden; - #base-slide-list { display: flex; height: 100%; @@ -280,119 +278,5 @@ export default { position: relative; } - - .indicator-home { - position: fixed; - font-size: 1.6rem; - top: 0; - left: 0; - height: 60px; - z-index: 2; - width: 100%; - color: white; - - .notice { - opacity: 0; - top: 0; - position: absolute; - width: 100vw; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - } - - .loading { - opacity: 0; - top: 20px; - right: 15px; - position: absolute; - - } - - .toolbar { - position: relative; - color: white; - width: 100%; - height: 100%; - box-sizing: border-box; - padding: 0 15px; - display: flex; - justify-content: space-between; - align-items: center; - - .tab-ctn { - width: 30%; - position: relative; - - .tabs { - display: flex; - justify-content: space-between; - font-weight: bold; - - .tab { - transition: color .3s; - color: gray; - - &.active { - color: white; - } - } - } - - - .indicator { - //transition: left .3s; - position: absolute; - bottom: -8px; - height: 3px; - width: 20px; - background: #fff; - border-radius: 5px; - } - } - } - } - - .indicator-me { - top: 0; - left: 0; - right: 0; - z-index: 999; - background: $main-bg; - - .tabs { - display: flex; - justify-content: space-between; - font-weight: bold; - - .tab { - height: 40px; - width: 33%; - display: flex; - justify-content: center; - align-items: center; - color: gray; - transition: color .3s; - - &.active { - color: white; - } - } - } - - .indicator { - height: 2px; - background: gold; - width: 33%; - position: relative; - transition: all .3s; - } - } - - .indicator-me.fixed { - position: fixed; - } - } \ No newline at end of file