新增MES页面

jpress-web-template-usoftchina/src/main/webapp/templates/usoftchina/page_mes.html

@@ -0,0 +1,503 @@
+<#include "_layout.html"/>
+<#macro css>
+.warp{
+width: 100%;
+margin:  0 auto;
+}
+.content{
+width: 1190px;
+margin: 0 auto;
+display: inline-block;
+}
+.mes .section{
+width: 100%;
+margin-bottom: 0;
+display: flex;
+position: relative;
+}
+.mes .content{
+position: absolute;
+top: 50%;
+left: 50%;
+-webkit-transform: translate(-50%,-50%);
+-moz-transform: translate(-50%,-50%);
+-ms-transform: translate(-50%,-50%);
+-o-transform: translate(-50%,-50%);
+transform: translate(-50%,-50%);
+}
+.mes .section-1{
+height: 640px !important;
+background: #3B8EFF;
+}
+.mes .section-1 .sec1-left, .mes .section-3 .sec1-left{
+float: left;
+width: 50%;
+position:relative;
+left:-150px;
+}
+.mes .section-1 .sec1-right, .mes .section-3 .sec1-right{
+float: right;
+width: 50%;
+position:relative;
+right:-150px;
+}
+.mes .section-1 .sec1-right h3{
+font-size: 48px;
+color: #fff;
+padding-top: 100px;
+margin-bottom:70px;
+}
+.mes .section-1 .sec1-right p{
+font-size: 20px;
+color: #fff;
+margin-bottom:65px;
+}
+.mes .section-1 .sec1-right ul{
+margin-left: -20px;
+width: 70%;
+}
+.mes .section-1 .sec1-right ul li{
+font-size:20px;
+color:#fff;
+padding:0 20px;
+border-right:1px solid #fff;
+margin-bottom:25px;
+}
+.mes .section-1 .sec1-right ul li:nth-child(4){
+border:none;
+}
+
+.mes .section-2{
+height:660px;
+}
+.mes .section-2 .mes02{
+float: right;
+width:50%;
+}
+.mes .section-2 .sec-text{
+float: left;
+width:50%;
+}
+.mes .section-2 .sec-text h3{
+font-size: 48px;
+color: #2A2A2A;
+margin-bottom:25px;
+padding-top:50px;
+}
+.mes .section-2 .sec-text p{
+font-size: 20px;
+color: #2A2A2A;
+margin-bottom:25px;
+}
+.mes .section-2 .sec-text span{
+font-size: 20px;
+color: #989898;
+}
+
+.mes .section-3{
+background: #EFFAFE;
+height:695px;
+}
+
+.mes .section-3 .sec1-right h3{
+font-size: 48px;
+color: #222;
+margin-bottom:60px;
+padding-top:150px;
+}
+.mes .section-3 .sec1-right .secl-tab{
+width:440px;
+}
+
+.mes .section-3 .sec1-right .secl-tab ul{
+border-bottom:2px solid #EAF2F4;
+margin-bottom:40px;
+}
+
+.mes .section-3 .sec1-right .secl-tab ul li{
+font-size:20px;
+color:#6E767C;
+font-weight:bold;
+line-height:40px;
+text-align:center;
+cursor:pointer;
+margin-right:60px;
+border-bottom:2px solid #EAF2F4;
+position:relative;
+top:2px;
+}
+.mes .section-3 .sec1-right .secl-tab ul li:last-child{
+margin-right:0;
+}
+.mes .section-3 .sec1-right .secl-tab ul li:hover, .mes .section-3 .sec1-right .secl-tab ul li.active{
+color:#478BE6;
+border-bottom:2px solid #478BE6;
+line-height:38px;
+}
+
+.mes .section-3 .sec1-right .secl-tab .secl-info .secl-item{
+font-size:16px;
+color:#6E767C;
+text-indent:50px;
+}
+
+.mes .section-4{
+background: #3B8EFF;
+height:970px;
+}
+.mes .section-4 .sec-top, .mes .section-5 .sec-top{
+text-align:center;
+}
+.mes .section-4 .sec-top h3{
+font-size: 36px;
+color: #fff;
+margin-bottom:50px;
+}
+.mes .section-4 .sec-top p{
+font-size: 16px;
+color: #fff;
+margin-bottom:50px;
+}
+.mes .section-4 .mes05{
+float: right;
+top: 5%;
+position: absolute;
+right: 2%;
+}
+.mes .section-5{
+background: #fff;
+height:1055px;
+}
+.mes .section-5 .sec-top h3{
+font-size: 36px;
+color: #000;
+margin-bottom:50px;
+}
+.mes .section-5 .sec-top p{
+font-size: 24px;
+color: #333;
+line-height: 60px;
+background: #F1F1F1;
+margin-bottom:50px;
+}
+.mes .section-5 .mes06{
+float: left;
+top: 20%;
+position: absolute;
+left: 2%;
+}
+.erweima-tc {
+width: 100%;
+height: 100%;
+position: fixed;
+z-index: 11111;
+background: rgba(0, 0, 0, 0.4);
+top: 0;
+left: 0;
+display: none;
+}
+.sec1-right img, .mes04,.mes05,.mes06,.mes07,.mes08{
+-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
+}
+.animated .mes04,.animated .mes06,.animated .mes08{
+-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 .sec1-right img,.animated .mes03,.animated .mes05,.animated .mes07{
+-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
+}
+.sec1-left, .mes02{
+-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
+}
+.animated .sec1-left,animated .mes02{
+animation:slideDown 1s ease 0s 1 normal both;
+}
+@-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 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)
+}
+}
+@media screen and (max-width: 1170px) {
+.mes .content{
+max-width: 1024px;
+}
+.mes .section .content{
+margin: -320px 0 0 -512px !important;
+}
+}
+@media screen and (max-width: 640px) {
+.warp{
+width: 1170px;
+}
+}
+</#macro>
+<@layout>
+<!-- content here -->
+<div class="warp mes">
+	<div class="section section-1">
+		<div class="content">
+			<div class="sec1-left"><img src="${CTPATH}/images/mes/layar.png" alt=""></div>
+			<div class="sec1-right">
+				<h3>MES制造执行系统</h3>
+				<p>全面整合制造资源、全方位管理生产进度、质量、设备和人员绩效</p>
+				<ul class="list-inline">
+					<li>智能化</li>
+					<li>可视化</li>
+					<li>一体化</li>
+					<li>标准化</li>
+					<li>多平台</li>
+					<li>协同性</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="section section-2">
+		<div class="content">
+			<div class="sec-text">
+				<h3>8大功能</h3>
+				<p>MES系统包括八大功能</p>
+				<span>生产排程管理、生产过程管理、生产追溯、大数据分析、可视化管理、 全程质量控制、智能仓储管理、工业4.0接口</span>
+			</div>
+			<img class="mes02" src="${CTPATH}/images/mes/two-r.png" alt="">
+		</div>
+	</div>
+	<div class="section section-3">
+		<div class="content">
+			<img class="sec1-left" src="${CTPATH}/images/mes/con-con.png" alt="">
+			<div class="sec1-right">
+				<h3>3大核心价值</h3>
+				<div class="secl-tab">
+					<ul class="list-inline">
+						<li class="active">库存标准</li>
+						<li>生产效率</li>
+						<li>交期承诺</li>
+					</ul>
+					<div class="secl-info">
+						<div class="secl-item">
+							快速创建会议讨论
+						</div>
+						<div class="secl-item">
+							快速创建会议讨论组，沟通畅无边界
+						</div>
+						<div class="secl-item">
+							快讨论组，沟通畅无边界
+						</div>
+					</div>
+
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="section section-4">
+		<div class="content">
+			<div class="sec-top">
+				<h3>MES实现智能制造转型</h3>
+				<p>MES成功扮演只能制造承上启下的角色，集成工程车间的多重生产执行管理功能，将ERP系统生产计划落实，提升现场管理执行能力，把ERP计划与车间现场工业控制链接起来， 实现集成化的车间管理，提升制造业生产效率，从设备层、管控层、管理层，搭建智能化工厂。</p>
+			</div>
+			<img class="mes04" src="${CTPATH}/images/mes/Group1.png" alt="">
+		</div>
+	</div>
+	<div class="section section-5">
+		<div class="content">
+			<div class="sec-top">
+				<h3>MES系统架构</h3>
+				<p>工厂建模</p>
+			</div>
+			<img class="mes05" src="${CTPATH}/images/mes/Group2.png" alt="">
+		</div>
+	</div>
+</div>
+<script src="${CTPATH}/assets/js/jquery.min.js"></script>
+<script>
+	$(function() {
+        $('.secl-info .secl-item').eq(0).show().siblings().hide()
+		$('.secl-tab ul li').hover(function() {
+		    var i = $(this).index();
+		    $(this).addClass('active').siblings().removeClass('active')
+			$('.secl-info .secl-item').eq(i).show().siblings().hide()
+		})
+	})
+    !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>
+</@layout>