mui 上门取件

最新推荐文章于 2021-02-26 15:58:14 发布

eyugod

最新推荐文章于 2021-02-26 15:58:14 发布

阅读量595

点赞数

本文链接：https://blog.csdn.net/eyugod/article/details/73348737

版权

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<link rel="stylesheet" href="css/mui.min.css">
<link href="css/mui.picker.css" rel="stylesheet" />
<link href="css/mui.poppicker.css" rel="stylesheet" />
<style>
body {
font-family: "微软雅黑";
background-color: #efeff4;
/**font-size:14px;**/
}
.mui-views,
.mui-view,
.mui-pages,
.mui-page,
.mui-page-content {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: #efeff4;
}
.mui-pages {
top: 46px;
height: auto;
}
.mui-scroll-wrapper,
.mui-scroll {
background-color: #efeff4;
}
.mui-page.mui-transitioning {
-webkit-transition: -webkit-transform 300ms ease;
transition: transform 300ms ease;
}
.mui-page-left {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.mui-ios .mui-page-left {
-webkit-transform: translate3d(-20%, 0, 0);
transform: translate3d(-20%, 0, 0);
}
.mui-navbar {
position: fixed;
right: 0;
left: 0;
z-index: 10;
height: 44px;
background-color: #f7f7f8;
}
.mui-navbar .mui-bar {
position: absolute;
background: transparent;
text-align: center;
}
.mui-android .mui-navbar-inner.mui-navbar-left {
opacity: 0;
}
.mui-ios .mui-navbar-left .mui-left,
.mui-ios .mui-navbar-left .mui-center,
.mui-ios .mui-navbar-left .mui-right {
opacity: 0;
}
.mui-navbar .mui-btn-nav {
-webkit-transition: none;
transition: none;
-webkit-transition-duration: .0s;
transition-duration: .0s;
}
.mui-navbar .mui-bar .mui-title {
display: inline-block;
width: auto;
}
.mui-page-shadow {
position: absolute;
right: 100%;
top: 0;
width: 16px;
height: 100%;
z-index: -1;
content: '';
}
.mui-page-shadow {
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
}
.mui-navbar-inner.mui-transitioning,
.mui-navbar-inner .mui-transitioning {
-webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease;
transition: opacity 300ms ease, transform 300ms ease;
}
.mui-page {
display: none;
}
.mui-pages .mui-page {
display: block;
}
.mui-page .mui-table-view:first-child {
margin-top: 15px;
}
.mui-page .mui-table-view:last-child {
margin-bottom: 30px;
}
.mui-table-view {
margin-top: 20px;
}

.mui-table-view span.mui-pull-right {
color: #999;
}
.mui-table-view-divider {
background-color: #efeff4;
font-size: 14px;
}
.mui-table-view-divider:before,
.mui-table-view-divider:after {
height: 0;
}
.head {
height: 40px;
}
#head {
line-height: 40px;
}
.head-img {
width: 40px;
height: 40px;
}
#head-img1 {
position: absolute;
bottom: 10px;
right: 40px;
width: 40px;
height: 40px;
}
.update {
font-style: normal;
color: #999999;
margin-right: -25px;
font-size: 15px
}
.mui-fullscreen {
position: fixed;
z-index: 20;
background-color: #000;
}
.mui-ios .mui-navbar .mui-bar .mui-title {
position: static;
}
/*问题反馈在setting页面单独的css*/
#feedback .mui-popover{
position: fixed;
}
#feedback .mui-table-view:last-child {
margin-bottom: 0px;
}
#feedback .mui-table-view:first-child {
margin-top: 0px;
}
.radius {
width: 35px;
height: 35px;
line-height: 35px;
margin-right: 20px;
text-align: center;
border-radius: 30px;
font-size: 14px;
}

.bcred {
background-color: #006741;
color: #F2F2F2;
font-weight: bold;
}

.bcblue {
background-color: #EC971F;
color: #F2F2F2;
font-weight: bold;
}

.mui-media-body {
height: 35px;
line-height: 35px;
}

.fgray {
color: #ACACB4;
font-size: 16px;
}

.agree {
font-size: 14px;
}
.mui-popup-text{
height:200px;
overflow-y: auto;

}
.setTime{
padding-right:20px;

}
.setsendTimetitle{
margin-left:20px;
}
</style>
</head>

<body class="mui-fullscreen">


<div id="app" class="mui-views">
<div class="mui-view">
<div class="mui-navbar">
</div>
<div class="mui-pages">
</div>
</div>
</div>



<div id="setting" class="mui-page">

<div class="mui-navbar-inner mui-bar mui-bar-nav">
<h1 class="mui-center mui-title">上门取件</h1>
</div>



<div class="mui-page-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<form id='login-form' class="mui-input-group" >
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-media">
<a href="#address" class="mui-navigate-right" id="address1">
<div class="mui-pull-left radius bcred">寄</div>
<div class="mui-media-body fgray">
请选择寄件地址
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="#address" class="mui-navigate-right" id="address2">
<div class="mui-pull-left radius bcblue">收</div>
<div class="mui-media-body fgray">
请选择收件地址
</div>
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" id="setsendTime">
<div class="mui-pull-left setsendTimetitle">收件时间</div>
<div class="mui-pull-right setTime" id="sendTime">
1小时以内
</div>
</a>
</li>
</ul>
</form>

<form class="mui-input-group" style="margin-bottom: 15px;">
<div class="mui-input-row mui-radio mui-right">
<label>常规件</label>
<input name="radio1" type="radio" >
</div>
<div class="mui-input-row mui-radio mui-right">
<label>大件</label>
<input name="radio1" type="radio" checked>
</div>

</form>

<form class="mui-input-group" >
<div class="mui-input-row">
<label>费用</label>
<input type="text" id="cose" style="text-align:right;" readonly="readonly" value="8.5元">
</div>
</form>
<br/>
<div class="mui-input-row">
<button id='login' class="mui-btn mui-btn-block mui-btn-primary" style="width:100%">支付</button>
</div>
<div class="mui-input-row mui-checkbox mui-text-center">
<label class="agree">提交即同意<a id="alertMessage">《快递运单契约条款》</a></label>

</div>
</div>
</div>
</div>
</div>

<div id="address" class="mui-page">
<div class="mui-navbar-inner mui-bar mui-bar-nav">
<button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
<span class="mui-icon mui-icon-left-nav"></span>返回
</button>
<h1 class="mui-center mui-title">地址管理</h1>
</div>
<div class="mui-page-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<div style="padding: 10px 10px;">
<div id="segmentedControl" class="mui-segmented-control">
<a class="mui-control-item mui-active" href="#item1" id="addtab1">寄件人地址</a>
<a class="mui-control-item" href="#item2" id="addtab2">收件人地址</a>
</div>
</div>
<div>
<div id="item1" class="mui-control-content mui-active">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-8">
<h4 class="mui-ellipsis">王明阳</h4>
</div>
<div class="mui-table-cell mui-col-xs-4 mui-text-right">
<span class="mui-h5">18721037940</span>
</div>
</div>
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-12">
<p class="mui-h6 mui-ellipsis">Hi，李明明，申请交行信息卡，100元等你拿，李明明，申请交行信息卡，100元等你拿，</p>
</div>

</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-8">
<h4 class="mui-ellipsis">王明阳</h4>
</div>
<div class="mui-table-cell mui-col-xs-4 mui-text-right">
<span class="mui-h5">18721037940</span>
</div>
</div>
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-12">
<p class="mui-h6 mui-ellipsis">Hi，李明明，申请交行信息卡，100元等你拿，李明明，申请交行信息卡，100元等你拿，</p>
</div>

</div>
</li>

</ul>
</div>
<div id="item2" class="mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-8">
<h4 class="mui-ellipsis">王明阳</h4>
</div>
<div class="mui-table-cell mui-col-xs-4 mui-text-right">
<span class="mui-h5">18721037940</span>
</div>
</div>
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-12">
<p class="mui-h6 mui-ellipsis">Hi，李明明，申请交行信息卡，100元等你拿，李明明，申请交行信息卡，100元等你拿，</p>
</div>

</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-8">
<h4 class="mui-ellipsis">王明阳</h4>
</div>
<div class="mui-table-cell mui-col-xs-4 mui-text-right">
<span class="mui-h5">18721037940</span>
</div>
</div>
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-12">
<p class="mui-h6 mui-ellipsis">Hi，李明明，申请交行信息卡，100元等你拿，李明明，申请交行信息卡，100元等你拿，</p>
</div>

</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-8">
<h4 class="mui-ellipsis">王明阳</h4>
</div>
<div class="mui-table-cell mui-col-xs-4 mui-text-right">
<span class="mui-h5">18721037940</span>
</div>
</div>
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-12">
<p class="mui-h6 mui-ellipsis">Hi，李明明，申请交行信息卡，100元等你拿，李明明，申请交行信息卡，100元等你拿，</p>
</div>

</div>
</li>
</ul>
</div>

</div>
</div>
</div>
</div>
</div>
</body>
<script src="js/mui.min.js"></script>
<script src="js/mui.view.js"></script>
<script src="js/mui.picker.min.js"></script>
<script src="js/sendTime.data.js"></script>

<script>
mui.init({
swipeBack: true //启用右滑关闭功能
});
//初始化单页view
var viewApi = mui('#app').view({
defaultPage: '#setting'
});
//初始化单页的区域滚动
mui('.mui-scroll-wrapper').scroll();

document.getElementById("alertMessage").addEventListener('tap', function() {
mui.alert('Hello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUIHello MUI', '快递服务协议', function() {
//info.innerText = '你刚关闭了警告框';
});
});
document.getElementById("address1").addEventListener('tap', function() {
document.getElementById("item1").classList.add("mui-active");
document.getElementById("item2").classList.remove("mui-active");

document.getElementById("addtab1").classList.add("mui-active");
document.getElementById("addtab2").classList.remove("mui-active");

});
document.getElementById("address2").addEventListener('tap', function() {
document.getElementById("item1").classList.remove("mui-active");
document.getElementById("item2").classList.add("mui-active");

document.getElementById("addtab1").classList.remove("mui-active");
document.getElementById("addtab2").classList.add("mui-active");

});

(function($,doc) {
//处理view的后退与webview后退
var oldBack = $.back;
$.back = function() {
if (viewApi.canBack()) { //如果view可以后退，则执行view的后退
viewApi.back();
} else { //执行webview后退
oldBack();
}
};

var cityPicker = new mui.PopPicker({
layer: 2
});
cityPicker.setData(sendTime);
var sendTimeObj = doc.getElementById('sendTime');
document.getElementById("setsendTime").addEventListener('tap', function(event) {
cityPicker.show(function(items) {
sendTimeObj.innerText = items[0].text + " " + items[1].text;
//返回 false 可以阻止选择框的关闭
//return false;
});

});
})(mui,document);
</script>

</html>

eyugod

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
mui 上门取件

Hello MUIbody {font-family: "微软雅黑";background-color: #efeff4;}.mui-views,.mui-view,.mui-pages,.mui-page,.mui-page-content {position: absolute;left: 0;right: 0;
复制链接

扫一扫