视频详情页面
This commit is contained in:
zyronon
parent
655e30617e
commit
42a75adee2
@ -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,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="posters">
|
<div class="posters">
|
||||||
<div class="poster-item" v-for="i in list">
|
<div class="poster-item" v-for="i in list" @click="$nav('/VideoDetail')">
|
||||||
<img class="poster" src="../assets/img/poster/2.jpg" alt="">
|
<img class="poster" src="../assets/img/poster/2.jpg" alt="">
|
||||||
<div class="num">
|
<div class="num">
|
||||||
<img class="love" src="../assets/img/icon/love.svg" alt="">
|
<img class="love" src="../assets/img/icon/love.svg" alt="">
|
||||||
|
|||||||
@ -33,7 +33,8 @@
|
|||||||
</div>
|
</div>
|
||||||
<span>{{ video.loves }}</span>
|
<span>{{ video.loves }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="message mb15p" @click.stop="$emit('showComments')">
|
<!-- <div class="message mb15p" @click.stop="$emit('showComments')">-->
|
||||||
|
<div class="message mb15p" @click.stop="showComment">
|
||||||
<img src="../assets/img/icon/message.svg" alt="" class="message-image">
|
<img src="../assets/img/icon/message.svg" alt="" class="message-image">
|
||||||
<span>{{ video.comments }}</span>
|
<span>{{ video.comments }}</span>
|
||||||
</div>
|
</div>
|
||||||
@ -49,7 +50,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content ml10p mb10p" @click.stop="goUserInfo()">
|
<div class="content ml10p mb10p" @click.stop="goUserInfo()" v-if="!isMy">
|
||||||
<div class="name mb10p">@TTentau</div>
|
<div class="name mb10p">@TTentau</div>
|
||||||
<div class="description mb10p">
|
<div class="description mb10p">
|
||||||
吴三二的光年之外, 您的浏览器不支持 video 标签。 您的浏览器不支持 video 标签。
|
吴三二的光年之外, 您的浏览器不支持 video 标签。 您的浏览器不支持 video 标签。
|
||||||
@ -60,6 +61,27 @@
|
|||||||
<div behavior=scroll direction=left align=middle scrollamount=4> 吴三二 - 光年之外</div>
|
<div behavior=scroll direction=left align=middle scrollamount=4> 吴三二 - 光年之外</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="comment-status">
|
||||||
|
<div class="comment">
|
||||||
|
<div class="type-comment">
|
||||||
|
<img src="../assets/img/icon/head-image.jpeg" alt="" class="avatar">
|
||||||
|
<div class="right">
|
||||||
|
<p>
|
||||||
|
<span class="name">zzzzz</span>
|
||||||
|
<span class="time">2020-01-20</span>
|
||||||
|
</p>
|
||||||
|
<p class="text">北京</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<transition-group name="fade" tag="ul">
|
||||||
|
<div class="type-loved" v-for="i in test">
|
||||||
|
<img src="../assets/img/icon/head-image.jpeg" alt="" class="avatar">
|
||||||
|
<img src="../assets/img/icon/love.svg" alt="" class="loved">
|
||||||
|
</div>
|
||||||
|
</transition-group>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="process"
|
<div class="process"
|
||||||
:class="isMove ? '' : isPlaying && 'stop'"
|
:class="isMove ? '' : isPlaying && 'stop'"
|
||||||
@ -97,6 +119,12 @@ export default {
|
|||||||
default: () => {
|
default: () => {
|
||||||
return true
|
return true
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
isMy: {
|
||||||
|
type: Boolean,
|
||||||
|
default: () => {
|
||||||
|
return true
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@ -156,6 +184,7 @@ export default {
|
|||||||
isMove: false,
|
isMove: false,
|
||||||
mitt: inject('mitt'),
|
mitt: inject('mitt'),
|
||||||
currentVideoId: 'a' + Date.now(),
|
currentVideoId: 'a' + Date.now(),
|
||||||
|
test: [1]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
@ -169,6 +198,7 @@ export default {
|
|||||||
// this.currentTime = v.isMove ? v.e : this.currentTime
|
// this.currentTime = v.isMove ? v.e : this.currentTime
|
||||||
v.isMove ? this.move(v.e) : this.end(v.e)
|
v.isMove ? this.move(v.e) : this.end(v.e)
|
||||||
})
|
})
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
attention() {
|
attention() {
|
||||||
@ -220,6 +250,7 @@ export default {
|
|||||||
},
|
},
|
||||||
//展示评论
|
//展示评论
|
||||||
showComment() {
|
showComment() {
|
||||||
|
return this.test.push(Date.now())
|
||||||
this.isCommenting = !this.isCommenting
|
this.isCommenting = !this.isCommenting
|
||||||
},
|
},
|
||||||
showShare() {
|
showShare() {
|
||||||
@ -258,15 +289,18 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
@import "../assets/scss/color";
|
||||||
|
|
||||||
.fade-enter-active,
|
.fade-enter-active,
|
||||||
.fade-leave-active {
|
.fade-leave-active {
|
||||||
transition: transform 0.1s linear;
|
transition: transform 0.5s linear;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fade-enter-from,
|
.fade-enter-from,
|
||||||
.fade-leave-to {
|
.fade-leave-to {
|
||||||
transform: scale(0);
|
transform: scale(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-video {
|
.bg-video {
|
||||||
position: relative;
|
position: relative;
|
||||||
background: black;
|
background: black;
|
||||||
@ -492,6 +526,68 @@ export default {
|
|||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.comment-status {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.comment {
|
||||||
|
|
||||||
|
.type-comment {
|
||||||
|
display: flex;
|
||||||
|
background: rgb(130, 21, 44);
|
||||||
|
border-radius: 50px;
|
||||||
|
padding: 3px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
margin: 0 10px;
|
||||||
|
color: $second-text-color;
|
||||||
|
|
||||||
|
.name {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.type-loved {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loved {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 20px;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
background: red;
|
||||||
|
padding: 3px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.process {
|
.process {
|
||||||
|
|||||||
@ -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>
|
|
||||||
@ -53,6 +53,10 @@
|
|||||||
export default {
|
export default {
|
||||||
name: "BaseSlideList",
|
name: "BaseSlideList",
|
||||||
props: {
|
props: {
|
||||||
|
canMove: {
|
||||||
|
type: Boolean,
|
||||||
|
default: () => true
|
||||||
|
},
|
||||||
direction: {
|
direction: {
|
||||||
type: String,
|
type: String,
|
||||||
default: () => 'row'
|
default: () => 'row'
|
||||||
@ -217,6 +221,7 @@ export default {
|
|||||||
this.startTime = Date.now()
|
this.startTime = Date.now()
|
||||||
},
|
},
|
||||||
touchMove(e) {
|
touchMove(e) {
|
||||||
|
if (!this.canMove) return;
|
||||||
this.moveXDistance = e.touches[0].pageX - this.startLocationX
|
this.moveXDistance = e.touches[0].pageX - this.startLocationX
|
||||||
this.moveYDistance = e.touches[0].pageY - this.startLocationY
|
this.moveYDistance = e.touches[0].pageY - this.startLocationY
|
||||||
|
|
||||||
@ -400,6 +405,8 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
@import "../../assets/scss/color";
|
||||||
|
|
||||||
#base-slide-wrapper {
|
#base-slide-wrapper {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -490,7 +497,7 @@ export default {
|
|||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
background: #333;
|
background: $main-bg;
|
||||||
|
|
||||||
.tabs {
|
.tabs {
|
||||||
display: flex;
|
display: flex;
|
||||||
10
src/main.js
10
src/main.js
@ -5,8 +5,9 @@ import mitt from 'mitt'
|
|||||||
import './assets/scss/index.scss'
|
import './assets/scss/index.scss'
|
||||||
|
|
||||||
import BaseHeader from "./components/BaseHeader.vue"
|
import BaseHeader from "./components/BaseHeader.vue"
|
||||||
import BaseSlideList from "./components/BaseSlideList.vue";
|
import SlideList from "./components/slide/SlideList";
|
||||||
import BaseSlideItem from "./components/BaseSlideItem.vue";
|
import SlideItem from "./components/slide/SlideItem";
|
||||||
|
import Video from "./components/Video";
|
||||||
import router from "./router";
|
import router from "./router";
|
||||||
import store from "./store";
|
import store from "./store";
|
||||||
import globalMethods from './utils/global-methods'
|
import globalMethods from './utils/global-methods'
|
||||||
@ -20,8 +21,9 @@ const app = Vue.createApp(App)
|
|||||||
app.provide('mitt', mitt())
|
app.provide('mitt', mitt())
|
||||||
|
|
||||||
app.component('BaseHeader', BaseHeader)
|
app.component('BaseHeader', BaseHeader)
|
||||||
app.component('BaseSlideList', BaseSlideList)
|
app.component('SlideList', SlideList)
|
||||||
app.component('BaseSlideItem', BaseSlideItem)
|
app.component('SlideItem', SlideItem)
|
||||||
|
app.component('Video', Video)
|
||||||
app.mixin(mixin)
|
app.mixin(mixin)
|
||||||
app.use(router)
|
app.use(router)
|
||||||
app.use(store)
|
app.use(store)
|
||||||
|
|||||||
@ -172,13 +172,11 @@ import mp43 from '../../assets/video/3.mp4'
|
|||||||
import mp44 from '../../assets/video/4.mp4'
|
import mp44 from '../../assets/video/4.mp4'
|
||||||
import mp45 from '../../assets/video/5.mp4'
|
import mp45 from '../../assets/video/5.mp4'
|
||||||
import src1Bg from '../../assets/img/poster/src1-bg.png'
|
import src1Bg from '../../assets/img/poster/src1-bg.png'
|
||||||
import SlideItem from './SlideItem.vue'
|
|
||||||
import SlideList from './SlideList.vue'
|
|
||||||
import Video from "../../components/Video.vue";
|
import Video from "../../components/Video.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "HomeIndex",
|
name: "HomeIndex",
|
||||||
components: {Footer, Comment, Share, Other, SlideList, SlideItem, Video},
|
components: {Footer, Comment, Share, Other, Video},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
list: [1, 2, 3, 4, 5],
|
list: [1, 2, 3, 4, 5],
|
||||||
|
|||||||
@ -132,8 +132,6 @@ export default {
|
|||||||
padding-bottom: 60px;
|
padding-bottom: 60px;
|
||||||
color: white;
|
color: white;
|
||||||
|
|
||||||
$second-text-color: rgb(143, 143, 158);
|
|
||||||
$line-color: rgb(37, 45, 66);
|
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
.title {
|
.title {
|
||||||
|
|||||||
@ -198,14 +198,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import SlideList from "./SlideList.vue";
|
|
||||||
import SlideItem from "./SlideItem.vue";
|
|
||||||
import Posters from '../../components/Posters'
|
import Posters from '../../components/Posters'
|
||||||
import Footer from "../../components/Footer";
|
import Footer from "../../components/Footer";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "Me",
|
name: "Me",
|
||||||
components: {SlideList, SlideItem, Posters, Footer},
|
components: { Posters, Footer},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
serviceEl: {},
|
serviceEl: {},
|
||||||
@ -308,8 +306,7 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang='scss'>
|
<style scoped lang='scss'>
|
||||||
$left-bg-color: #333;
|
@import "../../assets/scss/color";
|
||||||
$right-bg-color: #2e3244;
|
|
||||||
|
|
||||||
.fade-enter-active,
|
.fade-enter-active,
|
||||||
.fade-leave-active {
|
.fade-leave-active {
|
||||||
@ -323,7 +320,7 @@ $right-bg-color: #2e3244;
|
|||||||
}
|
}
|
||||||
|
|
||||||
.Me {
|
.Me {
|
||||||
background: $right-bg-color;
|
background: $main-bg;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
@ -380,7 +377,7 @@ $right-bg-color: #2e3244;
|
|||||||
}
|
}
|
||||||
|
|
||||||
.detail {
|
.detail {
|
||||||
background: $right-bg-color;
|
background: $main-bg;
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
|
|
||||||
.head {
|
.head {
|
||||||
@ -401,14 +398,14 @@ $right-bg-color: #2e3244;
|
|||||||
|
|
||||||
.my-buttons {
|
.my-buttons {
|
||||||
div {
|
div {
|
||||||
font-size: 1.4rem;
|
font-size: 1.2rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
float: left;
|
float: left;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
background: rgb(99, 98, 98);
|
background: $second-btn-color;
|
||||||
margin-right: 5px;
|
margin-left: 5px;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
color: white;
|
color: white;
|
||||||
@ -431,9 +428,9 @@ $right-bg-color: #2e3244;
|
|||||||
transform: translateY(-20px);
|
transform: translateY(-20px);
|
||||||
|
|
||||||
.number {
|
.number {
|
||||||
color: darkgray;
|
color: $second-text-color;
|
||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
border-bottom: 1px solid gray;
|
border-bottom: 1px solid $line-color;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
@ -472,7 +469,7 @@ $right-bg-color: #2e3244;
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
color: white;
|
color: white;
|
||||||
background: $right-bg-color;
|
background: $main-bg;
|
||||||
|
|
||||||
.line {
|
.line {
|
||||||
height: 1px;
|
height: 1px;
|
||||||
@ -482,7 +479,7 @@ $right-bg-color: #2e3244;
|
|||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
background: $right-bg-color;
|
background: $main-bg;
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -510,7 +507,7 @@ $right-bg-color: #2e3244;
|
|||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: $right-bg-color;
|
background: $main-bg;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
@ -546,7 +543,7 @@ $right-bg-color: #2e3244;
|
|||||||
width: 70vw;
|
width: 70vw;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
background: $right-bg-color;
|
background: $main-bg;
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
@ -4,7 +4,8 @@
|
|||||||
<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
|
||||||
|
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">
|
fill="#8a8a8a" p-id="15321">
|
||||||
</path>
|
</path>
|
||||||
</svg>
|
</svg>
|
||||||
@ -45,9 +46,7 @@
|
|||||||
|
|
||||||
},
|
},
|
||||||
computed: {},
|
computed: {},
|
||||||
methods: {
|
methods: {}
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
162
src/pages/me/VideoDetail.vue
Normal file
162
src/pages/me/VideoDetail.vue
Normal file
@ -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>
|
||||||
@ -3,12 +3,13 @@ import * as VueRouter from "vue-router";
|
|||||||
import Index from "../pages/home/Index";
|
import Index from "../pages/home/Index";
|
||||||
import Attention from "../pages/home/Attention";
|
import Attention from "../pages/home/Attention";
|
||||||
import Message from "../pages/home/Message";
|
import Message from "../pages/home/Message";
|
||||||
import Me from "../pages/home/Me";
|
import Me from "../pages/me/Me";
|
||||||
import Me2 from "../pages/home/Me2";
|
import Me2 from "../pages/me/Me2";
|
||||||
import Music from "../components/common/Music";
|
import Music from "../components/common/Music";
|
||||||
import countryChoose from "../pages/login/countryChoose";
|
import countryChoose from "../pages/login/countryChoose";
|
||||||
import MyCard from "../pages/me/MyCard";
|
import MyCard from "../pages/me/MyCard";
|
||||||
import MyCollect from "../pages/me/MyCollect";
|
import MyCollect from "../pages/me/MyCollect";
|
||||||
|
import VideoDetail from "../pages/me/VideoDetail";
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
// {path: '', component: Music},
|
// {path: '', component: Music},
|
||||||
@ -22,6 +23,7 @@ const routes = [
|
|||||||
{path: '/countryChoose', component: countryChoose},
|
{path: '/countryChoose', component: countryChoose},
|
||||||
{path: '/MyCard', component: MyCard},
|
{path: '/MyCard', component: MyCard},
|
||||||
{path: '/MyCollect', component: MyCollect},
|
{path: '/MyCollect', component: MyCollect},
|
||||||
|
{path: '/VideoDetail', component: VideoDetail},
|
||||||
]
|
]
|
||||||
|
|
||||||
export default VueRouter.createRouter({
|
export default VueRouter.createRouter({
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user