|
|
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>首页Window</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
header {
position: relative;
width: 100%;
height: 50px;
background-color: #e1017e;
}
header.left{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
}
header.left.arrow{
position: absolute;
bottom: 21px;
left:11px;
width: 13px;
height: 8px;
background: url(../image/arrow_down.png);
background-size: 13px 8px;
background-position: center center;
background-repeat: no-repeat;
-webkit-transition:200ms;
transition: 200ms;
}
header.left.arrow.active{
-webkitransform:rotate(180deg);
transform: rotate(180deg);
}
header.left.city{
position: relative;
z-index: 2;
width: 100%;
height: 50px;
padding-left: 27px;
box-sizing: border-box;
line-height: 50px;
font-size: 14px;
color: #fff;
text-align: left;
}
header.center{
width: 100%;
height: 50px;
background: url(../image/home_title.png);
background-size: 74px 19px;
background-position: center center;
background-repeat: no-repeat;
}
header.right{
position: absolute;
bottom: 0;
right: 0;
width: 40px;
height: 50px;
background: url(../image/home_membercenter.png);
background-size: 30px 30px;
background-position: center center;
background-repeat: no-repeat;
}
nav{
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient:horizontal;
-webkit-flex-flow:row;
flex-flow: row;
position: relative;
width: 100%;
height: 40px;
background-color: #e10173;
}
nav.menu{
-webkit-box-flex:1;
-webkit-flex:1；
flex:1;
width: 100%;
height: 40px;
line-height: 40px;
font-size: 13px;
color: #f973b8;
text-align: center;
}
nav.menu.selected{
font-size: 14px;
color: #fff;
font-weight: bolder;
}
</style>
</head>
<body>
<header id="header">
<div class="left"tapmode onclick="fnOpenCitySelectFrame();">
<div class="arrow" id="arrow"></div>
<div class="city" id="city">北京市</div>
</div>
<div class="center"></div>
<div class="right"tapmode onclick="fnOpenPersonCenterWin();"></div>
</header>
<nav id="nav">
<div class="menu selected" tapmode="selected" onclick="fnSetNavMenuIndex(0);">水果</div>
<div class="menu" tapmode="selected" onclick="fnSetNavMenuIndex(1);">食材</div>
<div class="menu" tapmode="selected" onclick="fnSetNavMenuIndex(2);">零食</div>
<div class="menu" tapmode="selected" onclick="fnSetNavMenuIndex(3);">牛奶</div>
<div class="menu" tapmode="selected" onclick="fnSetNavMenuIndex(4);">蔬菜</div>
</nav>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function() {
initEventListenner();
initLocation();
var header = $api.byid('header');
var nav =$api.byId('nav');
$api.fixStatusBar(header);
headerH = $api.offset(header).h;
navH = $api.offset(nav).h;
menus = $api.domAll(nav, '.menu');
}
function fnOpenCitySelectFrame(){
api.openFrame({
name: 'cityselect_frame',
url: './cityselect_frame.html',
rect: {
x: 0,
y: 50,
w: 'auto',
h: 'auto'
},
pageParam: {
name: 'test'
},
bounces: true,
bgColor: 'rgba(0,0,0,0)',
vScrollBarEnabled: true,
hScrollBarEnabled: true
});
}
function fnOpenPersonCenterWin(){
api.openWin({
name: 'login',
url: './html/login.html',
pageParam: {
name: 'test'
}
});
}
</script>
</html>
|
|
