<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../css/mui.min.css" rel="stylesheet" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
.imageView0{width: 100%;height: 140px;}
.imageView6{width: 100%;clear: both;margin-top: 4px;}
.imageView1{width: 32%;height: 100%;background-color: #0099FF;float: left;text-align: center;display: block;}
.imageView1 img{width: 100%;}
.imageView2{width: 32%;height: 100%;float: left;margin-left: 2%;text-align: center;display: block;}
.imageView2 img{width: 30%;}
.imageView3{width: 32%;height: 100%;background-color:#CC66CC ;float:right;text-align: center;display: block;}
.imageView3 img{width: 100%;}
.imageView4{width: 49%;height: 70px;background-color:#FF9999 ;float: left;display: block;}
.imageView4 img{width: 30%;margin-top: 14%;margin: auto;}
.imageView5{width: 49%;height: 70px;background-color:#FF6633 ;float: right;display: block;}
.imageView5 img{width: 30%;margin-top: 14%;margin: auto;}
</style>
</head>
<body>
<script src="../js/mui.min.js"></script>
<!--导航栏
<header class="mui-bar mui-bar-nav" style="background-color: #000000;">
<h1 class="mui-title"style="color: #FFFFFF;">橙消费系统首页</h1>
</header>
-->
<!--轮播视图-->
<div class="mui-slider"style="margin-top: 44px;">
<div class="mui-slider-group mui-slider-loop">
<!--支持循环,需要重复图片节点-->
<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="../images/images/主页/u15.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="../images/images/主页/u7.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="../images/images/主页/u23.jpg"/></a></div>
<div class="mui-slider-item"><a href="#"><img src="../images/images/主页/u15.jpg" /></a></div>
<!--支持循环,需要重复图片节点-->
<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="../images/images/主页/u7.jpg" /></a></div>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
</div>
</div>
<script>
var gallery = mui('.mui-slider');
gallery.slider({
interval:3100
});
</script>
<!--imageView -->
<div style="height: 4px;"></div>
<div class="imageView0">
<div class="imageView1">
<a href="govermentCompany.html">
<div style="width: 60%;margin: auto;margin-top: 25%;overflow: auto;">
<img src="../images/images/主页/u43.png">
<p style="color: #FFFFFF;">政企租机</p>
</div>
</a>
</div>
<div class="imageView2">
<div style="width: 100%;height: 48%;background-color:#FFCC33 ;overflow: auto;">
<img style="float: left;margin-top: 20%;" src="../images/images/主页/u51.png">
<p style="color: #FFFFFF;float: left;margin-top: 25%;width: 70%;">VIP业务</p>
</div>
<div style="width: 100%;height: 48%;background-color:#FFCCFF ;margin-top: 4%;overflow: auto;">
<img style="float: left;margin-top: 30%;" src="../images/images/主页/u55.png">
<p style="color: #FFFFFF;float: left;margin-top: 25%;width: 70%;">企业团购</p>
</div>
</div>
<div class="imageView3">
<div style="width: 60%;margin: auto;margin-top: 25%;overflow: auto;">
<img style="float: left;" src="../images/images/主页/u47.png">
<p style="color: #FFFFFF;">校园业务</p>
</div>
</div>
<div class="imageView6">
<div style="height: 4px"></div>
<div class="imageView4">
<div style="width: 80%;margin: auto;overflow: auto;margin-top: 10%;">
<img style="float: left;" src="../images/images/主页/u59.png">
<p style="color: #FFFFFF;float: right;margin-top: 10%;">信用卡业务</p>
</div>
</div>
<div class="imageView5">
<div style="width: 80%;margin: auto;overflow: auto;margin-top: 10%;">
<img style="float: left;" src="../images/images/主页/u63.png">
<p style="color: #FFFFFF;float: right;margin-top: 10%">工资卡业务</p>
</div>
</div>
</div>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 id="title" class="mui-title">我的主页</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a id="defaultTab" class="mui-tab-item mui-active" href="homepage.html">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">我的主页</span>
</a>
<a class="mui-tab-item" href="weChat.html">
<span class="mui-icon mui-icon-weixin"><span class="mui-badge">9</span></span>
<span class="mui-tab-label">绑定微信</span>
</a>
<a class="mui-tab-item" href="news.html">
<span class="mui-icon mui-icon-chat"></span>
<span class="mui-tab-label">消息提醒</span>
</a>
<a class="mui-tab-item" href="mePage.html">
<span class="mui-icon mui-icon-contact"></span>
<span class="mui-tab-label">我的账户</span>
</a>
</nav>
<script src="../js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
//mui初始化
mui.init();
var subpages = ['homepage.html', 'weChat.html', 'news.html', 'mePage.html'];
var subpage_style = {
top: '45px',
bottom: '51px'
};
var aniShow = {};
//创建子页面,首个选项卡页面显示,其它均隐藏;
mui.plusReady(function() {
var self = plus.webview.currentWebview();
for (var i = 0; i < 4; i++) {
var temp = {};
var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
self.append(sub);
if (i > 0) {
sub.hide();
}else{
temp[subpages[i]] = "true";
mui.extend(aniShow,temp);
}
self.append(sub);
}
});
//当前激活选项
var activeTab = subpages[0];
var title = document.getElementById("title");
//选项卡点击事件
mui('.mui-bar-tab').on('tap', 'a', function(e) {
var targetTab = this.getAttribute('href');
if (targetTab == activeTab) {
return;
}
//更换标题
title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
//显示目标选项卡
//若为iOS平台或非首次显示,则直接显示
if(mui.os.ios||aniShow[targetTab]){
plus.webview.show(targetTab);
}else{
//否则,使用fade-in动画,且保存变量
var temp = {};
temp[targetTab] = "true";
mui.extend(aniShow,temp);
plus.webview.show(targetTab,"fade-in",300);
}
//隐藏当前;
plus.webview.hide(activeTab);
//更改当前活跃的选项卡
activeTab = targetTab;
});
//自定义事件,模拟点击“首页选项卡”
document.addEventListener('gohome', function() {
var defaultTab = document.getElementById("defaultTab");
//模拟首页点击
mui.trigger(defaultTab, 'tap');
//切换选项卡高亮
var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
if (defaultTab !== current) {
current.classList.remove('mui-active');
defaultTab.classList.add('mui-active');
}
});
</script>
</body>
</html>