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-22 02:33:21 +08:00
parent 839afe9892
commit e9a68b28aa
14 changed files with 607 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
package-lock.json generated
View File

@ -3897,6 +3897,15 @@
}
}
},
"dom7": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.2.tgz",
"integrity": "sha512-cGwWtpu7KY3JnbREGqG4EGC/u+1hyLfWVMqrqRjmwiO8d5i4B+0imLZAQ/cJbiXnjbs0pdIUzcUyeI9BbnyKNg==",
"dev": true,
"requires": {
"ssr-window": "^1.0.1"
}
},
"domain-browser": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@ -5169,14 +5178,12 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@ -5191,20 +5198,17 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"core-util-is": {
"version": "1.0.2",
@ -5321,8 +5325,7 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"ini": {
"version": "1.3.5",
@ -5334,7 +5337,6 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@ -5349,7 +5351,6 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@ -5357,14 +5358,12 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"minipass": {
"version": "2.2.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.1",
"yallist": "^3.0.0"
@ -5383,7 +5382,6 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@ -5464,8 +5462,7 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"object-assign": {
"version": "4.1.1",
@ -5477,7 +5474,6 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@ -5599,7 +5595,6 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@ -11292,6 +11287,12 @@
"tweetnacl": "~0.14.0"
}
},
"ssr-window": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-1.0.1.tgz",
"integrity": "sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg==",
"dev": true
},
"ssri": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz",
@ -11537,6 +11538,16 @@
"util.promisify": "~1.0.0"
}
},
"swiper": {
"version": "4.4.1",
"resolved": "https://registry.npmjs.org/swiper/-/swiper-4.4.1.tgz",
"integrity": "sha512-SONgpB1mFh++eFiUDOCggwW2ZzsWMEf3+SEROcQ+qXPYUnyD423l3uDsk+0jdo/a4pXeOJmH0oN3XK5maMqQyQ==",
"dev": true,
"requires": {
"dom7": "^2.1.2",
"ssr-window": "^1.0.1"
}
},
"table": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/table/-/table-4.0.2.tgz",
@ -12228,6 +12239,16 @@
"resolved": "https://registry.npmjs.org/vue/-/vue-2.5.17.tgz",
"integrity": "sha512-mFbcWoDIJi0w0Za4emyLiW72Jae0yjANHbCVquMKijcavBGypqlF7zHRgMa5k4sesdv7hv2rB4JPdZfR+TPfhQ=="
},
"vue-awesome-swiper": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-3.1.3.tgz",
"integrity": "sha512-E7suzkyApO8vNZbgdEnjSmnpsmQZyRvSVXJ7sey3XYwKPOkLhH3+GnHroBw+5PZIQXvWBwdCeQsPG1xQ1r1Rhg==",
"dev": true,
"requires": {
"object-assign": "^4.1.1",
"swiper": "^4.0.7"
}
},
"vue-eslint-parser": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz",

6
package.json
View File

@ -5,7 +5,8 @@
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
"lint": "vue-cli-service lint",
"push": "git add ./ & git commit -m 'dubug' & git push origin master"
},
"dependencies": {
"vue": "^2.5.17",
@ -17,7 +18,8 @@
"@vue/cli-service": "^3.0.3",
"vue-template-compiler": "^2.5.17",
"node-sass": "^4.9.3",
"sass-loader": "^7.1.0"
"sass-loader": "^7.1.0",
"vue-awesome-swiper": "^3.1.3"
},
"eslintConfig": {
"root": true,

5
public/index.html
View File

@ -12,7 +12,10 @@
<title>抖音</title>
<style>
body,html{
height: 0!important;
width: 100%;
height: 100%;
background: #2e3244;
/*height: 0!important;*/
padding: 0;
margin: 0;
}

6
src/App.vue
View File

@ -175,4 +175,10 @@
.tac {
text-align: center;
}
.red {background: red;}
.gold {background: gold;}
.green {background: green;}
</style>

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 606 KiB

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

@ -3,7 +3,7 @@
<div class="items p10p">
<div class="item mb20p pb20p" v-for="item of items">
<div class="header mb10p">
<img src="../../assets/img/head-image.jpeg" alt="">
<img src="../../assets/img/icon/head-image.jpeg" alt="">
<span class="ml5p">TTentau</span>
</div>
<div class="my-comment mb10p">
@ -17,53 +17,53 @@
<div class="video-container mb10p ">
<video src="../../assets/video/吴三二的光年之外.mp4"></video>
<div class="music">
<img src="../../assets/img/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>
<img src="../../assets/img/play.svg" alt="" class="play">
<img src="../../assets/img/pause.svg" alt="" class="pause" v-if="false">
<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/location.svg" alt="">
<img src="../../assets/img/icon/location.svg" alt="">
<span class="ml5p">东方明珠</span>
</div>
<div class="toolbar mb10p">
<div class="item">
<img src="../../assets/img/love.svg" alt="">
<img src="../../assets/img/loved.svg" alt="" class="love-image" v-if="false">
<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/message.svg" alt="">
<img src="../../assets/img/icon/message.svg" alt="">
<span class="count">555</span>
</div>
<div class="item">
<img src="../../assets/img/love.svg" alt="">
<img src="../../assets/img/icon/love.svg" alt="">
<span class="count">555</span>
</div>
<div class="item">
<img src="../../assets/img/love.svg" alt="">
<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/head-image.jpeg" alt="" class="head-image 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/love-gray.svg" alt="" class="love-image">
<img src="../../assets/img/loved.svg" alt="" class="love-image" v-if="false">
<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"/>
<Footer v-bind:init-tab="2" ref="footer" :style="{'top':height-footerUserHeight+'px'}"/>
</div>
</template>
@ -80,8 +80,21 @@
return {
items:[
{},{},{}
]
],
height:0,
width:0,
footerHeight:0
}
},
created() {
self = this;
this.height = document.body.clientHeight;
this.width = document.body.clientWidth;
},
mounted() {
let footer = this.$refs.footer.$el;
this.footerUserHeight = footer.offsetHeight;
}
}
</script>

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

@ -2,7 +2,7 @@
<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(3)"><img src="../../assets/img/icon/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>
@ -34,7 +34,7 @@
this.$router.push('/message');
break;
case 5:
this.$router.push('/me');
this.$router.push('/user');
break;
}
}
@ -48,7 +48,7 @@
border-top: 1px solid #7b7878;
position: fixed;
z-index: 2;
bottom: 0;
top: 600px;
width: 100%;
background: #020202b3;
color: white;

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

@ -1,14 +1,14 @@
<template>
<transition name="comment">
<div class="comment f14" v-if="isCommenting">
<div class="title">
<div class="title mt10p">
<p>2.7w条评论</p>
<img src="../../assets/img/close.svg" @click.stop="$emit('showComment')">
<img src="../../assets/img/icon/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">
<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>
@ -16,13 +16,13 @@
</div>
</div>
<div class="love pull-right">
<img src="../../assets/img/love-gray.svg" alt="" class="love-image">
<img src="../../assets/img/icon/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">
<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>
@ -30,13 +30,13 @@
</div>
</div>
<div class="love pull-right">
<img src="../../assets/img/love-gray.svg" alt="" class="love-image">
<img src="../../assets/img/icon/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">
<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>
@ -44,13 +44,13 @@
</div>
</div>
<div class="love pull-right">
<img src="../../assets/img/love-gray.svg" alt="" class="love-image">
<img src="../../assets/img/icon/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">
<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>
@ -58,13 +58,13 @@
</div>
</div>
<div class="love pull-right">
<img src="../../assets/img/love-gray.svg" alt="" class="love-image">
<img src="../../assets/img/icon/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">
<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>
@ -72,13 +72,13 @@
</div>
</div>
<div class="love pull-right">
<img src="../../assets/img/love-gray.svg" alt="" class="love-image">
<img src="../../assets/img/icon/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">
<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>
@ -86,13 +86,13 @@
</div>
</div>
<div class="love pull-right">
<img src="../../assets/img/love-gray.svg" alt="" class="love-image">
<img src="../../assets/img/icon/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">
<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>
@ -100,7 +100,7 @@
</div>
</div>
<div class="love pull-right">
<img src="../../assets/img/love-gray.svg" alt="" class="love-image">
<img src="../../assets/img/icon/love-gray.svg" alt="" class="love-image">
<span class="f14 block">3453</span>
</div>
</div>
@ -130,9 +130,9 @@
<style lang="scss" scoped>
.comment {
position: fixed;
bottom: 0;
top: 200px;
background: #fff;
z-index: 3;
z-index: 5;
border-radius: 10px 10px 0 0;
.title {
position: relative;

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

@ -1,90 +1,192 @@
<template>
<div id="home">
<div class="bg-video" v-for="(item,index) in data">
<!--<video :src="data[0].videoUrl">-->
<video src="../../assets/video/吴三二的光年之外.mp4" >
您的浏览器不支持 video 标签。30
</video>
<div class="float" @click="togglePlayVideo($event)">
<transition name="pause">
<img src="../../assets/img/play.svg" class="pause" v-show="!isPlaying"
@click.stop="togglePlayVideo($event)">
</transition>
<div class="toolbar mb10p">
<img src="../../assets/img/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/love.svg" class="love-image" v-if="!item.isLoved">
<img src="../../assets/img/loved.svg" class="love-image" v-if="item.isLoved">
<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>
</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>
<span class="f14">{{item.loves}}</span>
</div>
<div class="message mb15p" @click.stop="isCommenting=!isCommenting">
<img src="../../assets/img/message.svg" alt="" class="message-image">
<span class="f14">{{item.comments}}</span>
</div>
<div class="share mb35p" @click.stop="isSharing=!isSharing">
<img src="../../assets/img/share.svg" alt="" class="share-image">
<span class="f14">{{item.shared}}</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>
<Comment v-bind:is-commenting="isCommenting" v-on:showComment='isCommenting=!isCommenting'/>
<Share v-bind:is-sharing="isSharing"/>
<Footer v-bind:init-tab="1"/>
</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
Footer,
Message,
Other,
swiper,
swiperSlide
},
data() {
return {
isPlaying: true,
isCommenting: false,
isSharing: false,
height: 0,
width: 0,
otherUserHeight: 0,
footerHeight: 0,
commentHeight: 0,
shareHeight: 0,
data: [
{
videoUrl: '../assets/video/吴三二的光年之外.mp4',
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: '../assets/video/吴三二的光年之外.mp4',
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 () {
self.isCommenting = false;
self.isSharing = false;
},
},
},
swiperOptionv: {
direction: 'vertical',
height: document.body.clientHeight,
width: document.body.clientWidth,
// autoHeight: true, //高度随内容变化
on: {
slideChange() {
let dateLength = self.data.length;
let index = 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: {
@ -118,6 +220,21 @@
},
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];
@ -126,12 +243,21 @@
this.data[index].isLoved = !this.data[index].isLoved;
}
},
created() {
// console.log(55)
self = this;
this.height = document.body.clientHeight;
this.width = document.body.clientWidth;
},
mounted() {
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>
@ -140,6 +266,7 @@
#home {
.bg-video {
position: relative;
background: black;
video {
width: 100%;
height: 100%;
@ -251,6 +378,7 @@
transform: scale(2);
opacity: 0;
}
.loved-enter-active {
transition: all .3s ease;
}

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

@ -5,35 +5,35 @@
<div class="title tac pb10p">私信给</div>
<div class="w200">
<div class="friend pr10p">
<img src="../../assets/img/head-image.jpeg" alt="">
<img src="../../assets/img/icon/head-image.jpeg" alt="">
<span>ttentau</span>
</div>
<div class="friend pr10p">
<img src="../../assets/img/head-image.jpeg" alt="">
<img src="../../assets/img/icon/head-image.jpeg" alt="">
<span>ttentau</span>
</div>
<div class="friend pr10p">
<img src="../../assets/img/head-image.jpeg" alt="">
<img src="../../assets/img/icon/head-image.jpeg" alt="">
<span>ttentau</span>
</div>
<div class="friend pr10p">
<img src="../../assets/img/head-image.jpeg" alt="">
<img src="../../assets/img/icon/head-image.jpeg" alt="">
<span>ttentau</span>
</div>
<div class="friend pr10p">
<img src="../../assets/img/head-image.jpeg" alt="">
<img src="../../assets/img/icon/head-image.jpeg" alt="">
<span>ttentau</span>
</div>
<div class="friend pr10p">
<img src="../../assets/img/head-image.jpeg" alt="">
<img src="../../assets/img/icon/head-image.jpeg" alt="">
<span>ttentau</span>
</div>
<div class="friend pr10p">
<img src="../../assets/img/head-image.jpeg" alt="">
<img src="../../assets/img/icon/head-image.jpeg" alt="">
<span>ttentau</span>
</div>
<div class="friend pr10p">
<img src="../../assets/img/next.svg" alt="">
<img src="../../assets/img/icon/next.svg" alt="">
<span>更多</span>
</div>
</div>
@ -42,27 +42,27 @@
<div class="title tac pb10p">分享到</div>
<div class="w200">
<div class="share-to pr10p">
<img src="../../assets/img/friend_circle.svg" alt="">
<img src="../../assets/img/icon/friend_circle.svg" alt="">
<span>朋友圈</span>
</div>
<div class="share-to pr10p">
<img src="../../assets/img/wechat.svg" alt="">
<img src="../../assets/img/icon/wechat.svg" alt="">
<span>微信</span>
</div>
<div class="share-to pr10p">
<img src="../../assets/img/sq-share-qqzone-01.svg">
<img src="../../assets/img/icon/sq-share-qqzone-01.svg">
<span>QQ空间</span>
</div>
<div class="share-to pr10p">
<img src="../../assets/img/QQ.svg">
<img src="../../assets/img/icon/QQ.svg">
<span>QQ</span>
</div>
<div class="share-to pr10p">
<img src="../../assets/img/sina.svg">
<img src="../../assets/img/icon/sina.svg">
<span>微博</span>
</div>
<div class="share-to pr10p">
<img src="../../assets/img/more.svg">
<img src="../../assets/img/icon/more.svg">
<span>更多</span>
</div>
</div>
@ -71,39 +71,39 @@
<div class="toolbar oh pl20p pr20p pt10p pb10p f11">
<div class="w200">
<div class="tool pr10p ">
<img src="../../assets/img/举报.svg" alt="">
<img src="../../assets/img/icon/举报.svg" alt="">
<span>举报</span>
</div>
<div class="tool pr10p ">
<img src="../../assets/img/download.svg" alt="">
<img src="../../assets/img/icon/download.svg" alt="">
<span>保存本地</span>
</div>
<div class="tool pr10p ">
<img src="../../assets/img/collect.svg" alt="">
<img src="../../assets/img/icon/collect.svg" alt="">
<span>收藏</span>
</div>
<div class="tool pr10p ">
<img src="../../assets/img/qiangjing.svg" alt="">
<img src="../../assets/img/icon/qiangjing.svg" alt="">
<span>抢镜</span>
</div>
<div class="tool pr10p">
<img src="../../assets/img/qr_code.svg" alt="">
<img src="../../assets/img/icon/qr_code.svg" alt="">
<span>二维码</span>
</div>
<div class="tool pr10p">
<img src="../../assets/img/dongtaibizhi.svg" alt="">
<img src="../../assets/img/icon/dongtaibizhi.svg" alt="">
<span>动态壁纸</span>
</div>
<div class="tool pr10p">
<img src="../../assets/img/hepai.svg" alt="">
<img src="../../assets/img/icon/hepai.svg" alt="">
<span>合拍</span>
</div>
<div class="tool pr10p">
<img src="../../assets/img/dislike.svg" alt="">
<img src="../../assets/img/icon/dislike.svg" alt="">
<span>不感兴趣</span>
</div>
<div class="tool pr10p">
<img src="../../assets/img/href.svg" alt="">
<img src="../../assets/img/icon/href.svg" alt="">
<span>复制链接</span>
</div>
</div>
@ -126,8 +126,8 @@
.share {
position: fixed;
bottom: 0;
z-index: 3;
top: 200px;
z-index: 5;
background: #eaeaea;
border-radius: 10px 10px 0 0;
.friends {

34
src/components/message/Message.vue
View File

@ -9,26 +9,26 @@
</div>
<div class="toolbar mt20p">
<div>
<img src="../../assets/img/person.svg" alt="">
<img src="../../assets/img/icon/person.svg" alt="">
<span>粉丝</span>
</div>
<div>
<img src="../../assets/img/love.svg" alt="">
<img src="../../assets/img/icon/love.svg" alt="">
<span>赞</span>
</div>
<div>
<img src="../../assets/img/person.svg" alt="">
<img src="../../assets/img/icon/person.svg" alt="">
<span>@我的</span>
</div>
<div>
<img src="../../assets/img/message.svg" alt="">
<img src="../../assets/img/icon/message.svg" alt="">
<span>评论</span>
</div>
</div>
<div class="messages mt20p">
<div class="message oh mt15p">
<div class="content pull-left ">
<img src="../../assets/img/head-image.jpeg" alt="" class="head-image 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">游戏小助手</div>
<div class="detail">抖出好游戏</div>
@ -40,7 +40,7 @@
</div>
<div class="message oh mt15p">
<div class="content pull-left ">
<img src="../../assets/img/head-image.jpeg" alt="" class="head-image 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">抖音小助手</div>
<div class="detail">抖音美好奇妙夜小贴士</div>
@ -52,7 +52,7 @@
</div>
<div class="message oh mt15p">
<div class="content pull-left ">
<img src="../../assets/img/head-image.jpeg" alt="" class="head-image 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>
@ -65,7 +65,7 @@
</div>
<p class="tac">无更多消息</p>
</div>
<Footer v-bind:init-tab="4"/>
<Footer v-bind:init-tab="4" ref="footer" :style="{'top':height-footerUserHeight+'px'}"/>
</div>
</template>
@ -78,11 +78,21 @@
Footer
},
data() {
return {}
return {
height:0,
width:0,
footerHeight:0
}
},
created() {
let height = window.screen.height;
console.log(height);
self = this;
this.height = document.body.clientHeight;
this.width = document.body.clientWidth;
},
mounted() {
let footer = this.$refs.footer.$el;
this.footerUserHeight = footer.offsetHeight;
}
}
</script>
@ -169,4 +179,4 @@
}
}
}
</style>
</style>

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

@ -77,7 +77,7 @@
</div>
</div>
</div>
<div class="content">
<div class="content oh">
<div class="video-container" v-for="item of videos" v-bind:style="{'height':width/3*1.2+'px'}">
<video src="../../assets/video/吴三二的光年之外.mp4"></video>
<div class="love">
@ -87,7 +87,7 @@
</div>
</div>
</div>
<Footer v-bind:init-tab="5"/>
<Footer v-bind:init-tab="5" ref="footer" :style="{'top':height-footerUserHeight+'px'}"/>
</div>
</template>
@ -101,14 +101,21 @@
},
data() {
return {
height: 0,
width: 0,
videos: [{},{},{},{}]
videos: [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
height:0,
width:0,
footerHeight:0
}
},
created() {
this.height = window.screen.height;
this.width = window.screen.width;
self = this;
this.height = document.body.clientHeight;
this.width = document.body.clientWidth;
},
mounted() {
let footer = this.$refs.footer.$el;
this.footerUserHeight = footer.offsetHeight;
}
}
</script>

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

@ -1,13 +1,264 @@
<template>
$END$
<div class="me">
<div class="container">
<!--<div class="header" v-bind:style="{height:height/2+'px'}">-->
<div class="header">
<div class="top pt20p pl10p pr10p">
<img src="../../assets/img/icon/next.svg" alt="">
<img src="../../assets/img/icon/more.svg" alt="">
</div>
<div class="bottom">
<div class="container pr10p pl10p pt10p">
<div class="head">
<img src="../../assets/img/icon/head-image.jpeg" class="head-image ml20p">
<div class="other-buttons" v-if="false">
<div class="attention">
关注
</div>
<div class="more-attention">
-
</div>
</div>
<div class="my-buttons ">
<div class="collect">
<img src="../../assets/img/icon/collect-white.svg" alt="">
<span class="mr5p">收藏</span>
</div>
<div class="add-friend">
<img src="../../assets/img/icon/add-friend-white.svg" alt="">
</div>
<div class="qr-code">
<img src="../../assets/img/icon/qr-code-white.svg" alt="">
</div>
</div>
</div>
<div class="description">
<p class="name f22 mt5p mb5p">ttentau</p>
<div class="number mb10p">
<span>抖音号：605128307</span>
<div class="jrtt">
<img src="../../assets/img/icon/sina.svg" alt="">
<span>头条主页</span>
<img src="../../assets/img/icon/next.svg" alt="">
</div>
</div>
<div class="signature f12 mb10p">
<span>填写个性签名更容易获得别人关注哦</span>
</div>
<div class="info f10 mb10p">
<div class="age">
<img src="../../assets/img/icon/person.svg" alt="">
<span>22岁</span>
</div>
<div class="location">
<span>上海</span>
</div>
<div class="school">
四川理工大学
</div>
</div>
<div class="heat mb10p">
<span>8获赞</span>
<span>38关注</span>
<span>42粉丝</span>
</div>
</div>
<div class="tabset">
<div class="tab active">
<span>作品1</span>
</div>
<div class="tab">
<span>动态6</span>
</div>
<div class="tab">
<span>喜欢6</span>
</div>
</div>
</div>
</div>
</div>
<div class="content oh">
<div class="video-container" v-for="item of videos" v-bind:style="{'height':width/3*1.2+'px'}">
<video src="../../assets/video/吴三二的光年之外.mp4"></video>
<div class="love">
<img src="../../assets/img/icon/love.svg" alt="">
<span class="ml5p">72.3w</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Footer from '../common/Footer';
export default {
name: "Other"
name: "Other",
components: {
Footer
},
data() {
return {
height: 0,
width: 0,
videos: [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
}
},
created() {
this.height = window.screen.height;
this.width = window.screen.width;
}
}
</script>
<style scoped>
<style scoped lang="scss">
.me {
color: white;
.header {
background: gray;
.top {
/*height: 30%;*/
height: 100px;
display: flex;
justify-content: space-between;
background: url("../../assets/img/icon/top-bg.jpg");
img {
border-radius: 50%;
padding: 5px;
background: #524a4a;
height: 20px;
width: 20px;
&:nth-child(1) {
transform: rotate(180deg);
}
}
}
.bottom {
background-image: url("../../assets/img/icon/head-image.jpeg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
/*height: 60%;*/
.container {
height: 100%;
background-color: #2e3244ed;
position: relative;
.head {
width: 100%;
right: 10px;
position: absolute;
top: -8px;
display: flex;
justify-content: space-between;
align-items: center;
.head-image {
background: black;
padding: 5px;
border-radius: 50%;
width: 60px;
height: 60px;
}
.my-buttons {
div {
display: flex;
align-items: center;
float: left;
border-radius: 2px;
background: #676767;
margin-right: 5px;
img {
padding: 6px;
height: 20px;
}
span {
color: #cdcdcd;
}
}
}
}
.description {
margin-top: 60px;
color: white;
.number {
padding-bottom: 10px;
border-bottom: 1px solid gray;
.jrtt {
float: right;
img {
height: 10px;
width: 10px;
}
span {
margin: 0 5px;
}
}
}
.info {
display: flex;
align-items: center;
div {
display: flex;
align-items: center;
float: left;
border-radius: 2px;
background: #676767;
margin-right: 5px;
padding: 2px 4px;
img {
height: 10px;
margin-right: 3px;
}
span {
color: #cdcdcd;
}
}
}
.heat {
span {
margin-right: 10px;
}
}
}
.tabset {
display: flex;
justify-content: space-around;
.tab {
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
width: 30%;
}
.active {
border-bottom: 2px solid gold;
}
}
}
}
}
.content {
.video-container {
width: 33%;
float: left;
position: relative;
overflow: hidden;
border: .5px solid black;
video {
width: 100%;
}
.love {
position: absolute;
bottom: 10px;
left: 10px;
display: flex;
align-items: center;
img {
height: 20px;
}
}
}
}
}
</style>

10
src/main.js
View File

@ -4,11 +4,13 @@ import VueRouter from 'vue-router'
import Home from './components/home/Home.vue'
import Attention from './components/attention/Attention.vue'
import Message from './components/message/Message.vue'
import Me from './components/me/Me.vue'
Vue.config.productionTip = false
import Me from './components/user/Me.vue'
// import VueAwesomeSwiper from 'vue-awesome-swiper'
// import 'swiper/dist/css/swiper.css'
Vue.config.productionTip = false;
// Vue.use(VueAwesomeSwiper, /* { default global options } */)
Vue.use(VueRouter);
const router = new VueRouter({
@ -18,7 +20,7 @@ const router = new VueRouter({
{path: '/home', component: Home},
{path: '/attention', component: Attention},
{path: '/message', component: Message},
{path: '/me', component: Me},
{path: '/user', component: Me},
]
});
new Vue({