模仿聯(lián)系人頁：
81.png
html 代碼：
<div class="w">
<div class="mulu">
<router-link to="/xiaoxi" class="one">消息</router-link>
<router-link to="/lianxi" class="two">聯(lián)系人</router-link>
<router-link to="/dongtai" class="three">動態(tài)</router-link>
</div>
// 盛放數(shù)據(jù)
<router-view></router-view>
</div>
js 代碼：
// 鏈接js
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script src="js/axios.js"></script>
<script>
// 創(chuàng)建組件
var about={
template:`
<div class="xiaox">
<ul class="list">
<li><router-link to='/lianxi/regist'>好友</router-link></li>
<li><router-link to='/lianxi/lon'>群聊</router-link></li>
<span><img src="./img/1.gif"></span>
</ul>
<router-view></router-view>
</div>
`
}
// 好友
var reg={
template:`
<div class="pengyou">
<ul class='concat'>
<li @click="chg(index)" v-for="(value,index) in concater">
<b><img src="./img/2.gif"></b>
<span>{{value.group}}</span>
<span>{{value.count}}</span>
<ul class="con" v-show="concater[index].flag">
<li>
<img :src='value.img'>
<div class="lis">
<p>{{value.title}}</p>
<p>{{value.txt}}</p>
</div>
</li>
</ul>
</li>
</ul>
</div>
`,
methods:{
chg:function(index){
this.concater[index].flag=!this.concater[index].flag
}
},
data:function(){
return{
concater:null
}
},
mounted:function(){
var that=this;
axios({
method:"get",
url:"contan.json"
}).then(function(resp){
console.log(resp.data)
that.concater=resp.data;
}).catch(function(err){
console.log(err)
})
}
}
// 群聊
var gin={
template:`
<div class="group">
<ul class='concat'>
<li @click="add(index)" v-for="(v,index) in conca">
<b><img src="./img/2.gif"></b>
<span>{{v.group}}</span>
<ul class="main" v-show="conca[index].flag">
<li>
<img :src='v.imga'>
<p>{{v.title}}</p>
<p>{{v.txt}}</p>
</li>
</ul>
</li>
</ul>
</div>
`,
methods:{
add:function(index){
this.conca[index].flag=!this.conca[index].flag
}
},
data:function(){
return{
conca:null
}
},
mounted:function(){
var that=this;
axios({
method:"get",
url:"qun.json"
}).then(function(resp){
console.log(resp.data)
that.conca=resp.data;
}).catch(function(err){
console.log(err)
})
}
}
// 配置路由
const routes=[
{path:'/',component:about},
{path:'/xiaoxi',component:Index},
{
path:'/lianxi',
component:about,
children:[
{path:'/',component:reg},
{path:'regist',component:reg},
{path:'lon',component:gin}
]
},
{path:'/dongtai',component:fabiao}
]
// 創(chuàng)建路由實例
const router=new VueRouter({
routes:routes,
linkActiveClass:"active"
})
// 時間
Vue.filter('date',function(data){
return data.getHours()+":"+data.getMinutes();
})
new Vue({
el:'.w',
router:router
})
</script>
qun.json:
[
{
"group":"我的群聊",
"imga":"./img/23.jpg",
"title":"單純DE我們",
"txt":"8:11",
"flag":true
}
]
contan.json:
[
{
"group":"新朋友",
"flag":false
},
{
"group":"我的設(shè)備",
"count":"1/2",
"img":"img/53.jpg",
"title":"我的Android手機",
"txt":"上次登錄：2018-9-28",
"flag":false
},
{
"group":"始于顏值",
"count":"84/115",
"img":"img/641.jpg",
"title":"梁萌",
"txt":"明天放假真開心",
"flag":true
}
]
模擬消息頁
8fb43b88-1d97-4eb2-ad91-528556abdb83.png
js:
// 消息
var yanzhi={
template:`
<div class="xiaox">
<div class="xinxi">
<ul>
<li>
<img src:"/img/23">
<p class="p1">{{value.name}}</p>
<p class="p2">{{value.liao}}</p>
</li>
</ul>
</div>
</div>
`
}
qq.json：
[
{
"img":"./img/14.jpg",
"name":"紀(jì)美",
"liao":"干嘛呢？"
},
{
"img":"./img/53.jpg",
"name":"大梨",
"liao":"要不要聽我的演唱會萧豆？"
},
{
"img":"./img/8.jpg",
"name":"二哈",
"liao":"我頭像是我熟空，怎么樣好不好看"
},
{
"img":"./img/641.jpg",
"name":"梁萌",
"liao":"1111"
},
{
"img":"./img/23.jpg",
"name":"你宛如一個智障",
"liao":"我好像傻了"
}
]
模仿 動態(tài)頁：
0c5c961e-b550-4be7-9317-b002437c5936.png
js:
var fabiao={
template:`
<div class="xiaox">
<ul class="nav">
<li>
<a href="#">
<img src="./img/3.jpg">
</a>
</li>
<li>
<a href="#">
<img src="./img/4.jpg">
</a>
</li>
<li><a href="#"><img src="./img/5.jpg"></a></li>
<li><a href="#"><img src="./img/6.jpg"></a></li>
</ul>
</div>
`
}
css 樣式：
*{
margin: 0;
padding: 0;
list-style: none;
}
a{
text-decoration: none;
}
.active{
border-bottom: 2px solid #818186;
color: #585858;
}
.w{
width:280px;
height:630px;
margin: 0 auto;
background: url(img/1.jpg)no-repeat -15px -102px;
background-size: 121% 110%;;
box-shadow: 0px 1px 7px 1px #969595;
}
.mulu{
width: 100%;
overflow: hidden;
border-bottom: 1px solid #f4f4f4;
}
.one,.two,.three{
width: 65px;
height: 40px;
display: block;
margin-right:20px;
float: left;
color: #818185;
font-size: 16px;
text-align: center;
line-height: 40px;
padding: 0 4px;
}
.list{
margin-top: 10px;
overflow: hidden;
}
.list li a{
float: left;
font-size: 15px;
color: #747479;
padding: 5px 10px;
margin:0 7px;
}
.list span{
float: right;
margin-right: 10px;
line-height: 35px;
}
.list span img{
width: 42px;
height: 22px;
}
.pengyou ul li{
padding: 10px;
width:93%;
}
.pengyou ul li span{
font-size: 14px;
color: #000;
}
.pengyou li:hover{
background: rgba(247, 247, 247, 0.18);
}
.pengyou p span{
margin-right: 10px;
margin-left: 10px;
}
.concat{
width: 100%;
}
.con{
overflow: hidden;
}
.con li img{
width:40px;
height: 40px;
border-radius: 50%;
float: left;
}
.lis{
overflow: hidden;
float: left;
margin-left: 15px;
}
.lis p:first-child{
font-size: 14px;
}
.lis p:nth-child(2){
font-size: 12px;
color: #585858;
}
.xiaox{
width: 100%;
}
.xiaox ul{
overflow: hidden;
}
.xiaox ul li{
float: left;
}
.nav li a{
display: block;
height: 136px;
width: 140px;
}
.xinxi{
width:100%;
}
.xinxi ul{
margin-top: 20px;
}
.xinxi ul li{
padding-left: 15px;
height: 60px;
width: 265px;
position: relative;
}
.xinxi ul li img{
width: 40px;
height: 40px;
position: absolute;
border-radius: 50%;
top: 10px;
}
.xinxi ul li:hover{
background: rgba(130, 128, 128, 0.18);
}
.p1{
color: #000;
position: absolute;
left: 70px;
font-size: 15px;
font-family: '微軟雅黑';
top: 10px;
}
.xinxi ul li:nth-child(3) .p1{
color: #ff0000;
}
.xinxi ul li:last-child .p1{
color: #ff0000;
}
.p2{
color: #7e7d7d;
position: absolute;
left: 70px;
top:30px;
font-size: 12px;
}
.xinxi ul li span{
position: absolute;
right: 10px;
top: 10px;
font-size: 12px;
color: #7f7f7f;
}
.group{
margin-top:10px;
margin-left:20px;
margin-right:20px;
}
.group span{
margin-right:10px;
font-size:14px;
color: #000;
}
.main{
overflow: hidden;
}
.concat li{
width: 100%;
}
.main li img{
width: 40px;
height: 40px;
border-radius: 50%;
display: block;
float: left;
}
.main li p{
font-size: 16px;
float: left;
margin-left: 10px;
line-height: 40px;
}
.main li p:last-child{
font-size: 12px;
color: #7f7f7f;
float: right;
}