generator-minxing
Version:
generator for creating minxing web app.
493 lines (470 loc) • 23.3 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<title>OA</title>
<link rel="stylesheet" href="styles/main.css"/>
<link rel="stylesheet" href="styles/mx.css" />
<style>
html,body{
min-height: 100%;
}
html{
height: 100%;
}
.mx-cells:before{
border-top: none;
}
.mx-startT{
margin-left: 26px;
}
.mx-mask-1{
background-color: rgba(0,0,0,0.6);
z-index: 9999;
}
.mx-fadeIn{
margin-top: -189px;
opacity: 1;
}
.ios .mxin-header .mxin-header-icon-l{
background: url('images/tu2.png') no-repeat left center;
background-size: 100% 100%;
height: 25px;
width: 25px;
top: 12px;
}
.mxin-header .mxin-header-icon-l{
background: url('images/tu2.png') no-repeat left center;
background-size: 100% 100%;
height: 25px;
width: 25px;
top: 12px;
}
.ios .mxin-header-icon-r{
background: url('images/tu1.png') no-repeat left center;
background-size: 92% 100%;
width: 10px;
}
.mxin-header-icon-r{
background: url('images/tu1.png') no-repeat left center;
background-size: 92% 100%;
width: 10px;
margin-top: 11px;
}
.mxin-icon-oa{
width: 17px;
height: 17px;
display: inline-block;
}
.mxin-icon-work{
background: url('images/NOTEPAD.png') no-repeat left center;
background-size: 100% 100%;
}
.mxin-icon-ban{
background: url('images/shen.png') no-repeat left center;
background-size: 100% 100%;
}
.mxin-icon-yue{
background: url('images/gong.png') no-repeat left center;
background-size: 100% 100%;
}
.mxin-icon-fa{
background: url('images/BoxOutgoing.png') no-repeat left center;
background-size: 100% 100%;
}
.mxin-icon-shou{
background: url('images/BoxIncoming.png') no-repeat left center;
background-size: 100% 100%;
}
.mxin-icon-mes{
background: url('images/Megaphone.png') no-repeat left center;
background-size: 100% 100%;
}
.mx-margin-t{
margin-top: 11px;
}
.mx-mg-t7{
margin-top: 7px;
}
@media screen and (min-width: 380px) {
.mx-media-box__title{
font-size: 17px;
}
.mx-media-box__desc{
font-size: 15px;
}
.mx-cells__title{
font-size: 14px;
}
.mx-time-f{
font-size: 15px;
}
.mx-text_lf{
font-size: 16px;
}
.mx-btn_mini{
font-size: 15px;
}
.mx-cell{
padding: 10px 15px;
}
.mx-oa-sey{
font-size: 18px;
}
}
label > * { pointer-events: none; }
</style>
</head>
<body style="height: 100%;">
<div class="warp" style="background-color: #f0f1f2;">
<!-- 页面内容 -->
<div class="MX-pages">
<div class="load-page mx_page">
<header data-mxin-widget="header" class="mxin-header mxin-header-default">
<div class="mxin-header-left doc-oc-js mxin-header-nav mxin-header-icon-l mx-oa-js" data-rel="open" id="mx-nav-open" style="z-index: 999999999999;">
</div>
<h1 class="mxin-header-title" id="mxin-header-title">
我的工作
</h1>
<div class="mxin-header-right mxin-header-nav">
<a class="mxin-btn search-btn mxin-btn-primary js-modal-open">
<i class="mx-icon-search" style="color: #eeeeee"></i>
</a>
<a href="javascript:;" class="mxin-btn mxin-header-icon-r" onclick="MXWebui.closeWindow();">
</a>
</div>
</header>
<a href="javascript:;" >
<div class="mx-media-box mx-media-box_appmsg mx-mg-t60 mx-mg-t46 mx-an" id="mx-an">
<div class="mx-media-box__hd" >
<img class="img" src="images/1.jpg">
</div>
<div class="mx-media-box__bd" style="margin-left: 4px;">
<h4 class="mx-media-box__title mx-name">王震</h4>
<p class="mx-media-box__desc mx-mg-t">人生就像一场旅行</p>
<!-- <time class="mx-media-box__desc">时间：12-09 12:05</time> -->
</div>
<!-- <a href="#" class="mx-btn mx-btn_mini mx-btn_primary">下载</a> -->
<span class="mx-media-box__title mx-time mx-time-f">2017-02-11</span>
</div>
</a>
<div class="mx-media-box mx-media-box_appmsg">
<div class="mx-media-box__hd" >
<img class="img" src="images/2.jpg">
</div>
<div class="mx-media-box__bd" style="margin-left: 4px;">
<h4 class="mx-media-box__title mx-name">冯宇鹏</h4>
<p class="mx-media-box__desc mx-mg-t">永不放弃自己</p>
<!-- <time class="mx-media-box__desc">时间：09-13 08:52</time> -->
</div>
<!-- <a href="#" class="mx-btn mx-btn_mini mx-btn_primary">下载</a> -->
<span class="mx-media-box__title mx-time mx-time-f">2017-01-14</span>
</div>
<div class="mx-media-box mx-media-box_appmsg">
<div class="mx-media-box__hd" >
<img class="img" src="images/3.jpg">
</div>
<div class="mx-media-box__bd" style="margin-left: 4px;">
<h4 class="mx-media-box__title mx-name">李明超</h4>
<p class="mx-media-box__desc mx-mg-t">勇敢面对任何挑战</p>
<!-- <time class="mx-media-box__desc">时间：09-13 08:52</time> -->
</div>
<!-- <a href="#" class="mx-btn mx-btn_mini mx-btn_primary">下载</a> -->
<span class="mx-media-box__title mx-time mx-time-f">1016-12-14</span>
</div>
<div class="mx-media-box mx-media-box_appmsg">
<div class="mx-media-box__hd" >
<img class="img" src="images/4.jpg">
</div>
<div class="mx-media-box__bd" style="margin-left: 4px;">
<h4 class="mx-media-box__title mx-name">关艾艾</h4>
<p class="mx-media-box__desc mx-mg-t">喜欢跑步，摄影</p>
<!-- <time class="mx-media-box__desc">时间：09-13 08:52</time> -->
</div>
<!-- <a href="#" class="mx-btn mx-btn_mini mx-btn_primary">下载</a> -->
<span class="mx-media-box__title mx-time mx-time-f">2016-12-01</span>
</div>
<div class="mx-media-box mx-media-box_appmsg">
<div class="mx-media-box__hd" >
<img class="img" src="images/5.jpg">
</div>
<div class="mx-media-box__bd" style="margin-left: 4px;">
<h4 class="mx-media-box__title mx-name">李秀丽</h4>
<p class="mx-media-box__desc mx-mg-t">对自己好一点</p>
<!-- <time class="mx-media-box__desc">时间：09-13 08:52</time> -->
</div>
<!-- <a href="#" class="mx-btn mx-btn_mini mx-btn_primary">下载</a> -->
<span class="mx-media-box__title mx-time mx-time-f">2016-11-11</span>
</div>
</div>
</div>
<!-- 侧边栏内容 -->
<div id="my-offcanvas" class="mxin-offcanvas">
<div class="mxin-offcanvas-bar">
<div class="slider-container_box">
<div class="mx-panel__bd">
<a href="javascript:;" class="mx-media-box mx-media-box_appmsg">
<div class="mx-media-box__hd">
<img class="mx-media-box__thumb" src="images/1.jpg" alt="">
</div>
<div class="mx-media-box__bd">
<h4 class="mx-media-box__title mx-oa-sey">OA综合系统</h4>
</div>
</a>
</div>
<!-- 单选 -->
<div class="mx-cells mx-cells_radio mx-mt-0">
<label class="mx-cell mx-check__label mx-mb-0" data-rel="close" for="x11">
<div class="mx-cell__bd">
<p class="mxin-icon-work mxin-icon-oa"></p>
<p class="mx-media-box__title mx-slider-l" style="padding-top: 7px;">我的工作</p>
</div>
<div class="mx-cell__ft">
<input type="radio" class="mx-check" name="radio1" id="x11">
<span class="mx-icon-checked"></span>
</div>
</label>
<label class="mx-cell mx-check__label mx-mb-0" data-rel="close" for="x12">
<div class="mx-cell__bd">
<p class="mxin-icon-ban mxin-icon-oa"></p>
<p class="mx-media-box__title mx-slider-l" style="padding-top: 7px;">待办事宜</p>
</div>
<div class="mx-cell__ft">
<input type="radio" name="radio1" class="mx-check" id="x12" checked="checked">
<span class="mx-icon-checked"></span>
</div>
</label>
<label class="mx-cell mx-check__label mx-mb-0" data-rel="close" for="x13">
<div class="mx-cell__bd">
<p class="mxin-icon-yue mxin-icon-oa"></p>
<p class="mx-media-box__title mx-slider-l" style="padding-top: 7px;">待阅事宜</p>
</div>
<div class="mx-cell__ft">
<input type="radio" name="radio1" class="mx-check" id="x13" checked="checked">
<span class="mx-icon-checked"></span>
</div>
</label>
<label class="mx-cell mx-check__label mx-mb-0" data-rel="close" for="x14">
<div class="mx-cell__bd">
<p class="mxin-icon-fa mxin-icon-oa"></p>
<p class="mx-media-box__title mx-slider-l" style="padding-top: 7px;">发文管理</p>
</div>
<div class="mx-cell__ft">
<input type="radio" name="radio1" class="mx-check" id="x14" checked="checked">
<span class="mx-icon-checked"></span>
</div>
</label>
<label class="mx-cell mx-check__label mx-mb-0" data-rel="close" for="x15">
<div class="mx-cell__bd">
<p class="mxin-icon-shou mxin-icon-oa"></p>
<p class="mx-media-box__title mx-slider-l" style="padding-top: 7px;">收文管理</p>
</div>
<div class="mx-cell__ft">
<input type="radio" name="radio1" class="mx-check" id="x15" checked="checked">
<span class="mx-icon-checked"></span>
</div>
</label>
<label class="mx-cell mx-check__label mx-mb-0" data-rel="close" for="x16">
<div class="mx-cell__bd">
<p class="mxin-icon-mes mxin-icon-oa"></p>
<p class="mx-media-box__title mx-slider-l" style="padding-top: 7px;">通知公告</p>
</div>
<div class="mx-cell__ft">
<input type="radio" name="radio1" class="mx-check" id="x16" checked="checked">
<span class="mx-icon-checked"></span>
</div>
</label>
</div>
</div>
</div>
</div>
<!-- 搜索 dialog -->
<div class="mxin-modal search-dialog mxin-modal-no-btn" tabindex="-1" id="your-modal">
<div class="mx-container">
<i class="mxin-icon-close mx-close" id="mx-close"></i>
<div class="mx-cells mx-bg-no">
<div class="mx-cell">
<div class="mx-cell__bd">
<p class="mx-text_lf">文件标题</p>
</div>
</div>
</div>
<div class="mx-cells">
<div class="mx-cell">
<div class="mx-cell__bd">
<input type="text" class="mx-input" placeholder="请输入文本">
</div>
</div>
</div>
<div class="mx-cells mx-bg-no">
<div class="mx-cell">
<div class="mx-cell__bd">
<p class="mx-text_lf">文件时间</p>
</div>
</div>
</div>
<div class="mx-cells">
<span class="mx-cell mx-cell_access" href="javascript:;">
<div class="mx-cell__bd">
<p class="mx-text_lf" id="showDatePicker">文件开始时间<span id="startT" class="mx-startT"></span></p>
</div>
<div class="mx-cell__ft">
</div>
</span>
<span class="mx-cell mx-cell_access" href="javascript:;">
<div class="mx-cell__bd">
<p class="mx-text_lf" id="endDatePicker">文件结束时间<span id="endT" class="mx-startT"></span></p>
</div>
<div class="mx-cell__ft">
</div>
</span>
</div>
<div id="datePlugin"></div>
<div class="mx-cells mx-bg-no">
<div class="mx-cell">
<div class="mx-cell__bd">
<p class="mx-text_lf">文件类型</p>
</div>
</div>
</div>
<div class="mx-cells mx-cells_checkbox">
<label class="mx-cell mx-check__label" style="padding-right: 0px;" for="s11">
<div class="mx-cell__bd">
<p class="mx-text_lf">发文</p>
</div>
<div class="mx-cell__hd">
<input type="checkbox" class="mx-check" name="checkbox1" id="s11" checked="checked">
<i class="mx-icon-checked"></i>
</div>
</label>
<label class="mx-cell mx-check__label" style="padding-right: 0px;" for="s12">
<div class="mx-cell__bd">
<p class="mx-text_lf">收文</p>
</div>
<div class="mx-cell__hd">
<input type="checkbox" name="checkbox2" class="mx-check" id="s12">
<i class="mx-icon-checked" style="margin-left: 10px;"></i>
</div>
</label>
<label class="mx-cell mx-check__label" style="padding-right: 0px;" for="s13">
<div class="mx-cell__bd">
<p class="mx-text_lf">收文</p>
</div>
<div class="mx-cell__hd">
<input type="checkbox" name="checkbox3" class="mx-check" id="s13">
<i class="mx-icon-checked"></i>
</div>
</label>
</div>
<div class="mx-btn mx-btn_mini mx-btn_primary" id="mx-inquire" style="background-color: #1a85ff">查询</div>
<div class="mx-btn mx-btn_mini mx-btn_default" id="mx-btn-cancel" style="margin-left: 10px;border-right: 1px solid #f8f8f8;">取消</div>
</div>
</div>
</div>
<div class="mxin-dimmer"></div>
<script src="libs/jquery.min.js"></script>
<script src="libs/jquery.hashchange.js"></script>
<script src="libs/minxing.mock.data.js"></script>
<script src="libs/minxing.mock.lib.js"></script>
<script src="libs/mx-l.js"></script>
<script src="scripts/jump.js"></script>
<script src="libs/fastclick.js"></script>
<script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
<script>
//调用fastClick.js 解决点击延迟300ms
window.addEventListener('load', function() {
FastClick.attach(document.body);
}, false);
$('#showDatePicker').on('click', function () {
weui.datePicker({
start: 1990,
end: new Date().getFullYear(),
onChange: function (end) {
console.log(end);
},
onConfirm: function (result) {
$('#startT').html(result.join('-'));
}
});
});
$('#endDatePicker').on('click', function () {
weui.datePicker({
start: 1990,
end: new Date().getFullYear(),
onChange: function (result) {
console.log(result);
},
onConfirm: function (result) {
$('#endT').html(result.join('-'));
}
});
});
</script>
<script>
//侧边栏打开和关闭
$(function() {
var id = '#my-offcanvas';
var $myOc = $(id);
$('.mx-oa-js').bind('click', function(){
$myOc.offCanvas($(this).data('rel'));
});
$myOc.on('open.offcanvas.amui', function() {
console.log(id + ' 打开了。');
}).on('close.offcanvas.amui', function() {
console.log(id + ' 关闭了。');
});
$(document).on('click','.mx-cells_radio label',function(){
console.log(12323);
$(".mx-cells_radio label").removeClass('current');
$(this).addClass('current');
$myOc.offCanvas($(this).data('rel'));
var i = $(this).index()
console.log(i)
console.log($('.mx-slider-l').eq(i).html())
$('#mxin-header-title').html($('.mx-slider-l').eq(i).html())
});
var $modal = $('#your-modal');
$(document).on('click','.search-btn' , function(e) {
console.log(1)
$modal.fadeIn(100).addClass('mx-fadeIn');
$modal.addClass('mxin-modal-active');
$('.mxin-dimmer').addClass('mxin-active').css('display','block');
$('.mxin-dimmer').click(function(){
console.log(11111)
$(this).hide();
$modal.hide();
})
});
//点击跳转到test页面
$('.mx-media-box').click(function(){
window.location.href = '#test';
});
$('#mx-inquire').click(function(){
$modal.fadeOut(100).removeClass('mx-fadeIn');
$modal.removeClass('mxin-modal-active');
$('.mxin-dimmer').removeClass('mxin-active').css('display','none');
})
$('#mx-btn-cancel').click(function(){
$modal.fadeOut(100).removeClass('mx-fadeIn');
$modal.removeClass('mxin-modal-active');
$('.mxin-dimmer').removeClass('mxin-active').css('display','none');
})
});
var mxName = document.getElementsByClassName('.mx-name')
</script>
<!--解决在ios header中显示bug，增加ios单独的样式-->
<script type="text/javascript">
(function() {
var agent = navigator.userAgent;
if (/iphone|ipad|ipod/i.test(agent)) {
$('body').addClass('ios');
}
}());
</script>
</body>
</html>