用vue和axios 写一个QQ

html和Vue：

    
    
 



   

    消息
    联系人
    动态
    
    

css:

*{
    margin:0;
    padding: 0;
    list-style: none;
}
body{
    background: #999;
}
a{
    text-decoration: none;
}
.app{
    width:278px;
    background: white;
    height:525px;
    margin:0 auto;
    background: url(images/u=1738230424,3160324865&fm=26&gp=0.jpg) center;
}
.app-one{
      width:278px;
     overflow: hidden;
     border-bottom: 1px solid #efefef;
}
.app .router-link-active{
    border-bottom:2px solid #cb0816;
    color:#cb0816;
}
.app-one a{
    width:92.67px;
    float: left;
    display: block;
    text-align: center;
    line-height: 39px;
    font-size:16px;
    color:#909090;
}
.router{
    width:278px;
    overflow: hidden;
}
.router span{
    color:#909090;
}
.router li:nth-child(1){
    margin-top:15px;
}
.router li{
    line-height:30px;
    font-size:13px;
    color:black;
    border:none;
    font-weight: 100;
    margin-left: 28px;
    margin-bottom: 15px;
}
 .router ul li:hover{
    background:rgba(0,0,0,.2);
}
.router .ul-two li{
    height:60px;
    margin-top: -18px;
}
.router .ul-two li:hover{
    background:rgba(0,0,0,.2);
}    
.router .ul-two li img{
    border-radius: 50%;
   width:50px;
    height:50px;
    margin-top:10px;
    margin-left:10px;
}
.router .ul-two li b{
    font-size: 15px;
    text-align: center;
    margin-top: -62px;
    width:50px;
    display: block;
    margin-left:69px;
    font-weight: 100;
}
.router .ul-two li p{
    font-size: 13px;
    color:#909090;
    width:150px;
    margin-left:76px;
    margin-top: -4px;
    font-weight: 100;
}
.router-good{
    width:278px;
    overflow: hidden;
}
.router-good li{
    font-size: 14px;
    font-weight: 100;
    width:80px;
    margin-left:29px;
    float: left;
    margin-top: 10px;
}
.router-good ul li:hover{
    background:rgba(0,0,0,.2);
}
.router-good li a{
    color:#909090;
    width:20px;
    height:20px;
}
.router-good .router-link-active{
    color: #de0f1e;
    background: #fff8f8;
}
.router-a{
    width:278px;
    overflow: hidden;
}
.router-a li:nth-child(1){
    margin-top:15px;
}
.router-a li{
    line-height:30px;
    font-size:13px;
    color:black;
    border:none;
    font-weight: 100;
    margin-left: 28px;
    margin-bottom: 15px;
}
.router-a ul:hover{
     background:rgba(0,0,0,.2);
}
.router-a span{
    color:#909090;
}
.router-a h5{
    margin-left: 19px;
    margin-top: -29px;
    font-weight: 100;
    font-size:13px;
}
.router-a ul{
    width:258px;
    overflow: hidden;
    margin-left: -21px;
    margin-top: -7px;
}
.router-a ul li img{
    width:30px;
    height:30px;
    border-radius: 50%;
    float: left;
}
.router-a ul li p{
    float:left;
    line-height:30px;
    margin-left: 10px;
    height: 30px;
}
.d-img img{
    width:136px;
    height:135px;
}
.font ul li{
    width:278px;
    height:60px;
    margin:10px 0px;
}
.font ul li:hover{
    background:rgba(0,0,0,.2);
}
.font ul li img{
    border-radius: 50%;
    width:50px;
    height:50px;
    margin-top:10px;
    margin-left:10px;
}
.font ul li span{
    font-size: 15px;
    text-align: center;
    margin-top: -50px;
    width:50px;
    display: block;
    margin-left:69px;
}
.font ul li:nth-child(2) span{
    color:red;
}
.font ul li p{
    font-size: 13px;
    color:#909090;
    width:150px;
    margin-left: 78px;
    margin-top: 2px;
    font-weight: 100;
}
.font ul li h6{
    text-align: right;
    margin-top:-37px;
    margin-left: 215px;
    width:50px;
    font-weight: 100;
    color:#909090;
}

json:
about.json:

  [
    {
    "two":"我的好友        1/1",
    "three":"images/QQ图片20180925165220.jpg",
    "four":"梁萌",
    "five":"上传了三张照片",
    "flag":true
    
},
{
    "two":"同学          1/1",
    "three":"images/QQ图片20180925165451.jpg",
    "four":"二哥",
    "five":"上传了五张张照片",
    "flag":false
    
},
{
    "two":"白名单        1/1",  "three":"images/2.jpg",
    "four":"王颖",
    "five":"上传了9张照片",
    "flag":false
    
},
 {
    "two":"黑名单        1/1",
    "three":"images/QQ图片20180925165402.jpg",
    "four":"大力",
    "five":"上传了3张照片",
    "flag":false
    
}
]

content.json:

[
    {
    "one":"我的群聊      6/6",
    "two":"images/QQ图片20180925165402.jpg",
    "three":"王大力粉丝群99+",
    "flag":true
},{
    "one":"我的多人聊天     10/15",
    "two":"images/QQ图片20180925165326.jpg",
    "three":"哈哈哈！",
    "flag":false
}
]

效果：
消息：

联系人：

动态：