zyronon
4 years ago
20 changed files with 403 additions and 1294 deletions
@ -1,61 +1,4 @@ |
|||||||
$main-bg: rgb(22, 26, 37); |
$main-bg: rgb(22, 26, 37); |
||||||
.c-red { |
$second-text-color: rgb(143, 143, 158); |
||||||
color: red; |
$second-btn-color: rgb(58,58,70); |
||||||
} |
$line-color: rgb(37, 45, 66); |
||||||
|
|
||||||
.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; |
|
||||||
} |
|
||||||
|
|||||||
@ -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 @@ |
|||||||
<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 @@ |
|||||||
<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 @@ |
|||||||
<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 @@ |
|||||||
<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 @@ |
|||||||
<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 @@ |
|||||||
<template> |
<template> |
||||||
<div id='MyCard'> |
<div id='MyCard'> |
||||||
<BaseHeader > |
<BaseHeader> |
||||||
<svg t="1564765646732" class="icon" viewBox="0 0 1024 1024" version="1.1" |
<svg t="1564765646732" class="icon" viewBox="0 0 1024 1024" version="1.1" |
||||||
xmlns="http://www.w3.org/2000/svg" |
xmlns="http://www.w3.org/2000/svg" |
||||||
p-id="15320" width="32" height="32"> |
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" |
<path |
||||||
fill="#8a8a8a" p-id="15321"> |
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" |
||||||
</path> |
fill="#8a8a8a" p-id="15321"> |
||||||
</svg> |
</path> |
||||||
</BaseHeader> |
</svg> |
||||||
<div class="content"> |
</BaseHeader> |
||||||
<div class="card"> |
<div class="content"> |
||||||
<div class="logo-ctn"> |
<div class="card"> |
||||||
<img src="../../assets/img/icon/head-image.jpeg" alt=""> |
<div class="logo-ctn"> |
||||||
</div> |
<img src="../../assets/img/icon/head-image.jpeg" alt=""> |
||||||
<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> |
</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> |
</template> |
||||||
<script> |
<script> |
||||||
export default { |
export default { |
||||||
name: "MyCard", |
name: "MyCard", |
||||||
components: {}, |
components: {}, |
||||||
data() { |
data() { |
||||||
return { |
return { |
||||||
transitionName: 'fade' |
transitionName: 'fade' |
||||||
} |
|
||||||
}, |
|
||||||
created() { |
|
||||||
|
|
||||||
}, |
|
||||||
computed: {}, |
|
||||||
methods: { |
|
||||||
|
|
||||||
} |
|
||||||
} |
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
|
||||||
|
}, |
||||||
|
computed: {}, |
||||||
|
methods: {} |
||||||
|
} |
||||||
</script> |
</script> |
||||||
|
|
||||||
<style scoped lang='scss'> |
<style scoped lang='scss'> |
||||||
#MyCard { |
#MyCard { |
||||||
width: 100vw; |
width: 100vw; |
||||||
height: 100%; |
height: 100%; |
||||||
position: fixed; |
position: fixed; |
||||||
|
|
||||||
.content { |
.content { |
||||||
padding: 20px; |
padding: 20px; |
||||||
|
|
||||||
.card { |
.card { |
||||||
margin: 10px 20px; |
margin: 10px 20px; |
||||||
background: white; |
background: white; |
||||||
border-radius: 10px; |
border-radius: 10px; |
||||||
display: flex; |
display: flex; |
||||||
align-items: center; |
align-items: center; |
||||||
flex-direction: column; |
flex-direction: column; |
||||||
|
|
||||||
.logo-ctn { |
.logo-ctn { |
||||||
margin: 20px 0; |
margin: 20px 0; |
||||||
width: 50vw; |
width: 50vw; |
||||||
height: 50vw; |
height: 50vw; |
||||||
background-image: url("/@/assets/img/icon/logo-bg.png"); |
background-image: url("/@/assets/img/icon/logo-bg.png"); |
||||||
background-position: center; |
background-position: center; |
||||||
background-size: 100% 100%; |
background-size: 100% 100%; |
||||||
display: flex; |
display: flex; |
||||||
align-items: center; |
align-items: center; |
||||||
justify-content: center; |
justify-content: center; |
||||||
|
|
||||||
img { |
img { |
||||||
width: 50%; |
width: 50%; |
||||||
height: 50%; |
height: 50%; |
||||||
border-radius: 50%; |
border-radius: 50%; |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
.notice { |
.notice { |
||||||
margin-top: 60px; |
margin-top: 60px; |
||||||
opacity: .4; |
opacity: .4; |
||||||
} |
} |
||||||
|
|
||||||
.logo { |
.logo { |
||||||
margin: 20px 0; |
margin: 20px 0; |
||||||
width: 40vw; |
width: 40vw; |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
} |
} |
||||||
|
|
||||||
.notice-two { |
.notice-two { |
||||||
color: white; |
color: white; |
||||||
opacity: .4; |
opacity: .4; |
||||||
text-align: center; |
text-align: center; |
||||||
} |
} |
||||||
|
|
||||||
.footer { |
.footer { |
||||||
position: absolute; |
position: absolute; |
||||||
bottom: 30px; |
bottom: 30px; |
||||||
display: flex; |
display: flex; |
||||||
justify-content: space-around; |
justify-content: space-around; |
||||||
width: 100%; |
width: 100%; |
||||||
|
|
||||||
.btn { |
.btn { |
||||||
color: white; |
color: white; |
||||||
display: flex; |
display: flex; |
||||||
flex-direction: column; |
flex-direction: column; |
||||||
align-items: center; |
align-items: center; |
||||||
|
|
||||||
img { |
img { |
||||||
width: 30px; |
width: 30px; |
||||||
margin-bottom: 10px; |
margin-bottom: 10px; |
||||||
} |
} |
||||||
} |
|
||||||
} |
|
||||||
} |
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
</style> |
</style> |
||||||
|
|||||||
@ -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