<template>
<div class="hello">
<header class="mui-bar mui-bar-nav">
<!-- <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> -->
<h1 class="mui-title">依管家 -- 洗护高订专家</h1>
</header>
<div class="mui-content" style="border:0px solid #008000;">
<div id="slider" class="mui-slider" style="margin-top:-40px;">
<div class="mui-slider-group mui-slider-loop">
<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="../assets/images/test/yuantiao.jpg">
<p class="mui-slider-title">静静看这世界</p>
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="../assets/images/test/shuijiao.jpg">
<p class="mui-slider-title">幸福就是可以一起睡觉</p>
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="../assets/images/test/muwu.jpg">
<p class="mui-slider-title">想要一间这样的木屋，静静的喝咖啡</p>
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="../assets/images/test/cbd.jpg">
<p class="mui-slider-title">Color of SIP CBD</p>
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="../assets/images/test/yuantiao.jpg">
<p class="mui-slider-title">静静看这世界</p>
</a>
</div>
<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="../assets/images/test/shuijiao.jpg">
<p class="mui-slider-title">幸福就是可以一起睡觉</p>
</a>
</div>
</div>
<div class="mui-slider-indicator mui-text-right">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
<div class="mui-card">
<div class="mui-card-content">
<div class="mui-card-content-inner">
这是一个最简单的卡片视图控件；卡片视图常用来显示完整独立的一段信息，比如一篇文章的预览图、作者信息、点赞数量等
</div>
</div>
</div>
<div class="mui-card">
<div class="mui-card-header">页眉</div>
<div class="mui-card-content">
<div class="mui-card-content-inner">
包含页眉页脚的卡片，页眉常用来显示面板标题，页脚用来显示额外信息或支持的操作（比如点赞、评论等）
</div>
</div>
<div class="mui-card-footer">页脚</div>
</div>
<div class="mui-card">
<div class="mui-card-header mui-card-media" style="height:110px;width:300px;background-image:url(../assets/images/test/cbd.jpg)">
<!-- <img src="../assets/images/test/cbd.jpg" style="height:110px;width:300px"/> -->
</div>
<div class="mui-card-content">
<div class="mui-card-content-inner">
<p>Posted on January 18, 2016</p>
<p style="color: #333;">这里显示文章摘要，让读者对文章内容有个粗略的概念...</p>
</div>
</div>
<div class="mui-card-footer">
<a class="mui-card-link">Like</a>
<a class="mui-card-link">Read more</a>
</div>
</div>
<div class="mui-card">
<div class="mui-card-header mui-card-media">
<img src="../assets/images/test/logo.png" />
<div class="mui-media-body">
小M
<p>发表于 2016-06-30 15:30</p>
</div>
<img class="mui-pull-left" src="../assets/images/test/logo.png" width="34px" height="34px" />
<h2>小M</h2>
<p>发表于 2016-06-30 15:30</p>
</div>
<div class="mui-card-content" >
<img src="../assets/images/test/yuantiao.jpg" alt="" width="100%"/>
</div>
<div class="mui-card-footer">
<a class="mui-card-link">Like</a>
<a class="mui-card-link">Comment</a>
<a class="mui-card-link">Read more</a>
</div>
</div>
</div>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="#tabbar">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-chat">
<span class="mui-icon mui-icon-extra mui-icon-extra-prech">
<span class="mui-badge">9</span>
</span>
<span class="mui-tab-label">充值</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-contact">
<span class="mui-icon mui-icon-extra mui-icon-extra-cart"></span>
<span class="mui-tab-label">订单车</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-contact">
<span class="mui-icon mui-icon-extra mui-icon-extra-order"></span>
<span class="mui-tab-label">下单</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-map">
<span class="mui-icon mui-icon-extra mui-icon-extra-people"></span>
<span class="mui-tab-label">我的</span>
</a>
</nav>
<!-- <h1>{{ msg }}</h1> -->
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
mounted: function(){
mui.init({
swipeBack:true //启用右滑关闭功能【一旦取值为false，左右触控滑动将会失效！】
});
// mui.ready(function(){
// mui(".mui-scroll-wrapper").scroll({
// bounce: true //是否启用回弹
// });
// });
var slider = mui("#slider");
slider.slider({
interval: 1000
});
}
}
// mui.init({
// swipeBack:true //启用右滑关闭功能【一旦取值为false，左右触控滑动将会失效！】
// });
// // var slider = mui("#slider");
// // slider.slider({
// // interval: 1000
// // });
// mui.ready(function(){
// mui(".mui-scroll-wrapper").scroll({
// bounce: true //是否启用回弹
// });
// });
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
margin-bottom: 55px;
}
h3 {
margin: 10px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
网友评论