zyronon
4 years ago
6 changed files with 830 additions and 332 deletions
|
Before Width: | Height: | Size: 253 B |
@ -0,0 +1,266 @@
@@ -0,0 +1,266 @@
|
||||
<template> |
||||
<div id="attention"> |
||||
<header> |
||||
<span>双流</span> |
||||
<div class="arrow"></div> |
||||
</header> |
||||
<div class="items p10p"> |
||||
<div class="item mb20p pb20p" v-for="(item,index) of items" :key="index"> |
||||
<div class="header mb10p"> |
||||
<img src="../../assets/img/icon/head-image.jpeg" alt=""> |
||||
<span class="ml5p">TTentau</span> |
||||
</div> |
||||
<div class="my-comment mb10p"> |
||||
最靠近北极有个不生不来之地，北极熊比人还多，对中国免签 <span class="tag">#带他去旅行</span> |
||||
</div> |
||||
<div class="other-comment p10p"> |
||||
<span class="user-name">@super-man:</span> |
||||
<span class="tag">#购物车里是什么</span> |
||||
<span>无敌浩克</span> |
||||
</div> |
||||
<div class="video-container mb10p "> |
||||
<video src="../../assets/video/1.mp4" poster="../../assets/img/poster/src1-bg.png"></video> |
||||
<div class="music"> |
||||
<img src="../../assets/img/icon/music.svg" alt="" class="music-image"> |
||||
<marquee behavior=scroll direction=left align=middle scrollamount=4> 吴三二 - 光年之外</marquee> |
||||
<img src="../../assets/img/icon/play.svg" alt="" class="play"> |
||||
<img src="../../assets/img/icon/pause.svg" alt="" class="pause" v-if="false"> |
||||
</div> |
||||
</div> |
||||
<div class="location mb10p"> |
||||
<img src="../../assets/img/icon/location.svg" alt=""> |
||||
<span class="ml5p">东方明珠</span> |
||||
</div> |
||||
<div class="toolbar mb10p"> |
||||
<div class="item"> |
||||
<img src="../../assets/img/icon/love.svg" alt=""> |
||||
<img src="../../assets/img/icon/loved.svg" alt="" class="love-image" v-if="false"> |
||||
<span class="count">555</span> |
||||
</div> |
||||
<div class="item"> |
||||
<img src="../../assets/img/icon/message.svg" alt=""> |
||||
<span class="count">555</span> |
||||
</div> |
||||
<div class="item"> |
||||
<img src="../../assets/img/icon/love.svg" alt=""> |
||||
<span class="count">555</span> |
||||
</div> |
||||
<div class="item"> |
||||
<img src="../../assets/img/icon/love.svg" alt=""> |
||||
<span class="count">555</span> |
||||
</div> |
||||
</div> |
||||
<div class="hot-comment 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> |
||||
</div> |
||||
<div class="love pull-right"> |
||||
<img src="../../assets/img/icon/love-gray.svg" alt="" class="love-image"> |
||||
<img src="../../assets/img/icon/loved.svg" alt="" class="love-image" v-if="false"> |
||||
<span class="f14 block">3453</span> |
||||
</div> |
||||
</div> |
||||
<span class="time">11小时前</span> |
||||
</div> |
||||
</div> |
||||
<Footer v-bind:init-tab="2" style="position: fixed;"/> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
import Footer from '../../components/Footer.vue'; |
||||
|
||||
export default { |
||||
name: "Attention", |
||||
components: { |
||||
Footer |
||||
}, |
||||
data() { |
||||
return { |
||||
items: [ |
||||
{}, {}, {} |
||||
], |
||||
height: 0, |
||||
width: 0, |
||||
footerHeight: 0 |
||||
} |
||||
}, |
||||
created() { |
||||
this.height = document.body.clientHeight; |
||||
this.width = document.body.clientWidth; |
||||
}, |
||||
mounted() { |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
#attention { |
||||
/*background: rgb(22，24，34);*/ |
||||
/*background: #161822;*/ |
||||
//抖音原色，感觉很暗 |
||||
background: #2e3244; |
||||
color: #b8b9c1; |
||||
|
||||
header { |
||||
font-size: 1.5rem; |
||||
height: 50px; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
|
||||
$arrow-width: 5px; |
||||
|
||||
.arrow { |
||||
position: relative; |
||||
top: 3px; |
||||
left: 5px; |
||||
width: 0; |
||||
height: 0; |
||||
border-top: $arrow-width solid white; |
||||
border-right: $arrow-width solid transparent; |
||||
border-bottom: $arrow-width solid transparent; |
||||
border-left: $arrow-width solid transparent; |
||||
} |
||||
} |
||||
|
||||
.items { |
||||
> .item { |
||||
border-bottom: 1px solid #494950; |
||||
|
||||
.header { |
||||
display: flex; |
||||
justify-content: flex-start; |
||||
align-items: center; |
||||
|
||||
img { |
||||
width: 40px; |
||||
height: 40px; |
||||
border-radius: 50%; |
||||
} |
||||
} |
||||
|
||||
.other-comment { |
||||
display: none; |
||||
background: #15161b; |
||||
border-radius: 10px 10px 0 0; |
||||
} |
||||
|
||||
.video-container { |
||||
position: relative; |
||||
width: 80%; |
||||
|
||||
video { |
||||
border-radius: 10px 10px 10px 10px; |
||||
width: 100%; |
||||
} |
||||
|
||||
.music { |
||||
position: absolute; |
||||
bottom: 15px; |
||||
right: 15px; |
||||
left: 15px; |
||||
|
||||
.music-image { |
||||
width: 20px; |
||||
height: 20px; |
||||
margin-top: 3px; |
||||
position: absolute; |
||||
} |
||||
|
||||
marquee { |
||||
width: 50%; |
||||
margin-left: 30px; |
||||
color: white; |
||||
} |
||||
|
||||
.play, .pause { |
||||
width: 20px; |
||||
height: 20px; |
||||
margin-top: 3px; |
||||
position: absolute; |
||||
right: 0; |
||||
} |
||||
|
||||
} |
||||
} |
||||
|
||||
.location { |
||||
display: flex; |
||||
justify-content: flex-start; |
||||
align-items: center; |
||||
height: 20px; |
||||
|
||||
img { |
||||
height: 100%; |
||||
} |
||||
} |
||||
|
||||
.toolbar { |
||||
width: 90%; |
||||
height: 25px; |
||||
text-align: center; |
||||
|
||||
.item { |
||||
height: 100%; |
||||
display: flex; |
||||
width: 25%; |
||||
justify-content: flex-start; |
||||
align-items: center; |
||||
float: left; |
||||
|
||||
img { |
||||
height: 100%; |
||||
} |
||||
|
||||
.count { |
||||
margin-left: 5px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.hot-comment { |
||||
.content { |
||||
float: left; |
||||
width: 85%; |
||||
|
||||
.head-image { |
||||
width: 40px; |
||||
border-radius: 50%; |
||||
float: left; |
||||
} |
||||
|
||||
.comment-container { |
||||
width: 85%; |
||||
|
||||
.time { |
||||
color: gray; |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
.love { |
||||
text-align: center; |
||||
|
||||
.love-image { |
||||
width: 30px; |
||||
border-radius: 50%; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.tag { |
||||
color: #E6C346; |
||||
margin: 0 3px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
</style> |
||||
Loading…
Reference in new issue