<template>
<div class="tmp1">
<!-- 1.0 轮播使用的mint-ui中的swipe组件 -->
<mt-swipe :auto="2000">
<mt-swipe-item v-for="item in swipeList" >
<a :href="item.url">
</a>
</mt-swipe-item>
</mt-swipe>
<!-- 2.0 9宫格导航区域 使用的mui中的9宫格样式 -->
<div class="mui-content">
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
//a换成router-link,同时配置路由方式
<router-link to="/news/newslist">
<span class="mui-icon mui-icon-home">
</span>
<div class="mui-media-body">新闻资讯</div></router-link></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-email"></span>
<div class="mui-media-body">图片分享</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-chatbubble"></span>
<div class="mui-media-body">商品购买</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-location"></span>
<div class="mui-media-body">留言反馈</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">视频专区</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">联系我们</div></a></li>
</ul>
</div>
</div>
</template>
<script>
export default{
data(){
return {
swipeList:[
{
url: "http://www.itcast.cn/subject/phoneweb/index.html",
img: "http://ofv795nmp.bkt.clouddn.com/vuelogobanner1.jpg"
},
{
url: "http://www.itcast.cn/subject/phoneweb/index.html",
img: "http://ofv795nmp.bkt.clouddn.com/vuelogobanner2-1.jpg"
}
]
}
},
methods:{
// // 1.0 获取轮播图数据
// getimglist(){
// this.$http.get('http://vuecms.ittun.com/api/getlunbo')
// .then(res=>{
// // 将数据赋值给swipeList属性，自动导致v-for重新执行
// this.swipeList = res.body.message;
// });
// }
// },
// created(){
// //当进入Home.vue组件的时候请求数据
// this.getimglist();
}
}
</script>
<style scoped>
.mint-swipe{
height: 200px;
}
.mint-swipe img{
width: 100%;
}
.mint-swipe-item{
color:white;
}
//背景改成白色
.mui-content ul{
background: #fff;
}
//去掉边框
.mui-grid-view.mui-grid-9 .mui-table-view-cell{
border-right: 0;
border-bottom: 0;
}
//设置放图片div的大小,位置
.mui-icon-home,
.mui-icon-email,
.mui-icon-chatbubble,
.mui-icon-location,
.mui-icon-search,
.mui-icon-phone{
display: block;
width: 50px;
height: 50px;
/*图片大,设置图片环绕,就可以了*/
background-repeat: round;
margin-left: 24px;
}
//更换背景图片
.mui-icon-home{
background-image: url(../../static/imgs/menu3.png);
}
.mui-icon-email{
background-image: url(../../static/imgs/menu4.png);
}
.mui-icon-chatbubble{
background-image: url(../../static/imgs/menu5.png);
}
.mui-icon-location{
background-image: url(../../static/imgs/menu6.png);
}
.mui-icon-search{
background-image: url(../../static/imgs/menu9.png);
}
.mui-icon-phone{
background-image: url(../../static/imgs/menu10.png);
}
//将以前伪类对应的图片清空
.mui-icon-home:before,
.mui-icon-email:before,
.mui-icon-chatbubble:before,
.mui-icon-location:before,
.mui-icon-search:before,
.mui-icon-phone:before{
content: ''
}
</style>
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import newslist from '@/components/news/newslist'
Vue.use(Router)
export default new Router({
linkActiveClass:'mui-active', //将激活的路由添加一个mui-active类名称
routes:[
{path:'/Home',component:Home},
{path:'/news/newslist',component:newslist},
]
})
<template >
<div class="tmp1">
<ul class="mui-table-view">
<!-- <li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<div class="mui-media-body">
幸福
<p class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
</div>
</a>
</li> -->
<li v-for="item in newslist" class="mui-table-view-cell mui-media">
<a href="javascript:;">
<div class="mui-media-body">
{{item.title}}
<p class='mui-ellipsis'>{{item.add_time}}</p><span>{{item.click}}</span>
</div>
</a>
</li>
</ul>
</div>
</template>
<script>
export default{
methods:{
// 1.0 获取新闻数据列表
getnewslist(){
var url = 'http://vuecms.ittun.com/api/getnewslist'
this.$http.get(url).then(res=>{
if(res.body.status !==0){
Toast(res.body.message);
return ;
}
// 正常逻辑处理
this.newslist = res.body.message;
});
}
},
created(){
this.getnewslist();
},
data(){
return {
newslist:[
{
id: 13,
title: "1季度多家房企利润跌幅超50% 去库存促销战打响",
add_time: "2015-04-16T03:50:28.000Z",
zhaiyao: "房企一季度销售业绩已经陆续公布，克而瑞研究中心统计",
click: 1,
img_url: "http://ofv795nmp.bkt.clouddn.com//upload/201504/16/201504161149414479.jpg"
},
{
id: 14,
title: "买房还是炒股，2015年买房无法拒绝的5大理由",
add_time: "2015-04-16T04:05:34.000Z",
zhaiyao: "转眼间2015年已经过去了4个月，在这短短的四个月",
click: 2,
img_url: "http://ofv795nmp.bkt.clouddn.com//upload/201504/16/201504161205596364.jpg"
}
]
}
}
}
</script>
<style scoped>
.mui-table-view span{
position: absolute;
top: 27px;
right: 0;
}
.mui-table-view .mui-ellipsis{
margin-top: 10px;
}
</style>
