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

初始化首页

Browse Source
This commit is contained in:
zyronon 2018-10-16 10:10:07 +08:00
parent b9221ef4ab
commit 37d8b37f61
13 changed files with 486 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -19,3 +19,4 @@ yarn-error.log*
*.njsproj
*.sln
*.sw*
src/assets/video/

136
src/App.vue
View File

@ -1,28 +1,124 @@
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
<div id="app">
<Home/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import Home from './components/Home.vue'
export default {
name: 'app',
components: {
HelloWorld
}
}
export default {
name: 'app',
components: {
Home
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
<style lang="scss">
#app {
width: 100%;
height: 100%;
}
$width: 1000;
@while $width > 0 {
.w#{$width}p {
width: #{$width}px !important;
}
$width: $width - 50;
}
$margin: 50;
@while $margin > 0 {
.ml#{$margin}p {
margin-left: #{$margin}px !important;
}
$margin: $margin - 1;
}
$margin: 50;
@while $margin > 0 {
.mr#{$margin}p {
margin-right: #{$margin}px !important;
}
$margin: $margin - 1;
}
$margin: 50;
@while $margin > 0 {
.mt#{$margin}p {
margin-top: #{$margin}px !important;
}
$margin: $margin - 1;
}
$margin: 50;
@while $margin > 0 {
.mb#{$margin}p {
margin-bottom: #{$margin}px !important;
}
$margin: $margin - 1;
}
$padding: 50;
@while $padding > 0 {
.pl#{$padding}p {
padding-left: #{$padding}px !important;
}
$padding: $padding - 1;
}
$padding: 50;
@while $padding > 0 {
.pr#{$padding}p {
padding-right: #{$padding}px !important;
}
$padding: $padding - 1;
}
$padding: 50;
@while $padding > 0 {
.pt#{$padding}p {
padding-top: #{$padding}px !important;
}
$padding: $padding - 1;
}
$padding: 50;
@while $padding > 0 {
.pb#{$padding}p {
padding-bottom: #{$padding}px !important;
}
$padding: $padding - 1;
}
$font: 30;
@while $font > 0 {
.f#{$font} {
font-size: #{$font}px;
}
$font: $font - 1;
}
.pull-left {
float: left;
}
.pull-right {
float: right;
}
.block{
display: block;
}
.oh{
overflow: hidden;
}
.tac{
text-align: center;
}
</style>

1
src/assets/img/add.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="1539617695563" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2801" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M590.769231 571.076923h324.923077c15.753846 0 29.538462-13.784615 29.538461-29.538461v-59.076924c0-15.753846-13.784615-29.538462-29.538461-29.538461H590.769231c-11.815385 0-19.692308-7.876923-19.692308-19.692308V108.307692c0-15.753846-13.784615-29.538462-29.538461-29.538461h-59.076924c-15.753846 0-29.538462 13.784615-29.538461 29.538461V433.230769c0 11.815385-7.876923 19.692308-19.692308 19.692308H108.307692c-15.753846 0-29.538462 13.784615-29.538461 29.538461v59.076924c0 15.753846 13.784615 29.538462 29.538461 29.538461H433.230769c11.815385 0 19.692308 7.876923 19.692308 19.692308v324.923077c0 15.753846 13.784615 29.538462 29.538461 29.538461h59.076924c15.753846 0 29.538462-13.784615 29.538461-29.538461V590.769231c0-11.815385 7.876923-19.692308 19.692308-19.692308z" p-id="2802"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

1
src/assets/img/close.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="1539624823281" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1952" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M505.173333 416.426666 122.88 27.306666c-27.306667-27.306667-68.266667-27.306667-102.4 0l0 0c-27.306667 27.306667-27.306667 68.266667 0 102.4L409.6 512l-389.12 389.12c-27.306667 27.306667-27.306667 68.266667 0 102.4l0 0c27.306667 27.306667 68.266667 27.306667 102.4 0l389.12-389.12 389.12 389.12c27.306667 27.306667 68.266667 27.306667 102.4 0l0 0c27.306667-27.306667 27.306667-68.266667 0-102.4L607.573333 512l389.12-389.12c27.306667-27.306667 27.306667-68.266667 0-102.4l0 0c-27.306667-27.306667-68.266667-27.306667-102.4 0L505.173333 416.426666 505.173333 416.426666z" p-id="1953" fill="#8a8a8a"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 998 B

BIN
src/assets/img/head-image.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

1
src/assets/img/love-gray.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="1539622562307" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2051" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M513.401929 878.630145c-20.164249 0-207.085452-164.513868-289.018509-253.203816-46.00273-49.79715-91.849918-133.603881-91.849918-194.943924 0-130.201387 94.799086-236.113579 211.332173-236.113579 71.160713 0 131.555222 59.236126 168.815847 120.437 37.260625-61.200874 97.632621-120.437 168.814824-120.437 116.526947 0 211.32808 105.912192 211.32808 236.113579 0 61.476143-41.280172 148.617829-92.28073 195.33585C710.48047 708.321294 534.73991 878.630145 513.401929 878.630145z" p-id="2052" fill="#cdcdcd"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 904 B

1
src/assets/img/love.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="1539614702463" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2049" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M739.584 70.592c-92.224 0-177.792 63.04-228.224 109.568C460.864 133.632 375.36 70.592 283.008 70.592 108.48 70.592 0 176.96 0 348.16 0 492.8 130.688 608.256 131.2 608.64l340.544 328.512c10.432 10.432 24.448 16.256 39.552 16.256s29.056-5.824 39.296-16l341.248-328.64c30.656-29.376 130.752-134.848 130.752-260.544C1022.656 176.96 914.176 70.592 739.584 70.592z" p-id="2050" fill="#ffffff"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 786 B

1
src/assets/img/message.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="1539615176271" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13012" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M981.8 601.5c28-48.5 42.2-100.1 42.2-153.5s-14.2-105-42.2-153.5c-26.5-45.8-64.1-86.7-111.9-121.6C773.8 102.7 646.7 64 512 64s-261.8 38.7-357.8 108.9c-47.8 34.9-85.4 75.9-111.9 121.6C14.2 343 0 394.6 0 448s14.2 105 42.2 153.5c26.5 45.8 64.1 86.7 111.9 121.6C250.2 793.3 377.3 832 512 832c47.3 0 93.6-4.8 138-14l263.1 74.4c3.2 0.9 6.5 1.4 9.8 1.4 10.9 0 21.4-5 28.4-13.8 9-11.5 10.2-27.3 2.9-40l-71.9-126.2c41.9-32.8 75.3-70.6 99.5-112.3zM252 520c-39.8 0-72-32.2-72-72s32.2-72 72-72 72 32.2 72 72-32.2 72-72 72z m260 0c-39.8 0-72-32.2-72-72s32.2-72 72-72 72 32.2 72 72-32.2 72-72 72z m260 0c-39.8 0-72-32.2-72-72s32.2-72 72-72 72 32.2 72 72-32.2 72-72 72z" p-id="13013" fill="#ffffff"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

1
src/assets/img/music.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="1539617513383" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2048" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M405.333333 704m-192 0a192 192 0 1 0 384 0 192 192 0 1 0-384 0Z" fill="#ffffff" p-id="2049"></path><path d="M512 128v576h85.333333V298.666667l234.666667 64v-149.333334z" fill="#ffffff" p-id="2050"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 596 B

1
src/assets/img/play.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="1539575406495" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1072" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M912.724884 429.355681L208.797545 13.198638C151.603449-20.597874 64.01249 12.198741 64.01249 95.790112V927.904219c0 74.992259 81.391599 120.187594 144.785055 82.591475l703.927339-415.957064c62.793518-36.996181 62.993498-128.186768 0-165.182949z" fill="#cdcdcd" p-id="1073"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 672 B

1
src/assets/img/share.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="1539615220711" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14876" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M621.110023 141.28277c-10.939143-10.93505-26.768667-15.935947-40.191374-6.538927-12.669554 8.868995-12.56313 19.051915-12.56313 29.986965l0 158.582785c-224.199225 0-437.464423 185.92041-437.464423 410.119635 0 60.151985 27.340695 136.708592 54.682413 164.048263 32.810267-169.514765 202.328102-300.755832 382.78201-300.755832l0 160.538323c0 5.469572-0.460488 25.329898 10.044774 31.383778 16.101723 9.278317 28.231995-0.530073 33.701566-5.999644l270.0239-291.62487c10.93505-10.939143 14.326287-22.706141 14.326287-31.006178 0-12.707416-9.071609-25.953092-14.541181-31.422663L621.110023 141.28277z" p-id="14877" fill="#ffffff"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

361
src/components/Home.vue Normal file
View File

@ -0,0 +1,361 @@
<template>
<div id="home">
<div class="bg-video">
<video src="../assets/video/吴三二的光年之外.mp4">
您的浏览器不支持 video 标签。
</video>
<div class="float" @click="togglePlayVideo($event)">
<transition name="pause">
<img src="../assets/img/play.svg" class="pause" v-show="!isPlaying"
@click.stop="playVideo2($event)">
</transition>
<div class="toolbar mb10p">
<img src="../assets/img/head-image.jpeg" alt="" class="head-image mb15p">
<div class="love mb15p">
<img src="../assets/img/love.svg" alt="" class="love-image">
<span class="f14">3453</span>
</div>
<div class="message mb15p" @click.stop="showComment()">
<img src="../assets/img/message.svg" alt="" class="message-image">
<span class="f14">6666</span>
</div>
<div class="share mb35p">
<img src="../assets/img/share.svg" alt="" class="share-image">
<span class="f14">555</span>
</div>
<img src="../assets/img/head-image.jpeg" alt="" class="music">
</div>
<div class="content ml10p">
<div class="name mb10p">@TTentau</div>
<div class="description mb10p">
吴三二的光年之外, 您的浏览器不支持 video 标签。 您的浏览器不支持 video 标签。
</div>
<div class="music mb10p">
<img src="../assets/img/music.svg" alt="" class="music-image">
<marquee behavior=scroll direction=left align=middle scrollamount=4> 吴三二 - 光年之外</marquee>
</div>
</div>
</div>
</div>
<transition name="comment">
<div class="comment f14" v-if="isComment">
<div class="title">
<p>2.7w条评论</p>
<img src="../assets/img/close.svg" @click.stop="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>
</div>
</template>
<script>
export default {
name: "Home",
data() {
return {
isPlaying: true,
isComment: false,
}
},
methods: {
togglePlayVideo(e) {
console.log(e.target);
let float = e.target;
let video = float.previousSibling;
if (video.paused) {
video.play();
} else {
video.pause();
}
this.isPlaying = !video.paused;
},
showComment() {
this.isComment = !this.isComment;
}
},
created() {
console.log(55)
},
mounted() {
}
}
</script>
<style scoped lang="scss">
#home {
.bg-video {
position: relative;
video {
width: 100%;
height: 100%;
/*position: absolute;*/
}
.float {
z-index: 1;
position: absolute;
top: 0;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
.pause {
width: 60px;
height: 60px;
opacity: 0.5;
position: absolute;
margin: auto;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
.toolbar {
width: 40px;
position: absolute;
bottom: 20px;
right: 20px;
color: #fff;
div {
text-align: center;
}
img {
width: 90%;
height: 90%;
}
.head-image, .music {
width: 100%;
height: 100%;
border-radius: 50%;
}
.music {
animation: animations 4s linear forwards infinite;
}
@keyframes animations {
0% {
transform: rotate(0deg);;
}
100% {
transform: rotate(360deg);
}
}
}
.content {
color: #fff;
position: absolute;
bottom: 20px;
width: 75%;
.music {
position: relative;
width: 60%;
.music-image {
width: 20px;
height: 20px;
margin-top: 3px;
position: absolute;
}
marquee {
margin-left: 30px;
}
}
}
}
}
.comment {
position: absolute;
bottom: 0;
background: #fff;
z-index: 2;
border-radius: 10px;
.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%;
}
}
}
}
}
}
.pause-enter-active {
transition: all .3s ease;
}
.pause-leave-active {
/*transition: all 1s ease ;*/
}
.pause-enter, .pause-leave-to {
transform: scale(2);
opacity: 0;
}
.comment-enter-active {
transition: all .3s ease;
}
.comment-leave-active {
transition: all .3s ease ;
}
.comment-enter, .comment-leave-to {
transform: translateY(300px);
}
</style>

13
src/components/index.vue
View File

@ -1,13 +0,0 @@
<template>
</template>
<script>
export default {
name: "index"
}
</script>
<style scoped>
</style>