官网修改

src/pages/case/index.vue

@@ -62,6 +62,10 @@
   max-width: 1140px;
   margin: 30px auto;
   text-align: center;
+  position: static;
+  position: sticky;
+  top: 66px;
+  background-color: #fff;
 }
 
 .nav-cases a {

src/pages/case/levelList/index.vue

@@ -6,7 +6,6 @@
         <h2>{{article.title}}</h2>
         <div class="del-content" v-html="article.content"></div>
 
-        
         <template v-if="
           article.pro_type === 0 ||
           (article.pro_type === 1 && !isMobile) ||

src/pages/information/media.vue

@@ -33,10 +33,12 @@ export default {
         [
           {img: 'http://video.cgaii.com/new4dage/images/images/new_m_1.jpg', text: '4DAGE (horizontal)'},
           {img: 'http://video.cgaii.com/new4dage/images/images/new_m_2.jpg', text: '4DAGE (vertikal)'},
-          {img: 'http://video.cgaii.com/new4dage/images/images/new_m_3.jpg', text: '4DKanKan (horizontal)'},
-          {img: 'http://video.cgaii.com/new4dage/images/images/new_m_4.jpg', text: '4DKanKan (vertikal)'},
           {img: 'http://video.cgaii.com/new4dage/images/images/new_m_5.jpg', text: 'CGAII (Chinese ver.)'},
           {img: 'http://video.cgaii.com/new4dage/images/images/new_m_6.jpg', text: 'CGAII (English ver.)'},
+          {img: 'http://video.cgaii.com/new4dage/images/images/new_m_3.jpg', text: '4DKanKan (horizontal)'},
+          {img: 'http://video.cgaii.com/new4dage/images/images/new_m_4.jpg', text: '4DKanKan (vertikal)'},
+          {img: 'http://video.cgaii.com/new4dage/images/images/new_m_8.jpg', text: '4DMuseum (horizontal)'},
+          {img: 'http://video.cgaii.com/new4dage/images/images/new_m_9.jpg', text: '4DMuseum (vertical)'},
           {img: 'http://video.cgaii.com/new4dage/images/images/new_m_7.jpg', text: '4DArt'}
         ],
         [

src/pages/layout/header.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="nav">
+  <div class="nav" @click.stop>
     <div class="nav-content">
       <router-link :to="{name: 'home'}" class="logo" ><img width="128" height="37" src="http://video.cgaii.com/new4dage/images/images/logo_en.svg" @click="showMenu = false"></router-link>
       <div class="menu" :style="[{height: height}, style]" ref="menu">
@@ -202,6 +202,10 @@ export default {
     }
   },
   mounted () {
+    document.documentElement.addEventListener('click', () => {
+      this.showMenu = false
+    })
+
     if (this.isMobile) {
       this.mxHeight = window.innerHeight - 65
     } else {

src/pages/planculture/index.vue

@@ -3,6 +3,7 @@
     <div class="banner">
       <div>
         <div class="info">
+          <img src="http://video.cgaii.com/new4dage/images/images/planindustry.png" alt="" srcset="">
           <h2>Digitales Museum</h2>
           <p>Mit automatisierter Modellierungstechnik und hohepräziser Maschine Visual können digitale Museen und Antiquität bewahrt werden.</p>
         </div>
@@ -21,7 +22,7 @@
             <p>WeChat Service</p>
           </div>
           <div>
-            <span><img src="http://video.cgaii.com/new4dage/images/images/cp_1_b.jpg" alt=""></span>
+            <span><img src="http://video.cgaii.com/new4dage/images/images/cp_1_b.png" alt=""></span>
             <p>4DMuseum</p>
           </div>
         </div>

src/pages/planculture/style.css

@@ -12,7 +12,7 @@
 }
 
 .banner {
-  padding: 60px 20px 76px;
+  padding: 40px 20px 76px;
   background-color: #e6e6e6;
 }
 
@@ -152,14 +152,24 @@
   line-height: 24px;
 }
 
-
+.banner .info img {
+  width: 50px;
+  margin-bottom: 30px;
+}
 
 @media screen and (min-width: 1040px) {
+  .banner {
+    padding-top: 60px;
+  }
   .info h2 {
     font-size: 30px;
     margin-bottom: 20px;
   }
 
+  .banner h2 {
+    font-size: 48px;
+  }
+  
   .ctrls > div {
     width: 25%;
   }

src/pages/planindustry/index.vue

@@ -2,6 +2,7 @@
   <div>
     <div class="banner">
       <div>
+        <img src="http://video.cgaii.com/new4dage/images/images/planlife.png"  class="logo" alt="">
         <div class="info">
           <h2>Digitale Industrie</h2>
           <p>Durch hochpräzise 3D-Bildverarbeitung und SLAM Technologie in allen Prozessen der Produktion wird die Effizienz und Produktqualität gesteigert und Kosten und Ressourcen gespart.</p>

src/pages/planindustry/style.css

@@ -11,7 +11,7 @@
 
 .banner {
   background-color: #e6e6e6;
-  padding: 60px 20px 0;
+  padding: 40px 20px 0;
 }
 
 .banner > div {
@@ -60,11 +60,26 @@
   width: 100%;
 }
 
+.banner img.logo {
+  display: inline-block;
+  width: 50px;
+  margin-bottom: 30px;
+  margin-top: 0;
+}
+
+
 @media screen and (min-width: 1040px) {
+  .banner {
+    padding-top: 60px;
+  }
   .info h2 {
     font-size: 30px;
   }
 
+  .banner h2 {
+    font-size: 48px;
+  }
+
   .info p {
     font-size: 16px;
     line-height: 30px;

src/pages/planlife/index.vue

@@ -2,6 +2,7 @@
   <div class="pl_layout">
     <div class="banner">
       <div>
+        <img src="http://video.cgaii.com/new4dage/images/images/planlife.png"  class="logo" alt="">
         <h1>Digital Life</h1>
         <p>Durch digitale 3D Technolgie und Big Data Analysen, soll der Alltag vereinfacht und effektiver gestaltbar gemacht werden.</p>
         <img src="http://video.cgaii.com/new4dage/images/images/lifeplan_banner.jpg">

src/pages/planlife/style.css

@@ -29,6 +29,11 @@
   width: 100%;
   margin-top: 30px;
 }
+.banner img.logo {
+  width: 50px;
+  margin-bottom: 20px;
+  margin-top: 0;
+}
 
 .content {
   max-width: 1490px;
@@ -153,7 +158,10 @@
 .lplan_4 .info {
   padding: 10px;
 }
-
+.banner .info img {
+  width: 50px;
+  margin-bottom: 30px;
+}
 
 @media screen and (min-width: 1040px) {
   .lplan_4 .info {
@@ -169,7 +177,7 @@
   }
 
   .banner h1 {
-    font-size: 30px;
+    font-size: 48px;
     margin-bottom: 30px;
   }
 

src/pages/product/index.vue

@@ -18,14 +18,14 @@
       <div>
         <div class="info">
           <h2 class="m-title notLink">
-            <a href="http://www.4dmodel.com/">4DModel </a>
+            <a href="http://www.4dmodel.com/" target="_blank">4DModel</a>
           </h2>
           <p class="m-content">
             4DModell ist eine Plattform zum Austausch von Resourcen und Informationen, die 3D Szenenerstellung ermöglicht, Onlineediting und –rendering, sowie als AR/VR Tool dient.
             Durch die leistungsstarke Cloud Computing Funktion können User ihre Fotos schnell in 3D Modelle umwandeln. Durch einen generierten QR Code können die Modelle betrachtet werden und auf sozialen Medien geteilt werden.
           </p>
         </div>
-        <a href="http://www.4dmodel.com/"><img src="http://video.cgaii.com/new4dage/images/images/case_5_img.png" alt=""></a>
+        <a href="http://www.4dmodel.com/" target="_blank"><img src="http://video.cgaii.com/new4dage/images/images/case_5_img.png" alt=""></a>
       </div>
     </div>
 
@@ -52,7 +52,8 @@
             Betrachte von zu Hause Kunstaustellungen mit der 720° Ansicht. Somit verpasst du nie eine zeitlich begrenzte Ausstellung.
           </p>
         </div>
-        <img src="http://video.cgaii.com/new4dage/images/images/case_4_img.jpg" alt="">
+        <img src="http://video.cgaii.com/new4dage/images/images/anima_swkz.jpg" alt="" v-if="isMobile">
+        <img src="http://video.cgaii.com/new4dage/images/images/case_4_img.jpg" alt="" v-else>
       </div>
     </div>
 
@@ -61,9 +62,10 @@
         <h2 class="m-title">4DWall</h2>
         <p class="m-content">4DWall ist ein intelligentes Displaysystem bestehend aus einem hochauflösendem Bildschirm, der von bis zu 100 Menschen betrachtet und bedient werden kann. Auf interaktive Weise erhält man Zugang zu der 3D-Modell Datenbank und kann Bilder, Videos und Audioaufnahmen abspielen. </p>
       </div>
-      <div class="iframe-layout full" :class="{mobile: isMobile}">
+      <div class="iframe-layout full" :class="{mobile: isMobile}" v-if="!isMobile">
         <iframe frameborder="0" :src="src"></iframe>
       </div>
+      <img src="http://video.cgaii.com/new4dage/images/images/cast_wsq.jpg" alt="" v-else style="padding: 0 10px">
     </div>
 
     <div class="case_6" id="swar"  @touchend.stop="active = false">
@@ -74,7 +76,7 @@
             4DAR erkennt 2D Muster und erstellt daraus 3D Bilder. Lass AR Animationen zum Leben erwecken und teile sie auf den sozialen Netzwerken, indem du das Muster mit unserer 4DAR App scannst.
             Man kann individuell gestaltete T-Shirts drucken lassen und diese als AR Code nutzen, ebenso können industrielle Ausstellungen oder Museen diese Technik nutzen.
           </p>
-          
+
           <a class="button srcode-a" :class="{active: active}" @touchend.stop="active = true">
             Scan und probiere es aus!
             <span>

src/pages/technology/style.css

@@ -22,7 +22,7 @@
 }
 
 .t_2_info img{
-  margin-bottom: 15px;
+  /* margin-bottom: 15px; */
 }
 
 .t_2_info h2 {