重写首页滑动逻辑,去除swiper,修复footer浮动bug
This commit is contained in:
zyronon
parent
7dceb6305e
commit
4690b177f5
14175
package-lock.json
generated
Normal file
14175
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
11
package.json
11
package.json
@ -9,17 +9,16 @@
|
||||
"push": "git add ./ && git commit -m 'dubug' && git push origin master"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^2.5.17",
|
||||
"vue-router": "^3.0.1"
|
||||
"vue": "^2.6.10",
|
||||
"vue-router": "^3.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "^3.0.3",
|
||||
"@vue/cli-plugin-eslint": "^3.0.3",
|
||||
"@vue/cli-service": "^3.0.3",
|
||||
"vue-template-compiler": "^2.5.17",
|
||||
"@vue/cli-service": "^3.3.0",
|
||||
"vue-template-compiler": "^2.5.21",
|
||||
"node-sass": "^4.9.3",
|
||||
"sass-loader": "^7.1.0",
|
||||
"vue-awesome-swiper": "^3.1.3"
|
||||
"sass-loader": "^7.1.0"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="cn">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="screen-orientation" content="portrait"/>
|
||||
|
||||
28
src/App.vue
28
src/App.vue
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div id="app" v-bind:style="{'min-height':height + 'px'}">
|
||||
<div id="app" >
|
||||
<!--<Home/>-->
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
@ -9,31 +9,7 @@
|
||||
// import Home from './components/home/Home.vue'
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
components: {
|
||||
// Home
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
height: 0,
|
||||
width: 0
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.height = window.screen.height;
|
||||
// this.width = window.screen.width;
|
||||
// let availWidth = window.screen.availWidth;
|
||||
// let clientWidth = document.body.clientWidth;
|
||||
// let offsetWidth = document.body.offsetWidth;
|
||||
// let scrollWidth = document.body.scrollWidth;
|
||||
// console.log(this.height);
|
||||
// console.log(this.width);
|
||||
// console.log(availWidth);
|
||||
// console.log(clientWidth);
|
||||
// console.log(offsetWidth);
|
||||
// console.log(scrollWidth);
|
||||
|
||||
}
|
||||
name: 'app'
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -63,7 +63,7 @@
|
||||
<span class="time">11小时前</span>
|
||||
</div>
|
||||
</div>
|
||||
<Footer v-bind:init-tab="2" ref="footer" :style="{'top':height-footerHeight+'px'}"/>
|
||||
<Footer v-bind:init-tab="2" style="position: fixed;" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -92,8 +92,8 @@
|
||||
this.width = document.body.clientWidth;
|
||||
},
|
||||
mounted() {
|
||||
let footer = this.$refs.footer.$el;
|
||||
this.footerHeight = footer.offsetHeight;
|
||||
// let footer = this.$refs.footer.$el;
|
||||
// this.footerHeight = footer.offsetHeight;
|
||||
|
||||
}
|
||||
}
|
||||
@ -106,6 +106,7 @@
|
||||
//抖音原色，感觉很暗
|
||||
background: #2e3244;
|
||||
color: #b8b9c1;
|
||||
position: relative;
|
||||
.items {
|
||||
>.item {
|
||||
border-bottom: 1px solid #494950;
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
console.log(index);
|
||||
switch (index) {
|
||||
case 1:
|
||||
this.$router.push('/home');
|
||||
this.$router.push('/');
|
||||
break;
|
||||
case 2:
|
||||
this.$router.push('/attention');
|
||||
@ -45,11 +45,13 @@
|
||||
<style scoped lang="scss">
|
||||
|
||||
.footer {
|
||||
border-top: 1px solid #7b7878;
|
||||
position: fixed;
|
||||
z-index: 2;
|
||||
top: 600px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border-top: 1px solid #7b7878;
|
||||
z-index: 2;
|
||||
/*top: 600px;*/
|
||||
background: #020202b3;
|
||||
color: white;
|
||||
.button {
|
||||
|
||||
@ -130,7 +130,9 @@
|
||||
<style lang="scss" scoped>
|
||||
.comment {
|
||||
position: fixed;
|
||||
top: 200px;
|
||||
/*top: 200px;*/
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
background: #fff;
|
||||
z-index: 5;
|
||||
border-radius: 10px 10px 0 0;
|
||||
|
||||
594
src/components/home/Home2.vue
Normal file
594
src/components/home/Home2.vue
Normal file
@ -0,0 +1,594 @@
|
||||
<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" :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">
|
||||
<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">
|
||||
</div>
|
||||
<div class="content ml10p">
|
||||
<div class="name mb10p">@TTentau</div>
|
||||
<div class="description mb10p">
|
||||
吴三二的光年之外, 您的浏览器不支持 video 标签。 您的浏览器不支持 video 标签。
|
||||
</div>
|
||||
<div class="music mb10p">
|
||||
<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="isCommenting" v-on:showComment='isCommenting = !isCommenting' ref="comment"/>
|
||||
<Share v-bind:is-sharing="isSharing" ref="share"/>
|
||||
<Footer v-bind:init-tab="1"/>
|
||||
</div>
|
||||
<div class="right-container swiper-item">
|
||||
<Other ref="other"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Comment from './Comment'
|
||||
import Other from '../user/Other'
|
||||
import Share from './Share'
|
||||
import Footer from "../common/Footer"
|
||||
|
||||
export default {
|
||||
name: "Home",
|
||||
components: {Footer, Comment, Share, Other},
|
||||
data() {
|
||||
return {
|
||||
data: [
|
||||
{
|
||||
videoUrl: require('../../assets/video/吴三二的光年之外.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: 30,
|
||||
|
||||
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: {
|
||||
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 + 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
|
||||
// setTimeout(() => {
|
||||
// let comment = this.$refs.comment.$el;
|
||||
// this.commentHeight = comment.offsetHeight;
|
||||
// console.log(this.commentHeight);
|
||||
// console.log(this.height);
|
||||
// }, 50);
|
||||
},
|
||||
showShare() {
|
||||
this.isSharing = !this.isSharing
|
||||
// setTimeout(() => {
|
||||
// let share = this.$refs.share.$el;
|
||||
// this.shareHeight = share.offsetHeight;
|
||||
// console.log(this.shareHeight);
|
||||
// console.log(this.height);
|
||||
// }, 50);
|
||||
},
|
||||
loved(e, index) {
|
||||
this.data[index].isLoved = !this.data[index].isLoved
|
||||
}
|
||||
},
|
||||
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>
|
||||
@ -126,7 +126,9 @@
|
||||
|
||||
.share {
|
||||
position: fixed;
|
||||
top: 200px;
|
||||
/*top: 200px;*/
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
z-index: 5;
|
||||
background: #eaeaea;
|
||||
border-radius: 10px 10px 0 0;
|
||||
|
||||
@ -87,7 +87,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Footer v-bind:init-tab="5" ref="footer" :style="{'top':height-footerHeight+'px'}"/>
|
||||
<Footer v-bind:init-tab="5" style="position: fixed;"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -113,10 +113,7 @@
|
||||
this.width = document.body.clientWidth;
|
||||
},
|
||||
mounted() {
|
||||
let footer = this.$refs.footer.$el;
|
||||
this.footerHeight = footer.offsetHeight;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import Home2 from './components/home/Home2.vue'
|
||||
import Home from './components/home/Home.vue'
|
||||
import Attention from './components/attention/Attention.vue'
|
||||
import Message from './components/message/Message.vue'
|
||||
import Me from './components/user/Me.vue'
|
||||
// import VueAwesomeSwiper from 'vue-awesome-swiper'
|
||||
// import 'swiper/dist/css/swiper.css'
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
@ -16,7 +15,8 @@ Vue.use(VueRouter);
|
||||
const router = new VueRouter({
|
||||
mode: 'history',
|
||||
routes: [
|
||||
{path: '/', component: Home},
|
||||
{path: '', component: Home2},
|
||||
{path: '/', component: Home2},
|
||||
{path: '/home', component: Home},
|
||||
{path: '/attention', component: Attention},
|
||||
{path: '/message', component: Message},
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
// vue.config.js
|
||||
module.exports = {
|
||||
// 选项...
|
||||
baseUrl: process.env.NODE_ENV === 'production'
|
||||
? '/'
|
||||
: '/'
|
||||
publicPath: process.env.NODE_ENV === 'production' ? '' : '',
|
||||
assetsDir: './',//资源路径
|
||||
outputDir: process.env.outputDir,//打包输出路径
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user