首页完成80%.3

This commit is contained in:
zyronon 2018-10-18 08:40:37 +08:00
parent 9c85083980
commit f52a3621b7
43 changed files with 118 additions and 118 deletions

0
.gitignore vendored Normal file → Executable file
View File

0
README.md Normal file → Executable file
View File

0
babel.config.js Normal file → Executable file
View File

0
package-lock.json generated Normal file → Executable file
View File

3
package.json Normal file → Executable file
View File

@ -8,7 +8,8 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"vue": "^2.5.17"
"vue": "^2.5.17",
"vue-router": "^3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.0.3",

0
public/favicon.ico Normal file → Executable file
View File

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

0
public/index.html Normal file → Executable file
View File

7
src/App.vue Normal file → Executable file
View File

@ -1,16 +1,17 @@
<template>
<div id="app">
<Home/>
<!--<Home/>-->
<router-view></router-view>
</div>
</template>
<script>
import Home from './components/Home.vue'
// import Home from './components/home/Home.vue'
export default {
name: 'app',
components: {
Home
// Home
}
}
</script>

0
src/assets/img/More.svg Normal file → Executable file
View File

Before

Width:  |  Height:  |  Size: 843 B

After

Width:  |  Height:  |  Size: 843 B

0
src/assets/img/QQ.svg Normal file → Executable file
View File

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

0
src/assets/img/add.svg Normal file → Executable file
View File

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

0
src/assets/img/close.svg Normal file → Executable file
View File

Before

Width:  |  Height:  |  Size: 998 B

After

Width:  |  Height:  |  Size: 998 B

0
src/assets/img/collect.svg Normal file → Executable file
View File

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

0
src/assets/img/dislike.svg Normal file → Executable file
View File

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

0
src/assets/img/dongtaibizhi.svg Normal file → Executable file
View File

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

0
src/assets/img/download.svg Normal file → Executable file
View File

Before

Width:  |  Height:  |  Size: 894 B

After

Width:  |  Height:  |  Size: 894 B

0
src/assets/img/friend_circle.svg Normal file → Executable file
View File

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

0
src/assets/img/head-image.jpeg Normal file → Executable file
View File

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

0
src/assets/img/hepai.svg Normal file → Executable file
View File

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

0
src/assets/img/href.svg Normal file → Executable file
View File

Before

Width:  |  Height:  |  Size: 5.9 KiB

After

Width:  |  Height:  |  Size: 5.9 KiB

0
src/assets/img/ic_more.svg Normal file → Executable file
View File

Before

Width:  |  Height:  |  Size: 634 B

After

Width:  |  Height:  |  Size: 634 B

0
src/assets/img/love-gray.svg Normal file → Executable file
View File

Before

Width:  |  Height:  |  Size: 904 B

After

Width:  |  Height:  |  Size: 904 B

0
src/assets/img/love.svg Normal file → Executable file
View File

Before

Width:  |  Height:  |  Size: 786 B

After

Width:  |  Height:  |  Size: 786 B

0
src/assets/img/loved.svg Normal file → Executable file
View File

Before

Width:  |  Height:  |  Size: 786 B

After

Width:  |  Height:  |  Size: 786 B

0
src/assets/img/message.svg Normal file → Executable file
View File

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

0
src/assets/img/music.svg Normal file → Executable file
View File

Before

Width:  |  Height:  |  Size: 596 B

After

Width:  |  Height:  |  Size: 596 B

0
src/assets/img/play.svg Normal file → Executable file
View File

Before

Width:  |  Height:  |  Size: 672 B

After

Width:  |  Height:  |  Size: 672 B

0
src/assets/img/qiangjing.svg Normal file → Executable file
View File

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

0
src/assets/img/qr_code.svg Normal file → Executable file
View File

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

0
src/assets/img/share.svg Normal file → Executable file
View File

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

0
src/assets/img/sina.svg Normal file → Executable file
View File

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

0
src/assets/img/sq-share-qqzone-01.svg Normal file → Executable file
View File

Before

Width:  |  Height:  |  Size: 1006 B

After

Width:  |  Height:  |  Size: 1006 B

0
src/assets/img/wechat.svg Normal file → Executable file
View File

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

0
src/assets/img/举报.svg Normal file → Executable file
View File

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

0
src/assets/logo.png Normal file → Executable file
View File

Before

Width:  |  Height:  |  Size: 6.7 KiB

After

Width:  |  Height:  |  Size: 6.7 KiB

View File

@ -1,58 +0,0 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

View File

@ -0,0 +1,26 @@
<template>
<div id="attention">
<div class="items">
<div class="item">
</div>
</div>
<Footer v-bind:init-tab="2"/>
</div>
</template>
<script>
import Footer from '../common/Footer';
export default {
name: "Attention",
components:{
Footer
}
}
</script>
<style scoped>
</style>

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/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>
@ -11,15 +11,30 @@
<script>
export default {
name: "Footer",
data() {
return {
currentTab: 1
}
props:['initTab'],
data(){
return{
currentTab:this.initTab
}
},
methods: {
tab(index) {
this.currentTab = index;
console.log(index);
switch (index) {
case 1:
this.$router.push('/home');
break;
case 2:
this.$router.push('/attention');
break;
case 3:
break;
case 4:
break;
case 5:
break;
}
}
}
}

View File

@ -3,12 +3,12 @@
<div class="comment f14" v-if="isCommenting">
<div class="title">
<p>2.7w条评论</p>
<img src="../assets/img/close.svg" @click.stop="$emit('showComment')">
<img src="../../assets/img/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/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/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/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/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/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/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/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/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/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/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/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/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/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/love-gray.svg" alt="" class="love-image">
<span class="f14 block">3453</span>
</div>
</div>

View File

@ -2,21 +2,21 @@
<div id="home">
<div class="bg-video" v-for="(item,index) in data">
<!--<video :src="data[0].videoUrl">-->
<video src="../assets/video/吴三二的光年之外.mp4" autoplay>
<video src="../../assets/video/吴三二的光年之外.mp4" autoplay>
您的浏览器不支持 video 标签
</video>
<div class="float" @click="togglePlayVideo($event)">
<transition name="pause">
<img src="../assets/img/play.svg" class="pause" v-show="!isPlaying"
<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">
<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">
<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">
</transition>
<transition name="loved">
@ -25,14 +25,14 @@
<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">
<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">
<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">
<img src="../../assets/img/head-image.jpeg" alt="" class="music">
</div>
<div class="content ml10p">
<div class="name mb10p">@TTentau</div>
@ -40,7 +40,7 @@
吴三二的光年之外, 您的浏览器不支持 video 标签 您的浏览器不支持 video 标签
</div>
<div class="music mb10p">
<img src="../assets/img/music.svg" alt="" class="music-image">
<img src="../../assets/img/music.svg" alt="" class="music-image">
<marquee behavior=scroll direction=left align=middle scrollamount=4> 吴三二 - 光年之外</marquee>
</div>
</div>
@ -48,14 +48,14 @@
</div>
<Comment v-bind:is-commenting="isCommenting" v-on:showComment='isCommenting=!isCommenting'/>
<Share v-bind:is-sharing="isSharing"/>
<Footer/>
<Footer v-bind:init-tab="1"/>
</div>
</template>
<script>
import Comment from './Comment';
import Share from './Share';
import Footer from './Footer';
import Footer from '../common/Footer';
export default {
name: "Home",

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/head-image.jpeg" alt="">
<span>ttentau</span>
</div>
<div class="friend pr10p">
<img src="../assets/img/head-image.jpeg" alt="">
<img src="../../assets/img/head-image.jpeg" alt="">
<span>ttentau</span>
</div>
<div class="friend pr10p">
<img src="../assets/img/head-image.jpeg" alt="">
<img src="../../assets/img/head-image.jpeg" alt="">
<span>ttentau</span>
</div>
<div class="friend pr10p">
<img src="../assets/img/head-image.jpeg" alt="">
<img src="../../assets/img/head-image.jpeg" alt="">
<span>ttentau</span>
</div>
<div class="friend pr10p">
<img src="../assets/img/head-image.jpeg" alt="">
<img src="../../assets/img/head-image.jpeg" alt="">
<span>ttentau</span>
</div>
<div class="friend pr10p">
<img src="../assets/img/head-image.jpeg" alt="">
<img src="../../assets/img/head-image.jpeg" alt="">
<span>ttentau</span>
</div>
<div class="friend pr10p">
<img src="../assets/img/head-image.jpeg" alt="">
<img src="../../assets/img/head-image.jpeg" alt="">
<span>ttentau</span>
</div>
<div class="friend pr10p">
<img src="../assets/img/ic_more.svg" alt="">
<img src="../../assets/img/ic_more.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/friend_circle.svg" alt="">
<span>朋友圈</span>
</div>
<div class="share-to pr10p">
<img src="../assets/img/wechat.svg" alt="">
<img src="../../assets/img/wechat.svg" alt="">
<span>微信</span>
</div>
<div class="share-to pr10p">
<img src="../assets/img/sq-share-qqzone-01.svg">
<img src="../../assets/img/sq-share-qqzone-01.svg">
<span>QQ空间</span>
</div>
<div class="share-to pr10p">
<img src="../assets/img/QQ.svg">
<img src="../../assets/img/QQ.svg">
<span>QQ</span>
</div>
<div class="share-to pr10p">
<img src="../assets/img/sina.svg">
<img src="../../assets/img/sina.svg">
<span>微博</span>
</div>
<div class="share-to pr10p">
<img src="../assets/img/More.svg">
<img src="../../assets/img/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/举报.svg" alt="">
<span>举报</span>
</div>
<div class="tool pr10p ">
<img src="../assets/img/download.svg" alt="">
<img src="../../assets/img/download.svg" alt="">
<span>保存本地</span>
</div>
<div class="tool pr10p ">
<img src="../assets/img/collect.svg" alt="">
<img src="../../assets/img/collect.svg" alt="">
<span>收藏</span>
</div>
<div class="tool pr10p ">
<img src="../assets/img/qiangjing.svg" alt="">
<img src="../../assets/img/qiangjing.svg" alt="">
<span>抢镜</span>
</div>
<div class="tool pr10p">
<img src="../assets/img/qr_code.svg" alt="">
<img src="../../assets/img/qr_code.svg" alt="">
<span>二维码</span>
</div>
<div class="tool pr10p">
<img src="../assets/img/dongtaibizhi.svg" alt="">
<img src="../../assets/img/dongtaibizhi.svg" alt="">
<span>动态壁纸</span>
</div>
<div class="tool pr10p">
<img src="../assets/img/hepai.svg" alt="">
<img src="../../assets/img/hepai.svg" alt="">
<span>合拍</span>
</div>
<div class="tool pr10p">
<img src="../assets/img/dislike.svg" alt="">
<img src="../../assets/img/dislike.svg" alt="">
<span>不感兴趣</span>
</div>
<div class="tool pr10p">
<img src="../assets/img/href.svg" alt="">
<img src="../../assets/img/href.svg" alt="">
<span>复制链接</span>
</div>
</div>

19
src/main.js Normal file → Executable file
View File

@ -1,8 +1,23 @@
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Home from './components/home/Home.vue'
import Attention from './components/attention/Attention.vue'
Vue.config.productionTip = false
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
routes: [
{path: '/', component: Home},
{path: '/home', component: Home},
{path: '/attention', component: Attention},
]
});
new Vue({
render: h => h(App)
}).$mount('#app')
render: h => h(App),
router
}).$mount('#app');

0
vue.config.js Normal file → Executable file
View File