pimhwang
/
douyin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

优化评论和分享

pull/19/head
zyronon 4 years ago
parent
826ac2322b
commit
c308189a6e
16 changed files with 438 additions and 380 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/video/src1.mp4
  2. BIN
      src/assets/video/吴三二的光年之外.mp4
  3. 47
      src/components/AutoInput.vue
  4. 335
      src/components/Comment.vue
  5. 4
      src/components/Footer.vue
  6. 2
      src/components/Other.vue
  7. 256
      src/components/Share.vue
  8. 97
      src/components/Video.vue
  9. 2
      src/components/common/Music.vue
  10. 2
      src/components/home/Home2.vue
  11. 2
      src/components/home/home3.vue
  12. 2
      src/pages/home/Attention.vue
  13. 2
      src/pages/home/Index 布局完成.vue
  14. 60
      src/pages/home/Index.vue
  15. 2
      src/pages/home/Index2.vue
  16. 5
      vue.config.js

BIN
src/assets/video/src1.mp4
View File

Binary file not shown.

BIN
src/assets/video/吴三二的光年之外.mp4
View File

Binary file not shown.

47
src/components/AutoInput.vue
Unescape View File

@ -0,0 +1,47 @@
<template>
<div class="edit" contenteditable @input="changeText">{{ innerText }}</div>
</template>
<script>
export default {
name: "AutoInput",
props: {
modelValue: String,
},
data: function () {
return {
innerText: this.modelValue,
}
},
methods: {
changeText(e) {
this.$emit('update:modelValue', this.$el.innerText);
}
}
}
</script>
<style scoped>
.edit {
width: 100%;
max-height: 70px;
background: #eee;
overflow-y: scroll;
padding: 8px 10px;
border-radius: 30px;
outline: none;
}
.edit::-webkit-scrollbar {
width: 0 !important
}
.edit:empty::before {
content: "留下你的精彩评论吧";
color: #999999;
}
.edit:focus::before {
content: none;
}
</style>

335
src/components/Comment.vue
Unescape View File

@ -1,211 +1,168 @@
<template> <template>
<transition name="comment"> <transition name="comment">
<div class="comment f14" v-if="isCommenting"> <div class="comment f14" v-if="isCommenting">
<div class="title mt10p"> <div class="title mt10p">
<p>2.7w条评论</p> <p>2.7w条评论</p>
<img src="../assets/img/icon/close.svg" @click.stop="$emit('update:is-commenting',false)"> <img src="../assets/img/icon/close.svg" @click.stop="$emit('update:is-commenting',false)">
</div> </div>
<div class="items"> <div class="items">
<div class="item pl5p pr15p mb5p oh"> <div class="item pl5p pr15p mb5p oh"
<div class="content pull-left "> v-for="item in 2"
<img src="../assets/img/icon/head-image.jpeg" alt="" class="head-image pull-left"> >
<div class="pull-right comment-container"> <div class="content pull-left ">
<div class="name">@ttentau</div> <img src="../assets/img/icon/head-image.jpeg" alt="" class="head-image pull-left">
<div class="detail">其实我也不知道评论点什么啊啊啊看吧看吧看吧</div> <div class="pull-right comment-container">
<div class="time mt10p">10-02</div> <div class="name">@ttentau</div>
</div> <div class="detail">其实我也不知道评论点什么啊啊啊看吧看吧看吧</div>
</div> <div class="time mt10p">10-02</div>
<div class="love pull-right">
<img src="../assets/img/icon/love-gray.svg" alt="" class="love-image">
<span class="f14 block">3453</span>
</div>
</div>
<div class="item pl5p pr15p mb5p oh">
<div class="content pull-left ">
<img src="../assets/img/icon/head-image.jpeg" alt="" class="head-image pull-left">
<div class="pull-right comment-container">
<div class="name">@ttentau</div>
<div class="detail">其实我也不知道评论点什么啊啊啊看吧看吧看吧</div>
<div class="time mt10p">10-02</div>
</div>
</div>
<div class="love pull-right">
<img src="../assets/img/icon/love-gray.svg" alt="" class="love-image">
<span class="f14 block">3453</span>
</div>
</div>
<div class="item pl5p pr15p mb5p oh">
<div class="content pull-left ">
<img src="../assets/img/icon/head-image.jpeg" alt="" class="head-image pull-left">
<div class="pull-right comment-container">
<div class="name">@ttentau</div>
<div class="detail">其实我也不知道评论点什么啊啊啊看吧看吧看吧</div>
<div class="time mt10p">10-02</div>
</div>
</div>
<div class="love pull-right">
<img src="../assets/img/icon/love-gray.svg" alt="" class="love-image">
<span class="f14 block">3453</span>
</div>
</div>
<div class="item pl5p pr15p mb5p oh">
<div class="content pull-left ">
<img src="../assets/img/icon/head-image.jpeg" alt="" class="head-image pull-left">
<div class="pull-right comment-container">
<div class="name">@ttentau</div>
<div class="detail">其实我也不知道评论点什么啊啊啊看吧看吧看吧</div>
<div class="time mt10p">10-02</div>
</div>
</div>
<div class="love pull-right">
<img src="../assets/img/icon/love-gray.svg" alt="" class="love-image">
<span class="f14 block">3453</span>
</div>
</div>
<div class="item pl5p pr15p mb5p oh">
<div class="content pull-left ">
<img src="../assets/img/icon/head-image.jpeg" alt="" class="head-image pull-left">
<div class="pull-right comment-container">
<div class="name">@ttentau</div>
<div class="detail">其实我也不知道评论点什么啊啊啊看吧看吧看吧</div>
<div class="time mt10p">10-02</div>
</div>
</div>
<div class="love pull-right">
<img src="../assets/img/icon/love-gray.svg" alt="" class="love-image">
<span class="f14 block">3453</span>
</div>
</div>
<div class="item pl5p pr15p mb5p oh">
<div class="content pull-left ">
<img src="../assets/img/icon/head-image.jpeg" alt="" class="head-image pull-left">
<div class="pull-right comment-container">
<div class="name">@ttentau</div>
<div class="detail">其实我也不知道评论点什么啊啊啊看吧看吧看吧</div>
<div class="time mt10p">10-02</div>
</div>
</div>
<div class="love pull-right">
<img src="../assets/img/icon/love-gray.svg" alt="" class="love-image">
<span class="f14 block">3453</span>
</div>
</div>
<div class="item pl5p pr15p mb5p oh">
<div class="content pull-left ">
<img src="../assets/img/icon/head-image.jpeg" alt="" class="head-image pull-left">
<div class="pull-right comment-container">
<div class="name">@ttentau</div>
<div class="detail">其实我也不知道评论点什么啊啊啊看吧看吧看吧</div>
<div class="time mt10p">10-02</div>
</div>
</div>
<div class="love pull-right">
<img src="../assets/img/icon/love-gray.svg" alt="" class="love-image">
<span class="f14 block">3453</span>
</div>
</div>
</div>
<div class="input-comment">
<input type="text" placeholder="留下你的精彩评论哦">
<span>@</span>
</div> </div>
</div>
<div class="love pull-right">
<img src="../assets/img/icon/love-gray.svg" alt="" class="love-image">
<span class="f14 block">3453</span>
</div>
</div> </div>
</transition> <p class="no-more">暂时没有更多了</p>
</div>
<div class="input-comment">
<AutoInput v-model="commit"></AutoInput>
<div class="options">
<img src="../assets/img/icon/add.svg" alt="" @click="call">
<img src="../assets/img/icon/add.svg" alt="">
<img src="../assets/img/icon/add.svg" alt="">
</div>
</div>
</div>
</transition>
</template> </template>
<script> <script>
export default { import AutoInput from "./AutoInput";
name: "Comment",
props: ['isCommenting'], export default {
methods: { name: "Comment",
// showComment() { components: {AutoInput},
// this.isCommenting = !this.isCommenting; props: ['isCommenting'],
// console.log(666) data() {
// } return {
} commit: ''
}
},
methods: {
// showComment() {
// this.isCommenting = !this.isCommenting;
// console.log(666)
// }
call(){
console.log(this.commit)
} }
}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.comment {
position: fixed; .comment {
/*top: 200px;*/ position: fixed;
width: 100%; /*top: 200px;*/
bottom: 0; width: 100%;
background: #fff; bottom: 0;
z-index: 5; background: #fff;
border-radius: 10px 10px 0 0; z-index: 5;
.title { border-radius: 10px 10px 0 0;
position: relative;
p { .title {
text-align: center; position: relative;
}
img { p {
width: 15px; text-align: center;
height: 15px; }
position: absolute;
right: 20px; img {
top: 0; width: 15px;
} height: 15px;
} position: absolute;
.input-comment { right: 20px;
height: 30px; top: 0;
border-top: 1px solid #e2e1e1; }
input { }
height: 100%;
width: 90%; .items {
} overflow-y: scroll;
span { height: 60vh;
color: #999;
font-size: 22px; .item {
} .head-image {
width: 40px;
border-radius: 50%;
float: left;
}
.content {
float: left;
width: 85%;
.head-image {
width: 15%;
} }
.items {
overflow-y: scroll; .comment-container {
max-height: 300px; width: 80%;
.item {
.head-image { .time {
width: 40px; color: gray;
border-radius: 50%; }
float: left;
}
.content {
float: left;
width: 85%;
.head-image {
width: 15%;
}
.comment-container {
width: 80%;
.time {
color: gray;
}
}
}
.love {
text-align: center;
.love-image {
width: 30px;
border-radius: 50%;
}
}
}
} }
} }
.love {
text-align: center;
.comment-enter-active { .love-image {
transition: all .3s ease; width: 30px;
border-radius: 50%;
}
}
} }
.comment-leave-active { .no-more{
transition: all .3s ease; margin: 10px;
text-align: center;
color: #ccc;
} }
}
.input-comment {
padding: 10px;
border-top: 1px solid #e2e1e1;
display: flex;
align-items: center;
.options {
display: flex;
img {
width: 20px;
height: 20px;
margin: 0 5px;
.comment-enter, .comment-leave-to { &:nth-last-child(1) {
transform: translateY(300px); margin-right: 0;
}
}
} }
}
}
.comment-enter-active,
.comment-leave-active {
transition: all .15s ease;
}
.comment-enter-from, .comment-leave-to {
transform: translateY(60vh);
}
</style> </style>

4
src/components/Footer.vue
Unescape View File

@ -35,11 +35,11 @@ export default {
}, },
methods: { methods: {
move(e) { move(e) {
this.mitt.emit(this.$store.state.currentVideoId, {isMove: true, e: e.touches[0].pageX}) this.mitt.emit(this.$store.state.currentVideoId, {isMove: true, e})
this.$stopPropagation(e) this.$stopPropagation(e)
}, },
end(e) { end(e) {
this.mitt.emit(this.$store.state.currentVideoId, {isMove: false,}) this.mitt.emit(this.$store.state.currentVideoId, {isMove: false, e})
}, },
tab(index) { tab(index) {
this.currentTab = index this.currentTab = index

2
src/components/Other.vue
Unescape View File

@ -79,7 +79,7 @@
</div> </div>
<div class="content oh"> <div class="content oh">
<div class="video-container" v-for="item of videos" v-bind:style="{'height':width/3*1.2+'px'}"> <div class="video-container" v-for="item of videos" v-bind:style="{'height':width/3*1.2+'px'}">
<video src="../assets/video/吴三二的光年之外.mp4" poster="../assets/img/poster/src1-bg.png"></video> <video src="../assets/video/1.mp4" poster="../assets/img/poster/src1-bg.png"></video>
<div class="love"> <div class="love">
<img src="../assets/img/icon/love.svg" alt=""> <img src="../assets/img/icon/love.svg" alt="">
<span class="ml5p">72.3w</span> <span class="ml5p">72.3w</span>

256
src/components/Share.vue
Unescape View File

@ -1,115 +1,86 @@
<template> <template>
<transition name="comment"> <transition name="share">
<div class="share" v-if="isSharing"> <div class="share" v-if="isSharing">
<div class="friends oh p10p "> <div class="title">
<div class="title tac pb10p">私信给</div> <span>私信给朋友</span>
<div class="w200"> <img src="../assets/img/icon/close.svg" @click="closeShare">
<div class="friend pr10p">
<img src="../assets/img/icon/head-image.jpeg" alt="">
<span>ttentau</span>
</div>
<div class="friend pr10p">
<img src="../assets/img/icon/head-image.jpeg" alt="">
<span>ttentau</span>
</div>
<div class="friend pr10p">
<img src="../assets/img/icon/head-image.jpeg" alt="">
<span>ttentau</span>
</div>
<div class="friend pr10p">
<img src="../assets/img/icon/head-image.jpeg" alt="">
<span>ttentau</span>
</div>
<div class="friend pr10p">
<img src="../assets/img/icon/head-image.jpeg" alt="">
<span>ttentau</span>
</div>
<div class="friend pr10p">
<img src="../assets/img/icon/head-image.jpeg" alt="">
<span>ttentau</span>
</div>
<div class="friend pr10p">
<img src="../assets/img/icon/head-image.jpeg" alt="">
<span>ttentau</span>
</div>
<div class="friend pr10p">
<img src="../assets/img/icon/next.svg" alt="">
<span>更多</span>
</div>
</div>
</div> </div>
<div class="shares oh pl20p pr20p pt10p pb10p"> <div class="friends pl10p pb20p">
<div class="title tac pb10p">分享到</div> <div class="friend pr10p pl10p" v-for="item in 10">
<div class="w200"> <img src="../assets/img/icon/head-image.jpeg" alt="">
<div class="share-to pr10p"> <span>ttenu</span>
<img src="../assets/img/icon/friend_circle.svg" alt=""> </div>
<span>朋友圈</span> <div class="friend pr10p">
</div> <img src="../assets/img/icon/next.svg" alt="">
<div class="share-to pr10p"> <span>更多</span>
<img src="../assets/img/icon/wechat.svg" alt="">
<span>微信</span>
</div>
<div class="share-to pr10p">
<img src="../assets/img/icon/sq-share-qqzone-01.svg">
<span>QQ空间</span>
</div>
<div class="share-to pr10p">
<img src="../assets/img/icon/QQ.svg">
<span>QQ</span>
</div>
<div class="share-to pr10p">
<img src="../assets/img/icon/sina.svg">
<span>微博</span>
</div>
<div class="share-to pr10p">
<img src="../assets/img/icon/more.svg">
<span>更多</span>
</div>
</div> </div>
</div> </div>
<div class="toolbar oh pl20p pr20p pt10p pb10p f11"> <div class="line"></div>
<div class="w200"> <div class="shares pl10p pb20p">
<div class="tool pr10p "> <div class="share-to pr10p pl10p"
<img src="../assets/img/icon/举报.svg" alt=""> v-for="item in 5"
<span>举报</span> >
</div> <img src="../assets/img/icon/friend_circle.svg" alt="">
<div class="tool pr10p "> <span>朋友圈</span>
<img src="../assets/img/icon/download.svg" alt=""> </div>
<span>保存本地</span> <div class="share-to pr10p pl10p">
</div> <img src="../assets/img/icon/wechat.svg" alt="">
<div class="tool pr10p "> <span>微信</span>
<img src="../assets/img/icon/collect.svg" alt=""> </div>
<span>收藏</span> <div class="share-to pr10p pl10p">
</div> <img src="../assets/img/icon/sq-share-qqzone-01.svg">
<div class="tool pr10p "> <span>QQ空间</span>
<img src="../assets/img/icon/qiangjing.svg" alt=""> </div>
<span>抢镜</span> <div class="share-to pr10p pl10p">
</div> <img src="../assets/img/icon/QQ.svg">
<div class="tool pr10p"> <span>QQ</span>
<img src="../assets/img/icon/qr_code.svg" alt=""> </div>
<span>二维码</span> <div class="share-to pr10p pl10p">
</div> <img src="../assets/img/icon/sina.svg">
<div class="tool pr10p"> <span>微博</span>
<img src="../assets/img/icon/dongtaibizhi.svg" alt=""> </div>
<span>动态壁纸</span> <div class="share-to pr10p pl10p">
</div> <img src="../assets/img/icon/more.svg">
<div class="tool pr10p"> <span>更多</span>
<img src="../assets/img/icon/hepai.svg" alt="">
<span>合拍</span>
</div>
<div class="tool pr10p">
<img src="../assets/img/icon/dislike.svg" alt="">
<span>不感兴趣</span>
</div>
<div class="tool pr10p">
<img src="../assets/img/icon/href.svg" alt="">
<span>复制链接</span>
</div>
</div> </div>
</div> </div>
<div class="dismiss" @click="closeShare()"> <div class="toolbar pl10p pb20p">
取消 <div class="tool pr10p pl10p ">
<img src="../assets/img/icon/举报.svg" alt="">
<span>举报</span>
</div>
<div class="tool pr10p pl10p ">
<img src="../assets/img/icon/download.svg" alt="">
<span>保存本地</span>
</div>
<div class="tool pr10p pl10p ">
<img src="../assets/img/icon/collect.svg" alt="">
<span>收藏</span>
</div>
<div class="tool pr10p pl10p ">
<img src="../assets/img/icon/qiangjing.svg" alt="">
<span>抢镜</span>
</div>
<div class="tool pr10p pl10p">
<img src="../assets/img/icon/qr_code.svg" alt="">
<span>二维码</span>
</div>
<div class="tool pr10p pl10p">
<img src="../assets/img/icon/dongtaibizhi.svg" alt="">
<span>动态壁纸</span>
</div>
<div class="tool pr10p pl10p">
<img src="../assets/img/icon/hepai.svg" alt="">
<span>合拍</span>
</div>
<div class="tool pr10p pl10p">
<img src="../assets/img/icon/dislike.svg" alt="">
<span>不感兴趣</span>
</div>
<div class="tool pr10p pl10p">
<img src="../assets/img/icon/href.svg" alt="">
<span>复制链接</span>
</div>
</div> </div>
</div> </div>
</transition> </transition>
@ -130,51 +101,70 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.w200 {
width: 200%;
}
.share { .share {
position: fixed; position: fixed;
/*top: 200px;*/ /*top: 200px;*/
width: 100%; width: 100%;
bottom: 0; bottom: 0;
z-index: 5; z-index: 5;
background: #eaeaea; background: black;
border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0;
color: white;
box-sizing: border-box;
.title {
padding: 20px;
position: relative;
display: flex;
justify-content: space-between;
img {
width: 15px;
height: 15px;
}
}
.friends { .friends {
overflow-x: scroll; overflow-x: scroll;
display: flex;
.friend { .friend {
float: left; width: 45px;
img { img {
width: 40px; width: 45px;
height: 40px; height: 45px;
border-radius: 50%; border-radius: 50%;
} }
span { span {
display: block; display: block;
text-align: center; text-align: center;
word-break: break-all;
} }
} }
} }
.line{
height: 1px;
background: #1c1c1c;
margin-left: 20px;
width: calc(100% - 40px);
margin-bottom: 10px;
}
.shares { .shares {
background: white;
overflow-x: scroll; overflow-x: scroll;
display: flex;
.share-to { .share-to {
float: left;
width: 50px; width: 50px;
img { img {
width: 27px; width: 30px;
height: 27px; height: 30px;
padding: 6px; padding: 10px;
border-radius: 50%; border-radius: 50%;
background: #1ace04; background: #1ace04;
} }
@ -187,16 +177,16 @@ export default {
} }
.toolbar { .toolbar {
border-top: 1px solid #eaeaea;
background: white;
overflow-x: scroll; overflow-x: scroll;
display: flex;
.tool { .tool {
float: left; float: left;
img { img {
width: 22px; width: 30px;
height: 22px; height: 30px;
padding: 10px; padding: 10px;
border-radius: 50%; border-radius: 50%;
background: #eaeaea; background: #eaeaea;
@ -208,25 +198,15 @@ export default {
} }
} }
} }
.dismiss {
background: white;
border-top: 1px solid #eaeaea;
text-align: center;
height: 30px;
line-height: 30px;
}
} }
.comment-enter-active { .share-enter-active,
transition: all .3s ease; .share-leave-active {
transition: all .15s ease;
} }
.comment-leave-active { .share-enter-from, .share-leave-to {
transition: all .3s ease; transform: translateY(60vh);
} }
.comment-enter, .comment-leave-to {
transform: translateY(300px);
}
</style> </style>

97
src/components/Video.vue
Unescape View File

@ -47,12 +47,14 @@
</div> </div>
</div> </div>
<div class="process" <div class="process"
:class="isMove ? '' : isPlaying && 'stop'"
v-if="duration > 60"
@touchmove="move" @touchmove="move"
@touchend="end" @touchend="end"
> >
<div class="time" v-if="isMove"> <div class="time" v-if="isMove">
<span class="playDuration">{{ $duration(playDuration) }}</span> <span class="currentTime">{{ $duration(currentTime) }}</span>
<span class="duration"> / {{ $duration(video.duration) }}</span> <span class="duration"> / {{ $duration(duration) }}</span>
</div> </div>
<div class="line" :style="durationStyle" ref="line"></div> <div class="line" :style="durationStyle" ref="line"></div>
<div class="point" :style="durationStyle" ref="point"></div> <div class="point" :style="durationStyle" ref="point"></div>
@ -84,21 +86,35 @@ export default {
}, },
computed: { computed: {
durationStyle() { durationStyle() {
return {left: this.playDuration + 'px'} return {left: this.pageX + 'px'}
} }
}, },
watch: { watch: {
disabled: { disabled: {
immediate: true, immediate: true,
handler(v) { handler(v) {
console.log('disabled', this.currentVideoId, v) // console.log('disabled', this.currentVideoId, v)
this.isPlaying = !v this.isPlaying = !v
if (!v) { if (!v) {
this.$store.commit('setCurrentVideoId', this.currentVideoId) this.$store.commit('setCurrentVideoId', this.currentVideoId)
console.log(this.$refs) setTimeout(() => {
if (this.$refs.video) { let video = this.$refs.video
this.$refs.video.play() video.currentTime = 0
} let fun = e => {
this.currentTime = Math.ceil(e.target.currentTime)
this.pageX = this.currentTime * this.step
}
video.addEventListener('timeupdate', fun)
video.addEventListener('loadedmetadata', e => {
this.duration = video.duration
if (this.duration > 60) {
this.step = this.width / Math.floor(this.duration)
} else {
video.removeEventListener('timeupdate', fun)
}
})
video.play()
})
} else { } else {
if (this.$refs.video) { if (this.$refs.video) {
this.$refs.video.pause() this.$refs.video.pause()
@ -109,7 +125,10 @@ export default {
}, },
data() { data() {
return { return {
playDuration: 30, duration: 0,
step: 0,
currentTime: 0,
pageX: 0,
index: 0, index: 0,
height: 0, height: 0,
width: 0, width: 0,
@ -120,7 +139,7 @@ export default {
point: null, point: null,
isMove: false, isMove: false,
mitt: inject('mitt'), mitt: inject('mitt'),
currentVideoId: 'a' + Date.now() currentVideoId: 'a' + Date.now(),
} }
}, },
mounted() { mounted() {
@ -129,10 +148,15 @@ export default {
this.line = this.$refs.line this.line = this.$refs.line
this.point = this.$refs.point this.point = this.$refs.point
this.mitt.on(this.currentVideoId, v => { this.mitt.on(this.currentVideoId, v => {
if (this.duration < 60) return
this.isMove = v.isMove this.isMove = v.isMove
this.playDuration = v.isMove ? v.e : this.playDuration // this.currentTime = v.isMove ? v.e : this.currentTime
v.isMove ? this.move(v.e) : this.end(v.e)
}) })
}, },
unmounted() {
console.log('unmounted')
},
methods: { methods: {
//划动到下一个视频 //划动到下一个视频
swipingVideo() { swipingVideo() {
@ -192,11 +216,20 @@ export default {
}, },
move(e) { move(e) {
this.isMove = true this.isMove = true
this.playDuration = e.touches[0].pageX let video = this.$refs.video
video.pause()
this.pageX = e.touches[0].pageX
// console.log(this.step)
this.currentTime = Math.ceil(Math.ceil(e.touches[0].pageX) / this.step)
this.$stopPropagation(e) this.$stopPropagation(e)
}, },
end(e) { end(e) {
this.isMove = false setTimeout(()=>{
this.isMove = false
},1000)
let video = this.$refs.video
video.currentTime = this.currentTime
video.play()
this.$stopPropagation(e) this.$stopPropagation(e)
}, },
@ -362,8 +395,8 @@ export default {
position: absolute; position: absolute;
top: -3px; top: -3px;
height: 3px; height: 3px;
width: 100vw; width: 200vw;
transform: translate3d(-100%, 0, 0); transform: translate3d(-200vw, 0, 0);
background: white; background: white;
} }
@ -378,6 +411,40 @@ export default {
background: white; background: white;
} }
} }
& .stop {
&:before {
z-index: 9;
content: ' ';
height: 1.5px;
width: 100vw;
background: #333333;
position: absolute;
top: -3px;
}
.line {
z-index: 999;
content: '';
position: absolute;
top: -3px;
height: 1px;
width: 200vw;
transform: translate3d(-200vw, 0, 0);
background: gray;
}
.point {
z-index: 10;
position: absolute;
left: 10vw;
top: -4px;
height: 4px;
width: 4px;
border-radius: 50%;
background: gray;
}
}
} }

2
src/components/common/Music.vue
Unescape View File

@ -24,7 +24,7 @@
<div class="tab" @click="toggleTab($event,1)">最新</div> <div class="tab" @click="toggleTab($event,1)">最新</div>
</div> </div>
<div class="video-container" v-for="(item,index) of videos" v-bind:style="{'height':width/3*1.2+'px'}"> <div class="video-container" v-for="(item,index) of videos" v-bind:style="{'height':width/3*1.2+'px'}">
<video src="../../assets/video/吴三二的光年之外.mp4" poster="../../assets/img/poster/src1-bg.png"></video> <video src="../../assets/video/1.mp4" poster="../../assets/img/poster/src1-bg.png"></video>
<div class="no" v-if="index===1||index===2"> <div class="no" v-if="index===1||index===2">
NO. <span>{{index+1}}</span> NO. <span>{{index+1}}</span>
</div> </div>

2
src/components/home/Home2.vue
Unescape View File

@ -85,7 +85,7 @@
return { return {
data: [ data: [
{ {
videoUrl: require('../../assets/video/吴三二的光年之外.mp4'), videoUrl: require('../../assets/video/1.mp4'),
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ', // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
videoPoster: require('../../assets/img/poster/src1-bg.png'), videoPoster: require('../../assets/img/poster/src1-bg.png'),
isLoved: false, isLoved: false,

2
src/components/home/home3.vue
Unescape View File

@ -75,7 +75,7 @@ import Comment from '../../components/Comment.vue'
import Other from '../../components/Other.vue' import Other from '../../components/Other.vue'
import Share from '../../components/Share.vue' import Share from '../../components/Share.vue'
import Footer from "../../components/Footer.vue" import Footer from "../../components/Footer.vue"
import mp1 from '../../assets/video/吴三二的光年之外.mp4' import mp1 from '../../assets/video/1.mp4'
import src1Bg from '../../assets/img/poster/src1-bg.png' import src1Bg from '../../assets/img/poster/src1-bg.png'
export default { export default {
name: "HomeIndex", name: "HomeIndex",

2
src/pages/home/Attention.vue
Unescape View File

@ -15,7 +15,7 @@
<span>无敌浩克</span> <span>无敌浩克</span>
</div> </div>
<div class="video-container mb10p "> <div class="video-container mb10p ">
<video src="../../assets/video/吴三二的光年之外.mp4" poster="../../assets/img/poster/src1-bg.png"></video> <video src="../../assets/video/1.mp4" poster="../../assets/img/poster/src1-bg.png"></video>
<div class="music"> <div class="music">
<img src="../../assets/img/icon/music.svg" alt="" class="music-image"> <img src="../../assets/img/icon/music.svg" alt="" class="music-image">
<marquee behavior=scroll direction=left align=middle scrollamount=4> 吴三二 - 光年之外</marquee> <marquee behavior=scroll direction=left align=middle scrollamount=4> 吴三二 - 光年之外</marquee>

2
src/pages/home/Index 布局完成.vue
Unescape View File

@ -259,7 +259,7 @@ import Comment from '../../components/Comment.vue'
import Other from '../../components/Other.vue' import Other from '../../components/Other.vue'
import Share from '../../components/Share.vue' import Share from '../../components/Share.vue'
import Footer from "../../components/Footer.vue" import Footer from "../../components/Footer.vue"
import mp1 from '../../assets/video/吴三二的光年之外.mp4' import mp1 from '../../assets/video/1.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 SlideItem from './SlideItem.vue'
import SlideList from './SlideList.vue' import SlideList from './SlideList.vue'

60
src/pages/home/Index.vue
Unescape View File

@ -1,23 +1,23 @@
<template> <template>
<div id="home-index"> <div id="home-index">
<div class="toolbar-ctn">
<div class="toolbar" :style="toolbarStyle">
<div class="left">直播</div>
<div class="tab-ctn">
<div class="tabs" ref="tabs">
<div class="tab"><span>双流</span></div>
<div class="tab"><span>关注</span></div>
<div class="tab"><span>推荐</span></div>
</div>
<div class="index" :style="tabIndexStyle"></div>
</div>
<div class="right" :style="{opacity:loading ? 0 : 1}">搜索</div>
</div>
<div class="notice" :style="noticeStyle"><span>下拉刷新内容</span></div>
<div class="loading" :style="loadingStyle">AA</div>
</div>
<SlideList v-model:active-index="baseActiveIndex"> <SlideList v-model:active-index="baseActiveIndex">
<SlideItem> <SlideItem>
<div class="toolbar-ctn">
<div class="toolbar" :style="toolbarStyle">
<div class="left">直播</div>
<div class="tab-ctn">
<div class="tabs" ref="tabs">
<div class="tab"><span>双流</span></div>
<div class="tab"><span>关注</span></div>
<div class="tab"><span>推荐</span></div>
</div>
<div class="index" :style="tabIndexStyle"></div>
</div>
<div class="right" :style="{opacity:loading ? 0 : 1}">搜索</div>
</div>
<div class="notice" :style="noticeStyle"><span>下拉刷新内容</span></div>
<div class="loading" :style="loadingStyle">AA</div>
</div>
<SlideList v-model:active-index="activeIndex" <SlideList v-model:active-index="activeIndex"
> >
<SlideItem style="overflow:auto;"> <SlideItem style="overflow:auto;">
@ -153,7 +153,7 @@
@slide="slide"> @slide="slide">
<SlideItem :style="itemTop" v-for="(item,index) of videos"> <SlideItem :style="itemTop" v-for="(item,index) of videos">
<Video <Video
:disabled="videoActiveIndex !== index" :disabled="videoActiveIndex !== addCount + index"
v-model:video="videos[index]" v-model:video="videos[index]"
@showComments="isCommenting = !isCommenting" @showComments="isCommenting = !isCommenting"
@showShare="isSharing = !isSharing" @showShare="isSharing = !isSharing"
@ -220,7 +220,11 @@ import Comment from '../../components/Comment.vue'
import Other from '../../components/Other.vue' import Other from '../../components/Other.vue'
import Share from '../../components/Share.vue' import Share from '../../components/Share.vue'
import Footer from "../../components/Footer.vue" import Footer from "../../components/Footer.vue"
import mp1 from '../../assets/video/吴三二的光年之外.mp4' import mp41 from '../../assets/video/10.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'
import src1Bg from '../../assets/img/poster/src1-bg.png' import src1Bg from '../../assets/img/poster/src1-bg.png'
import SlideItem from './SlideItem.vue' import SlideItem from './SlideItem.vue'
import SlideList from './SlideList.vue' import SlideList from './SlideList.vue'
@ -234,54 +238,54 @@ export default {
list: [1, 2, 3, 4, 5], list: [1, 2, 3, 4, 5],
videos: [ videos: [
{ {
videoUrl: mp1, videoUrl: mp41,
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ', // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
videoPoster: src1Bg, videoPoster: src1Bg,
isLoved: true, isLoved: true,
loves: 1234, loves: 1234,
comments: 666, comments: 666,
shared: 999, shared: 999,
duration:99 duration: 99
}, },
{ {
videoUrl: mp1, videoUrl: mp42,
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ', // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
videoPoster: src1Bg, videoPoster: src1Bg,
isLoved: false, isLoved: false,
loves: 1234, loves: 1234,
comments: 666, comments: 666,
shared: 999, shared: 999,
duration:99 duration: 99
}, },
{ {
videoUrl: mp1, videoUrl: mp43,
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ', // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
videoPoster: src1Bg, videoPoster: src1Bg,
isLoved: false, isLoved: false,
loves: 1234, loves: 1234,
comments: 666, comments: 666,
shared: 999, shared: 999,
duration:99 duration: 99
}, },
{ {
videoUrl: mp1, videoUrl: mp44,
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ', // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
videoPoster: src1Bg, videoPoster: src1Bg,
isLoved: false, isLoved: false,
loves: 1234, loves: 1234,
comments: 666, comments: 666,
shared: 999, shared: 999,
duration:99 duration: 99
}, },
{ {
videoUrl: mp1, videoUrl: mp45,
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ', // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
videoPoster: src1Bg, videoPoster: src1Bg,
isLoved: false, isLoved: false,
loves: 1234, loves: 1234,
comments: 666, comments: 666,
shared: 999, shared: 999,
duration:99 duration: 99
}, },
], ],
addCount: 0, addCount: 0,

2
src/pages/home/Index2.vue
Unescape View File

@ -218,7 +218,7 @@ import Comment from '../../components/Comment.vue'
import Other from '../../components/Other.vue' import Other from '../../components/Other.vue'
import Share from '../../components/Share.vue' import Share from '../../components/Share.vue'
import Footer from "../../components/Footer.vue" import Footer from "../../components/Footer.vue"
import mp1 from '../../assets/video/吴三二的光年之外.mp4' import mp1 from '../../assets/video/1.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 SlideItem from './SlideItem.vue'
import SlideList from './SlideList.vue' import SlideList from './SlideList.vue'

5
vue.config.js
Unescape View File

@ -1,4 +1,7 @@
// vue.config.js // vue.config.js
module.exports = { module.exports = {
lintOnSave:false //关闭eslint检查 lintOnSave:false, //关闭eslint检查
devServer:{
open: true,
}
} }

Write Preview
Loading…
Cancel
Save