這次為登陸后會顯示的幾個主要頁面
-
關(guān)注頁面
關(guān)注.png
<template>
<b-row>
<b-col cols="3">
<v-jianyouquan></v-jianyouquan>
</b-col>
<b-col cols="8">
<router-view></router-view>
</b-col>
</b-row>
</template>
<script>
import vJianyouquan from '../common/Jianyouquan'
import vTimeline from '../common/Timeline'
export default {
name: "Subscriptions",
components:{
vJianyouquan,
vTimeline
}
}
</script>
<style scoped>
</style>
<v-jianyouquan></v-jianyouquan>部分
<template>
<div class="main">
<ul>
<div class="guanzhu">全部關(guān)注
<router-link to="/subscriptions/guanzhu">
<a class="addguanzhu">
添加關(guān)注
</a>
</router-link>
</div>
<router-link to="/subscriptions/timeline">
<li class="beginhead">
<img src="https://cdn2.jianshu.io/assets/web/jianyouquan-2fb0cd72e35147c79d6507c3a3a2591b.png">簡友圈
</li>
</router-link>
<li v-for="friends in friendList"><div class="l1"><img v-bind:src="friends.img">{{friends.title}}<a>{{friends.guanzhu}}</a></div></li>
</ul>
</div>
</template>
<script>
export default {
name: "jianyouquan",
data() {
return {
friendList:[
{
"img":"https://upload.jianshu.io/collections/images/16/computer_guy.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120/format/webp",
"title":"程序員",
"guanzhu":88
},
{
"img":"https://upload.jianshu.io/collections/images/16/computer_guy.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120/format/webp",
"title":"程序員",
"guanzhu":88
},
{
"img":"https://upload.jianshu.io/collections/images/16/computer_guy.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120/format/webp",
"title":"程序員",
"guanzhu":88
},
{
"img":"https://upload.jianshu.io/collections/images/16/computer_guy.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120/format/webp",
"title":"程序員",
"guanzhu":88
},
{
"img":"https://upload.jianshu.io/collections/images/16/computer_guy.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120/format/webp",
"title":"程序員",
"guanzhu":88
},
{
"img":"https://upload.jianshu.io/collections/images/16/computer_guy.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120/format/webp",
"title":"程序員",
"guanzhu":88
},{
"img":"https://upload.jianshu.io/collections/images/16/computer_guy.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120/format/webp",
"title":"程序員",
"guanzhu":88
},
{
"img":"https://upload.jianshu.io/collections/images/16/computer_guy.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120/format/webp",
"title":"程序員",
"guanzhu":88
},
{
"img":"https://upload.jianshu.io/collections/images/16/computer_guy.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120/format/webp",
"title":"程序員",
"guanzhu":88
}
]
}
}
}
</script>
<style scoped>
img {
width: 40px;
height: 40px;
border-radius: 5px;
}
li {
list-style-type: none;
height: 60px;
cursor: pointer;
margin-top: 5px;
}
li:hover {
background: gainsboro;
}
a {
margin-left: 100px;
text-decoration: none;
}
a:link {
color: black;
}
.addguanzhu {
margin-left: 5px;
cursor: pointer;
}
.addguanzhu:link {
color: black;
}
.beginhead {
border-top-style: solid;
border-top-color: gainsboro;
margin-bottom: -20px;
}
.guanzhu {
height: auto;
}
ul {
height: 550px;
width: 300px;
overflow-y: scroll;
}
.main {
margin-top: 50px;
}
</style>
-
消息頁面
消息.png
<template>
<div class="container">
<ul class="col-md-4">
<li>
<router-link to="/notifications/comments">
<div class="1">
<img src="../../../static/img/評論.png">
<a class="info">評論</a>
</div>
</router-link>
</li>
<router-link to="/notifications/jianxin">
<li>
<img src="../../../static/img/信息.png">
<a>簡信</a>
</li>
</router-link>
<li>
<img src="../../../static/img/上傳-互動.png">
<a>投稿請求</a>
</li>
<li>
<img src="../../../static/img/喜歡.png">
<a>喜歡和贊</a>
</li>
<li>
<img src="../../../static/img/已關(guān)注.png">
<a>關(guān)注</a>
</li>
<li>
<img src="../../../static/img/錢.png">
<a>贊賞和付費</a>
</li>
<li>
<img src="../../../static/img/更多.png">
<a>其它提醒</a>
</li>
</ul>
<div class="col-md-8">
<router-view>
</router-view>
</div>
</div>
</template>
<script>
export default {
name: "Notifications"
}
</script>
<style scoped>
.col-md-4 {
list-style-type: none;
float: left;
}
li {
cursor: pointer;
width: 263.2px;
height: 50.71px;
border-radius: 5px;
}
li:hover {
background: gainsboro;
}
.container {
margin-top: 50px;
display: inline-block;
}
a {
/*margin-left: 10px;*/
list-style-type: none;
}
a:hover {
text-decoration: none;
}
a:link {
color: black;
}
img {
margin-top: 10px;
}
.col-md-8 {
float: right;
}
</style>
二級路由
{
//消息組件
path: '/notifications',
component: resolve => require(['../components/page/Notifications.vue'], resolve),
meta: {title: '消息'},
children: [
{
path: '/notifications/comments',
component: Comments,
meta: {title: '收到的評論'}
},
{
path: '/notifications/jianxin',
component: Jianxin,
meta: {title: '簡信'}
}
]
},
