ttentau
8 years ago
22 changed files with 610 additions and 201 deletions
|
After Width: | Height: | Size: 5.9 KiB |
@ -0,0 +1,209 @@
@@ -0,0 +1,209 @@
|
||||
<template> |
||||
<transition name="comment"> |
||||
<div class="comment f14" v-if="isCommenting"> |
||||
<div class="title"> |
||||
<p>2.7w条评论</p> |
||||
<img src="../assets/img/close.svg" @click.stop="$emit('showComment')"> |
||||
</div> |
||||
<div class="items"> |
||||
<div class="item pl5p pr15p mb5p oh"> |
||||
<div class="content pull-left "> |
||||
<img src="../assets/img/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/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/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/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/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/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/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/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/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/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/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/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/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/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> |
||||
</transition> |
||||
|
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: "Comment", |
||||
props: ['isCommenting'], |
||||
methods: { |
||||
// showComment() { |
||||
// this.isCommenting = !this.isCommenting; |
||||
// console.log(666) |
||||
// } |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.comment { |
||||
position: absolute; |
||||
bottom: 0; |
||||
background: #fff; |
||||
z-index: 2; |
||||
border-radius: 10px 10px 0 0; |
||||
.title { |
||||
position: relative; |
||||
p { |
||||
text-align: center; |
||||
} |
||||
img { |
||||
width: 15px; |
||||
height: 15px; |
||||
position: absolute; |
||||
right: 20px; |
||||
top: 0; |
||||
} |
||||
} |
||||
.input-comment { |
||||
height: 30px; |
||||
border-top: 1px solid #e2e1e1; |
||||
input { |
||||
height: 100%; |
||||
width: 90%; |
||||
} |
||||
span { |
||||
color: #999; |
||||
font-size: 22px; |
||||
} |
||||
} |
||||
.items { |
||||
overflow-y: scroll; |
||||
max-height: 300px; |
||||
.item { |
||||
.head-image { |
||||
width: 40px; |
||||
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%; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
.comment-enter-active { |
||||
transition: all .3s ease; |
||||
} |
||||
|
||||
.comment-leave-active { |
||||
transition: all .3s ease; |
||||
} |
||||
|
||||
.comment-enter, .comment-leave-to { |
||||
transform: translateY(300px); |
||||
} |
||||
|
||||
</style> |
||||
@ -0,0 +1,59 @@
@@ -0,0 +1,59 @@
|
||||
<template> |
||||
<div class="footer f16 "> |
||||
<div class="button" @click="tab(1)"><span v-bind:class="{active:currentTab==1}">首页</span></div> |
||||
<div class="button" @click="tab(2)"><span v-bind:class="{active:currentTab==2}">关注</span></div> |
||||
<div class="button" @click="tab(3)"><img src="../assets/img/add.svg" alt=""></div> |
||||
<div class="button" @click="tab(4)"><span v-bind:class="{active:currentTab==4}">消息</span></div> |
||||
<div class="button" @click="tab(5)"><span v-bind:class="{active:currentTab==5}">我</span></div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: "Footer", |
||||
data() { |
||||
return { |
||||
currentTab: 1 |
||||
} |
||||
}, |
||||
methods: { |
||||
tab(index) { |
||||
this.currentTab = index; |
||||
console.log(index); |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
|
||||
.footer { |
||||
border-top: 1px solid #7b7878; |
||||
position: absolute; |
||||
z-index: 2; |
||||
bottom: 0; |
||||
width: 100%; |
||||
background: #020202b3; |
||||
color: white; |
||||
.button { |
||||
width: 20%; |
||||
/*height: 35px;*/ |
||||
float: left; |
||||
text-align: center; |
||||
margin-top: 8px; |
||||
span { |
||||
border-bottom: 0px solid white; |
||||
padding-bottom: 5px; |
||||
} |
||||
.active { |
||||
border-bottom: 2px solid white; |
||||
} |
||||
img { |
||||
height: 15px; |
||||
background: white; |
||||
padding: 5px 15px; |
||||
border-radius: 5px; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,206 @@
@@ -0,0 +1,206 @@
|
||||
<template> |
||||
<transition name="comment"> |
||||
<div class="share" v-if="isSharing"> |
||||
<div class="friends oh p10p "> |
||||
<div class="title tac pb10p">私信给</div> |
||||
<div class="w200"> |
||||
<div class="friend pr10p"> |
||||
<img src="../assets/img/head-image.jpeg" alt=""> |
||||
<span>ttentau</span> |
||||
</div> |
||||
<div class="friend pr10p"> |
||||
<img src="../assets/img/head-image.jpeg" alt=""> |
||||
<span>ttentau</span> |
||||
</div> |
||||
<div class="friend pr10p"> |
||||
<img src="../assets/img/head-image.jpeg" alt=""> |
||||
<span>ttentau</span> |
||||
</div> |
||||
<div class="friend pr10p"> |
||||
<img src="../assets/img/head-image.jpeg" alt=""> |
||||
<span>ttentau</span> |
||||
</div> |
||||
<div class="friend pr10p"> |
||||
<img src="../assets/img/head-image.jpeg" alt=""> |
||||
<span>ttentau</span> |
||||
</div> |
||||
<div class="friend pr10p"> |
||||
<img src="../assets/img/head-image.jpeg" alt=""> |
||||
<span>ttentau</span> |
||||
</div> |
||||
<div class="friend pr10p"> |
||||
<img src="../assets/img/head-image.jpeg" alt=""> |
||||
<span>ttentau</span> |
||||
</div> |
||||
<div class="friend pr10p"> |
||||
<img src="../assets/img/ic_more.svg" alt=""> |
||||
<span>更多</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="shares oh pl20p pr20p pt10p pb10p"> |
||||
<div class="title tac pb10p">分享到</div> |
||||
<div class="w200"> |
||||
<div class="share-to pr10p"> |
||||
<img src="../assets/img/friend_circle.svg" alt=""> |
||||
<span>朋友圈</span> |
||||
</div> |
||||
<div class="share-to pr10p"> |
||||
<img src="../assets/img/wechat.svg" alt=""> |
||||
<span>微信</span> |
||||
</div> |
||||
<div class="share-to pr10p"> |
||||
<img src="../assets/img/sq-share-qqzone-01.svg"> |
||||
<span>QQ空间</span> |
||||
</div> |
||||
<div class="share-to pr10p"> |
||||
<img src="../assets/img/QQ.svg"> |
||||
<span>QQ</span> |
||||
</div> |
||||
<div class="share-to pr10p"> |
||||
<img src="../assets/img/sina.svg"> |
||||
<span>微博</span> |
||||
</div> |
||||
<div class="share-to pr10p"> |
||||
<img src="../assets/img/More.svg"> |
||||
<span>更多</span> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
<div class="toolbar oh pl20p pr20p pt10p pb10p f11"> |
||||
<div class="w200"> |
||||
<div class="tool pr10p "> |
||||
<img src="../assets/img/举报.svg" alt=""> |
||||
<span>举报</span> |
||||
</div> |
||||
<div class="tool pr10p "> |
||||
<img src="../assets/img/download.svg" alt=""> |
||||
<span>保存本地</span> |
||||
</div> |
||||
<div class="tool pr10p "> |
||||
<img src="../assets/img/collect.svg" alt=""> |
||||
<span>收藏</span> |
||||
</div> |
||||
<div class="tool pr10p "> |
||||
<img src="../assets/img/qiangjing.svg" alt=""> |
||||
<span>抢镜</span> |
||||
</div> |
||||
<div class="tool pr10p"> |
||||
<img src="../assets/img/qr_code.svg" alt=""> |
||||
<span>二维码</span> |
||||
</div> |
||||
<div class="tool pr10p"> |
||||
<img src="../assets/img/dongtaibizhi.svg" alt=""> |
||||
<span>动态壁纸</span> |
||||
</div> |
||||
<div class="tool pr10p"> |
||||
<img src="../assets/img/hepai.svg" alt=""> |
||||
<span>合拍</span> |
||||
</div> |
||||
<div class="tool pr10p"> |
||||
<img src="../assets/img/dislike.svg" alt=""> |
||||
<span>不感兴趣</span> |
||||
</div> |
||||
<div class="tool pr10p"> |
||||
<img src="../assets/img/href.svg" alt=""> |
||||
<span>复制链接</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="dismiss"> |
||||
取消 |
||||
</div> |
||||
</div> |
||||
</transition> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: "Share", |
||||
props:['isSharing'] |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
|
||||
.share { |
||||
position: absolute; |
||||
bottom: 0; |
||||
z-index: 2; |
||||
background: #eaeaea; |
||||
border-radius: 10px 10px 0 0; |
||||
.friends { |
||||
overflow-x: scroll; |
||||
.friend { |
||||
float: left; |
||||
img { |
||||
width: 40px; |
||||
height: 40px; |
||||
border-radius: 50%; |
||||
} |
||||
span { |
||||
display: block; |
||||
text-align: center; |
||||
} |
||||
} |
||||
} |
||||
.shares { |
||||
background: white; |
||||
overflow-x: scroll; |
||||
.share-to { |
||||
float: left; |
||||
width: 50px; |
||||
img { |
||||
width: 27px; |
||||
height: 27px; |
||||
padding: 6px; |
||||
border-radius: 50%; |
||||
background: #1ace04; |
||||
} |
||||
span { |
||||
display: block; |
||||
text-align: center; |
||||
} |
||||
} |
||||
} |
||||
.toolbar { |
||||
border-top: 1px solid #eaeaea; |
||||
background: white; |
||||
overflow-x: scroll; |
||||
.tool { |
||||
float: left; |
||||
img { |
||||
width: 22px; |
||||
height: 22px; |
||||
padding: 10px; |
||||
border-radius: 50%; |
||||
background: #eaeaea; |
||||
} |
||||
span { |
||||
display: block; |
||||
text-align: center; |
||||
} |
||||
} |
||||
} |
||||
.dismiss { |
||||
background: white; |
||||
border-top: 1px solid #eaeaea; |
||||
text-align: center; |
||||
height: 30px; |
||||
line-height: 30px; |
||||
} |
||||
} |
||||
|
||||
.comment-enter-active { |
||||
transition: all .3s ease; |
||||
} |
||||
|
||||
.comment-leave-active { |
||||
transition: all .3s ease; |
||||
} |
||||
|
||||
.comment-enter, .comment-leave-to { |
||||
transform: translateY(300px); |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue