Ver código fonte

Merge branch 'master' of http://192.168.4.246:3000/zhangs/elab

# Conflicts:
#	.idea/workspace.xml
yeyc 6 anos atrás
pai
commit
600756bd39
9 arquivos alterados com 426 adições e 315 exclusões
  1. 266 173
      css/style.css
  2. 11 11
      index.html
  3. 1 1
      licheng.html
  4. 2 2
      loading.html
  5. 115 122
      news.html
  6. 1 1
      projects-1-1.html
  7. 0 1
      projects.html
  8. 27 0
      videoTest.html
  9. 3 4
      water/js/main.js

+ 266 - 173
css/style.css

@@ -15,13 +15,13 @@ body {
 .page {
 	width: 100%;
 	height: 100%;
-	/*max-width: 1440px;*/
-	/*max-height: 1024px;*/
 	position: relative;
-	margin: 0 auto;
+	/*margin: 0 auto;*/
+	margin-left: auto;
+	margin-right: auto;
+	text-align: center;
 	background: #fff;
 	overflow: hidden;
-	/*opacity: 0;*/
 }
 
 .inner-icon {
@@ -358,7 +358,7 @@ body {
 	.menu-list {
 		width: 100%;
 		margin: 0 auto;
-		margin-top: 9%;
+		margin-top: 10%;
 	}
 
 	.menu-list li {
@@ -430,7 +430,6 @@ body {
 	margin: 0 auto;
 	position: relative;
 	z-index: 10;
-	background: #fff;
 }
 .slideCanvas{
 	width: 100%;
@@ -841,6 +840,8 @@ body {
 /*****main for who we are****/
 .pageLayer{
 	z-index: 200;
+	width: 100%;
+	height: 100%;
 	-webkit-overflow-scrolling: touch;
 	overflow-y: scroll;
 }
@@ -977,8 +978,8 @@ body {
 	overflow-x: hidden;
 	overflow-y: auto;
 	position: absolute;
-	left: 0;
-	top: 0;
+	/*left: 0;*/
+	/*top: 0;*/
 	z-index: 210;
 	display: none;
 	line-height: 0;
@@ -1903,166 +1904,188 @@ body {
 		position: absolute;
 		top: 82%;
 		left: 30%;
+	}.menu-contact-map{
+         width: 33%;
+         height: 96px;
+         position: absolute;
+         left: 0%;
+     }
+    .menu-contact-phone{
+        width: 33%;
+        height: 96px;
+        position: absolute;
+        left: 33%;
+    }
+
+    .menu-contact-mail{
+        width: 33%;
+        height: 96px;
+        position: absolute;
+        left: 67%;
+    }
+    .map-icon{
+        width: 100%;
+        height: 32px;
+        position: relative;
+        text-align: center;
+    }
+    .map-img{
+        opacity: 0.2;
+        transform: scale(1);
+        animation: animationIcon 0.5s linear 1;
+    }
+    .map-address{
+        text-align: center;
+        width: 100%;
+        height: 32px;
+        position: relative;
+    }
+    .map-address p{
+        color: #FFFFFF;
+        opacity: 0;
+        font-size: 17px;
+        height: 32px;
+        line-height: 32px;
+        vertical-align: center;
+        animation: animationAddressDis 0.5s linear 1;
+    }
+    .map-desc{
+        text-align: center;
+        width: 120%;
+        height: 32px;
+        left: -10%;
+        position: relative;
+    }
+    .map-desc p{
+        opacity: 0;
+        animation: animationDescDis 0.5s linear 1;
+        color: #FFFFFF;
+        font-size: 13px;
+        height: 32px;
+        line-height: 32px;
+        vertical-align: center;
+        white-space:nowrap;
+    }
+
+    .phone-img{
+        opacity: 0.2;
+        transform: scale(1);
+        animation: animationIcon 0.5s linear 1;
+    }
+    .phone-icon{
+        width: 100%;
+        height: 32px;
+        position: relative;
+        text-align: center;
+    }
+    .phone-address{
+        text-align: center;
+        width: 100%;
+        height: 32px;
+        position: relative;
+    }
+    .phone-address p{
+        opacity: 0;
+        color: #FFFFFF;
+        font-size: 17px;
+        height: 32px;
+        line-height: 32px;
+        vertical-align: center;
+        animation: animationAddressDis 0.5s linear 1;
+    }
+    .phone-desc{
+        text-align: center;
+        width: 120%;
+        height: 32px;
+        left: -10%;
+        position: relative;
+    }
+    .phone-desc p{
+        opacity: 0;
+        font-size: 13px;
+        color: #FFFFFF;
+        height: 32px;
+        line-height: 32px;
+        vertical-align: center;
+        white-space:nowrap;
+        animation: animationDescDis 0.5s linear 1;
+    }
+
+    .email-img{
+        opacity: 0.2;
+        transform: scale(1);
+        animation: animationIcon 0.5s linear 1;
+    }
+    .email-icon{
+        width: 100%;
+        height: 32px;
+        position: relative;
+        text-align: center;
+    }
+    .email-address{
+        text-align: center;
+        width: 100%;
+        height: 32px;
+        position: relative;
+    }
+    .email-address p{
+        opacity: 0;
+        color: #FFFFFF;
+        font-size: 17px;
+        height: 32px;
+        line-height: 32px;
+        vertical-align: center;
+        animation: animationAddressDis 0.5s linear 1;
+    }
+    .email-desc{
+        text-align: center;
+        width: 120%;
+        height: 32px;
+        left: -10%;
+        position: relative;
+    }
+    .email-desc p{
+        opacity: 0;
+        color: #FFFFFF;
+        font-size: 13px;
+        height: 32px;
+        line-height: 32px;
+        vertical-align: center;
+        white-space:nowrap;
+        animation: animationDescDis 0.5s linear 1;
+    }
+
+
+}
+@media only screen and (max-height: 730px){
+	.menu-contact{
+		top: 80%;
+	}
+	.menu-list{
+		margin-top: 4%;
+	}
+}
+
+@media only screen and (width: 1024px){
+
+	.menu-contact{
+		width: 70%;
+		left: 15%;
 	}
 
 	.menu-contact-map{
 		width: 33%;
-		height: 96px;
-		position: absolute;
 		left: 0%;
 	}
 	.menu-contact-phone{
 		width: 33%;
-		height: 96px;
-		position: absolute;
 		left: 33%;
 	}
 
 	.menu-contact-mail{
 		width: 33%;
-		height: 96px;
-		position: absolute;
 		left: 67%;
 	}
-	.map-icon{
-		width: 100%;
-		height: 32px;
-		position: relative;
-		text-align: center;
-	}
-	.map-img{
-		opacity: 0.2;
-		transform: scale(1);
-		animation: animationIcon 0.5s linear 1;
-	}
-	.map-address{
-		text-align: center;
-		width: 100%;
-		height: 32px;
-		position: relative;
-	}
-	.map-address p{
-		color: #FFFFFF;
-		opacity: 0;
-		font-size: 17px;
-		height: 32px;
-		line-height: 32px;
-		vertical-align: center;
-		animation: animationAddressDis 0.5s linear 1;
-	}
-	.map-desc{
-		text-align: center;
-		width: 120%;
-		height: 32px;
-		left: -10%;
-		position: relative;
-	}
-	.map-desc p{
-		opacity: 0;
-		animation: animationDescDis 0.5s linear 1;
-		color: #FFFFFF;
-		font-size: 13px;
-		height: 32px;
-		line-height: 32px;
-		vertical-align: center;
-		white-space:nowrap;
-	}
-
-	.phone-img{
-		opacity: 0.2;
-		transform: scale(1);
-		animation: animationIcon 0.5s linear 1;
-	}
-	.phone-icon{
-		width: 100%;
-		height: 32px;
-		position: relative;
-		text-align: center;
-	}
-	.phone-address{
-		text-align: center;
-		width: 100%;
-		height: 32px;
-		position: relative;
-	}
-	.phone-address p{
-		opacity: 0;
-		color: #FFFFFF;
-		font-size: 17px;
-		height: 32px;
-		line-height: 32px;
-		vertical-align: center;
-		animation: animationAddressDis 0.5s linear 1;
-	}
-	.phone-desc{
-		text-align: center;
-		width: 120%;
-		height: 32px;
-		left: -10%;
-		position: relative;
-	}
-	.phone-desc p{
-		opacity: 0;
-		font-size: 13px;
-		color: #FFFFFF;
-		height: 32px;
-		line-height: 32px;
-		vertical-align: center;
-		white-space:nowrap;
-		animation: animationDescDis 0.5s linear 1;
-	}
-
-	.email-img{
-		opacity: 0.2;
-		transform: scale(1);
-		animation: animationIcon 0.5s linear 1;
-	}
-	.email-icon{
-		width: 100%;
-		height: 32px;
-		position: relative;
-		text-align: center;
-	}
-	.email-address{
-		text-align: center;
-		width: 100%;
-		height: 32px;
-		position: relative;
-	}
-	.email-address p{
-		opacity: 0;
-		color: #FFFFFF;
-		font-size: 17px;
-		height: 32px;
-		line-height: 32px;
-		vertical-align: center;
-		animation: animationAddressDis 0.5s linear 1;
-	}
-	.email-desc{
-		text-align: center;
-		width: 120%;
-		height: 32px;
-		left: -10%;
-		position: relative;
-	}
-	.email-desc p{
-		opacity: 0;
-		color: #FFFFFF;
-		font-size: 13px;
-		height: 32px;
-		line-height: 32px;
-		vertical-align: center;
-		white-space:nowrap;
-		animation: animationDescDis 0.5s linear 1;
-	}
-}
-@media only screen and (max-height: 680px){
-	.menu-contact{
-		top: 75%;
-	}
-	.menu-list{
-		margin-top: 3%;
-	}
 }
 /**
 *hover disapper animation
@@ -2230,16 +2253,16 @@ body {
 }
 .news-sample-list{
 	position: relative;
+	width: 100%;
+	height: 100%;
 }
 .news-detail{
 	position: fixed;
 	left: 0;
-	top: 64px;
-	z-index: 900;
+	z-index: 1001;
 	width: 100%;
 	height: 100%;
 	background-color: #FFFFFF;
-	/*max-height: 1500px;*/
 	transform: translateY(100%);
 	opacity: 0;
 	transition: all ease 1s
@@ -2251,8 +2274,10 @@ body {
 .article-close{
 	width: 40px;
 	height: 40px;
-	margin: 1px auto;
+	margin: 0px auto;
 	color: #ffffff;
+	/*margin-top: 64px;*/
+	text-align: center;
 	/*transform: scale(0.6);*/
 	font-family: "Arial";
 	font-size: 40px;
@@ -2264,6 +2289,10 @@ body {
 	position: relative;
 	z-index: 10;
 }
+.iframe-news{
+	width: 100%;
+	height: 100%;
+}
 .item-time{
 	bottom: 6%;
 	font-size: 16px;
@@ -2285,16 +2314,7 @@ body {
 	letter-spacing: 2.46px;
     opacity: 0.8;
 }
-.newsItem-mark{
-	top: 23%;
-}
-.newsItem-mark a{
-	font-size: 12px;
-	color: #fff;
-	line-height: 38px;
-	padding: 8px 30px;
-	background: #3FACBF;
-}
+
 @media only screen and (min-width: 750px){
 	.newsItem_1{
 		width: 91.6%;
@@ -2336,14 +2356,49 @@ body {
 		width: 100%;
 		object-fit: cover;
 	}
+	.item-title{
+		top: 35%;
+		font-size: 42px;
+		letter-spacing: 8px;
+	}
+	.item-title p{
+		font-size: 24px;
+		font-weight: 400;
+		letter-spacing: 2.46px;
+		opacity: 0.8;
+		padding-top: 15px;
+	}
+	.newsItem-mark a{
+		font-size: 12px;
+		color: #fff;
+		line-height: 38px;
+		padding: 8px 18px;
+		background: #3FACBF;
+	}
+	.newsItem-mark{
+		top: 23%;
+	}
+	.item-title-sub{
+		font-size: 33px;
+	}
+	.item-title-sub p{
+		font-size: 14px;
+	}
+	.news-body{
+		padding-top: 0%;
+	}
+	.item-time p{
+		font-size: 16px;
+		opacity: 0.8;
+	}
 }
 
 @media only screen and (max-width: 750px) and (-webkit-min-device-pixel-ratio:1.5){
     .newsBody{
         position: relative;
         width: 100%;
-        height: 662px;
-        margin-bottom: 25px;
+        /*height: 400px;*/
+        margin-bottom: 1px;
     }
     .newsItem_1{
 		width: 91.6%;
@@ -2353,7 +2408,7 @@ body {
 		position: relative;
 	}
 	.newsItem_1 .itemBg{
-		height: 331px;
+		height: 200px;
 		width: 100%;
 		object-fit: cover;
 	}
@@ -2364,7 +2419,7 @@ body {
 		margin-left: 4.2%;
 	}
 	.newsItem_2 .itemBg{
-		height: 331px;
+		height: 200px;
 		object-fit: cover;
 		width: 100%;
 	}
@@ -2375,10 +2430,48 @@ body {
 		margin-left: 4.2%;
 	}
 	.newsItem_3 .itemBg{
-		height: 331px;
+		height: 200px;
 		width: 100%;
 		object-fit: cover;
 	}
+	.item-title{
+		top: 35%;
+		font-size: 18px;
+		letter-spacing: 8px;
+		width: 90%;
+		margin-left: 5%;
+
+	}
+	.item-title p{
+		font-size: 12px;
+		font-weight: 400;
+		letter-spacing: 2.46px;
+		opacity: 0.8;
+		padding-top: 15px;
+	}
+	.newsItem-mark{
+		top: 12%;
+	}
+	.newsItem-mark a{
+		font-size: 12px;
+		color: #fff;
+		line-height: 38px;
+		padding: 6px 6px;
+		background: #3FACBF;
+	}
+	.item-title-sub{
+		font-size: 18px;
+	}
+	.item-title-sub p{
+		font-size: 8px;
+	}
+	.news-body{
+		padding-top: 11.5%;
+	}
+	.item-time p{
+		font-size: 10px;
+		opacity: 0.8;
+	}
 }
 /**
  *新闻列表页
@@ -2461,7 +2554,7 @@ body {
 	margin-top: 1px;
 }
 .news-list-item-title p{
-	font-size: 24px;
+	font-size: 16px;
 	color: #fff;
 	line-height: 68px;
 	vertical-align: center;

+ 11 - 11
index.html

@@ -15,7 +15,6 @@
         .page {
             opacity: 0;
         }
-
         .top-menu {
             background: none;
         }
@@ -131,17 +130,17 @@
             <ul></ul>
             <div class="slider-title wow fadeIn" data-wow-delay="4s" data-wow-duration="1s" id="slider-title">测试字体位置
             </div>
-            <div class="link-box">
-                <a class="slider-links wow fadeIn" data-wow-delay="4s" data-wow-duration="1s" id="slider-links">了解详情</a>
-            </div>
+            <!--<div class="">-->
+                <!--<a class="slider-links wow fadeIn" data-wow-delay="4s" data-wow-duration="1s" id="slider-links">了解详情</a>-->
+            <!--</div>-->
         </div>
         <div class="small-slider">
             <img class="slider-img wow fadeIn" data-wow-delay="1s" data-wow-duration="2s"
                  src="http://yun-image.elab-plus.com/images/index/1_objects@2x.png"/>
-            <div class="link-box">
-                <a class="slider-links wow fadeIn" data-wow-delay="5.2s" data-wow-duration="1s"
-                   href="javascript:showProjects();">了解详情</a>
-            </div>
+            <!--<div class="">-->
+                <!--<a class="slider-links wow fadeIn" data-wow-delay="5.2s" data-wow-duration="1s"-->
+                   <!--href="javascript:showProjects();">了解详情</a>-->
+            <!--</div>-->
         </div>
     </div>
 
@@ -202,7 +201,7 @@
 
 <!--news center-->
 <div class="newsLayer pageLayer" hidden>
-    <iframe frameborder="0" height="100%" name="frameNews" scrolling="yes" src="news.html" width="100%"></iframe>
+    <iframe frameborder="0" name="frameNews" scrolling="yes" src="news.html" width="100%" height="100%"></iframe>
 </div>
 <!--/news center-->
 
@@ -345,7 +344,7 @@
                     // 	var $_html = `<li>
                     // <img class="slider-img animation" src="${host+img['image']}" />
                     // <div class="slider-title">${img['name']}</div>
-                    // <div class="link-box">
+                    // <div class="">
                     // 	<a href="javascript:showSliderLink('${img['url']}');" class="slider-links wow fadeIn" data-wow-duration="1s" data-wow-delay="4s">浏览作品</a>
                     // </div>
                     //   </li>`;
@@ -403,7 +402,8 @@
             console.log(tmpImgs[i].src + "|" + tmpImgs[i].width + tmpImgs[i].height);
             // Imgs.set(tmpImgs[i].src, {width :tmpImgs[i].width, height:tmpImgs[i].height});
             if (ImgLoaded == Count) {
-                console.log(Imgs);
+                console.log("onLoad:"+JSON.stringify(Imgs));
+                debugger
                 var initCanvasSlideshow = new CanvasSlideshow({
                     sprites: spriteImagesSrc,
                     displacementImage: 'water/img/dmaps/2048x2048/clouds.jpg',

+ 1 - 1
licheng.html

@@ -271,7 +271,7 @@
 			<div class="section2 wrap wow fadeInUp" data-wow-duration="1s">
 				<h3>公司简介</h3>
 				<p>ELAB是一家以技术和数据驱动的新型未来人居空间开发的互联网平台型公司。我们以客户需求为核心,实现创新性产品的预制性开发,并为开发商提供系统性整体解决方案。</p>
-				<p>ELAB致力于实现居者及开发企业的价值最大化。通过技术、数据、产品赋能,逆转传统从土地到客户充满不确定性高风险的开发旧模式(B2C)为从客户到土地的新型房地产开发模式(C2B),从源头解行业痛点,帮助企业长期可持续发展,同时从居者出发,挖掘居者真实居住需求,打造未来人居产品。</p>
+				<p>ELAB致力于实现居者及开发企业的价值最大化。通过技术、数据、产品赋能,逆转传统从土地到客户充满不确定性高风险的开发旧模式(B2C)为从客户到土地的新型房地产开发模式(C2B),从源头解行业痛点,帮助企业长期可持续发展,同时从居者出发,挖掘居者真实居住需求,打造未来人居产品。</p>
 			</div>
 			<div class="section3 wrap">
 				<h3 class="wow fadeInRight" data-wow-duration="1s" data-wow-delay="0.5s">业务范畴</h3>

+ 2 - 2
loading.html

@@ -26,7 +26,7 @@
     	}
     	.logo{
     		margin-top: -10%;
-    		margin-bottom: 0;
+    		margin-bottom: 3.5%;
     	}
     	.progress-num{
     		margin: 0 auto;
@@ -213,7 +213,7 @@
     var mock = setInterval(function () {
         var mock = mockloaded();
         $("#progress-num").text(mock);
-        $(".number-pb-shown").css("width", "" + mock + "%");
+        $(".number-pb-shown").css("width", "" + mock + "%"Arita);
     },100);
 
     //预加载图片

+ 115 - 122
news.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
     <title>NEWS CENTER</title>
+    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
     <link href="css/reset.css" rel="stylesheet"/>
     <link href="css/style.css?v=0.346785347683" rel="stylesheet"/>
     <link href="css/animate.min.css" rel="stylesheet"/>
@@ -181,148 +182,45 @@
             $(".inner-menu").attr("src", "http://yun-image.elab-plus.com/images/contact/1_objects@2x_4.png");
             $(".inner-artcle").attr("src", "http://yun-image.elab-plus.com/images/contact/1_objects@2x_5.png");
             $(".top-menu-news").css("background-color","#2C2E34");
-            // var parentDiv = document.getElementById("iframeParent");
             $("#iframeParent").empty();
         });
 
         <!-- menu hover start-->
         $('.elab_who').hover(function () {
             currentIdx = 1;
-
-            // $(".elab_who").css("opacity","1");
-            // $(".elab_who").removeClass("animate_fadeIn");
-            // $(".elab_what").removeClass("animate_fadeIn");
-            // $(".elab_news").removeClass("animate_fadeIn");
-            // $(".elab_project").removeClass("animate_fadeIn");
-            // $(".elab_contact").removeClass("animate_fadeIn");
-            //
-            // $(".elab_what").addClass("animate_fadeOut");
-            // $(".elab_news").addClass("animate_fadeOut");
-            // $(".elab_project").addClass("animate_fadeOut");
-            // $(".elab_contact").addClass("animate_fadeOut");
         },function () {
             currentIdx = 0;
-            // $(".elab_who").css("opacity","1");
-            //
-            // $(".elab_who").removeClass("animate_fadeOut");
-            // $(".elab_what").removeClass("animate_fadeOut");
-            // $(".elab_news").removeClass("animate_fadeOut");
-            // $(".elab_project").removeClass("animate_fadeOut");
-            // $(".elab_contact").removeClass("animate_fadeOut");
-
-            // $(".elab_what").addClass("animate_fadeIn");
-            // $(".elab_news").addClass("animate_fadeIn");
-            // $(".elab_project").addClass("animate_fadeIn");
-            // $(".elab_contact").addClass("animate_fadeIn");
         });
 
         $('.elab_what').hover(function () {
             currentIdx = 2;
-            // $(".elab_what").css("opacity","1");
-            // $(".elab_who").removeClass("animate_fadeIn");
-            // $(".elab_what").removeClass("animate_fadeIn");
-            // $(".elab_news").removeClass("animate_fadeIn");
-            // $(".elab_project").removeClass("animate_fadeIn");
-            // $(".elab_contact").removeClass("animate_fadeIn");
 
         },function () {
             currentIdx = 0;
-           /* $(".elab_what").css("opacity","1");
-            $(".elab_who").removeClass("animate_fadeOut");
-            $(".elab_what").removeClass("animate_fadeOut");
-            $(".elab_news").removeClass("animate_fadeOut");
-            $(".elab_project").removeClass("animate_fadeOut");
-            $(".elab_contact").removeClass("animate_fadeOut");*/
-
-            // $(".elab_who").addClass("animate_fadeIn");
-            // $(".elab_news").addClass("animate_fadeIn");
-            // $(".elab_project").addClass("animate_fadeIn");
-            // $(".elab_contact").addClass("animate_fadeIn");
         });
 
         $('.elab_news').hover(function () {
             currentIdx = 3;
-            /*$(".elab_news").css("opacity","1");
-            $(".elab_who").removeClass("animate_fadeIn");
-            $(".elab_what").removeClass("animate_fadeIn");
-            $(".elab_news").removeClass("animate_fadeIn");
-            $(".elab_project").removeClass("animate_fadeIn");
-            $(".elab_contact").removeClass("animate_fadeIn");*/
 
         },function () {
             currentIdx = 0;
-            /*$(".elab_news").css("opacity","1");
-            $(".elab_who").removeClass("animate_fadeOut");
-            $(".elab_what").removeClass("animate_fadeOut");
-            $(".elab_news").removeClass("animate_fadeOut");
-            $(".elab_project").removeClass("animate_fadeOut");
-            $(".elab_contact").removeClass("animate_fadeOut");*/
-
-            // $(".elab_who").addClass("animate_fadeIn");
-            // $(".elab_what").addClass("animate_fadeIn");
-            // $(".elab_project").addClass("animate_fadeIn");
-            // $(".elab_contact").addClass("animate_fadeIn");
         });
 
         $('.elab_project').hover(function () {
             currentIdx = 4;
-            /*$(".elab_project").css("opacity","1");
-
-            $(".elab_who").removeClass("animate_fadeIn");
-            $(".elab_what").removeClass("animate_fadeIn");
-            $(".elab_news").removeClass("animate_fadeIn");
-            $(".elab_project").removeClass("animate_fadeIn");
-            $(".elab_contact").removeClass("animate_fadeIn");
-
-            $(".elab_who").addClass("animate_fadeOut");
-            $(".elab_what").addClass("animate_fadeOut");
-            $(".elab_news").addClass("animate_fadeOut");
-            $(".elab_contact").addClass("animate_fadeOut");*/
         },function () {
             currentIdx = 0;
-            /*$(".elab_project").css("opacity","1");
-            $(".elab_who").removeClass("animate_fadeOut");
-            $(".elab_what").removeClass("animate_fadeOut");
-            $(".elab_news").removeClass("animate_fadeOut");
-            $(".elab_project").removeClass("animate_fadeOut");
-            $(".elab_contact").removeClass("animate_fadeOut");
-
-            $(".elab_who").addClass("animate_fadeIn");
-            $(".elab_what").addClass("animate_fadeIn");
-            $(".elab_news").addClass("animate_fadeIn");
-            $(".elab_contact").addClass("animate_fadeIn");*/
         });
 
         $('.elab_contact').hover(function () {
             currentIdx = 5;
-            /*$(".elab_contact").css("opacity","1");
-            $(".elab_who").removeClass("animate_fadeIn");
-            $(".elab_what").removeClass("animate_fadeIn");
-            $(".elab_news").removeClass("animate_fadeIn");
-            $(".elab_project").removeClass("animate_fadeIn");
-            $(".elab_contact").removeClass("animate_fadeIn");
-
-            $(".elab_who").addClass("animate_fadeOut");
-            $(".elab_what").addClass("animate_fadeOut");
-            $(".elab_news").addClass("animate_fadeOut");
-            $(".elab_project").addClass("animate_fadeOut");*/
         },function () {
             currentIdx = 0;
-           /* $(".elab_contact").css("opacity","1");
-            $(".elab_who").removeClass("animate_fadeOut");
-            $(".elab_what").removeClass("animate_fadeOut");
-            $(".elab_news").removeClass("animate_fadeOut");
-            $(".elab_project").removeClass("animate_fadeOut");
-            $(".elab_contact").removeClass("animate_fadeOut");
-
-            $(".elab_who").addClass("animate_fadeIn");
-            $(".elab_what").addClass("animate_fadeIn");
-            $(".elab_news").addClass("animate_fadeIn");
-            $(".elab_project").addClass("animate_fadeIn");*/
         });
         <!-- menu hover end -->
         <!--mouse over listener start-->
         <!--mouse over listener end-->
+
         setInterval(function () {
             if(markIdx !== currentIdx){
                 markIdx = currentIdx;
@@ -385,7 +283,7 @@
         var $_list;
         var $_listV;
         // 192.168.0.16
-        //读取分类数据 106.14.225.13
+        //读取分类数据 106.14.225.13(正式)
         $.get("http://106.14.225.13:8081/rest/listNews", function (result) {
             console.log("Result Data:" + JSON.stringify(result.result));
             window.newsList = result.result;
@@ -416,27 +314,32 @@
                         var $_img2 = tmp2['bgImage'] || 'http://yun-image.elab-plus.com/images/projects/1_objects@2x_14.jpg';
 
                         var data0 = new Date(tmp0['created']);
+                        var data1 = new Date(tmp1['created']);
+                        var data2 = new Date(tmp2['created']);
+                        if(this.isSafari()){
+                            data0 = new Date(this.getDateForSafari(tmp0['created']));
+                            data1 = new Date(this.getDateForSafari(tmp1['created']));
+                            data2 = new Date(this.getDateForSafari(tmp2['created']));
+                        }
                         console.log("tmp0['created']:"+tmp0['created']);
                         console.log("data0:"+data0.getFullYear());
                         console.log("data0:"+data0.getMonth());
                         console.log("data0:"+data0.getDate());
-                        var data1 = new Date(tmp1['created']);
-                        var data2 = new Date(tmp2['created']);
 
-                        $_html = `<div class="newsItem_1 wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="${$_t}s" target="_self" onclick="turnToArticle(${i})" >
+                        $_html = `<div class="newsItem_1 " target="_self" onclick="turnToArticle(${i})" >
 					                  <img class="itemBg" src="${$_img0}"/>
 					                  <div class="newsItem-mark item-inner"><a>${tmp0['tag']}</a></div>
 					                  <div class="item-title item-inner">${tmp0['title']}<p>${tmp0['subTitle']}</p></div>
 					                  <div class="item-time item-time-inner"><p>${data0.getFullYear()+'.'+(data0.getMonth()+1)+'.'+data0.getDate()}</p></div>
 				                  </div>
 				                  <div class="newsBody">
-				                    <div class="newsItem_2 wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="${$_t}s" target="_self" onclick="turnToArticle(${i+1})">
+				                    <div class="newsItem_2" target="_self" onclick="turnToArticle(${i+1})">
 				                        <img class="itemBg" src="${$_img1}" />
 				                        <div class="newsItem-mark item-inner"><a>${tmp1['tag']}</a></div>
 					                    <div class="item-title item-inner item-title-sub">${tmp1['title']}<p>${tmp1['subTitle']}</p></div>
 					                    <div class="item-time item-time-inner"><p>${data1.getFullYear()+'.'+(data1.getMonth()+1)+'.'+data1.getDate()}</p></div>
                                     </div>
-                                    <div class="newsItem_3 wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="${$_t}s" target="_self" onclick="turnToArticle(${i+2})">
+                                    <div class="newsItem_3 " target="_self" onclick="turnToArticle(${i+2})">
 				                        <img class="itemBg" src="${$_img2}" />
 				                        <div class="newsItem-mark item-inner"><a>${tmp2['tag']}</a></div>
 					                    <div class="item-title item-inner item-title-sub">${tmp2['title']}<p>${tmp2['subTitle']}</p></div>
@@ -449,15 +352,19 @@
                         var $_img1 = tmp1['bgImage'] || 'http://yun-image.elab-plus.com/images/projects/1_objects@2x_14.jpg';
                         var data0 = new Date(tmp0['created']);
                         var data1 = new Date(tmp1['created']);
+                        if(this.isSafari()){
+                            data0 = new Date(this.getDateForSafari(tmp0['created']));
+                            data1 = new Date(this.getDateForSafari(tmp1['created']));
+                        }
                         $_html = `
                                   <div class="newsBody">
-				                    <div class="newsItem_2 wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="${$_t}s" target="_self" onclick="turnToArticle(${i})">
+				                    <div class="newsItem_2 " target="_self" onclick="turnToArticle(${i})">
 				                        <img class="itemBg" src="${$_img0}"/>
 				                        <div class="newsItem-mark item-inner"><a>${tmp0['tag']}</a></div>
 					                    <div class="item-title item-inner item-title-sub">${tmp0['title']}<p>${tmp0['subTitle']}</p></div>
 					                    <div class="item-time item-time-inner"><p>${data0.getFullYear()+'.'+(data0.getMonth()+1)+'.'+data0.getDate()}</p></div>
                                     </div>
-                                    <div class="newsItem_3 wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="${$_t}s" target="_self" onclick="turnToArticle(${i+1})">
+                                    <div class="newsItem_3 " target="_self" onclick="turnToArticle(${i+1})">
 				                        <img class="itemBg" src="${$_img1}" />
 				                        <div class="newsItem-mark item-inner"><a>${tmp1['tag']}</a></div>
 					                    <div class="item-title item-inner item-title-sub">${tmp1['title']}<p>${tmp1['subTitle']}</p></div>
@@ -468,9 +375,12 @@
                     }else if(tmp0 && !tmp1 && !tmp2){
                         var $_img0 = tmp0['bgImage'] || 'http://yun-image.elab-plus.com/images/projects/1_objects@2x_14.jpg';
                         var data0 = new Date(tmp0['created']);
+                        if(this.isSafari()){
+                            data0 = new Date(this.getDateForSafari(tmp0['created']));
+                        }
                         $_html = `
 				                  <div class="newsBody">
-				                    <div class="newsItem_2 wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="${$_t}s" target="_self" onclick="turnToArticle(${i}})">
+				                    <div class="newsItem_2" target="_self" onclick="turnToArticle(${i}})">
 				                        <img class="itemBg" src="${$_img0}"/>
 				                        <div class="newsItem-mark item-inner"><a>${tmp0['tag']}</a></div>
 					                    <div class="item-title item-inner item-title-sub">${tmp0['title']}<p>${tmp0['subTitle']}</p></div>
@@ -502,14 +412,14 @@
 
                                       <div class="news-list-item-left" onclick="turnToArticle(${i})">
 
-                                        <div class="news-list-item-box"><p>${item1['id']}</p></div>
+                                        <div class="news-list-item-box"><p>${$_listV.length-i}</p></div>
                                         <div class="news-list-item-description">
                                             <div class="news-list-item-title"><p>${item1['title'].replace("<br>","")}</p></div>
                                             <div class="news-list-item-bottom"></div>
                                         </div>
                                       </div>
-                                      <div class="news-list-item-right" onclick="turnToArticle(${i+1})">
-                                        <div class="news-list-item-box"><p>${item2['id']}</p></div>
+                                      <div class="news-list-item-right" onclick="turnToArticle(${(i+1)})">
+                                        <div class="news-list-item-box"><p>${$_listV.length-i-1}</p></div>
                                         <div class="news-list-item-description">
                                             <div class="news-list-item-title"><p>${item2['title'].replace("<br>","")}</p></div>
                                             <div class="news-list-item-bottom"></div>
@@ -519,8 +429,8 @@
                                  `;
                 }else if(!item2 && item1){
                     $_html = `<div class="news-list-item wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="${$_t}s">
-                                      <div class="news-list-item-left" onclick="turnToArticle(${i})">
-                                        <div class="news-list-item-box"><p>${item1['id']}</p></div>
+                                      <div class="news-list-item-left" onclick="turnToArticle(${(i)})">
+                                        <div class="news-list-item-box"><p>${$_listV.length-i}</p></div>
                                         <div class="news-list-item-description">
                                             <div class="news-list-item-title"><p>${item1['title'].replace("<br>","")}</p></div>
                                             <div class="news-list-item-bottom"></div>
@@ -554,8 +464,14 @@
                 $(".news_tab_img").attr("src", "https://dm.static.elab-plus.com/elabGuanWang/List@2x.png");
                 $(".news-list").empty();
                 handleModuleShow();
-                $(".news-body").css("padding-top","0%");
+
                 $(".top-menu-news").css("background-color","#2C2E34");
+                if(this.devicePc()){
+                    $(".news-body").css("padding-top","0%");
+                }else {
+                    $(".news-body").css("padding-top","11.5%");
+                }
+
             }
         }
         $(".news_tab_img").on("click", function (e) {
@@ -575,13 +491,38 @@
         wow.init();
     }
 
+    /**
+     * check safari浏览器
+     * @returns {boolean}
+     */
+    function isSafari() {
+        return !!(navigator.userAgent.match('Safari') && !navigator.userAgent.match('CriOS') && !navigator.userAgent.match('QQBrowser') && !navigator.userAgent.match('Chrome'));
+    }
+
+    /**
+     * 获取safari环境下的时间戳
+     * @param date 2018-12-10T02:35:08.000+0000
+     */
+    function getDateForSafari(date){
+        var year = date.substr(0,4);
+        var month = date.substr(5,2);
+        var day = date.substr(8,2);
+        console.log("year:"+year);
+        console.log("month:"+month);
+        console.log("day:"+day);
+        return year+"/"+month+"/"+day;
+    }
+
     function menuShowProjects() {
         top.closeAndShowPro('projectsLayer');
     }
 
     function turnToArticle(data) {
         item = window.newsList[data];
-        lineUrl = item["linkUrl"];
+        lineUrl = item["linkPcUrl"];
+        if(!this.devicePc()){
+            lineUrl = item["linkUrl"];
+        }
         var parentDiv = document.getElementById("iframeParent");
         articleCloseBtn = document.createElement("Div");
         articleCloseBtn.setAttribute('class',"article-close");
@@ -589,12 +530,16 @@
         parentDiv.appendChild(articleCloseBtn);
         iframeHtml = document.createElement("iframe");
         iframeHtml.setAttribute('frameborder','0');
-        iframeHtml.setAttribute('height','100%');
+        iframeHtml.setAttribute('height','100vh');
         iframeHtml.setAttribute('width','100%');
         iframeHtml.setAttribute('scrolling','yes');
         iframeHtml.setAttribute('name','newsIframe');
+        iframeHtml.setAttribute('class',"iframe-news");
+        iframeHtml.setAttribute('id',"iframe-news");
+        iframeHtml.onload = function(){
+            // reinitIframe();
+        };
         parentDiv.appendChild(iframeHtml);
-        // window.frames.newsIframe.window.location.reload(true);
         iframeHtml.setAttribute('src',lineUrl);
 
         $(".top-menu-news").css("background-color","#FFFFFF");
@@ -608,8 +553,56 @@
         $(".inner-artcle").attr("src", "http://yun-image.elab-plus.com/images/index/1_objects@2x_4.png");
         $(".news-detail").addClass("active");
         iframeShow = true;
+
+        // news-detail
         // news-body
     }
+
+    function reinitIframe() {
+        // var iframe = document.getElementById("iframe-news");
+        var iframe = $("#iframe-news");
+        setTimeout(function () {
+            var height = iframe.contents().find("body").height();
+            console.log("reinitIframe:"+height);
+        },500);
+    }
+
+    function setIframeHeight(iframeId){
+        var iframe = document.getElementById(iframeId);
+        console.log("setIframeHeight");
+        if (document.getElementById){
+            if (iframe && !window.opera){
+                if (iframe.contentDocument && iframe.contentDocument.body.offsetHeight){
+                    iframe.height = iframe.contentDocument.body.offsetHeight + 20; //FF NS
+                }else if(iframe.Document && iframe.Document.body.scrollHeight){
+                    iframe.height = iframe.Document.body.scrollHeight + 10;
+                }else{
+                    if(iframe.contentWindow.document && iframe.contentWindow.document.body.scrollHeight) {
+                        iframe.height = iframe.contentWindow.document.body.scrollHeight;
+                    }
+                }
+            }
+        }
+    }
+
+    function devicePc() {
+        var sUserAgent = navigator.userAgent.toLowerCase();
+        var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
+        var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
+        var bIsMidp = sUserAgent.match(/midp/i) == "midp";
+        var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
+        var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
+        var bIsAndroid = sUserAgent.match(/android/i) == "android";
+        var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
+        var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
+
+        if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
+            return false;
+        } else {
+            return true;
+        }
+
+    }
 </script>
 </body>
 </html>

+ 1 - 1
projects-1-1.html

@@ -86,7 +86,7 @@
 						<p>90天内完成产品创新及可行性的验证</p>
 					</div>
 					<div class="words2 wow fadeInRight" data-wow-duration="1s" data-wow-delay="0.5s">
-						我们在线收集了大量C端的产品设计需求热度数据,并在2016年举办 全球新锐设计师大赛,众智众筹,向全球300多家知名设计单位和个人征集作品。大师评 审团最终评选出20家入围作品和8家优胜奖,这些作品成为了大量的创新产品原型。
+						我们在线收集了大量C端的产品设计需求热度数据,并在2016年举办全球新锐设计师大赛,众智众筹,向全球300多家知名设计单位和个人征集作品。大师评审团最终评选出20家入围作品和8家优胜奖,这些作品成为了大量的创新产品原型。
 					</div>
 					<div class="item-link item-inner wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.5s"><a id='video_btn_global' href="javascript:;" class="parts-links">查看视频</a></div>
 				</div>

+ 0 - 1
projects.html

@@ -404,7 +404,6 @@
                     $(".project-list").append($_html);
                 }
             }
-
         });
 
     });

+ 27 - 0
videoTest.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang='en'>
+
+<head>
+    <meta charset="UTF-8">
+    <meta content='width=device-width, initial-scale=1.0,user-scalable=no' name='viewport'>
+    <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
+    <style type="text/css">
+        .videoContent{
+            width: 100vw;
+            height: 100vh;
+            object-fit: fill;
+        }
+        .videoBg{
+            width: 100vw;
+            height:100vh;
+            background-color: white;
+        }
+    </style>
+</head>
+<body>
+<div class="videoBg">
+    <video class="videoContent" controls src="https://dm.static.elab-plus.com/bjJinMaoFu/item_video_0.mp4"></video>
+</div>
+</body>
+<script></script>
+</html>

+ 3 - 4
water/js/main.js

@@ -3,13 +3,12 @@
     window.CanvasSlideshow = function( options ) {
 
 
-
+        console.log("CanvasSlideshow:"+JSON.stringify(options));
       //  SCOPE
       /// ---------------------------
       var that  =   this;
 
-
-
+      debugger
       //  OPTIONS
       /// ---------------------------
       options                     = options || {};
@@ -153,7 +152,7 @@
 				var origImages = options.origImages;
 				var scaleX;
 				var scaleY;
-
+          console.log("origImages:"+JSON.stringify(origImages));
         for ( var i = 0; i < rSprites.length; i++ ) {
 
 					var texture   = new PIXI.Texture.fromImage( sprites[i]);