преди 6 години · ffc85f3df9
--- a/2018专题/18073D模型展示专题/demo.html
+++ b/2018专题/18073D模型展示专题/demo.html
@@ -1,15 +0,0 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-<head>
			
 
				-    <meta charset="UTF-8">
			
 
				-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
			
 
				-    <title>Document</title>
			
 
				-    <script src="./js/lib/rem.js"></script>
			
 
				-</head>
			
 
				-<body>
			
 
				-    <div class="line"></div>
			
 
				-    <script src="//www.duowan.com/assets/js/jquery.js"></script>
			
 
				-    <script src="./js/main.js"></script>
			
 
				-</body>
			
 
				-</html>
			
--- a/2018专题/18073D模型展示专题/img/arrow-down.png
+++ b/2018专题/18073D模型展示专题/img/arrow-down.png
--- a/2018专题/18073D模型展示专题/img/arrow-right-icon.png
+++ b/2018专题/18073D模型展示专题/img/arrow-right-icon.png
--- a/2018专题/18073D模型展示专题/img/back-camera-pic1.jpg
+++ b/2018专题/18073D模型展示专题/img/back-camera-pic1.jpg
--- a/2018专题/18073D模型展示专题/img/back-camera-pic2.png
+++ b/2018专题/18073D模型展示专题/img/back-camera-pic2.png
--- a/2018专题/18073D模型展示专题/img/back-camera-pic3.png
+++ b/2018专题/18073D模型展示专题/img/back-camera-pic3.png
--- a/2018专题/18073D模型展示专题/img/back-camera-pic4-blue.jpg
+++ b/2018专题/18073D模型展示专题/img/back-camera-pic4-blue.jpg
--- a/2018专题/18073D模型展示专题/img/back-camera-pic4.jpg
+++ b/2018专题/18073D模型展示专题/img/back-camera-pic4.jpg
--- a/2018专题/18073D模型展示专题/img/back-camera-pic5-blue.jpg
+++ b/2018专题/18073D模型展示专题/img/back-camera-pic5-blue.jpg
--- a/2018专题/18073D模型展示专题/img/back-camera-pic5.jpg
+++ b/2018专题/18073D模型展示专题/img/back-camera-pic5.jpg
--- a/2018专题/18073D模型展示专题/img/back-camera-pic6-blue.jpg
+++ b/2018专题/18073D模型展示专题/img/back-camera-pic6-blue.jpg
--- a/2018专题/18073D模型展示专题/img/back-camera-pic6.jpg
+++ b/2018专题/18073D模型展示专题/img/back-camera-pic6.jpg
--- a/2018专题/18073D模型展示专题/img/back-camera-pic7.jpg
+++ b/2018专题/18073D模型展示专题/img/back-camera-pic7.jpg
--- a/2018专题/18073D模型展示专题/img/back-plane-pic1.png
+++ b/2018专题/18073D模型展示专题/img/back-plane-pic1.png
--- a/2018专题/18073D模型展示专题/img/back-plane-pic2.jpg
+++ b/2018专题/18073D模型展示专题/img/back-plane-pic2.jpg
--- a/2018专题/18073D模型展示专题/img/back-plane-pic2.png
+++ b/2018专题/18073D模型展示专题/img/back-plane-pic2.png
--- a/2018专题/18073D模型展示专题/img/back-plane-pic3-blue.jpg
+++ b/2018专题/18073D模型展示专题/img/back-plane-pic3-blue.jpg
--- a/2018专题/18073D模型展示专题/img/back-plane-pic3.jpg
+++ b/2018专题/18073D模型展示专题/img/back-plane-pic3.jpg
--- a/2018专题/18073D模型展示专题/img/blue-close-icon.png
+++ b/2018专题/18073D模型展示专题/img/blue-close-icon.png
--- a/2018专题/18073D模型展示专题/img/buy-btn-active.jpg
+++ b/2018专题/18073D模型展示专题/img/buy-btn-active.jpg
--- a/2018专题/18073D模型展示专题/img/buy-btn.jpg
+++ b/2018专题/18073D模型展示专题/img/buy-btn.jpg
--- a/2018专题/18073D模型展示专题/img/close-btn-active.png
+++ b/2018专题/18073D模型展示专题/img/close-btn-active.png
--- a/2018专题/18073D模型展示专题/img/close-btn.png
+++ b/2018专题/18073D模型展示专题/img/close-btn.png
--- a/2018专题/18073D模型展示专题/img/close-icon.png
+++ b/2018专题/18073D模型展示专题/img/close-icon.png
--- a/2018专题/18073D模型展示专题/img/faceId-pic1.jpg
+++ b/2018专题/18073D模型展示专题/img/faceId-pic1.jpg
--- a/2018专题/18073D模型展示专题/img/faceId-pic2.jpg
+++ b/2018专题/18073D模型展示专题/img/faceId-pic2.jpg
--- a/2018专题/18073D模型展示专题/img/faceId-pic3.jpg
+++ b/2018专题/18073D模型展示专题/img/faceId-pic3.jpg
--- a/2018专题/18073D模型展示专题/img/faceId-pic3.png
+++ b/2018专题/18073D模型展示专题/img/faceId-pic3.png
--- a/2018专题/18073D模型展示专题/img/faceId-pic4-blue.jpg
+++ b/2018专题/18073D模型展示专题/img/faceId-pic4-blue.jpg
--- a/2018专题/18073D模型展示专题/img/faceId-pic4.jpg
+++ b/2018专题/18073D模型展示专题/img/faceId-pic4.jpg
--- a/2018专题/18073D模型展示专题/img/faceId-pic5-blue.jpg
+++ b/2018专题/18073D模型展示专题/img/faceId-pic5-blue.jpg
--- a/2018专题/18073D模型展示专题/img/faceId-pic5.jpg
+++ b/2018专题/18073D模型展示专题/img/faceId-pic5.jpg
--- a/2018专题/18073D模型展示专题/img/faceId-pic5.png
+++ b/2018专题/18073D模型展示专题/img/faceId-pic5.png
--- a/2018专题/18073D模型展示专题/img/faceId-pic6.gif
+++ b/2018专题/18073D模型展示专题/img/faceId-pic6.gif
--- a/2018专题/18073D模型展示专题/img/front-camera-pic1.png
+++ b/2018专题/18073D模型展示专题/img/front-camera-pic1.png
--- a/2018专题/18073D模型展示专题/img/front-camera-pic2.gif
+++ b/2018专题/18073D模型展示专题/img/front-camera-pic2.gif
--- a/2018专题/18073D模型展示专题/img/front-camera-pic3.gif
+++ b/2018专题/18073D模型展示专题/img/front-camera-pic3.gif
--- a/2018专题/18073D模型展示专题/img/front-camera-pic4.jpg
+++ b/2018专题/18073D模型展示专题/img/front-camera-pic4.jpg
--- a/2018专题/18073D模型展示专题/img/front-camera-pic4.png
+++ b/2018专题/18073D模型展示专题/img/front-camera-pic4.png
--- a/2018专题/18073D模型展示专题/img/front-camera-pic5.jpg
+++ b/2018专题/18073D模型展示专题/img/front-camera-pic5.jpg
--- a/2018专题/18073D模型展示专题/img/iphonex-down.jpg
+++ b/2018专题/18073D模型展示专题/img/iphonex-down.jpg
--- a/2018专题/18073D模型展示专题/img/iphonex-down.png
+++ b/2018专题/18073D模型展示专题/img/iphonex-down.png
--- a/2018专题/18073D模型展示专题/img/iphonex.jpg
+++ b/2018专题/18073D模型展示专题/img/iphonex.jpg
--- a/2018专题/18073D模型展示专题/img/ipx-border.png
+++ b/2018专题/18073D模型展示专题/img/ipx-border.png
--- a/2018专题/18073D模型展示专题/img/know-more-btn-active.png
+++ b/2018专题/18073D模型展示专题/img/know-more-btn-active.png
--- a/2018专题/18073D模型展示专题/img/know-more-btn.png
+++ b/2018专题/18073D模型展示专题/img/know-more-btn.png
--- a/2018专题/18073D模型展示专题/img/reset-icon.png
+++ b/2018专题/18073D模型展示专题/img/reset-icon.png
--- a/2018专题/18073D模型展示专题/img/screen-pic1.png
+++ b/2018专题/18073D模型展示专题/img/screen-pic1.png
--- a/2018专题/18073D模型展示专题/img/screen-pic2.jpg
+++ b/2018专题/18073D模型展示专题/img/screen-pic2.jpg
--- a/2018专题/18073D模型展示专题/img/screen-pic3.png
+++ b/2018专题/18073D模型展示专题/img/screen-pic3.png
--- a/2018专题/18073D模型展示专题/img/screen-pic4.jpg
+++ b/2018专题/18073D模型展示专题/img/screen-pic4.jpg
--- a/2018专题/18073D模型展示专题/img/screen-pic5.jpg
+++ b/2018专题/18073D模型展示专题/img/screen-pic5.jpg
--- a/2018专题/18073D模型展示专题/img/screen-pic5.png
+++ b/2018专题/18073D模型展示专题/img/screen-pic5.png
--- a/2018专题/18073D模型展示专题/img/swiper-bg.jpg
+++ b/2018专题/18073D模型展示专题/img/swiper-bg.jpg
--- a/2018专题/18073D模型展示专题/img/tips-pic-black.png
+++ b/2018专题/18073D模型展示专题/img/tips-pic-black.png
--- a/2018专题/18073D模型展示专题/img/tips-pic-white.png
+++ b/2018专题/18073D模型展示专题/img/tips-pic-white.png
--- a/2018专题/18073D模型展示专题/img/video-play-icon.png
+++ b/2018专题/18073D模型展示专题/img/video-play-icon.png
--- a/2018专题/18073D模型展示专题/img/vr-logo-white.png
+++ b/2018专题/18073D模型展示专题/img/vr-logo-white.png
--- a/2018专题/18073D模型展示专题/img/vr-logo.png
+++ b/2018专题/18073D模型展示专题/img/vr-logo.png
--- a/2018专题/18073D模型展示专题/img/watch-icon.png
+++ b/2018专题/18073D模型展示专题/img/watch-icon.png
--- a/2018专题/18073D模型展示专题/img/xinshijie-black.jpg
+++ b/2018专题/18073D模型展示专题/img/xinshijie-black.jpg
--- a/2018专题/18073D模型展示专题/img/xinshijie-white.png
+++ b/2018专题/18073D模型展示专题/img/xinshijie-white.png
--- a/2018专题/18073D模型展示专题/img/xinshijie.png
+++ b/2018专题/18073D模型展示专题/img/xinshijie.png
--- a/2018专题/18073D模型展示专题/index.html
+++ b/2018专题/18073D模型展示专题/index.html
@@ -12,12 +12,332 @@
 
				     <meta name="description" content="新视界专题_多玩游戏网">
			
 
				     <title>demo</title>
			
 
				     <meta name="description" itemprop="description" content="">
			
 
				+    <link rel="stylesheet" href="./scss/animate.min.css">
			
 
				     <script src="./js/lib/rem.js"></script>
			
 
				 </head>
			
 
				 
			
 
				 <body>
			
 
				-    <div class="modal" id="modal1"></div>
			
 
				-    <div class="modal" id="modal2"></div>
			
 
				+    <div class="logo-wrap">
			
 
				+        <img class="vr-logo" src="./img/vr-logo-white.png">
			
 
				+        <img src="./img/xinshijie-white.png" class="xingshijie-logo">
			
 
				+    </div>
			
 
				+    <div class="entry-tips">
			
 
				+        <p>点击“橙色”互动点发现更多内容</p>
			
 
				+        <img src="./img/tips-pic-white.png" alt="">
			
 
				+    </div>
			
 
				+    <!-- 公共弹窗部分 -->
			
 
				+
			
 
				+    <div class="modal" id="modal1">
			
 
				+        <div class="title">OLED弧形全面屏</div>
			
 
				+        <div class="arrow"></div>
			
 
				+    </div>
			
 
				+    <div class="screen-left-modal modal-group1 animated modal-hide">
			
 
				+        <h3 class="title">专为 iPhone X </h3>
			
 
				+        <h3 class="title">量身设计的 OLED</h3>
			
 
				+        <p class="text">这是首款达到 iPhone 设计标准的 OLED 屏幕，显示的色彩准确而绚丽，能呈现出真实深邃的黑色，并拥有出色的亮度和 1,000,000:1 的对比度。</p>
			
 
				+        <img src="./img/screen-pic1.png" alt="">
			
 
				+        <h3 class="title">量身设计的 OLED</h3>
			
 
				+        <div class="text">整部 iPhone X，看起来就是一块几乎整面的屏幕。全新的 5.8 英寸超视网膜显示屏用起来倍感称手，看起来绚丽夺目1。</div>
			
 
				+    </div>
			
 
				+    <div class="modal-right modal-group1 animated">
			
 
				+        <div class="title big-title">创新科技</div>
			
 
				+        <p class="text">显示屏采用新的工艺和技术，精准贴合机身的曲线，一直延伸至优雅圆润的边角。</p>
			
 
				+        <div class="video-poster-img animated" id="modal1-poster1">
			
 
				+            <img src="./img/screen-pic2.jpg" alt="">
			
 
				+            <span class="watch-icon"></span>
			
 
				+        </div>
			
 
				+        <div class="title">简单自然的手势</div>
			
 
				+        <p class="text">熟悉的手势，使用起来自然流畅、简单直观。无论你在哪个界面，只需轻扫一下就能返回主屏幕，不必再使用按钮。</p>
			
 
				+    </div>
			
 
				+    <div class="bottom-more-btn modal-group1 animated modal-hide">
			
 
				+        <p class="title">OLED显示屏</p>
			
 
				+        <button type="button" id="screen-know-more"></button>
			
 
				+    </div>
			
 
				+    <!-- Swiper -->
			
 
				+    <div class="screen-swiper animated pub-swiper-box">
			
 
				+        <div class="swiper-container" id="screen-swiper">
			
 
				+            <div class="swiper-wrapper">
			
 
				+                <div class="swiper-slide p1">
			
 
				+                    <h3 class="p1-swiper-title">设计和显示屏</h3>
			
 
				+                    <p class="p1-swiper-text">怎样才能打造出一部超凡智能、外壳与显示屏浑然一体的设备？这是早在设计第一部 </p>
			
 
				+                    <p class="p1-swiper-text">iPhone 时，我们就为自己设定的目标。如今，在 iPhone X 上，我们终于把它变为</p>
			
 
				+                    <p class="p1-swiper-text">了现实。</p>
			
 
				+                    <video preload="metadata" id="screen-video2" class="center-video"></video>
			
 
				+                    <div class="reset-video-btn" id="reset-screen-video2">重播<i class="reset-icon"></i></div>
			
 
				+                </div>
			
 
				+                <div class="swiper-slide p2">
			
 
				+                    <h3 class="p1-swiper-title">一次对 iPhone 极尽纯粹的演绎。</h3>
			
 
				+                    <p class="p1-swiper-text">为了打造连续一体的表面，让你在使用时不被其他部件干扰，我们取消了主屏幕按钮，取而代之的是新颖却并不陌生的操控方式。</p>
			
 
				+                    <img src="./img/screen-pic3.png" alt="">
			
 
				+                </div>
			
 
				+                <div class="swiper-slide p3">
			
 
				+                    <img src="./img/screen-pic4.jpg" alt="">
			
 
				+                    <div class="bottom-info clearfix">
			
 
				+                        <div class="left-side">
			
 
				+                            <p>iPhone 上迄今</p>
			
 
				+                            <p>最精准的色彩显示。</p>
			
 
				+                        </div>
			
 
				+                        <div class="right-side">
			
 
				+                            超视网膜高清显示屏的色彩管理系统更进一步。无论显示的内容使用的是 P3 还是 sRGB 色彩模式，iPhone X 都能自动以对应的格式显示。因此，创作者们想要表达的色彩，都能准确地传递到你的眼中。
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                <div class="swiper-slide p4">
			
 
				+                    <h3 class="p1-swiper-title">HDR </h3>
			
 
				+                    <h3 class="p1-swiper-title">在 iPhone 上的首映，</h3>
			
 
				+                    <h3 class="p1-swiper-title">现已开场。</h3>
			
 
				+                    <p class="p1-swiper-text">
			
 
				+                        iPhone X 实现了真正的 HDR (高动态范围) 显示，让你可以欣赏到符合杜比视
			
 
				+                    </p>
			
 
				+                    <p class="p1-swiper-text">
			
 
				+                        界和 HDR10 标准的影片和节目，HDR 照片的显示效果也更加惊艳。另外，你
			
 
				+                    </p>
			
 
				+                    <p class="p1-swiper-text">
			
 
				+                        还能观看其他视频网站提供的精彩 HDR 内容。
			
 
				+                    </p>
			
 
				+                    <img src="./img/screen-pic5.png" alt="">
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            <div class="swiper-pagination"></div>
			
 
				+        </div>
			
 
				+        <button type="button" class="close-swiper-btn" id="close-screen-swiper"></button>
			
 
				+    </div>
			
 
				+
			
 
				+    <!-- 2 -->
			
 
				+    <div class="modal" id="modal2">
			
 
				+        <div class="title">面部识别Face ID</div>
			
 
				+        <div class="arrow"></div>
			
 
				+    </div>
			
 
				+    <div class="modal-left-img video-poster-img modal-left-top modal-group2 animated" id="modal2-poster1">
			
 
				+        <img src="./img/faceId-pic1.jpg" alt="">
			
 
				+        <span class="watch-icon"></span>
			
 
				+    </div>
			
 
				+    <div class="modal-left-img video-poster-img modal-left-bottom modal-group2 animated" id="modal2-poster2">
			
 
				+        <img src="./img/faceId-pic2.jpg" alt="">
			
 
				+        <span class="watch-icon"></span>
			
 
				+    </div>
			
 
				+    <div class="modal-right modal-group2 animated">
			
 
				+        <div class="title">安全可靠的验证方式</div>
			
 
				+        <p class="text">你的脸，现在就是你的密码。面容 ID 功能为设备解锁、身份验证和支付带来了一种安全、私密的新方式。</p>
			
 
				+        <img src="./img/faceId-pic3.jpg" alt="">
			
 
				+        <div class="title">面谱绘制</div>
			
 
				+        <p class="text">面容 ID 功能通过原深感摄像头来实现，设置起来也非常简单。它会投射超过 30,000 个肉眼不可见的光点，并对它们进行分析，为你的脸部绘制精确细致的深度图。面容 ID 功能通过原深感摄像头来实现，设置起来也非常简单。它会投射超过 30,000 个肉眼不可见的光点，并对它们进行分析，为你的脸部绘制精确细致的深度图。</p>
			
 
				+    </div>
			
 
				+    <div class="bottom-more-btn modal-group2 animated modal-hide">
			
 
				+        <p class="title">Face ID</p>
			
 
				+        <button type="button" id="face-know-more"></button>
			
 
				+    </div>
			
 
				+    <!-- swiper -->
			
 
				+    <div class="face-swiper animated pub-swiper-box">
			
 
				+        <div class="swiper-container swiper-face">
			
 
				+            <div class="swiper-wrapper">
			
 
				+                <div class="swiper-slide p1">
			
 
				+                    <div class="p1-swiper-title">面容 ID</div>
			
 
				+                    <div class="p1-swiper-text">有什么动作能比轻触一下还要自然？答案是：看一眼。这就是面容 ID 的灵感来源。面容 ID 是一套强大、安全的验</div>
			
 
				+                    <div class="p1-swiper-text">证系统，用起来甚至比触控 ID 还要方便。通过它解锁设备或进行支付，都十分快速、轻松而自然。</div>
			
 
				+                </div>
			
 
				+                <div class="swiper-slide p2">
			
 
				+                    <div class="p1-swiper-title">让人惊叹的科技，</div>
			
 
				+                    <div class="p1-swiper-title">造就让人赞叹的简单。</div>
			
 
				+                    <div class="p1-swiper-text">原深感摄像头系统集多项创新技术于一身。这些技术实时协作，可以通过你脸部</div>
			
 
				+                    <div class="p1-swiper-text">的精细深度图在瞬间认出你。</div>
			
 
				+                </div>
			
 
				+                <div class="swiper-slide p3">
			
 
				+                    <div class="p1-swiper-title">你的脸，</div>
			
 
				+                    <div class="p1-swiper-title">就是一张安全的</div>
			
 
				+                    <div class="p1-swiper-title mg-bottom">通行证。</div>
			
 
				+                    <div class="p1-swiper-text">有了面容 ID 的帮助，iPhone X 只有在你注视它时才会解锁。经过精心设计，它还能防</div>
			
 
				+                    <div class="p1-swiper-text">止被照片或面具欺骗。你的面容 ID 信息会被加密，并在安全隔区中受到保护。而且数</div>
			
 
				+                    <div class="p1-swiper-text">据不会传出你的设备，也绝不会备份到 iCloud 或其他任何地方，以此确保私密性。</div>
			
 
				+                    <img src="./img/faceId-pic6.gif" class="faceId-gif" alt="">
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            <div class="swiper-pagination"></div>
			
 
				+        </div>
			
 
				+        <button type="button" class="close-swiper-btn" id="close-face-swiper"></button>
			
 
				+    </div>
			
 
				+
			
 
				+    <!-- 3 -->
			
 
				+    <div class="modal" id="modal3">
			
 
				+        <div class="title">前置摄像头</div>
			
 
				+        <div class="arrow"></div>
			
 
				+    </div>
			
 
				+    <div class="modal-left-img video-poster-img modal-left-top modal-group3 animated" id="modal3-poster">
			
 
				+        <img src="./img/front-camera-pic2.gif" alt="">
			
 
				+        <span class="watch-icon"></span>
			
 
				+    </div>
			
 
				+    <div class="modal-left-img modal-left-bottom modal-group3 animated">
			
 
				+        <div class="left-title">动话表情</div>
			
 
				+        <p class="left-text">原深感摄像头能对 50 多种不同的面部肌肉运动进行分析，从</p>
			
 
				+        <p class="left-text">而以 16 款“动话表情”镜像出你的神态。快来化身为熊猫、</p>
			
 
				+        <p class="left-text">兔子或机器人，展现一个真实的你吧。</p>
			
 
				+        <img class="bottom-gif" src="./img/front-camera-pic3.gif" alt="">
			
 
				+    </div>
			
 
				+    <div class="modal-right modal-group3 animated">
			
 
				+        <div class="title big-title">前置，前瞻。</div>
			
 
				+        <img class="text-img" src="./img/front-camera-pic1.png" alt="">
			
 
				+        <div class="title">人像模式自拍</div>
			
 
				+        <p class="text">拍摄前景清晰、背景虚化、艺术感十足的自拍靓照。</p>
			
 
				+        <div class="title">人像光效</div>
			
 
				+        <p class="text">人像光效是人像模式中的一项新功能，可以营造出让人赞叹的影棚级光效。</p>
			
 
				+    </div>
			
 
				+    <div class="bottom-more-btn modal-group3 animated modal-hide">
			
 
				+        <p class="title">原深感摄像头</p>
			
 
				+        <button type="button" id="camera-know-more"></button>
			
 
				+    </div>
			
 
				+    <!-- Swiper -->
			
 
				+    <div class="camera-swiper animated pub-swiper-box">
			
 
				+        <div class="swiper-container swiper-front-camera">
			
 
				+            <div class="swiper-wrapper">
			
 
				+                <div class="swiper-slide p1">
			
 
				+                    <h3 class="p1-swiper-title">原深感摄像头</h3>
			
 
				+                    <p class="p1-swiper-text">一个方寸之地，到底能容纳多少创新想法？很多，而且非常之多。原深感摄像头系统</p>
			
 
				+                    <p class="p1-swiper-text">就包含了一系列精密的镜头和感应器，可以实现许多 iPhone X 独有的新功能。</p>
			
 
				+                </div>
			
 
				+                <div class="swiper-slide p2">
			
 
				+                    <div class="video-border-box">
			
 
				+                        <video id="front-camera-video2" loop preload="metadata"></video>
			
 
				+                        <div class="video-border"></div>
			
 
				+                    </div>
			
 
				+                    <div class="p2-right-side">
			
 
				+                        <h3 class="title">人 像 光 效，</h3>
			
 
				+                        <h3 class="title">自 拍 也 有 影 棚 效 果。</h3>
			
 
				+                        <p class="text">
			
 
				+                            在人物肖像艺术与科学领域大量研究的启发下，全新的人像光效功能可通过复杂的算法，计算出你的容貌特征会怎样受到光线影响，然后利用这些数据创造出惊艳的光效。
			
 
				+                        </p>
			
 
				+                        <div class="swiper-poster" id="modal3-poster1">
			
 
				+                            <img src="./img/front-camera-pic5.jpg" alt="">
			
 
				+                            <span class="watch-icon"></span>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                <div class="swiper-slide p3">
			
 
				+                    <div class="p3-info">
			
 
				+                        <h3>动话表情，新玩法，</h3>
			
 
				+                        <h3>由你本色出演。</h3>
			
 
				+                        <p>大方承认吧，你其实一直想做一只萌萌的熊猫。在 A11 仿生的配合下，原深感摄像头能捕捉并分析 50 多种不同的肌肉运动，然后以 16 款不同的“动话表情”活灵活现镜像出你的神态。</p>
			
 
				+                    </div>
			
 
				+                    <div class="p3-video">
			
 
				+                        <video preload="metadata" id="front-camera-video4"></video>
			
 
				+                        <div class="reset-video-btn" id="reset-front-video4">重播<i class="reset-icon"></i></div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            <div class="swiper-pagination"></div>
			
 
				+        </div>
			
 
				+        <button type="button" class="close-swiper-btn" id="close-camera-siwper"></button>
			
 
				+    </div>
			
 
				+
			
 
				+    <!-- 4 -->
			
 
				+    <div class="modal" id="modal4">
			
 
				+        <div class="title">后置竖式双摄像头</div>
			
 
				+        <div class="arrow"></div>
			
 
				+    </div>
			
 
				+    <div class="modal-left-img video-poster-img modal-left-top modal-group4 animated" id="modal4-poster">
			
 
				+        <img src="./img/back-camera-pic1.jpg" alt="">
			
 
				+        <span class="watch-icon"></span>
			
 
				+    </div>
			
 
				+    <img class="modal-group4 modal-left-img animated camera-tips-pic" src="./img/back-camera-pic4-blue.jpg" alt="">
			
 
				+    <img class="modal-img-bottom modal-left-img modal-group4 animated" src="./img/back-camera-pic3.png" alt="">
			
 
				+    <div class="modal-right modal-group4 animated">
			
 
				+        <div class="title">进一步提升的摄像头</div>
			
 
				+        <p class="text">拥有比以往尺寸更大、速度更快的 1200 万像素感光元件、新的色彩滤镜、更深层的像素，以及新的支持光学图像防抖的长焦镜头。</p>
			
 
				+        <img class="text-img" src="./img/back-camera-pic2.png" alt="">
			
 
				+        <div class="title">双镜头光学图像防抖</div>
			
 
				+        <p class="text">两个后置镜头都具有光学图像防抖功能，而且反应飞快，即使在弱光下，也能拍出效果出众的照片和视频。</p>
			
 
				+        <div class="title">光学变焦</div>
			
 
				+        <p class="text">iPhone X 能通过广角和长焦镜头实现光学变焦。另外，通过数码变焦，还能拍摄最高达 10 倍变焦的照片和最高达 6 倍变焦的视频。</p>
			
 
				+    </div>
			
 
				+    <div class="bottom-more-btn modal-group4 animated modal-hide">
			
 
				+        <p class="title">竖式双摄像头</p>
			
 
				+        <button type="button" id="backcamera-know-more"></button>
			
 
				+    </div>
			
 
				+    <!-- swiper -->
			
 
				+    <div class="back-camera-swiper animated pub-swiper-box">
			
 
				+        <div class="swiper-container swiper-back-camera">
			
 
				+            <div class="swiper-wrapper">
			
 
				+                <div class="swiper-slide p1">
			
 
				+                    <div class="p1-swiper-title">1200 万像素双镜头</div>
			
 
				+                    <div class="p1-swiper-text">摄像头能否捕捉超出我们目力所及的影像？为了寻找答案，我们将速度更快的光学图像</div>
			
 
				+                    <div class="p1-swiper-text">防抖镜头与 A11 仿生先进的机器学习技术相结合，最终打造出一套比以往拍摄能力更</div>
			
 
				+                    <div class="p1-swiper-text">强、智能程度更高、功能更丰富的摄影系统。</div>
			
 
				+                </div>
			
 
				+                <div class="swiper-slide p2">
			
 
				+                    <div class="center-box">
			
 
				+                        <div class="left-side">
			
 
				+                            <div class="title">广角镜头</div>
			
 
				+                            <div class="text">配上 ƒ/1.8 光圈的六镜式镜头、光学图像防抖 (OIS) 功能和尺寸更大、速度更快的 1200 万像素感光元件，这部早已深受人们喜爱的相机现在更出色。</div>
			
 
				+                        </div>
			
 
				+                        <div class="right-side">
			
 
				+                            <div class="title">长焦镜头</div>
			
 
				+                            <div class="text">利用先进的 7 点磁力防抖方案，我们为强大的 ƒ/2.4 长焦镜头也配备了光学图像防抖系统。广角和长焦镜头互相协作，能通过光学变焦将被摄主体拉近，还能在人像模式下拍出令人赞叹的照片。</div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                <div class="swiper-slide p3">
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            <div class="swiper-pagination"></div>
			
 
				+        </div>
			
 
				+        <button type="button" class="close-swiper-btn" id="close-backcamera-swiper"></button>
			
 
				+    </div>
			
 
				+
			
 
				+    <!-- 5 -->
			
 
				+    <div class="modal" id="modal5">
			
 
				+        <div class="title">玻璃后盖外壳设计</div>
			
 
				+        <div class="arrow"></div>
			
 
				+    </div>
			
 
				+    <div class="back-plane-img modal-group5 modal-hide animated">
			
 
				+        <img src="./img/back-plane-pic1.png" alt="">
			
 
				+    </div>
			
 
				+    <div class="modal-right modal-group5 animated">
			
 
				+        <div class="title">iPhone 上迄今</div>
			
 
				+        <div class="title">最坚固耐用的玻璃面板。</div>
			
 
				+        <p class="text">机身前后面板都是全玻璃设计，采用了 iPhone 上迄今最坚固耐用的玻璃材料，其强化层比以往增厚了 50% 之多。我们运用七层染色工艺，精准控制色调和不透明度，并加入反射光学层来增强色彩。另外，玻璃面板还覆有防油渍涂层，让你能轻易抹去污迹和指纹。</p>
			
 
				+        <div class="title">无线世界，无线充电。</div>
			
 
				+        <p class="text">我们一直希望 iPhone 能摆脱充电线或耳机线的束缚，成为一部真正的无线设备。iPhone X 的玻璃背板和内置的无线充电系统，正是为将来的无线世界而设计。</p>
			
 
				+    </div>
			
 
				+    <div class="bottom-more-btn modal-group5 animated modal-hide">
			
 
				+        <p class="title">玻璃外壳设计</p>
			
 
				+        <button type="button" id="plane-know-more"></button>
			
 
				+    </div>
			
 
				+    <!-- swiper -->
			
 
				+    <div class="plane-swiper animated pub-swiper-box">
			
 
				+        <div class="swiper-container swiper-plane">
			
 
				+            <div class="swiper-wrapper">
			
 
				+                <div class="swiper-slide p1">
			
 
				+                    <div class="p1-swiper-title">独家打造的手术级不锈钢。</div>
			
 
				+                    <div class="p1-swiper-text">Phone X 机身侧边环绕着起加固作用的不锈钢边框，它采用 Apple 特别设计的合金材料，不仅坚固</div>
			
 
				+                    <div class="p1-swiper-text">耐用、质地纯净，而且经过精心打磨，异常精美。在深空灰色外观的机型上，我们还运用了一项被称</div>
			
 
				+                    <div class="p1-swiper-text">为“物理气相沉积”的工艺，确保不锈钢边框颜色与玻璃颜色精准一致。</div>
			
 
				+                    <img class="center-img" src="./img/back-plane-pic2.png" alt="">
			
 
				+                </div>
			
 
				+                <div class="swiper-slide p2">
			
 
				+                    <img class="center-img" src="./img/back-plane-pic3-blue.jpg" alt="">
			
 
				+                    <div class="p1-swiper-title">防溅抗水，还防尘。</div>
			
 
				+                    <div class="p1-swiper-text">我们深入微观层面对 iPhone X 进行了精密设计，以实现防溅、抗水和防尘性能。</div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            <div class="swiper-pagination"></div>
			
 
				+        </div>
			
 
				+        <button type="button" class="close-swiper-btn" id="close-plane-swiper"></button>
			
 
				+    </div>
			
 
				+
			
 
				+    <a href="javascript:" id="suggest-watch" class="nav-btn nav-btn-white">评测视频</a>
			
 
				+    <a href="iphoneX.html?back" class="nav-btn nav-btn-pic">切换背景</a>
			
 
				+    <a href="javascript:" class="buy-btn"></a>
			
 
				+
			
 
				+    <!-- 视频 -->
			
 
				+    <div class="full-video-wrap">
			
 
				+        <video id="face-video1" controls preload="metadata"></video>
			
 
				+        <video id="face-video2" controls preload="metadata"></video>
			
 
				+        <video id="back-camera-video" controls preload="metadata"></video>
			
 
				+        <video id="front-camera-video" controls preload="metadata"></video>
			
 
				+        <video id="front-camera-video3" controls preload="metadata"></video>
			
 
				+        <video id="screen-video1" controls preload="metadata"></video>
			
 
				+        <video id="suggest-video" controls preload="metadata"></video>
			
 
				+        <span class="close-icon close-full-video"></span>
			
 
				+    </div>
			
 
				     <script src="//www.duowan.com/assets/js/jquery.js"></script>
			
 
				     <script src="./js/main.js"></script>
			
 
				 </body>
			
--- a/2018专题/18073D模型展示专题/iphoneX.html
+++ b/2018专题/18073D模型展示专题/iphoneX.html
@@ -0,0 +1,362 @@
 
				+<!doctype html>
			
 
				+<html>
			
 
				+
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
			
 
				+    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
			
 
				+    <meta name="format-detection" content="telephone=no">
			
 
				+    <meta name="renderer" content="webkit">
			
 
				+    <meta name="force-rendering" content="webkit">
			
 
				+    <meta name="Keywords" content="">
			
 
				+    <meta name="description" content="新视界专题_多玩游戏网">
			
 
				+    <title>demo</title>
			
 
				+    <meta name="description" itemprop="description" content="">
			
 
				+    <link rel="stylesheet" href="./scss/animate.min.css">
			
 
				+    <script src="./js/lib/rem.js"></script>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+    <div class="logo-wrap">
			
 
				+        <img class="vr-logo" src="./img/vr-logo.png">
			
 
				+        <img src="./img/xinshijie.png" class="xingshijie-logo">
			
 
				+    </div>
			
 
				+    <div class="entry-tips">
			
 
				+        <p>点击“橙色”互动点发现更多内容</p>
			
 
				+        <img src="./img/tips-pic-black.png" alt="">
			
 
				+    </div>
			
 
				+    <div class="iphonex-wrapper" id="iphonex-wrapper">
			
 
				+        <div class="center-box">
			
 
				+            <div class="img-box animated bounceInDown delay-300">
			
 
				+                <img class="iphone-pic" src="./img/iphonex.jpg" alt="">
			
 
				+                <img class="down-iphone-pic" src="./img/iphonex-down.png" alt="">
			
 
				+            </div>
			
 
				+            <h3 class="animated bounceInDown delay-300">iPhone X</h3>
			
 
				+            <p class="animated fadeIn delay-600">一直以来，我们都心存一个设想，期待着能够打造出这样一部 iPhone：</p>
			
 
				+            <p class="animated fadeIn delay-900">它有整面的屏幕，能让你在使用时完全沉浸其中，仿佛忘记了它的存在。它是如此智能，你的一</p>
			
 
				+            <p class="animated fadeIn delay-1200">触、一碰、一言、一语，哪怕是轻轻一瞥，都会得到它心有灵犀的回应。而这个设想，终于随着 </p>
			
 
				+            <p class="animated fadeIn delay-1500">iPhone X 的到来成为了现实。现在，就跟未来见个面吧。</p>
			
 
				+            <img class="arrow fade-In" src="./img/arrow-down.png" alt="">
			
 
				+        </div>
			
 
				+    </div>
			
 
				+    <div class="full-video" style="display: none">
			
 
				+        <video id="entry-video" preload="metadata"></video>
			
 
				+        <div class="video-next-btn">跳过</div>
			
 
				+    </div>
			
 
				+
			
 
				+    <!-- 公共弹窗部分 -->
			
 
				+
			
 
				+    <div class="modal" id="modal1">
			
 
				+        <div class="title">OLED弧形全面屏</div>
			
 
				+        <div class="arrow"></div>
			
 
				+    </div>
			
 
				+    <div class="screen-left-modal modal-group1 animated modal-hide">
			
 
				+        <h3 class="title">专为 iPhone X </h3>
			
 
				+        <h3 class="title">量身设计的 OLED</h3>
			
 
				+        <p class="text">这是首款达到 iPhone 设计标准的 OLED 屏幕，显示的色彩准确而绚丽，能呈现出真实深邃的黑色，并拥有出色的亮度和 1,000,000:1 的对比度。</p>
			
 
				+        <img src="./img/screen-pic1.png" alt="">
			
 
				+        <h3 class="title">量身设计的 OLED</h3>
			
 
				+        <div class="text">整部 iPhone X，看起来就是一块几乎整面的屏幕。全新的 5.8 英寸超视网膜显示屏用起来倍感称手，看起来绚丽夺目1。</div>
			
 
				+    </div>
			
 
				+    <div class="modal-right modal-group1 animated">
			
 
				+        <div class="title big-title">创新科技</div>
			
 
				+        <p class="text">显示屏采用新的工艺和技术，精准贴合机身的曲线，一直延伸至优雅圆润的边角。</p>
			
 
				+        <div class="video-poster-img animated" id="modal1-poster1">
			
 
				+            <img src="./img/screen-pic2.jpg" alt="">
			
 
				+            <span>观看<i class="watch-icon"></i></span>
			
 
				+        </div>
			
 
				+        <div class="title">简单自然的手势</div>
			
 
				+        <p class="text">熟悉的手势，使用起来自然流畅、简单直观。无论你在哪个界面，只需轻扫一下就能返回主屏幕，不必再使用按钮。</p>
			
 
				+    </div>
			
 
				+    <div class="bottom-more-btn modal-group1 animated modal-hide">
			
 
				+        <p class="title">OLED显示屏</p>
			
 
				+        <button type="button" id="screen-know-more"><span class="circle-icon">+</span> 进一步了解</button>
			
 
				+    </div>
			
 
				+    <!-- Swiper -->
			
 
				+    <div class="screen-swiper animated pub-swiper-box">
			
 
				+        <div class="swiper-container" id="screen-swiper">
			
 
				+            <div class="swiper-wrapper">
			
 
				+                <div class="swiper-slide p1">
			
 
				+                    <h3 class="p1-swiper-title">设计和显示屏</h3>
			
 
				+                    <p class="p1-swiper-text">怎样才能打造出一部超凡智能、外壳与显示屏浑然一体的设备？这是早在设计第一部 </p>
			
 
				+                    <p class="p1-swiper-text">iPhone 时，我们就为自己设定的目标。如今，在 iPhone X 上，我们终于把它变为</p>
			
 
				+                    <p class="p1-swiper-text">了现实。</p>
			
 
				+                    <video preload="metadata" id="screen-video2" class="center-video"></video>
			
 
				+                    <div class="reset-video-btn" id="reset-screen-video2">重播<i class="reset-icon"></i></div>
			
 
				+                </div>
			
 
				+                <div class="swiper-slide p2">
			
 
				+                    <h3 class="p1-swiper-title">一次对 iPhone 极尽纯粹的演绎。</h3>
			
 
				+                    <p class="p1-swiper-text">为了打造连续一体的表面，让你在使用时不被其他部件干扰，我们取消了主屏幕按钮，取而代之的是新颖却并不陌生的操控方式。</p>
			
 
				+                    <img src="./img/screen-pic3.png" alt="">
			
 
				+                </div>
			
 
				+                <div class="swiper-slide p3">
			
 
				+                    <img src="./img/screen-pic4.jpg" alt="">
			
 
				+                    <div class="bottom-info clearfix">
			
 
				+                        <div class="left-side">
			
 
				+                            <p>iPhone 上迄今</p>
			
 
				+                            <p>最精准的色彩显示。</p>
			
 
				+                        </div>
			
 
				+                        <div class="right-side">
			
 
				+                            超视网膜高清显示屏的色彩管理系统更进一步。无论显示的内容使用的是 P3 还是 sRGB 色彩模式，iPhone X 都能自动以对应的格式显示。因此，创作者们想要表达的色彩，都能准确地传递到你的眼中。
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                <div class="swiper-slide p4">
			
 
				+                    <h3 class="p1-swiper-title">HDR </h3>
			
 
				+                    <h3 class="p1-swiper-title">在 iPhone 上的首映，</h3>
			
 
				+                    <h3 class="p1-swiper-title">现已开场。</h3>
			
 
				+                    <p class="p1-swiper-text">
			
 
				+                        iPhone X 实现了真正的 HDR (高动态范围) 显示，让你可以欣赏到符合杜比视
			
 
				+                    </p>
			
 
				+                    <p class="p1-swiper-text">
			
 
				+                        界和 HDR10 标准的影片和节目，HDR 照片的显示效果也更加惊艳。另外，你
			
 
				+                    </p>
			
 
				+                    <p class="p1-swiper-text">
			
 
				+                        还能观看其他视频网站提供的精彩 HDR 内容。
			
 
				+                    </p>
			
 
				+                    <img src="./img/screen-pic5.png" alt="">
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            <div class="swiper-pagination"></div>
			
 
				+        </div>
			
 
				+        <button type="button" class="close-swiper-btn" id="close-screen-swiper"><span class="circle-icon">x</span>关闭</button>
			
 
				+    </div>
			
 
				+
			
 
				+    <!-- 2 -->
			
 
				+    <div class="modal" id="modal2">
			
 
				+        <div class="title">面部识别Face ID</div>
			
 
				+        <div class="arrow"></div>
			
 
				+    </div>
			
 
				+    <div class="modal-left-img video-poster-img modal-left-top modal-group2 animated" id="modal2-poster1">
			
 
				+        <img src="./img/faceId-pic1.jpg" alt="">
			
 
				+        <span>观看<i class="watch-icon"></i></span>
			
 
				+    </div>
			
 
				+    <div class="modal-left-img video-poster-img modal-left-bottom modal-group2 animated" id="modal2-poster2">
			
 
				+        <img src="./img/faceId-pic2.jpg" alt="">
			
 
				+        <span>观看<i class="watch-icon"></i></span>
			
 
				+    </div>
			
 
				+    <div class="modal-right modal-group2 animated">
			
 
				+        <div class="title">安全可靠的验证方式</div>
			
 
				+        <p class="text">你的脸，现在就是你的密码。面容 ID 功能为设备解锁、身份验证和支付带来了一种安全、私密的新方式。</p>
			
 
				+        <img src="./img/faceId-pic3.png" alt="">
			
 
				+        <div class="title">面谱绘制</div>
			
 
				+        <p class="text">面容 ID 功能通过原深感摄像头来实现，设置起来也非常简单。它会投射超过 30,000 个肉眼不可见的光点，并对它们进行分析，为你的脸部绘制精确细致的深度图。面容 ID 功能通过原深感摄像头来实现，设置起来也非常简单。它会投射超过 30,000 个肉眼不可见的光点，并对它们进行分析，为你的脸部绘制精确细致的深度图。</p>
			
 
				+    </div>
			
 
				+    <div class="bottom-more-btn modal-group2 animated modal-hide">
			
 
				+        <p class="title">Face ID</p>
			
 
				+        <button type="button" id="face-know-more"><span class="circle-icon">+</span> 进一步了解</button>
			
 
				+    </div>
			
 
				+    <!-- swiper -->
			
 
				+    <div class="face-swiper animated pub-swiper-box">
			
 
				+        <div class="swiper-container swiper-face">
			
 
				+            <div class="swiper-wrapper">
			
 
				+                <div class="swiper-slide p1">
			
 
				+                    <div class="p1-swiper-title">面容 ID</div>
			
 
				+                    <div class="p1-swiper-text">有什么动作能比轻触一下还要自然？答案是：看一眼。这就是面容 ID 的灵感来源。面容 ID 是一套强大、安全的验</div>
			
 
				+                    <div class="p1-swiper-text">证系统，用起来甚至比触控 ID 还要方便。通过它解锁设备或进行支付，都十分快速、轻松而自然。</div>
			
 
				+                </div>
			
 
				+                <div class="swiper-slide p2">
			
 
				+                    <div class="p1-swiper-title">让人惊叹的科技，</div>
			
 
				+                    <div class="p1-swiper-title">造就让人赞叹的简单。</div>
			
 
				+                    <div class="p1-swiper-text">原深感摄像头系统集多项创新技术于一身。这些技术实时协作，可以通过你脸部</div>
			
 
				+                    <div class="p1-swiper-text">的精细深度图在瞬间认出你。</div>
			
 
				+                </div>
			
 
				+                <div class="swiper-slide p3">
			
 
				+                    <div class="p1-swiper-title">你的脸，</div>
			
 
				+                    <div class="p1-swiper-title">就是一张安全的</div>
			
 
				+                    <div class="p1-swiper-title mg-bottom">通行证。</div>
			
 
				+                    <div class="p1-swiper-text">有了面容 ID 的帮助，iPhone X 只有在你注视它时才会解锁。经过精心设计，它还能防</div>
			
 
				+                    <div class="p1-swiper-text">止被照片或面具欺骗。你的面容 ID 信息会被加密，并在安全隔区中受到保护。而且数</div>
			
 
				+                    <div class="p1-swiper-text">据不会传出你的设备，也绝不会备份到 iCloud 或其他任何地方，以此确保私密性。</div>
			
 
				+                    <img src="./img/faceId-pic6.gif" class="faceId-gif" alt="">
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            <div class="swiper-pagination"></div>
			
 
				+        </div>
			
 
				+        <button type="button" class="close-swiper-btn" id="close-face-swiper"><span class="circle-icon">x</span>关闭</button>
			
 
				+    </div>
			
 
				+
			
 
				+    <!-- 3 -->
			
 
				+    <div class="modal" id="modal3">
			
 
				+        <div class="title">前置摄像头</div>
			
 
				+        <div class="arrow"></div>
			
 
				+    </div>
			
 
				+    <div class="modal-left-img video-poster-img modal-left-top modal-group3 animated" id="modal3-poster">
			
 
				+        <img src="./img/front-camera-pic2.gif" alt="">
			
 
				+        <span>观看<i class="watch-icon"></i></span>
			
 
				+    </div>
			
 
				+    <div class="modal-left-img modal-left-bottom modal-group3 animated">
			
 
				+        <div class="left-title">动话表情</div>
			
 
				+        <p class="left-text">原深感摄像头能对 50 多种不同的面部肌肉运动进行分析，从</p>
			
 
				+        <p class="left-text">而以 16 款“动话表情”镜像出你的神态。快来化身为熊猫、</p>
			
 
				+        <p class="left-text">兔子或机器人，展现一个真实的你吧。</p>
			
 
				+        <img class="bottom-gif" src="./img/front-camera-pic3.gif" alt="">
			
 
				+    </div>
			
 
				+    <div class="modal-right modal-group3 animated">
			
 
				+        <div class="title big-title">前置，前瞻。</div>
			
 
				+        <img class="text-img" src="./img/front-camera-pic1.png" alt="">
			
 
				+        <div class="title">人像模式自拍</div>
			
 
				+        <p class="text">拍摄前景清晰、背景虚化、艺术感十足的自拍靓照。</p>
			
 
				+        <div class="title">人像光效</div>
			
 
				+        <p class="text">人像光效是人像模式中的一项新功能，可以营造出让人赞叹的影棚级光效。</p>
			
 
				+    </div>
			
 
				+    <div class="bottom-more-btn modal-group3 animated modal-hide">
			
 
				+        <p class="title">原深感摄像头</p>
			
 
				+        <button type="button" id="camera-know-more"><span class="circle-icon">+</span> 进一步了解</button>
			
 
				+    </div>
			
 
				+    <!-- Swiper -->
			
 
				+    <div class="camera-swiper animated pub-swiper-box">
			
 
				+        <div class="swiper-container swiper-front-camera">
			
 
				+            <div class="swiper-wrapper">
			
 
				+                <div class="swiper-slide p1">
			
 
				+                    <h3 class="p1-swiper-title">原深感摄像头</h3>
			
 
				+                    <p class="p1-swiper-text">一个方寸之地，到底能容纳多少创新想法？很多，而且非常之多。原深感摄像头系统</p>
			
 
				+                    <p class="p1-swiper-text">就包含了一系列精密的镜头和感应器，可以实现许多 iPhone X 独有的新功能。</p>
			
 
				+                </div>
			
 
				+                <div class="swiper-slide p2">
			
 
				+                    <div class="video-border-box">
			
 
				+                        <video id="front-camera-video2" loop preload="metadata"></video>
			
 
				+                        <div class="video-border"></div>
			
 
				+                    </div>
			
 
				+                    <div class="p2-right-side">
			
 
				+                        <h3 class="title">人 像 光 效，</h3>
			
 
				+                        <h3 class="title">自 拍 也 有 影 棚 效 果。</h3>
			
 
				+                        <p class="text">
			
 
				+                            在人物肖像艺术与科学领域大量研究的启发下，全新的人像光效功能可通过复杂的算法，计算出你的容貌特征会怎样受到光线影响，然后利用这些数据创造出惊艳的光效。
			
 
				+                        </p>
			
 
				+                        <div class="swiper-poster" id="modal3-poster1">
			
 
				+                            <img src="./img/front-camera-pic5.jpg" alt="">
			
 
				+                            <span>观看<i class="watch-icon"></i></span>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                <div class="swiper-slide p3">
			
 
				+                    <div class="p3-info">
			
 
				+                        <h3>动话表情，新玩法，</h3>
			
 
				+                        <h3>由你本色出演。</h3>
			
 
				+                        <p>大方承认吧，你其实一直想做一只萌萌的熊猫。在 A11 仿生的配合下，原深感摄像头能捕捉并分析 50 多种不同的肌肉运动，然后以 16 款不同的“动话表情”活灵活现镜像出你的神态。</p>
			
 
				+                    </div>
			
 
				+                    <div class="p3-video">
			
 
				+                        <video preload="metadata" id="front-camera-video4"></video>
			
 
				+                        <div class="reset-video-btn" id="reset-front-video4">重播<i class="reset-icon"></i></div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            <div class="swiper-pagination"></div>
			
 
				+        </div>
			
 
				+        <button type="button" class="close-swiper-btn" id="close-camera-siwper"><span class="circle-icon">x</span>关闭</button>
			
 
				+    </div>
			
 
				+
			
 
				+    <!-- 4 -->
			
 
				+    <div class="modal" id="modal4">
			
 
				+        <div class="title">后置竖式双摄像头</div>
			
 
				+        <div class="arrow"></div>
			
 
				+    </div>
			
 
				+    <div class="modal-left-img video-poster-img modal-left-top modal-group4 animated" id="modal4-poster">
			
 
				+        <img src="./img/back-camera-pic1.jpg" alt="">
			
 
				+        <span>观看<i class="watch-icon"></i></span>
			
 
				+    </div>
			
 
				+    <img class="modal-group4 modal-left-img animated camera-tips-pic" src="./img/back-camera-pic4.jpg" alt="">
			
 
				+    <img class="modal-img-bottom modal-left-img modal-group4 animated" src="./img/back-camera-pic3.png" alt="">
			
 
				+    <div class="modal-right modal-group4 animated">
			
 
				+        <div class="title">进一步提升的摄像头</div>
			
 
				+        <p class="text">拥有比以往尺寸更大、速度更快的 1200 万像素感光元件、新的色彩滤镜、更深层的像素，以及新的支持光学图像防抖的长焦镜头。</p>
			
 
				+        <img class="text-img" src="./img/back-camera-pic2.png" alt="">
			
 
				+        <div class="title">双镜头光学图像防抖</div>
			
 
				+        <p class="text">两个后置镜头都具有光学图像防抖功能，而且反应飞快，即使在弱光下，也能拍出效果出众的照片和视频。</p>
			
 
				+        <div class="title">光学变焦</div>
			
 
				+        <p class="text">iPhone X 能通过广角和长焦镜头实现光学变焦。另外，通过数码变焦，还能拍摄最高达 10 倍变焦的照片和最高达 6 倍变焦的视频。</p>
			
 
				+    </div>
			
 
				+    <div class="bottom-more-btn modal-group4 animated modal-hide">
			
 
				+        <p class="title">竖式双摄像头</p>
			
 
				+        <button type="button" id="backcamera-know-more"><span class="circle-icon">+</span> 进一步了解</button>
			
 
				+    </div>
			
 
				+    <!-- swiper -->
			
 
				+    <div class="back-camera-swiper animated pub-swiper-box">
			
 
				+        <div class="swiper-container swiper-back-camera">
			
 
				+            <div class="swiper-wrapper">
			
 
				+                <div class="swiper-slide p1">
			
 
				+                    <div class="p1-swiper-title">1200 万像素双镜头</div>
			
 
				+                    <div class="p1-swiper-text">摄像头能否捕捉超出我们目力所及的影像？为了寻找答案，我们将速度更快的光学图像</div>
			
 
				+                    <div class="p1-swiper-text">防抖镜头与 A11 仿生先进的机器学习技术相结合，最终打造出一套比以往拍摄能力更</div>
			
 
				+                    <div class="p1-swiper-text">强、智能程度更高、功能更丰富的摄影系统。</div>
			
 
				+                </div>
			
 
				+                <div class="swiper-slide p2">
			
 
				+                    <div class="center-box">
			
 
				+                        <div class="left-side">
			
 
				+                            <div class="title">广角镜头</div>
			
 
				+                            <div class="text">配上 ƒ/1.8 光圈的六镜式镜头、光学图像防抖 (OIS) 功能和尺寸更大、速度更快的 1200 万像素感光元件，这部早已深受人们喜爱的相机现在更出色。</div>
			
 
				+                        </div>
			
 
				+                        <div class="right-side">
			
 
				+                            <div class="title">长焦镜头</div>
			
 
				+                            <div class="text">利用先进的 7 点磁力防抖方案，我们为强大的 ƒ/2.4 长焦镜头也配备了光学图像防抖系统。广角和长焦镜头互相协作，能通过光学变焦将被摄主体拉近，还能在人像模式下拍出令人赞叹的照片。</div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                <div class="swiper-slide p3">
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            <div class="swiper-pagination"></div>
			
 
				+        </div>
			
 
				+        <button type="button" class="close-swiper-btn" id="close-backcamera-swiper"><span class="circle-icon">x</span>关闭</button>
			
 
				+    </div>
			
 
				+
			
 
				+    <!-- 5 -->
			
 
				+    <div class="modal" id="modal5">
			
 
				+        <div class="title">玻璃后盖外壳设计</div>
			
 
				+        <div class="arrow"></div>
			
 
				+    </div>
			
 
				+    <div class="back-plane-img modal-group5 modal-hide animated">
			
 
				+        <img src="./img/back-plane-pic1.png" alt="">
			
 
				+    </div>
			
 
				+    <div class="modal-right modal-group5 animated">
			
 
				+        <div class="title">iPhone 上迄今</div>
			
 
				+        <div class="title">最坚固耐用的玻璃面板。</div>
			
 
				+        <p class="text">机身前后面板都是全玻璃设计，采用了 iPhone 上迄今最坚固耐用的玻璃材料，其强化层比以往增厚了 50% 之多。我们运用七层染色工艺，精准控制色调和不透明度，并加入反射光学层来增强色彩。另外，玻璃面板还覆有防油渍涂层，让你能轻易抹去污迹和指纹。</p>
			
 
				+        <div class="title">无线世界，无线充电。</div>
			
 
				+        <p class="text">我们一直希望 iPhone 能摆脱充电线或耳机线的束缚，成为一部真正的无线设备。iPhone X 的玻璃背板和内置的无线充电系统，正是为将来的无线世界而设计。</p>
			
 
				+    </div>
			
 
				+    <div class="bottom-more-btn modal-group5 animated modal-hide">
			
 
				+        <p class="title">玻璃外壳设计</p>
			
 
				+        <button type="button" id="plane-know-more"><span class="circle-icon">+</span> 进一步了解</button>
			
 
				+    </div>
			
 
				+    <!-- swiper -->
			
 
				+    <div class="plane-swiper animated pub-swiper-box">
			
 
				+        <div class="swiper-container swiper-plane">
			
 
				+            <div class="swiper-wrapper">
			
 
				+                <div class="swiper-slide p1">
			
 
				+                    <div class="p1-swiper-title">独家打造的手术级不锈钢。</div>
			
 
				+                    <div class="p1-swiper-text">Phone X 机身侧边环绕着起加固作用的不锈钢边框，它采用 Apple 特别设计的合金材料，不仅坚固</div>
			
 
				+                    <div class="p1-swiper-text">耐用、质地纯净，而且经过精心打磨，异常精美。在深空灰色外观的机型上，我们还运用了一项被称</div>
			
 
				+                    <div class="p1-swiper-text">为“物理气相沉积”的工艺，确保不锈钢边框颜色与玻璃颜色精准一致。</div>
			
 
				+                    <img class="center-img" src="./img/back-plane-pic2.jpg" alt="">
			
 
				+                </div>
			
 
				+                <div class="swiper-slide p2">
			
 
				+                    <img class="center-img" src="./img/back-plane-pic3.jpg" alt="">
			
 
				+                    <div class="p1-swiper-title">防溅抗水，还防尘。</div>
			
 
				+                    <div class="p1-swiper-text">我们深入微观层面对 iPhone X 进行了精密设计，以实现防溅、抗水和防尘性能。</div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            <div class="swiper-pagination"></div>
			
 
				+        </div>
			
 
				+        <button type="button" class="close-swiper-btn" id="close-plane-swiper"><span class="circle-icon">x</span>关闭</button>
			
 
				+    </div>
			
 
				+
			
 
				+    <a href="javascript:" id="suggest-watch" class="nav-btn nav-btn-white">评测视频</a>
			
 
				+    <a href="index.html?back" class="nav-btn nav-btn-pic">切换背景</a>
			
 
				+    <a href="javascript:" class="buy-btn">BUY NOW</a>
			
 
				+
			
 
				+    <!-- 视频 -->
			
 
				+    <div class="full-video-wrap">
			
 
				+        <video id="face-video1" controls preload="metadata"></video>
			
 
				+        <video id="face-video2" controls preload="metadata"></video>
			
 
				+        <video id="back-camera-video" controls preload="metadata"></video>
			
 
				+        <video id="front-camera-video" controls preload="metadata"></video>
			
 
				+        <video id="front-camera-video3" controls preload="metadata"></video>
			
 
				+        <video id="screen-video1" controls preload="metadata"></video>
			
 
				+        <video id="suggest-video" controls preload="metadata"></video>
			
 
				+        <span class="close-icon close-full-video"></span>
			
 
				+    </div>
			
 
				+    <script src="//www.duowan.com/assets/js/jquery.js"></script>
			
 
				+    <script src="./js/iphonex.js"></script>
			
 
				+</body>
			
--- a/2018专题/18073D模型展示专题/js/iphonex.js
+++ b/2018专题/18073D模型展示专题/js/iphonex.js
@@ -0,0 +1,645 @@
 
				+import '../scss/style.scss'
			
 
				+import '../scss/iphonex.scss'
			
 
				+import '../scss/swiper-4.1.6.min.css'
			
 
				+
			
 
				+import * as THREE from 'three';
			
 
				+import 'three/examples/js/loaders/GLTFLoader';
			
 
				+
			
 
				+import Swiper from './lib/swiper-4.1.6.min';
			
 
				+
			
 
				+import UTIL from './util';
			
 
				+import Video from './video';
			
 
				+import 'three/examples/js/controls/OrbitControls';
			
 
				+
			
 
				+import textureBox from '../texture/box-location.png'
			
 
				+
			
 
				+// 全景图
			
 
				+import negx from '../texture/bg/negx.jpg'
			
 
				+import negy from '../texture/bg/negy.jpg'
			
 
				+import negz from '../texture/bg/negz.jpg'
			
 
				+import posx from '../texture/bg/posx.jpg'
			
 
				+import posy from '../texture/bg/posy.jpg'
			
 
				+import posz from '../texture/bg/posz.jpg'
			
 
				+
			
 
				+var container, controls;
			
 
				+var camera, scene, renderer;
			
 
				+
			
 
				+var projectiveObj;//定义上次投射到的对象
			
 
				+var raycaster = new THREE.Raycaster();//光线投射器
			
 
				+var mouse = new THREE.Vector2();//二维向量 
			
 
				+
			
 
				+document.addEventListener('mousemove', function(){
			
 
				+    event.preventDefault();
			
 
				+    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
			
 
				+    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
			
 
				+}, false);
			
 
				+
			
 
				+$(document).on('click', function(){
			
 
				+    $('.modal').fadeOut()
			
 
				+    controls ? controls.autoRotate = true : ''
			
 
				+})
			
 
				+
			
 
				+
			
 
				+/**
			
 
				+ * 添加鼠标点击事件，捕获点击时当前选中的物体
			
 
				+ */
			
 
				+window.addEventListener( 'click', function(){
			
 
				+    if(projectiveObj){
			
 
				+        controls.autoRotate = false
			
 
				+        $('.entry-tips').hide()
			
 
				+        var Util = new UTIL(camera)
			
 
				+        var dataInfo = projectiveObj.dataInfo
			
 
				+
			
 
				+        $('.modal-left-img').fadeOut()
			
 
				+        $('.modal-right').fadeOut()
			
 
				+        $('.modal-hide').fadeOut()
			
 
				+
			
 
				+        if(dataInfo == 'screen') {
			
 
				+            Util.CameraTo(0, 0, 150, function() {
			
 
				+                $('#modal1').fadeIn()
			
 
				+                $('.modal-group1').addClass('fadeInLeft').show()
			
 
				+            })
			
 
				+        }
			
 
				+        if(dataInfo == 'faceId') {
			
 
				+            Util.CameraTo(-20, 40, 100, function() {
			
 
				+                $('#modal2').fadeIn()
			
 
				+                // $('.modal-group2').fadeIn()
			
 
				+                $('.modal-group2').addClass('fadeInLeft').show()
			
 
				+            })
			
 
				+        }
			
 
				+        if(dataInfo == 'camera') {
			
 
				+            Util.CameraTo(20, 20, 180, function() {
			
 
				+                $('#modal3').fadeIn()
			
 
				+                $('.modal-group3').addClass('fadeInRight').show()
			
 
				+            })
			
 
				+        }
			
 
				+        if(dataInfo == 'back-camera') {
			
 
				+            Util.CameraTo(40, 50, -160, function() {
			
 
				+                $('#modal4').fadeIn()
			
 
				+                $('.modal-group4').addClass('fadeInRight').show()
			
 
				+            })
			
 
				+        }
			
 
				+        if(dataInfo == 'A11') {
			
 
				+            Util.CameraTo(0, 0, -150, function() {
			
 
				+                $('#modal5').fadeIn()
			
 
				+                $('.modal-group5').addClass('fadeInRight').show()
			
 
				+            })
			
 
				+        }
			
 
				+    }
			
 
				+}, false );
			
 
				+
			
 
				+function init() {
			
 
				+    container = document.createElement( 'div' );
			
 
				+    document.body.appendChild( container );
			
 
				+
			
 
				+    // 视角：90度
			
 
				+    // 镜头宽高比： window.innerWidth / window.innerHeight
			
 
				+    // 近平面距离： 0.1
			
 
				+    // 远平面距离：1000
			
 
				+
			
 
				+    camera = new THREE.PerspectiveCamera( 90, window.innerWidth / window.innerHeight, 0.1, 1000 );
			
 
				+    camera.position.z = 200
			
 
				+    camera.position.y = 0
			
 
				+    camera.position.x = 0
			
 
				+
			
 
				+    if(window.location.search) {
			
 
				+        controls = new THREE.OrbitControls( camera );
			
 
				+        controls.autoRotate = true
			
 
				+        controls.autoRotateSpeed = 1
			
 
				+        controls.enablePan = false
			
 
				+        // controls.enableZoom = false
			
 
				+        controls.maxDistance = 300
			
 
				+        controls.minDistance = 200
			
 
				+    }
			
 
				+
			
 
				+    scene = new THREE.Scene();
			
 
				+
			
 
				+    scene.add( new THREE.HemisphereLight(0xffffff, 0xffffff, 1) );
			
 
				+
			
 
				+    // envmap
			
 
				+    var path = 'iphoneX1/bg/';
			
 
				+    var format = '.jpg';
			
 
				+    var envMap = new THREE.CubeTextureLoader().load( [
			
 
				+        posx, negx,
			
 
				+        posy, negy,
			
 
				+        posz, negz
			
 
				+    ] );
			
 
				+    // scene.background = envMap
			
 
				+    // 添加辅助线
			
 
				+	// var helper = new THREE.GridHelper( 500, 100 );
			
 
				+    // helper.position.y = -50;
			
 
				+    // helper.material.opacity = 0.25;
			
 
				+    // helper.material.transparent = true;
			
 
				+    // scene.add( helper );
			
 
				+    //参数设置了三条轴线的长度
			
 
				+    // var axes = new THREE.AxisHelper(800);
			
 
				+    // scene.add(axes);
			
 
				+
			
 
				+    // 创建互动点
			
 
				+    var geometry = new THREE.SphereGeometry(2,32,32);//盒子模型
			
 
				+    var tranGeometry = new THREE.SphereGeometry(6,96,96);//盒子模型
			
 
				+
			
 
				+    var material = new THREE.MeshLambertMaterial({color: 0xffc000, transparent: true, opacity: 0.8})
			
 
				+    var tranMaterial = new THREE.MeshLambertMaterial({color: 0x0000ff, transparent: true, opacity: 0});
			
 
				+
			
 
				+    var point1 = new THREE.Mesh( geometry, material );
			
 
				+    point1.position.set(0,0,8)
			
 
				+    scene.add( point1 );
			
 
				+
			
 
				+    var tranPoint1 = new THREE.Mesh( tranGeometry, tranMaterial );
			
 
				+    tranPoint1.position.set(0,0,8)           
			
 
				+    tranPoint1.dataInfo = 'screen'
			
 
				+    scene.add(tranPoint1)
			
 
				+
			
 
				+    var point2 = new THREE.Mesh( geometry, material );
			
 
				+    point2.position.set(-12,119,10)
			
 
				+    scene.add( point2 );
			
 
				+
			
 
				+    var tranPoint2 = new THREE.Mesh( tranGeometry, tranMaterial );
			
 
				+    tranPoint2.position.set(-12,119,10)           
			
 
				+    tranPoint2.dataInfo = 'faceId'
			
 
				+    scene.add(tranPoint2)
			
 
				+
			
 
				+    var point3 = new THREE.Mesh( geometry, material );
			
 
				+    point3.position.set(17,119,10)        
			
 
				+    scene.add( point3 );
			
 
				+
			
 
				+    var tranPoint3 = new THREE.Mesh( tranGeometry, tranMaterial );
			
 
				+    tranPoint3.position.set(17,119,10)           
			
 
				+    tranPoint3.dataInfo = 'camera'
			
 
				+    scene.add(tranPoint3)
			
 
				+    
			
 
				+
			
 
				+    var point4 = new THREE.Mesh( geometry, material );
			
 
				+    point4.position.set(45,98,-10)
			
 
				+    scene.add( point4 );
			
 
				+
			
 
				+    var tranPoint4 = new THREE.Mesh( tranGeometry, tranMaterial );
			
 
				+    tranPoint4.position.set(45,98,-10)           
			
 
				+    tranPoint4.dataInfo = 'back-camera'
			
 
				+    scene.add(tranPoint4)
			
 
				+
			
 
				+    var point5 = new THREE.Mesh( geometry, material );
			
 
				+    point5.position.set(-26,55,-12)
			
 
				+    scene.add( point5 );
			
 
				+
			
 
				+    var tranPoint5 = new THREE.Mesh( tranGeometry, tranMaterial );
			
 
				+    tranPoint5.position.set(-26,55,-12)           
			
 
				+    tranPoint5.dataInfo = 'A11'
			
 
				+    scene.add(tranPoint5)
			
 
				+
			
 
				+
			
 
				+    // 加载3D模型
			
 
				+    var loader = new THREE.GLTFLoader();
			
 
				+    loader.load( 'iphonex/scene.gltf', function ( object ) {
			
 
				+        object.scene.traverse( function ( child ) {
			
 
				+            if ( child.isMesh ) {
			
 
				+                child.material.envMap = envMap;
			
 
				+                console.log(child)
			
 
				+            }
			
 
				+        } );
			
 
				+
			
 
				+        scene.add( object.scene );
			
 
				+    });
			
 
				+
			
 
				+    renderer = new THREE.WebGLRenderer({
			
 
				+        antialias: true,
			
 
				+        alpha: true
			
 
				+    });
			
 
				+    renderer.setClearColor(0x000000, 0);
			
 
				+    renderer.setPixelRatio( window.devicePixelRatio );
			
 
				+    renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				+    container.appendChild( renderer.domElement );
			
 
				+    window.addEventListener( 'resize', resize, false );
			
 
				+}
			
 
				+function resize() {
			
 
				+    camera.aspect = window.innerWidth / window.innerHeight;
			
 
				+    camera.updateProjectionMatrix();
			
 
				+    renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				+}
			
 
				+function animate() {
			
 
				+    if(controls) {
			
 
				+        controls.update();
			
 
				+    }
			
 
				+    renderRaycasterObj(raycaster,scene,camera,mouse);//渲染光投射器投射到的对象
			
 
				+    renderer.render( scene, camera );
			
 
				+
			
 
				+    //重新渲染标签位置
			
 
				+    var Util = new UTIL(camera)
			
 
				+    Util.windowVector(0, 0, 8, 'modal1');
			
 
				+    Util.windowVector(-12,119,10, 'modal2');
			
 
				+    Util.windowVector(17,119,10, 'modal3');
			
 
				+    Util.windowVector(45,98,-10, 'modal4');
			
 
				+    Util.windowVector(-26,55,-12, 'modal5');
			
 
				+    
			
 
				+    requestAnimationFrame( animate );
			
 
				+}
			
 
				+
			
 
				+/**
			
 
				+ * 根据光投射器判断鼠标所在向量方向是否穿过物体
			
 
				+ */
			
 
				+function renderRaycasterObj(raycaster,scene,camera,mouse) {
			
 
				+    raycaster.setFromCamera(mouse, camera);
			
 
				+    var intersects = raycaster.intersectObjects(scene.children);
			
 
				+    if (intersects.length > 0) {
			
 
				+        var currentProjectiveObjT = intersects[0].object;
			
 
				+        if (projectiveObj != currentProjectiveObjT) {
			
 
				+            if((currentProjectiveObjT instanceof THREE.AxisHelper) || (currentProjectiveObjT instanceof THREE.GridHelper)){
			
 
				+                //穿过的是坐标轴线和网格线
			
 
				+                return;
			
 
				+            }
			
 
				+            projectiveObj = intersects[0].object;
			
 
				+        }
			
 
				+    } else {
			
 
				+        projectiveObj = null;
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+// 弹窗根随球体
			
 
				+// function modalAnimate() { 
			
 
				+//     var Util = new UTIL(camera)
			
 
				+//     //重新渲染标签位置
			
 
				+//     Util.windowVector(0, 0, 8, 'modal1');
			
 
				+//     Util.windowVector(-12,119,10, 'modal2');
			
 
				+//     Util.windowVector(17,119,10, 'modal3');
			
 
				+//     Util.windowVector(45,98,-10, 'modal4');
			
 
				+//     Util.windowVector(-26,55,-12, 'modal5');
			
 
				+//     //每帧渲染
			
 
				+//     // renderer.render(scene, camera);
			
 
				+//     requestAnimationFrame(modalAnimate);
			
 
				+// }
			
 
				+
			
 
				+
			
 
				+init();
			
 
				+// animate();
			
 
				+
			
 
				+// modalAnimate()
			
 
				+
			
 
				+// ---- 弹窗交互相关 ------
			
 
				+var timer
			
 
				+var scrollFlag = false
			
 
				+var frontCameraSwiper = null
			
 
				+var screenSwiper = null
			
 
				+var planeSwiper = null
			
 
				+var faceSwiper = null
			
 
				+var backCameraSwiper = null
			
 
				+
			
 
				+
			
 
				+// 入口页滚动进入
			
 
				+if(!window.location.search && !controls) {
			
 
				+    $(document).on('mousewheel DOMMouseScroll', function (e) {
			
 
				+        //WebKit内核，Trident内核 => mousewheel
			
 
				+        //Gecko内核 => DOMMouseScroll
			
 
				+        e.preventDefault();
			
 
				+        var value = e.originalEvent.wheelDelta || -e.originalEvent.detail;
			
 
				+        //e.originalEvent.wheelDelta => 120(up) or -120(down) 谷歌IE内核
			
 
				+        //e.originalEvent.detail => -3(up) or 3(down) 火狐内核
			
 
				+        var delta = Math.max(-1, Math.min(1, value));
			
 
				+        // console.log(delta < 0 ? 'down' : 'up');
			
 
				+        if(delta < 0 && !scrollFlag) {
			
 
				+            clearInterval(timer)
			
 
				+            $('.iphonex-wrapper').fadeOut()
			
 
				+            $('.full-video').fadeIn()
			
 
				+            document.getElementById('entry-video').play()
			
 
				+            if(!controls) {
			
 
				+                controls = new THREE.OrbitControls( camera );
			
 
				+                controls.autoRotate = true
			
 
				+                controls.autoRotateSpeed = 1
			
 
				+                controls.enablePan = false
			
 
				+                // controls.enableZoom = false
			
 
				+                controls.maxDistance = 300
			
 
				+                controls.minDistance = 200
			
 
				+            }
			
 
				+            scrollFlag = true
			
 
				+            animate()
			
 
				+        }
			
 
				+    });
			
 
				+}
			
 
				+
			
 
				+var View = {
			
 
				+    init() {
			
 
				+        this.setVideoSrc()
			
 
				+        this.handleModal()
			
 
				+
			
 
				+        // 场景二回到场景一，不显示介绍
			
 
				+        var search = window.location.search
			
 
				+        if(search) {
			
 
				+            $('.iphonex-wrapper').hide()
			
 
				+            animate()
			
 
				+        } else {
			
 
				+            this.phoneChange()
			
 
				+        }
			
 
				+
			
 
				+        $('.arrow').click(function() {
			
 
				+            clearInterval(timer)
			
 
				+            $('.iphonex-wrapper').fadeOut()
			
 
				+            $('.full-video').fadeIn()
			
 
				+            document.getElementById('entry-video').play()
			
 
				+            if(!controls) {
			
 
				+                controls = new THREE.OrbitControls( camera );
			
 
				+                controls.autoRotate = true
			
 
				+                controls.autoRotateSpeed = 1
			
 
				+                controls.enablePan = false
			
 
				+                // controls.enableZoom = false
			
 
				+                controls.maxDistance = 300
			
 
				+                controls.minDistance = 200
			
 
				+            }
			
 
				+            animate()
			
 
				+        })
			
 
				+    },
			
 
				+    setVideoSrc() {
			
 
				+        var vids = [8925251, 8904623, 8904999, 8908143, 8908435, 8908441,8908437,8908443,
			
 
				+                    8909221, 8909229,8925097]
			
 
				+        var videoEls = {
			
 
				+            '8925251': 'entry-video',
			
 
				+            '8904623': 'face-video1',
			
 
				+            '8904999': 'face-video2',
			
 
				+            '8908143': 'back-camera-video',
			
 
				+            '8908435': 'front-camera-video',
			
 
				+            '8908441': 'front-camera-video2',
			
 
				+            '8908437': 'front-camera-video3',
			
 
				+            '8908443': 'front-camera-video4',
			
 
				+            '8909221': 'screen-video1',
			
 
				+            '8909229': 'screen-video2',
			
 
				+            '8925097': 'suggest-video',
			
 
				+        }
			
 
				+        Video.getVideoSource(vids, videoEls)
			
 
				+
			
 
				+        var entryVideo = document.getElementById('entry-video')
			
 
				+        entryVideo.addEventListener('ended', function() {
			
 
				+            $('.full-video').hide()
			
 
				+        })
			
 
				+
			
 
				+        $('.video-next-btn').click(function(){
			
 
				+            entryVideo.pause()
			
 
				+            $('.full-video').hide()
			
 
				+        })
			
 
				+    },
			
 
				+    phoneChange() {
			
 
				+        var flag = true
			
 
				+        var $phone = $('.iphone-pic')
			
 
				+        var $phoneDown = $('.down-iphone-pic')
			
 
				+        timer = setInterval(() => {
			
 
				+            if(flag) {
			
 
				+                flag = false
			
 
				+                $phone.fadeOut('slow')
			
 
				+                $phoneDown.fadeIn('slow')
			
 
				+            } else {
			
 
				+                flag = true
			
 
				+                $phone.fadeIn('slow')
			
 
				+                $phoneDown.fadeOut('slow')
			
 
				+            }
			
 
				+        }, 6000);
			
 
				+    },
			
 
				+    videoPause() {
			
 
				+        var videoList = document.getElementsByTagName('video')
			
 
				+        for(var i = 0; i < videoList.length; i++) {
			
 
				+            videoList[i].pause()
			
 
				+        }
			
 
				+    },
			
 
				+    handleModal() {
			
 
				+
			
 
				+        var $videoCon = $('.full-video-wrap')
			
 
				+
			
 
				+        $('.close-full-video').click(function() {
			
 
				+            $(this).parent().hide()
			
 
				+            $videoCon.find('video').hide()
			
 
				+            var videoList = document.getElementsByTagName('video')
			
 
				+            for(var i = 0; i < videoList.length; i++) {
			
 
				+                videoList[i].pause()
			
 
				+            }
			
 
				+        })
			
 
				+
			
 
				+        // 屏幕
			
 
				+        $('#modal1-poster1').click(function() {
			
 
				+            $('#screen-video1').show()
			
 
				+            $videoCon.show()
			
 
				+            document.getElementById('screen-video1').play()
			
 
				+        })
			
 
				+        $('#screen-know-more').click(function() {
			
 
				+            $('.screen-swiper').removeClass('fadeOutDown').addClass('fadeInUp').show()
			
 
				+            if(!screenSwiper) {
			
 
				+                View.swiperScreenCamera()
			
 
				+            }
			
 
				+            document.getElementById('screen-video2').currentTime = 0
			
 
				+            document.getElementById('screen-video2').play()
			
 
				+        })
			
 
				+        $('#close-screen-swiper').click(function() {
			
 
				+            View.videoPause()
			
 
				+            $('.screen-swiper').removeClass('fadeInUp').addClass('fadeOutDown')
			
 
				+            screenSwiper.slideTo(0, 0, false)
			
 
				+        })
			
 
				+        $('#reset-screen-video2').click(function() {
			
 
				+            document.getElementById('screen-video2').currentTime = 0
			
 
				+            document.getElementById('screen-video2').play()
			
 
				+        })
			
 
				+
			
 
				+        // faceid
			
 
				+        $('#modal2-poster1').click(function() {
			
 
				+            $('#face-video1').show()
			
 
				+            $videoCon.show()
			
 
				+            document.getElementById('face-video1').play()
			
 
				+        })
			
 
				+        $('#modal2-poster2').click(function() {
			
 
				+            $('#face-video2').show()
			
 
				+            $videoCon.show()
			
 
				+            document.getElementById('face-video2').play()
			
 
				+        })
			
 
				+        $('#face-know-more').click(function() {
			
 
				+            $('.face-swiper').removeClass('fadeOutDown').addClass('fadeInUp').show()
			
 
				+            if(!faceSwiper) {
			
 
				+                View.swiperFace()
			
 
				+            }
			
 
				+        })
			
 
				+        $('#close-face-swiper').click(function() {
			
 
				+            $('.face-swiper').removeClass('fadeInUp').addClass('fadeOutDown')
			
 
				+            faceSwiper.slideTo(0, 0, false)
			
 
				+        })
			
 
				+
			
 
				+        // 前置摄像头
			
 
				+        $('#modal3-poster').click(function() {
			
 
				+            $('#front-camera-video').show()
			
 
				+            $videoCon.show()
			
 
				+            document.getElementById('front-camera-video').play()
			
 
				+        })
			
 
				+
			
 
				+        $('#modal3-poster1').click(function() {
			
 
				+            $('#front-camera-video3').show()
			
 
				+            $videoCon.show()
			
 
				+            document.getElementById('front-camera-video3').play()
			
 
				+        })
			
 
				+        $('#camera-know-more').click(function() {
			
 
				+            $('.camera-swiper').removeClass('fadeOutDown').addClass('fadeInUp').show()
			
 
				+            if(!frontCameraSwiper) {
			
 
				+                View.swiperFrontCamera()
			
 
				+            }
			
 
				+        })
			
 
				+        $('#close-camera-siwper').click(function() {
			
 
				+            View.videoPause()
			
 
				+            $('.camera-swiper').removeClass('fadeInUp').addClass('fadeOutDown')
			
 
				+            frontCameraSwiper.slideTo(0, 0, false)
			
 
				+        })
			
 
				+
			
 
				+        // 后置摄像头
			
 
				+        $('#modal4-poster').click(function() {
			
 
				+            $('#back-camera-video').show()
			
 
				+            $videoCon.show()
			
 
				+            document.getElementById('back-camera-video').play()
			
 
				+        })
			
 
				+        $('#backcamera-know-more').click(function() {
			
 
				+            $('.back-camera-swiper').removeClass('fadeOutDown').addClass('fadeInUp').show()
			
 
				+            if(!backCameraSwiper) {
			
 
				+                View.swiperBackCamera()
			
 
				+            }
			
 
				+        })
			
 
				+        $('#close-backcamera-swiper').click(function() {
			
 
				+            $('.back-camera-swiper').removeClass('fadeInUp').addClass('fadeOutDown')
			
 
				+            backCameraSwiper.slideTo(0, 0, false)
			
 
				+        })
			
 
				+
			
 
				+        // 玻璃后盖
			
 
				+        $('#plane-know-more').click(function() {
			
 
				+            $('.plane-swiper').removeClass('fadeOutDown').addClass('fadeInUp').show()
			
 
				+            if(!planeSwiper) {
			
 
				+                View.swiperPlane()
			
 
				+            }
			
 
				+        })
			
 
				+        $('#close-plane-swiper').click(function() {
			
 
				+            $('.plane-swiper').removeClass('fadeInUp').addClass('fadeOutDown')
			
 
				+            planeSwiper.slideTo(0, 0, false)
			
 
				+        })
			
 
				+
			
 
				+        // 全屏视频结束自动退出
			
 
				+        var videoBox = document.getElementsByClassName('full-video-wrap')[0]
			
 
				+        var videos = videoBox.getElementsByTagName('video')
			
 
				+        for(var i = 0; i < videos.length; i++) {
			
 
				+            videos[i].addEventListener('ended', function() {
			
 
				+                $videoCon.hide()
			
 
				+                $videoCon.find('video').hide()
			
 
				+            })
			
 
				+        }
			
 
				+
			
 
				+        // 评测视频
			
 
				+        $('#suggest-watch').click(function() {
			
 
				+            $('#suggest-video').show()
			
 
				+            $videoCon.show()
			
 
				+            document.getElementById('suggest-video').play()
			
 
				+        })
			
 
				+
			
 
				+        // 进入扩展页，停止转动和缩放
			
 
				+        $('.bottom-more-btn').find('button').click(function(e) {
			
 
				+            controls.enableZoom = false
			
 
				+            return false
			
 
				+        })
			
 
				+        $('.close-swiper-btn').click(function() {
			
 
				+            controls.enableZoom = true
			
 
				+            return false
			
 
				+        })
			
 
				+    },
			
 
				+    swiperFrontCamera() {
			
 
				+
			
 
				+        var ipxVideo = document.getElementById('front-camera-video2')
			
 
				+        var ipxVideo4 = document.getElementById('front-camera-video4')
			
 
				+        // 前置
			
 
				+        frontCameraSwiper = new Swiper('.swiper-front-camera',{
			
 
				+            direction : 'vertical',
			
 
				+            speed:800,
			
 
				+            mousewheel: true,
			
 
				+            pagination: {
			
 
				+                el: '.swiper-pagination',
			
 
				+                clickable: true,
			
 
				+            },
			
 
				+            on:{
			
 
				+                slideChangeTransitionStart: function(){
			
 
				+                    // alert(this.activeIndex);
			
 
				+                    if(this.activeIndex == 1) {
			
 
				+                        ipxVideo.play()
			
 
				+                    } else {
			
 
				+                        ipxVideo.pause()
			
 
				+                    }
			
 
				+
			
 
				+                    if(this.activeIndex == 2) {
			
 
				+                        ipxVideo4.play()
			
 
				+                    } else {
			
 
				+                        ipxVideo4.pause()
			
 
				+                    }
			
 
				+                }
			
 
				+            }
			
 
				+        });
			
 
				+
			
 
				+        // 重播
			
 
				+        $('#reset-front-video2').click(function() {
			
 
				+            ipxVideo.currentTime = 0
			
 
				+            ipxVideo.play()
			
 
				+        })
			
 
				+        $('#reset-front-video4').click(function() {
			
 
				+            ipxVideo4.currentTime = 0
			
 
				+            ipxVideo4.play()
			
 
				+        })
			
 
				+    },
			
 
				+    swiperScreenCamera() {
			
 
				+        var ipxVideo = document.getElementById('screen-video2')
			
 
				+
			
 
				+        screenSwiper = new Swiper('#screen-swiper',{
			
 
				+            direction : 'vertical',
			
 
				+            speed:800,
			
 
				+            mousewheel: true,
			
 
				+            pagination: {
			
 
				+                el: '.swiper-pagination',
			
 
				+                clickable: true,
			
 
				+            },
			
 
				+            on:{
			
 
				+                slideChangeTransitionStart: function(){
			
 
				+                    if(this.activeIndex == 0) {
			
 
				+                        setTimeout(() => {
			
 
				+                            ipxVideo.play()
			
 
				+                        }, 500);
			
 
				+                    } else {
			
 
				+                        ipxVideo.pause()
			
 
				+                    }
			
 
				+                }
			
 
				+            }
			
 
				+        });
			
 
				+    },
			
 
				+    swiperPlane() {
			
 
				+        planeSwiper = new Swiper('.swiper-plane',{
			
 
				+            direction : 'vertical',
			
 
				+            speed:800,
			
 
				+            mousewheel: true,
			
 
				+            pagination: {
			
 
				+                el: '.swiper-pagination',
			
 
				+                clickable: true,
			
 
				+            },
			
 
				+            on:{
			
 
				+            }
			
 
				+        });
			
 
				+    },
			
 
				+    swiperFace() {
			
 
				+        faceSwiper = new Swiper('.swiper-face',{
			
 
				+            direction : 'vertical',
			
 
				+            speed:800,
			
 
				+            mousewheel: true,
			
 
				+            pagination: {
			
 
				+                el: '.swiper-pagination',
			
 
				+                clickable: true,
			
 
				+            },
			
 
				+            on:{
			
 
				+            }
			
 
				+        });
			
 
				+    },
			
 
				+    swiperBackCamera() {
			
 
				+        backCameraSwiper = new Swiper('.swiper-back-camera',{
			
 
				+            direction : 'vertical',
			
 
				+            speed:800,
			
 
				+            mousewheel: true,
			
 
				+            pagination: {
			
 
				+                el: '.swiper-pagination',
			
 
				+                clickable: true,
			
 
				+            },
			
 
				+            on:{
			
 
				+            }
			
 
				+        });
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+View.init()
			
--- a/2018专题/18073D模型展示专题/js/lib/swiper-4.1.6.min.js
+++ b/2018专题/18073D模型展示专题/js/lib/swiper-4.1.6.min.js
--- a/2018专题/18073D模型展示专题/js/main.js
+++ b/2018专题/18073D模型展示专题/js/main.js
@@ -1,27 +1,93 @@
 
				-import '../scss/style.scss'
			
 
				+import '../scss/main.scss'
			
 
				+import '../scss/iphonex1.scss'
			
 
				+import '../scss/swiper-4.1.6.min.css'
			
 
				 
			
 
				 import * as THREE from 'three';
			
 
				-import TWEEN from '@tweenjs/tween.js';
			
 
				-
			
 
				 import 'three/examples/js/loaders/GLTFLoader';
			
 
				-// import './lib/inflate.min.js';
			
 
				-// import './lib/FBXLoader';
			
 
				-// import 'three/examples/js/loaders/TDSLoader';
			
 
				 
			
 
				-// import 'three/examples/js/controls/TrackballControls';
			
 
				+import Swiper from './lib/swiper-4.1.6.min';
			
 
				+
			
 
				+import UTIL from './util';
			
 
				+import Video from './video';
			
 
				 import 'three/examples/js/controls/OrbitControls';
			
 
				 
			
 
				+// import textureBox from '../texture/box-location.png'
			
 
				+
			
 
				+// 全景图
			
 
				+import negx from '../texture/wzrybg/negx.jpg'
			
 
				+import negy from '../texture/wzrybg/negy.jpg'
			
 
				+import negz from '../texture/wzrybg/negz.jpg'
			
 
				+import posx from '../texture/wzrybg/posx.jpg'
			
 
				+import posy from '../texture/wzrybg/posy.jpg'
			
 
				+import posz from '../texture/wzrybg/posz.jpg'
			
 
				+
			
 
				 var container, controls;
			
 
				 var camera, scene, renderer;
			
 
				 
			
 
				+var projectiveObj;//定义上次投射到的对象
			
 
				 var raycaster = new THREE.Raycaster();//光线投射器
			
 
				 var mouse = new THREE.Vector2();//二维向量 
			
 
				+
			
 
				 document.addEventListener('mousemove', function(){
			
 
				     event.preventDefault();
			
 
				     mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
			
 
				     mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
			
 
				 }, false);
			
 
				 
			
 
				+$(document).on('click', function(){
			
 
				+    $('.modal').fadeOut()
			
 
				+    controls ? controls.autoRotate = true : ''
			
 
				+})
			
 
				+
			
 
				+
			
 
				+/**
			
 
				+ * 添加鼠标点击事件，捕获点击时当前选中的物体
			
 
				+ */
			
 
				+window.addEventListener( 'click', function(){
			
 
				+    if(projectiveObj){
			
 
				+        $('.entry-tips').hide()
			
 
				+        controls.autoRotate = false
			
 
				+        var Util = new UTIL(camera)
			
 
				+        var dataInfo = projectiveObj.dataInfo
			
 
				+
			
 
				+        $('.modal-left-img').fadeOut()
			
 
				+        $('.modal-right').fadeOut()
			
 
				+        $('.modal-hide').fadeOut()
			
 
				+
			
 
				+        if(dataInfo == 'screen') {
			
 
				+            Util.CameraTo(0, 0, 150, function() {
			
 
				+                $('#modal1').fadeIn()
			
 
				+                $('.modal-group1').addClass('fadeInLeft').show()
			
 
				+            })
			
 
				+        }
			
 
				+        if(dataInfo == 'faceId') {
			
 
				+            Util.CameraTo(-20, 40, 100, function() {
			
 
				+                $('#modal2').fadeIn()
			
 
				+                // $('.modal-group2').fadeIn()
			
 
				+                $('.modal-group2').addClass('fadeInLeft').show()
			
 
				+            })
			
 
				+        }
			
 
				+        if(dataInfo == 'camera') {
			
 
				+            Util.CameraTo(20, 20, 180, function() {
			
 
				+                $('#modal3').fadeIn()
			
 
				+                $('.modal-group3').addClass('fadeInRight').show()
			
 
				+            })
			
 
				+        }
			
 
				+        if(dataInfo == 'back-camera') {
			
 
				+            Util.CameraTo(40, 50, -160, function() {
			
 
				+                $('#modal4').fadeIn()
			
 
				+                $('.modal-group4').addClass('fadeInRight').show()
			
 
				+            })
			
 
				+        }
			
 
				+        if(dataInfo == 'A11') {
			
 
				+            Util.CameraTo(0, 0, -150, function() {
			
 
				+                $('#modal5').fadeIn()
			
 
				+                $('.modal-group5').addClass('fadeInRight').show()
			
 
				+            })
			
 
				+        }
			
 
				+    }
			
 
				+}, false );
			
 
				+
			
 
				 function init() {
			
 
				     container = document.createElement( 'div' );
			
 
				     document.body.appendChild( container );
			
@@ -32,33 +98,31 @@ function init() {
 
				     // 远平面距离：1000
			
 
				 
			
 
				     camera = new THREE.PerspectiveCamera( 90, window.innerWidth / window.innerHeight, 0.1, 1000 );
			
 
				-    camera.position.z = 300
			
 
				+    camera.position.z = 200
			
 
				     camera.position.y = 0
			
 
				     camera.position.x = 0
			
 
				 
			
 
				     controls = new THREE.OrbitControls( camera );
			
 
				-    // controls.autoRotate = true;
			
 
				-    // controls.enableDamping = true;
			
 
				+    controls.autoRotate = true
			
 
				+    controls.autoRotateSpeed = 0.5
			
 
				+    controls.enablePan = false
			
 
				+    // controls.enableZoom = false
			
 
				+    controls.maxDistance = 300
			
 
				+    controls.minDistance = 200
			
 
				 
			
 
				     scene = new THREE.Scene();
			
 
				 
			
 
				     scene.add( new THREE.HemisphereLight(0xffffff, 0xffffff, 1) );
			
 
				 
			
 
				-    // var directionalLight = new THREE.DirectionalLight( 0x404040, 1 );
			
 
				-    // directionalLight.position.set( 150, 50, -100 );
			
 
				-    // scene.add( directionalLight );
			
 
				-
			
 
				-
			
 
				     // envmap
			
 
				-    var path = 'iphone/bg/';
			
 
				+    var path = 'iphoneX/bg/';
			
 
				     var format = '.jpg';
			
 
				     var envMap = new THREE.CubeTextureLoader().load( [
			
 
				-        path + 'posx' + format, path + 'negx' + format,
			
 
				-        path + 'posy' + format, path + 'negy' + format,
			
 
				-        path + 'posz' + format, path + 'negz' + format
			
 
				+        posx, negx,
			
 
				+        posy, negy,
			
 
				+        posz, negz
			
 
				     ] );
			
 
				-    scene.background = envMap;
			
 
				-    
			
 
				+    scene.background = envMap
			
 
				     // 添加辅助线
			
 
				 	// var helper = new THREE.GridHelper( 500, 100 );
			
 
				     // helper.position.y = -50;
			
@@ -66,80 +130,84 @@ function init() {
 
				     // helper.material.transparent = true;
			
 
				     // scene.add( helper );
			
 
				     //参数设置了三条轴线的长度
			
 
				-    var axes = new THREE.AxisHelper(800);
			
 
				-    scene.add(axes);
			
 
				+    // var axes = new THREE.AxisHelper(800);
			
 
				+    // scene.add(axes);
			
 
				 
			
 
				     // 创建互动点
			
 
				-    var geometry = new THREE.SphereGeometry(4,32,32);//盒子模型
			
 
				-    var texture = new THREE.TextureLoader().load( "iphone/location.png");
			
 
				-
			
 
				-    // var material1 = new THREE.PointsMaterial({size: 1.5,
			
 
				-    //                 // map: texture,
			
 
				-    //                 blending: THREE.AdditiveBlending,
			
 
				-    //                 depthTest: false,
			
 
				-    //                 transparent: true});//材料
			
 
				-    var material1 = new THREE.MeshLambertMaterial()
			
 
				-    var point1 = new THREE.Mesh( geometry, material1 );
			
 
				+    var geometry = new THREE.SphereGeometry(2,32,32);//盒子模型
			
 
				+    var tranGeometry = new THREE.SphereGeometry(6,96,96);//盒子模型
			
 
				+
			
 
				+    var material = new THREE.MeshLambertMaterial({color: 0xffc000, transparent: true, opacity: 0.8})
			
 
				+    var tranMaterial = new THREE.MeshLambertMaterial({color: 0x0000ff, transparent: true, opacity: 0});
			
 
				+
			
 
				+    var point1 = new THREE.Mesh( geometry, material );
			
 
				     point1.position.set(0,0,8)
			
 
				-    point1.dataInfo = 'screen'
			
 
				     scene.add( point1 );
			
 
				 
			
 
				-    var material2 = new THREE.MeshLambertMaterial()
			
 
				-    var point2 = new THREE.Mesh( geometry, material2 );
			
 
				-    point2.position.set(-12,119,6)
			
 
				-    point2.dataInfo = 'faceId'
			
 
				+    var tranPoint1 = new THREE.Mesh( tranGeometry, tranMaterial );
			
 
				+    tranPoint1.position.set(0,0,8)           
			
 
				+    tranPoint1.dataInfo = 'screen'
			
 
				+    scene.add(tranPoint1)
			
 
				+
			
 
				+    var point2 = new THREE.Mesh( geometry, material );
			
 
				+    point2.position.set(-12,119,10)
			
 
				     scene.add( point2 );
			
 
				 
			
 
				-    var material3 = new THREE.MeshLambertMaterial()
			
 
				-    var point3 = new THREE.Mesh( geometry, material3 );
			
 
				-    point3.position.set(17,119,6)
			
 
				-    point3.dataInfo = 'camera'
			
 
				+    var tranPoint2 = new THREE.Mesh( tranGeometry, tranMaterial );
			
 
				+    tranPoint2.position.set(-12,119,10)           
			
 
				+    tranPoint2.dataInfo = 'faceId'
			
 
				+    scene.add(tranPoint2)
			
 
				+
			
 
				+    var point3 = new THREE.Mesh( geometry, material );
			
 
				+    point3.position.set(17,119,10)        
			
 
				     scene.add( point3 );
			
 
				 
			
 
				-    var material4 = new THREE.MeshLambertMaterial()
			
 
				-    var point4 = new THREE.Mesh( geometry, material4 );
			
 
				-    point4.position.set(45,98,-8)
			
 
				-    point4.dataInfo = 'back-camera'
			
 
				+    var tranPoint3 = new THREE.Mesh( tranGeometry, tranMaterial );
			
 
				+    tranPoint3.position.set(17,119,10)           
			
 
				+    tranPoint3.dataInfo = 'camera'
			
 
				+    scene.add(tranPoint3)
			
 
				+    
			
 
				+
			
 
				+    var point4 = new THREE.Mesh( geometry, material );
			
 
				+    point4.position.set(45,98,-10)
			
 
				     scene.add( point4 );
			
 
				 
			
 
				-    /**
			
 
				-     * 添加鼠标点击事件，捕获点击时当前选中的物体
			
 
				-     */
			
 
				-    window.addEventListener( 'click', function(){
			
 
				-        if(projectiveObj){
			
 
				-            console.log(projectiveObj);
			
 
				-            if(projectiveObj.dataInfo == 'screen') {
			
 
				-                CameraTo(0, 0, 150, function() {
			
 
				-                    alert('ppp')
			
 
				-                })
			
 
				-            }
			
 
				-        }
			
 
				-    }, false );
			
 
				+    var tranPoint4 = new THREE.Mesh( tranGeometry, tranMaterial );
			
 
				+    tranPoint4.position.set(45,98,-10)           
			
 
				+    tranPoint4.dataInfo = 'back-camera'
			
 
				+    scene.add(tranPoint4)
			
 
				+
			
 
				+    var point5 = new THREE.Mesh( geometry, material );
			
 
				+    point5.position.set(-26,55,-12)
			
 
				+    scene.add( point5 );
			
 
				+
			
 
				+    var tranPoint5 = new THREE.Mesh( tranGeometry, tranMaterial );
			
 
				+    tranPoint5.position.set(-26,55,-12)           
			
 
				+    tranPoint5.dataInfo = 'A11'
			
 
				+    scene.add(tranPoint5)
			
 
				 
			
 
				     // 加载3D模型
			
 
				     var loader = new THREE.GLTFLoader();
			
 
				-    // var loader = new THREE.FBXLoader();
			
 
				-    loader.setPath( 'iphoneX/' );
			
 
				-    loader.load( 'iphoneX/scene.gltf', function ( object ) {
			
 
				+    // var modelPath = 's/3dmodel/iphoneX/scene.gltf'
			
 
				+    var localPath = 'iphonex1/scene.gltf'
			
 
				+    loader.load( localPath, function ( object ) {
			
 
				         object.scene.traverse( function ( child ) {
			
 
				             if ( child.isMesh ) {
			
 
				                 child.material.envMap = envMap;
			
 
				+                console.log(child)
			
 
				             }
			
 
				         } );
			
 
				 
			
 
				-        console.log(object)
			
 
				         scene.add( object.scene );
			
 
				     });
			
 
				 
			
 
				-    renderer = new THREE.WebGLRenderer();
			
 
				-    // renderer = new THREE.WebGLRenderer({
			
 
				-    //     antialias: false,
			
 
				-    //     alpha: true
			
 
				-    // });
			
 
				+    renderer = new THREE.WebGLRenderer({
			
 
				+        antialias: true,
			
 
				+        alpha: true
			
 
				+    });
			
 
				     renderer.setClearColor(0x000000, 0);
			
 
				     renderer.setPixelRatio( window.devicePixelRatio );
			
 
				     renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				-    // renderer.setClearColor('#ffffff',1.0);
			
 
				     container.appendChild( renderer.domElement );
			
 
				     window.addEventListener( 'resize', resize, false );
			
 
				 }
			
@@ -149,20 +217,25 @@ function resize() {
 
				     renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				 }
			
 
				 function animate() {
			
 
				-    controls.update();
			
 
				+    if(controls) {
			
 
				+        controls.update();
			
 
				+    }
			
 
				     renderRaycasterObj(raycaster,scene,camera,mouse);//渲染光投射器投射到的对象
			
 
				     renderer.render( scene, camera );
			
 
				 
			
 
				+    //重新渲染标签位置
			
 
				+    var Util = new UTIL(camera)
			
 
				+    Util.windowVector(0, 0, 8, 'modal1');
			
 
				+    Util.windowVector(-12,119,10, 'modal2');
			
 
				+    Util.windowVector(17,119,10, 'modal3');
			
 
				+    Util.windowVector(45,98,-10, 'modal4');
			
 
				+    Util.windowVector(-26,55,-12, 'modal5');
			
 
				+
			
 
				     requestAnimationFrame( animate );
			
 
				 }
			
 
				 
			
 
				-var projectiveObj;//定义上次投射到的对象
			
 
				 /**
			
 
				  * 根据光投射器判断鼠标所在向量方向是否穿过物体
			
 
				- * @param {*} raycaster 光投射器
			
 
				- * @param {*} scene     场景
			
 
				- * @param {*} camera    相机
			
 
				- * @param {*} mouse     鼠标位置对应的二维向量
			
 
				  */
			
 
				 function renderRaycasterObj(raycaster,scene,camera,mouse) {
			
 
				     raycaster.setFromCamera(mouse, camera);
			
@@ -181,47 +254,321 @@ function renderRaycasterObj(raycaster,scene,camera,mouse) {
 
				     }
			
 
				 }
			
 
				 
			
 
				-function CameraTo(targetX, targetY, targetZ, callback) {
			
 
				-    var tween = new TWEEN.Tween(camera.position)
			
 
				-		.to({ x: targetX, y: targetY, z: targetZ }, 500)
			
 
				-        .start()
			
 
				-        .onComplete((obj) => {
			
 
				-            // callback()
			
 
				+// 弹窗根随球体
			
 
				+// function modalAnimate() { 
			
 
				+//     var Util = new UTIL(camera)
			
 
				+//     //重新渲染标签位置
			
 
				+//     Util.windowVector(0, 0, 8, 'modal1');
			
 
				+//     Util.windowVector(-12,119,10, 'modal2');
			
 
				+//     Util.windowVector(17,119,10, 'modal3');
			
 
				+//     Util.windowVector(45,98,-10, 'modal4');
			
 
				+//     Util.windowVector(-26,55,-12, 'modal5');
			
 
				+//     //每帧渲染
			
 
				+//     // renderer.render(scene, camera);
			
 
				+//     requestAnimationFrame(modalAnimate);
			
 
				+// }
			
 
				+
			
 
				+
			
 
				+init();
			
 
				+animate();
			
 
				+
			
 
				+// modalAnimate()
			
 
				+
			
 
				+// ---- 弹窗交互相关 ------
			
 
				+var frontCameraSwiper = null
			
 
				+var screenSwiper = null
			
 
				+var planeSwiper = null
			
 
				+var faceSwiper = null
			
 
				+var backCameraSwiper = null
			
 
				+
			
 
				+var View = {
			
 
				+    init() {
			
 
				+        this.setVideoSrc()
			
 
				+        this.handleModal()
			
 
				+    },
			
 
				+    setVideoSrc() {
			
 
				+        var vids = [8904623, 8904999, 8908143, 8908435, 8908441,8908437,8908443,
			
 
				+                    8909221, 8909229,8925097]
			
 
				+        var videoEls = {
			
 
				+            '8904623': 'face-video1',
			
 
				+            '8904999': 'face-video2',
			
 
				+            '8908143': 'back-camera-video',
			
 
				+            '8908435': 'front-camera-video',
			
 
				+            '8908441': 'front-camera-video2',
			
 
				+            '8908437': 'front-camera-video3',
			
 
				+            '8908443': 'front-camera-video4',
			
 
				+            '8909221': 'screen-video1',
			
 
				+            '8909229': 'screen-video2',
			
 
				+            '8925097': 'suggest-video',
			
 
				+        }
			
 
				+        Video.getVideoSource(vids, videoEls)
			
 
				+
			
 
				+    },
			
 
				+    phoneChange() {
			
 
				+        var flag = true
			
 
				+        var $phone = $('.iphone-pic')
			
 
				+        var $phoneDown = $('.down-iphone-pic')
			
 
				+        timer = setInterval(() => {
			
 
				+            if(flag) {
			
 
				+                flag = false
			
 
				+                $phone.fadeOut('slow')
			
 
				+                $phoneDown.fadeIn('slow')
			
 
				+            } else {
			
 
				+                flag = true
			
 
				+                $phone.fadeIn('slow')
			
 
				+                $phoneDown.fadeOut('slow')
			
 
				+            }
			
 
				+        }, 6000);
			
 
				+    },
			
 
				+    videoPause() {
			
 
				+        var videoList = document.getElementsByTagName('video')
			
 
				+        for(var i = 0; i < videoList.length; i++) {
			
 
				+            videoList[i].pause()
			
 
				+        }
			
 
				+    },
			
 
				+    handleModal() {
			
 
				+
			
 
				+        var $videoCon = $('.full-video-wrap')
			
 
				+
			
 
				+        $('.close-full-video').click(function() {
			
 
				+            $(this).parent().hide()
			
 
				+            $videoCon.find('video').hide()
			
 
				+            var videoList = document.getElementsByTagName('video')
			
 
				+            for(var i = 0; i < videoList.length; i++) {
			
 
				+                videoList[i].pause()
			
 
				+            }
			
 
				         })
			
 
				 
			
 
				-    animate();
			
 
				+        // 屏幕
			
 
				+        $('#modal1-poster1').click(function() {
			
 
				+            $('#screen-video1').show()
			
 
				+            $videoCon.show()
			
 
				+            document.getElementById('screen-video1').play()
			
 
				+        })
			
 
				+        $('#screen-know-more').click(function() {
			
 
				+            $('.screen-swiper').removeClass('fadeOutDown').addClass('fadeInUp').show()
			
 
				+            if(!screenSwiper) {
			
 
				+                View.swiperScreenCamera()
			
 
				+            }
			
 
				+            document.getElementById('screen-video2').currentTime = 0
			
 
				+            document.getElementById('screen-video2').play()
			
 
				+        })
			
 
				+        $('#close-screen-swiper').click(function() {
			
 
				+            View.videoPause()
			
 
				+            $('.screen-swiper').removeClass('fadeInUp').addClass('fadeOutDown')
			
 
				+            screenSwiper.slideTo(0, 0, false)
			
 
				+        })
			
 
				+        $('#reset-screen-video2').click(function() {
			
 
				+            document.getElementById('screen-video2').currentTime = 0
			
 
				+            document.getElementById('screen-video2').play()
			
 
				+        })
			
 
				 
			
 
				-    function animate() {
			
 
				-        requestAnimationFrame(animate);
			
 
				-        TWEEN.update();
			
 
				+        // faceid
			
 
				+        $('#modal2-poster1').click(function() {
			
 
				+            $('#face-video1').show()
			
 
				+            $videoCon.show()
			
 
				+            document.getElementById('face-video1').play()
			
 
				+        })
			
 
				+        $('#modal2-poster2').click(function() {
			
 
				+            $('#face-video2').show()
			
 
				+            $videoCon.show()
			
 
				+            document.getElementById('face-video2').play()
			
 
				+        })
			
 
				+        $('#face-know-more').click(function() {
			
 
				+            $('.face-swiper').removeClass('fadeOutDown').addClass('fadeInUp').show()
			
 
				+            if(!faceSwiper) {
			
 
				+                View.swiperFace()
			
 
				+            }
			
 
				+        })
			
 
				+        $('#close-face-swiper').click(function() {
			
 
				+            $('.face-swiper').removeClass('fadeInUp').addClass('fadeOutDown')
			
 
				+            faceSwiper.slideTo(0, 0, false)
			
 
				+        })
			
 
				 
			
 
				-        renderer.render(scene, camera);
			
 
				-    }
			
 
				-}
			
 
				+        // 前置摄像头
			
 
				+        $('#modal3-poster').click(function() {
			
 
				+            $('#front-camera-video').show()
			
 
				+            $videoCon.show()
			
 
				+            document.getElementById('front-camera-video').play()
			
 
				+        })
			
 
				 
			
 
				-var halfWidth, halfHeight;
			
 
				-
			
 
				-function windowVector(x, y, z, id) {
			
 
				-    var world_vector = new THREE.Vector3(x, y, z); //三维坐标
			
 
				-    var vector = world_vector.project(camera); //三维坐标在摄影机上的投影坐标 
			
 
				-    halfWidth = window.innerWidth / 2;
			
 
				-    halfHeight = window.innerHeight / 2;
			
 
				-    var wx = Math.round(vector.x * halfWidth + halfWidth); //在屏幕上的坐标
			
 
				-    var wy = Math.round(-vector.y * halfHeight + halfHeight); //在屏幕上的坐标 //绑CSS
			
 
				-    $('#'+id).css('left', wx);
			
 
				-    $('#'+id).css('top', wy);
			
 
				-}
			
 
				+        $('#modal3-poster1').click(function() {
			
 
				+            $('#front-camera-video3').show()
			
 
				+            $videoCon.show()
			
 
				+            document.getElementById('front-camera-video3').play()
			
 
				+        })
			
 
				+        $('#camera-know-more').click(function() {
			
 
				+            $('.camera-swiper').removeClass('fadeOutDown').addClass('fadeInUp').show()
			
 
				+            if(!frontCameraSwiper) {
			
 
				+                View.swiperFrontCamera()
			
 
				+            }
			
 
				+        })
			
 
				+        $('#close-camera-siwper').click(function() {
			
 
				+            View.videoPause()
			
 
				+            $('.camera-swiper').removeClass('fadeInUp').addClass('fadeOutDown')
			
 
				+            frontCameraSwiper.slideTo(0, 0, false)
			
 
				+        })
			
 
				 
			
 
				-function modalAnimate() { 
			
 
				-    //重新渲染标签位置
			
 
				-    windowVector(0, 0, 8, 'modal1');
			
 
				-    //每帧渲染
			
 
				-    renderer.render(scene, camera);
			
 
				-    requestAnimationFrame(modalAnimate);
			
 
				-}
			
 
				+        // 后置摄像头
			
 
				+        $('#modal4-poster').click(function() {
			
 
				+            $('#back-camera-video').show()
			
 
				+            $videoCon.show()
			
 
				+            document.getElementById('back-camera-video').play()
			
 
				+        })
			
 
				+        $('#backcamera-know-more').click(function() {
			
 
				+            $('.back-camera-swiper').removeClass('fadeOutDown').addClass('fadeInUp').show()
			
 
				+            if(!backCameraSwiper) {
			
 
				+                View.swiperBackCamera()
			
 
				+            }
			
 
				+        })
			
 
				+        $('#close-backcamera-swiper').click(function() {
			
 
				+            $('.back-camera-swiper').removeClass('fadeInUp').addClass('fadeOutDown')
			
 
				+            backCameraSwiper.slideTo(0, 0, false)
			
 
				+        })
			
 
				 
			
 
				+        // 玻璃后盖
			
 
				+        $('#plane-know-more').click(function() {
			
 
				+            $('.plane-swiper').removeClass('fadeOutDown').addClass('fadeInUp').show()
			
 
				+            if(!planeSwiper) {
			
 
				+                View.swiperPlane()
			
 
				+            }
			
 
				+        })
			
 
				+        $('#close-plane-swiper').click(function() {
			
 
				+            $('.plane-swiper').removeClass('fadeInUp').addClass('fadeOutDown')
			
 
				+            planeSwiper.slideTo(0, 0, false)
			
 
				+        })
			
 
				 
			
 
				-init();
			
 
				-animate();
			
 
				+        // 全屏视频结束自动退出
			
 
				+        var videoBox = document.getElementsByClassName('full-video-wrap')[0]
			
 
				+        var videos = videoBox.getElementsByTagName('video')
			
 
				+        for(var i = 0; i < videos.length; i++) {
			
 
				+            videos[i].addEventListener('ended', function() {
			
 
				+                $videoCon.hide()
			
 
				+                $videoCon.find('video').hide()
			
 
				+            })
			
 
				+        }
			
 
				+
			
 
				+        // 评测视频
			
 
				+        $('#suggest-watch').click(function() {
			
 
				+            $('#suggest-video').show()
			
 
				+            $videoCon.show()
			
 
				+            document.getElementById('suggest-video').play()
			
 
				+        })
			
 
				+
			
 
				+        // 进入扩展页，停止转动和缩放
			
 
				+        $('.bottom-more-btn').find('button').click(function(e) {
			
 
				+            controls.enableZoom = false
			
 
				+            return false
			
 
				+        })
			
 
				+        $('.close-swiper-btn').click(function() {
			
 
				+            controls.enableZoom = true
			
 
				+            return false
			
 
				+        })
			
 
				+    },
			
 
				+    swiperFrontCamera() {
			
 
				+
			
 
				+        var ipxVideo = document.getElementById('front-camera-video2')
			
 
				+        var ipxVideo4 = document.getElementById('front-camera-video4')
			
 
				+        // 前置
			
 
				+        frontCameraSwiper = new Swiper('.swiper-front-camera',{
			
 
				+            direction : 'vertical',
			
 
				+            speed:800,
			
 
				+            mousewheel: true,
			
 
				+            pagination: {
			
 
				+                el: '.swiper-pagination',
			
 
				+                clickable: true,
			
 
				+            },
			
 
				+            on:{
			
 
				+                slideChangeTransitionStart: function(){
			
 
				+                    // alert(this.activeIndex);
			
 
				+                    if(this.activeIndex == 1) {
			
 
				+                        ipxVideo.play()
			
 
				+                    } else {
			
 
				+                        ipxVideo.pause()
			
 
				+                    }
			
 
				+
			
 
				+                    if(this.activeIndex == 2) {
			
 
				+                        ipxVideo4.play()
			
 
				+                    } else {
			
 
				+                        ipxVideo4.pause()
			
 
				+                    }
			
 
				+                }
			
 
				+            }
			
 
				+        });
			
 
				+
			
 
				+        // 重播
			
 
				+        $('#reset-front-video2').click(function() {
			
 
				+            ipxVideo.currentTime = 0
			
 
				+            ipxVideo.play()
			
 
				+        })
			
 
				+        $('#reset-front-video4').click(function() {
			
 
				+            ipxVideo4.currentTime = 0
			
 
				+            ipxVideo4.play()
			
 
				+        })
			
 
				+    },
			
 
				+    swiperScreenCamera() {
			
 
				+        var ipxVideo = document.getElementById('screen-video2')
			
 
				+
			
 
				+        screenSwiper = new Swiper('#screen-swiper',{
			
 
				+            direction : 'vertical',
			
 
				+            speed:800,
			
 
				+            mousewheel: true,
			
 
				+            pagination: {
			
 
				+                el: '.swiper-pagination',
			
 
				+                clickable: true,
			
 
				+            },
			
 
				+            on:{
			
 
				+                slideChangeTransitionStart: function(){
			
 
				+                    if(this.activeIndex == 0) {
			
 
				+                        setTimeout(() => {
			
 
				+                            ipxVideo.play()
			
 
				+                        }, 500);
			
 
				+                    } else {
			
 
				+                        ipxVideo.pause()
			
 
				+                    }
			
 
				+                }
			
 
				+            }
			
 
				+        });
			
 
				+    },
			
 
				+    swiperPlane() {
			
 
				+        planeSwiper = new Swiper('.swiper-plane',{
			
 
				+            direction : 'vertical',
			
 
				+            speed:800,
			
 
				+            mousewheel: true,
			
 
				+            pagination: {
			
 
				+                el: '.swiper-pagination',
			
 
				+                clickable: true,
			
 
				+            },
			
 
				+            on:{
			
 
				+            }
			
 
				+        });
			
 
				+    },
			
 
				+    swiperFace() {
			
 
				+        faceSwiper = new Swiper('.swiper-face',{
			
 
				+            direction : 'vertical',
			
 
				+            speed:800,
			
 
				+            mousewheel: true,
			
 
				+            pagination: {
			
 
				+                el: '.swiper-pagination',
			
 
				+                clickable: true,
			
 
				+            },
			
 
				+            on:{
			
 
				+            }
			
 
				+        });
			
 
				+    },
			
 
				+    swiperBackCamera() {
			
 
				+        backCameraSwiper = new Swiper('.swiper-back-camera',{
			
 
				+            direction : 'vertical',
			
 
				+            speed:800,
			
 
				+            mousewheel: true,
			
 
				+            pagination: {
			
 
				+                el: '.swiper-pagination',
			
 
				+                clickable: true,
			
 
				+            },
			
 
				+            on:{
			
 
				+            }
			
 
				+        });
			
 
				+    }
			
 
				+}
			
 
				 
			
 
				-modalAnimate()
			
 
				+View.init()
			
--- a/2018专题/18073D模型展示专题/js/util.js
+++ b/2018专题/18073D模型展示专题/js/util.js
@@ -0,0 +1,39 @@
 
				+import TWEEN from '@tweenjs/tween.js';
			
 
				+import * as THREE from 'three';
			
 
				+
			
 
				+export default class Util {
			
 
				+    constructor(camera) {
			
 
				+        this.camera = camera
			
 
				+    }
			
 
				+    // 相机移动动画
			
 
				+    CameraTo(targetX, targetY, targetZ, callback) {
			
 
				+        var requsetId
			
 
				+        var tween = new TWEEN.Tween(this.camera.position)
			
 
				+            .to({ x: targetX, y: targetY, z: targetZ }, 500)
			
 
				+            .start()
			
 
				+            .onComplete((obj) => {
			
 
				+                callback()
			
 
				+                window.cancelAnimationFrame(requsetId)
			
 
				+            })
			
 
				+    
			
 
				+        animate();
			
 
				+    
			
 
				+        function animate() {
			
 
				+            requsetId = requestAnimationFrame(animate);
			
 
				+            TWEEN.update();
			
 
				+    
			
 
				+            // renderer.render(scene, camera);
			
 
				+        }
			
 
				+    }
			
 
				+    // 三维坐标转二维坐标
			
 
				+    windowVector(x, y, z, id) {
			
 
				+        var world_vector = new THREE.Vector3(x, y, z); //三维坐标
			
 
				+        var vector = world_vector.project(this.camera); //三维坐标在摄影机上的投影坐标 
			
 
				+        var halfWidth = window.innerWidth / 2;
			
 
				+        var halfHeight = window.innerHeight / 2;
			
 
				+        var wx = Math.round(vector.x * halfWidth + halfWidth); //在屏幕上的坐标
			
 
				+        var wy = Math.round(-vector.y * halfHeight + halfHeight); //在屏幕上的坐标 //绑CSS
			
 
				+        $('#'+id).css('left', wx + 15);
			
 
				+        $('#'+id).css('top', wy + 15);
			
 
				+    }
			
 
				+}
			
--- a/2018专题/18073D模型展示专题/js/video.js
+++ b/2018专题/18073D模型展示专题/js/video.js
@@ -0,0 +1,59 @@
 
				+var video = {
			
 
				+    getVideoSource(vids, videoEls) {
			
 
				+        // let vids = ['8892551']
			
 
				+
			
 
				+        // var videoEls = {
			
 
				+        //     '8892551': 'lookup',
			
 
				+        // }
			
 
				+        var mp4UrlMap = {}
			
 
				+
			
 
				+        $.ajax({
			
 
				+            type: "GET",
			
 
				+            dataType: "json",
			
 
				+            url: `//video.duowan.com/jsapi/playPageVideoInfo/?vids=${vids.join(',')}`,
			
 
				+            success: function(data) {
			
 
				+                for(var i in data) {
			
 
				+                    let resouce = video.deCodeArg(data[i].c).all,
			
 
				+                        source = resouce.yuanhua || resouce[1300] || resouce[1000] || resouce[350]
			
 
				+                    let name = videoEls[i] 
			
 
				+                    mp4UrlMap[name] = source.src
			
 
				+                }
			
 
				+                console.log(mp4UrlMap)
			
 
				+                
			
 
				+                for(var key in mp4UrlMap) {
			
 
				+                    document.getElementById(key).src = mp4UrlMap[key]
			
 
				+                }
			
 
				+            }
			
 
				+        })
			
 
				+    },
			
 
				+    decr(r) {
			
 
				+        var e = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@!~*-_.()'".split("");
			
 
				+        var n = [];
			
 
				+        var a = [];
			
 
				+        r.split("").reverse().forEach(function (r, t) {
			
 
				+            var o = e.indexOf(r);
			
 
				+            if (parseInt((t + 1) % 2) == 1) {
			
 
				+                a.push(o)
			
 
				+            } else {
			
 
				+                var p = parseInt(o - a[(t + 1) / 2 - 1]);
			
 
				+                n.push(e[p])
			
 
				+            }
			
 
				+        });
			
 
				+        var t = n.join("").replace(/@/g, "%");
			
 
				+        return decodeURIComponent(t)
			
 
				+    },
			
 
				+    /**
			
 
				+     * 解密数据
			
 
				+     */
			
 
				+    deCodeArg(target) {
			
 
				+        var srcMap = {};
			
 
				+        if (JSON.parse) {
			
 
				+            srcMap = JSON.parse(this.decr(target));
			
 
				+        } else {
			
 
				+            srcMap = eval('(' + this.decr(target) + ')');
			
 
				+        }
			
 
				+        return srcMap;
			
 
				+    },
			
 
				+}
			
 
				+
			
 
				+export default video
			
--- a/2018专题/18073D模型展示专题/package.json
+++ b/2018专题/18073D模型展示专题/package.json
@@ -5,7 +5,8 @@
 
				   "main": "index.js",
			
 
				   "scripts": {
			
 
				     "start": "parcel index.html -p 3000",
			
 
				-    "start:point": "parcel point.html -p 3000",
			
 
				+    "start:iphone": "parcel iphoneX.html -p 3000",
			
 
				+    "build": "parcel build index.html --public-url //pub.dwstatic.com/zt2018/18073dmodel/ --out-dir ../../../pub/zt2018/18073dmodel",
			
 
				     "test": "echo \"Error: no test specified\" && exit 1"
			
 
				   },
			
 
				   "author": "",
			
--- a/2018专题/18073D模型展示专题/scss/animate.min.css
+++ b/2018专题/18073D模型展示专题/scss/animate.min.css
--- a/2018专题/18073D模型展示专题/scss/iphonex.scss
+++ b/2018专题/18073D模型展示专题/scss/iphonex.scss
@@ -0,0 +1,534 @@
 
				+@import 'mixin.scss';
			
 
				+
			
 
				+.iphonex-wrapper{
			
 
				+    position: fixed;
			
 
				+    display: flex;
			
 
				+    justify-content: center;
			
 
				+    align-items: center;
			
 
				+    z-index: 10;
			
 
				+    top: 0;
			
 
				+    left: 0;
			
 
				+    right: 0;
			
 
				+    bottom: 0;
			
 
				+    overflow: hidden;
			
 
				+    background-color: #ffffff;
			
 
				+    color: #000000;
			
 
				+    .iphone-pic{
			
 
				+        width: px2rem(194);
			
 
				+    }
			
 
				+    .down-iphone-pic {
			
 
				+        display: none;
			
 
				+        width: px2rem(460);
			
 
				+        margin-top: px2rem(70);
			
 
				+    }
			
 
				+    .img-box{
			
 
				+        img{
			
 
				+            position: absolute;
			
 
				+            top: 50%;
			
 
				+            left: 50%;
			
 
				+            transform: translate(-50%, -50%);
			
 
				+        }
			
 
				+        height: px2rem(386);
			
 
				+        position: relative;
			
 
				+        text-align: center;
			
 
				+    }
			
 
				+    .arrow{
			
 
				+        display: block;
			
 
				+        cursor: pointer;
			
 
				+        width: px2rem(50);
			
 
				+        margin: px2rem(40) auto 0 auto;
			
 
				+        animation: jump 1.4s ease-in-out 1500ms infinite;
			
 
				+    }
			
 
				+    h3{
			
 
				+        text-align: center;
			
 
				+        font-size: px2rem(30);
			
 
				+        margin-top: px2rem(16);
			
 
				+        margin-bottom: px2rem(30);
			
 
				+    }
			
 
				+    p{
			
 
				+        text-align: center;
			
 
				+        font-size: px2rem(18);
			
 
				+        margin-bottom: px2rem(22);
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+.fade-In{
			
 
				+    opacity: 0;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+.delay-300 {
			
 
				+    animation-delay: 600ms;
			
 
				+}
			
 
				+.delay-600 {
			
 
				+    animation-delay: 900ms;
			
 
				+}
			
 
				+.delay-900 {
			
 
				+    animation-delay: 1200ms;
			
 
				+}
			
 
				+.delay-1200 {
			
 
				+    animation-delay: 1500ms;
			
 
				+}
			
 
				+.delay-1500 {
			
 
				+    animation-delay: 1800ms;
			
 
				+}
			
 
				+
			
 
				+@keyframes jump {
			
 
				+    0% {
			
 
				+        transform: translateY(0);
			
 
				+        opacity: 1;
			
 
				+    }
			
 
				+    50% {
			
 
				+        transform: translateY(15px);
			
 
				+        opacity: 1;
			
 
				+    }
			
 
				+    100% {
			
 
				+        transform: translateY(0);
			
 
				+        opacity: 1;
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+.full-video{
			
 
				+    position: fixed;
			
 
				+    z-index: 1999;
			
 
				+    top: 0;
			
 
				+    left: 0;
			
 
				+    right: 0;
			
 
				+    bottom: 0;
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+    justify-content: center;
			
 
				+    background-color: #000;
			
 
				+    video{
			
 
				+        width: 100%;
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+.logo-wrap{
			
 
				+    position: fixed;
			
 
				+    top: 0;
			
 
				+    left: px2rem(40);
			
 
				+}
			
 
				+
			
 
				+.vr-logo{
			
 
				+    float: left;
			
 
				+    width: px2rem(140);
			
 
				+}
			
 
				+.xingshijie-logo{
			
 
				+    float: left;
			
 
				+    width: px2rem(140);
			
 
				+}
			
 
				+.video-next-btn{
			
 
				+    position: absolute;
			
 
				+    right: px2rem(30);
			
 
				+    bottom: px2rem(30);
			
 
				+    width: px2rem(100);
			
 
				+    height: px2rem(40);
			
 
				+    line-height: px2rem(40);
			
 
				+    text-align: center;
			
 
				+    cursor: pointer;
			
 
				+    border-radius: 4px;
			
 
				+    border: 1px solid #000000;
			
 
				+    background-color: rgba($color: #ffffff, $alpha: .8);
			
 
				+    font-size: px2rem(24);
			
 
				+    color: #000000;
			
 
				+}
			
 
				+
			
 
				+.pub-swiper-box{
			
 
				+    display: none;
			
 
				+    position: absolute;
			
 
				+    z-index: 99;
			
 
				+    top: 0;
			
 
				+    left: 0;
			
 
				+    right: 0;
			
 
				+    bottom: 0;
			
 
				+    background-color: #ffffff;
			
 
				+}
			
 
				+.p1-swiper-title{
			
 
				+    text-align: center;
			
 
				+    color: #333333;
			
 
				+    font-size: px2rem(48);
			
 
				+    padding-top: px2rem(74);
			
 
				+    margin-bottom: px2rem(44);
			
 
				+}
			
 
				+.p1-swiper-text{
			
 
				+    text-align: center;
			
 
				+    color: #333333;
			
 
				+    font-size: px2rem(18);
			
 
				+    line-height: 1.8;
			
 
				+}
			
 
				+.camera-swiper {
			
 
				+    .modal-left-img{
			
 
				+        display: block;
			
 
				+        position: relative;
			
 
				+        left: 0;
			
 
				+        width: px2rem(475);
			
 
				+        overflow: hidden;
			
 
				+    }
			
 
				+    .p1{
			
 
				+        background: url('../img/front-camera-pic4.png') center bottom no-repeat;
			
 
				+    }
			
 
				+    .p2{
			
 
				+        .video-border-box{
			
 
				+            position: absolute;
			
 
				+            top: px2rem(120);
			
 
				+            left: px2rem(350);
			
 
				+            width: px2rem(352);
			
 
				+            height: px2rem(700);
			
 
				+            padding: px2rem(20);
			
 
				+            box-sizing: border-box;
			
 
				+            video{
			
 
				+                width: px2rem(312);
			
 
				+                height: px2rem(660);
			
 
				+
			
 
				+            }
			
 
				+            .video-border{
			
 
				+                position: absolute;
			
 
				+                top: 0;
			
 
				+                left: 0;
			
 
				+                width: px2rem(352);
			
 
				+                height: px2rem(700);
			
 
				+                background: url('../img/ipx-border.png') center center no-repeat;
			
 
				+                background-size: 100%;
			
 
				+            }
			
 
				+        }
			
 
				+        .swiper-poster{
			
 
				+            position: relative;
			
 
				+            cursor: pointer;
			
 
				+            img{
			
 
				+                width: 100%;
			
 
				+                vertical-align: middle;
			
 
				+            }
			
 
				+            span{
			
 
				+                position: absolute;
			
 
				+                z-index: 10;
			
 
				+                left: 50%;
			
 
				+                transform: translateX(-50%);
			
 
				+                bottom: px2rem(25);
			
 
				+                color: #ffffff;
			
 
				+                height: px2rem(30);
			
 
				+                line-height: px2rem(30);
			
 
				+                font-size: px2rem(16);
			
 
				+            }
			
 
				+            .watch-icon{
			
 
				+                display: inline-block;
			
 
				+                margin-left: px2rem(4);
			
 
				+                width: px2rem(20);
			
 
				+                height: px2rem(20);
			
 
				+                background: url('../img/watch-icon.png') no-repeat;
			
 
				+                background-size: 100%;
			
 
				+                vertical-align: middle;
			
 
				+            }
			
 
				+            &:hover{
			
 
				+                span{
			
 
				+                    text-decoration: underline;
			
 
				+                }
			
 
				+                &:after{
			
 
				+                    opacity: 1;
			
 
				+                }
			
 
				+            }
			
 
				+            &:after{
			
 
				+                content: '';
			
 
				+                opacity: 0;
			
 
				+                position: absolute;
			
 
				+                top: 0;
			
 
				+                left: 0;
			
 
				+                right: 0;
			
 
				+                bottom: 0;
			
 
				+                background-color: rgba($color: #000000, $alpha: .4);
			
 
				+                transition: .4s all ease-in-out;
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+    .p2-right-side{
			
 
				+        position: absolute;
			
 
				+        top: px2rem(270);
			
 
				+        right: px2rem(390);
			
 
				+        width: px2rem(470);
			
 
				+        .title{
			
 
				+            color: #000000;
			
 
				+            font-weight: bold;
			
 
				+            font-size: px2rem(40);
			
 
				+        }
			
 
				+        .text{
			
 
				+            margin: px2rem(30) 0;
			
 
				+            color: #000000;
			
 
				+            font-size: px2rem(18);
			
 
				+            line-height: 1.7;
			
 
				+        }
			
 
				+    }
			
 
				+    .p3-info{
			
 
				+        position: absolute;
			
 
				+        width: px2rem(684);
			
 
				+        top: px2rem(30);
			
 
				+        left: px2rem(510);
			
 
				+        h3{
			
 
				+            font-size: px2rem(40);
			
 
				+            font-weight: bold;
			
 
				+            color: #000000;
			
 
				+            line-height: 1.5;
			
 
				+        }
			
 
				+        p{
			
 
				+            color: #000000;
			
 
				+            font-size: px2rem(18);
			
 
				+            line-height: 1.6;
			
 
				+            margin-top: px2rem(10);
			
 
				+        }
			
 
				+    }
			
 
				+    .p3-video{
			
 
				+        position: absolute;
			
 
				+        top: px2rem(280);
			
 
				+        left: px2rem(510);
			
 
				+        width: px2rem(900);
			
 
				+        video{
			
 
				+            width: 100%;
			
 
				+        }
			
 
				+        .reset-video-btn{
			
 
				+            margin: px2rem(10) 0;
			
 
				+        }
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+.swiper-slide{
			
 
				+    box-sizing: border-box;
			
 
				+}
			
 
				+
			
 
				+.screen-swiper {
			
 
				+    .p2{
			
 
				+        padding-top: px2rem(100);
			
 
				+        .p1-swiper-text{
			
 
				+            width: px2rem(900);
			
 
				+            margin: 0 auto;
			
 
				+            text-align: left;
			
 
				+        }
			
 
				+        img{
			
 
				+            display: block;
			
 
				+            width: px2rem(1163);
			
 
				+            margin: px2rem(100) auto 0 auto;
			
 
				+        }
			
 
				+    }
			
 
				+    .p3{
			
 
				+        padding-top: px2rem(100);
			
 
				+        img{
			
 
				+            display: block;
			
 
				+            width: px2rem(1340);
			
 
				+            margin: 0 auto;
			
 
				+            margin-bottom: px2rem(60);
			
 
				+        }
			
 
				+        .bottom-info{
			
 
				+            width: px2rem(1340);
			
 
				+            margin: 0 auto;
			
 
				+        }
			
 
				+        .left-side{
			
 
				+            float: left;
			
 
				+            p{
			
 
				+                font-size: px2rem(28);
			
 
				+                color: #000000;
			
 
				+                margin-bottom: px2rem(10);
			
 
				+            }
			
 
				+        }
			
 
				+        .right-side{
			
 
				+            float: right;
			
 
				+            font-size: px2rem(16);
			
 
				+            color: #000000;
			
 
				+            line-height: 1.7;
			
 
				+            width: px2rem(750);
			
 
				+            margin-right: px2rem(20);
			
 
				+        }
			
 
				+    }
			
 
				+    .p4{
			
 
				+        padding-top: px2rem(80);
			
 
				+        .p1-swiper-title{
			
 
				+            padding-top: 0;
			
 
				+            width: px2rem(1340);
			
 
				+            margin: 0 auto;
			
 
				+            text-align: left;
			
 
				+            margin-bottom: px2rem(2);
			
 
				+        }
			
 
				+        .p1-swiper-text {
			
 
				+            width: px2rem(1340);
			
 
				+            margin: 0 auto;
			
 
				+            text-align: left;
			
 
				+        }
			
 
				+        img{
			
 
				+            display: block;
			
 
				+            width: px2rem(1053);
			
 
				+            margin: px2rem(50) auto;
			
 
				+        }
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+.plane-swiper{
			
 
				+    .p1-swiper-text{
			
 
				+        width: px2rem(1392);
			
 
				+        margin: 0 auto;
			
 
				+        text-align: left;
			
 
				+    }
			
 
				+    .p1-swiper-title {
			
 
				+        width: px2rem(1392);
			
 
				+        margin: 0 auto px2rem(10) auto;
			
 
				+        text-align: left;
			
 
				+    }
			
 
				+    .center-img{
			
 
				+        display: block;
			
 
				+        width: px2rem(1392);
			
 
				+        margin: 0 auto;
			
 
				+    }
			
 
				+    .p1 {
			
 
				+        .center-img{
			
 
				+            margin-top: px2rem(40);
			
 
				+        }
			
 
				+    }
			
 
				+    .p2{
			
 
				+        padding-top: px2rem(80);
			
 
				+        .p1-swiper-title{
			
 
				+            padding-top: px2rem(20);
			
 
				+        }
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+.face-swiper{
			
 
				+    .faceId-gif{
			
 
				+        width: px2rem(775);
			
 
				+        display: block;
			
 
				+        margin: px2rem(30) auto 0 auto;
			
 
				+    }
			
 
				+    .p1{
			
 
				+        background: url('../img/faceId-pic4.jpg') center bottom no-repeat;
			
 
				+        background-size: px2rem(900) auto;
			
 
				+    }
			
 
				+    .p2{
			
 
				+        background: url('../img/faceId-pic5.jpg') center bottom no-repeat;
			
 
				+        background-size: px2rem(1400) auto;
			
 
				+        padding-top: px2rem(80);
			
 
				+        .p1-swiper-title{
			
 
				+            width: px2rem(1600);
			
 
				+            padding-top: 0;
			
 
				+            margin: 0 auto px2rem(10) auto;
			
 
				+            text-align: left;
			
 
				+        }
			
 
				+        .p1-swiper-text{
			
 
				+            width: px2rem(1600);
			
 
				+            margin: 0 auto px2rem(6) auto;
			
 
				+            text-align: left;
			
 
				+        }
			
 
				+    }
			
 
				+    .p3{
			
 
				+        padding-top: px2rem(30);
			
 
				+        .p1-swiper-title{
			
 
				+            width: px2rem(770);
			
 
				+            margin: 0 auto;
			
 
				+            padding-top: 0;
			
 
				+            text-align: left;
			
 
				+        }
			
 
				+        .mg-bottom{
			
 
				+            margin-bottom: px2rem(30);
			
 
				+        }
			
 
				+        .p1-swiper-text{
			
 
				+            width: px2rem(770);
			
 
				+            margin: 0 auto;
			
 
				+            text-align: left;
			
 
				+        }
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+.back-camera-swiper{
			
 
				+    .p1{
			
 
				+        background: url('../img/back-camera-pic5.jpg') center bottom no-repeat;
			
 
				+        background-size: px2rem(1200) auto;
			
 
				+    }
			
 
				+    .p2{
			
 
				+        padding-top: px2rem(70);
			
 
				+        background: url('../img/back-camera-pic6.jpg') center bottom no-repeat;
			
 
				+        background-size: px2rem(1000) auto;
			
 
				+        .center-box{
			
 
				+            width: px2rem(1000);
			
 
				+            margin: px2rem(20) auto;
			
 
				+            .left-side{
			
 
				+                float: left;
			
 
				+                width: px2rem(420);
			
 
				+            }
			
 
				+            .right-side{
			
 
				+                float: right;
			
 
				+                width: px2rem(420);
			
 
				+            }
			
 
				+            .title{
			
 
				+                font-size: px2rem(38);
			
 
				+                color: #000;
			
 
				+                margin-bottom: px2rem(10);
			
 
				+            }
			
 
				+            .text{
			
 
				+                font-size: px2rem(14);
			
 
				+                color: #000;
			
 
				+                line-height: 1.7;
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+    .p3{
			
 
				+        background: url('../img/back-camera-pic7.jpg') center center no-repeat;
			
 
				+        background-size: cover;
			
 
				+    }
			
 
				+}
			
 
				+.center-video{
			
 
				+    display: block;
			
 
				+    width: px2rem(1000);
			
 
				+    margin: px2rem(125) auto 0 auto; 
			
 
				+}
			
 
				+.close-swiper-btn{
			
 
				+    position: absolute;
			
 
				+    z-index: 99;
			
 
				+    bottom: px2rem(20);
			
 
				+    transform: translateX(-50%);
			
 
				+    left: 50%;
			
 
				+    border: none;
			
 
				+    outline: none;
			
 
				+    height: px2rem(50);
			
 
				+    line-height: px2rem(50);
			
 
				+    font-size: px2rem(16);
			
 
				+    color: #ffffff;
			
 
				+    border-radius: px2rem(25);
			
 
				+    background-color: #111111;
			
 
				+    width: px2rem(100);
			
 
				+    text-align: center;
			
 
				+    cursor: pointer;
			
 
				+    &:hover{
			
 
				+        background-color: #252525;
			
 
				+    }
			
 
				+    .circle-icon{
			
 
				+        display: inline-block;
			
 
				+        width: px2rem(20);
			
 
				+        height: px2rem(20);
			
 
				+        line-height: px2rem(20);
			
 
				+        border-radius: 50%;
			
 
				+        border: 1px solid #ffffff;
			
 
				+        font-size: px2rem(18);
			
 
				+        margin-right: px2rem(10);
			
 
				+    }
			
 
				+}
			
 
				+.swiper-container {
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+}
			
 
				+.swiper-pagination{
			
 
				+    position: absolute;
			
 
				+    right: px2rem(10);
			
 
				+    top: 40%;
			
 
				+}
			
 
				+
			
 
				+.reset-video-btn{
			
 
				+    color: #000000;
			
 
				+    width: px2rem(80);
			
 
				+    text-align: center;
			
 
				+    cursor: pointer;
			
 
				+    margin: px2rem(40) auto;
			
 
				+    font-size: px2rem(14);
			
 
				+    .reset-icon{
			
 
				+        display: inline-block;
			
 
				+        width: px2rem(16);
			
 
				+        height: px2rem(16);
			
 
				+        vertical-align: top;
			
 
				+        margin-left: px2rem(6);
			
 
				+        background: url('../img/reset-icon.png') center center no-repeat;
			
 
				+        background-size: 100%;
			
 
				+    }
			
 
				+}
			
--- a/2018专题/18073D模型展示专题/scss/iphonex1.scss
+++ b/2018专题/18073D模型展示专题/scss/iphonex1.scss
@@ -0,0 +1,525 @@
 
				+@import 'mixin.scss';
			
 
				+
			
 
				+.iphonex-wrapper{
			
 
				+    position: fixed;
			
 
				+    display: flex;
			
 
				+    justify-content: center;
			
 
				+    align-items: center;
			
 
				+    z-index: 10;
			
 
				+    top: 0;
			
 
				+    left: 0;
			
 
				+    right: 0;
			
 
				+    bottom: 0;
			
 
				+    overflow: hidden;
			
 
				+    background-color: #ffffff;
			
 
				+    color: #000000;
			
 
				+    .iphone-pic{
			
 
				+        width: px2rem(194);
			
 
				+    }
			
 
				+    .down-iphone-pic {
			
 
				+        display: none;
			
 
				+        width: px2rem(460);
			
 
				+        margin-top: px2rem(70);
			
 
				+    }
			
 
				+    .img-box{
			
 
				+        img{
			
 
				+            position: absolute;
			
 
				+            top: 50%;
			
 
				+            left: 50%;
			
 
				+            transform: translate(-50%, -50%);
			
 
				+        }
			
 
				+        height: px2rem(386);
			
 
				+        position: relative;
			
 
				+        text-align: center;
			
 
				+    }
			
 
				+    .arrow{
			
 
				+        display: block;
			
 
				+        cursor: pointer;
			
 
				+        width: px2rem(50);
			
 
				+        margin: px2rem(40) auto 0 auto;
			
 
				+        animation: jump 1.4s ease-in-out 1500ms infinite;
			
 
				+    }
			
 
				+    h3{
			
 
				+        text-align: center;
			
 
				+        font-size: px2rem(30);
			
 
				+        margin-top: px2rem(16);
			
 
				+        margin-bottom: px2rem(30);
			
 
				+    }
			
 
				+    p{
			
 
				+        text-align: center;
			
 
				+        font-size: px2rem(18);
			
 
				+        margin-bottom: px2rem(22);
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+.fade-In{
			
 
				+    opacity: 0;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+.delay-300 {
			
 
				+    animation-delay: 600ms;
			
 
				+}
			
 
				+.delay-600 {
			
 
				+    animation-delay: 900ms;
			
 
				+}
			
 
				+.delay-900 {
			
 
				+    animation-delay: 1200ms;
			
 
				+}
			
 
				+.delay-1200 {
			
 
				+    animation-delay: 1500ms;
			
 
				+}
			
 
				+.delay-1500 {
			
 
				+    animation-delay: 1800ms;
			
 
				+}
			
 
				+
			
 
				+@keyframes jump {
			
 
				+    0% {
			
 
				+        transform: translateY(0);
			
 
				+        opacity: 1;
			
 
				+    }
			
 
				+    50% {
			
 
				+        transform: translateY(15px);
			
 
				+        opacity: 1;
			
 
				+    }
			
 
				+    100% {
			
 
				+        transform: translateY(0);
			
 
				+        opacity: 1;
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+.full-video{
			
 
				+    position: fixed;
			
 
				+    z-index: 1999;
			
 
				+    top: 0;
			
 
				+    left: 0;
			
 
				+    right: 0;
			
 
				+    bottom: 0;
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+    justify-content: center;
			
 
				+    background-color: #000;
			
 
				+    video{
			
 
				+        width: 100%;
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+.logo-wrap{
			
 
				+    position: fixed;
			
 
				+    top: 0;
			
 
				+    left: px2rem(40);
			
 
				+}
			
 
				+
			
 
				+.vr-logo{
			
 
				+    float: left;
			
 
				+    width: px2rem(140);
			
 
				+}
			
 
				+.xingshijie-logo{
			
 
				+    float: left;
			
 
				+    width: px2rem(140);
			
 
				+}
			
 
				+
			
 
				+.video-next-btn{
			
 
				+    position: absolute;
			
 
				+    right: px2rem(30);
			
 
				+    bottom: px2rem(30);
			
 
				+    width: px2rem(100);
			
 
				+    height: px2rem(40);
			
 
				+    line-height: px2rem(40);
			
 
				+    text-align: center;
			
 
				+    cursor: pointer;
			
 
				+    border-radius: 4px;
			
 
				+    border: 1px solid #000000;
			
 
				+    background-color: rgba($color: #ffffff, $alpha: .8);
			
 
				+    font-size: px2rem(24);
			
 
				+    color: #000000;
			
 
				+}
			
 
				+
			
 
				+.pub-swiper-box{
			
 
				+    display: none;
			
 
				+    position: absolute;
			
 
				+    z-index: 99;
			
 
				+    top: 0;
			
 
				+    left: 0;
			
 
				+    right: 0;
			
 
				+    bottom: 0;
			
 
				+    background-color: #ffffff;
			
 
				+}
			
 
				+.p1-swiper-title{
			
 
				+    text-align: center;
			
 
				+    color: #ffffff;
			
 
				+    font-size: px2rem(48);
			
 
				+    padding-top: px2rem(74);
			
 
				+    margin-bottom: px2rem(44);
			
 
				+}
			
 
				+.p1-swiper-text{
			
 
				+    text-align: center;
			
 
				+    color: #ffffff;
			
 
				+    font-size: px2rem(18);
			
 
				+    line-height: 1.8;
			
 
				+}
			
 
				+.camera-swiper {
			
 
				+    .modal-left-img{
			
 
				+        display: block;
			
 
				+        position: relative;
			
 
				+        left: 0;
			
 
				+        width: px2rem(475);
			
 
				+        overflow: hidden;
			
 
				+    }
			
 
				+    .p1{
			
 
				+        background: url('../img/front-camera-pic4.jpg') center bottom no-repeat;
			
 
				+    }
			
 
				+    .p2{
			
 
				+        .video-border-box{
			
 
				+            position: absolute;
			
 
				+            top: px2rem(120);
			
 
				+            left: px2rem(350);
			
 
				+            width: px2rem(352);
			
 
				+            height: px2rem(700);
			
 
				+            padding: px2rem(20);
			
 
				+            box-sizing: border-box;
			
 
				+            video{
			
 
				+                width: px2rem(312);
			
 
				+                height: px2rem(660);
			
 
				+
			
 
				+            }
			
 
				+            .video-border{
			
 
				+                position: absolute;
			
 
				+                top: 0;
			
 
				+                left: 0;
			
 
				+                width: px2rem(352);
			
 
				+                height: px2rem(700);
			
 
				+                background: url('../img/ipx-border.png') center center no-repeat;
			
 
				+                background-size: 100%;
			
 
				+            }
			
 
				+        }
			
 
				+        .swiper-poster{
			
 
				+            position: relative;
			
 
				+            cursor: pointer;
			
 
				+            img{
			
 
				+                width: 100%;
			
 
				+                vertical-align: middle;
			
 
				+            }
			
 
				+            span{
			
 
				+                position: absolute;
			
 
				+                z-index: 10;
			
 
				+                left: 50%;
			
 
				+                transform: translateX(-50%);
			
 
				+                bottom: px2rem(25);
			
 
				+                color: #ffffff;
			
 
				+                height: px2rem(30);
			
 
				+                line-height: px2rem(30);
			
 
				+                font-size: px2rem(16);
			
 
				+            }
			
 
				+            .watch-icon{
			
 
				+                position: absolute;
			
 
				+                top: 50%;
			
 
				+                left: 50%;
			
 
				+                transform: translate(-50%, -50%);
			
 
				+                width: px2rem(78);
			
 
				+                height: px2rem(78);
			
 
				+                background: url('../img/video-play-icon.png') no-repeat;
			
 
				+                background-size: 100%;
			
 
				+                z-index: 999;
			
 
				+            }
			
 
				+            &:hover{
			
 
				+                span{
			
 
				+                    text-decoration: underline;
			
 
				+                }
			
 
				+                &:after{
			
 
				+                    opacity: 1;
			
 
				+                }
			
 
				+            }
			
 
				+            &:after{
			
 
				+                content: '';
			
 
				+                opacity: 0;
			
 
				+                position: absolute;
			
 
				+                top: 0;
			
 
				+                left: 0;
			
 
				+                right: 0;
			
 
				+                bottom: 0;
			
 
				+                background-color: rgba($color: #000000, $alpha: .4);
			
 
				+                transition: .4s all ease-in-out;
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+    .p2-right-side{
			
 
				+        position: absolute;
			
 
				+        top: px2rem(270);
			
 
				+        right: px2rem(390);
			
 
				+        width: px2rem(470);
			
 
				+        .title{
			
 
				+            color: #ffffff;
			
 
				+            font-weight: bold;
			
 
				+            font-size: px2rem(40);
			
 
				+        }
			
 
				+        .text{
			
 
				+            margin: px2rem(30) 0;
			
 
				+            color: #ffffff;
			
 
				+            font-size: px2rem(18);
			
 
				+            line-height: 1.7;
			
 
				+        }
			
 
				+    }
			
 
				+    .p3-info{
			
 
				+        position: absolute;
			
 
				+        width: px2rem(684);
			
 
				+        top: px2rem(30);
			
 
				+        left: px2rem(510);
			
 
				+        h3{
			
 
				+            font-size: px2rem(40);
			
 
				+            font-weight: bold;
			
 
				+            color: #ffffff;
			
 
				+            line-height: 1.5;
			
 
				+        }
			
 
				+        p{
			
 
				+            color: #ffffff;
			
 
				+            font-size: px2rem(18);
			
 
				+            line-height: 1.6;
			
 
				+            margin-top: px2rem(10);
			
 
				+        }
			
 
				+    }
			
 
				+    .p3-video{
			
 
				+        position: absolute;
			
 
				+        top: px2rem(280);
			
 
				+        left: px2rem(510);
			
 
				+        width: px2rem(900);
			
 
				+        video{
			
 
				+            width: 100%;
			
 
				+        }
			
 
				+        .reset-video-btn{
			
 
				+            margin: px2rem(10) 0;
			
 
				+        }
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+.swiper-slide{
			
 
				+    box-sizing: border-box;
			
 
				+    background: url('../img/swiper-bg.jpg') center center no-repeat;
			
 
				+    background-size: cover;
			
 
				+}
			
 
				+
			
 
				+.screen-swiper {
			
 
				+    .p2{
			
 
				+        padding-top: px2rem(100);
			
 
				+        .p1-swiper-text{
			
 
				+            width: px2rem(900);
			
 
				+            margin: 0 auto;
			
 
				+            text-align: left;
			
 
				+        }
			
 
				+        img{
			
 
				+            display: block;
			
 
				+            width: px2rem(1163);
			
 
				+            margin: px2rem(100) auto 0 auto;
			
 
				+        }
			
 
				+    }
			
 
				+    .p3{
			
 
				+        padding-top: px2rem(100);
			
 
				+        img{
			
 
				+            display: block;
			
 
				+            width: px2rem(1340);
			
 
				+            margin: 0 auto;
			
 
				+            margin-bottom: px2rem(60);
			
 
				+        }
			
 
				+        .bottom-info{
			
 
				+            width: px2rem(1340);
			
 
				+            margin: 0 auto;
			
 
				+        }
			
 
				+        .left-side{
			
 
				+            float: left;
			
 
				+            p{
			
 
				+                font-size: px2rem(28);
			
 
				+                color: #ffffff;
			
 
				+                margin-bottom: px2rem(10);
			
 
				+            }
			
 
				+        }
			
 
				+        .right-side{
			
 
				+            float: right;
			
 
				+            font-size: px2rem(16);
			
 
				+            color: #ffffff;
			
 
				+            line-height: 1.7;
			
 
				+            width: px2rem(750);
			
 
				+            margin-right: px2rem(20);
			
 
				+        }
			
 
				+    }
			
 
				+    .p4{
			
 
				+        padding-top: px2rem(80);
			
 
				+        .p1-swiper-title{
			
 
				+            padding-top: 0;
			
 
				+            width: px2rem(1340);
			
 
				+            margin: 0 auto;
			
 
				+            text-align: left;
			
 
				+            margin-bottom: px2rem(2);
			
 
				+        }
			
 
				+        .p1-swiper-text {
			
 
				+            width: px2rem(1340);
			
 
				+            margin: 0 auto;
			
 
				+            text-align: left;
			
 
				+        }
			
 
				+        img{
			
 
				+            display: block;
			
 
				+            width: px2rem(1053);
			
 
				+            margin: px2rem(50) auto;
			
 
				+        }
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+.plane-swiper{
			
 
				+    .p1-swiper-text{
			
 
				+        width: px2rem(1392);
			
 
				+        margin: 0 auto;
			
 
				+        text-align: left;
			
 
				+    }
			
 
				+    .p1-swiper-title {
			
 
				+        width: px2rem(1392);
			
 
				+        margin: 0 auto px2rem(10) auto;
			
 
				+        text-align: left;
			
 
				+    }
			
 
				+    .center-img{
			
 
				+        display: block;
			
 
				+        width: px2rem(1392);
			
 
				+        margin: 0 auto;
			
 
				+    }
			
 
				+    .p1 {
			
 
				+        .center-img{
			
 
				+            margin-top: px2rem(70);
			
 
				+        }
			
 
				+    }
			
 
				+    .p2{
			
 
				+        padding-top: px2rem(80);
			
 
				+        .p1-swiper-title{
			
 
				+            padding-top: px2rem(20);
			
 
				+        }
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+.face-swiper{
			
 
				+    .faceId-gif{
			
 
				+        width: px2rem(775);
			
 
				+        display: block;
			
 
				+        margin: px2rem(30) auto 0 auto;
			
 
				+    }
			
 
				+    .p1{
			
 
				+        background: url('../img/faceId-pic4-blue.jpg') center -px2rem(40) no-repeat;
			
 
				+        // background-size: px2rem(900) auto;
			
 
				+    }
			
 
				+    .p2{
			
 
				+        background: url('../img/faceId-pic5-blue.jpg') center -px2rem(40) no-repeat;
			
 
				+        // background-size: px2rem(1400) auto;
			
 
				+        padding-top: px2rem(80);
			
 
				+        .p1-swiper-title{
			
 
				+            width: px2rem(1600);
			
 
				+            padding-top: 0;
			
 
				+            margin: 0 auto px2rem(10) auto;
			
 
				+            text-align: left;
			
 
				+        }
			
 
				+        .p1-swiper-text{
			
 
				+            width: px2rem(1600);
			
 
				+            margin: 0 auto px2rem(6) auto;
			
 
				+            text-align: left;
			
 
				+        }
			
 
				+    }
			
 
				+    .p3{
			
 
				+        padding-top: px2rem(30);
			
 
				+        .p1-swiper-title{
			
 
				+            width: px2rem(770);
			
 
				+            margin: 0 auto;
			
 
				+            padding-top: 0;
			
 
				+            text-align: left;
			
 
				+        }
			
 
				+        .mg-bottom{
			
 
				+            margin-bottom: px2rem(30);
			
 
				+        }
			
 
				+        .p1-swiper-text{
			
 
				+            width: px2rem(770);
			
 
				+            margin: 0 auto;
			
 
				+            text-align: left;
			
 
				+        }
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+.back-camera-swiper{
			
 
				+    .p1{
			
 
				+        background: url('../img/back-camera-pic5-blue.jpg') center bottom no-repeat;
			
 
				+        // background-size: px2rem(1200) auto;
			
 
				+    }
			
 
				+    .p2{
			
 
				+        padding-top: px2rem(70);
			
 
				+        background: url('../img/back-camera-pic6-blue.jpg') center bottom no-repeat;
			
 
				+        .center-box{
			
 
				+            width: px2rem(1000);
			
 
				+            margin: px2rem(20) auto;
			
 
				+            .left-side{
			
 
				+                float: left;
			
 
				+                width: px2rem(420);
			
 
				+            }
			
 
				+            .right-side{
			
 
				+                float: right;
			
 
				+                width: px2rem(420);
			
 
				+            }
			
 
				+            .title{
			
 
				+                font-size: px2rem(38);
			
 
				+                color: #ffffff;
			
 
				+                margin-bottom: px2rem(10);
			
 
				+            }
			
 
				+            .text{
			
 
				+                font-size: px2rem(14);
			
 
				+                color: #ffffff;
			
 
				+                line-height: 1.7;
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+    .p3{
			
 
				+        background: url('../img/back-camera-pic7.jpg') center center no-repeat;
			
 
				+        background-size: cover;
			
 
				+    }
			
 
				+}
			
 
				+.center-video{
			
 
				+    display: block;
			
 
				+    width: px2rem(1000);
			
 
				+    margin: px2rem(125) auto 0 auto; 
			
 
				+}
			
 
				+.close-swiper-btn{
			
 
				+    position: absolute;
			
 
				+    z-index: 99;
			
 
				+    bottom: px2rem(20);
			
 
				+    transform: translateX(-50%);
			
 
				+    left: 50%;
			
 
				+    border: none;
			
 
				+    outline: none;
			
 
				+    width: px2rem(99);
			
 
				+    height: px2rem(30);
			
 
				+    background: url('../img/close-btn.png') center center no-repeat;
			
 
				+    background-size: 100%;
			
 
				+    cursor: pointer;
			
 
				+    &:hover{
			
 
				+        background: url('../img/close-btn-active.png') center center no-repeat;
			
 
				+        background-size: 100%;
			
 
				+    }
			
 
				+}
			
 
				+.swiper-container {
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+}
			
 
				+.swiper-pagination{
			
 
				+    position: absolute;
			
 
				+    right: px2rem(10);
			
 
				+    top: 40%;
			
 
				+}
			
 
				+
			
 
				+.reset-video-btn{
			
 
				+    color: #000000;
			
 
				+    width: px2rem(80);
			
 
				+    text-align: center;
			
 
				+    cursor: pointer;
			
 
				+    margin: px2rem(40) auto;
			
 
				+    font-size: px2rem(14);
			
 
				+    .reset-icon{
			
 
				+        display: inline-block;
			
 
				+        width: px2rem(16);
			
 
				+        height: px2rem(16);
			
 
				+        vertical-align: top;
			
 
				+        margin-left: px2rem(6);
			
 
				+        background: url('../img/reset-icon.png') center center no-repeat;
			
 
				+        background-size: 100%;
			
 
				+    }
			
 
				+}
			
--- a/2018专题/18073D模型展示专题/scss/main.scss
+++ b/2018专题/18073D模型展示专题/scss/main.scss
@@ -0,0 +1,373 @@
 
				+@import 'reset.scss';
			
 
				+@import 'mixin.scss';
			
 
				+
			
 
				+html,body{
			
 
				+    height: 100%;
			
 
				+}
			
 
				+a{
			
 
				+    text-decoration: none;
			
 
				+}
			
 
				+body{
			
 
				+    background-color: #ffffff;
			
 
				+    background-size: cover;
			
 
				+    position: relative;
			
 
				+    overflow: hidden;
			
 
				+    font-family: '微软雅黑';
			
 
				+}
			
 
				+.modal{
			
 
				+    display: none;
			
 
				+    position: absolute;
			
 
				+    border: 1px solid #7bd5e9;
			
 
				+    padding: px2rem(20) px2rem(18);
			
 
				+    border-radius: 4px;
			
 
				+    background: url('../img/arrow-right-icon.png') right top no-repeat;
			
 
				+    background-size: px2rem(19) px2rem(20);
			
 
				+    background-color: #0d1430;
			
 
				+    .title{
			
 
				+        line-height: 1;
			
 
				+        font-size: px2rem(24);
			
 
				+        color: #2dafe2;
			
 
				+        padding-left: px2rem(10);
			
 
				+        border-left: px2rem(10) solid #ffffff;
			
 
				+    }
			
 
				+    .content{
			
 
				+        color: #2dafe2;
			
 
				+        font-size: px2rem(14);
			
 
				+        line-height: 1.6;
			
 
				+    }
			
 
				+    .arrow{
			
 
				+        position: absolute;
			
 
				+        top: -10px;
			
 
				+        left: -10px;
			
 
				+        width: 13px;
			
 
				+        height: 13px;
			
 
				+        border-top: px2rem(4) solid #000000;
			
 
				+        border-left: px2rem(4) solid #000000;
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+.buy-btn{
			
 
				+    position: fixed;
			
 
				+    bottom: px2rem(10);
			
 
				+    right: px2rem(10);
			
 
				+    width: px2rem(196);
			
 
				+    height: px2rem(66);
			
 
				+    line-height: px2rem(66);
			
 
				+    background: url('../img/buy-btn.jpg') center center no-repeat;
			
 
				+    background-size: 100%;
			
 
				+    &:hover{
			
 
				+        background: url('../img/buy-btn-active.jpg') center center no-repeat;
			
 
				+        background-size: 100%;
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+.nav-btn{
			
 
				+    position: absolute;
			
 
				+    width: px2rem(100);
			
 
				+    height: px2rem(40);
			
 
				+    line-height: px2rem(40);
			
 
				+    font-size: px2rem(14);
			
 
				+    text-align: center;
			
 
				+    border: 1px solid #2dafe2;
			
 
				+    background-color: #3d97c8;
			
 
				+    color: #ffffff;
			
 
				+    cursor: pointer;
			
 
				+    border-radius: 4px;
			
 
				+    &:hover {
			
 
				+        background-color: #0d1430;
			
 
				+        color: #2dafe2;
			
 
				+    }
			
 
				+}
			
 
				+.nav-btn-white{
			
 
				+    top: px2rem(30);
			
 
				+    right: px2rem(160);
			
 
				+}
			
 
				+.nav-btn-pic{
			
 
				+    top: px2rem(30);
			
 
				+    right: px2rem(30);
			
 
				+}
			
 
				+.nav-btn-video{
			
 
				+    right: px2rem(30);
			
 
				+    top: px2rem(30);
			
 
				+}
			
 
				+.modal-left-img {
			
 
				+    position: absolute;
			
 
				+    display: none;
			
 
				+    left: px2rem(50);
			
 
				+}
			
 
				+.video-poster-img{
			
 
				+    border: 2px solid #7bd5e9;
			
 
				+    border-radius: 4px;
			
 
				+    overflow: hidden;
			
 
				+    cursor: pointer;
			
 
				+    img{
			
 
				+        width: px2rem(480);
			
 
				+        vertical-align: middle;
			
 
				+    }
			
 
				+    .watch-icon{
			
 
				+        position: absolute;
			
 
				+        top: 50%;
			
 
				+        left: 50%;
			
 
				+        margin-left: -px2rem(39);
			
 
				+        margin-top: -px2rem(39);
			
 
				+        width: px2rem(78);
			
 
				+        height: px2rem(78);
			
 
				+        background: url('../img/video-play-icon.png') no-repeat;
			
 
				+        background-size: 100%;
			
 
				+        z-index: 999;
			
 
				+    }
			
 
				+    &:hover{
			
 
				+        span{
			
 
				+            text-decoration: underline;
			
 
				+        }
			
 
				+        &:after{
			
 
				+            opacity: 1;
			
 
				+        }
			
 
				+    }
			
 
				+    &:after{
			
 
				+        content: '';
			
 
				+        opacity: 0;
			
 
				+        position: absolute;
			
 
				+        top: 0;
			
 
				+        left: 0;
			
 
				+        right: 0;
			
 
				+        bottom: 0;
			
 
				+        background-color: rgba($color: #000000, $alpha: .4);
			
 
				+        transition: .4s all ease-in-out;
			
 
				+    }
			
 
				+}
			
 
				+.modal-group3{
			
 
				+    .left-title{
			
 
				+        line-height: 1;
			
 
				+        font-size: px2rem(26);
			
 
				+        color: #ffffff;
			
 
				+        padding: px2rem(16) px2rem(10);
			
 
				+        background-image: linear-gradient(to right,rgba(61, 150, 199, 1), rgba(61, 150, 199, 0));
			
 
				+    }
			
 
				+    .left-text{
			
 
				+        color: #ffffff;
			
 
				+        font-size: px2rem(14);
			
 
				+        background-color: #1c2941;
			
 
				+        padding: px2rem(16) px2rem(10);
			
 
				+    }
			
 
				+}
			
 
				+.bottom-gif{
			
 
				+    width: px2rem(470);
			
 
				+    display: block;
			
 
				+    margin-top: px2rem(40);
			
 
				+    border: 2px solid #7bd5e9;
			
 
				+    border-radius: 4px;
			
 
				+}
			
 
				+.camera-tips-pic{
			
 
				+    display: none;
			
 
				+    position: absolute;
			
 
				+    width: px2rem(480);
			
 
				+    top: px2rem(500);
			
 
				+    left: px2rem(50);
			
 
				+}
			
 
				+
			
 
				+.modal-left-top {
			
 
				+    top: px2rem(120);
			
 
				+}
			
 
				+.modal-left-bottom {
			
 
				+    top: px2rem(466);
			
 
				+    &.modal-group3 {
			
 
				+        &::after{
			
 
				+            display: none;
			
 
				+        }
			
 
				+        cursor: initial;
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+.back-plane-img{
			
 
				+    display: none;
			
 
				+    position: absolute;
			
 
				+    top: px2rem(150);
			
 
				+    left: px2rem(50);
			
 
				+    width: px2rem(460);
			
 
				+    img{
			
 
				+        width: 100%;
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+.screen-left-modal{
			
 
				+    display: none;
			
 
				+    position: absolute;
			
 
				+    top: px2rem(120);
			
 
				+    left: px2rem(50);
			
 
				+    width: px2rem(480);
			
 
				+    .title{
			
 
				+        line-height: 1;
			
 
				+        color: #ffffff;
			
 
				+        font-size: px2rem(30);
			
 
				+        padding: px2rem(16) px2rem(10);
			
 
				+        background-image: linear-gradient(to right,rgba(61, 150, 199, 1), rgba(61, 150, 199, 0));
			
 
				+    }
			
 
				+    .text{
			
 
				+        color: #ffffff;
			
 
				+        font-size: px2rem(14);
			
 
				+        line-height: 1.7;
			
 
				+        margin-bottom: px2rem(40);
			
 
				+        background-color: #1c2941;
			
 
				+        padding: px2rem(16) px2rem(10);
			
 
				+    }
			
 
				+    img{
			
 
				+        display: block;
			
 
				+        margin-bottom: px2rem(40);
			
 
				+        width: 100%;
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+.modal-right{
			
 
				+    position: absolute;
			
 
				+    display: none;
			
 
				+    width: px2rem(480);
			
 
				+    top: px2rem(120);
			
 
				+    right: px2rem(50);
			
 
				+    &.modal-group2{
			
 
				+        img{
			
 
				+            width: 100%;
			
 
				+            border: 2px solid #2dafe2;
			
 
				+            border-radius: 4px;
			
 
				+        }
			
 
				+    }
			
 
				+    &.modal-group5{
			
 
				+        .text{
			
 
				+            margin-bottom: px2rem(100);
			
 
				+        }
			
 
				+    }
			
 
				+    .title{
			
 
				+        line-height: 1;
			
 
				+        color: #ffffff;
			
 
				+        font-size: px2rem(30);
			
 
				+        padding: px2rem(16) px2rem(10);
			
 
				+        background-image: linear-gradient(to right,rgba(61, 150, 199, 1), rgba(61, 150, 199, 0));
			
 
				+    }
			
 
				+    >img{
			
 
				+        display: block;
			
 
				+        width: px2rem(233);
			
 
				+        margin: px2rem(30) auto;
			
 
				+    }
			
 
				+    .text{
			
 
				+        color: #ffffff;
			
 
				+        font-size: px2rem(14);
			
 
				+        line-height: 1.7;
			
 
				+        margin-bottom: px2rem(20);
			
 
				+        background-color: #1c2941;
			
 
				+        padding: px2rem(16) px2rem(10);
			
 
				+    }
			
 
				+}
			
 
				+.modal-group1{
			
 
				+    .video-poster-img{
			
 
				+        position: relative;
			
 
				+        margin-bottom: px2rem(40);
			
 
				+    }
			
 
				+}
			
 
				+.modal-group4{
			
 
				+    .text-img{
			
 
				+        width: px2rem(288);
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+.modal-group3{
			
 
				+    .text-img{
			
 
				+        width: 100%;
			
 
				+    }
			
 
				+    .big-title{
			
 
				+        font-size: px2rem(40);
			
 
				+    }
			
 
				+    &.modal-left-bottom{
			
 
				+        top: px2rem(460);
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+.modal-img-bottom{
			
 
				+    bottom: 0;
			
 
				+    left: px2rem(50);
			
 
				+    width: px2rem(480);
			
 
				+}
			
 
				+
			
 
				+.full-video-wrap{
			
 
				+    display: none;
			
 
				+    position: fixed;
			
 
				+    top: 0;
			
 
				+    left: 0;
			
 
				+    right: 0;
			
 
				+    bottom: 0;
			
 
				+    z-index: 100;
			
 
				+    background-color: rgba($color: #000000, $alpha: 0.8);
			
 
				+    .close-icon{
			
 
				+        position: absolute;
			
 
				+        top: px2rem(30);
			
 
				+        left: px2rem(30);
			
 
				+        width: px2rem(33);
			
 
				+        height: px2rem(33);
			
 
				+        background: url('../img/blue-close-icon.png') center center no-repeat;
			
 
				+        background-size: 100%;
			
 
				+        cursor: pointer;
			
 
				+    }
			
 
				+    video{
			
 
				+        position: absolute;
			
 
				+        display: none;
			
 
				+        width: px2rem(1300);
			
 
				+        top: 50%;
			
 
				+        left: 50%;
			
 
				+        transform: translate(-50%, -50%);
			
 
				+        border: 4px solid #7bd5e9;
			
 
				+        border-radius: 4px;
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+.bottom-more-btn{
			
 
				+    position: absolute;
			
 
				+    display: none;
			
 
				+    bottom: px2rem(30);
			
 
				+    left: 50%;
			
 
				+    margin-left: -px2rem(72);
			
 
				+    text-align: center;
			
 
				+    .title{
			
 
				+        color: #ffffff;
			
 
				+        font-size: px2rem(24);
			
 
				+        margin-bottom: px2rem(10);
			
 
				+    }
			
 
				+    button{
			
 
				+        border: none;
			
 
				+        outline: none;
			
 
				+        cursor: pointer;
			
 
				+        width: px2rem(99);
			
 
				+        height: px2rem(30);
			
 
				+        background: url('../img/know-more-btn.png') center center no-repeat;
			
 
				+        background-size: 100%;
			
 
				+        &:hover {
			
 
				+            background: url('../img/know-more-btn-active.png') center center no-repeat;
			
 
				+            background-size: 100%;
			
 
				+        }
			
 
				+    }
			
 
				+    .circle-icon{
			
 
				+        display: inline-block;
			
 
				+        width: px2rem(20);
			
 
				+        height: px2rem(20);
			
 
				+        line-height: px2rem(20);
			
 
				+        border-radius: 50%;
			
 
				+        border: 1px solid #ffffff;
			
 
				+        font-size: px2rem(18);
			
 
				+        margin-right: px2rem(2);
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+.entry-tips{
			
 
				+    position: fixed;
			
 
				+    left: px2rem(60);
			
 
				+    top: px2rem(200);
			
 
				+    width: px2rem(260);
			
 
				+    p{
			
 
				+        color: #ffffff;
			
 
				+        font-size: px2rem(28);
			
 
				+        line-height: 1.7;
			
 
				+    }
			
 
				+    img{
			
 
				+        display: block;
			
 
				+        width: px2rem(100);
			
 
				+        margin: px2rem(30) auto;
			
 
				+    }
			
 
				+}
			
--- a/2018专题/18073D模型展示专题/scss/mixin.scss
+++ b/2018专题/18073D模型展示专题/scss/mixin.scss
@@ -5,4 +5,15 @@ $vari : 1920 / 640;
 
				 }
			
 
				 @function -px2rem($size){
			
 
				     @return - $size / 20 / 2 / $vari + rem;
			
 
				+}
			
 
				+
			
 
				+.clearfix{
			
 
				+    zoom: 1;
			
 
				+    &::after{
			
 
				+        content: '';
			
 
				+        display: block;
			
 
				+        visibility: hidden;
			
 
				+        height: 0;
			
 
				+        clear: both;
			
 
				+    }
			
 
				 }
			
--- a/2018专题/18073D模型展示专题/scss/style.scss
+++ b/2018专题/18073D模型展示专题/scss/style.scss
@@ -4,14 +4,346 @@
 
				 html,body{
			
 
				     height: 100%;
			
 
				 }
			
 
				+a{
			
 
				+    text-decoration: none;
			
 
				+}
			
 
				 body{
			
 
				-    background: url('../texture/negx.jpg') center center no-repeat;
			
 
				+    background-color: #ffffff;
			
 
				     background-size: cover;
			
 
				     position: relative;
			
 
				+    overflow: hidden;
			
 
				+    font-family: '微软雅黑';
			
 
				 }
			
 
				 .modal{
			
 
				+    display: none;
			
 
				+    position: absolute;
			
 
				+    border: 1px solid #000000;
			
 
				+    padding: px2rem(20) px2rem(18);
			
 
				+    background-color: #ffffff;
			
 
				+    border-radius: 4px;
			
 
				+    .title{
			
 
				+        line-height: 1;
			
 
				+        font-size: px2rem(24);
			
 
				+        color: #333333;
			
 
				+        padding-left: px2rem(10);
			
 
				+        border-left: px2rem(10) solid #000000;
			
 
				+    }
			
 
				+    .content{
			
 
				+        color: #333333;
			
 
				+        font-size: px2rem(14);
			
 
				+        line-height: 1.6;
			
 
				+    }
			
 
				+    .arrow{
			
 
				+        position: absolute;
			
 
				+        top: -10px;
			
 
				+        left: -10px;
			
 
				+        width: 13px;
			
 
				+        height: 13px;
			
 
				+        border-top: px2rem(4) solid #000000;
			
 
				+        border-left: px2rem(4) solid #000000;
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+.buy-btn{
			
 
				+    position: fixed;
			
 
				+    bottom: px2rem(30);
			
 
				+    right: px2rem(30);
			
 
				+    background-color: #1e1716;
			
 
				+    color: #fafafa;
			
 
				+    font-size: px2rem(24);
			
 
				+    text-decoration: none;
			
 
				+    border-radius: 4px;
			
 
				+    width: px2rem(194);
			
 
				+    line-height: px2rem(64);
			
 
				+    text-align: center;
			
 
				+    &:hover{
			
 
				+        background-color: #2e80ef;
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+.nav-btn{
			
 
				     position: absolute;
			
 
				     width: px2rem(100);
			
 
				-    height: px2rem(100);
			
 
				+    height: px2rem(40);
			
 
				+    line-height: px2rem(40);
			
 
				+    color: #333333;
			
 
				+    font-size: px2rem(14);
			
 
				+    text-align: center;
			
 
				+    border: 1px solid #000000;
			
 
				+    background-color: #ffffff;
			
 
				+    cursor: pointer;
			
 
				+    border-radius: 4px;
			
 
				+    &:hover{
			
 
				+        background-color: #000000;
			
 
				+        color: #ffffff;
			
 
				+    }
			
 
				+}
			
 
				+.nav-btn-white{
			
 
				+    top: px2rem(30);
			
 
				+    right: px2rem(160);
			
 
				+}
			
 
				+.nav-btn-pic{
			
 
				+    top: px2rem(30);
			
 
				+    right: px2rem(30);
			
 
				+}
			
 
				+.nav-btn-video{
			
 
				+    right: px2rem(30);
			
 
				+    top: px2rem(30);
			
 
				+}
			
 
				+.modal-left-img {
			
 
				+    position: absolute;
			
 
				+    display: none;
			
 
				+    left: px2rem(50);
			
 
				+}
			
 
				+.video-poster-img{
			
 
				+    cursor: pointer;
			
 
				+    img{
			
 
				+        width: px2rem(480);
			
 
				+        vertical-align: middle;
			
 
				+    }
			
 
				+    span{
			
 
				+        position: absolute;
			
 
				+        z-index: 10;
			
 
				+        left: 50%;
			
 
				+        transform: translateX(-50%);
			
 
				+        bottom: px2rem(25);
			
 
				+        color: #ffffff;
			
 
				+        height: px2rem(30);
			
 
				+        line-height: px2rem(30);
			
 
				+        font-size: px2rem(16);
			
 
				+    }
			
 
				+    .watch-icon{
			
 
				+        display: inline-block;
			
 
				+        margin-left: px2rem(4);
			
 
				+        width: px2rem(20);
			
 
				+        height: px2rem(20);
			
 
				+        background: url('../img/watch-icon.png') no-repeat;
			
 
				+        background-size: 100%;
			
 
				+        vertical-align: middle;
			
 
				+    }
			
 
				+    &:hover{
			
 
				+        span{
			
 
				+            text-decoration: underline;
			
 
				+        }
			
 
				+        &:after{
			
 
				+            opacity: 1;
			
 
				+        }
			
 
				+    }
			
 
				+    &:after{
			
 
				+        content: '';
			
 
				+        opacity: 0;
			
 
				+        position: absolute;
			
 
				+        top: 0;
			
 
				+        left: 0;
			
 
				+        right: 0;
			
 
				+        bottom: 0;
			
 
				+        background-color: rgba($color: #000000, $alpha: .4);
			
 
				+        transition: .4s all ease-in-out;
			
 
				+    }
			
 
				+}
			
 
				+.modal-group3{
			
 
				+    .left-title{
			
 
				+        font-size: px2rem(26);
			
 
				+        color: #333333;
			
 
				+        margin-bottom: px2rem(26);
			
 
				+    }
			
 
				+    .left-text{
			
 
				+        color: #333333;
			
 
				+        font-size: px2rem(14);
			
 
				+        margin-bottom: px2rem(10);
			
 
				+    }
			
 
				+}
			
 
				+.bottom-gif{
			
 
				+    width: px2rem(420);
			
 
				+    display: block;
			
 
				+    margin-top: px2rem(20);
			
 
				+}
			
 
				+.camera-tips-pic{
			
 
				+    display: none;
			
 
				+    position: absolute;
			
 
				+    width: px2rem(480);
			
 
				+    top: px2rem(500);
			
 
				+    left: px2rem(50);
			
 
				+}
			
 
				+
			
 
				+.modal-left-top {
			
 
				+    top: px2rem(150);
			
 
				+}
			
 
				+.modal-left-bottom {
			
 
				+    top: px2rem(496);
			
 
				+    &.modal-group3 {
			
 
				+        &::after{
			
 
				+            display: none;
			
 
				+        }
			
 
				+        cursor: initial;
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+.back-plane-img{
			
 
				+    display: none;
			
 
				+    position: absolute;
			
 
				+    top: px2rem(150);
			
 
				+    left: px2rem(50);
			
 
				+    width: px2rem(460);
			
 
				+    img{
			
 
				+        width: 100%;
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+.screen-left-modal{
			
 
				+    display: none;
			
 
				+    position: absolute;
			
 
				+    top: px2rem(150);
			
 
				+    left: px2rem(50);
			
 
				+    width: px2rem(480);
			
 
				+    .title{
			
 
				+        color: #333333;
			
 
				+        font-size: px2rem(30);
			
 
				+        margin-bottom: px2rem(10);
			
 
				+    }
			
 
				+    .text{
			
 
				+        color: #333333;
			
 
				+        font-size: px2rem(14);
			
 
				+        line-height: 1.7;
			
 
				+        margin-bottom: px2rem(40);
			
 
				+    }
			
 
				+    img{
			
 
				+        display: block;
			
 
				+        margin-bottom: px2rem(40);
			
 
				+        width: 100%;
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+.modal-right{
			
 
				+    position: absolute;
			
 
				+    display: none;
			
 
				+    width: px2rem(480);
			
 
				+    top: px2rem(146);
			
 
				+    right: px2rem(50);
			
 
				+    .title{
			
 
				+        color: #333333;
			
 
				+        font-size: px2rem(30);
			
 
				+        margin-bottom: px2rem(20);
			
 
				+    }
			
 
				+    >img{
			
 
				+        display: block;
			
 
				+        width: px2rem(233);
			
 
				+        margin: px2rem(30) auto;
			
 
				+    }
			
 
				+    .text{
			
 
				+        color: #333333;
			
 
				+        font-size: px2rem(14);
			
 
				+        line-height: 1.7;
			
 
				+        margin-bottom: px2rem(40);
			
 
				+    }
			
 
				+}
			
 
				+.modal-group1{
			
 
				+    .video-poster-img{
			
 
				+        position: relative;
			
 
				+        margin-bottom: px2rem(40);
			
 
				+    }
			
 
				+}
			
 
				+.modal-group4{
			
 
				+    .text-img{
			
 
				+        width: px2rem(288);
			
 
				+    }
			
 
				+}
			
 
				+.modal-group3{
			
 
				+    .text-img{
			
 
				+        width: 100%;
			
 
				+    }
			
 
				+    .big-title{
			
 
				+        font-size: px2rem(48);
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+.modal-img-bottom{
			
 
				+    bottom: 0;
			
 
				+    left: px2rem(50);
			
 
				+    width: px2rem(480);
			
 
				+}
			
 
				+
			
 
				+.full-video-wrap{
			
 
				+    display: none;
			
 
				+    position: fixed;
			
 
				+    top: 0;
			
 
				+    left: 0;
			
 
				+    right: 0;
			
 
				+    bottom: 0;
			
 
				+    z-index: 100;
			
 
				     background-color: #ffffff;
			
 
				+    .close-icon{
			
 
				+        position: absolute;
			
 
				+        top: px2rem(30);
			
 
				+        left: px2rem(30);
			
 
				+        width: px2rem(37);
			
 
				+        height: px2rem(36);
			
 
				+        background: url('../img/close-icon.png') center center no-repeat;
			
 
				+        background-size: 100%;
			
 
				+        cursor: pointer;
			
 
				+    }
			
 
				+    video{
			
 
				+        position: absolute;
			
 
				+        display: none;
			
 
				+        width: px2rem(1300);
			
 
				+        top: 50%;
			
 
				+        left: 50%;
			
 
				+        transform: translate(-50%, -50%);
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+.bottom-more-btn{
			
 
				+    position: absolute;
			
 
				+    display: none;
			
 
				+    bottom: px2rem(30);
			
 
				+    left: 50%;
			
 
				+    margin-left: -px2rem(72);
			
 
				+    .title{
			
 
				+        text-align: center;
			
 
				+        color: #333333;
			
 
				+        font-size: px2rem(24);
			
 
				+        margin-bottom: px2rem(10);
			
 
				+    }
			
 
				+    button{
			
 
				+        border: none;
			
 
				+        outline: none;
			
 
				+        height: px2rem(50);
			
 
				+        line-height: px2rem(50);
			
 
				+        font-size: px2rem(16);
			
 
				+        color: #ffffff;
			
 
				+        border-radius: px2rem(25);
			
 
				+        background-color: #111111;
			
 
				+        width: px2rem(144);
			
 
				+        text-align: center;
			
 
				+        cursor: pointer;
			
 
				+        &:hover{
			
 
				+            background-color: #252525;
			
 
				+        }
			
 
				+    }
			
 
				+    .circle-icon{
			
 
				+        display: inline-block;
			
 
				+        width: px2rem(20);
			
 
				+        height: px2rem(20);
			
 
				+        line-height: px2rem(20);
			
 
				+        border-radius: 50%;
			
 
				+        border: 1px solid #ffffff;
			
 
				+        font-size: px2rem(18);
			
 
				+        margin-right: px2rem(2);
			
 
				+    }
			
 
				+}
			
 
				+.entry-tips{
			
 
				+    position: fixed;
			
 
				+    left: px2rem(60);
			
 
				+    top: px2rem(200);
			
 
				+    width: px2rem(260);
			
 
				+    p{
			
 
				+        color: #333333;
			
 
				+        font-size: px2rem(28);
			
 
				+        line-height: 1.7;
			
 
				+    }
			
 
				+    img{
			
 
				+        display: block;
			
 
				+        width: px2rem(100);
			
 
				+        margin: px2rem(30) auto;
			
 
				+    }
			
 
				 }
			
--- a/2018专题/18073D模型展示专题/scss/swiper-4.1.6.min.css
+++ b/2018专题/18073D模型展示专题/scss/swiper-4.1.6.min.css
--- a/2018专题/18073D模型展示专题/texture/MacBook.gltf
+++ b/2018专题/18073D模型展示专题/texture/MacBook.gltf
--- a/2018专题/18073D模型展示专题/texture/bg/negx.jpg
+++ b/2018专题/18073D模型展示专题/texture/bg/negx.jpg
--- a/2018专题/18073D模型展示专题/texture/bg/negy.jpg
+++ b/2018专题/18073D模型展示专题/texture/bg/negy.jpg
--- a/2018专题/18073D模型展示专题/texture/bg/negz.jpg
+++ b/2018专题/18073D模型展示专题/texture/bg/negz.jpg
--- a/2018专题/18073D模型展示专题/texture/bg/posx.jpg
+++ b/2018专题/18073D模型展示专题/texture/bg/posx.jpg
--- a/2018专题/18073D模型展示专题/texture/bg/posy.jpg
+++ b/2018专题/18073D模型展示专题/texture/bg/posy.jpg
--- a/2018专题/18073D模型展示专题/texture/bg/posz.jpg
+++ b/2018专题/18073D模型展示专题/texture/bg/posz.jpg
--- a/2018专题/18073D模型展示专题/texture/box-location.png
+++ b/2018专题/18073D模型展示专题/texture/box-location.png
--- a/2018专题/18073D模型展示专题/texture/color.jpg
+++ b/2018专题/18073D模型展示专题/texture/color.jpg
--- a/2018专题/18073D模型展示专题/texture/demo.3DS
+++ b/2018专题/18073D模型展示专题/texture/demo.3DS
--- a/2018专题/18073D模型展示专题/texture/location.png
+++ b/2018专题/18073D模型展示专题/texture/location.png
--- a/2018专题/18073D模型展示专题/texture/normal.jpg
+++ b/2018专题/18073D模型展示专题/texture/normal.jpg
--- a/2018专题/18073D模型展示专题/texture/wzrybg/negx.jpg
+++ b/2018专题/18073D模型展示专题/texture/wzrybg/negx.jpg
--- a/2018专题/18073D模型展示专题/texture/wzrybg/negy.jpg
+++ b/2018专题/18073D模型展示专题/texture/wzrybg/negy.jpg
--- a/2018专题/18073D模型展示专题/texture/wzrybg/negz.jpg
+++ b/2018专题/18073D模型展示专题/texture/wzrybg/negz.jpg
--- a/2018专题/18073D模型展示专题/texture/wzrybg/posx.jpg
+++ b/2018专题/18073D模型展示专题/texture/wzrybg/posx.jpg
--- a/2018专题/18073D模型展示专题/texture/wzrybg/posy.jpg
+++ b/2018专题/18073D模型展示专题/texture/wzrybg/posy.jpg
--- a/2018专题/18073D模型展示专题/texture/wzrybg/posz.jpg
+++ b/2018专题/18073D模型展示专题/texture/wzrybg/posz.jpg
--- a/2018专题/18073D模型展示专题/texture/笔记本2.3DS
+++ b/2018专题/18073D模型展示专题/texture/笔记本2.3DS
--- a/2018专题/LOL赛事竞猜专题通用/src/_index.html
+++ b/2018专题/LOL赛事竞猜专题通用/src/_index.html
@@ -272,7 +272,7 @@
 
				     <!-- <script src="./modules/page/"></script> -->
			
 
				     <script id="dw-footer-without-gem" charset="utf-8" src="//pub.dwstatic.com/common/dwFoot/duowanFooter.js"></script><!--ignore-->
			
 
				     <script>
			
 
				-        require('modules/page/main.js');
			
 
				+        require('modules/page/pgimatch.js');
			
 
				     </script>
			
 
				 </body>
			
 
				 
			
--- a/2018专题/LOL赛事竞猜专题通用/src/_match1807.html
+++ b/2018专题/LOL赛事竞猜专题通用/src/_match1807.html
@@ -176,12 +176,17 @@
 
				                 </div>
			
 
				             </div>
			
 
				             <!-- 获奖名单 -->
			
 
				-            <div class="result-wrapper" style="display: none;">
			
 
				-                <div class="page-title" id="targetReward">
			
 
				+            <div id="targetReward" style="display: none;">
			
 
				+                <div class="page-title">
			
 
				                     <span class="red">获奖</span><span class="blue">名单</span>
			
 
				                 </div>
			
 
				                 <div class="bonus-wrap clearfix">
			
 
				                     <div class="level-box">
			
 
				+                        <div class="title">特等奖</div>
			
 
				+                        <div class="level-list special_level">
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    <div class="level-box">
			
 
				                         <div class="title">一等奖</div>
			
 
				                         <div class="level-list one_level">
			
 
				                         </div>
			
@@ -199,11 +204,6 @@
 
				                 </div>
			
 
				                 <div class="bonus-wrap clearfix" style="padding-top: 0;">
			
 
				                     <div class="level-box">
			
 
				-                        <div class="title">四等奖</div>
			
 
				-                        <div class="level-list four_level">
			
 
				-                        </div>
			
 
				-                    </div>
			
 
				-                    <div class="level-box">
			
 
				                         <div class="title">安慰奖</div>
			
 
				                         <div class="level-list anwei_level">
			
 
				                         </div>
			
--- a/2018专题/LOL赛事竞猜专题通用/src/_pgi1807.html
+++ b/2018专题/LOL赛事竞猜专题通用/src/_pgi1807.html
@@ -0,0 +1,286 @@
 
				+<!doctype html>
			
 
				+<html>
			
 
				+
			
 
				+<head>
			
 
				+    <meta charset="utf-8">
			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				+    <meta name="renderer" content="webkit">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1">
			
 
				+    <meta name="Keywords" content="LPL,LPL联赛春季赛,LPL联赛,LPL英雄联盟职业联赛,LPL联赛竞猜">
			
 
				+    <meta name="description" content="">
			
 
				+    <title>【LPL英雄联盟职业联赛】红蓝大竞猜</title>
			
 
				+    <link href="sass/global.scss" rel="stylesheet">
			
 
				+    <script src="//www.duowan.com/assets/js/jquery.js"></script><!--ignore-->
			
 
				+    <script src="http://pub.dwstatic.com/common/js/dwudbproxy.js"></script><!--ignore-->
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+    <!-- 头部 -->
			
 
				+    <script src="//pub.dwstatic.com/common/dwNavbar/navbar.js"></script>
			
 
				+    <!-- 参数
			
 
				+        data-acid => 竞猜活动ID
			
 
				+        data-boundlist => 是否请求获奖名单接口展示获奖名单
			
 
				+    -->
			
 
				+    <div class="page-index"  data-boundlist="true" data-acid="4">
			
 
				+        <div class="pub-main">
			
 
				+            <!-- 头部 -->
			
 
				+            <div class="page-top">
			
 
				+                <div class="topbar"></div>
			
 
				+                <div class="user clearfix">
			
 
				+                    <div class="user-wrap">
			
 
				+
			
 
				+                    </div>
			
 
				+                    <div class="page-top-btnwrap">
			
 
				+                        <button class="page-top-btn" id="toRewardList">获奖名单</button>
			
 
				+                        <!-- <button class="page-top-btn" id="toRule">竞猜规则</button> -->
			
 
				+                        <button class="page-top-btn" id="myGue">我的竞猜</button >
			
 
				+                        <!-- <button class="page-top-btn" id="toRank">排行榜</button> -->
			
 
				+                        <!-- <button class="page-top-btn" id="prizeCash">收货地址</button> -->
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            <div class="page-title" id="targetRank">
			
 
				+                <span class="red">竞猜</span><span class="blue">押注</span>
			
 
				+            </div>
			
 
				+            <!-- 押注 -->
			
 
				+            <a href="" class="back-btn">浏览夏季赛专题</a>
			
 
				+
			
 
				+            <!-- 排行榜 -->
			
 
				+            <div class="page-title" id="targetRank">
			
 
				+                <span class="red">竞猜</span><span class="blue">排行榜</span>
			
 
				+            </div>
			
 
				+            <div class="rank-wrap" id="subRank">
			
 
				+            </div>
			
 
				+            <!-- 奖品设置 -->
			
 
				+            <div class="page-title">
			
 
				+                <span class="red">奖品</span><span class="blue">设置</span>
			
 
				+            </div>
			
 
				+            <!-- PC端 -->
			
 
				+            <div class="prize-wrap clearfix">
			
 
				+                <div class="prize-list">
			
 
				+                    <div class="prize-list-item">
			
 
				+                        <img src="" data-src="./img/prize-one-pic.jpg" alt="">
			
 
				+                        <div class="text-wrap">
			
 
				+                            <h3 class="prize-name">一等奖</h3>
			
 
				+                            <p class="prize-tips">罗技G810 RGB炫光机械键盘</p>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    <div class="prize-list-item">
			
 
				+                        <img src="" data-src="./img/prize-two-pic.jpg" alt="">
			
 
				+                        <div class="text-wrap">
			
 
				+                            <h3 class="prize-name">二等奖</h3>
			
 
				+                            <p class="prize-tips">罗技G502竞技游戏鼠标</p>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                <div class="prize-list">
			
 
				+                    <div class="prize-list-item">
			
 
				+                        <img src="" data-src="./img/prize-one-pic.jpg" alt="">
			
 
				+                        <div class="text-wrap">
			
 
				+                            <h3 class="prize-name">一等奖</h3>
			
 
				+                            <p class="prize-tips">罗技G810 RGB炫光机械键盘</p>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    <div class="prize-list-item">
			
 
				+                        <img src="" data-src="./img/prize-two-pic.jpg" alt="">
			
 
				+                        <div class="text-wrap">
			
 
				+                            <h3 class="prize-name">二等奖</h3>
			
 
				+                            <p class="prize-tips">罗技G502竞技游戏鼠标</p>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            <!-- 三等奖模板 -->
			
 
				+            <!-- <div class="prize-wrap clearfix">
			
 
				+                <div class="prize-list one">
			
 
				+                    <div class="prize-list-item">
			
 
				+                        <img src="" data-src="./img/prize-one-pic.jpg" alt="">
			
 
				+                        <div class="text-wrap">
			
 
				+                            <h3 class="prize-name">一等奖</h3>
			
 
				+                            <p class="prize-tips">罗技G810 RGB炫光机械键盘</p>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                <div class="prize-list two">
			
 
				+                    <div class="prize-list-item">
			
 
				+                        <img src="" data-src="./img/prize-one-pic.jpg" alt="">
			
 
				+                        <div class="text-wrap">
			
 
				+                            <h3 class="prize-name">一等奖</h3>
			
 
				+                            <p class="prize-tips">罗技G810 RGB炫光机械键盘</p>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                <div class="prize-list three">
			
 
				+                    <div class="prize-list-item">
			
 
				+                        <img src="" data-src="./img/prize-one-pic.jpg" alt="">
			
 
				+                        <div class="text-wrap">
			
 
				+                            <h3 class="prize-name">一等奖</h3>
			
 
				+                            <p class="prize-tips">罗技G810 RGB炫光机械键盘</p>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div> -->
			
 
				+            <!-- 移动端 -->
			
 
				+            <div class="prize-wrap-moblie clearfix">
			
 
				+                <div class="img-wrap">
			
 
				+                    <div class="cover">
			
 
				+                        <img src="" data-src="./img/prize-one-pic.jpg" alt="">
			
 
				+                    </div>
			
 
				+                    <div class="name">一等奖</div>
			
 
				+                    <div class="tips">罗技G810 RGB炫光机械键盘</div>
			
 
				+                </div>
			
 
				+                <div class="img-wrap">
			
 
				+                    <div class="cover">
			
 
				+                        <img src="" data-src="./img/prize-two-pic.jpg" alt="">
			
 
				+                    </div>
			
 
				+                    <div class="name">二等奖</div>
			
 
				+                    <div class="tips">罗技G502竞技游戏鼠标</div>
			
 
				+                </div>
			
 
				+                <div class="img-wrap">
			
 
				+                    <div class="cover">
			
 
				+                        <img src="" data-src="./img/prize-three-pic_m.jpg" alt="">
			
 
				+                    </div>
			
 
				+                    <div class="name">三等奖</div>
			
 
				+                    <div class="tips">英雄联盟官方手办</div>
			
 
				+                </div>
			
 
				+                <div class="img-wrap">
			
 
				+                    <div class="cover">
			
 
				+                        <img src="" data-src="./img/prize-five-pic_m.jpg" alt="">
			
 
				+                    </div>
			
 
				+                    <div class="name">安慰奖</div>
			
 
				+                    <div class="tips">战马能量型维生素</div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            <!-- 竞猜规则 -->
			
 
				+            <div class="page-title" id="targetRule">
			
 
				+                <span class="red">竞猜</span><span class="blue">规则</span>
			
 
				+            </div>
			
 
				+            <div class="rule-wrap">
			
 
				+                <div class="rule-explain">
			
 
				+                     竞猜规则说明<span></span>
			
 
				+                </div>
			
 
				+                <div class="rule-item clearfix">
			
 
				+                    <div class="title">1、活动时间：</div>
			
 
				+                    <div class="text">5月31日—6月3日</div>
			
 
				+                </div>
			
 
				+                <div class="rule-item clearfix">
			
 
				+                    <div class="title">2、活动形式：</div>
			
 
				+                    <div class="text">玩家登录签到，进行竞猜预测比赛胜负，并参与更多竞猜答题等互动内容，可获得相应积分，根据积分排名可获得丰厚奖品</div>
			
 
				+                </div>
			
 
				+                <div class="rule-item clearfix">
			
 
				+                    <div class="title">3、活动规则：</div>
			
 
				+                    <div class="text">
			
 
				+                        <p>a. 每日签到：玩家每日首次登陆即为自动签到，每天签到积分自动增加100分；</p>
			
 
				+                        <p>b. 胜负竞猜：点击你支持的战队即可竞猜每场比赛的胜负，猜对则增加100分，猜错不得分；</p>
			
 
				+                        <p>c. 趣味答题：除每日比赛胜负竞猜外，用户还可以点击战队竞猜下方“更多竞猜”参与“趣味问答“来增加积分，每场比赛两道题目，答对一题加60分，答错不减分；</p>                     
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                <div class="rule-item clearfix">
			
 
				+                    <div class="title">4、奖励规则：</div>
			
 
				+                    <div class="text">活动结束后，按照获得积分排出最终名次。如有积分相同，则按照获得积分时间由早到晚排名，超过获奖名额者，则获得下一级别奖品。</div>
			
 
				+                    <div class="text">参与用户请及时填写个人收货信息，如在公布获奖名单三天后仍未填写，奖品将不会发放至未填写用户。</div>
			
 
				+                </div>
			
 
				+                <div class="rule-item clearfix">
			
 
				+                    <div class="title">5、奖品明细：</div>
			
 
				+                    <div class="text">
			
 
				+                        <p>一等奖：赛睿寒冰5游戏耳机 2个（总积分前1-2名）</p>
			
 
				+                        <p>二等奖：赛睿Rival310游戏鼠标 4个（总积分前3-6名）</p>
			
 
				+                        <p>三等奖：赛睿Rival100游戏鼠标 2个（总积分前7-8名）</p>
			
 
				+                        <p>以上奖品单个用户不可重复获得。</p>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            <!-- 获奖名单 -->
			
 
				+            <div id="targetReward" style="display: none;">
			
 
				+                <div class="page-title">
			
 
				+                    <span class="red">获奖</span><span class="blue">名单</span>
			
 
				+                </div>
			
 
				+                <div class="bonus-wrap clearfix">
			
 
				+                    <div class="level-box">
			
 
				+                        <div class="title">特等奖</div>
			
 
				+                        <div class="level-list special_level">
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    <div class="level-box">
			
 
				+                        <div class="title">一等奖</div>
			
 
				+                        <div class="level-list one_level">
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    <div class="level-box">
			
 
				+                        <div class="title">二等奖</div>
			
 
				+                        <div class="level-list two_level">
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                <div class="bonus-wrap clearfix" style="padding-top: 0;">
			
 
				+                    <div class="level-box">
			
 
				+                        <div class="title">三等奖</div>
			
 
				+                        <div class="level-list three_level">
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    <div class="level-box">
			
 
				+                        <div class="title">安慰奖</div>
			
 
				+                        <div class="level-list anwei_level">
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+     </div>
			
 
				+    </div>
			
 
				+    <!-- 中奖登记弹窗 -->
			
 
				+    <div class="modal-mask" id="prizeCashModal">
			
 
				+        <div class="pub-modal">
			
 
				+            <div class="title">中奖登记</div>
			
 
				+            <div>
			
 
				+                <div class="form-item clearfix">
			
 
				+                    <div class="form-title">真实姓名</div>
			
 
				+                    <div class="form-text">
			
 
				+                        <input type="text" class="regist-name">
			
 
				+                        <p class="tips">姓名不能为空</p>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                <div class="form-item clearfix">
			
 
				+                    <div class="form-title">联系电话</div>
			
 
				+                    <div class="form-text">
			
 
				+                        <input type="text" class="regist-phone">
			
 
				+                        <p class="tips">联系电话不能为空</p>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                <div class="form-item clearfix">
			
 
				+                    <div class="form-title">收货地址</div>
			
 
				+                    <div class="form-text">
			
 
				+                        <textarea class="regist-address"></textarea>
			
 
				+                        <p class="tips">收货地址不能为空</p>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                <div class="form-item clearfix">
			
 
				+                    <div class="form-title"> </div>
			
 
				+                    <div class="form-text">
			
 
				+                        <button class="submit-btn" id="regist-btn">提交</button>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+    <!-- 我的竞猜弹窗 -->
			
 
				+    <div class="modal-mask" id="myGueModal">
			
 
				+    </div>
			
 
				+
			
 
				+    <!-- 移动端底部 -->
			
 
				+    <div class="m-footer">
			
 
				+        <p class="link">
			
 
				+            <a href="javascript:">电脑版</a>
			
 
				+            <a href="javascript:">关于我们</a>
			
 
				+        </p>
			
 
				+        <p class="auth">Copyright © Duowan.com All Rights Reserved</p>
			
 
				+    </div>
			
 
				+    <script src="lib/mod.js"></script>
			
 
				+    <!-- <script src="./modules/page/"></script> -->
			
 
				+    <script id="dw-footer-without-gem" charset="utf-8" src="//pub.dwstatic.com/common/dwFoot/duowanFooter.js"></script><!--ignore-->
			
 
				+    <script>
			
 
				+        require('modules/page/pgimatch.js');
			
 
				+    </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>