1、UU互联手机单页及点击手机图标弹出二维码。

git-svn-id: svn+ssh://10.10.101.21/source/platform/platform-b2b@7600 f3bf4e98-0cf0-11e4-a00c-a99a8b9d557d

src/main/webapp/WEB-INF/views/normal/index.html

@@ -52,11 +52,15 @@
 					</div>
 				</ul>
 				<div id="home-headerBtns">
-					<i class="fa fa-mobile-phone fa-lg"></i>
+					<a href="javascript:void(0);" class="moblie-btn"><i class="fa fa-tablet fa-lg"></i></a>
 					<a ng-click="showMessage()" title="查看消息"><i class="fa fa-comments-o fa-lg"></i></a>
 					<a ui-sref="approvalflow.flow"><i class="fa fa-cog fa-lg"></i></a>
 					<a ng-click="logout()" title="退出登录"><i class="fa fa-power-off fa-lg"></i></a>
 				</div>
+				<div class="erweima-tk">
+					<p>扫描二维码<br/>下载手机客户端</p>
+					<img src="resources/img/qrcode/UU-Qr-Code.png" width="100px" height="100px" alt="UU互联" />
+				</div>
 			</nav>
 		</div>
 		<div class="dropdown-tab">
@@ -243,6 +247,9 @@
 		$('.dropdown-tab a').click(function(){
 			$(".dropdown-tab").hide();
 		});
+		$(".moblie-btn ").click(function(){
+			$(".erweima-tk").toggle();
+		})
 	})
 </script>
 </body>

src/main/webapp/resources/css/index.css

@@ -2575,4 +2575,47 @@ input.ng-invalid.ng-dirty,textarea.ng-invalid.ng-dirty {
 }
 .modal-content{
 	margin-top: 90px;
+}
+#headerBtns{
+	position: relative;
+}
+.erweima-tk{
+	position: absolute;
+	width: 130px;
+	height: 175px;
+	background: #fff;
+	text-align: center;
+	right: 160px;
+	top: 58px;
+	box-shadow: 0 0 2px #ccc;
+	display: none;
+	animation: slideDown .2s ease-in 1 normal both;
+}
+.erweima-tk p{
+	text-align: center;
+	font-size: 12px;
+	padding-top: 10px;
+	color: #323232;
+}
+@-webkit-keyframes slideDown {
+	from {
+		-webkit-opacity:0;
+		-moz-opacity:0;
+		opacity:0;
+		-webkit-transform:translate3d(0,-20%,0);
+		-moz-transform:translate3d(0,-20%,0);
+		-ms-transform:translate3d(0,-20%,0);
+		-o-transform:translate3d(0,-20%,0);
+		transform:translate3d(0,-20%,0)
+	}
+	to {
+		-webkit-opacity:1;
+		-moz-opacity:1;
+		opacity:1;
+		-webkit-transform:translate3d(0,0,0);
+		-moz-transform:translate3d(0,0,0);
+		-ms-transform:translate3d(0,0,0);
+		-o-transform:translate3d(0,0,0);
+		transform:translate3d(0,0,0)
+	}
 }

src/main/webapp/resources/css/start.css

@@ -0,0 +1,408 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-size: 14px;
+    font-family: microsoft yahei,"Heiti SC",heiti,serif;
+    font-style: inherit;
+}
+a{
+    text-decoration: none;
+}
+a:hover{
+    color: #f00 !important;
+}
+.fl{
+    float: left;
+}
+.fr{
+    float: right;
+}
+#wrap{
+    width: 100%;
+    margin: 0 auto;
+}
+.head{
+    width: 100%;
+    height: 36px;
+    line-height: 36px;
+    background: #fff;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+}
+.width1170{
+    width: 1170px;
+    margin: 0 auto;
+}
+.head span,.head span a{
+    font-size: 16px;
+    color: #323232;
+}
+.head span img{
+    vertical-align: sub;
+    margin-right: 5px;
+}
+.head span em{
+    margin-right: 40px;
+}
+.section-1 p{
+    display: block;
+    position: absolute;
+    top: 55%;
+    left: 0;
+    height: 7.5%;
+    line-height: 7.5%;
+    width: 38%;
+}
+.section-1 p span{
+    font-size: 55px;
+    color: #fff;
+    float: left;
+    margin-top: 25%;
+}
+.section-1 p img{
+    float: right;
+}
+.section{
+    position: relative;
+    width: 100%;
+    min-width: 1170px;
+    height: 736px;
+    overflow: hidden;
+}
+.section-1{
+    background: url("../img/start/background-image.jpg") no-repeat center;
+    height: 990px !important;
+}
+.section-1 .flexible-box{
+    height: 990px !important;
+    margin: -495px 0 0 -585px !important;
+}
+.flexible-box{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 1170px;
+    height: 736px;
+    margin: -368px 0 0 -585px;
+}
+.section-1 .img-title {
+    position: absolute;
+    top: 30%;
+    width: 45%;
+    left: 2%;
+    -webkit-animation: resetOpacity 0s ease 0s 1 normal forwards;
+    -moz-animation: resetOpacity 0s ease 0s 1 normal forwards;
+    -ms-animation: resetOpacity 0s ease 0s 1 normal forwards;
+    animation: resetOpacity 0s ease 0s 1 normal forwards;
+}
+.section-1 .img-phone {
+    position: absolute;
+    right: -15%;
+    bottom: 0;
+    height: 85%;
+    -webkit-animation: resetOpacity 0s ease 0s 1 normal forwards;
+    -moz-animation: resetOpacity 0s ease 0s 1 normal forwards;
+    -ms-animation: resetOpacity 0s ease 0s 1 normal forwards;
+    animation: resetOpacity 0s ease 0s 1 normal forwards;
+}
+.section-2{
+    background: #feffd7;
+}
+.section-2 .flexible-box{
+    background: url("../img/start/sec02-bg.png") no-repeat right 90%;
+}
+.section-2 .section-img{
+    position: absolute;
+    width: 35%;
+    left: 2%;
+    bottom: 0;
+}
+.section-2 .section-title,.section-4 .section-title{
+    position: absolute;
+    right: 5%;
+    top: 36%;
+    opacity: 0;
+}
+.section-2 .section-title p,.section-4 .section-title p{
+    font-size: 60px;
+    color: #464646;
+    line-height: 90px;
+}
+.section-3{
+    background: #d4e9f9;
+}
+.section-3 .flexible-box{
+    background: url("../img/start/sec03-bg.png") no-repeat left 60%;
+}
+.section-3 .section-img{
+    position: absolute;
+    right: 2%;
+    width: 35%;
+    top: 10%;
+}
+.section-3 .section-title{
+    position: absolute;
+    left: 0;
+    top: 45%;
+    opacity: 0;
+}
+.section-3 .section-title p{
+    font-size: 60px;
+    color: #464646;
+    line-height: 90px;
+}
+.section-3 .section-img-t{
+    position: absolute;
+    top: 20%;
+    left: 37%;
+    opacity: 0;
+}
+.section-4{
+    background: #c8f9f0;
+}
+.section-4 .flexible-box{
+    background: url("../img/start/sec04-bg.png") no-repeat right 90%;
+}
+.section-4 .section-img{
+    position: absolute;
+    width: 45%;
+    left: -5%;
+    bottom: 0;
+}
+.section-4 .btn{
+    position: absolute;
+    right: 5%;
+    top: 70%;
+}
+.animated.section-4 .btn:hover a{
+    background-position: 0 -70px;
+}
+.section-4 .btn,.section-4 .btn a{
+    width: 223px;
+    height: 68px;
+    display: inline-block;
+}
+.section-4 .btn a{
+    background: url("../img/start/btn.png") no-repeat;
+}
+.animated .section-img-t{
+    animation: scaleUp 1s ease .5s 1 normal both;
+}
+.animated .img-title,.animated .section-title{
+    animation:slideDown 1s ease 0s 1 normal both;
+}
+.animated .img-phone {
+    -webkit-opacity:1;
+    -moz-opacity:1;
+    opacity:1;
+    -webkit-animation:slideUp 1s ease 0s 1 normal both;
+    -moz-animation:slideUp 1s ease 0s 1 normal both;
+    -ms-animation:slideUp 1s ease 0s 1 normal both;
+    animation:slideUp 1s ease 0s 1 normal both
+}
+.animated.section-2 .section-img,.animated.section-4 .section-img{
+    -webkit-opacity:1;
+    -moz-opacity:1;
+    opacity:1;
+    -webkit-animation:slideRight 1s ease 0s 1 normal none;
+    -moz-animation:slideRight 1s ease 0s 1 normal none;
+    -ms-animation:slideRight 1s ease 0s 1 normal none;
+    animation:slideRight 1s ease 0s 1 normal none
+}
+.animated.section-3 .section-img,.animated.section-4 .btn{
+    -webkit-opacity:1;
+    -moz-opacity:1;
+    opacity:1;
+    -webkit-animation:slideLeft 1s ease 0s 1 normal none;
+    -moz-animation:slideLeft 1s ease 0s 1 normal none;
+    -ms-animation:slideLeft 1s ease 0s 1 normal none;
+    animation:slideLeft 1s ease 0s 1 normal none
+}
+.section-img {
+    -webkit-animation:resetOpacity 0s ease 0s 1 normal forwards;
+    -moz-animation:resetOpacity 0s ease 0s 1 normal forwards;
+    -ms-animation:resetOpacity 0s ease 0s 1 normal forwards;
+    animation:resetOpacity 0s ease 0s 1 normal forwards
+}
+@-webkit-keyframes slideDown {
+    from {
+        -webkit-opacity:0;
+        -moz-opacity:0;
+        opacity:0;
+        -webkit-transform:translate3d(0,-20%,0);
+        -moz-transform:translate3d(0,-20%,0);
+        -ms-transform:translate3d(0,-20%,0);
+        -o-transform:translate3d(0,-20%,0);
+        transform:translate3d(0,-20%,0)
+    }
+    to {
+        -webkit-opacity:1;
+        -moz-opacity:1;
+        opacity:1;
+        -webkit-transform:translate3d(0,0,0);
+        -moz-transform:translate3d(0,0,0);
+        -ms-transform:translate3d(0,0,0);
+        -o-transform:translate3d(0,0,0);
+        transform:translate3d(0,0,0)
+    }
+}
+@-webkit-keyframes slideUp{
+    from {
+        -webkit-opacity:0;
+        -moz-opacity:0;
+        opacity:0;
+        -webkit-transform:translate3d(0,20%,0);
+        -moz-transform:translate3d(0,20%,0);
+        -ms-transform:translate3d(0,20%,0);
+        -o-transform:translate3d(0,20%,0);
+        transform:translate3d(0,20%,0)
+    }
+    to {
+        -webkit-opacity:1;
+        -moz-opacity:1;
+        opacity:1;
+        -webkit-transform:translate3d(0,0,0);
+        -moz-transform:translate3d(0,0,0);
+        -ms-transform:translate3d(0,0,0);
+        -o-transform:translate3d(0,0,0);
+        transform:translate3d(0,0,0)
+    }
+}
+@-webkit-keyframes resetOpacity {
+    from {
+        -webkit-opacity:1;
+        -moz-opacity:1;
+        opacity:1
+    }
+    to {
+        -webkit-opacity:0;
+        -moz-opacity:0;
+        opacity:0
+    }
+}
+@-webkit-keyframes slideRight {
+    from {
+        -webkit-opacity:0;
+        -moz-opacity:0;
+        opacity:0;
+        -webkit-transform:translate3d(-20%,0,0);
+        -moz-transform:translate3d(-20%,0,0);
+        -ms-transform:translate3d(-20%,0,0);
+        -o-transform:translate3d(-20%,0,0);
+        transform:translate3d(-20%,0,0)
+    }
+    10% {
+        -webkit-opacity:0;
+        -moz-opacity:0;
+        opacity:0;
+        -webkit-transform:translate3d(-20%,0,0);
+        -moz-transform:translate3d(-20%,0,0);
+        -ms-transform:translate3d(-20%,0,0);
+        -o-transform:translate3d(-20%,0,0);
+        transform:translate3d(-20%,0,0)
+    }
+    to {
+        -webkit-opacity:1;
+        -moz-opacity:1;
+        opacity:1;
+        -webkit-transform:translate3d(0,0,0);
+        -moz-transform:translate3d(0,0,0);
+        -ms-transform:translate3d(0,0,0);
+        -o-transform:translate3d(0,0,0);
+        transform:translate3d(0,0,0)
+    }
+}
+@-webkit-keyframes slideLeft {
+    from {
+        -webkit-opacity:0;
+        -moz-opacity:0;
+        opacity:0;
+        -webkit-transform:translate3d(20%,0,0);
+        -moz-transform:translate3d(20%,0,0);
+        -ms-transform:translate3d(20%,0,0);
+        -o-transform:translate3d(20%,0,0);
+        transform:translate3d(20%,0,0)
+    }
+    10% {
+        -webkit-opacity:0;
+        -moz-opacity:0;
+        opacity:0;
+        -webkit-transform:translate3d(20%,0,0);
+        -moz-transform:translate3d(20%,0,0);
+        -ms-transform:translate3d(20%,0,0);
+        -o-transform:translate3d(20%,0,0);
+        transform:translate3d(20%,0,0)
+    }
+    to {
+        -webkit-opacity:1;
+        -moz-opacity:1;
+        opacity:1;
+        -webkit-transform:translate3d(0,0,0);
+        -moz-transform:translate3d(0,0,0);
+        -ms-transform:translate3d(0,0,0);
+        -o-transform:translate3d(0,0,0);
+        transform:translate3d(0,0,0)
+    }
+}
+@-webkit-keyframes scaleUp{
+    from {
+        -webkit-opacity:0;
+        -moz-opacity:0;
+        opacity:0;
+        -webkit-transform: scale(0);
+        -moz-transform:scale(0);
+        -ms-transform:scale(0);
+        -o-transform:scale(0);
+        transform:scale(0)
+    }
+    to {
+        -webkit-opacity:1;
+        -moz-opacity:1;
+        opacity:1;
+        -webkit-transform: scale(1);
+        -moz-transform:scale(1);
+        -ms-transform:scale(1);
+        -o-transform:scale(1);
+        transform:scale(1)
+    }
+}
+.animated.section-2 .section-title,.animated.section-4 .section-title,.animated.section-3 .section-title,.animated.section-3 .section-img-t{
+    opacity: 1 !important;
+}
+
+#footer{
+    background: #fff !important;
+    color: #333 !important;
+    margin-top: 0 !important;
+}
+#footer .row{
+    padding-top: 20px !important;
+}
+#footer a{
+    color: #333 !important;
+}
+#footer .col-sm-2 a{
+    color: #fff !important;
+}
+@media screen and (max-width: 1170px) {
+    #wrap{
+        width: auto;
+        min-width: 1170px;
+    }
+    #wrap .head{
+        min-width: 1170px;
+    }
+}
+/*
+@media screen and (max-width: 1366px) {
+   #wrap .section{
+        height: 600px !important;
+    }
+    #wrap .flexible-box{
+        height: 600px !important;
+        margin: -300px 0 0 -585px !important;
+    }
+}*/

src/main/webapp/resources/tpl/start/index.html

@@ -0,0 +1,186 @@
+<!DOCTYPE html>
+<html lang="en"/>
+<head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta charset="UTF-8" />
+    <title>UU互联</title>
+    <meta name="keywords" content="UU互联">
+    <meta name="description" content="UU互联">
+    <link href="../../img/icon/u.png" rel="icon" type="image/x-icon" />
+    <link rel="stylesheet" href="../../lib/bootstrap/css/bootstrap.min.css">
+    <link rel="stylesheet" href="../../css/start.css "/>
+    <link rel="stylesheet" href="../../css/index.css "/>
+</head>
+<body>
+<div id="wrap">
+    <div class="head">
+        <div class="width1170">
+            <span class="fl">
+                <img src="../../img/start/mobile-inco.png" alt="" />欢迎来到UU互联-手机版
+                <em></em>支持iPhone/Android/iPad下载
+            </span>
+            <span class="fr"><a href="#">返回B2B首页</a></span>
+        </div>
+    </div>
+    <!--第一屏-->
+    <div class="section section-1">
+        <div class="flexible-box">
+            <img  class="img-title" src="../../img/start/img-title.png" alt=""/>
+            <img  class="img-phone" src="../../img/start/img-phone.png" alt=""/>
+            <p><span>UU互联</span><img src="../../img/start/img-webchat.png" alt=""/></p>
+        </div>
+    </div>
+    <!--第二屏-->
+    <div class="section section-2">
+        <div class="flexible-box">
+            <img  class="section-img" src="../../img/start/section2-img.png" alt=""/>
+            <div class="section-title">
+                <p>即时沟通<br/>随时接收客户消息</p>
+            </div>
+        </div>
+    </div>
+    <!--第三屏-->
+    <div class="section section-3">
+        <div class="flexible-box">
+            <img  class="section-img" src="../../img/start/section3-img.png" alt=""/>
+            <img  class="section-img-t" src="../../img/start/section3-img-t.png" alt=""/>
+            <div class="section-title">
+                <p>世界首创自动打卡<br/>让外勤更轻松</p>
+            </div>
+        </div>
+    </div>
+    <!--第四屏-->
+    <div class="section section-4">
+        <div class="flexible-box">
+            <img  class="section-img" src="../../img/start/section4-img.png" alt=""/>
+            <div class="section-title">
+                <p>移动审批<br/>原来审批如此简单</p>
+            </div>
+            <div class="btn">
+                <a href="#"></a>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="navbar navbar-static-bottom" id="footer">
+    <div class="container">
+        <div class="row">
+            <div class="col-sm-3 col-sm-offset-2">
+                <div class="qrcode qrcode-uu">
+                    <div class="qrcode-img pull-left">
+                        <img src="../../img/qrcode/UU-Qr-Code.png" width="100px" height="100px"
+                             alt="UU互联" />
+                    </div>
+                    <div class="qrcode-text pull-left">
+                        <div>手机UU</div>
+                        <div>快人一步</div>
+                    </div>
+                    <div class="clearfix"></div>
+                </div>
+            </div>
+            <div class="col-sm-3">
+                <div class="qrcode qrcode-uas">
+                    <div class="qrcode-img pull-left">
+                        <img src="../../img/qrcode/WeChat-Qr-Code.png" width="100px" height="100px"
+                             alt="优软公众号" />
+                    </div>
+                    <div class="qrcode-text pull-left">
+                        <div>微信扫描</div>
+                        <div>关注公众号</div>
+                    </div>
+                    <div class="clearfix"></div>
+                </div>
+            </div>
+            <div class="col-sm-4">
+                <p>
+                    <a href="">关于深圳市优软科技有限公司</a>
+                </p>
+                <p>
+                    <a><i class="fa fa-headphones"></i> 服务中心</a>
+                    <a>&nbsp;&nbsp;</a>
+                    <a><i class="fa fa-phone"></i> 800-830-1818</a>
+                </p>
+            </div>
+            <div class="col-sm-2" style="float: right;">
+                <a href="http://www.ubtob.com" class="back-home">返回优软云</a>
+            </div>
+        </div>
+    </div>
+</div>
+<script src="../../lib/jquery/jquery.min.js"></script>
+<script type="text/javascript">
+    !function(t) {
+        t(document).ready(function() {
+            function i(t, i, o, n) {
+                var e = null,
+                        s = t,
+                        r = t + i,
+                        h = o,
+                        c = o + n,
+                        p = 200;
+                return (s + p > c || h > r - p) && (e = !1),
+                s + p >= h && h >= s && (e = !0),
+                c >= r - p && r >= c && (e = !0),
+                h > s + p && r - p > c && (e = !0),
+                s > h && c > r && (e = !0),
+                        e
+            }
+            function o(i, o, n) {
+                this.targets = t(i),
+                        this.onEnterViewport = o,
+                        this.onLeaveViewport = n,
+                        this.winHeight = 0,
+                        this.initController()
+            }
+            function n(t) {
+                t.addClass("animated")
+            }
+            function e(t) {
+                t.removeClass("animated")
+            }
+            o.prototype.computePositions = function() {
+                var i = [],
+                        o = t(window).height();
+                t.each(this.targets,
+                        function(o, n) {
+                            var e = t(n);
+                            i.push({
+                                target: e,
+                                top: e.offset().top,
+                                height: e.height(),
+                                isVisible: !1
+                            })
+                        }),
+                        this.positions = i,
+                        this.winHeight = o
+            },
+                    o.prototype.checkViewport = function() {
+                        var o = t(window).scrollTop(),
+                                n = this.winHeight,
+                                e = this;
+                        t.each(e.positions,
+                                function(t, s) {
+                                    var r = i(o, n, s.top, s.height);
+                                    null !== r && r !== s.isVisible && (r ? e.onEnterViewport(s.target) : e.onLeaveViewport(s.target)),
+                                            s.isVisible = r
+                                })
+                    },
+                    o.prototype.initController = function() {
+                        this.computePositions(),
+                                this.checkViewport();
+                        var i = this;
+                        t(window).on("scroll",
+                                function() {
+                                    i.checkViewport()
+                                }).on("resize",
+                                function() {
+                                    i.computePositions(),
+                                            i.checkViewport()
+                                })
+                    };
+            new o(".section", n, e)
+        })
+    } (jQuery);
+</script>
+</body>
+</html>