minxing-devtools-core
Version:
141 lines (126 loc) • 6.33 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<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" />
<link rel="stylesheet" type="text/css" href="../css/common.css" />
<style>
/* 头部样式 */
.topbar {background: #f2f2f2; height:50px; border-bottom: 1px solid #DDDFE3;}
.topbar_title {display: inline-block;font-size: 20px; line-height: 50px;padding-left: 12px;}
.hr01, .hr02 {height: 28px;}
.headerico {padding: 11px 15px 11px 15px;}
.headericohover {background: #DADDE0;}
.fr{float: right;}
.fl{float: left;}
/*第一头部*/
#logo {padding: 11px 0 0 10px;height: 28px;}
#citylist {height: 50px; line-height: 50px;padding-left: 15px; font-size: 18px; color: #6ab494;}
.citylistarrow {vertical-align: top; width: 20px; padding-top: 15px;}
.search {height: 34px;line-height: 34px; padding-left: 10px; border-radius: 30px; margin-top: 8px; position: absolute; left: 20px; right: 60px;font-size: 14px;}
.search img {vertical-align: top; width: 20px; padding-top: 7px;padding-right: 10px;}
.firstSearch {left: 90px;right: 60px;background-color: #e5e5e5;color: #999;}
/* 头部切换样式 */
.titlebar {display: none;}
.activebar {display: block;}
/* 底部切换按钮样式 */
ul {display: -webkit-box; display: -webkit-flex; display: flex; }
#footer {height: 61px; line-height: 60px; background-color: #f2f2f2;border-top: 1px solid #FAFAFA; }
#footer li{-webkit-box-flex: 1; -webkit-flex: 1; flex:1; height: 60px;}
/* 选项卡样式 */
.scrollbar {display: -webkit-box;display: -webkit-flex; display: flex;text-align: center; height: 40px; line-height: 40px;background: #EBECF0;font-size: 12px;position: relative;}
.col1 {-webkit-box-flex:1;-webkit-flex: 1;flex:1;color: #909090;}
.indexbar {position: absolute;/*background: #0fc;*/width: 50%;height: 5px;left: 0px;bottom: 0px;-webkit-transition: 300ms;}
.redbox {background: #DB4646;width: 40px;height: 5px;position: relative;left: auto;right: auto; margin-left: auto; margin-right: auto;}
/********************/
/* 底部按钮原始样式 */
/********************/
.bbtn01 {background: url(../image/main_index_home_normal.png) no-repeat center 4px; }
.bbtn02 {background: url(../image/main_index_tuan_normal.png) no-repeat center 4px; }
.bbtn03 {background: url(../image/main_index_search_normal.png) no-repeat center 4px; }
.bbtn04 {background: url(../image/main_index_my_normal.png) no-repeat center 4px; }
.bottom_btn {width: 99%; height: 43px;padding-top: 18px;background-position-y: 4px; background-size: 30px; font-size: 12px; color: #A5A5A5;}
/* 底部按钮激活样式 */
.activebtn0 {background: url(../image/main_index_home_pressed.png) no-repeat center 4px; }
.activebtn1 {background: url(../image/main_index_tuan_pressed.png) no-repeat center 4px; }
.activebtn2 {background: url(../image/main_index_search_pressed.png) no-repeat center 4px; }
.activebtn3 {background: url(../image/main_index_my_pressed.png) no-repeat center 4px; }
.activebtn {color:#6ab494; background-size: 30px; }
.bottomhover {background-color: #46494B;}
/* 本地刷新图标 */
#localrefresh {display:none;float: right; width: 40px; padding: 5px 10px;}
</style>
</head>
<body>
<div id="wrap">
<!-- 第一头部 -->
<div id="firstHeader" class="titlebar activebar">
<div class="topbar">
<div class="citylist fl" id="citylist" tapmode onclick="">北京<img src="../image/title_home_arrow_down_normal.png" alt="" class="citylistarrow"></div>
<div class="search firstSearch" tapmode onclick="">
<img src="../image/ic_home_search.png" alt="">输入商户名、地点
</div>
<img src="../image/send_msg.png" alt="" class="fr headerico hr01" tapmode="" onclick="">
</div>
</div>
<div id="main">
</div>
<div id="footer">
<ul>
<li tapmode="activebtn0 activebtn" onclick="">
<a class="bottom_btn bbtn01 weixin activebtn activebtn0">首页</a>
</li>
<li tapmode="activebtn1 activebtn" onclick="">
<a class="bottom_btn bbtn02 communicate">团购</a>
</li>
<li tapmode="activebtn2 activebtn" onclick="">
<a class="bottom_btn bbtn03 discover">发现</a>
</li>
<li tapmode="activebtn3 activebtn" onclick="">
<a class="bottom_btn bbtn04 home">我的</a>
</li>
</ul>
</div>
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
var firstHeader = $api.byId('firstHeader');
var firstHeaderOffset;
var main = $api.byId('main');
var mainPos = $api.offset(main);
var footer = $api.byId('footer');
var footerPos = $api.offset(footer);
// 完成首页初始化
apiready = function(){
// 设置ios7的标题栏字体变亮，全局用一个就行了
api.setStatusBarStyle({
style: 'dark'
});
firstHeader = $api.byId('firstHeader');
$api.fixIos7Bar(firstHeader);
firstHeaderOffset = $api.offset(firstHeader);
var main = $api.byId('main');
var mainPos = $api.offset(main);
var footer = $api.byId('footer');
var footerPos = $api.offset(footer);
api.openFrame ({
name: 'apicloudFrame1',
url: './apicloudFrame1.html',
rect:{
x:0,
y:firstHeaderOffset.h,
w:'auto',
h:api.frameHeight-firstHeaderOffset.h -footerPos.h
},
bounces: true,
opaque: false,
vScrollBarEnabled:false,
hScrollBarEnabled:false
});
};
</script>
</html>