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

bf

Browse Source
This commit is contained in:
zyronon 2019-07-22 23:09:34 +08:00
parent 4690b177f5
commit 7324da5077
27 changed files with 5620 additions and 5062 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6634
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@ -9,8 +9,10 @@
"push": "git add ./ && git commit -m 'dubug' && git push origin master" "push": "git add ./ && git commit -m 'dubug' && git push origin master"
}, },
"dependencies": { "dependencies": {
"lodash": "^4.17.14",
"pinyin": "^2.9.0",
"vue": "^2.6.10", "vue": "^2.6.10",
"vue-router": "^3.0.2" "vue-router": "^3.0.7"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "^3.0.3", "@vue/cli-plugin-babel": "^3.0.3",

10
public/index.html
View File

@ -10,16 +10,6 @@
<meta name="x5-fullscreen" content="true"> <meta name="x5-fullscreen" content="true">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>抖音</title> <title>抖音</title>
<style>
body,html{
width: 100%;
height: 100%;
background: #2e3244;
/*height: 0!important;*/
padding: 0;
margin: 0;
}
</style>
</head> </head>
<body> <body>
<noscript> <noscript>

140
src/App.vue
View File

@ -6,7 +6,6 @@
</template> </template>
<script> <script>
// import Home from './components/home/Home.vue'
export default { export default {
name: 'app' name: 'app'
@ -17,144 +16,5 @@
#app { #app {
background: #2e3244; background: #2e3244;
height: 100%; height: 100%;
font-size: 14px;
padding: 0;
margin: 0;
font-family: "Microsoft Sans Serif";
} }
p{
padding: 0;
margin: 0;
}
$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;
}
$margin: 50;
@while $margin > 0 {
.m#{$margin}p {
margin: #{$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;
}
$padding: 50;
@while $padding > 0 {
.p#{$padding}p {
padding: #{$padding}px !important;
}
$padding: $padding - 1;
}
$font: 30;
@while $font > 0 {
.f#{$font} {
font-size: #{$font}px;
}
$font: $font - 1;
}
$width: 300;
@while $width > 0 {
.w#{$width} {
width: percentage($width / 100);
}
$width: $width - 10;
}
.pull-left {
float: left;
}
.pull-right {
float: right;
}
.block {
display: block;
}
.oh {
overflow: hidden;
}
.tac {
text-align: center;
}
.red {background: red;}
.gold {background: gold;}
.green {background: green;}
</style> </style>

BIN
src/assets/img/icon/close-white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 353 B

BIN
src/assets/img/icon/refresh.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 526 B

BIN
src/assets/img/poster/src1-bg.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 606 KiB

After

Width:  |  Height:  |  Size: 59 KiB

56
src/assets/scss/color.scss Normal file
View File

@ -0,0 +1,56 @@
.c-red {
color: red;
}
.c-gray {
color: gray;
}
.c-text-notice {
color: #008000 !important;
}
.c-black {
color: black;
}
.c-text-gray {
color: #80808094;
}
.bg-red {
background: red;
}
.bg-gold {
background: gold;
}
.bg-green {
background: green;
}
.bg-white {
background: white;
}
.bg-gray {
background: gray;
}
.bg-second-gray {
background: #c1c1c1;
}
.red {
background: red;
}
.gold {
background: gold;
}
.green {
background: green;
}

0
src/assets/scss/custom.scss Normal file
View File

0
src/assets/scss/dialog.scss Normal file
View File

26
src/assets/scss/index.scss Normal file
View File

@ -0,0 +1,26 @@
@import "variables";//一些变量
@import "utils";//for循环生成的 margin、padding、width、height类
@import "custom";//自定义的一些快捷css类
@import "color";//颜色
@import "dialog";//弹窗
@import "layout";//布局
//想自己写全局变量请到custom.scss里面写
//想自己写全局变量请到custom.scss里面写
//想自己写全局变量请到custom.scss里面写
//想自己写全局变量请到custom.scss里面写
//想自己写全局变量请到custom.scss里面写
//想自己写全局变量请到custom.scss里面写
//想自己写全局变量请到custom.scss里面写
html,body{
font-size: 62.5%;
margin: 0;
padding: 0;
}
p{
padding: 0;
margin: 0;
}

61
src/assets/scss/layout.scss Normal file
View File

@ -0,0 +1,61 @@
//布局常用类
.d-none{
display: none!important;
}
//flex 布局常用类
.d-flex {
display: flex !important;
}
.justify-content-center {
justify-content: center !important;
}
.justify-content-between {
justify-content: space-between !important;
}
.justify-content-around {
justify-content: space-around !important;
}
.align-items-center {
align-items: center !important;
}
.align-items-start {
align-items: flex-start !important;
}
.align-items-end {
align-items: flex-end !important;
}
.flex-wrap-wrap {
flex-wrap: wrap;
}
.flex-direction-column{
flex-direction: column;
}
.pull-left {
float: left;
}
.pull-right {
float: right;
}
.block {
display: block;
}
.oh {
overflow: hidden;
}
.tac {
text-align: center;
}

160
src/assets/scss/utils.scss Normal file
View File

@ -0,0 +1,160 @@
/*
width
*/
$width: 500;
@while $width >= 0 {
.w#{$width}p {
width: #{$width}px !important;
}
$width: $width - 10;
}
$width: 100;
@while $width >= 0 {
.w#{$width} {
width: percentage($width / 100) !important;
}
$width: $width - 1;
}
/*
$height
*/
$height: 500;
@while $height >= 0 {
.h#{$height}p {
height: #{$height}px !important;
}
$height: $height - 10;
}
$height: 100;
@while $height >= 0 {
.h#{$height} {
height: percentage($height / 100) !important;
}
$height: $height - 1;
}
/*
margin
*/
$margin: 100;
@while $margin >= 0 {
.ml#{$margin}p {
margin-left: #{$margin}px !important;
}
$margin: $margin - 1;
}
$margin: 100;
@while $margin >= 0 {
.mr#{$margin}p {
margin-right: #{$margin}px !important;
}
$margin: $margin - 1;
}
$margin: 100;
@while $margin >=0 {
.mt#{$margin}p {
margin-top: #{$margin}px !important;
}
$margin: $margin - 1;
}
$margin: 100;
@while $margin >= 0 {
.mb#{$margin}p {
margin-bottom: #{$margin}px !important;
}
$margin: $margin - 1;
}
$margin: 100;
@while $margin >= 0 {
.m#{$margin}p {
margin: #{$margin}px !important;
}
$margin: $margin - 1;
}
/*
padding
*/
$padding: 100;
@while $padding >= 0 {
.pl#{$padding}p {
padding-left: #{$padding}px !important;
}
$padding: $padding - 1;
}
$padding: 100;
@while $padding >= 0 {
.pr#{$padding}p {
padding-right: #{$padding}px !important;
}
$padding: $padding - 1;
}
$padding: 100;
@while $padding >= 0 {
.pt#{$padding}p {
padding-top: #{$padding}px !important;
}
$padding: $padding - 1;
}
$padding: 100;
@while $padding >= 0 {
.pb#{$padding}p {
padding-bottom: #{$padding}px !important;
}
$padding: $padding - 1;
}
$padding: 100;
@while $padding >= 0 {
.p#{$padding}p {
padding: #{$padding}px !important;
}
$padding: $padding - 1;
}
/*
font
*/
$font: 40;
@while $font >=0 {
.f#{$font} {
font-size: #{$font}px!important;
}
$font: $font - 1;
}

0
src/assets/scss/variables.scss Normal file
View File

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

@ -1,7 +1,7 @@
<template> <template>
<div id="attention" > <div id="attention" >
<div class="items p10p"> <div class="items p10p">
<div class="item mb20p pb20p" v-for="item of items"> <div class="item mb20p pb20p" v-for="(item,index) of items" :key="index" >
<div class="header mb10p"> <div class="header mb10p">
<img src="../../assets/img/icon/head-image.jpeg" alt=""> <img src="../../assets/img/icon/head-image.jpeg" alt="">
<span class="ml5p">TTentau</span> <span class="ml5p">TTentau</span>
@ -87,14 +87,10 @@
} }
}, },
created() { created() {
self = this;
this.height = document.body.clientHeight; this.height = document.body.clientHeight;
this.width = document.body.clientWidth; this.width = document.body.clientWidth;
}, },
mounted() { mounted() {
// let footer = this.$refs.footer.$el;
// this.footerHeight = footer.offsetHeight;
} }
} }
</script> </script>
@ -112,7 +108,7 @@
border-bottom: 1px solid #494950; border-bottom: 1px solid #494950;
.header { .header {
display: flex; display: flex;
justify-content: start; justify-content: flex-start;
align-items: center; align-items: center;
img { img {
width: 40px; width: 40px;
@ -160,7 +156,7 @@
} }
.location { .location {
display: flex; display: flex;
justify-content: start; justify-content: flex-start;
align-items: center; align-items: center;
height: 20px; height: 20px;
img { img {
@ -175,7 +171,7 @@
height: 100%; height: 100%;
display: flex; display: flex;
width: 25%; width: 25%;
justify-content: start; justify-content: flex-start;
align-items: center; align-items: center;
float: left; float: left;
img{ img{

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

@ -1,11 +1,21 @@
<template> <template>
<div class="footer f16 "> <div class="footer f16 ">
<div class="button" @click="tab(1)"><span v-bind:class="{active:currentTab==1}">首页</span></div> <div class="button" @click="refresh()">
<div class="button" @click="tab(2)"><span v-bind:class="{active:currentTab==2}">关注</span></div> <span v-if="!isRefresh" :class="{active:currentTab===1}">首页</span>
<div class="button" @click="tab(3)"><img src="../../assets/img/icon/add.svg" alt=""></div> <img v-else src="../../assets/img/icon/refresh.png" alt="" class="refresh">
<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> </div>
<div class="button" @click="tab(2)"><span :class="{active:currentTab===2}">关注</span></div>
<div class="button" @click="tab(3)">
<div class="add-ctn">
<div class="add-one"></div>
<div class="add-two"></div>
<img src="../../assets/img/icon/add.svg" alt="" class="add">
</div>
</div>
<div class="button" @click="tab(4)"><span :class="{active:currentTab===4}">消息</span></div>
<div class="button" @click="tab(5)"><span :class="{active:currentTab===5}">我</span></div>
</div>
</template> </template>
<script> <script>
@ -14,28 +24,39 @@
props: ['initTab'], props: ['initTab'],
data() { data() {
return { return {
isRefresh:false,
currentTab: this.initTab currentTab: this.initTab
} }
}, },
methods: { methods: {
tab(index) { tab(index) {
this.currentTab = index; this.currentTab = index
console.log(index);
switch (index) { switch (index) {
case 1: case 1:
this.$router.push('/'); this.$router.push('/')
break; break
case 2: case 2:
this.$router.push('/attention'); this.$router.push('/attention')
break; break
case 3: case 3:
break; break
case 4: case 4:
this.$router.push('/message'); this.$router.push('/message')
break; break
case 5: case 5:
this.$router.push('/user'); this.$router.push('/user')
break; break
}
},
refresh() {
if (location.hash === '#/') {
this.isRefresh = !this.isRefresh
setTimeout(() => {
this.isRefresh = false
}, 2000)
} else {
this.currentTab = 1
this.$router.push('/')
} }
} }
} }
@ -45,34 +66,92 @@
<style scoped lang="scss"> <style scoped lang="scss">
.footer { .footer {
font-size: 1.8rem;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: 40px; height: 60px;
border-top: 1px solid #7b7878; border-top: 1px solid #7b7878;
z-index: 2; z-index: 2;
/*top: 600px;*/ /*top: 600px;*/
background: #020202b3; background: #020202b3;
color: white; color: white;
display: flex;
//justify-content: space-between;
.button { .button {
width: 20%; width: 20%;
/*height: 35px;*/ display: flex;
float: left; justify-content: center;
text-align: center; align-items: center;
margin-top: 8px;
span { .refresh {
border-bottom: 0px solid white; width: 25%;
padding-bottom: 5px; animation: rotate .8s linear infinite;
} }
.active {
border-bottom: 2px solid white; @keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
} }
img {
height: 15px; 45% {
background: white; -webkit-transform: rotate(-180deg);
padding: 5px 15px; }
55% {
-webkit-transform: rotate(-180deg);
}
100% {
-webkit-transform: rotate(-360deg);
}
}
.add-ctn {
width: 70%;
height: 55%;
//background: white;
position: relative;
display: flex;
justify-content: center;
.add-one {
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, #59dcdf, #ff5f75);
border-radius: 5px; border-radius: 5px;
} }
.add-two {
border-radius: 5px;
position: relative;
width: 90%;
height: 100%;
background: white;
}
img {
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
position: absolute;
width: 50%;
height: 50%;
} }
} }
span {
opacity: .7;
&.active {
opacity: 1;
}
}
}
}
</style> </style>

193
src/components/common/Music.vue Normal file
View File

@ -0,0 +1,193 @@
<template>
<div class='Music'>
<header class="pl15p pr15p pt20p">
<div class="top pb20p d-flex justify-content-between">
<img src="../../assets/img/icon/next.svg" alt="" @click="back()">
<img src="../../assets/img/icon/share.svg" alt="">
</div>
<div class="bottom">
<img class="logo" src="../../assets/img/poster/src1-bg.png" alt="">
<div class="info">
<div class="name">MT创作的原声</div>
<div class="user">NT ></div>
<div class="peoples">1人使用</div>
<div class="collection">
<img src="../../assets/img/icon/collect-white.svg" alt="">
<span>收藏</span>
</div>
</div>
</div>
</header>
<div class="content">
<div class="tabs">
<div class="tab active" @click="toggleTab($event,0)">热门</div>
<div class="tab" @click="toggleTab($event,1)">最新</div>
</div>
<div class="video-container" v-for="(item,index) of videos" v-bind:style="{'height':width/3*1.2+'px'}">
<video src="../../assets/video/吴三二的光年之外.mp4" poster="../../assets/img/poster/src1-bg.png"></video>
<div class="no" v-if="index===1||index===2">
NO. <span>{{index+1}}</span>
</div>
<span v-if="index===0" class="first">首发</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Music",
components: {},
data() {
return {
videos: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
}
},
created() {
},
computed: {},
methods: {
toggleTab(e, index) {
if (!e.target.classList.contains('active')) {
e.target.classList.toggle('active')
}
if (index === 1) {
let pre = e.target.previousElementSibling
pre.classList.remove('active')
} else {
let pre = e.target.nextElementSibling
pre.classList.remove('active')
}
},
back() {
window.history.back()
}
}
}
</script>
<style scoped lang='scss'>
.Music {
header {
background: #454b66;
padding-bottom: 30px;
.top {
img {
width: 20px;
height: 20px;
&:nth-child(1) {
transform: rotate(180deg);
}
}
}
.bottom {
display: flex;
height: 120px;
.logo {
width: 120px;
height: 100%;
border-radius: 4px;
}
.info {
margin-left: 15px;
display: flex;
flex-direction: column;
justify-content: space-between;
.name {
font-size: 18px;
color: #fff;
font-weight: bold;
margin-bottom: 10px;
}
.user, .peoples {
margin-bottom: 5px;
color: #999999;
}
.collection {
display: flex;
justify-content: center;
height: 25px;
width: 80px;
align-items: center;
color: #ffffff;
background: #999;
border-radius: 2px;
img {
margin-right: 10px;
width: 15px;
height: 15px;
}
}
}
}
}
.content {
.tabs {
height: 40px;
display: flex;
align-items: center;
color: #fff;
.tab {
height: 90%;
width: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 10px;
&.active {
border-bottom: 3px solid yellow;
}
}
}
.video-container {
width: 33%;
float: left;
position: relative;
overflow: hidden;
border: .5px solid black;
video {
width: 100%;
}
.first {
padding: 0 5px;
border-radius: 4px;
position: absolute;
top: 10px;
left: 10px;
background: yellow;
}
.no {
position: absolute;
color: #bdbdbd;
bottom: 10px;
right: 10px;
font-style: italic;
span {
color: #ffffff;
font-size: 20px;
}
}
}
}
}
</style>

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

@ -3,7 +3,7 @@
<div class="comment f14" v-if="isCommenting"> <div class="comment f14" v-if="isCommenting">
<div class="title mt10p"> <div class="title mt10p">
<p>2.7w条评论</p> <p>2.7w条评论</p>
<img src="../../assets/img/icon/close.svg" @click.stop="$emit('showComment')"> <img src="../../assets/img/icon/close.svg" @click.stop="$emit('update:is-commenting',false)">
</div> </div>
<div class="items"> <div class="items">
<div class="item pl5p pr15p mb5p oh"> <div class="item pl5p pr15p mb5p oh">

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

@ -1,419 +0,0 @@
<template>
<div id="home">
<swiper :options="swiperOptionh" :style="{'height':otherUserHeight+'px'}">
<swiper-slide>
<swiper :options="swiperOptionv">
<swiper-slide v-for="(item,index) in data">
<div class="bg-video" v-bind:style="{'height':height+'px'}">
<video :src="item.videoUrl" :poster="item.poster" ref="video" :autoplay="index == 0" loop>
<p> 您的浏览器不支持 video 标签。</p>
</video>
<div class="float" @click="togglePlayVideo($event)">
<transition name="pause">
<img src="../../assets/img/icon/play.svg" class="pause" v-show="!isPlaying"
@click.stop="togglePlayVideo($event)">
</transition>
<div class="toolbar mb10p">
<img src="../../assets/img/icon/head-image.jpeg" alt="" class="head-image mb15p">
<div class="love mb15p" @click.stop="loved($event,index)">
<div>
<transition name="love">
<img src="../../assets/img/icon/love.svg" class="love-image"
v-if="!item.isLoved">
<img src="../../assets/img/icon/loved.svg" class="love-image"
v-if="item.isLoved">
</transition>
<transition name="loved">
</transition>
</div>
<span class="f14">{{item.loves}}</span>
</div>
<div class="message mb15p" @click.stop="showComment">
<img src="../../assets/img/icon/message.svg" alt="" class="message-image">
<span class="f14">{{item.comments}}</span>
</div>
<div class="share mb35p" @click.stop="showShare">
<img src="../../assets/img/icon/share.svg" alt="" class="share-image">
<span class="f14">{{item.shared}}</span>
</div>
<img src="../../assets/img/icon/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/icon/music.svg" alt="" class="music-image">
<marquee behavior=scroll direction=left align=middle scrollamount=4> 吴三二 -
光年之外
</marquee>
</div>
</div>
</div>
</div>
</swiper-slide>
</swiper>
<Comment v-bind:is-commenting="isCommenting"
v-on:showComment='isCommenting = !isCommenting'
ref="comment"
:style="{'top':height-commentHeight+'px'}"/>
<Share v-bind:is-sharing="isSharing" ref="share" :style="{'top':height-shareHeight+'px'}"/>
<Footer v-bind:init-tab="1" ref="footer" :style="{'top':height-footerHeight+'px'}"/>
</swiper-slide>
<swiper-slide>
<Other ref="other"/>
</swiper-slide>
</swiper>
</div>
</template>
<script>
import Comment from './Comment';
import Other from '../user/Other';
import Message from '../message/Message';
import Share from './Share';
import Footer from '../common/Footer';
import {swiper, swiperSlide} from 'vue-awesome-swiper';
require('swiper/dist/css/swiper.css'); //注意这里
let self = null;
export default {
name: "Home",
components: {
Comment,
Share,
Footer,
Message,
Other,
swiper,
swiperSlide
},
data() {
return {
currentPlayIndex: 0,
isPlaying: true,
isCommenting: false,
isSharing: false,
height: 0,
width: 0,
otherUserHeight: 0,
footerHeight: 0,
commentHeight: 0,
shareHeight: 0,
data: [
{
videoUrl: require('../../assets/video/吴三二的光年之外.mp4'),
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
videoPoster: require('../../assets/img/poster/src1-bg.png'),
isLoved: false,
loves: 1234,
comments: 666,
shared: 999
},
{
videoUrl: require('../../assets/video/src1.mp4'),
videoPoster: require('../../assets/img/poster/src1-bg.png'),
isLoved: false,
loves: 1234,
comments: 666,
shared: 999
}
],
swiperOptionh: {
direction: 'horizontal',
height: document.body.clientHeight,
width: document.body.clientWidth,
// autoHeight: true, //高度随内容变化
on: {
slideChange: function () {
window.scrollTo(0, 0);
self.isCommenting = false;
self.isSharing = false;
if (self.isPlaying) {
let currentVideo = self.$refs.video[self.currentPlayIndex];
currentVideo.pause();
self.isPlaying = false;
}
if (this.activeIndex == 0 ) {
if (!self.isPlaying){
let currentVideo = self.$refs.video[self.currentPlayIndex];
currentVideo.play();
self.isPlaying = true;
}
}
},
},
},
swiperOptionv: {
direction: 'vertical',
height: document.body.clientHeight,
width: document.body.clientWidth,
// autoHeight: true, //高度随内容变化
on: {
slideChange() {
self.isCommenting = false;
self.isSharing = false;
let dateLength = self.data.length;
let index = self.currentPlayIndex = this.activeIndex;
console.log(index);
console.log(dateLength)
let currentVideo = self.$refs.video[index];
self.isPlaying = true;
currentVideo.currentTime = 0;
// console.log(currentVideo);
currentVideo.play();
if (index == 0) {
let nextVideo = self.$refs.video[index + 1];
nextVideo.pause();
} else if (index == dateLength - 1) {
let preVideo = self.$refs.video[index - 1];
preVideo.pause();
} else {
let nextVideo = self.$refs.video[index + 1];
nextVideo.pause();
let preVideo = self.$refs.video[index - 1];
preVideo.pause();
}
if (index + 2 > dateLength) {
self.data.push(
{
videoUrl: require('../../assets/video/src1.mp4'),
videoPoster: require('../../assets/img/poster/src1-bg.png'),
isLoved: false,
loves: 1234,
comments: 666,
shared: 999
}
)
}
console.log(self.data);
},
touchStart(event) {
// console.log();
// event.stopPropagation();
// self.isCommenting = false;
// self.isSharing = false;
}
},
}
}
},
methods: {
togglePlayVideo(e) {
console.log('1');
console.log(this.isCommenting)
console.log(this.isSharing);
// return;
if (this.isSharing) {
this.isSharing = false;
return;
}
if (this.isCommenting) {
this.isCommenting = false;
return;
}
// console.log(e);
let el = e.target;
// console.log(el)
// console.log(el.nodeName);
let video = '';
if (el.nodeName == 'IMG') {
video = el.parentNode.previousSibling;
} else {
video = el.previousSibling;
}
if (video.paused) {
video.play();
} else {
video.pause();
}
this.isPlaying = !video.paused;
// this.isPlaying = !this.isPlaying;
},
showComment() {
this.isCommenting = !this.isCommenting;
setTimeout(() => {
let comment = this.$refs.comment.$el;
this.commentHeight = comment.offsetHeight;
console.log(this.commentHeight);
console.log(this.height);
}, 50);
},
showShare() {
this.isSharing = !this.isSharing;
setTimeout(() => {
let share = this.$refs.share.$el;
this.shareHeight = share.offsetHeight;
console.log(this.shareHeight);
console.log(this.height);
}, 50);
},
loved(e, index) {
let img = e.target.parentNode.childNodes[0];
console.log(img);
console.log(index);
this.data[index].isLoved = !this.data[index].isLoved;
}
},
created() {
self = this;
window.scrollTo(0, 0);
this.height = document.body.clientHeight;
this.width = document.body.clientWidth;
},
mounted() {
window.scrollTo(0, 0);
let other = this.$refs.other.$el;
let footer = this.$refs.footer.$el;
// let share = this.$refs.share.$el;
this.otherUserHeight = other.offsetHeight;
if (this.otherUserHeight < this.height) {
this.otherUserHeight = this.height;
}
this.footerHeight = footer.offsetHeight;
}
}
</script>
<style scoped lang="scss">
#home {
.bg-video {
position: relative;
background: black;
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: 35px;
right: 20px;
color: #fff;
div {
text-align: center;
}
img {
width: 90%;
height: 90%;
}
.head-image, .music {
width: 100%;
height: 100%;
border-radius: 50%;
}
.love {
img {
}
}
.loved {
background: red;
}
.music {
animation: animations 4s linear forwards infinite;
}
@keyframes animations {
0% {
transform: rotate(0deg);;
}
100% {
transform: rotate(360deg);
}
}
}
.content {
color: #fff;
position: absolute;
bottom: 35px;
width: 75%;
.music {
position: relative;
width: 60%;
.music-image {
width: 20px;
height: 20px;
margin-top: 3px;
position: absolute;
}
marquee {
margin-left: 30px;
}
}
}
}
}
}
.pause-enter-active {
transition: all .3s ease;
}
.pause-leave-active {
/*transition: all 1s ease ;*/
}
.pause-enter, .pause-leave-to {
transform: scale(2);
opacity: 0;
}
.love-enter-active {
transition: all .3s ease;
}
.love-leave-active {
transition: all .3s ease;
}
.love-leave-to {
transform: scale(2);
opacity: 0;
}
.loved-enter-active {
transition: all .3s ease;
}
.loved-leave-active {
transition: all .3s ease;
}
.loved-leave-to {
opacity: 0;
}
</style>

40
src/components/home/Home2.vue
View File

@ -20,7 +20,7 @@
@click.stop="togglePlayVideo($event)"> @click.stop="togglePlayVideo($event)">
</transition> </transition>
<div class="toolbar mb10p"> <div class="toolbar mb10p">
<img src="../../assets/img/icon/head-image.jpeg" alt="" class="head-image mb15p"> <img src="../../assets/img/icon/head-image.jpeg" alt="" class="head-image mb15p" @click.stop="goUserInfo(item)">
<div class="love mb15p" @click.stop="loved($event,index)"> <div class="love mb15p" @click.stop="loved($event,index)">
<div> <div>
<transition name="love"> <transition name="love">
@ -43,14 +43,14 @@
<img src="../../assets/img/icon/share.svg" alt="" class="share-image"> <img src="../../assets/img/icon/share.svg" alt="" class="share-image">
<span class="f14">{{item.shared}}</span> <span class="f14">{{item.shared}}</span>
</div> </div>
<img src="../../assets/img/icon/head-image.jpeg" alt="" class="music"> <img src="../../assets/img/icon/head-image.jpeg" alt="" class="music" @click.stop="goMusic()">
</div> </div>
<div class="content ml10p"> <div class="content ml10p" @click.stop="goUserInfo()">
<div class="name mb10p" >@TTentau</div> <div class="name mb10p" >@TTentau</div>
<div class="description mb10p"> <div class="description mb10p">
吴三二的光年之外, 您的浏览器不支持 video 标签。 您的浏览器不支持 video 标签。 吴三二的光年之外, 您的浏览器不支持 video 标签。 您的浏览器不支持 video 标签。
</div> </div>
<div class="music mb10p"> <div class="music mb10p" @click.stop="goMusic()">
<img src="../../assets/img/icon/music.svg" alt="" class="music-image"> <img src="../../assets/img/icon/music.svg" alt="" class="music-image">
<marquee behavior=scroll direction=left align=middle scrollamount=4> 吴三二 - <marquee behavior=scroll direction=left align=middle scrollamount=4> 吴三二 -
光年之外 光年之外
@ -61,12 +61,12 @@
</div> </div>
</div> </div>
</div> </div>
<Comment v-bind:is-commenting="isCommenting" v-on:showComment='isCommenting = !isCommenting' ref="comment"/> <Comment v-bind:is-commenting.sync="isCommenting"/>
<Share v-bind:is-sharing="isSharing" ref="share"/> <Share v-bind:is-sharing.sync="isSharing" ref="share"/>
<Footer v-bind:init-tab="1"/> <Footer v-bind:init-tab="1"/>
</div> </div>
<div class="right-container swiper-item"> <div class="right-container swiper-item">
<Other ref="other"/> <Other ref="other" @back="backVideoList"/>
</div> </div>
</div> </div>
</div> </div>
@ -121,7 +121,7 @@
moveXDistance: 0, moveXDistance: 0,
moveYDistance: 0, moveYDistance: 0,
judgeValue: 30, judgeValue: 10,
startTime: 0, startTime: 0,
currentIndex: 0, currentIndex: 0,
@ -149,6 +149,9 @@
this.width = document.body.clientWidth this.width = document.body.clientWidth
}, },
methods: { methods: {
goMusic(){
this.$router.push('/music')
},
checkDirection() { checkDirection() {
if (!this.isNeedCheck) { if (!this.isNeedCheck) {
return return
@ -335,6 +338,7 @@
videos[this.currentIndex - 1].pause() videos[this.currentIndex - 1].pause()
} }
videos[this.currentIndex].play() videos[this.currentIndex].play()
videos[this.currentIndex].muted = false
videos[this.currentIndex + 1].pause() videos[this.currentIndex + 1].pause()
@ -369,24 +373,20 @@
//展示评论 //展示评论
showComment() { showComment() {
this.isCommenting = !this.isCommenting this.isCommenting = !this.isCommenting
// setTimeout(() => {
// let comment = this.$refs.comment.$el;
// this.commentHeight = comment.offsetHeight;
// console.log(this.commentHeight);
// console.log(this.height);
// }, 50);
}, },
showShare() { showShare() {
this.isSharing = !this.isSharing this.isSharing = !this.isSharing
// setTimeout(() => {
// let share = this.$refs.share.$el;
// this.shareHeight = share.offsetHeight;
// console.log(this.shareHeight);
// console.log(this.height);
// }, 50);
}, },
loved(e, index) { loved(e, index) {
this.data[index].isLoved = !this.data[index].isLoved this.data[index].isLoved = !this.data[index].isLoved
},
//前往用户中心
goUserInfo(item){
this.wrapperLeft = '-100%'
},
//返回视频列表
backVideoList(){
this.wrapperLeft = '0'
} }
}, },
created() { created() {

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

@ -108,7 +108,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="dismiss"> <div class="dismiss" @click="closeShare()">
取消 取消
</div> </div>
</div> </div>
@ -118,12 +118,23 @@
<script> <script>
export default { export default {
name: "Share", name: "Share",
props:['isSharing'] props: ['isSharing'],
methods: {
closeShare() {
this.$emit("update:is-sharing", false)
// this.isSharing = false
console.log('关闭')
}
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.w200 {
width: 200%;
}
.share { .share {
position: fixed; position: fixed;
/*top: 200px;*/ /*top: 200px;*/
@ -132,27 +143,34 @@
z-index: 5; z-index: 5;
background: #eaeaea; background: #eaeaea;
border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0;
.friends { .friends {
overflow-x: scroll; overflow-x: scroll;
.friend { .friend {
float: left; float: left;
img { img {
width: 40px; width: 40px;
height: 40px; height: 40px;
border-radius: 50%; border-radius: 50%;
} }
span { span {
display: block; display: block;
text-align: center; text-align: center;
} }
} }
} }
.shares { .shares {
background: white; background: white;
overflow-x: scroll; overflow-x: scroll;
.share-to { .share-to {
float: left; float: left;
width: 50px; width: 50px;
img { img {
width: 27px; width: 27px;
height: 27px; height: 27px;
@ -160,18 +178,22 @@
border-radius: 50%; border-radius: 50%;
background: #1ace04; background: #1ace04;
} }
span { span {
display: block; display: block;
text-align: center; text-align: center;
} }
} }
} }
.toolbar { .toolbar {
border-top: 1px solid #eaeaea; border-top: 1px solid #eaeaea;
background: white; background: white;
overflow-x: scroll; overflow-x: scroll;
.tool { .tool {
float: left; float: left;
img { img {
width: 22px; width: 22px;
height: 22px; height: 22px;
@ -179,12 +201,14 @@
border-radius: 50%; border-radius: 50%;
background: #eaeaea; background: #eaeaea;
} }
span { span {
display: block; display: block;
text-align: center; text-align: center;
} }
} }
} }
.dismiss { .dismiss {
background: white; background: white;
border-top: 1px solid #eaeaea; border-top: 1px solid #eaeaea;

26
src/components/home/index.vue Normal file
View File

@ -0,0 +1,26 @@
<template>
<div class='index'>
</div>
</template>
<script>
export default {
name: "index",
components: {},
data() {
return {}
},
created() {
},
computed: {},
methods: {}
}
</script>
<style scoped lang='scss'>
.index {
}
</style>

7
src/components/user/Me.vue
View File

@ -4,7 +4,7 @@
<!--<div class="header" v-bind:style="{height:height/2+'px'}">--> <!--<div class="header" v-bind:style="{height:height/2+'px'}">-->
<div class="header"> <div class="header">
<div class="top pt20p pl10p pr10p"> <div class="top pt20p pl10p pr10p">
<img src="../../assets/img/icon/next.svg" alt=""> <img src="../../assets/img/icon/next.svg" alt="" class="d-none">
<img src="../../assets/img/icon/more.svg" alt=""> <img src="../../assets/img/icon/more.svg" alt="">
</div> </div>
<div class="bottom"> <div class="bottom">
@ -78,7 +78,7 @@
</div> </div>
</div> </div>
<div class="content oh"> <div class="content oh">
<div class="video-container" v-for="item of videos" v-bind:style="{'height':width/3*1.2+'px'}"> <div class="video-container" v-for="(item,index) of videos" :key="index" v-bind:style="{'height':width/3*1.2+'px'}">
<video src="../../assets/video/吴三二的光年之外.mp4" poster="../../assets/img/poster/src1-bg.png"></video> <video src="../../assets/video/吴三二的光年之外.mp4" poster="../../assets/img/poster/src1-bg.png"></video>
<div class="love"> <div class="love">
<img src="../../assets/img/icon/love.svg" alt=""> <img src="../../assets/img/icon/love.svg" alt="">
@ -108,7 +108,6 @@
} }
}, },
created() { created() {
self = this;
this.height = document.body.clientHeight; this.height = document.body.clientHeight;
this.width = document.body.clientWidth; this.width = document.body.clientWidth;
}, },
@ -126,7 +125,7 @@
/*height: 30%;*/ /*height: 30%;*/
height: 100px; height: 100px;
display: flex; display: flex;
justify-content: space-between; justify-content: flex-end;
background: url("../../assets/img/icon/top-bg.jpg"); background: url("../../assets/img/icon/top-bg.jpg");
img { img {
border-radius: 50%; border-radius: 50%;

57
src/components/user/Other.vue
View File

@ -4,7 +4,7 @@
<!--<div class="header" v-bind:style="{height:height/2+'px'}">--> <!--<div class="header" v-bind:style="{height:height/2+'px'}">-->
<div class="header"> <div class="header">
<div class="top pt20p pl10p pr10p"> <div class="top pt20p pl10p pr10p">
<img src="../../assets/img/icon/next.svg" alt=""> <img src="../../assets/img/icon/next.svg" alt="" @click="$emit('back')">
<img src="../../assets/img/icon/more.svg" alt=""> <img src="../../assets/img/icon/more.svg" alt="">
</div> </div>
<div class="bottom"> <div class="bottom">
@ -64,13 +64,13 @@
</div> </div>
</div> </div>
<div class="tabset"> <div class="tabset">
<div class="tab active"> <div class="tab active" @click="toggleTab($event,0)">
<span>作品1</span> <span>作品1</span>
</div> </div>
<div class="tab"> <div class="tab" @click="toggleTab($event,1)">
<span>动态6</span> <span>动态6</span>
</div> </div>
<div class="tab"> <div class="tab" @click="toggleTab($event,2)">
<span>喜欢6</span> <span>喜欢6</span>
</div> </div>
</div> </div>
@ -91,7 +91,7 @@
</template> </template>
<script> <script>
import Footer from '../common/Footer'; import Footer from '../common/Footer'
export default { export default {
name: "Other", name: "Other",
@ -106,8 +106,17 @@
} }
}, },
created() { created() {
this.height = window.screen.height; this.height = window.screen.height
this.width = window.screen.width; this.width = window.screen.width
},
methods: {
toggleTab(e, index) {
let childNodes = e.target.parentElement.childNodes
childNodes.forEach(function (item) {
item.classList.remove('active')
})
e.target.classList.add('active')
},
} }
} }
</script> </script>
@ -115,25 +124,30 @@
<style scoped lang="scss"> <style scoped lang="scss">
.me { .me {
color: white; color: white;
.header { .header {
background: gray; background: gray;
.top { .top {
/*height: 30%;*/ /*height: 30%;*/
height: 100px; height: 100px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
background: url("../../assets/img/icon/top-bg.jpg"); background: url("../../assets/img/icon/top-bg.jpg");
img { img {
border-radius: 50%; border-radius: 50%;
padding: 5px; padding: 5px;
background: #524a4a; background: #524a4a;
height: 20px; height: 20px;
width: 20px; width: 20px;
&:nth-child(1) { &:nth-child(1) {
transform: rotate(180deg); transform: rotate(180deg);
} }
} }
} }
.bottom { .bottom {
background-image: url("../../assets/img/icon/head-image.jpeg"); background-image: url("../../assets/img/icon/head-image.jpeg");
background-position: center; background-position: center;
@ -144,6 +158,7 @@
height: 100%; height: 100%;
background-color: #2e3244ed; background-color: #2e3244ed;
position: relative; position: relative;
.head { .head {
width: 100%; width: 100%;
right: 10px; right: 10px;
@ -152,6 +167,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.head-image { .head-image {
background: black; background: black;
padding: 5px; padding: 5px;
@ -159,6 +175,7 @@
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
.my-buttons { .my-buttons {
div { div {
display: flex; display: flex;
@ -167,10 +184,12 @@
border-radius: 2px; border-radius: 2px;
background: #676767; background: #676767;
margin-right: 5px; margin-right: 5px;
img { img {
padding: 6px; padding: 6px;
height: 20px; height: 20px;
} }
span { span {
color: #cdcdcd; color: #cdcdcd;
} }
@ -178,26 +197,33 @@
} }
} }
.description { .description {
margin-top: 60px; margin-top: 60px;
color: white; color: white;
.number { .number {
padding-bottom: 10px; padding-bottom: 10px;
border-bottom: 1px solid gray; border-bottom: 1px solid gray;
.jrtt { .jrtt {
float: right; float: right;
img { img {
height: 10px; height: 10px;
width: 10px; width: 10px;
} }
span { span {
margin: 0 5px; margin: 0 5px;
} }
} }
} }
.info { .info {
display: flex; display: flex;
align-items: center; align-items: center;
div { div {
display: flex; display: flex;
align-items: center; align-items: center;
@ -206,38 +232,46 @@
background: #676767; background: #676767;
margin-right: 5px; margin-right: 5px;
padding: 2px 4px; padding: 2px 4px;
img { img {
height: 10px; height: 10px;
margin-right: 3px; margin-right: 3px;
} }
span { span {
color: #cdcdcd; color: #cdcdcd;
} }
} }
} }
.heat { .heat {
span { span {
margin-right: 10px; margin-right: 10px;
} }
} }
} }
.tabset { .tabset {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
.tab { .tab {
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
text-align: center; text-align: center;
width: 30%; width: 30%;
}
.active { &.active {
border-bottom: 2px solid gold; border-bottom: 2px solid gold;
} }
} }
}
} }
} }
}
}
.content { .content {
.video-container { .video-container {
width: 33%; width: 33%;
@ -245,15 +279,18 @@
position: relative; position: relative;
overflow: hidden; overflow: hidden;
border: .5px solid black; border: .5px solid black;
video { video {
width: 100%; width: 100%;
} }
.love { .love {
position: absolute; position: absolute;
bottom: 10px; bottom: 10px;
left: 10px; left: 10px;
display: flex; display: flex;
align-items: center; align-items: center;
img { img {
height: 20px; height: 20px;
} }

21
src/main.js
View File

@ -1,29 +1,32 @@
import Vue from 'vue' import Vue from 'vue'
import App from './App.vue' import App from './App.vue'
import VueRouter from 'vue-router' import VueRouter from 'vue-router'
import './assets/scss/index.scss'
import Home2 from './components/home/Home2.vue' import Home2 from './components/home/Home2.vue'
import Home from './components/home/Home.vue'
import Attention from './components/attention/Attention.vue' import Attention from './components/attention/Attention.vue'
import Message from './components/message/Message.vue' import Message from './components/message/Message.vue'
import Me from './components/user/Me.vue' import Me from './components/user/Me.vue'
import Music from './components/common/Music.vue'
import countryChoose from "./pages/login/countryChoose"
Vue.config.productionTip = false; Vue.config.productionTip = false
// Vue.use(VueAwesomeSwiper, /* { default global options } */) Vue.use(VueRouter)
Vue.use(VueRouter);
const router = new VueRouter({ const router = new VueRouter({
mode: 'history', mode: 'hash',
routes: [ routes: [
{path: '', component: Home2}, // {path: '', component: Music},
{ path: '/', component: Home2 }, { path: '/', component: Home2 },
{path: '/home', component: Home}, { path: '/home', component: Home2 },
{ path: '/attention', component: Attention }, { path: '/attention', component: Attention },
{ path: '/message', component: Message }, { path: '/message', component: Message },
{ path: '/user', component: Me }, { path: '/user', component: Me },
{ path: '/music', component: Music },
{ path: '/countryChoose', component: countryChoose },
] ]
}); })
new Vue({ new Vue({
render: h => h(App), render: h => h(App),
router router
}).$mount('#app'); }).$mount('#app')

2538
src/pages/login/countryChoose.vue Normal file
View File

File diff suppressed because it is too large Load Diff

11
vue.config.js
View File

@ -2,6 +2,15 @@
module.exports = { module.exports = {
// 选项... // 选项...
publicPath: process.env.NODE_ENV === 'production' ? '' : '', publicPath: process.env.NODE_ENV === 'production' ? '' : '',
assetsDir: './',//资源路径 assetsDir: '',//资源路径
outputDir: process.env.outputDir,//打包输出路径 outputDir: process.env.outputDir,//打包输出路径
// configureWebpack: config => {
// config.externals = {
// "vue": "Vue",
// "vue-router": "VueRouter",
// }
// },
// 是否为生产环境构建生成 source map
productionSourceMap: false,
css: {},
} }