zyronon
4 years ago
20 changed files with 403 additions and 1294 deletions
@ -1,61 +1,4 @@
@@ -1,61 +1,4 @@
|
||||
$main-bg: rgb(22, 26, 37); |
||||
.c-red { |
||||
color: red; |
||||
} |
||||
|
||||
.c-white { |
||||
color: white; |
||||
} |
||||
|
||||
.c-gray { |
||||
color: gray; |
||||
} |
||||
|
||||
.c-text-notice { |
||||
color: #008000 !important; |
||||
} |
||||
|
||||
.c-black { |
||||
color: black; |
||||
} |
||||
|
||||
.c-text-gray { |
||||
color: #80808094; |
||||
} |
||||
|
||||
.bg-red { |
||||
background: red; |
||||
} |
||||
|
||||
.bg-gold { |
||||
background: gold; |
||||
} |
||||
|
||||
.bg-green { |
||||
background: green; |
||||
} |
||||
|
||||
.bg-white { |
||||
background: white; |
||||
} |
||||
|
||||
.bg-gray { |
||||
background: gray; |
||||
} |
||||
|
||||
.bg-second-gray { |
||||
background: #c1c1c1; |
||||
|
||||
} |
||||
|
||||
.red { |
||||
background: red; |
||||
} |
||||
|
||||
.gold { |
||||
background: gold; |
||||
} |
||||
|
||||
.green { |
||||
background: green; |
||||
} |
||||
$second-text-color: rgb(143, 143, 158); |
||||
$second-btn-color: rgb(58,58,70); |
||||
$line-color: rgb(37, 45, 66); |
||||
|
||||
@ -1,22 +0,0 @@
@@ -1,22 +0,0 @@
|
||||
<template> |
||||
<div id="base-slide-item" ref="slideItem"> |
||||
<slot></slot> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: "BaseSlideItem" |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
#base-slide-item { |
||||
width: 100%; |
||||
height: 100%; |
||||
/*flex: 1;*/ |
||||
/*flex-shrink: 1;*/ |
||||
overflow-y: scroll; |
||||
} |
||||
|
||||
</style> |
||||
@ -1,201 +0,0 @@
@@ -1,201 +0,0 @@
|
||||
<template> |
||||
<div id="base-slide-wrapper" ref="slideWrapper"> |
||||
<div id="base-slide-list" ref="slideList" |
||||
@touchstart="touchStart($event)" |
||||
@touchmove="touchMove($event)" |
||||
@touchend="touchEnd($event)"> |
||||
<slot></slot> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: "BaseSlideList", |
||||
created() { |
||||
// console.log('created',this.$refs) |
||||
}, |
||||
data() { |
||||
return { |
||||
wrapperWidth: 0, |
||||
|
||||
startLocationX: 0, |
||||
startLocationY: 0, |
||||
|
||||
lastLocationX: 0, |
||||
lastLocationY: 0, |
||||
|
||||
moveXDistance: 0, |
||||
moveYDistance: 0, |
||||
|
||||
judgeValue: 20, |
||||
startTime: 0, |
||||
|
||||
currentSlideItemIndex: 0, |
||||
isDrawRight: 0, |
||||
isCanRightWiping: false, |
||||
isCanDownWiping: false, |
||||
isNeedCheck: true, |
||||
|
||||
slideList: null, |
||||
slideItems: null, |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.slideList = this.$refs.slideList |
||||
this.slideItems = this.slideList.children |
||||
this.wrapperWidth = this.$getCss(this.slideList, 'width') |
||||
console.log(this.wrapperWidth) |
||||
this.slideList.style.width = this.slideItems.length * this.wrapperWidth + 'px' |
||||
}, |
||||
methods: { |
||||
touchStart(e) { |
||||
this.slideList.style.transition = 'none' |
||||
// indicator.style.transition = 'none' |
||||
|
||||
this.startLocationX = e.touches[0].pageX |
||||
this.startLocationY = e.touches[0].pageY |
||||
// console.log(' this.startLocationX', this.startLocationX) |
||||
// console.log(' this.startLocationY', this.startLocationY) |
||||
this.startTime = Date.now() |
||||
}, |
||||
touchMove(e) { |
||||
this.lastLocationX = e.touches[0].pageX |
||||
this.lastLocationY = e.touches[0].pageY |
||||
this.moveXDistance = this.lastLocationX - this.startLocationX |
||||
this.moveYDistance = this.lastLocationY - this.startLocationY |
||||
|
||||
// console.log('moveXDistance', this.moveXDistance) |
||||
// console.log('moveYDistance', this.moveYDistance) |
||||
|
||||
this.isDrawRight = this.moveXDistance < 0 |
||||
|
||||
// console.log(this.isDrawRight) |
||||
|
||||
this.checkDirection() |
||||
if (this.isCanRightWiping) { |
||||
//禁止在index=0页面的时候，向左划 |
||||
if (this.currentSlideItemIndex === 0 && !this.isDrawRight) { |
||||
return |
||||
} |
||||
//禁止在最后页面的时候，向右划 |
||||
if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawRight) { |
||||
return |
||||
} |
||||
e.stopImmediatePropagation() |
||||
e.stopPropagation() |
||||
|
||||
if (this.isDrawRight) { |
||||
this.slideList.style.left = -this.currentSlideItemIndex * this.wrapperWidth + this.moveXDistance + this.judgeValue + 'px' |
||||
} else { |
||||
this.slideList.style.left = -this.currentSlideItemIndex * this.wrapperWidth + this.moveXDistance - this.judgeValue + 'px' |
||||
} |
||||
} |
||||
}, |
||||
touchEnd(e) { |
||||
if (this.currentSlideItemIndex === 0 && !this.isDrawRight) { |
||||
return |
||||
} |
||||
//禁止在最后页面的时候，向右划 |
||||
if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawRight) { |
||||
return |
||||
} |
||||
|
||||
this.slideList.style.transition = 'all .3s' |
||||
|
||||
let endTime = Date.now() |
||||
let gapTime = endTime - this.startTime |
||||
|
||||
// 如果 |
||||
if (Math.abs(this.moveXDistance) < 20) { |
||||
gapTime = 1000 |
||||
} |
||||
if (Math.abs(this.moveXDistance) > (this.wrapperWidth / 3)) { |
||||
gapTime = 100 |
||||
} |
||||
|
||||
if (gapTime < 150) { |
||||
if (this.isDrawRight) { |
||||
this.currentSlideItemIndex += 1 |
||||
} else { |
||||
this.currentSlideItemIndex -= 1 |
||||
} |
||||
this.slideList.style.left = -(this.currentSlideItemIndex) * this.wrapperWidth + 'px' |
||||
|
||||
} else { |
||||
this.slideList.style.left = -(this.currentSlideItemIndex) * this.wrapperWidth + 'px' |
||||
} |
||||
this.resetConfig() |
||||
}, |
||||
resetConfig() { |
||||
this.isCanDownWiping = false |
||||
this.isCanRightWiping = false |
||||
this.isNeedCheck = true |
||||
this.moveXDistance = 0 |
||||
this.moveYDistance = 0 |
||||
}, |
||||
checkDirection() { |
||||
if (!this.isNeedCheck) { |
||||
// console.log('不需要检测了') |
||||
return |
||||
} |
||||
if (Math.abs(this.moveXDistance) > this.judgeValue || Math.abs(this.moveYDistance) > this.judgeValue) { |
||||
// console.log((Math.abs(this.moveXDistance) * 10)) |
||||
// console.log((Math.abs(this.moveYDistance) * 10)) |
||||
// console.log((Math.abs(this.moveYDistance))) |
||||
//y移动距离为0 ，angle为Infinty |
||||
if (Math.abs(this.moveYDistance) === 0) { |
||||
//左右划 |
||||
this.isCanDownWiping = false |
||||
this.isCanRightWiping = true |
||||
this.isNeedCheck = false |
||||
return; |
||||
} |
||||
//X 除以 Y |
||||
let angle = (Math.abs(this.moveXDistance) * 10) / (Math.abs(this.moveYDistance) * 10) |
||||
// console.log('angle', angle); |
||||
if (angle > 0.7 && angle < 1.3) { |
||||
this.isNeedCheck = false |
||||
return |
||||
} |
||||
|
||||
// console.log('x------------', moveXDistance) |
||||
// console.log('y------------', moveYDistance) |
||||
// console.log('角度------------', angle) |
||||
|
||||
if (angle < 0.6) { |
||||
//上下划 |
||||
this.isCanDownWiping = true |
||||
this.isCanRightWiping = false |
||||
this.isNeedCheck = false |
||||
return |
||||
} |
||||
if (angle > 5) { |
||||
//左右划 |
||||
this.isCanDownWiping = false |
||||
this.isCanRightWiping = true |
||||
this.isNeedCheck = false |
||||
return |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
#base-slide-wrapper { |
||||
width: 100%; |
||||
overflow: hidden; |
||||
|
||||
#base-slide-list { |
||||
display: flex; |
||||
left: 0; |
||||
/*transition: all 0.3s ease 0s;*/ |
||||
height: 100%; |
||||
width: 100%; |
||||
position: relative; |
||||
} |
||||
} |
||||
|
||||
</style> |
||||
@ -1,594 +0,0 @@
@@ -1,594 +0,0 @@
|
||||
<template> |
||||
<div id="home"> |
||||
<div class="wrapper" :style="{left:wrapperLeft}" |
||||
@touchstart="wrapperTouchstart($event)" |
||||
@touchmove="wrapperTouchmove($event)" |
||||
@touchend="wrapperTouchend($event)"> |
||||
<div class="left-container swiper-item"> |
||||
<div class="content-list" :style="{top:contentListTop}"> |
||||
<div class="content-item" v-for="(item,index) of data" |
||||
@touchstart="contentItemTouchstart($event,index)" |
||||
@touchmove="contentItemTouchmove($event)" |
||||
@touchend="contentItemTouchend($event,index)"> |
||||
<div class="bg-video" v-bind:style="{'height':height+'px'}"> |
||||
<video :src="item.videoUrl" :poster="item.poster" ref="video" muted :autoplay="index === 0" loop> |
||||
<p> 您的浏览器不支持 video 标签。</p> |
||||
</video> |
||||
<div class="float" @click="togglePlayVideo($event)"> |
||||
<transition name="pause"> |
||||
<img src="../../assets/img/icon/play.svg" class="pause" v-show="!isPlaying" |
||||
@click.stop="togglePlayVideo($event)"> |
||||
</transition> |
||||
<div class="toolbar mb10p"> |
||||
<img src="../../assets/img/icon/head-image.jpeg" alt="" class="head-image mb15p" @click.stop="goUserInfo(item)"> |
||||
<div class="love mb15p" @click.stop="loved($event,index)"> |
||||
<div> |
||||
<transition name="love"> |
||||
<img src="../../assets/img/icon/love.svg" class="love-image" |
||||
v-if="!item.isLoved"> |
||||
<img src="../../assets/img/icon/loved.svg" class="love-image" |
||||
v-if="item.isLoved"> |
||||
|
||||
</transition> |
||||
<transition name="loved"> |
||||
</transition> |
||||
</div> |
||||
<span class="f14">{{item.loves}}</span> |
||||
</div> |
||||
<div class="message mb15p" @click.stop="showComment"> |
||||
<img src="../../assets/img/icon/message.svg" alt="" class="message-image"> |
||||
<span class="f14">{{item.comments}}</span> |
||||
</div> |
||||
<div class="share mb35p" @click.stop="showShare"> |
||||
<img src="../../assets/img/icon/share.svg" alt="" class="share-image"> |
||||
<span class="f14">{{item.shared}}</span> |
||||
</div> |
||||
<img src="../../assets/img/icon/head-image.jpeg" alt="" class="music" @click.stop="goMusic()"> |
||||
</div> |
||||
<div class="content ml10p" @click.stop="goUserInfo()"> |
||||
<div class="name mb10p" >@TTentau</div> |
||||
<div class="description mb10p"> |
||||
吴三二的光年之外, 您的浏览器不支持 video 标签。 您的浏览器不支持 video 标签。 |
||||
</div> |
||||
<div class="music mb10p" @click.stop="goMusic()"> |
||||
<img src="../../assets/img/icon/music.svg" alt="" class="music-image"> |
||||
<marquee behavior=scroll direction=left align=middle scrollamount=4> 吴三二 - |
||||
光年之外 |
||||
</marquee> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<Comment v-bind:is-commenting.sync="isCommenting"/> |
||||
<Share v-bind:is-sharing.sync="isSharing" ref="share"/> |
||||
<Footer v-bind:init-tab="1"/> |
||||
</div> |
||||
<div class="right-container swiper-item"> |
||||
<Other ref="other" @back="backVideoList"/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Comment from '../Comment' |
||||
import Other from '../Other' |
||||
import Share from '../Share' |
||||
import Footer from "../Footer" |
||||
|
||||
export default { |
||||
name: "Home", |
||||
components: {Footer, Comment, Share, Other}, |
||||
data() { |
||||
return { |
||||
data: [ |
||||
{ |
||||
videoUrl: require('../../assets/video/1.mp4'), |
||||
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ', |
||||
videoPoster: require('../../assets/img/poster/src1-bg.png'), |
||||
isLoved: false, |
||||
loves: 1234, |
||||
comments: 666, |
||||
shared: 999 |
||||
}, |
||||
{ |
||||
videoUrl: require('../../assets/video/src1.mp4'), |
||||
videoPoster: require('../../assets/img/poster/src1-bg.png'), |
||||
isLoved: false, |
||||
loves: 1234, |
||||
comments: 666, |
||||
shared: 999 |
||||
}, |
||||
{ |
||||
videoUrl: require('../../assets/video/src1.mp4'), |
||||
videoPoster: require('../../assets/img/poster/src1-bg.png'), |
||||
isLoved: false, |
||||
loves: 1234, |
||||
comments: 666, |
||||
shared: 999 |
||||
} |
||||
], |
||||
height: 0, |
||||
width: 0, |
||||
startLocationY: 0, |
||||
startLocationX: 0, |
||||
|
||||
lastLocationY: 0, |
||||
lastLocationX: 0, |
||||
|
||||
moveXDistance: 0, |
||||
moveYDistance: 0, |
||||
|
||||
judgeValue: 10, |
||||
|
||||
startTime: 0, |
||||
currentIndex: 0, |
||||
currentSwiperItemIndex: 0, |
||||
isDrawDown: false, |
||||
isDrawRight: false, |
||||
|
||||
isCanDownWiping: false, |
||||
isCanRightWiping: false, |
||||
isNeedCheck: true, |
||||
|
||||
isPlaying: true, |
||||
isCommenting: false, |
||||
isSharing: false, |
||||
|
||||
wrapperLeft: 0, |
||||
contentListTop: 0, |
||||
|
||||
commentHeight: 0, |
||||
shareHeight: 0, |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.height = document.body.clientHeight |
||||
this.width = document.body.clientWidth |
||||
}, |
||||
methods: { |
||||
goMusic(){ |
||||
this.$router.push('/music') |
||||
}, |
||||
checkDirection() { |
||||
if (!this.isNeedCheck) { |
||||
return |
||||
} |
||||
if (Math.abs(this.moveXDistance) > this.judgeValue || Math.abs(this.moveYDistance) > this.judgeValue) { |
||||
//X 除以 Y |
||||
let angle = (Math.abs(this.moveXDistance) * 10) / (Math.abs(this.moveYDistance) * 10) |
||||
if (angle > 0.7 && angle < 1.3) { |
||||
this.isNeedCheck = false |
||||
return |
||||
} |
||||
|
||||
// console.log('x------------', moveXDistance) |
||||
// console.log('y------------', moveYDistance) |
||||
// console.log('角度------------', angle) |
||||
|
||||
if (angle < 0.6) { |
||||
//上下划 |
||||
this.isCanDownWiping = true |
||||
this.isCanRightWiping = false |
||||
this.isNeedCheck = false |
||||
return |
||||
} |
||||
if (angle > 5) { |
||||
//左右划 |
||||
this.isCanDownWiping = false |
||||
this.isCanRightWiping = true |
||||
this.isNeedCheck = false |
||||
} |
||||
} |
||||
}, |
||||
resetConfig() { |
||||
this.isCanDownWiping = false |
||||
this.isCanRightWiping = false |
||||
this.isNeedCheck = true |
||||
this.moveXDistance = 0 |
||||
this.moveYDistance = 0 |
||||
}, |
||||
wrapperTouchstart(e) { |
||||
if (this.isSharing || this.isCommenting) { |
||||
// this.isNeedCheck = this.isCommenting = this.isSharing = false |
||||
this.isNeedCheck = false |
||||
return |
||||
} |
||||
|
||||
this.startLocationX = e.touches[0].pageX |
||||
this.startTime = Date.now() |
||||
}, |
||||
wrapperTouchmove(e) { |
||||
this.lastLocationX = e.touches[0].pageX |
||||
this.moveXDistance = this.lastLocationX - this.startLocationX |
||||
this.isDrawRight = this.moveXDistance < 0 |
||||
this.checkDirection() |
||||
if (this.isCanRightWiping) { |
||||
if (this.isDrawRight) { |
||||
this.wrapperLeft = -this.currentSwiperItemIndex * this.width + this.moveXDistance + this.judgeValue + 'px' |
||||
} else { |
||||
this.wrapperLeft = -this.currentSwiperItemIndex * this.width + this.moveXDistance - this.judgeValue + 'px' |
||||
} |
||||
} |
||||
}, |
||||
wrapperTouchend(e) { |
||||
if (!this.isCanRightWiping) { |
||||
this.isNeedCheck = true |
||||
return |
||||
} |
||||
let endTime = Date.now() |
||||
let gapTime = endTime - this.startTime |
||||
|
||||
if (Math.abs(this.moveXDistance) < 20) { |
||||
gapTime = 1000 |
||||
} |
||||
if (Math.abs(this.moveXDistance) > (this.width / 3)) { |
||||
gapTime = 100 |
||||
} |
||||
if (gapTime < 150) { |
||||
if (this.isDrawRight) { |
||||
// console.log('往左划'); |
||||
if (this.currentSwiperItemIndex === 2 - 1) { |
||||
return this.wrapperLeft = -this.width + 'px' |
||||
} |
||||
this.wrapperLeft = -(this.currentSwiperItemIndex + 1) * this.width + 'px' |
||||
this.currentSwiperItemIndex += 1 |
||||
} else { |
||||
// console.log('往右划'); |
||||
if (this.currentSwiperItemIndex === 0) { |
||||
return this.wrapperLeft = 0 + 'px' |
||||
} |
||||
this.wrapperLeft = -(this.currentSwiperItemIndex - 1) * this.width + 'px' |
||||
this.currentSwiperItemIndex -= 1 |
||||
} |
||||
} else { |
||||
this.wrapperLeft = -(this.currentSwiperItemIndex) * this.width + 'px' |
||||
} |
||||
|
||||
//暂停播放视频 |
||||
let videos = this.$refs.video |
||||
if (this.currentSwiperItemIndex === 0) { |
||||
videos[this.currentIndex].play() |
||||
} else { |
||||
videos[this.currentIndex].pause() |
||||
} |
||||
|
||||
this.resetConfig() |
||||
}, |
||||
contentItemTouchstart(e, index) { |
||||
// this.currentIndex = index |
||||
this.startLocationY = e.touches[0].pageY |
||||
this.startTime = Date.now() |
||||
}, |
||||
contentItemTouchmove(e) { |
||||
this.lastLocationY = e.touches[0].pageY |
||||
|
||||
this.moveYDistance = this.lastLocationY - this.startLocationY |
||||
this.isDrawDown = this.moveYDistance < 0 |
||||
|
||||
this.checkDirection() |
||||
if (this.isCanDownWiping) { |
||||
if (this.isDrawDown) { |
||||
this.contentListTop = -this.currentIndex * this.height + this.moveYDistance + this.judgeValue + 'px' |
||||
// contentList.css({top: -(currentIndex + 0) * height + moveYDistance + judgeValue}) |
||||
} else { |
||||
this.contentListTop = -this.currentIndex * this.height + this.moveYDistance - this.judgeValue + 'px' |
||||
// contentList.css({top: -(currentIndex + 0) * height + moveYDistance - judgeValue}) |
||||
} |
||||
} |
||||
}, |
||||
contentItemTouchend(e, index) { |
||||
this.currentIndex = index |
||||
|
||||
if (!this.isCanDownWiping) { |
||||
this.isNeedCheck = true |
||||
return |
||||
} |
||||
let endTime = Date.now() |
||||
let gapTime = endTime - this.startTime |
||||
|
||||
// 如果 |
||||
if (Math.abs(this.moveYDistance) < 20) { |
||||
gapTime = 1000 |
||||
} |
||||
if (Math.abs(this.moveYDistance) > (this.width / 3)) { |
||||
gapTime = 100 |
||||
} |
||||
if (gapTime < 150) { |
||||
if (this.isDrawDown) { |
||||
console.log('往下划') |
||||
if (this.data.length < this.currentIndex + 4) { |
||||
this.loadNewVideo() |
||||
} |
||||
this.contentListTop = -(this.currentIndex + 1) * this.height + 'px' |
||||
this.currentIndex += 1 |
||||
} else { |
||||
console.log('往上划') |
||||
if (this.currentIndex === 0) { |
||||
return this.contentListTop = 0 |
||||
} |
||||
this.contentListTop = -(this.currentIndex - 1) * this.height + 'px' |
||||
this.currentIndex -= 1 |
||||
} |
||||
this.swipingVideo() |
||||
} else { |
||||
this.contentListTop = -this.currentIndex * this.height + 'px' |
||||
} |
||||
|
||||
this.resetConfig() |
||||
}, |
||||
//加载新的视频 |
||||
loadNewVideo() { |
||||
this.data.push({ |
||||
videoUrl: require('../../assets/video/src1.mp4'), |
||||
videoPoster: require('../../assets/img/poster/src1-bg.png'), |
||||
isLoved: false, |
||||
loves: 1234, |
||||
comments: 666, |
||||
shared: 999 |
||||
}) |
||||
}, |
||||
|
||||
//划动到下一个视频 |
||||
swipingVideo() { |
||||
let videos = this.$refs.video |
||||
if (this.currentIndex) { |
||||
videos[this.currentIndex - 1].pause() |
||||
} |
||||
videos[this.currentIndex].play() |
||||
videos[this.currentIndex].muted = false |
||||
videos[this.currentIndex + 1].pause() |
||||
|
||||
|
||||
this.isCommenting = false |
||||
this.isSharing = false |
||||
this.isPlaying = true |
||||
}, |
||||
//切换视频状态 |
||||
togglePlayVideo(e) { |
||||
if (this.isSharing) { |
||||
this.isSharing = false |
||||
return |
||||
} |
||||
if (this.isCommenting) { |
||||
this.isCommenting = false |
||||
return |
||||
} |
||||
let el = e.target |
||||
let video = '' |
||||
if (el.nodeName == 'IMG') { |
||||
video = el.parentNode.previousSibling |
||||
} else { |
||||
video = el.previousSibling |
||||
} |
||||
if (video.paused) { |
||||
video.play() |
||||
} else { |
||||
video.pause() |
||||
} |
||||
this.isPlaying = !video.paused |
||||
}, |
||||
//展示评论 |
||||
showComment() { |
||||
this.isCommenting = !this.isCommenting |
||||
}, |
||||
showShare() { |
||||
this.isSharing = !this.isSharing |
||||
}, |
||||
loved(e, index) { |
||||
this.data[index].isLoved = !this.data[index].isLoved |
||||
}, |
||||
//前往用户中心 |
||||
goUserInfo(item){ |
||||
this.wrapperLeft = '-100%' |
||||
}, |
||||
//返回视频列表 |
||||
backVideoList(){ |
||||
this.wrapperLeft = '0' |
||||
} |
||||
}, |
||||
created() { |
||||
|
||||
}, |
||||
|
||||
} |
||||
</script> |
||||
<style scoped lang="scss"> |
||||
#home { |
||||
width: 100%; |
||||
height: 100%; |
||||
overflow: hidden; |
||||
|
||||
.wrapper { |
||||
/*transition: left 0.25s ease;*/ |
||||
transition: left 0.25s ease-out; |
||||
position: relative; |
||||
display: flex; |
||||
width: 100%; |
||||
height: 100%; |
||||
|
||||
.swiper-item { |
||||
/*flex-shrink: 0;*/ |
||||
position: absolute; |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
|
||||
.left-container { |
||||
top: 0; |
||||
left: 0; |
||||
overflow: hidden; |
||||
|
||||
.content-list { |
||||
position: absolute; |
||||
transition: top 0.25s ease-out; |
||||
height: 100%; |
||||
width: 100%; |
||||
|
||||
.content-item { |
||||
width: 100%; |
||||
height: 100%; |
||||
position: relative; |
||||
|
||||
.bg-video { |
||||
position: relative; |
||||
background: black; |
||||
|
||||
video { |
||||
width: 100%; |
||||
height: 100%; |
||||
/*position: absolute;*/ |
||||
} |
||||
|
||||
.float { |
||||
z-index: 1; |
||||
position: absolute; |
||||
top: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
justify-content: center; |
||||
align-items: center; |
||||
|
||||
.pause { |
||||
width: 60px; |
||||
height: 60px; |
||||
opacity: 0.5; |
||||
position: absolute; |
||||
margin: auto; |
||||
left: 0; |
||||
top: 0; |
||||
bottom: 0; |
||||
right: 0; |
||||
} |
||||
|
||||
.toolbar { |
||||
width: 40px; |
||||
position: absolute; |
||||
bottom: 35px; |
||||
right: 20px; |
||||
color: #fff; |
||||
|
||||
div { |
||||
text-align: center; |
||||
} |
||||
|
||||
img { |
||||
width: 90%; |
||||
height: 90%; |
||||
} |
||||
|
||||
.head-image, .music { |
||||
width: 100%; |
||||
height: 100%; |
||||
border-radius: 50%; |
||||
} |
||||
|
||||
.love { |
||||
img { |
||||
|
||||
} |
||||
} |
||||
|
||||
.loved { |
||||
background: red; |
||||
} |
||||
|
||||
.music { |
||||
animation: animations 4s linear forwards infinite; |
||||
} |
||||
|
||||
@keyframes animations { |
||||
0% { |
||||
transform: rotate(0deg);; |
||||
} |
||||
100% { |
||||
transform: rotate(360deg); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.content { |
||||
color: #fff; |
||||
position: absolute; |
||||
bottom: 35px; |
||||
width: 75%; |
||||
|
||||
.music { |
||||
position: relative; |
||||
width: 60%; |
||||
|
||||
.music-image { |
||||
width: 20px; |
||||
height: 20px; |
||||
margin-top: 3px; |
||||
position: absolute; |
||||
} |
||||
|
||||
marquee { |
||||
margin-left: 30px; |
||||
} |
||||
|
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.right-container { |
||||
top: 0; |
||||
left: 100%; |
||||
overflow: auto; |
||||
|
||||
.user-videos { |
||||
height: 12000px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
<style scoped lang="scss"> |
||||
|
||||
.pause-enter-active { |
||||
transition: all .3s ease; |
||||
} |
||||
|
||||
.pause-leave-active { |
||||
/*transition: all 1s ease ;*/ |
||||
} |
||||
|
||||
.pause-enter, .pause-leave-to { |
||||
transform: scale(2); |
||||
opacity: 0; |
||||
} |
||||
|
||||
.love-enter-active { |
||||
transition: all .3s ease; |
||||
} |
||||
|
||||
.love-leave-active { |
||||
transition: all .3s ease; |
||||
} |
||||
|
||||
.love-leave-to { |
||||
transform: scale(2); |
||||
opacity: 0; |
||||
} |
||||
|
||||
.loved-enter-active { |
||||
transition: all .3s ease; |
||||
} |
||||
|
||||
.loved-leave-active { |
||||
transition: all .3s ease; |
||||
} |
||||
|
||||
.loved-leave-to { |
||||
opacity: 0; |
||||
} |
||||
|
||||
|
||||
</style> |
||||
@ -1,20 +0,0 @@
@@ -1,20 +0,0 @@
|
||||
<template> |
||||
<div id="base-slide-item" ref="slideItem"> |
||||
<slot></slot> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: "BaseSlideItem" |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
#base-slide-item { |
||||
width: 100vw; |
||||
height: 100%; |
||||
//flex: 1; |
||||
} |
||||
|
||||
</style> |
||||
@ -1,232 +0,0 @@
@@ -1,232 +0,0 @@
|
||||
<template> |
||||
<div id="base-slide-wrapper" ref="slideWrapper"> |
||||
<div id="base-slide-list" ref="slideList" |
||||
:style="{'flex-direction':direction}" |
||||
@touchstart="touchStart($event)" |
||||
@touchmove="touchMove($event)" |
||||
@touchend="touchEnd($event)"> |
||||
<slot></slot> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: "BaseSlideList", |
||||
props: { |
||||
direction: { |
||||
type: String, |
||||
default: () => 'row' |
||||
}, |
||||
key1: { |
||||
type: String, |
||||
default: () => 'row' |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
wrapperWidth: 0, |
||||
wrapperHeight: 0, |
||||
|
||||
startLocationX: 0, |
||||
startLocationY: 0, |
||||
|
||||
lastLocationX: 0, |
||||
lastLocationY: 0, |
||||
|
||||
moveXDistance: 0, |
||||
moveYDistance: 0, |
||||
|
||||
judgeValue: 10, |
||||
startTime: 0, |
||||
|
||||
currentSlideItemIndex: 0, |
||||
isDrawRight: true, |
||||
isDrawDown: true, |
||||
isCanRightWiping: false, |
||||
isCanDownWiping: false, |
||||
isNeedCheck: true, |
||||
|
||||
slideList: null, |
||||
slideItems: null, |
||||
slideItemsWidths: [], |
||||
slideItemsHeights: [], |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.slideList = this.$refs.slideList |
||||
this.slideItems = this.slideList.children |
||||
this.wrapperWidth = this.$getCss(this.slideList, 'width') |
||||
this.wrapperHeight = this.$getCss(this.slideList, 'height') |
||||
// console.log(this.wrapperWidth) |
||||
// console.log(this.wrapperHeight) |
||||
for (let i = 0; i < this.slideItems.length; i++) { |
||||
this.slideItemsWidths.push(this.$getCss(this.slideItems[i], 'width')) |
||||
this.slideItemsHeights.push(this.$getCss(this.slideItems[i], 'height')) |
||||
} |
||||
}, |
||||
methods: { |
||||
touchStart(e) { |
||||
this.setCss(this.slideList, 'transition-duration', `0ms`) |
||||
this.startLocationX = e.touches[0].pageX |
||||
this.startLocationY = e.touches[0].pageY |
||||
// console.log(' this.startLocationX', this.startLocationX) |
||||
// console.log(' this.startLocationY', this.startLocationY) |
||||
this.startTime = Date.now() |
||||
}, |
||||
touchMove(e) { |
||||
// console.log(e) |
||||
this.lastLocationX = e.touches[0].pageX |
||||
this.lastLocationY = e.touches[0].pageY |
||||
this.moveXDistance = this.lastLocationX - this.startLocationX |
||||
this.moveYDistance = this.lastLocationY - this.startLocationY |
||||
|
||||
// console.log(this.key) |
||||
// console.log(this.direction + ' moveXDistance', this.moveXDistance) |
||||
// console.log(this.direction + ' moveYDistance', this.moveYDistance) |
||||
|
||||
this.isDrawRight = this.moveXDistance < 0 |
||||
this.isDrawDown = this.moveYDistance < 0 |
||||
this.checkDirection() |
||||
if (this.direction === 'row') { |
||||
if (this.isCanRightWiping) { |
||||
// //禁止在index=0页面的时候，向左划 |
||||
if (this.currentSlideItemIndex === 0 && !this.isDrawRight) return |
||||
//禁止在最后页面的时候，向右划 |
||||
if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawRight) return |
||||
e.stopImmediatePropagation() |
||||
e.stopPropagation() |
||||
e.preventDefault() |
||||
this.setCss(this.slideList, 'transform', `translate3d(${-this.getWidth(this.currentSlideItemIndex) + this.moveXDistance}px, 0px, 0px)`) |
||||
// this.setCss(this.slideList, 'transform', `translate3d(${-this.currentSlideItemIndex * this.wrapperWidth + this.moveXDistance}px, 0px, 0px)`) |
||||
} |
||||
} else { |
||||
if (this.isCanDownWiping) { |
||||
// //禁止在index=0页面的时候，向左划 |
||||
if (this.currentSlideItemIndex === 0 && !this.isDrawDown) return |
||||
//禁止在最后页面的时候，向右划 |
||||
if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawDown) return |
||||
e.stopImmediatePropagation() |
||||
e.stopPropagation() |
||||
e.preventDefault() |
||||
this.setCss(this.slideList, 'transform', `translate3d(0px, ${-this.getHeight(this.currentSlideItemIndex) + this.moveYDistance}px, 0px)`) |
||||
} |
||||
} |
||||
}, |
||||
getWidth(index) { |
||||
return this.slideItemsWidths.reduce((p, c, i) => { |
||||
if (i < index) { |
||||
//最后一页，如果宽度不够屏幕宽度，那不能拉完 |
||||
if (this.slideItemsWidths.length - 1 === i + 1) { |
||||
p = p + c - (this.wrapperWidth - this.slideItemsWidths[index]) |
||||
} else { |
||||
p += c |
||||
} |
||||
} |
||||
return p |
||||
}, 0) |
||||
}, |
||||
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 { |
||||
p += c |
||||
} |
||||
} |
||||
return p |
||||
}, 0) |
||||
}, |
||||
setCss(el, key, value) { |
||||
if (key === 'transform') { |
||||
el.style.webkitTransform = el.style.MsTransform = el.style.msTransform = el.style.MozTransform = el.style.OTransform = el.style.transform = value; |
||||
} else { |
||||
el.style[key] = value |
||||
} |
||||
}, |
||||
touchEnd(e) { |
||||
this.setCss(this.slideList, 'transition-duration', `300ms`) |
||||
let endTime = Date.now() |
||||
let gapTime = endTime - this.startTime |
||||
if (this.direction === 'row') { |
||||
if (this.currentSlideItemIndex === 0 && !this.isDrawRight) return |
||||
if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawRight) return |
||||
e.stopImmediatePropagation() |
||||
e.stopPropagation() |
||||
e.preventDefault() |
||||
if (Math.abs(this.moveXDistance) < 20) gapTime = 1000 |
||||
if (Math.abs(this.moveXDistance) > (this.wrapperWidth / 3)) gapTime = 100 |
||||
if (gapTime < 150) { |
||||
if (this.isDrawRight) { |
||||
this.currentSlideItemIndex += 1 |
||||
} else { |
||||
this.currentSlideItemIndex -= 1 |
||||
} |
||||
} |
||||
// this.setCss(this.slideList, 'transform', `translate3d(${-(this.currentSlideItemIndex) * this.wrapperWidth}px, 0px, 0px)`) |
||||
this.setCss(this.slideList, 'transform', `translate3d(${-this.getWidth(this.currentSlideItemIndex)}px, 0px, 0px)`) |
||||
} else { |
||||
if (this.currentSlideItemIndex === 0 && !this.isDrawDown) return |
||||
if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawDown) return |
||||
if (Math.abs(this.moveYDistance) < 20) gapTime = 1000 |
||||
if (Math.abs(this.moveYDistance) > (this.wrapperHeight / 3)) gapTime = 100 |
||||
if (gapTime < 150) { |
||||
if (this.isDrawDown) { |
||||
this.currentSlideItemIndex += 1 |
||||
} else { |
||||
this.currentSlideItemIndex -= 1 |
||||
} |
||||
} |
||||
// this.setCss(this.slideList, 'transform', `translate3d(0px, ${-(this.currentSlideItemIndex) * this.wrapperHeight}px, 0px)`) |
||||
this.setCss(this.slideList, 'transform', `translate3d(0px, ${-this.getHeight(this.currentSlideItemIndex)}px, 0px)`) |
||||
} |
||||
this.resetConfig() |
||||
}, |
||||
resetConfig() { |
||||
this.isCanDownWiping = false |
||||
this.isCanRightWiping = false |
||||
this.isNeedCheck = true |
||||
this.moveXDistance = 0 |
||||
this.moveYDistance = 0 |
||||
}, |
||||
checkDirection() { |
||||
if (!this.isNeedCheck) return |
||||
let angle = (Math.abs(this.moveXDistance) * 10) / (Math.abs(this.moveYDistance) * 10) |
||||
if (angle < 0.6) { |
||||
//上下划 |
||||
this.isCanDownWiping = true |
||||
this.isCanRightWiping = false |
||||
this.isNeedCheck = false |
||||
return |
||||
} |
||||
if (angle > 5) { |
||||
//左右划 |
||||
this.isCanDownWiping = false |
||||
this.isCanRightWiping = true |
||||
this.isNeedCheck = false |
||||
return |
||||
} |
||||
return; |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
#base-slide-wrapper { |
||||
width: 100%; |
||||
height: 100%; |
||||
overflow: hidden; |
||||
|
||||
#base-slide-list { |
||||
display: flex; |
||||
left: 0; |
||||
height: 100%; |
||||
width: 100%; |
||||
position: relative; |
||||
} |
||||
} |
||||
|
||||
</style> |
||||
@ -1,26 +0,0 @@
@@ -1,26 +0,0 @@
|
||||
<template> |
||||
<div class='index'> |
||||
|
||||
|
||||
</div> |
||||
</template> |
||||
<script> |
||||
export default { |
||||
name: "index", |
||||
components: {}, |
||||
data() { |
||||
return {} |
||||
}, |
||||
created() { |
||||
|
||||
}, |
||||
computed: {}, |
||||
methods: {} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang='scss'> |
||||
.index { |
||||
|
||||
} |
||||
</style> |
||||
@ -1,130 +1,129 @@
@@ -1,130 +1,129 @@
|
||||
<template> |
||||
<div id='MyCard'> |
||||
<BaseHeader > |
||||
<svg t="1564765646732" class="icon" viewBox="0 0 1024 1024" version="1.1" |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
p-id="15320" width="32" height="32"> |
||||
<path d="M182.528 793.185a46.336 46.336 0 0 1-6.502-0.46c-25.196-3.533-43.06-26.942-39.819-52.168 16.533-152.612 70.907-266.071 161.639-337.362 65.428-51.405 147.963-80.18 245.325-85.52l5.626-0.312 0.01-84.772a54.792 54.792 0 0 1 15.228-36.956 55.66 55.66 0 0 1 39.91-17.075c14.659 0 28.385 5.652 38.728 15.923L862.5 418.816c35.625 36.526 35.645 93.737 0.036 130.237L642.6 773.13a54.856 54.856 0 0 1-37.212 15.836l-1.567 0.026c-30.034-0.005-54.241-23.593-55.014-53.704l-0.01-90.926-9.365-0.025c-84.751 0-238.802 16.706-318.428 128.604a46.669 46.669 0 0 1-38.446 20.244h-0.031z m356.89-200.955c13.204 0 23.67 0.374 29.926 0.594l0.62 0.026c2.222 0.082 3.865 0.138 4.884 0.138a26.086 26.086 0 0 1 26.06 26.056v122.178l224.385-228.608c15.687-16.076 15.657-41.272-0.057-57.374L600.91 226.299v116.567a26.076 26.076 0 0 1-26.05 26.05c-148.947 0-336.052 58.68-381.59 338.248l-3.153 19.349 13.373-14.336C300.861 607.816 455.757 592.23 539.418 592.23z" |
||||
fill="#8a8a8a" p-id="15321"> |
||||
</path> |
||||
</svg> |
||||
</BaseHeader> |
||||
<div class="content"> |
||||
<div class="card"> |
||||
<div class="logo-ctn"> |
||||
<img src="../../assets/img/icon/head-image.jpeg" alt=""> |
||||
</div> |
||||
<span class="name">TTentau</span> |
||||
<span class="notice">使用抖音扫码，加我好友</span> |
||||
<img src="../../assets/img/icon/logo2.png" alt="" class="logo"> |
||||
</div> |
||||
</div> |
||||
<div class="notice-two">请使用最新版抖音扫描</div> |
||||
<div class="footer"> |
||||
<div class="btn"> |
||||
<img src="../../assets/img/icon/download.png" alt=""> |
||||
<span>保存到相册</span> |
||||
</div> |
||||
<div class="btn"> |
||||
<img src="../../assets/img/icon/scan.png" alt=""> |
||||
<span>保存到相册</span> |
||||
</div> |
||||
</div> |
||||
<div id='MyCard'> |
||||
<BaseHeader> |
||||
<svg t="1564765646732" class="icon" viewBox="0 0 1024 1024" version="1.1" |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
p-id="15320" width="32" height="32"> |
||||
<path |
||||
d="M182.528 793.185a46.336 46.336 0 0 1-6.502-0.46c-25.196-3.533-43.06-26.942-39.819-52.168 16.533-152.612 70.907-266.071 161.639-337.362 65.428-51.405 147.963-80.18 245.325-85.52l5.626-0.312 0.01-84.772a54.792 54.792 0 0 1 15.228-36.956 55.66 55.66 0 0 1 39.91-17.075c14.659 0 28.385 5.652 38.728 15.923L862.5 418.816c35.625 36.526 35.645 93.737 0.036 130.237L642.6 773.13a54.856 54.856 0 0 1-37.212 15.836l-1.567 0.026c-30.034-0.005-54.241-23.593-55.014-53.704l-0.01-90.926-9.365-0.025c-84.751 0-238.802 16.706-318.428 128.604a46.669 46.669 0 0 1-38.446 20.244h-0.031z m356.89-200.955c13.204 0 23.67 0.374 29.926 0.594l0.62 0.026c2.222 0.082 3.865 0.138 4.884 0.138a26.086 26.086 0 0 1 26.06 26.056v122.178l224.385-228.608c15.687-16.076 15.657-41.272-0.057-57.374L600.91 226.299v116.567a26.076 26.076 0 0 1-26.05 26.05c-148.947 0-336.052 58.68-381.59 338.248l-3.153 19.349 13.373-14.336C300.861 607.816 455.757 592.23 539.418 592.23z" |
||||
fill="#8a8a8a" p-id="15321"> |
||||
</path> |
||||
</svg> |
||||
</BaseHeader> |
||||
<div class="content"> |
||||
<div class="card"> |
||||
<div class="logo-ctn"> |
||||
<img src="../../assets/img/icon/head-image.jpeg" alt=""> |
||||
</div> |
||||
<span class="name">TTentau</span> |
||||
<span class="notice">使用抖音扫码，加我好友</span> |
||||
<img src="../../assets/img/icon/logo2.png" alt="" class="logo"> |
||||
</div> |
||||
</div> |
||||
<div class="notice-two">请使用最新版抖音扫描</div> |
||||
<div class="footer"> |
||||
<div class="btn"> |
||||
<img src="../../assets/img/icon/download.png" alt=""> |
||||
<span>保存到相册</span> |
||||
</div> |
||||
<div class="btn"> |
||||
<img src="../../assets/img/icon/scan.png" alt=""> |
||||
<span>保存到相册</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
export default { |
||||
name: "MyCard", |
||||
components: {}, |
||||
data() { |
||||
return { |
||||
transitionName: 'fade' |
||||
} |
||||
}, |
||||
created() { |
||||
|
||||
}, |
||||
computed: {}, |
||||
methods: { |
||||
|
||||
} |
||||
export default { |
||||
name: "MyCard", |
||||
components: {}, |
||||
data() { |
||||
return { |
||||
transitionName: 'fade' |
||||
} |
||||
}, |
||||
created() { |
||||
|
||||
}, |
||||
computed: {}, |
||||
methods: {} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang='scss'> |
||||
#MyCard { |
||||
width: 100vw; |
||||
height: 100%; |
||||
position: fixed; |
||||
#MyCard { |
||||
width: 100vw; |
||||
height: 100%; |
||||
position: fixed; |
||||
|
||||
.content { |
||||
padding: 20px; |
||||
.content { |
||||
padding: 20px; |
||||
|
||||
.card { |
||||
margin: 10px 20px; |
||||
background: white; |
||||
border-radius: 10px; |
||||
display: flex; |
||||
align-items: center; |
||||
flex-direction: column; |
||||
.card { |
||||
margin: 10px 20px; |
||||
background: white; |
||||
border-radius: 10px; |
||||
display: flex; |
||||
align-items: center; |
||||
flex-direction: column; |
||||
|
||||
.logo-ctn { |
||||
margin: 20px 0; |
||||
width: 50vw; |
||||
height: 50vw; |
||||
background-image: url("/@/assets/img/icon/logo-bg.png"); |
||||
background-position: center; |
||||
background-size: 100% 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
.logo-ctn { |
||||
margin: 20px 0; |
||||
width: 50vw; |
||||
height: 50vw; |
||||
background-image: url("/@/assets/img/icon/logo-bg.png"); |
||||
background-position: center; |
||||
background-size: 100% 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
|
||||
img { |
||||
width: 50%; |
||||
height: 50%; |
||||
border-radius: 50%; |
||||
} |
||||
} |
||||
img { |
||||
width: 50%; |
||||
height: 50%; |
||||
border-radius: 50%; |
||||
} |
||||
} |
||||
|
||||
.notice { |
||||
margin-top: 60px; |
||||
opacity: .4; |
||||
} |
||||
.notice { |
||||
margin-top: 60px; |
||||
opacity: .4; |
||||
} |
||||
|
||||
.logo { |
||||
margin: 20px 0; |
||||
width: 40vw; |
||||
} |
||||
} |
||||
.logo { |
||||
margin: 20px 0; |
||||
width: 40vw; |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
|
||||
.notice-two { |
||||
color: white; |
||||
opacity: .4; |
||||
text-align: center; |
||||
} |
||||
.notice-two { |
||||
color: white; |
||||
opacity: .4; |
||||
text-align: center; |
||||
} |
||||
|
||||
.footer { |
||||
position: absolute; |
||||
bottom: 30px; |
||||
display: flex; |
||||
justify-content: space-around; |
||||
width: 100%; |
||||
.footer { |
||||
position: absolute; |
||||
bottom: 30px; |
||||
display: flex; |
||||
justify-content: space-around; |
||||
width: 100%; |
||||
|
||||
.btn { |
||||
color: white; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
.btn { |
||||
color: white; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
|
||||
img { |
||||
width: 30px; |
||||
margin-bottom: 10px; |
||||
} |
||||
} |
||||
} |
||||
img { |
||||
width: 30px; |
||||
margin-bottom: 10px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
</style> |
||||
|
||||
@ -0,0 +1,162 @@
@@ -0,0 +1,162 @@
|
||||
<template> |
||||
<div id="home-index"> |
||||
<SlideList key1="父" style="width: 100vw;" v-model:can-move="canMove"> |
||||
<SlideItem > |
||||
<SlideList key1="子" direction="column" v-model:active-index="videoActiveIndex"> |
||||
<SlideItem :style="itemTop" v-for="(item,index) of videos"> |
||||
<Video |
||||
:disabled="videoActiveIndex !== addCount + index" |
||||
v-model:video="videos[index]" |
||||
@showComments="isCommenting = !isCommenting" |
||||
@showShare="isSharing = !isSharing" |
||||
@goUserInfo="baseActiveIndex = 1" |
||||
></Video> |
||||
</SlideItem> |
||||
</SlideList> |
||||
</SlideItem> |
||||
<SlideItem style="font-size: 40px;overflow:auto;"> |
||||
<div> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
</div> |
||||
</SlideItem> |
||||
</SlideList> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Comment from '../../components/Comment.vue' |
||||
import Other from '../../components/Other.vue' |
||||
import Share from '../../components/Share.vue' |
||||
import Footer from "../../components/Footer.vue" |
||||
import src1Bg from '../../assets/img/poster/src1-bg.png' |
||||
import mp41 from "../../assets/video/1.mp4"; |
||||
import mp42 from "../../assets/video/2.mp4"; |
||||
import mp43 from "../../assets/video/3.mp4"; |
||||
import mp44 from "../../assets/video/4.mp4"; |
||||
import mp45 from "../../assets/video/5.mp4"; |
||||
|
||||
export default { |
||||
name: "VideoDetail", |
||||
components: {Footer, Comment, Share, Other}, |
||||
data() { |
||||
return { |
||||
list: [1, 2, 3, 4, 5], |
||||
videos: [ |
||||
{ |
||||
videoUrl: mp41, |
||||
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ', |
||||
videoPoster: src1Bg, |
||||
isLoved: true, |
||||
loves: 1234, |
||||
comments: 666, |
||||
shared: 999, |
||||
duration: 99 |
||||
}, |
||||
{ |
||||
videoUrl: mp42, |
||||
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ', |
||||
videoPoster: src1Bg, |
||||
isLoved: false, |
||||
loves: 1234, |
||||
comments: 666, |
||||
shared: 999, |
||||
duration: 99 |
||||
}, |
||||
{ |
||||
videoUrl: mp43, |
||||
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ', |
||||
videoPoster: src1Bg, |
||||
isLoved: false, |
||||
loves: 1234, |
||||
comments: 666, |
||||
shared: 999, |
||||
duration: 99 |
||||
}, |
||||
{ |
||||
videoUrl: mp44, |
||||
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ', |
||||
videoPoster: src1Bg, |
||||
isLoved: false, |
||||
loves: 1234, |
||||
comments: 666, |
||||
shared: 999, |
||||
duration: 99 |
||||
}, |
||||
{ |
||||
videoUrl: mp45, |
||||
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ', |
||||
videoPoster: src1Bg, |
||||
isLoved: false, |
||||
loves: 1234, |
||||
comments: 666, |
||||
shared: 999, |
||||
duration: 99 |
||||
}, |
||||
], |
||||
addCount: 0, |
||||
total: 10, |
||||
baseActiveIndex: 0, |
||||
videoActiveIndex: 0, |
||||
canMove: false |
||||
} |
||||
}, |
||||
computed: { |
||||
itemTop() { |
||||
return {top: this.addCount * 812 + 'px'} |
||||
}, |
||||
}, |
||||
mounted() { |
||||
// this.height = document.body.clientHeight |
||||
// this.width = document.body.clientWidth |
||||
}, |
||||
created() { |
||||
|
||||
}, |
||||
|
||||
} |
||||
</script> |
||||
<style scoped lang="scss"> |
||||
#home-index { |
||||
height: 100%; |
||||
width: 100%; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue