minxing-devtools-core
Version:
231 lines (224 loc) • 7.82 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>
html,body{height: 100%}
#wrap{
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-flex-flow: column;
flex-flow: column;
}
.pull-left{
float: left;
}
.pull-right{
float: right;
}
.clearfix:after{
content: '';
display: block;
clear: both;
}
#index{
background-color: #EDEDED;
}
#header{
background-color: #ffffff;
}
#header .header-content{
height: 48px;
width: 100%;
position: relative;
}
#header .header-btn{
width: 56px;
height: 48px;
}
#header .header-btn.tap-active,#header .header-btn:active{
background-color: #ffffff;
}
.header-btn.qiushi{
background: url(../image/ic_qiushi.png) center center no-repeat;
background-size: 24px 24px;
}
.header-btn.nearby{
background: url(../image/ic_nearby.png) center center no-repeat;
background-size: 24px 24px;
}
.header-btn.message{
background: url(../image/ic_message.png) center center no-repeat;
background-size: 24px 24px;
}
.header-btn.qiubaihuo{
background: url(../image/ic_qiubaihuo.png) center center no-repeat;
background-size: 24px 24px;
}
.header-btn.menu{
background: url(../image/page_menu_icon.png) center center no-repeat;
background-size: 24px 24px;
}
.qiushi-tap-active,.header-btn.qiushi.active{
background: url(../image/ic_qiushi_select.png) center center no-repeat;
background-size: 24px 24px;
}
.nearby-tap-active,.header-btn.nearby.active{
background: url(../image/ic_nearby_select.png) center center no-repeat;
background-size: 24px 24px;
}
.message-tap-active,.header-btn.message.active{
background: url(../image/ic_message_select.png) center center no-repeat;
background-size: 24px 24px;
}
.qiubaihuo-tap-active,.header-btn.qiubaihuo.active{
background: url(../image/ic_qiubaihuo_select.png) center center no-repeat;
background-size: 24px 24px;
}
.qiushi-tabBar{
height: 48px;
background-color: #E5E5E5;
position: relative;
}
.qiushi-tabBar .tabBar-btn{
width: 20%;
height: 47px;
border-bottom: 1px solid #CDCDCD;
font-size: 0.8em;
line-height: 48px;
color: #63625E;
}
.qiushi-tabBar .tabBar-btn:active,.qiushi-tabBar .tabBar-btn.tap-active{
background-color: #E5E5E5;
color: #72716E;
}
.qiushi-tabBar .tabBar-btn.active,.tabBar-btn.text-active{
color: #6ab494;
}
.qiushi-tabBar .tabBar-bar{
position: absolute;
left: 0;
bottom: 0;
width: 20%;
height: 4px;
background-color: #6ab494;
-webkit-transition: all .25s ease;
transition: all .25s ease;
}
#bottom-tabBar{
width: 100%;
height: 48px;
}
.bottom-btn{
width: 50%;
height: 48px;
text-align: center;
}
.icon{
height: 48px;
width: 24px;
display: inline-block;
vertical-align: middle;
}
.text{
display: inline-block;
height: 48px;
line-height: 48px;
}
.bottom-spliter{
position: absolute;
left: 50%;
top: 50%;
width: 1px;
height: 24px;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
#bottom-tabBar{
position: relative;
}
#bottom-tabBar .bottom-btn{
background-color: #E5E5E5;
}
#bottom-tabBar .bottom-btn:active,#bottom-tabBar .bottom-btn.top-active{
background-color: #E5E5E5;
}
#bottom-tabBar .icon-submit{
background: url(../image/submit.png) center center no-repeat;
background-size: 24px 24px;
}
#bottom-tabBar .icon-examine{
background: url(../image/examine.png) center center no-repeat;
background-size: 24px 24px;
}
#bottom-tabBar .bottom-spliter{
background-color: #FEF0CF;
}
#bottom-tabBar .text{
color: #323237;
}
</style>
</head>
<body id="index">
<div id="wrap">
<div id="header">
<div class="header-content clearfix">
<div class="header-btn qiushi pull-left active" tapmode="qiushi-tap-active" onclick=""></div>
<div class="header-btn nearby pull-left " tapmode="nearby-tap-active" onclick=""></div>
<div class="header-btn message pull-left" tapmode="message-tap-active" onclick=""></div>
<div class="header-btn menu pull-right" tapmode="tap-active" onclick=""></div>
<div class="header-btn qiubaihuo pull-right " tapmode="qiubaihuo-tap-active"></div>
</div>
<div class="qiushi-tabBar clearfix">
<div class="tabBar-btn pull-left all-type text-active" tapmode="text-active" onclick="">图文</div>
<div class="tabBar-btn pull-left text-type " tapmode="text-active" onclick="">纯文</div>
<div class="tabBar-btn pull-left pic-type" tapmode="text-active" onclick="">纯图</div>
<div class="tabBar-btn pull-left latest-type" tapmode="text-active" onclick="">最新</div>
<div class="tabBar-btn pull-left essence-type" tapmode="text-active" onclick="">精华</div>
<div class="tabBar-bar"></div>
</div>
</div>
<div id="main">
</div>
<div id="bottom-tabBar">
<div class="pull-left bottom-btn" tapmode="tap-active" onclick="">
<span class="icon icon-submit"></span>
<span class="text">投稿</span>
</div>
<div class="pull-left bottom-btn" tapmode="tap-active" onclick="">
<span class="icon icon-examine"></span>
<span class="text">审帖</span>
</div>
<div class="bottom-spliter"></div>
</div>
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready=function(){
var header=$api.byId('header'),
main = $api.byId('main');
$api.fixIos7Bar(header);
var header_h=$api.offset(header).h,
main_h = $api.offset(main).h;
api.openFrame({
name:'apicloudFrame1',
url:'apicloudFrame1.html',
rect:{
x:0,
y:header_h,
w:'auto',
h:main_h
}
})
}
</script>
</html>