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

关注页完成80%

Browse Source
This commit is contained in:
zyronon 2018-10-18 23:25:55 +08:00
parent f52a3621b7
commit 50d3278887
8 changed files with 205 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/App.vue
View File

@ -23,6 +23,7 @@
font-size: 14px;
padding: 0;
margin: 0;
font-family: "Microsoft Sans Serif";
}
$width: 1000;
@ -66,6 +67,16 @@
$margin: $margin - 1;
}
$margin: 50;
@while $margin > 0 {
.m#{$margin}p {
margin: #{$margin}px !important;
}
$margin: $margin - 1;
}
$padding: 50;
@while $padding > 0 {
.pl#{$padding}p {

1
src/assets/img/location.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539875191526" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1984" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M536.217 90.69c-168.027 0-302.524 134.497-302.524 302.524 0 120.961 87.056 215.095 181.191 336.055 32.786 45.949 58.866 91.9 92.023 150.268 1.74 3.105 3.974 5.961 6.582 8.321 5.588 5.091 12.047 9.438 22.726 9.438v0c11.425 0 18.007-4.844 23.844-10.432 1.986-1.862 3.726-4.098 5.217-6.334 33.158-52.409 59.362-98.481 92.273-144.556 94.135-127.666 181.191-221.801 181.191-342.761 0-168.027-134.497-302.524-302.524-302.524v0zM536.217 494.055c-53.774 0-100.842-40.362-100.842-100.842s40.362-100.842 100.842-100.842c53.774 0 100.842 40.362 100.842 100.842 0 53.774-40.362 100.842-100.842 100.842v0z" p-id="1985" fill="#ffffff"></path><path d="M536.217 770.624c-140.334 0-254.091 53.525-254.091 119.47s113.757 119.47 254.091 119.47 254.091-53.525 254.091-119.47-113.757-119.47-254.091-119.47zM536.217 938.651c-105.561 0-191.003-37.505-191.003-78.735s85.566-74.886 191.003-74.886 191.003 33.532 191.003 74.886-85.566 78.735-191.003 78.735z" p-id="1986" fill="#ffffff"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

1
src/assets/img/pause.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539874117023" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1958" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M256 810.666667h170.666667V213.333333H256v597.333334z m341.333333-597.333334v597.333334h170.666667V213.333333h-170.666667z" p-id="1959" fill="#ffffff"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 550 B

183
src/components/attention/Attention.vue
View File

@ -1,8 +1,64 @@
<template>
<div id="attention">
<div class="items">
<div id="attention" >
<div class="items pl10p pr10p">
<div class="item">
<div class="header">
<img src="../../assets/img/head-image.jpeg" alt="">
<span class="ml5p">TTentau</span>
</div>
<div class="my-comment mt5p">
最靠近北极有个不生不来之地，北极熊比人还多，对中国免签 <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/吴三二的光年之外.mp4"></video>
<div class="music">
<img src="../../assets/img/music.svg" alt="" class="music-image">
<marquee behavior=scroll direction=left align=middle scrollamount=4> 吴三二 - 光年之外</marquee>
<img src="../../assets/img/play.svg" alt="" class="play">
<img src="../../assets/img/pause.svg" alt="" class="pause" v-if="false">
</div>
</div>
<div class="location mb10p">
<img src="../../assets/img/location.svg" alt="">
<span class="ml5p">东方明珠</span>
</div>
<div class="toolbar mb10p">
<div class="item">
<img src="../../assets/img/love.svg" alt="">
<span class="count">555</span>
</div>
<div class="item">
<img src="../../assets/img/message.svg" alt="">
<span class="count">555</span>
</div>
<div class="item">
<img src="../../assets/img/love.svg" alt="">
<span class="count">555</span>
</div>
<div class="item">
<img src="../../assets/img/love.svg" alt="">
<span class="count">555</span>
</div>
</div>
<div class="hot-comment 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>
</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>
<span class="time">11小时前</span>
</div>
</div>
<Footer v-bind:init-tab="2"/>
@ -15,12 +71,129 @@
export default {
name: "Attention",
components:{
components: {
Footer
}
}
</script>
<style scoped>
<style scoped lang="scss">
#attention {
/*background: rgb(22，24，34);*/
/*background: #161822;*/
//抖音原色，感觉很暗
background: #2e3244;
color: #b8b9c1;
.items {
.item {
.header {
display: flex;
justify-content: start;
align-items: center;
img {
width: 30px;
height: 30px;
border-radius: 50%;
}
}
.other-comment {
background: #15161b;
border-radius: 10px 10px 0 0;
}
.video-container {
position: relative;
video {
border-radius: 0 0 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: 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: start;
align-items: center;
float: left;
img{
height: 100%;
}
.count{
margin-left: 5px;
}
}
}
.hot-comment {
.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%;
}
}
}
}
.tag {
color: #E6C346;
margin: 0 3px;
}
}
}
</style>

2
src/components/common/Footer.vue
View File

@ -44,7 +44,7 @@
.footer {
border-top: 1px solid #7b7878;
position: absolute;
position: fixed;
z-index: 2;
bottom: 0;
width: 100%;

4
src/components/home/Comment.vue
View File

@ -129,10 +129,10 @@
<style lang="scss" scoped>
.comment {
position: absolute;
position: fixed;
bottom: 0;
background: #fff;
z-index: 2;
z-index: 3;
border-radius: 10px 10px 0 0;
.title {
position: relative;

12
src/components/home/Home.vue
View File

@ -2,7 +2,7 @@
<div id="home">
<div class="bg-video" v-for="(item,index) in data">
<!--<video :src="data[0].videoUrl">-->
<video src="../../assets/video/吴三二的光年之外.mp4" autoplay>
<video src="../../assets/video/吴三二的光年之外.mp4" >
您的浏览器不支持 video 标签。
</video>
<div class="float" @click="togglePlayVideo($event)">
@ -76,6 +76,12 @@
loves: 1234,
comments: 666,
shared: 999
},{
videoUrl: '../assets/video/吴三二的光年之外.mp4',
isLoved: false,
loves: 1234,
comments: 666,
shared: 999
}
]
}
@ -160,7 +166,7 @@
.toolbar {
width: 40px;
position: absolute;
bottom: 20px;
bottom: 35px;
right: 20px;
color: #fff;
div {
@ -198,7 +204,7 @@
.content {
color: #fff;
position: absolute;
bottom: 20px;
bottom: 35px;
width: 75%;
.music {
position: relative;

4
src/components/home/Share.vue
View File

@ -125,9 +125,9 @@
<style lang="scss" scoped>
.share {
position: absolute;
position: fixed;
bottom: 0;
z-index: 2;
z-index: 3;
background: #eaeaea;
border-radius: 10px 10px 0 0;
.friends {