diff --git a/src/components/BVideo.vue b/src/components/BVideo.vue index 75258b1..0e2945a 100644 --- a/src/components/BVideo.vue +++ b/src/components/BVideo.vue @@ -11,7 +11,6 @@
-
@@ -142,6 +141,12 @@ export default { return -1 } }, + prefix: { + type: String, + default: () => { + return '' + } + }, //用于第一条数据，自动播放，如果都用事件去触发播放，有延迟 isPlay: { type: Boolean, @@ -171,7 +176,7 @@ export default { data() { return { loading: false, - name: `v-${this.index}-video`, + name: `v-${this.prefix}-${this.index}-video`, globalMethods: globalMethods, duration: 0, step: 0, @@ -186,10 +191,7 @@ export default { isMove: false, test: [1, 2], lVideo: this.video, - lastClickTime: -1, - clickTimer: null, - dbClickTimer: null, - isDbClick: false, + videoPoster: `?vframe/jpg/offset/0/w/${document.body.clientWidth}` } }, @@ -222,7 +224,6 @@ export default { }, false); } - // eventTester("loadstart", '客户端开始请求数据'); //客户端开始请求数据 // eventTester("abort", '客户端主动终止下载（不是因为错误引起）'); //客户端主动终止下载（不是因为错误引起） // eventTester("loadstart", '客户端开始请求数据'); //客户端开始请求数据 @@ -252,58 +253,6 @@ export default { videoWrapper.on('stop', this.stop) }, methods: { - dbClick(e) { - // console.log('dbclick') - let id = 'a' + Date.now() - let elWidth = 80 - let rotate = this.randomNum(0, 1) - let template = `` - let el = new Dom().create(template) - el.css({top: e.y - elWidth, left: e.x - elWidth / 2,}) - new Dom('#home-index').append(el) - setTimeout(() => { - new Dom(`#${id}`).remove() - }, 1000) - }, - randomNum(minNum, maxNum) { - switch (arguments.length) { - case 1: - return parseInt(Math.random() * minNum + 1, 10); - case 2: - return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10); - default: - return 0; - } - }, - checkDbClick(e) { - let checkTime = 400 - if (this.isDbClick) { - this.dbClick(e) - // console.log('checkDbClick-dbclick1') - clearTimeout(this.dbClickTimer); - this.dbClickTimer = setTimeout(() => { - this.isDbClick = false - }, 400); - } - let nowTime = new Date().getTime(); - if (nowTime - this.lastClickTime < checkTime) { - this.dbClick(e) - // console.log('checkDbClick-dbclick2') - - this.lastClickTime = 0; - this.clickTimer && clearTimeout(this.clickTimer); - this.isDbClick = true - this.dbClickTimer = setTimeout(() => { - this.isDbClick = false - }, checkTime); - } else { - this.lastClickTime = nowTime; - this.clickTimer = setTimeout(() => { - // console.log('单击') - this.togglePlayVideo() - }, checkTime); - } - }, play() { new Dom(`.${this.name}-marquee`).trigger('start') new Dom(`.${this.name}-music`).trigger('start') @@ -330,6 +279,13 @@ export default { this.$refs.video.pause() this.isPlaying = false }, + //切换视频状态 + togglePlayVideo(e) { + console.log('togglePlayVideo') + if (!this.isPlaying) { + this.play() + } + }, $likeNum(v) { return globalMethods.$likeNum(v) }, @@ -343,15 +299,7 @@ export default { this.isAttention = true }, 1000) }, - //切换视频状态 - togglePlayVideo(e) { - // console.log('togglePlayVideo') - if (this.isPlaying) { - this.pause() - } else { - this.play() - } - }, + loved(e, index) { this.lVideo.isLoved = !this.lVideo.isLoved this.$emit('update:video', this.lVideo) diff --git a/src/components/slide/SlideRowList.vue b/src/components/slide/SlideRowList.vue index 852e588..58465ef 100644 --- a/src/components/slide/SlideRowList.vue +++ b/src/components/slide/SlideRowList.vue @@ -189,7 +189,7 @@ export default { this.tabIndicatorRelationActiveIndexLefts.push( item.getBoundingClientRect().x - tabs.children[0].getBoundingClientRect().x + (this.isHome ? this.tabWidth * 0.15 : 0)) } - // console.log(this.tabIndicatorRelationActiveIndexLefts) + // console.log(this.indicatorRelateIndexLefts) this.indicatorSpace = this.tabIndicatorRelationActiveIndexLefts[1] - this.tabIndicatorRelationActiveIndexLefts[0] if (this.isHome) { this.$setCss(this.indicatorRef, 'transition-duration', `300ms`) diff --git a/src/pages/home/Index2.vue b/src/pages/home/Index2.vue index b4f787c..e39b990 100644 --- a/src/pages/home/Index2.vue +++ b/src/pages/home/Index2.vue @@ -331,69 +331,5 @@ export default { 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; - } - } - } - } \ No newline at end of file diff --git a/src/pages/slide/IndicatorHome.vue b/src/pages/slide/IndicatorHome.vue new file mode 100644 index 0000000..098be77 --- /dev/null +++ b/src/pages/slide/IndicatorHome.vue @@ -0,0 +1,152 @@ + + + + diff --git a/src/pages/slide/slide-horizontal.vue b/src/pages/slide/Slide-Horizontal.vue similarity index 92% rename from src/pages/slide/slide-horizontal.vue rename to src/pages/slide/Slide-Horizontal.vue index 658764f..0e0a09a 100644 --- a/src/pages/slide/slide-horizontal.vue +++ b/src/pages/slide/Slide-Horizontal.vue @@ -21,7 +21,6 @@ export default { this.total = this.wrapper.children.length this.wrapperWidth = this.$getCss(this.wrapper, 'width') this.wrapperHeight = this.$getCss(this.wrapper, 'height') - }, methods: { touchStart(e) { @@ -35,11 +34,11 @@ export default { let isRight = this.moveX < 0 if ((this.index === 0 && !isRight) || (this.index === this.total - 1 && isRight)) return - this.$stopPropagation(e) this.checkDirection(e) if (this.next) { + this.$stopPropagation(e) this.$setCss(this.wrapper, 'transform', `translate3d(${this.getDistance() + this.moveX @@ -48,11 +47,7 @@ export default { } }, checkDirection(e) { - if (this.needCheck) { - // this.$stopPropagation(e) - } else { - return - } + if (!this.needCheck) return if (Math.abs(this.moveX) > this.judgeValue || Math.abs(this.moveY) > this.judgeValue) { let angle = (Math.abs(this.moveX) * 10) / (Math.abs(this.moveY) * 10) if (angle > 1) { @@ -84,6 +79,7 @@ export default { this.reset() }, reset() { + this.moveX = 0 this.next = false this.needCheck = true }, @@ -94,8 +90,8 @@ export default { render(createElement, context) { return ( -
-
+
-
+
+
+ +
+ + +
+
+
+ + 美食 +
+
+ + 休闲娱乐 +
+
+ + 游玩 +
+
+ + 丽人/美发 +
+
+ + 住宿 +
+
+ +
+

+ r2222222222222222222222222222222222222222222222222222222 +

+
+
r333333333333333333333333333333333333333333333333333333
+ +
+
+
+
+ 正在直播 +
+
全部关注
+ +
+
+
+
+ + {{ item.name }} +
直播中
+
+
+
+ +
r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1
+
r2222222222222222222222222222222222222222222222222222222
+
r333333333333333333333333333333333333333333333333333333
+ +
+
+ +
r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1
+
r2222222222222222222222222222222222222222222222222222222
+
r333333333333333333333333333333333333333333333333333333
+ +
+ +
+
+
+

2

+
+ +
+ + + + + \ No newline at end of file diff --git a/src/pages/slide/slide.vue b/src/pages/slide/slide.vue deleted file mode 100644 index 3e685e2..0000000 --- a/src/pages/slide/slide.vue +++ /dev/null @@ -1,121 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/pages/test/TestSlide.vue b/src/pages/test/TestSlide.vue index 5907b06..4a02725 100644 --- a/src/pages/test/TestSlide.vue +++ b/src/pages/test/TestSlide.vue @@ -361,7 +361,7 @@ export default { if (import.meta.hot) { } -