MoeJue/douyin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改video页面

Browse Source
This commit is contained in:
zyronon 2021-07-01 17:58:29 +08:00
parent 42a75adee2
commit c86b98a51d
1 changed files with 42 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/components/Video.vue
View File

@ -33,15 +33,18 @@
</div>
<span>{{ video.loves }}</span>
</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">
<span>{{ video.comments }}</span>
</div>
<div class="share mb35p" @click.stop="$emit('showShare')">
<div v-if="!isMy" class="share mb35p" @click.stop="$emit('showShare')">
<img src="../assets/img/icon/share.svg" alt="" class="share-image">
<span>{{ video.shared }}</span>
</div>
<div v-else class="share mb35p" @click.stop="$emit('showShare')">
<img src="../assets/img/icon/share.svg" alt="" class="share-image">
</div>
<div class="music-ctn">
<img class="music1" src="../assets/img/icon/home/music1.png" alt="">
<img class="music2" src="../assets/img/icon/home/music2.png" alt="">
@ -50,7 +53,7 @@
</div>
</div>
</div>
<div class="content ml10p mb10p" @click.stop="goUserInfo()" v-if="!isMy">
<div class="content ml10p mb10p" v-if="!isMy">
<div class="name mb10p">@TTentau</div>
<div class="description mb10p">
吴三二的光年之外, 您的浏览器不支持 video 标签。 您的浏览器不支持 video 标签。
@ -61,7 +64,7 @@
<div behavior=scroll direction=left align=middle scrollamount=4> 吴三二 - 光年之外</div>
</div>
</div>
<div class="comment-status">
<div v-else class="comment-status">
<div class="comment">
<div class="type-comment">
<img src="../assets/img/icon/head-image.jpeg" alt="" class="avatar">
@ -73,14 +76,13 @@
<p class="text">北京</p>
</div>
</div>
<transition-group name="fade" tag="ul">
<div class="type-loved" v-for="i in test">
<transition-group name="comment-status" tag="div" class="loveds">
<div class="type-loved" :key="i" 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 class="process"
@ -184,7 +186,7 @@ export default {
isMove: false,
mitt: inject('mitt'),
currentVideoId: 'a' + Date.now(),
test: [1]
test: [1, 2]
}
},
mounted() {
@ -301,6 +303,20 @@ export default {
transform: scale(0);
}
.comment-status-enter-active,
.comment-status-leave-active {
transition: transform 0.5s linear;
}
.comment-status-move {
transition: transform 0.5s ease;
}
.comment-status-enter-from,
.comment-status-leave-to {
transform: scale(0);
}
.bg-video {
position: relative;
background: black;
@ -562,9 +578,16 @@ export default {
}
.loveds {
}
.type-loved {
width: 40px;
height: 40px;
position: relative;
margin-bottom: 20px;
animation: test 1s ;
animation-delay: .5s;
.avatar {
width: 36px;
@ -583,9 +606,19 @@ export default {
border-radius: 50%;
border: 2px solid white;
}
}
@keyframes test {
from {
display: block;
transform: translate3d(0,0,0);
}
to {
display: none;
transform: translate3d(0,-60px,0);
}
}
}
}
}
@ -683,8 +716,6 @@ export default {
}
}
}
}
}