QQ仿制
2018-09-28 本文已影响0人
王wl
效果图：
QQ图片20180928111515.png
QQ图片20180928111515.png
css:
<style>
*{
padding:0;
margin:0;
list-style: none;
}
a{
text-decoration: none;
color:#999;
font-family:'微软雅黑';
padding:10px 23px;
line-height:70px;
}
#app{
width:300px;
height:500px;
background:url(../img/o.jpg)no-repeat center center;
background-size: cover;
margin: 0 auto;
}
img{
width:50px;
height:50px;
border-radius:50%;
float: left;
margin-left:15px;
margin-top: 10px;
}
.to{
width:270px;
margin:0 auto;
}
router-link{
color:#999;
}
ul{
display: block;
}
h4,p{
float:left;
margin-left:15px;
}
h4{
padding-top: 10px;
width:160px;
font-weight: 400;
}
.nav ul li p{
color:#333;
margin-top:10px;
font-size:12px;
float: left;
width:200px;
}
span{
float: left;
padding-top: 10px;
color:#333;
font-size: 12px;
}
.lost h4{
float:left;
width:60px;
margin-left:25px;
font-weight: 400;
font-size:15px;
color:#999;
}
.lost h4:nth-child(2){
margin-right:50px;
}
.about ul li{
font-size:14px;
padding:10px 0 0 20px;
width:100%;
}
.lost ul li{
float:left;
}
.to .add{
color:#fff;
border-bottom: 2px solid #fff;
}
.lost .add{
color:#fff;
font-size:15px;
}
.about ul li span{
display:block;
padding-top:0;
}
.nav ul li{
height:65px;
}
.bg a{
line-height: 10px;
padding-left:35px;
}
.bg li{
height:40px;
}
.eaa h5{
font-weight: 400;
margin-top:15px;
float:left;
margin-left:20px;
width:200px;
}
.eaa span{
float:left;
margin-left:20px;
color:#999;
}
.look{
height:60px;
margin-bottom:10px;
}
.loot{
height:70px;
}
.loot p{
font-size:14px;
width:250px;
color:#333;
}
.paly{
height:160px;
}
.paly img{
width:135px;
height:135px;
border-radius:0;
}
.wen{
width:270px;
margin: 0 auto;
height:30px;
border-bottom:1px solid #999;
}
.wen h6{
font-weight: 400;
float:left;
}
.tu{
height:40px;
}
.tu h6{
font-weight: 400;
margin-left:15px;
line-height: 40px;
}
input{
width:255px;
margin-left:15px;
padding:5px 5px;
background:#ffd5c5;
border:1px solid #b2b7b5;
color:#b2b7b5;
}
.about img{
margin-left:0;
margin-top:0;
}
.about ul li .con li{
width:100%;
padding-left:0;
}
.about ul li p{
margin-left:0;
}
.about ul li .con li p{
margin-left:15px;
}
.about ul li .con li p:nth-child(1){
margin-left:15px;
margin-bottom:10px;
}
.about ul li .con li p:nth-child(2){
font-size:12px;
color:#999;
}
.tu img{
width:20px;
height:20px;
margin-right:10px;
}
</style>
html:
<body>
<div id='app'>
<div class="to">
<router-link to='/home'>消息</router-link>
<router-link to='/user'>联系人</router-link>
<router-link to='/phon'>动态∨</router-link>
</div>
<router-view></router-view>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script src="js/axios.js"></script>
<script>
//创建组件
var Home={
template:`
<div class='nav'>
<ul>
<li class="list" v-for='value in xun'>
<img v-bind:src=value.url>
<h4>{{value.name}}</h4>
<span>{{new Date()|date}}</span>
<p>{{value.title}}</p>
</li>
</ul>
</div>
`,
data:function(){
return{
xun:null
}
},
mounted:function(){
var self=this;
axios({
url:'xun.json',
method:'get'
}).then(function(resp){
console.log(resp.data)
self.xun=resp.data
}).catch(function(err){
console.log(err)
})
}
}
var User={
template:`
<div class='lost'>
<ul class='bg'>
<li>
<router-link to='/user/go'>好友</router-link>
</li>
<li>
<router-link to='/user/so'>群聊</router-link>
</li>
</ul>
<router-view></router-view>
</div>
`
}
var Go={
template:`
<div class='about'>
<ul>
<li v-for="(value,index) in concater">
<p @click='chg(index)'>>{{value.group}}</p>
<span >{{value.count}}</span>
<ul class='con' v-show='concater[index].flag'>
<li>
<img v-bind:src='value.img'>
<div>
<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 self=this;
axios({
url:'concater.json',
method:'get'
}).then(function(resp){
console.log(resp.data)
self.concater=resp.data
}).catch(function(err){
console.log(err)
})
}
}
var So={
template:`
<div class='about'>
<ul>
<li>我的群聊</li>
<li>多人群聊</li>
</ul>
</div>
`
}
var Phon={
template:`
<div class='eaa'>
<div class='look'>
<img src='../img/ps.jpg'>
<h5>樱桃小丸子</h5>
<span>15:23</span>
</div>
<div class='loot'>
<p>“我发现你最近又……”</p>
<p>“停不许说‘胖’或‘肥’！”</p>
<p>“肿了！”</p>
</div>
<div class='paly'>
<img src='../img/oo.jpg'>
</div>
<div class='wen'>
<h6>1670次浏览</h6>
</div>
<div class='tu'>
<img src='../img/timg.jpg'>
<h6>289人觉得很赞</h6>
</div>
<input type='text' placeholder="我也说一句">
</div>
`
}
//配置路由
const routes=[
{path:'/',component:Home},
{path:'/home',component:Home},
{
path:'/user',
component:User,
children:[
{path:'go',component:Go},
{path:'so',component:So}
]
},
{path:'/phon',component:Phon}
]
//创建实例
const router=new VueRouter({
routes:routes,
linkActiveClass:"add"
})
//过滤器
Vue.filter('date',function(data){
return data.getHours()+":"+data.getMinutes();
})
//把路由实例挂到实例上
new Vue({
el:'#app',
router:router
})
</script>
</body>
xun.json:
[
{
"name":"傲娇小公主",
"time":"9:36",
"title":"不开森,我好想去喝酒",
"url":"../img/li.jpg"
},
{
"name":"小仙女",
"time":"9:40",
"title":"我们可以周三出去买啊",
"url":"../img/mei.jpg"
},
{
"name":"二哥",
"time":"9:38",
"title":"干喝啊",
"url":"../img/yan.jpg"
},
{
"name":"大颖",
"time":"9:39",
"title":"可以叫外卖啊",
"url":"../img/ying.jpg"
},
{
"name":"铁锤",
"time":"9:38",
"title":"嘿！楼上的说句话",
"url":"../img/pang.jpg"
},
{
"name":"小箭",
"time":"9:38",
"title":"带着三斤，嗨皮",
"url":"../img/jian.jpg"
}
]
concater.json:
[
{
"group":"我的设备",
"count":"(2/2)",
"img":"../img/14.jpg",
"title":"发现新设备",
"txt":"玩转只能信设备，发现新生活",
"flag":false
},
{
"group":"朋友",
"count":"(10/20)",
"img":"../img/93.jpg",
"title":"发现新设备",
"txt":"玩转只能信设备，发现新生活",
"flag":false
},
{
"group":"同学",
"count":"(16/47)",
"img":"../img/416.jpg",
"title":"发现新设备",
"txt":"玩转只能信设备，发现新生活",
"flag":false
}
]
