repair_app_green
/
guide.html

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-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 href="css/mui.min.css" rel="stylesheet" />
    <style>
        .mui-slider-item {
            background-color: #FFFFFF;
        }

        .mui-slider-indicator .mui-active.mui-indicator {
            background: #348D7F;
        }
        /*.mui-slider .mui-slider-group .mui-slider-item img{*/
        .div-img {
            width: 98%;
            position: absolute;
            margin: auto;
            top: 0;
            left: 0;
            bottom: 35%;
            right: 0;
            height: 64%;
        }

        .img1 {
            background: url(logo/1.png) no-repeat;
            background-size: 100%100%;
        }

        .img2 {
            background: url(logo/2.jpg) no-repeat;
            background-size: 100%100%;
        }

        .img3 {
            background: url(logo/3.jpg) no-repeat;
            background-size: 100%100%;
        }

        .img4 {
            background: url(logo/4.png) no-repeat;
            background-size: 100%100%;
        }

        #close {
            position: absolute;
            width: 160px;
            left: 50%;
            margin-left: -80px;
            bottom: 15%;
            padding: 10px;
            color: #FFFFFF;
            border-color: #348D7F;
        }

        .item-logo {
            width: 100%;
            height: 100%;
            position: relative;
        }

            .item-logo a {
                width: 200px;
                height: 200px;
                display: block;
                border: 1px solid #FFFFFF;
                border-color: rgba(255, 255, 255, 0.5);
                text-align: center;
                line-height: 200px;
                border-radius: 50%;
                font-size: 40px;
                color: #fff;
                position: absolute;
                top: 15%;
                left: 50%;
                margin-left: -100px;
            }

        .animate {
            position: absolute;
            left: 0;
            bottom: 15%;
            width: 100%;
            color: #fff;
            display: -moz-box;
        }

            .animate h2 {
                text-align: center;
                margin-bottom: 20px;
                color: #222B32;
            }

            .animate li {
                width: 100%;
                height: 30px;
                line-height: 30px;
                list-style: none;
                font-size: 16px;
                text-align: center;
                color: #707478;
                font-weight: 600;
            }

                .animate li:nth-child(3) {
                    text-align: left;
                    float: right;
                }

        .animated {
            -webkit-animation-duration: 1s;
            -webkit-animation-play-state: paused;
            -webkit-animation-fill-mode: both;
        }

        .guide-show .bounceInDown {
            -webkit-animation-name: bounceInDown;
            -webkit-animation-play-state: running;
            -webkit-animation-delay: 0.5s;
            display: block;
        }

        .guide-show .bounceInLeft {
            -webkit-animation-name: bounceInLeft;
            display: block;
            -webkit-animation-play-state: running;
        }

        .guide-show .bounceInRight {
            -webkit-animation-name: bounceInRight;
            display: block;
            -webkit-animation-play-state: running;
            -webkit-animation-delay: 0.5s;
        }

        @-webkit-keyframes bounceInDown {
            0%,60%,75%,90%, 100% {
                -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
                animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            }

            0% {
                opacity: 0;
                -webkit-transform: translate3d(0, -3000px, 0);
                transform: translate3d(0, -3000px, 0);
            }

            60% {
                opacity: 1;
                -webkit-transform: translate3d(0, 25px, 0);
                transform: translate3d(0, 25px, 0);
            }

            75% {
                -webkit-transform: translate3d(0, -5px, 0);
                transform: translate3d(0, -5px, 0);
            }

            90% {
                -webkit-transform: translate3d(0, 3px, 0);
                transform: translate3d(0, 3px, 0);
            }

            100% {
                -webkit-transform: none;
                transform: none;
            }
        }

        @-webkit-keyframes bounceInLeft {
            0%,60%,75%,90%, 100% {
                -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
                animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            }

            0% {
                opacity: 0;
                -webkit-transform: translate3d(-3000px, 0, 0);
                transform: translate3d(-3000px, 0, 0);
            }

            60% {
                opacity: 1;
                -webkit-transform: translate3d(25px, 0, 0);
                transform: translate3d(25px, 0, 0);
            }

            75% {
                -webkit-transform: translate3d(-10px, 0, 0);
                transform: translate3d(-10px, 0, 0);
            }

            90% {
                -webkit-transform: translate3d(5px, 0, 0);
                transform: translate3d(5px, 0, 0);
            }

            100% {
                -webkit-transform: none;
                transform: none;
            }
        }

        @-webkit-keyframes bounceInRight {
            0%,60%,75%,90%, 100% {
                -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
                animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            }

            0% {
                opacity: 0;
                -webkit-transform: translate3d(3000px, 0, 0);
                transform: translate3d(3000px, 0, 0);
            }

            60% {
                opacity: 1;
                -webkit-transform: translate3d(-25px, 0, 0);
                transform: translate3d(-25px, 0, 0);
            }

            75% {
                -webkit-transform: translate3d(10px, 0, 0);
                transform: translate3d(10px, 0, 0);
            }

            90% {
                -webkit-transform: translate3d(-5px, 0, 0);
                transform: translate3d(-5px, 0, 0);
            }

            100% {
                -webkit-transform: none;
                transform: none;
            }
        }
        /*自定义的亮蓝按钮 start*/
        .mui-btn-lightBlue {
            color: #fff;
            border: 1px solid #348D7F;
            background-color: #66B96A;
        }

            .mui-btn-lightBlue:enabled:active, .mui-btn-lightBlue.mui-active:enabled {
                color: #fff;
                border: 1px solid #0062cc;
                background-color: #0062cc;
            }

        .mui-btn-outlined.mui-btn-lightBlue {
            color: #66B96A;
            background-color: #FFFFFF;
            border: 1px solid #1AA034;
        }

            .mui-btn-outlined.mui-btn-lightBlue:enabled:active,
            .mui-btn-lightBlue:enabled:active .mui-badge-inverted {
                color: #fff;
            }
        /*自定义亮蓝按钮 end*/
    </style>
</head>

<body>
    <div id="slider" class="mui-slider mui-fullscreen" style="background-color: black;">
        <div class="mui-slider-group">
            <!-- 第一张 -->
            <div class="mui-slider-item">
                <div class="item-logo">
                    <!--<a href="#">
                        SMP
                    </a>-->
                    <div class="div-img img1"></div>
                    <div class="animate guide-show">
                        <h2 class="animated bounceInDown">设备维修</h2>
                        <li class="animated bounceInLeft">维修工单便捷管理</li>
                    </div>
                </div>
            </div>
            <!-- 第二张 -->
            <div class="mui-slider-item">
                <div class="item-logo">
                    <!--<a href="#">
                        SMP
                    </a>-->
                    <!--<img src="logo/2a.png" />-->
                    <div class="div-img img2"></div>
                    <div id="tips-2" class="animate mui-hidden">
                        <h2 class="animated bounceInDown">待开发2</h2>
                        <li class="animated bounceInLeft">待开发2说明</li>
                    </div>
                </div>
            </div>
            <!-- 第三张 -->
            <div class="mui-slider-item">
                <div class="item-logo">
                    <!--<a href="#">
                        SMP
                    </a>-->
                    <!--<img src="logo/3a.png" />-->
                    <div class="div-img img3"></div>
                    <div id="tips-3" class="animate mui-hidden">
                        <h2 class="animated bounceInDown">待开发3</h2>
                        <li class="animated bounceInLeft">待开发3说明</li>
                    </div>
                </div>
            </div>
            <!-- 第四张 -->
            <div class="mui-slider-item">
                <div class="item-logo">
                    <!--<a href="#">
                        SMP
                    </a>-->
                    <!--<img src="logo/4a.png" />-->
                    <div class="div-img img4"></div>
                    <div class="animate">
                        <h2 class="animated bounceInDown">待开发4</h2>
                        <li class="animated bounceInLeft">待开发4说明</li>
                    </div>
                    <div class="animate" style="bottom: 7.5%;">
                        <button id='close' class="mui-btn mui-btn-lightBlue">立即体验</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="mui-slider-indicator">
            <div class="mui-indicator mui-active"></div>
            <div class="mui-indicator"></div>
            <div class="mui-indicator"></div>
            <div class="mui-indicator"></div>
        </div>
    </div>
    <script src="js/mui.min.js"></script>
    <script type="text/javascript" src="js/common/config.js"></script>
    <script type="text/javascript" src="js/common/global.js"></script>
    <script>
			mui.back = function() {};
			mui.plusReady(function() {
				if(mui.os.ios) {
					plus.navigator.setFullscreen(true);
				}
				plus.navigator.closeSplashscreen();
			});
			//立即体验按钮点击事件
			document.getElementById("close").addEventListener('tap', function(event) {
				localStorage.setItem("lauchFlag", true);
				plus.navigator.setFullscreen(false);
				plus.webview.currentWebview().close();
				mui.openWindow({
					url: "login.html",
					id: "login",
					extras: {
						mark: "gudie" //同样，这里也只是个标识，实际开发中并不用；
					}
				});
			}, false);
			//图片切换时，触发动画
			document.querySelector('.mui-slider').addEventListener('slide', function(event) {
				//注意slideNumber是从0开始的；
				var index = event.detail.slideNumber + 1;
				if(index == 2 || index == 3) {
					var item = document.getElementById("tips-" + index);
					if(item.classList.contains("mui-hidden")) {
						item.classList.remove("mui-hidden");
						item.classList.add("guide-show");
					}
				}
			});
    </script>
</body>

</html>