minxing-devtools-core
Version:
397 lines (389 loc) • 14.5 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>frame</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<link rel="stylesheet" type="text/css" href="../css/common.css" />
<style>
#main{
padding: 0;
}
.pull-left{
float: left;
}
.pull-right{
float: right;
}
.profile_box{
height: 182px;
width: 100%;
background: url(../image/api_35.png) center center no-repeat;
background-size: 100% 100%;
}
.profile_box.ta{
background: url(../image/tm_bg_profile_banner_savvy.png) center center no-repeat;
background-size: 100% 100%;
}
.profile_top{
width: 100%;
height: 121px;
position: relative;
}
.profile_top.ta{
height: 134px;
}
.profile_top .msg_icon{
position: absolute;
right: 24px;
color: #FFF;
top: 13px;
width: 26px;
height: 18px;
background: url(../image/tm_mytmall_icon_message.png) center center no-repeat;
background-size: 100% 100%;
}
.profile_top .qrcode-icon{
position: absolute;
right: 24px;
color: #FFF;
top: 13px;
width: 24px;
height: 24px;
background: url(../image/tm_icon_fun_qrcode.png) center center no-repeat;
background-size: 100% 100%;
}
.profile_top .config{
position: absolute;
right: 24px;
color: #FFF;
bottom: 13px;
}
.profile_top .user-icon{
position: absolute;
width: 90px;
height: 90px;
left: 50%;
top: 14px;
display: block;
border-radius: 45px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.profile_top .user-box{
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.user-box .user-name{
color: #FFF;
}
.profile_top .user-gender{
display: inline-block;
width: 15px;
height: 19px;
vertical-align: bottom;
}
.user-gender.male{
background: url(../image/tm_icon_gender_male.png) center center no-repeat;
background-size: 15px 19px;
}
.user-gender.female{
background: url(../image/tm_icon_gender_female.png) center center no-repeat;
background-size: 15px 19px;
}
.login_btn{
border: 1px solid #FFF;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
padding: 0.5em 1em;
border-radius: 5px;
color: #FFF;
}
.profile_box .tabBar-ta{
height: 42px;
width: 100%;
}
.tabBar-ta .tabBar_inner{
float: left;
width: 33%;
height: 100%;
background: url(../image/profile_white_dividing.png) right center no-repeat;
background-size: 1px 100%;
}
.tabBar-ta .tabBar_inner.last{
background: none;
}
.tabBar-ta .tabBar_inner span{
height: 42px;
line-height: 42px;
text-align: center;
display: block;
color: #FFF;
}
.tabBar-ta .tabBar_inner .follow-icon{
background: url(../image/ic_btn_pin_normal.png) center center no-repeat;
background-size: 90px 26px;
}
.tabBar-ta .tabBar_inner .follow-icon.followed{
background: url(../image/ic_btn_pined_normal.png) center center no-repeat;
background-size: 90px 26px;
}
.tabBar-ta .tabBar_inner:active .follow-icon{
background: url(../image/ic_btn_pin_press.png) center center no-repeat;
background-size: 90px 26px;
}
.tabBar-ta .tabBar_inner:active .follow-icon.followed{
background: url(../image/ic_btn_pined_press.png) center center no-repeat;
background-size: 90px 26px;
}
.my-intro{
padding: 0.9em 0.5em;
color: #6A6A6A;
background-color: #FFF;
}
.photos-header{
height: 45px;
border-top: 1px solid #CCC;
background-color: #FFF;
}
.photos-header .tabs-inner{
width: 33%;
text-align: center;
float: left;
height: 45px;
line-height: 45px;
background: url(../image/profile_white_dividing.png) right center no-repeat;
background-size: 1px 100%;
}
.photos-header .tabs-inner.last{
background: none;
}
.photos-header .tabs-inner .tabs-icon{
display: inline-block;
width: 16px;
height: 45px;
vertical-align: bottom;
}
.tabs-inner .tabs-icon.mypost{
background: url(../image/tm_ic_mypost_normal.png) center center no-repeat;
background-size: 16px 16px;
}
.tabs-inner.active .tabs-icon.mypost{
background: url(../image/tm_ic_mypost_pressed.png) center center no-repeat;
background-size: 16px 16px;
}
.tabs-inner .tabs-icon.like{
background: url(../image/tm_ic_like_normal.png) center center no-repeat;
background-size: 16px 16px;
}
.tabs-inner.active .tabs-icon.like{
background: url(../image/tm_ic_like_selected.png) center center no-repeat;
background-size: 16px 16px;
}
.tabs-inner .tabs-icon.pics{
background: url(../image/tm_ic_pics_normal.png) center center no-repeat;
background-size: 16px 16px;
}
.tabs-inner.active .tabs-icon.pics{
background: url(../image/tm_ic_pics_press.png) center center no-repeat;
background-size: 16px 16px;
}
.tabs-inner .tabs-text{
color: #888888;
height: 45px;
line-height: 45px;
}
.tabs-inner.active .tabs-text{
color: #C41000;
}
.profile_box .tabBar{
height: 61px;
width: 100%;
background-color: #323237;
}
.tabBar .tabBar_inner{
float: left;
width: 20%;
height: 100%;
background: url(../image/profile_tabBar_dividing.png) right center no-repeat;
background-size: 1px 100%;
}
.tabBar .tabBar_inner:active{
background: #A5A5A5 url(../image/profile_tabBar_dividing.png) right center no-repeat;
background-size: 1px 100%;
}
.tabBar .tabBar_inner.last{
background: none;
}
.tabBar .tabBar_inner.last:active{
background: #A5A5A5;
}
.tabBar_inner .text{
font-size: 0.7em ;
}
.tabBar_inner .num_top,.tabBar_inner .text{
color: #FFF;
margin-top: 0.5em;
display: block;
text-align: center;
}
.profile_detail_container{
padding-right: 0.75em;
}
.profile_detail_box{
margin-top: 0.75em;
}
.profile_detail_inner{
width: 33.3%;
padding-left: 0.75em;
}
.profile_detail{
background-color: #FFF;
}
.profile_detail:active{
background-color: #CBCBCB;
}
.profile_detail img{
margin: 0 auto;
padding: 1em 0;
width: 40px;
display: block;
}
.profile_detail .title{
display: block;
font-size: 0.9em;
text-align: center;
margin-bottom: 0.7em;
text-indent: 0 ;
}
.profile_detail .brief{
display: block;
font-size: 0.5em;
color: #9E9E9E;
text-align: center;
padding-bottom: 1em;
text-indent: 0 ;
}
.clearfix:after{
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<div id="wrap">
<div id="main">
<div class="profile_box">
<div class="profile_top">
<i class="msg_icon" tapmode onclick=""></i>
<span class="config" tapmode onclick="">设置</span>
<span class="login_btn" tapmode onclick="">点击登录</span>
</div>
<div class="tabBar">
<div class="tabBar_inner" tapmode>
<span class="num_top">0</span>
<span class="text">待付款</span>
</div>
<div class="tabBar_inner" tapmode>
<span class="num_top">0</span>
<span class="text">待发货</span>
</div>
<div class="tabBar_inner" tapmode>
<span class="num_top">0</span>
<span class="text">待收货</span>
</div>
<div class="tabBar_inner" tapmode>
<span class="num_top">0</span>
<span class="text">待评价</span>
</div>
<div class="tabBar_inner last" tapmode>
<span class="num_top">0</span>
<span class="text">退款/售后</span>
</div>
</div>
</div>
<div class="profile_detail_container">
<div class="profile_detail_box clearfix">
<div class="profile_detail_inner pull-left">
<div class="profile_detail" tapmode>
<img src="../image/profile_item1.png" alt="">
<span class="title">全部订单</span>
<span class="brief">查看所有</span>
</div>
</div>
<div class="profile_detail_inner pull-left">
<div class="profile_detail" tapmode>
<img src="../image/profile_item2.png" alt="">
<span class="title">天猫会员</span>
<span class="brief">天猫会员</span>
</div>
</div>
<div class="profile_detail_inner pull-left">
<div class="profile_detail" tapmode>
<img src="../image/profile_item3.png" alt="">
<span class="title">收藏商品</span>
<span class="brief">收藏过的商品</span>
</div>
</div>
</div>
<div class="profile_detail_box clearfix">
<div class="profile_detail_inner pull-left">
<div class="profile_detail" tapmode>
<img src="../image/profile_item2.png" alt="">
<span class="title">天猫宝</span>
<span class="brief">查看余额</span>
</div>
</div>
<div class="profile_detail_inner pull-left">
<div class="profile_detail" tapmode>
<img src="../image/profile_item5.png" alt="">
<span class="title">优惠券</span>
<span class="brief">我的优惠券</span>
</div>
</div>
<div class="profile_detail_inner pull-left">
<div class="profile_detail" tapmode>
<img src="../image/profile_item6.png" alt="">
<span class="title">会员卡</span>
<span class="brief">我的会员卡</span>
</div>
</div>
</div>
<div class="profile_detail_box clearfix">
<div class="profile_detail_inner pull-left">
<div class="profile_detail" tapmode>
<img src="../image/profile_item7.png" alt="">
<span class="title">收藏店铺</span>
<span class="brief">收藏过的店铺</span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.min.js"></script>
<script type="text/javascript">
apiready = function(){
var profile = $api.dom('.profile_box');
$api.fixIos7Bar(profile);
Zepto(function($){
var em = parseInt(getComputedStyle(document.body,false).fontSize);
var emW = em*3/4;
var bodyW = $api.offset(document.body).w;
var sp1_3 = (bodyW - 4*emW)/3;
$('.profile_detail_inner').width(sp1_3);
});
}
</script>
</html>