zhouchanghao
/
ZHadmin
派生自 jifuning/ZHadmin


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262
							<!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">
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="content-type" content="no-cache, must-revalidate" />
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT"/>
    <link rel="stylesheet" href="css/mui.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/swiper.css">
    <link rel="stylesheet" href="http://m.ydui.org/css/ydui.css" />
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
    <!-- 引入YDUI自适应解决方案类库 -->
    <script src="http://m.ydui.org/js/ydui.flexible.js"></script>
    <style>
        * { touch-action: pan-y !important; }
        html,
        body {
            background-color: #efeff4;
        }
        p {
            margin: 0;
        }
        span.mui-icon {
            font-size: 14px;
            color: #007aff;
            margin-left: -15px;
            padding-right: 10px;
        }
        .mui-off-canvas-right {
            color: #fff;
        }
        .title {
            margin: 16px 15px 10px;
        }
        .title+.content {
            margin: 10px 15px 35px;
            color: #bbb;
            text-indent: 1em;
            font-size: 14px;
            line-height: 24px;
        }
        input {
            color: #000;
        }
        .buoy{
            width: 50px;
            height: 50px;
            line-height: 50px;
            position: fixed;
            top: 40%;
            left: 0;
            z-index: 2;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            padding: 0;
            text-align: center;
            box-shadow: 0 0 4px 1px #D1D2D2;
            background: #fff;
        }
        .buoy a{
            display: block;
        }
        .swiper-slide img{
            width: 100%;
            height: 209px;
            border-radius: 5px;
        }
        .banner-tit{
            position: absolute;
            bottom: 0;
            left: 0;
            height: 33px;
            line-height: 33px;
            text-indent: 5px;
            color: #fff;
            background: rgba(0,0,0,.5);
            width: 100%;
            font-size: 12px;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }
        .banner-tit p{
            color: #fff;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }
        .swiper-pagination{
            bottom: 5px;
            right: 5px;
            width: auto;
            color: white;
            text-align: right;
            font-size: 12px;
        }
        .swiper-slide a{
            height: 100%;
            display: block;
        }
        .btns{
            z-index: 11;
            height: 40px;
            line-height: 40px;
            font-size: 15px;
            margin: 0;
        }
    </style>
</head>

<body>
<!--侧滑菜单容器-->
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable mui-slide-in">
    <!--菜单部分-->
    <aside id="offCanvasSide" class="mui-off-canvas-right">
        <div id="offCanvasSideScroll" class="mui-scroll-wrapper">
            <div class="mui-scroll">
                <div class="title">侧滑导航</div>
                <div class="title" style="margin-bottom: 25px;">侧滑列表示例</div>
                <ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right">
                            Item 1
                        </a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right">
                            Item 2
                        </a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right">
                            Item 3
                        </a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right">
                            Item 4
                        </a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right">
                            Item 5
                        </a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right">
                            Item 6
                        </a>
                    </li>

                </ul>
            </div>
        </div>
    </aside>
    <div class="mui-inner-wrap">
        <div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
            <div class="mui-scroll" id="contents" style="padding-bottom: 80px">

            </div>
        </div>
        <!--目录-->
        <button class="buoy">
            <a id="offCanvasBtn" href="#offCanvasSide">目录</a>
        </button>
        <!-- off-canvas backdrop -->
        <div class="mui-off-canvas-backdrop"></div>
        <div style="background: #fff" class="addRecord">
            <button type="button" class="btn-block btn-primary btns">添加记录</button>
        </div>
        <!--show-->
        <div class="showRecord">
            <p>选择记录项</p>
            <ul class="record_items">
                <li>
                    <p>
                        记录模版
                        <i class="mui-icon mui-icon-arrowright"></i>
                    </p>
                    <ul class="ul_son">
                        <li>
                            水泵维修
                            <i class="mui-icon mui-icon-arrowright"></i>
                        </li>
                        <li>
                            水泵维修
                            <i class="mui-icon mui-icon-arrowright"></i>
                        </li>
                        <li>
                            水泵维修
                            <i class="mui-icon mui-icon-arrowright"></i>
                        </li>
                    </ul>
                </li>
                <li>
                    <p>
                        记录模版
                        <i class="mui-icon mui-icon-arrowright"></i>
                    </p>
                    <ul class="ul_son">
                        <li></li>
                    </ul>
                </li>
                <li>
                    <p>
                        记录模版
                        <i class="mui-icon mui-icon-arrowright"></i>
                    </p>
                    <ul class="ul_son">
                        <li></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/base64.js"></script>
<script src="js/pdf.js"></script>
<script src="js/pdf.worker.js"></script>
<script src="js/pdfh5.js"></script>
<script src="js/function.js"></script>
<script src="js/mui.min.js"></script>
<script src="js/index01.js"></script>
<script type="text/javascript" src="js/swiper.min.js"></script>
<script>
    var swiper = new Swiper('.swiper-container', {
        // autoplay: true,
        loop:true,
        pagination: {
            el: '.swiper-pagination',
            type: 'fraction',
        },
        autoplay: {
            disableOnInteraction: false
        }
    });
    mui.init({
        swipeBack: false,
    });
    //侧滑容器父节点
    var offCanvasWrapper = mui('#offCanvasWrapper');
    //主界面容器
    var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
    //菜单容器
    var offCanvasSide = document.getElementById("offCanvasSide");
    //移动效果是否为整体移动
    var moveTogether = false;
    offCanvasSide.classList.remove('mui-transitioning');
    mui('#offCanvasSideScroll').scroll();
    mui('#offCanvasContentScroll').scroll();
</script>
</body>

</html>