pimhwang
/
douyin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

消息页面完成80%

pull/19/head
zyronon 7 years ago
parent
afe7d1332a
commit
ee491431fa
8 changed files with 238 additions and 20 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      public/index.html
  2. 27
      src/App.vue
  3. 1
      src/assets/img/person.svg
  4. 15
      src/components/attention/Attention.vue
  5. 12
      src/components/common/Footer.vue
  6. 20
      src/components/me/Me.vue
  7. 172
      src/components/message/Message.vue
  8. 4
      src/main.js

7
public/index.html
Unescape View File

@ -2,9 +2,8 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
<meta name="screen-orientation" content="portrait"/> <meta name="screen-orientation" content="portrait"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no"> <meta name="format-detection" content="telephone=no">
<meta name="full-screen" content="yes"> <meta name="full-screen" content="yes">
@ -12,8 +11,10 @@
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>抖音</title> <title>抖音</title>
<style> <style>
body{ body,html{
height: 0!important; height: 0!important;
padding: 0;
margin: 0;
} }
</style> </style>
</head> </head>

27
src/App.vue
Unescape View File

@ -1,5 +1,5 @@
<template> <template>
<div id="app"> <div id="app" v-bind:style="{'min-height':height + 'px'}">
<!--<Home/>--> <!--<Home/>-->
<router-view></router-view> <router-view></router-view>
</div> </div>
@ -12,13 +12,34 @@
name: 'app', name: 'app',
components: { components: {
// Home // Home
},
data() {
return {
height: 0,
width: 0
}
},
created() {
this.height = window.screen.height;
// this.width = window.screen.width;
// let availWidth = window.screen.availWidth;
// let clientWidth = document.body.clientWidth;
// let offsetWidth = document.body.offsetWidth;
// let scrollWidth = document.body.scrollWidth;
// console.log(this.height);
// console.log(this.width);
// console.log(availWidth);
// console.log(clientWidth);
// console.log(offsetWidth);
// console.log(scrollWidth);
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss">
#app { #app {
width: 100%; background: #2e3244;
height: 100%; height: 100%;
font-size: 14px; font-size: 14px;
padding: 0; padding: 0;
@ -75,8 +96,6 @@
$margin: $margin - 1; $margin: $margin - 1;
} }
$padding: 50; $padding: 50;
@while $padding > 0 { @while $padding > 0 {
.pl#{$padding}p { .pl#{$padding}p {

1
src/assets/img/person.svg
Unescape View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539930858055" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1047" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M315.7 832h-112c-1.1-0.6-4.7-3.7-7.8-11.6-5-12.9-5-28.9-0.1-41.8l47.7-124.4c13.4-34.8 36.9-57.4 59.9-57.4h94c6.1 0 11.8-3 14.9-8.2 5.5-9.2 11.5-17.7 18-25.4 8.1-9.7 3.3-24.5-8.9-27.5-7.9-1.9-15.9-2.9-24.1-2.9h-93.9c-50.5 0-96.3 37.7-119.7 98.4L136 755.6c-10.8 28-10.7 60.1 0.2 88 5.7 14.7 14.3 27.2 24.7 36.1 12.4 10.6 27 16.2 42.4 16.2h121.3c12.2 0 20.3-12.4 15.6-23.6-0.3-0.8-0.6-1.6-1-2.4-3-7.7-5.3-15.8-6.8-24.1-1.5-8-8.6-13.8-16.7-13.8zM350.2 510.4c43.7 0 83.4-17.2 112.7-45.1 8.8-8.4 8.3-22.7-1-30.5-4.1-3.5-8.1-7.1-11.9-10.9-7.9-7.9-20.6-8.1-28.7-0.5l-0.4 0.4c-19.1 17.7-44.3 27.5-70.3 27.6-28.5 0.1-55.3-11.2-75.1-31.7-18.4-19-28.9-44.5-29.2-70.9-0.4-28.8 10.8-55.9 31.4-76 19.8-19.4 46.8-30 74.5-29.5 8.4 0.1 16.7 1.3 24.7 3.4 10.8 2.8 21.9-3.3 25.1-14 1.6-5.2 3.3-10.3 5.3-15.2 4.5-11.4-1.8-24.2-13.7-27.5-13.8-3.8-28.3-5.8-43.2-5.8-89.6 0-162.4 72.3-163.2 161.7-0.9 89.9 73 164.5 163 164.5zM870.8 770.5l-56.2-146.3C788 555 736.1 512 679.1 512H568.7c-30.2 0-59 12.1-83.4 33.7-15.5 13.8-29.2 31.5-40.3 52.4-4.4 8.2-8.3 16.9-11.8 26L377 770.5c-7.4 19.2-10.2 40.6-8.4 61.5 1.1 13.1 4 26 8.7 38 3.8 9.6 8.6 18.4 14.3 26 4 5.4 8.4 10.2 13.2 14.3 13.5 11.6 29.5 17.7 46.2 17.7h346c16.7 0 32.7-6.1 46.2-17.7 11.6-9.9 21.1-23.9 27.5-40.3 11.9-31.1 12-68.3 0.1-99.5z m-59.9 76.2c-4.7 11.9-11 17.3-14 17.3h-346c-3 0-9.4-5.4-14-17.3-1.8-4.6-3.1-9.6-3.9-14.7-2-12.9-0.8-26.8 3.8-38.6l55.9-145.6 0.3-0.7c9.7-25.3 24-45.4 40.1-57.7 11.3-8.6 23.5-13.4 35.7-13.4h110.4c29.4 0 59.2 27.9 75.8 71.1l56 146.3c6.3 16.5 6.3 36.9-0.1 53.3z" p-id="1048" fill="#ffffff"></path><path d="M516.9 447.6c30.5 20.5 67.3 32.4 106.8 32.4 106 0 192-86 192-192s-86-192-192-192c-73.5 0-137.3 41.3-169.6 101.9-9.2 17.3-15.9 36.2-19.4 56.2-2 11-3 22.4-3 34 0 45.1 15.5 86.5 41.5 119.3 12.4 15.5 27.2 29.1 43.7 40.2z m16.3-250.1c24.2-24.2 56.3-37.5 90.5-37.5s66.3 13.3 90.5 37.5c24.2 24.2 37.5 56.3 37.5 90.5s-13.3 66.3-37.5 90.5C690 402.7 657.9 416 623.7 416c-28.5 0-55.6-9.3-77.9-26.4-4.4-3.4-8.7-7.1-12.7-11.1-24.2-24.2-37.5-56.3-37.5-90.5 0-18.5 3.9-36.4 11.3-52.7 6.4-13.9 15.2-26.7 26.3-37.8z" p-id="1049" fill="#ffffff"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

15
src/components/attention/Attention.vue
Unescape View File

@ -30,6 +30,7 @@
<div class="toolbar mb10p"> <div class="toolbar mb10p">
<div class="item"> <div class="item">
<img src="../../assets/img/love.svg" alt=""> <img src="../../assets/img/love.svg" alt="">
<img src="../../assets/img/loved.svg" alt="" class="love-image" v-if="false">
<span class="count">555</span> <span class="count">555</span>
</div> </div>
<div class="item"> <div class="item">
@ -45,7 +46,7 @@
<span class="count">555</span> <span class="count">555</span>
</div> </div>
</div> </div>
<div class="hot-comment pl5p pr15p mb5p oh"> <div class="hot-comment pr15p mb5p oh">
<div class="content pull-left "> <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="pull-right comment-container">
@ -55,6 +56,7 @@
</div> </div>
<div class="love pull-right"> <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">
<img src="../../assets/img/loved.svg" alt="" class="love-image" v-if="false">
<span class="f14 block">3453</span> <span class="f14 block">3453</span>
</div> </div>
</div> </div>
@ -171,19 +173,16 @@
} }
} }
.hot-comment { .hot-comment {
.head-image {
width: 40px;
border-radius: 50%;
float: left;
}
.content { .content {
float: left; float: left;
width: 85%; width: 85%;
.head-image { .head-image {
width: 15%; width: 40px;
border-radius: 50%;
float: left;
} }
.comment-container { .comment-container {
width: 80%; width: 85%;
.time { .time {
color: gray; color: gray;
} }

12
src/components/common/Footer.vue
Unescape View File

@ -11,11 +11,11 @@
<script> <script>
export default { export default {
name: "Footer", name: "Footer",
props:['initTab'], props: ['initTab'],
data(){ data() {
return{ return {
currentTab:this.initTab currentTab: this.initTab
} }
}, },
methods: { methods: {
tab(index) { tab(index) {
@ -31,8 +31,10 @@
case 3: case 3:
break; break;
case 4: case 4:
this.$router.push('/message');
break; break;
case 5: case 5:
this.$router.push('/me');
break; break;
} }
} }

20
src/components/me/Me.vue
Unescape View File

@ -0,0 +1,20 @@
<template>
<div class="me">
<Footer v-bind:init-tab="5"/>
</div>
</template>
<script>
import Footer from '../common/Footer';
export default {
name: "Me",
components: {
Footer
}
}
</script>
<style scoped>
</style>

172
src/components/message/Message.vue
Unescape View File

@ -0,0 +1,172 @@
<template>
<div class="message">
<div class="container p15p">
<div class="header">
<div class="title">
<p class="tac">消息</p>
<span>联系人</span>
</div>
</div>
<div class="toolbar mt20p">
<div>
<img src="../../assets/img/person.svg" alt="">
<span>粉丝</span>
</div>
<div>
<img src="../../assets/img/love.svg" alt="">
<span>赞</span>
</div>
<div>
<img src="../../assets/img/person.svg" alt="">
<span>@我的</span>
</div>
<div>
<img src="../../assets/img/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">
<div class="pull-right comment-container">
<div class="name">游戏小助手</div>
<div class="detail">抖出好游戏</div>
</div>
</div>
<div class="love pull-right">
<span class="f14 block">20:54</span>
</div>
</div>
<div class="message oh mt15p">
<div class="content pull-left ">
<img src="../../assets/img/head-image.jpeg" alt="" class="head-image pull-left">
<div class="pull-right comment-container">
<div class="name">抖音小助手</div>
<div class="detail">抖音美好奇妙夜小贴士</div>
</div>
</div>
<div class="love pull-right">
<span class="f14 block">20:54</span>
</div>
</div>
<div class="message oh mt15p">
<div class="content pull-left ">
<img src="../../assets/img/head-image.jpeg" alt="" class="head-image pull-left">
<div class="pull-right comment-container">
<div class="name">TTentau</div>
<div class="detail">其实我也不知道评论点什么啊啊啊看吧看吧看吧</div>
</div>
</div>
<div class="love pull-right">
<span class="f14 block">20:54</span>
</div>
</div>
</div>
<p class="tac">无更多消息</p>
</div>
<Footer v-bind:init-tab="4"/>
</div>
</template>
<script>
import Footer from '../common/Footer';
export default {
name: "Message",
components: {
Footer
},
data() {
return {}
},
created() {
let height = window.screen.height;
console.log(height);
}
}
</script>
<style scoped lang="scss">
.message {
background: #2e3244;
color: #b8b9c1;
height: 100%;
.header {
.title {
position: relative;
span {
position: absolute;
right: 10px;
top: 0;
}
}
}
.toolbar {
display: flex;
justify-content: space-around;
div {
text-align: center;
&:nth-child(1) {
img {
background: rgb(79, 136, 251);
}
}
&:nth-child(2) {
img {
background: rgb(248, 53, 95);
}
}
&:nth-child(3) {
img {
background: rgb(28, 194, 98);
}
}
&:nth-child(4) {
img {
background: rgb(195, 106, 250);
}
}
img {
padding: 10px;
border-radius: 3px;
width: 25px;
height: 25px;
}
span {
display: block;
}
}
}
.messages {
border-top: 1px solid #494950;
.message {
.content {
float: left;
width: 85%;
.head-image {
width: 40px;
border-radius: 50%;
float: left;
}
.comment-container {
width: 85%;
.time {
color: gray;
}
}
}
.love {
text-align: center;
.love-image {
width: 30px;
border-radius: 50%;
}
}
}
}
}
</style>

4
src/main.js
Unescape View File

@ -3,6 +3,8 @@ import App from './App.vue'
import VueRouter from 'vue-router' import VueRouter from 'vue-router'
import Home from './components/home/Home.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 Me from './components/me/Me.vue'
Vue.config.productionTip = false Vue.config.productionTip = false
@ -15,6 +17,8 @@ const router = new VueRouter({
{path: '/', component: Home}, {path: '/', component: Home},
{path: '/home', component: Home}, {path: '/home', component: Home},
{path: '/attention', component: Attention}, {path: '/attention', component: Attention},
{path: '/message', component: Message},
{path: '/me', component: Me},
] ]
}); });
new Vue({ new Vue({

Write Preview
Loading…
Cancel
Save