0604

src/assets/style/public.scss

@@ -66,13 +66,16 @@ html {
 }
 
 .b-title {
-  font-size: 48px;
-  font-weight: normal;
+  line-height: 66px;
+  font-size: 44px;
+  color: #343434;
+  font-weight: 700;
 }
-
-
 .b-label {
-  font-size: 30px;
+  line-height: 24px;
+  font-size: 16px;
+  color: #95979B;
+  font-weight: normal;
 }
 
 .banner {

src/assets/style/reset.scss

@@ -16,7 +16,7 @@ label,summary{cursor:default;}
 a,button{cursor:pointer;}
 h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
 del,ins,u,s,a,a:hover{text-decoration:none;}
-body,textarea,input,button,select,keygen,legend{font:14px/1.14 'Microsoft YaHei',Arial,\5b8b\4f53;outline:0;}
+body,textarea,input,button,select,keygen,legend{font:14px/1.14;outline:0;}
 body{background:#fff;}
 *{box-sizing: border-box}
 a{text-decoration: none;}

src/components/compare/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="overlap-con">
-    <div class="overlap" ref="overlap" :style="{width: width + 'px'}" >
+    <div class="overlap" ref="overlap">
       <video :src="back" autoplay muted loop></video>
       <div class="back-txt">{{lmask}}</div>
       <a class="slide" src="./slide.png" alt="" ref="slide" :style="{right:bwidth+'px'}">
@@ -14,7 +14,7 @@
         <div class="content-txt">{{rmask}}</div>
       </div>
     </div>
-    <div class="o-txt">
+    <div class="o-txt b-label">
       <div>{{ltxt}}</div>
       <div>{{rtxt}}</div>
     </div>
@@ -129,13 +129,14 @@ export default {
     width: 100%;
   }
   .overlap-con{
-    width: 1100px;
+    width: 1091px;
     margin: 0 auto;
   }
   .overlap {
     display: inline-block;
     position: relative;
     font-size: 0;
+    width: 100%;
   }
 
   .overlap > img {
@@ -195,9 +196,8 @@ export default {
   }
 
   .o-txt{
-    color: #6b6b6c;
+    color: rgba(255, 255, 255, 0.7);
     display: flex;
-    font-size: 24px;
     justify-content: space-around;
     margin-top: 15px;
   }

src/components/phone/index.vue

@@ -65,8 +65,6 @@ export default {
   max-width: 1210px;
   width: 100%;
   position: relative;
-  top: 3vw;
-  left: 3%;
 }
 
 .phone img {

src/page/about/index.vue

@@ -7,7 +7,11 @@
         <div class="introduce">
           <img :src="`${$cdn}images/fdage.png`" alt>
           <div class="intro-r">
-            <p v-for="(item,index) in langAbout.intro" :key="index">{{item}}</p>
+            <div class="item" v-for="(item,index) in langAbout.intro" :key="index">
+              <img src="@/assets/images/DFKI.png" v-if="item.img" alt="">
+              <div class="b-title">{{item.name}}</div>
+              <p class="b-label" v-for="(sub,i) in item.txt" :key="i" >{{sub}}</p>
+            </div>
           </div>
         </div>
       </div>

src/page/about/style.scss

@@ -23,7 +23,7 @@ $txt_delay:0.2s;
     .plate01 {
       text-align: center;
       width: 1240px;
-      margin: 155px auto 270px;
+      margin: 155px auto 100px;
       animation: fadeUp 0.5s ease-out 1 both;
       .about-logo {
         width: 360px;
@@ -36,21 +36,42 @@ $txt_delay:0.2s;
         >img{
           width: 360px;
           height: 230px;
-          margin-top: 6px;
+          margin-top: 16px;
           flex-shrink: 0;
         }
         .intro-r {
           text-align: justify;
           margin-left: 70px;
-          p {
-            font-size: 16px;
-            line-height: 30px;
-            font-weight: 300;
-            margin-bottom: 25px;
-          }
-          p:last-child {
-            margin-bottom: 0;
+          height: 460px;
+          overflow: auto;
+          padding-right: 10px;
+          .item{
+            &:not(:first-of-type){
+              margin-top: 48px;
+            }
+            img{
+              margin-top: 16px;
+              width: 188px;
+            }
+            .b-title{
+              font-size: 16px;
+              line-height: 48px;
+              color: rgba($color: #000, $alpha: 0.8);
+            }
+            .b-label{
+              font-size: 16px;
+            }
+            p {
+              font-size: 16px;
+              line-height: 24px;
+              color: #95979B;
+              margin-bottom: 18px;
+            }
+            p:last-child {
+              margin-bottom: 0;
+            }
           }
+        
         }
       }
     }
@@ -113,15 +134,16 @@ $txt_delay:0.2s;
 
           }
           h2 {
-            font-size: 18px;
+            font-size: 16px;
             font-weight: bold;
+            color: rgba($color: #000000, $alpha: 0.8);
             margin-bottom: 40px;
             opacity: 0;
             animation: fadeUp 0.5s ease-out 1 both 0s;
           }
           h3 {
             font-weight: 400;
-            font-size: 18px;
+            font-size: 16px;
             line-height: 30px;
             position: relative;
           }
@@ -139,7 +161,8 @@ $txt_delay:0.2s;
 
           p {
             font-size: 16px;
-            line-height: 30px;
+            color: #95979B;
+            line-height: 24px;
             font-weight: lighter;
           }
         }
@@ -165,7 +188,7 @@ $txt_delay:0.2s;
             opacity: 0;
           }
           h3 {
-            font-size: 18px;
+            font-size: 16px;
             line-height: 30px;
             font-weight: 500;
             position: relative;
@@ -193,8 +216,8 @@ $txt_delay:0.2s;
           }
           p {
             font-size: 16px;
-            line-height: 35px;
-            font-weight: 300;
+            color: #95979B;
+            line-height: 24px;
           }
         }
       }

src/page/binocular/index.vue

@@ -2,18 +2,19 @@
   <div class="product-layout" ref="productLayout">
     <div class="plate01 plate">
       <img class="pl01-bg" :src="`${$cdn}images/t-bg.png`" alt>
-      <div class="layout" :style="{marginLeft:(split - 170)+ 'px'}">
+      <div class="layout" :style="{marginLeft:(split - 180)+ 'px'}">
         <img class="product-img" :src="`${$cdn}images/t_product.png`" alt>
         <div class="info">
-          <h2>{{langBinocular.introduce.title[0]}}</h2>
-          <h2>{{langBinocular.introduce.title[1]}}</h2>
-          <!-- <p><span class="money">{{langBinocular.introduce.price[0]}}</span>{{langBinocular.introduce.price[1]}}</p> -->
-          <p v-for="(item,i) in langBinocular.introduce.dec" :key="i">{{item}}</p>
-          <!-- <p class="p2">{{langBinocular.introduce.dec[1]}}</p> -->
-          <!-- <div class="btns">
-            <a href="" class="button"><vcenter><img :src="`${$cdn}images/product_icon_arrow.png`"  alt=""></vcenter></a>
-            <a href="" class="button">{{langBinocular.introduce.btn}}</a>
-          </div>-->
+          <img class="txt-logo" :src="`${$cdn}images/lite.png`" alt>
+          <h2>RMB 3,999</h2>
+          <div class="lite-line"></div>
+          <p class="b-label">{{langBinocular.introduce.dec}}</p>
+          <div class="btns">
+            <a class="button"><vcenter>
+              <img :src="`${$cdn}images/product_icon_arrow.png`"  alt="">
+            </vcenter></a>
+            <a class="button">{{langBinocular.introduce.btn}}</a>
+          </div>
         </div>
       </div>
       <div class="benefit plate">
@@ -26,8 +27,8 @@
             :key="index"
           >
             <i class="iconfont" :class="benefit['fontImg']"></i>
-            <h3>{{benefit.title}}</h3>
-            <p v-html="benefit.content"></p>
+            <h3 class="b-label">{{benefit.title}}</h3>
+            <!-- <p v-html="benefit.content"></p> -->
           </div>
         </div>
       </div>
@@ -35,7 +36,7 @@
 
     <div class="plate02 plate">
       <div class="application">
-        <h2>{{langBinocular.app.title}}</h2>
+        <h2 class="b-title">{{langBinocular.app.title}}</h2>
         <h2>{{langBinocular.app.sub[0]}}</h2>
         <h3>{{langBinocular.app.sub[1]}}</h3>
         <div class="download-btn">
@@ -63,11 +64,11 @@
           <img class="fk_jiantou" :src="`${$cdn}images/fk_jiantou.png`" alt>
           <img class="fk_jiantou-2" :src="`${$cdn}images/fk_jiantou.png`" alt>
           <img class="fk_img" :src="`${$cdn}images/fk_img.png`" alt>
-          <div class="upload_txt">{{langBinocular.guide[1].sub[0]}}</div>
+          <div class="upload_txt b-label">{{langBinocular.guide[1].sub[0]}}</div>
           <img class="fk_shouji" :src="`${$cdn}images/fk_shouji.png`" alt>
-          <div class="shouji_txt">{{langBinocular.guide[1].sub[2]}}</div>
+          <div class="shouji_txt b-label">{{langBinocular.guide[1].sub[2]}}</div>
           <img class="fk_paishe" :src="`${$cdn}images/fk_paishe.png`" alt>
-          <div class="paishe_txt">{{langBinocular.guide[1].sub[1]}}</div>
+          <div class="paishe_txt b-label">{{langBinocular.guide[1].sub[1]}}</div>
           <img class="fk_upload" :src="`${$cdn}images/fk_upload.png`" alt>
           <img class="fk_mask" :src="`${$cdn}images/fk_mask.png`" alt>
           <img class="fk_mask_1" :src="`${$cdn}images/fk_mask.png`" alt>
@@ -75,6 +76,7 @@
         </div>
         <div class="fkkj-right">
           <h2 class="b-title">{{langBinocular.guide[1].title[0]}}</h2>
+          <p class="b-label">{{langBinocular.guide[1].title[1]}}</p>
         </div>
       </div>
       <div class="mxsc-layout plate">

src/page/binocular/style.scss

@@ -1,5 +1,12 @@
 $ani_delay: 0.4s;
 $txt_delay: 0.2s;
+.b-title{
+  margin-bottom: 21px;
+  color:  #fff;
+}
+.b-label{
+  color: rgba(255,255,255,0.7);
+}
 .product-layout {
   overflow: hidden;
   // background: url("https://4dscene.4dage.com/new4dkk/images/background.jpg") top -135px center no-repeat;
@@ -15,7 +22,7 @@ $txt_delay: 0.2s;
   vertical-align: middle;
   margin-top: 20px;
   &:first-child {
-    padding: 0 12px 0 11px;
+    padding: 0 12px;
     margin-right: 2px;
     margin-left: 4px;
   }
@@ -23,7 +30,7 @@ $txt_delay: 0.2s;
   &:last-child {
     line-height: 50px;
     color: #414141;
-    padding: 0 98px;
+    padding: 0 123px;
     font-size: 14px;
   }
 }
@@ -46,53 +53,40 @@ $txt_delay: 0.2s;
     overflow: hidden;
     position: relative;
     .product-img {
-      width: 170px;
+      width: 180px;
     }
     .info {
       display: inline-block;
-      margin: 40px 0 0 58px;
-      width: 800px;
+      margin: 60px 0 0 140px;
+      width: 360px;
       vertical-align: top;
+      .txt-logo{
+        height: auto;
+      }
 
       > h2 {
-        color: #fff;
+        color: rgba(255,255,255,0.7);
         font-size: 48px;
         animation: fadeUp 0.5s ease-out 1 both;
+        font-weight: 500;
+        margin-top: 21px;
       }
 
-      > h2:last-of-type {
-        letter-spacing: 0;
-        font-weight: 300;
-        margin: 6px 0 50px;
-        animation: fadeUp 0.5s ease-out 1 both $txt_delay;
-      }
-
+      
       > p {
-        color: #c4c3c3;
-        margin: 10px 0;
-        font-size: 18px;
-        letter-spacing: 0.9px;
+        line-height: 26px;
         position: relative;
         left: 4px;
         animation: fadeUp 0.5s ease-out 1 both $txt_delay * 2;
       }
-      .p1 {
-        letter-spacing: 0.4px;
-        margin: 10px 0 0;
+      .lite-line{
+        width: 100%;
+        height: 1px;
+        background: rgba($color: #ccc, $alpha: 0.4);
+        margin: 6px 0 6px 4px;
       }
-      .p2 {
-        margin: 6px 0 0px;
-        padding-bottom: 10px;
-        display: inline-block;
-      }
-
-      .money {
-        margin-top: 15px;
-        font-size: 36px;
-        color: #fff;
-        position: relative;
-        left: -8px;
-        letter-spacing: 1px;
+      .btns {
+        margin-top: 30px;
       }
     }
   }
@@ -103,13 +97,11 @@ $txt_delay: 0.2s;
     padding-top: 300px;
     margin: 0 auto;
     .b-title {
-      color: #ffffff;
       text-align: center;
-      font-size: 48px;
       margin: 8px 0 71px;
-      letter-spacing: 2.5px;
       line-height: 45px;
       animation: fadeUp 0.5s ease-out 1 both;
+      color: #fff;
       opacity: 0;
     }
     .char-con {
@@ -130,12 +122,10 @@ $txt_delay: 0.2s;
           color: #1fe4dc;
           font-size: 74px;
         }
-
+     
         h3 {
-          font-size: 20px;
-          color: #ffffff;
-          font-weight: 500;
           margin: 26px 0 5px;
+          color: rgba($color: #fff, $alpha: 0.7);
         }
 
         p {
@@ -162,7 +152,6 @@ $txt_delay: 0.2s;
     > h2 {
       color: #fff;
       font-size: 48px;
-      letter-spacing: -1px;
       margin-top: 6px;
       animation: fadeUp 0.5s ease-out 1 both;
       opacity: 0;
@@ -252,7 +241,8 @@ $txt_delay: 0.2s;
     color: #fff;
     text-align: center;
     .p3-phone{
-      width: 900px;
+      width: 1000px;
+      margin-top: 140px;
     }
     > img {
       width: 84%;
@@ -262,19 +252,15 @@ $txt_delay: 0.2s;
   }
 
   .b-title {
-    margin: 3px 9px 18px 0;
-    font-weight: normal;
     color: #fff;
     animation: fadeUp 0.5s ease-out 1 both;
     opacity: 0;
   }
 
   .b-label {
-    margin: 0 10px 82px 0px;
-    font-weight: 300;
-    font-size: 36px;
     animation: fadeUp 0.5s ease-out 1 both $txt_delay;
     opacity: 0;
+    margin: 0;
   }
 
   .fkkj-layout {
@@ -289,7 +275,7 @@ $txt_delay: 0.2s;
 
     .fkkj-imgcon {
       position: relative;
-      flex: 1;
+      flex: 3;
       color: #a4a3a4;
       font-size: 32px;
       > img {
@@ -338,9 +324,9 @@ $txt_delay: 0.2s;
         top: 10.7vw;
         left: 40.7vw;
         position: absolute;
-        letter-spacing: -1.9px;
-        width: 246px;
+        width: 13vw;
         opacity: 0;
+        text-align: center;
         animation: opc $ani_delay linear forwards $ani_delay * 5;
       }
       .fk_paishe {
@@ -353,8 +339,9 @@ $txt_delay: 0.2s;
       .paishe_txt {
         top: 10.8vw;
         left: 8.4vw;
+        width: 14vw;
+        text-align: center;
         position: absolute;
-        letter-spacing: -1.4px;
         animation: opc $ani_delay linear forwards $ani_delay;
         opacity: 0;
       }
@@ -369,7 +356,8 @@ $txt_delay: 0.2s;
         top: -7.2vw;
         left: 24.5vw;
         position: absolute;
-        letter-spacing: -1.9px;
+        width: 12vw;
+        text-align: center;
         opacity: 0;
         animation: opc $ani_delay linear forwards $ani_delay * 3;
       }
@@ -397,15 +385,16 @@ $txt_delay: 0.2s;
       }
     }
     .fkkj-right {
-      flex: 1;
-      text-align: center;
+      flex: 2;
+      text-align: left;
       position: relative;
       top: -6.2vw;
-      left: -6vw;
-
       .b-title {
-        margin: 0 0 0 120px;
-        letter-spacing: 2.4px;
+        opacity: 0;
+        max-width: 600px;
+      }
+      .b-label {
+        margin: 0;
         opacity: 0;
       }
     }
@@ -419,20 +408,19 @@ $txt_delay: 0.2s;
     height: 600px;
     .mxsc-left {
       color: #fff;
-      text-align: right;
+      text-align: left;
       flex: 1;
       padding-right: 7.8vw;
       position: relative;
-      left: -3vw;
+      left: 18vw;
       top: -5.4vw;
       .b-title {
-        margin: 10px 0 17px;
-        letter-spacing: 2px;
+        max-width: 600px;
         animation: fadeUp 0.5s ease-out 1 both;
       }
       .b-label {
+        max-width: 600px;
         margin: 0;
-        letter-spacing: -1.5px;
         animation: fadeUp 0.5s ease-out 1 both $txt_delay;
       }
     }
@@ -485,12 +473,9 @@ $txt_delay: 0.2s;
       color: #fff;
       position: relative;
       top: -9.7vw;
-      left: 4.9vw;
-      .b-title {
-        letter-spacing: 2px;
-      }
-      .b-label {
-        letter-spacing: 1.1px;
+      left: 7.9vw;
+      .b-title,.b-label{
+        max-width: 650px;
       }
     }
   }
@@ -528,15 +513,11 @@ $txt_delay: 0.2s;
 
   .b-title {
     animation: fadeUp 0.5s ease-out 1 both;
-    line-height: 60px;
-    font-size: 48px;
     opacity: 0;
   }
 
   .b-label {
     font-weight: 300;
-    line-height: 60px;
-    font-size: 36px;
     animation: fadeUp 0.5s ease-out 1 both $txt_delay;
     opacity: 0;
   }
@@ -587,9 +568,6 @@ $txt_delay: 0.2s;
       .s-title {
         margin-bottom: 11px;
       }
-      .s-value {
-        letter-spacing: 1px;
-      }
       .s-params1 {
         display: flex;
         justify-content: space-around;
@@ -629,9 +607,7 @@ $txt_delay: 0.2s;
   .b-title {
     color: #fff;
     text-align: center;
-    font-size: 42px;
     margin-bottom: 100px;
-    letter-spacing: -1px;
     animation: fadeUp 0.5s ease-out 1 both;
     opacity: 0;
   }
@@ -711,6 +687,9 @@ $txt_delay: 0.2s;
   .b-title {
     animation: fadeDown 0.5s ease-out 1 both !important;
   }
+  .b-label {
+    animation: fadeDown 0.5s ease-out 1 both !important;
+  }
 }
 
 .hide6 {

src/page/eight/index.vue

@@ -2,17 +2,17 @@
   <div class="product-layout" ref="productLayout">
     <div class="plate01 plate">
       <img class="pl01-bg" :src="`${$cdn}images/eight-bg.png`" alt="">
-      <div class="layout" :style="{marginLeft:(split - 170)+ 'px'}">
+      <div class="layout" :style="{marginLeft:(split - 180)+ 'px'}">
         <img class="product-img" :src="`${$cdn}images/banner_pro.png`" alt="">
         <div class="info">
-          <h2>{{langEight.introduce.title[0]}}</h2>
-          <h2>{{langEight.introduce.title[1]}}</h2>
-          <!-- <p><span class="money">{{langEight.introduce.price[0]}}</span>{{langEight.introduce.price[1]}}</p> -->
-          <p v-for="(item,i) in langEight.introduce.dec" :key="i">{{item}}</p>
-          <!-- <div class="btns" @click="$router.push({name:'purchase'})">
+          <img class="txt-logo" :src="`${$cdn}images/pro.png`" alt>
+          <h2>RMB 6,999</h2>
+          <div class="lite-line"></div>
+          <p class="b-label">{{langEight.introduce.dec}}</p>
+          <div class="btns" @click="$router.push({name:'purchase'})">
             <a class="button"><vcenter><img :src="`${$cdn}images/product_icon_arrow.png`" alt=""></vcenter></a>
             <a href="" class="button">{{langEight.introduce.btn}}</a>
-          </div> -->
+          </div>
         </div>
       </div>
       <div class="benefit plate">
@@ -20,7 +20,7 @@
         <div class="char-con">
           <div :style="{'animation-delay': `${index*0.2}s`}" class="item" v-for="(benefit, index) in langEight.introduce.benefitGroup" :key="index">
             <i class="iconfont" :class="benefit['fontImg']"></i>
-            <h3>{{benefit.title}}</h3>
+            <h3 class="b-label">{{benefit.title}}</h3>
           </div>
         </div>
       </div>
@@ -44,13 +44,11 @@
     </div>
 
     <div class="plate03 plate">
-      <div class="info">
-        <h2 class="b-title">{{langEight.definition.title}}</h2>
-      </div>
       <div class="front">
         <img class="front-img" :src="`${$cdn}images/camera1.png`" alt="">
         <div class="f-right">
-          <p v-for="(item,i) in langEight.definition.top.dec" :key="i">{{item}}</p>
+          <h2 class="b-title">{{langEight.definition.title}}</h2>
+          <p class="b-label" v-for="(item,i) in langEight.definition.top.dec" :key="i">{{item}}</p>
 
           <!-- <div class="f-params">
             <span v-for="(item,i) in langEight.definition.top.params" :key="i">
@@ -62,32 +60,17 @@
             <video src="@/assets/video/fenbianlv.mp4" autoplay muted loop></video>
             <!-- <iframe src="https://www.4dage.com/overview/webvr/tour.html" frameborder="0"></iframe> -->
           </div>
-          <p class="f-dec">{{langEight.definition.top.intro}}</p>
+          <p class="f-dec b-label">{{langEight.definition.top.intro}}</p>
         </div>
       </div>
-      <div class="bottom plate">
-        <img class="front-img" :src="`${$cdn}images/camera2.png`" alt="">
-        <div class="f-right">
-          <div class="b-title">{{langEight.definition.bottom.title}}</div>
-          <p v-for="(item,i) in langEight.definition.bottom.dec" :key="i">{{item}}</p>
 
-          <div class="f-params">
-            <div class="f-div"><img :src="`${$cdn}images/camera4.png`" alt=""></div>
-            <div class="f-div"><img :src="`${$cdn}images/camera3.png`" alt=""></div>
-            <!-- <div class="f-item" v-for="(item,i) in langEight.definition.bottom.params2" :key="i">
-              <img :src="item.icon" alt="">
-              <span>{{item.txt}}</span>
-            </div> -->
-          </div>
-        </div>
-      </div>
     </div>
 
     <div class="plate04 plate">
-      <div class="info">
+      <!-- <div class="info">
         <h2 class="b-title">{{langEight.hardware[0].title[0]}}</h2>
         <p class="b-label">{{langEight.hardware[0].title[1]}}</p>
-      </div>
+      </div> -->
       <div class="hsxp-layout">
         <div class="hsxp-imgcon">
           <video class="hsxp-video" src="@/assets/video/xinpian.mp4" autoplay muted loop></video>
@@ -141,7 +124,7 @@
       <div class="qingxidu ceju" ref="linecanvas">
         <div class="b-title">{{langEight.feature.ranging.title[0]}}</div>
         <Linecanvas :start='runLineCanvas' class="line-canvas" />
-        <div class="line-txt">
+        <div class="line-txt b-label">
             <span>{{runLineCanvas?langEight.feature.ranging.sub:langEight.feature.ranging.hide}}</span>
             <img @click="runLineCanvas=!runLineCanvas" :src="runLineCanvas?`${$cdn}images/canvas-right.png`:`${$cdn}images/canvas-left.png`" alt="">
             <!-- <span v-show="!runLineCanvas" @click="runLineCanvas=!runLineCanvas" class="line-circle"></span> -->
@@ -154,29 +137,17 @@
         :ltxt="langEight.feature.model.case2.lTxt"
         :rtxt="langEight.feature.model.case2.rTxt" />
       </div>
-
-      <!-- <div class="qingxidu plate num-lighting" ref="number">
-        <div class="b-title">{{langEight.feature.endurance.title}}</div>
-        <div class="qxd-4">
-          <div class="qxd-4-battery">
-            <div class='b-l'>
-              <img class="bl-img" :src="`${$cdn}images/battery-left.png`" alt="">
-              <div class="bl-txt"><span>LITE</span>2H</div>
-            </div>
-            <div class="lighting"></div>
-            <div class="br-txt">
-              <span>PRO</span><number class="br-num"
-              :type="numArr.type"
-              :startCount="numArr.start"
-              :pageProduct="true"
-              :count="numArr.end"/>H
-            </div>
-          </div>
-        </div>
-      </div> -->
     </div>
 
     <div class="plate06">
+      <div class="info plate">
+        <h2 class="b-title">{{langEight.technology.title}}</h2>
+        <p class="b-label">{{langEight.technology.dec}}</p>
+        <div class="boom"></div>
+      </div>
+    </div>
+
+    <div class="plate07">
       <div class="info">
         <div class="b-title">{{langEight.parmas.name}}</div>
         <img :src="`${$cdn}images/product_img_content_6.png`" alt="">

src/page/eight/style.scss

@@ -3,6 +3,13 @@ $txt_delay: 0.2s;
 $battery_time: 0.3s;
 $num_time: 0.6s;
 
+.b-title{
+  color:  #fff;
+  margin-bottom: 21px;
+}
+.b-label{
+  color: rgba(255,255,255,0.7);
+}
 .product-layout {
   overflow: hidden;
   // background: url("~@/assets/images/background.jpg") top -135px center no-repeat;
@@ -18,7 +25,7 @@ $num_time: 0.6s;
   vertical-align: middle;
   margin-top: 20px;
   &:first-child {
-    padding: 0 12px 0 11px;
+    padding: 0 12px;
     margin-right: 2px;
     margin-left: 4px;
   }
@@ -26,7 +33,7 @@ $num_time: 0.6s;
   &:last-child {
     line-height: 50px;
     color: #414141;
-    padding: 0 98px;
+    padding: 0 123px;
     font-size: 14px;
   }
 }
@@ -51,55 +58,39 @@ $num_time: 0.6s;
     overflow: hidden;
     position: relative;
     .product-img{
-      width: 170px;
+      width: 180px;
     }
     .info {
       display: inline-block;
-      margin:40px 0 0 58px;
-      width: 650px;
+      margin: 60px 0 0 140px;
+      width: 360px;
       vertical-align: top;
-      >h2 {
-        color: #fff;
-        font-size: 48px;
-        animation: fadeUp 0.5s ease-out 1 both;
+      .txt-logo{
+        height: auto;
       }
 
-      >h2:last-of-type{
-        letter-spacing: 0;
-        font-weight: 100;
-        margin: 6px 0 50px;
-        animation: fadeUp 0.5s ease-out 1 both $txt_delay;
+      >h2 {
+        color: rgba(255,255,255,0.7);
         font-size: 48px;
+        animation: fadeUp 0.5s ease-out 1 both;
+        font-weight: 500;
+        margin-top: 21px;
       }
    
       >p {
-        color: #c4c3c3;
-        margin: 10px 0 ;
-        font-size: 18px;
-        letter-spacing: 0.9px;
+        line-height: 26px;
         position: relative;
         left: 4px;
-        animation: fadeUp 0.5s ease-out 1 both $txt_delay*2;
-
-      }
-      .p1{
-        letter-spacing: 0.4px;
-        margin: 10px 0 0;
-
+        animation: fadeUp 0.5s ease-out 1 both $txt_delay * 2;
       }
-      .p2{
-        margin: 6px 0 0px;
-        padding-bottom: 10px;
-        display: inline-block;
+      .lite-line{
+        width: 100%;
+        height: 1px;
+        background: rgba($color: #ccc, $alpha: 0.4);
+        margin: 6px 0 6px 0;
       }
-
-      .money {
-        margin-top: 15px;
-        font-size: 36px;
-        color: #fff;
-        position: relative;
-        left: -8px;
-        letter-spacing: 1px;
+      .btns {
+        margin-top: 30px;
       }
     }
     
@@ -114,9 +105,7 @@ $num_time: 0.6s;
       .b-title {
       color: #ffffff;
       text-align: center;
-      font-size: 48px;
       margin:8px 0 71px;
-      letter-spacing: 2.5px;
       line-height: 45px;
       animation: fadeUp 0.5s ease-out 1 both;
       opacity: 0;
@@ -126,10 +115,11 @@ $num_time: 0.6s;
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
+      max-width: 1120px;
+      margin: 0 auto 80px;
       .item {
         float: left;
-        width: 300px;
-        margin-bottom: 80px;
+        width: 20%;
         text-align: center;
         animation: fadeUp 0.5s ease-out 1 both;
         opacity: 0;
@@ -144,10 +134,9 @@ $num_time: 0.6s;
         }
         
         h3 {
-          font-size: 20px;
-          color: #ffffff;
+          color: rgba($color: #fff, $alpha: 0.7);
           font-weight: 500;
-          margin:26px 0 5px;
+          margin:20px 0 80px;
         }
   
         p {
@@ -177,7 +166,6 @@ $num_time: 0.6s;
     >h2 {
       color: #fff;
       font-size: 48px;
-      letter-spacing: -1px;
       margin-top: 6px;
       animation: fadeUp 0.5s ease-out 1 both;
       opacity: 0;
@@ -251,56 +239,41 @@ $num_time: 0.6s;
 .plate03 {
   overflow: hidden;
   position: relative;
-  padding: 140px 0 0;
+  padding: 140px 0 150px;
   background: hsl(0, 0%, 10%); 
   .b-title {
-    margin: 3px 9px 18px 0;
-    font-weight: normal;
     color: #fff;
     animation: fadeUp 0.5s ease-out 1 both;
     opacity: 0;
-    line-height: 1.2;
   }
 
   .b-label {
-    margin:0 10px 82px 0px;
     font-weight: 300;
-    font-size: 36px;
     animation: fadeUp 0.5s ease-out 1 both $txt_delay;
     opacity: 0;
   }
 
-  .info {
-    width: 1200px;
-    margin-left: 424px ;
-    color: #fff;
-    text-align: center;
-  }
-
   .front{
     display: flex;
     justify-content: space-around;
     align-items: flex-start;
-    margin: 138px 0 0 175px;
-    width: 1260px;
+    margin: 0 0 0 175px;
     .front-img{
-      width: 550px;
+      width: 593px;
+      margin-top: 70px;
       flex-shrink: 0;
       animation: fadeUp 0.5s ease-out 1 both $txt_delay;
     }
     .f-right{
       flex: 3;
       margin-left: 52px;
+      .b-title{
+        margin-bottom: 21px;
+        max-width: 800px;
+      }
       p{
-        width: 600px;
-        color: #fff;
-        font-size: 18px;
-        line-height: 36px;
-        font-weight: 400;
+        max-width: 800px;
         animation: fadeUp 0.5s ease-out 1 both $txt_delay;
-        &:last-of-type{
-          line-height: 48px;
-        }
       }
       .f-params{
         display: flex;
@@ -331,98 +304,28 @@ $num_time: 0.6s;
         margin-top: 83px;
         animation: fadeUp 0.5s ease-out 1 both $txt_delay*3;
         width: 530px;
-        // height: 265px;
         overflow: hidden;
-        // iframe,video{
-        //   width: 100%;
-        //   height: 100%;
-        // }
         video{
           width: 100%;
           border-radius: 5px;
         }
       }
       .f-dec{
-        color: #ccc;
-        font-size: 12px;
-        letter-spacing: 0.5px;
+        margin-top: 36px;
         animation: fadeUp 0.5s ease-out 1 both $txt_delay*4;
-        margin-top: 12px;
-      }
-    
-      .f-intro{
-        margin-top: 10px;
-        p{
-          font-size: 14px;
-          line-height: 20px;
-          color: #ccc;
-          animation: fadeUp 0.5s ease-out 1 both $txt_delay*4;
-        }
-      }
-    }
-  }
-
-  .bottom{
-    display: flex;
-    justify-content: space-around;
-    align-items: flex-start;
-    margin: 202px 0 145px 175px;
-    width: 1260px;
-    .front-img{
-      width: 550px;
-      flex-shrink: 0;
-      animation: fadeUp 0.5s ease-out 1 both;
-    }
-    .f-right{
-      flex: 3;
-      margin-left: 52px;
-      .b-title{
-        font-size: 36px;
-        margin-bottom: 80px;
-        animation: fadeUp 0.5s ease-out 1 both;
-      }
-      p{
-        width: 600px;
-        color: #fff;
-        font-size: 16px;
-        line-height: 36px;
-        font-weight: 400;
-        animation: fadeUp 0.5s ease-out 1 both $txt_delay;
-        &:last-of-type{
-          line-height: 60px;
-        }
-      }
-      .f-params{
-        display: flex;
-        flex-wrap: wrap;
-        margin-top: 175px;
-        .f-div{
-          text-align: center;
-          position: relative;
-          animation: fadeUp 0.5s ease-out 1 both $txt_delay*2;
-          &:first-of-type{
-            margin-right: 93px;
-          }
-        }
       }
     }
   }
-
 }
 
 .plate04{
   background:#000;
-  padding: 175px 0 130px;
+  padding: 1px 0 130px;
   .info {
     // width: 1200px;
-    position: relative;
-    left: -22px;
     margin: 0 auto;
     color: #fff;
     text-align: center;
-    .b-title {
-      font-size: 48px;
-    }
   }
 
   .hsxp-layout{
@@ -482,38 +385,6 @@ $num_time: 0.6s;
     }
   }
 
-  // .cgq-layout{
-  //   height: 0;
-  //   overflow: hidden;
-  //   display: flex;
-  //   justify-content: space-between;
-  //   align-items: center;
-  //   margin: 0 auto;
-  //   .cgq-imgcon{
-  //     animation: fadeUp 0.5s ease-out 1 both;
-  //     div{
-  //       width: 34vw;
-  //       height: 20vw;
-  //       margin-left: 280px;
-  //       background-image: url('~@/assets/images/sony.png');
-  //       background-repeat: no-repeat;
-  //       background-position: 0% 0px;
-  //       background-size: cover;
-  //       overflow-x: hidden;
-  //       will-change: background;
-  //       animation: xinpian-open 0.2s steps(5) forwards $ani_delay;
-  //     }
-  //   }
-  //   .cgq-right{
-  //     color: #fff;
-  //     position: relative;
-  //     right: 340px;
-  //     animation: fadeUp 0.5s ease-out 1 both;
-  //     text-align: right;
-  //   }
-    
-  // }
-
   .jzxj-layout{
     display: flex;
     justify-content: space-between;
@@ -526,29 +397,23 @@ $num_time: 0.6s;
     }
     .jzxj-imgcon{
       animation: fadeUp 0.5s ease-out 1 both;
-      margin-right: 305px;
+      margin-right: 235px;
     }
   }
 
   .b-title {
-    line-height: 60px;
     animation: fadeUp 0.5s ease-out 1 both ;
     opacity: 0;
-    font-size: 36px;
   }
 
   .b-label {
-    line-height: 60px;
-    font-weight: lighter;
-    font-size: 36px;
     animation: fadeUp 0.5s ease-out 1 both $txt_delay;
     opacity: 0;
-    letter-spacing: 1px;
   }
 }
 
 .plate05{
-  padding: 200px 0 0;
+  padding: 168px 0 0;
   background: url('~@/assets/images/lin-bg.png') top center no-repeat;
   background-size: 100% auto;
   // .num-lighting{
@@ -560,23 +425,16 @@ $num_time: 0.6s;
   // }
   .b-title{
     color: #fff;
-    font-size: 36px;
-    font-weight: 400;
-    margin-bottom: 90px;
+    margin-bottom: 78px;
   }
   .b-label{
     color: #fff;
-    font-size: 36px;
-    font-weight: 300;
     margin-top: 20px;
   }
  
   .qingxidu{
     text-align: center;
-    padding: 0 0 200px;
-    .c-qxd{
-    }
-
+    padding: 0 0 150px;
     .line-canvas{
       margin-top: 40px;
     }
@@ -587,17 +445,14 @@ $num_time: 0.6s;
       span{
         position: absolute;
         right: calc(50% + 50px);
-        top: 48%;
+        top: 50%;
         transform: translate(0,-50%);
-        font-size: 24px;
-        color: #6b6b6c;
         display: inline-block;
         vertical-align: middle;
-        margin-right: 10px;
       }
       img{
         cursor: pointer;
-        width: 80px;
+        width: 60px;
         position: relative;
         vertical-align: middle;
       }
@@ -724,11 +579,53 @@ $num_time: 0.6s;
 
   }
   .ceju{
-    padding: 0 0 160px;
+    padding: 0 0 120px;
   }
 }
 
 .plate06 {
+  background: linear-gradient(90deg, #000000 20%, #12141a 50%, #000000 90%);
+  background-color: #151515;
+  padding-top: 175px;
+
+  .info {
+    // width: 1200px;
+    position: relative;
+    left: -22px;
+    margin: 0 auto;
+    color: #fff;
+    text-align: center;
+    padding-bottom: 100px;
+    .boom {
+      width: 75vw;
+      margin: 0 auto;
+      height: 42vw;
+      background-image: url("https://4dscene.4dage.com/new4dkk/images/boomImg.png");
+      background-repeat: no-repeat;
+      background-position: 0% 0px;
+      background-size: cover;
+      overflow-x: hidden;
+      will-change: background;
+      animation: boom-open 0.6s steps(37) forwards;
+    }
+    img {
+      height: 42vw;
+    }
+  }
+
+  .b-title {
+    animation: fadeUp 0.5s ease-out 1 both;
+    opacity: 0;
+  }
+
+  .b-label {
+    font-weight: 300;
+    animation: fadeUp 0.5s ease-out 1 both $txt_delay;
+    opacity: 0;
+  }
+}
+
+.plate07 {
   padding: 172px 0 120px;
   background-color: #151515;
   .info {
@@ -773,9 +670,6 @@ $num_time: 0.6s;
       .s-title{
         margin-bottom: 11px;
       }
-      .s-value{
-        letter-spacing: 1px;
-      }
       .s-params1{
         display: flex;
         justify-content: space-around;
@@ -814,11 +708,8 @@ $num_time: 0.6s;
   }
   
   .b-title{
-    color: #fff;
     text-align: center;
-    font-size: 42px;
     margin-bottom: 100px;
-    letter-spacing: -1px;
     animation: fadeUp 0.5s ease-out 1 both;
     opacity: 0;    
   }
@@ -870,24 +761,21 @@ $num_time: 0.6s;
 
 
 .hide5{
-  .b-title,.b-label,p,.front-img,.f-div,.f-item{
+  .b-title,.b-label,p,.front-img,.f-div,.f-item,.hsxp-imgcon{
     animation: fadeDown 0.5s ease-out 1 both!important;
   }
 }
 
-.hide6{
-  .b-title,.b-label,.hsxp-imgcon{
-    animation: fadeDown 0.5s ease-out 1 both!important;
-  }
-}
-
-.hide7,.hide8,.hide9{
+.hide6,.hide7,.hide8,.hide9{
   .b-title,.b-label,.qmjt-imgcon,.qmjt-imgcon,.cgq-imgcon,.jzxj-imgcon{
     animation: fadeDown 0.5s ease-out 1 both!important;
   }
   .cgq-imgcon div{
     animation: xinpian-close 0.2s steps(5) forwards $ani_delay!important;
   }
+  .boom {
+    animation: boom-close 0.6s steps(37) forwards !important;
+  }
 }
 
 .hide10{
@@ -1063,6 +951,24 @@ $num_time: 0.6s;
   }
 }
 
+@keyframes boom-open {
+  0% {
+    background-position: 0 0px;
+  }
+  100% {
+    background-position: 100% 0px;
+  }
+}
+
+@keyframes boom-close {
+  0% {
+    background-position: 100% 0px;
+  }
+  100% {
+    background-position: 0 0px;
+  }
+}
+
 @media screen and (max-width: 1600px) {
   .product-layout{
     .plate01{
@@ -1137,6 +1043,7 @@ $num_time: 0.6s;
         }
       }
     }
+
     .plate06{
       .info{
         img{

src/page/home2/index.vue

@@ -33,7 +33,7 @@
           <img class="img-pro" :src="`${$cdn}images/banner_pro.png`" >
           <div class="info">
             <h2>{{langHome.booking.name}}</h2>
-            <h3>{{langHome.booking.dec}}</h3>
+            <h3 >{{langHome.booking.dec}}</h3>
             <p>{{langHome.booking.price}}</p>
             <div class="btns">
               <div class="button"><vcenter><img :src="`${$cdn}images/product_icon_arrow.png`" alt=""></vcenter></div>
@@ -44,7 +44,7 @@
       </div>
       <div class="hxjs">
         <h2 class="b-title">{{langHome.tech.title}}</h2>
-        <p class="b-label">{{langHome.tech.dec}}</p>
+        <p class="b-label" v-for="(item,i) in langHome.tech.dec" :key="i">{{item}}</p>
         <div>
           <figure>
             <img :src="`${$cdn}images/hxjs_1.png`" alt="">
@@ -70,11 +70,8 @@
             </video>
           </div>
           <div class="content">
-            <h2 class="b-title">
-              {{langHome.tech.location.title}}
-              <span class="b-label">{{langHome.tech.location.dec}}</span>
-            </h2>
-            <p></p>
+            <h2 class="b-title">{{langHome.tech.location.title}}</h2>
+            <span class="b-label" v-html="langHome.tech.location.dec"></span>
           </div>
         </div>
       </div>
@@ -87,11 +84,8 @@
               <!-- <iframe src="http://www.4dmodel.com/SuperTwo/index.html?m=158&version=one" frameborder="0"></iframe> -->
           </div>
           <div class="content">
-            <h2 class="b-title">
-              {{langHome.tech.modeling.title}}
-              <span  class="b-label">{{langHome.tech.modeling.dec}}</span>
-            </h2>
-            <p></p>
+            <h2 class="b-title">{{langHome.tech.modeling.title}}</h2>
+            <span v-html="langHome.tech.modeling.dec" class="b-label"></span>
           </div>
         </div>
       </div>
@@ -103,11 +97,8 @@
         <video  :src="`${$cdn}video/item_3.mp4`" autoplay muted loop></video>
         </div>
         <div class="content">
-          <h2 class="b-title">
-            {{langHome.tech.exhibition.title}}
-            <span class="b-label">{{langHome.tech.exhibition.dec}}</span>
-          </h2>
-          <p></p>
+          <h2 class="b-title">{{langHome.tech.exhibition.title}}</h2>
+          <span v-html="langHome.tech.exhibition.dec" class="b-label"></span>
         </div>
       </div>
 

src/page/home2/style.scss

@@ -1,18 +1,7 @@
 .b-title {
-  line-height: 66px;
-  font-size: 44px;
-  color: #343434;
-  font-weight: 700;
-}
-.b-label {
-  line-height: 24px;
-  font-size: 16px;
-  color: #717171;
-  font-weight: normal;
-  margin-top: 10px;
+  margin-bottom: 21px;
 }
 
-
 .btns .button {
   height: 50px;
   padding-top: 0;
@@ -215,10 +204,12 @@
     padding-top: 90px;
     text-align: center;
     color: #151515;
-
+    .b-title{
+      margin-bottom: 21px;
+    }
     p {
-      width: 720px;
-      margin: 20px auto;
+      width: 1285px;
+      margin: 0 auto;
     }
 
     div {
@@ -273,14 +264,8 @@
       color: #151515;
       flex: 2;
 
-      h2 {
-        margin-bottom: 30px;
+      .b-title {
         max-width: 460px;
-        span {
-          display: block;
-          margin-bottom: 15px;
-          font-weight: normal;
-        }
       }
 
       p {
@@ -294,8 +279,6 @@
   .item-1 {
     padding-top: 134px;
     margin: 0 15%;
-
-
     .content {
       margin-left: 5%;
       margin-right: 5%;
@@ -365,10 +348,6 @@
     text-align: center;
     position: relative;
     z-index: 2;
-
-    h2 {
-      margin-bottom: 10px;
-    }
   }
 
   .content-layout {

src/page/layout/header/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="header-layout">
-    <div  class="logo-layout">
+    <div class="logo-layout">
       <router-link :to="{name: 'home'}" class="logo">
         <vcenter>
-          <img :src="`${$cdn}images/logo.png`" alt="">
+          <img :src="`${$cdn}images/logo.png`" alt>
         </vcenter>
       </router-link>
     </div>
@@ -11,27 +11,29 @@
       <div class="lang">
         <vcenter>
           <a :class="{active: language === 'en'}" @click="$store.commit('change_language', 'en')">En</a>
-          <a :class="{active: language === 'cn'}" @click="$store.commit('change_language', 'cn')">Cn</a>
+          <a :class="{active: language === '中'}" @click="$store.commit('change_language', '中')">中</a>
         </vcenter>
       </div>
-      <div class="list" ref="list" @mouseleave="hoverCp !== 'isearch' && hoverCp !== 'ilogin' && hideCp()">
+      <div
+        class="list"
+        ref="list"
+        @mouseleave="hoverCp !== 'isearch' && hoverCp !== 'ilogin' && hideCp()"
+      >
         <a
           v-for="nav in langHeader.navs"
           :key="nav.text"
           @mouseenter="hoverCp !== 'isearch' && hoverCp !== 'ilogin' && showCp(nav.cp, 135)"
           @click="clickHandle(nav)"
-          :class="{active: hoverCp === nav.cp}">
-          {{nav.text}}
-        </a>
+          :class="{active: hoverCp === nav.cp}"
+        >{{nav.text}}</a>
 
         <div class="child-layout" :style="{maxHeight: height + 'px'}" ref="navLayout">
           <i class="silp" :style="{left: split + 'px',height:hoverCp === 'isearch'?'auto':'100%'}"></i>
-          <slot :cp="hoverCp" />
+          <slot :cp="hoverCp"/>
         </div>
-
       </div>
     </div>
-    <div  class="ctrl">
+    <div class="ctrl">
       <a class="search" @click="searchHandle" :class="{active: hoverCp === 'isearch'}">
         <vcenter>
           <i class="iconfont icon-sousuo open"></i>
@@ -39,18 +41,18 @@
         </vcenter>
       </a>
       <!-- <img class="avatar" src="@/assets/images/product_img_content_3.jpg" alt> -->
-      <a class="user" v-if="!isLogin" @click="loginHandle" >
+      <a class="user" v-if="!isLogin" @click="loginHandle">
         <vcenter>
           <i class="iconfont icon-geren"></i>
           <span>{{langHeader.login}}</span>
         </vcenter>
       </a>
-      <a class="user cart" v-else >
+      <a class="user cart" v-else>
         <vcenter>
-          <div class="cart-user" @click="$router.push({name:'manage'})" >
+          <div class="cart-user" @click="$router.push({name:'manage'})">
             <i class="iconfont icon-geren"></i>
           </div>
-          <div class="cart-icon"  @click="loginHandle" >
+          <div class="cart-icon" @click="loginHandle">
             <i class="iconfont icon-cart"></i>
             <sup>2</sup>
             <span>{{langHeader.cart}}</span>
@@ -62,7 +64,7 @@
 </template>
 
 <script>
-import {mapState} from 'vuex'
+import { mapState } from 'vuex'
 import vcenter from '@/components/vcenter'
 import { getPosition } from '@/util'
 import browser from '@/util/browser'
@@ -79,11 +81,13 @@ export default {
   },
   methods: {
     clickHandle (nav) {
-      this.$router.push({name: nav.cp})
+      this.$router.push({ name: nav.cp })
     },
     showCp (cp, height) {
       clearTimeout(this.timeout)
-      this.$bus.$emit('showMask')
+      if (cp !== 'about' && cp !== 'location') {
+        this.$bus.$emit('showMask')
+      }
       this.hoverCp = cp
       this.height = height
     },
@@ -124,10 +128,10 @@ export default {
   destroyed () {
     window.removeEventListener('resize', this.sizeHandle)
   },
-  components: {vcenter}
+  components: { vcenter }
 }
 </script>
 
 <style lang="scss" scoped>
-@import './istyle.scss';
+@import "./istyle.scss";
 </style>

src/page/location/index.vue

@@ -30,14 +30,12 @@
     <div class="plate03" id="kjjm">
       <iframe
         class="ifr"
-        src="https://model3d.4dage.com/3D/2018/model/Model-auto.html?m=561"
+        src="http://model3d.4dage.com/3D/2018/model/Model-auto.html?m=561"
         frameborder="0"
       ></iframe>
       <div class="info">
         <h2>{{langCoreTech.kjjm.title}}</h2>
-        <p>{{langCoreTech.kjjm.dec[0]}}</p>
-        <p>{{langCoreTech.kjjm.dec[1]}}</p>
-        <p>{{langCoreTech.kjjm.dec[2]}}</p>
+        <p v-for="(item,i) in langCoreTech.kjjm.dec" :key="i">{{item}}</p>
       </div>
     </div>
 
@@ -57,7 +55,7 @@
     </div>
 
     <div class="plate05" id="kjzs">
-      <iframe class="ifr" src="https://www.4dkankan.com/showPC.html?m=TZpQAf28" frameborder="0"></iframe>
+      <iframe class="ifr" src="http://www.4dkankan.com/showPC.html?m=TZpQAf28" frameborder="0"></iframe>
       <div class="info">
         <h2>{{langCoreTech.kjzs.title}}</h2>
         <p v-for="(item,i) in langCoreTech.kjzs.sub" :key="i">{{item}}</p>

src/page/service/crumbs.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="crumbs-layout">
     <ul :style="{marginLeft:(split-178)+'px'}" class="crumbs-con">
-      <li v-for="(item,i) in navs" :key="i" @click="$router.push(item.to)">
-        <span>{{item.name}}</span> <span v-if="i<navs.length-1">></span>
+      <li @click="$router.push({params:{active:item.id}})" :class="{active:item.id === active}" v-for="(item,i) in navs" :key="i">
+        {{item.name}}
       </li>
     </ul>
   </div>
@@ -11,51 +11,62 @@
 <script>
 import {mapState} from 'vuex'
 
-let navsKey = {
-  product: {
-    name: '产品手册'
-  },
-  qa: {
-    name: '常见问题',
-    to: {name: 'service_list', params: {id: 'qabefore', active: 'all'}}
-  },
-  app: {
-    name: 'app下载',
-    to: {name: 'service_list', params: {id: 'appbefore', active: 'all'}}
-  },
-  use: {
-    name: '使用教程',
-    to: {name: 'service_list', params: {id: 'usebefore', active: 'all'}}
-  },
-  pro: {
-    name: '4DKankan Pro'
-  },
-  lite: {
-    name: '4DKankan Lite'
-  }
-}
+// let navsKey = {
+//   product: {
+//     name: '产品手册'
+//   },
+//   qa: {
+//     name: '常见问题',
+//     to: {name: 'service_list', params: {id: 'qabefore', active: 'all'}}
+//   },
+//   app: {
+//     name: 'app下载',
+//     to: {name: 'service_list', params: {id: 'appbefore', active: 'all'}}
+//   },
+//   use: {
+//     name: '使用教程',
+//     to: {name: 'service_list', params: {id: 'usebefore', active: 'all'}}
+//   },
+//   pro: {
+//     name: '4DKankan Pro'
+//   },
+//   lite: {
+//     name: '4DKankan Lite'
+//   }
+// }
 export default {
   computed: {
     ...mapState({
       split: state => state.ui.navDivision
-    })
+    }),
+    active () {
+      return this.$route.params.active
+    }
   },
+
   data () {
     return {
-      navs: []
+      navs: [{
+        id: 'pro',
+        name: 'Pro'
+      }, {
+        id: 'lite',
+        name: 'Lite'
+      }]
     }
   },
   watch: {
-    '$route.params': {
-      immediate: true,
-      handler: function (newVal) {
-        this.navs = []
-        let {id, active} = newVal
-        let fixId = id.replace('before', '')
-        navsKey[fixId] && this.navs.push(navsKey[fixId])
-        navsKey[active] && this.navs.push(navsKey[active])
-      }
-    }
+    // '$route.params': {
+    //   immediate: true,
+    //   handler: function (newVal) {
+    //     this.navs = []
+    //     let {id, active} = newVal
+    //     let fixId = id.replace('before', '')
+    //     navsKey[fixId] && this.navs.push(navsKey[fixId])
+    //     navsKey[active] && this.navs.push(navsKey[active])
+    //   }
+    // }
+
   }
 }
 </script>
@@ -65,20 +76,26 @@ export default {
     width: 100%;
     background-color: #ededed;
     .crumbs-con{
-      font-size: 14px;
+      font-size: 16px;
       line-height: 62.5px;
     }
     ul{
       li{
+        box-sizing: border-box;
         display: inline-block;
-        span{
-          padding: 0 4px;
-          &:first-child{
-            cursor: pointer;
-            padding: 0;
-          }
+        margin-right: 20px;
+        padding: 0 10px;
+        cursor: pointer;
+        color: #8d8d8d;
+        &:first-child{
+          position: relative;
+          left: -10px;
         }
       }
+      .active{
+        color: #000;
+        border-bottom: 4px solid #1fe4dc;
+      }
     }
   }
 

src/page/service/temp/app.vue

@@ -4,10 +4,8 @@
       <img src="@/assets/images/app-logo.png" alt srcset>
     </div>
     <div class="info">
-      <h2>
-        <span>{{data.name}}</span>
-        空间相机控制app
-      </h2>
+      <img :src="`${$cdn}${data.img}`" alt srcset>
+      <h2>空间相机控制app</h2>
       <p>4Dkankan 是复刻空间的客户端，能帮助客户操作复刻现实空间的搭配软件</p>
 
       <div>
@@ -63,16 +61,14 @@ export default {
     width: 750px;
     max-width: 100%;
     margin-left: 180px;
+    > img{
+      width: 190px;
+    }
     > h2 {
       font-size: 24px;
-      color: #000000;
+      color: #343434;
       margin-bottom: 20px;
       line-height: 1.4em;
-
-      span {
-        color: #aaaaaa;
-        display: block;
-      }
     }
 
     > p {

src/page/service/temp/config.js

@@ -365,12 +365,15 @@ const app = {
   lite: {
     cp: 'iapp',
     isbefore: false,
-    name: '4DKankan Lite'
+    name: '4DKankan Lite',
+    img: 'images/download-lite.png'
   },
   pro: {
     cp: 'iapp',
     isbefore: false,
-    name: '4DKankan Pro'
+    name: '4DKankan Pro',
+    img: 'images/download-pro.png'
+
   }
 }
 

src/page/service/temp/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="temp-layout" >
-    <component class="fix-layout" :style="{marginLeft:(split-178)+'px'}" :is="active.isbefore?'ibefore':active.cp" :data='active'/>
+    <component class="fix-layout" :style="{marginLeft:(split-178)+'px'}" :is="active.cp" :data='active'/>
   </div>
 </template>
 

src/page/service/temp/qa.vue

@@ -53,7 +53,7 @@ export default {
 
     h4 {
       cursor: pointer;
-      color: #2d2d2d;
+      color: #343434;
       &::after {
         transition: transform .3s linear;
         display: inline-block;

src/store/language/cn/binocular.js

@@ -5,46 +5,43 @@ let baseUrl = vue.$cdn
 export default{
   introduce: {
     title: ['四维看看 Lite', '全球首款 消费级3D空间相机'],
-    price: ['￥4999', '起'],
-    dec: [
-      '消费级的空间建模神器，10分钟复刻',
-      '空间，720°沉浸式实景漫游体验'
-    ],
+    price: ['RMB 3,999', '起'],
+    dec: '全球首款消费级3D空间相机，10分钟复刻空间，720°沉浸式实景漫游体验',
     btn: '立即购买',
-    subTitle: '3D 4K实景复刻神器',
+    subTitle: '3D实景复刻神器',
     benefitGroup: [
       {
         fontImg: 'icon-koudai',
         icon: baseUrl + 'images/product_img_02_a@2x.png',
-        title: '轻便易携  装进口袋',
+        title: '轻便易携 装进口袋',
         content:
             '机身体积与普通手机无异， <br>重量为115克，<br>仅为同类型产品重量的1/30。'
       },
       {
         fontImg: 'icon-jianmo',
         icon: baseUrl + 'images/product_img_02_b@2x.png',
-        title: '轻松操作  高效建模',
+        title: '轻松操作 高效建模',
         content:
             '无需具备专业知识，10分钟即可采集<br>100平米空间数据，一键上传云端系统， <br>5分钟自动生成模型。'
       },
       {
         fontImg: 'icon-manyou',
         icon: baseUrl + 'images/product_img_02_c@2x.png',
-        title: '高精还原   空间漫游',
+        title: '高精还原 空间漫游',
         content:
             '720°无死角复刻3D实景， <br>呈现4K高清画质， <br>实现沉浸式空间漫游。'
       },
       {
         fontImg: 'icon-paise',
         icon: baseUrl + 'images/product_img_02_d@2x.png',
-        title: '室内室外   皆可拍摄',
+        title: '室内室外 皆可拍摄',
         content:
             '攻克同类型设备无法采集室外数据<br>的技术难点，使得3D数据采集<br>不再受地点限制，室内室外皆可完成。'
       },
       {
         fontImg: 'icon-genxing',
         icon: baseUrl + 'images/product_img_02_e@2x.png',
-        title: '自由编辑   随时更新',
+        title: '自由编辑 随时更新',
         content:
             '贴心打造模型编辑平台<br>支持图文、 视频、 链接等信息热点的<br>添加及更新。'
       }
@@ -57,19 +54,19 @@ export default{
   guide: [
     {
       title: [
-        '视听导览，身临其境',
-        '制定个性化路线并录制语音导览，带给观众如临现场的视听体验。'
+        '高清还原，身临其境',
+        'AI数字化算法无死角复刻数字3D实景，带给您如临现场的空间漫游体验。'
       ]
     },
     {
-      title: ['十分钟复刻空间简便易用'],
+      title: ['三步轻松复刻空间', '连接相机、拍摄并上传后就能获得空间模型，无需专业知识。'],
       sub: ['上传至云端计算', 'APP+空间相机拍摄', '用户端空间展示']
     },
     {
-      title: ['空间模型瞬间自动生成', '平面结构一目了然']
+      title: ['空间模型即时自动生成', '10分钟即可采集100㎡的空间数据，5分钟自动生成模型。']
     },
     {
-      title: ['编辑和分享互动式视频', '让你的空间讲故事']
+      title: ['编辑和分享互动3D模型', '可在模型中增加图文、超链接、语音导览等等，可轻松浏览，也可与他人分享。']
     }
   ],
   technology: {

src/store/language/cn/coreTech.js

@@ -2,7 +2,7 @@
 export default{
   kjdw: {
     title: '空间定位',
-    dec: '人工智能空间定位技术，提取并匹配图像中的特征点，计算点位的空间坐标，从而判定相机的位置。',
+    dec: '计算相机在拍摄时的空间位置，并提取对应的3D点云，从而获取三维空间的真实情况。',
     points: [
       {
         posi: {
@@ -48,14 +48,14 @@ export default{
       }
     ],
     ability: {
-      name: '空间定位的创新技术能力',
-      sub: '全新算法极大增加了关键帧特征点的匹配数目，把定位丢失的情况降至最低。另外，基于自适应分段的集束调整，把长序列分成若干序列在后端优化，改善了优化效率。',
+      name: 'AI数字化算法的创新技术能力',
+      sub: '全新算法极大提升了关键帧特征点的匹配准确率，把定位丢失的情况降至最低。另外，基于自适应分段的集束调整，把长序列分成若干序列在后端优化，改善了优化效率。',
       app: [
         {
           icon: {
             backgroundImage: `url(${require('@/assets/images/img_core_app01.png')})`
           },
-          sub: '全新室内重建系统，<br/>应用双球幕镜头采集数据'
+          sub: '全新室内重建系统，<br/>运用AI数据算法采集数据。'
         },
         {
           icon: {
@@ -74,7 +74,7 @@ export default{
   },
   kjjm: {
     title: '空间建模',
-    dec: ['自动化高精度三维数字建模技术，', '基于二维图像，通过点云计算生成空间三维模型，', '无需人工干预，从上传到生成结果仅需要5-10分钟。'],
+    dec: ['自动化高精度三维数字建模技术，', '恢复空间的平面布局以及三维结构，', '无需人工干预，从上传到生成结果仅需要5-10分钟。'],
     chars: [
       {
         icon: {
@@ -105,16 +105,16 @@ export default{
     sub: ['计算生成的结果通过WebGL呈现交互式3D模型，', '模型中可添加图文、视频、音频、超链接等多种媒体格式，', '并可显示测距信息，或者制定自动导览，通过数字三维空间承载丰富的信息。'],
     sdkz: {
       name: '在线漫游博物馆 - 四维看展',
-      sub: '四维看展是国内首家集文字、图片、语音、在线场景漫游于一体的线上艺术空间。打开小程序即可浏览全球最新最全的艺术资讯，实时了解最热门的文博动态； 足不出户就能逛遍艺术展厅，720°轻松鉴赏艺术作品。它是一座永不落幕的美术馆，带你踏上数字艺术之旅。'
+      sub: '四维看展是国内首家集文字、图片、语音、在线场景漫游于一体的线上艺术空间。打开小程序即可浏览全球最新最全的艺术资讯，实时了解最热门的文博动态，让您足不出户就能逛遍全球精彩展览，720°轻松鉴赏艺术作品，是一座永不落幕的美术馆。'
     },
     zfb: {
       name: '3D实景看房 - 指房宝',
-      sub: '指房宝平台覆盖房产中介、装修企业的行业需求，应用四维看看展示技术推出App，为传统房地产行业提供全新的数字3D实景看房体验，应用于租房、买房、装修建房等多样的业务场景。'
+      sub: '指房宝平台是针对房产中介、装修企业的需求，基于四维看看进行定制的软硬件一体化产品，包括定制化的3D相机、移动端模型编辑软件及移动端3D房源展示交易平台，开创了全新的数字3D实景房产交易体验，应用于租房、买房、装修建房等多样的业务场景。'
     }
   },
   jianrong: {
     name: '兼容多平台、多终端',
-    sub: '可通过移动网页端、嵌入小程序、APP端进行展示，并支持在VR眼镜等硬件设备上观看。',
+    sub: '可通过PC端、移动端App、移动端小程序进行展示，并支持在VR眼镜等硬件设备上观看。',
     terminal: [
       {
         txt: 'VR端',

src/store/language/cn/eight.js

@@ -5,11 +5,8 @@ let baseUrl = vue.$cdn
 export default{
   introduce: {
     title: ['四维看看 Pro', '专业精准建模，高效复刻空间'],
-    price: ['￥4999', '起'],
-    dec: [
-      '720°沉浸式实景漫游，10K高清画质',
-      '自动还原空间结构，生成测量数据'
-    ],
+    price: ['RMB 6,999', '起'],
+    dec: '沉浸式3D实景漫游，10K高清画质自动还原空间结构，生成测量数据',
     btn: '立即购买',
     subTitle: '让信息在三维立体空间中获得新生',
     benefitGroup: [
@@ -27,7 +24,7 @@ export default{
       },
       {
         fontImg: 'icon-sfm',
-        title: '人工智能空间定位技术'
+        title: 'AI数字化算法'
       },
       {
         fontImg: 'icon-3d',
@@ -52,10 +49,10 @@ export default{
     sub: ['快速编辑和分享你的互动式视频', '分享你的空间故事']
   },
   definition: {
-    title: '10K高清画质，720度无死角展现，捕捉空间的每个细节',
+    title: '10K高清画质，捕捉空间的每个细节',
     top: {
       dec:
-          ['四维看看Pro 3D空间相机全方位记录方向、角度、体积等空间立体信息，', '生成实景数字3D模型，让你随时随地感受如临现场的在线漫游体验。', '10K清晰度，可4倍放大画面，不错过任何细节。'],
+          ['四维看看 Pro全方位记录空间信息，生成实景3D模型，让你随时随地', '感受如临现场的在线漫游体验。10K清晰度，可4倍放大画面，', '不错过任何细节。'],
       intro: '四维看看Pro所拍摄的画面分辨率高达10000*5000像素'
 
     },
@@ -84,19 +81,19 @@ export default{
   },
   hardware: [
     {
-      title: ['工艺设计', '汇聚一线精湛科技与工艺']
+      title: ['汇聚一线精湛科技与工艺']
     },
     {
-      title: ['HI-SILICON', '海思HI3516AV200']
+      title: ['海思摄像机芯片', '高图像质量，低码率，低功耗']
     },
     {
-      title: ['八组高清全视角球幕镜头，全方位捕捉空间', '高分辨率创新光学设计，', '适应更复杂光线的空间拍摄需求']
+      title: ['八组高清全视角球幕镜头', '高分辨率创新光学设计，适应更复杂光线的空间拍摄需求']
     },
     {
       title: ['SONY CMOS 图像传感器']
     },
     {
-      title: ['独具匠心的细节设计']
+      title: ['大能量 小身材', '支持4小时无间断拍摄，符合人体工学设计，轻量便携，随时随地记录空间']
     }
   ],
   feature: {
@@ -105,7 +102,7 @@ export default{
       case1: {
         content: baseUrl + 'video/8k.mp4',
         back: baseUrl + 'video/4k.mp4',
-        lTxt: '普通',
+        lTxt: '四维看看 Lite',
         rTxt: '四维看看 Pro',
         lMask: '4K高清',
         rMask: '10K高清图像，4倍放大'
@@ -121,19 +118,23 @@ export default{
       case2: {
         content: baseUrl + 'video/qingxi.mp4',
         back: baseUrl + 'video/moku.mp4',
-        lTxt: '普通',
+        lTxt: '四维看看 Lite',
         rTxt: '四维看看 Pro'
       }
     },
     manyou: {
       title: ['模型结构', '更极致的空间还原度'],
-      left: '普通',
+      left: '四维看看 Lite',
       right: '四维看看 Pro'
     },
     endurance: {
       title: '续航时间'
     }
   },
+  technology: {
+    title: '由内而外的科技之美',
+    dec: '四维看看 Pro 由数百个精密元件配合运作，轻巧紧凑，便携耐用，随时为您3D记录实景空间。'
+  },
   parmas: {
     name: '四维看看 Pro 详细参数'
   }

src/store/language/cn/home.js

@@ -5,24 +5,26 @@ let baseUrl = vue.$cdn
 export default{
   tech: {
     title: '核心技术',
-    dec:
-        '四维看看在空间定位、空间建模和空间展示上拥有多项发明专利和核心技术。',
+    dec: [
+      '四维看看Pro的核心技术由中德两国人工智能视觉领域专家共同研发。中德人工智能研究院独有的AI数字化算法+国内最大的',
+      '3D模型大数据，令四维看看Pro能即时捕捉空间信息、生成精准的3D模型。'
+    ],
     icon: ['空间定位', '空间建模', '空间展示'],
     location: {
       title: '空间定位',
-      dec: '人工智能空间定位算法，采集真实空间信息，测量空间数据。',
+      dec: '准确获取真实空间信息，包括拍摄点位置、空间结构点<br/>云数据等等。',
       eng:
           'The bi-spherical SfM technology that simulates human eyes captures real space information and measures space data.'
     },
     modeling: {
       title: '空间建模',
-      dec: '根据二维图像自动计算三维数字模型，10分钟生成，无需人工干预。',
+      dec: '根据相机位姿和对应的点云信息，生成空间的平面布局，并自动重建三维结构。',
       eng:
           'Automatic calculation of a 3D digital model based on 2D images, and generation in five minutes without manual intervention.'
     },
     exhibition: {
       title: '空间展示',
-      dec: '无需插件，在VR眼镜、手机、平板、电脑等显示端720°沉浸式实景漫游体验。',
+      dec: '无需插件，在VR眼镜、手机、平板、电脑等终端即可实现720°<br/>沉浸式实景漫游体验。',
       eng:
           'View 3D scenes at 720° without plugins on the display terminals such as VR glasses, mobile phones, tablet PCs, and computers.'
     }
@@ -36,11 +38,11 @@ export default{
   cases: {
     title: '行业应用展示',
     dec: [
-      '四维看看已为消防、公安、文博等公共领域建立三维数字化档案，助力地产、酒店民宿、',
-      '电商、餐饮等行业打造体验式服务'
+      '四维看看已为消防、刑侦、文博等多个领域建立三维数字化档案，助力地产、酒店民宿、',
+      '电商、餐饮等行业打造体验式服务。'
     ],
     space: {
-      title: '每个空间，都值得被记录',
+      title: '每个空间都值得被记录',
       sub: '迄今为止四维看看记录的空间数量',
       nums: [
         {

src/store/language/en/binocular.js

@@ -5,14 +5,10 @@ let baseUrl = vue.$cdn
 export default{
   introduce: {
     title: ['4DKanKan Lite', 'World’s First Consumer 3D Camera'],
-    price: ['￥4999', '起'],
-    dec: [
-      'A powerful consumer device for space ',
-      'reconstruction. Simulates space in as short as 10 minutes',
-      'and provides 720 degree immersive real-life roaming experience'
-    ],
+    price: ['RMB 3,999'],
+    dec: 'A powerful consumer device for space reconstruction. Simulates space in as short as 10 minutes and provides 720 degree immersive real-life roaming experience.',
     btn: '立即购买',
-    subTitle: '3D 4K real scene reproduction artifact',
+    subTitle: 'Powerful Tool for Realistic 3D Space Reconstruction',
     benefitGroup: [
       {
         fontImg: 'icon-koudai',
@@ -58,19 +54,19 @@ export default{
   guide: [
     {
       title: [
-        'Audio-visual guidance to provide real-life experience',
-        'Make customized routes and record audio guidance to offer immersive audio-visual experience'
+        'Reconstruct Space in High Precision',
+        'The AI digitization technology digitally reconstructs realistic space in 3D and let you explore space freely as you are on the scene.'
       ]
     },
     {
-      title: ['Reconstruct space in 10 minutes easily and conveniently'],
+      title: ['Reconstruct Space Conveniently in Three Steps', 'Connect to the camera, shoot, upload, and directly get the space model. No expertise required.'],
       sub: ['Upload to the cloud', 'APP+ shooting by 3D camera', 'Space display in the user’s end']
     },
     {
-      title: ['Instant automatic generation of space model', 'Easy-to-understand planar structure']
+      title: ['Instant and Automatic Generation of Space Model', 'Data in a 100㎡ space can be collected in 10 minutes, and its digital model generated in 5 minutes.']
     },
     {
-      title: ['Edit and share interactive videos', 'Enable your space to tell stories']
+      title: ['Edit and Share Interactive 3D Models', 'You can add pictures, hyperlinks, audio guides, etc., to the model, which can be easily browsed or shared with others.']
     }
   ],
   technology: {
@@ -78,6 +74,6 @@ export default{
     dec: 'By as many as 794 precision components assembly, super fine spraying technology'
   },
   parmas: {
-    name: 'Detailed parameters of 4DKanKan Lite'
+    name: 'Detailed Parameters of 4DKanKan Lite'
   }
 }

src/store/language/en/eight.js

@@ -2,15 +2,11 @@ import Vue from 'vue'
 let vue = new Vue()
 let baseUrl = vue.$cdn
 
-export default {
+export default{
   introduce: {
-    title: ['4DKanKan Pro', 'Professional and accurate modeling that reconstructs space with efficiency'],
-    price: ['￥4999', '起'],
-    dec: [
-      '720-degree immersive virtual tour in 10K definition',
-      'Automatically recovers space',
-      'structure and generates measurements'
-    ],
+    title: ['四维看看 Pro', '专业精准建模，高效复刻空间'],
+    price: ['RMB 6,999', '起'],
+    dec: 'Immersive virtual tour in 10K definition Automatically recovers space structure and generates measurements',
     btn: '立即购买',
     subTitle: 'Bringing Data to Life in 3D',
     benefitGroup: [
@@ -24,11 +20,11 @@ export default {
       },
       {
         fontImg: 'icon-qiumu',
-        title: '8 Sophisticated Spherical lenses'
+        title: '8 Sophisticated Spherical Lenses'
       },
       {
         fontImg: 'icon-sfm',
-        title: 'AI Localization Technology'
+        title: 'AI Digitization Technology'
       },
       {
         fontImg: 'icon-3d',
@@ -49,22 +45,23 @@ export default {
     ]
   },
   app: {
-    title: '4DKanKan App',
+    title: '4DKankan App',
     sub: ['快速编辑和分享你的互动式视频', '分享你的空间故事']
   },
   definition: {
-    title: '10K Image Quality in 720 Degrees. Realistic 3D Is in the Details.',
+    title: '10K Image Quality That Captures Every Detail in the Space',
     top: {
       dec:
-        ['4DKanKan Pro records three-dimensional information of space,', ' and produces realistic 3D digital models, allowing you to enter anytime and enjoy 720-degree immersive experience. ', '10K image quality and 4x magnification enable you to see every detail.'],
+          ['4DKanKan Pro records three-dimensional information of space, and',
+            'produces realistic 3D digital models, allowing you to enter anytime',
+            'and enjoy 720-degree immersive experience. 10K image quality ',
+            'and 4x magnification enable you to see every detail.'],
       intro: 'Quality of images shot by 4DKanKan Pro reaches up to 10000*5000 pixels'
 
     },
     bottom: {
-      title: 'Every detail is there',
-      dec: ['4DKanKan Pro from the visual appearance to the handle, and then to the body protection, there is no lack of ingenuity.',
-        'Take the uniqueness of Pro as the design concept, and the creative concept of imagination as the design highlight.',
-        'Exquisite workmanship, meticulous and durable, the details, the meticulous.'],
+      title: '细节之处，纤毫毕现',
+      dec: ['4DKanKan Pro 从视觉外观到握持手感，再到机身防护，无处不凝聚匠心巧思。', '以Pro的独特性作为设计理念，以想象力的创意概念作为设计亮点。', '精湛工艺，细致耐用，细节之处，纤毫毕现。'],
       params2: [
         {
           icon: baseUrl + 'images/icon1.png',
@@ -87,19 +84,19 @@ export default {
   },
   hardware: [
     {
-      title: ['Design Techniques', 'Integration of First-liner Technologies and Techniques']
+      title: ['汇聚一线精湛科技与工艺']
     },
     {
-      title: ['HI-SILICON', '海思HI3516AV200']
+      title: ['HiSilicon Camera Chip', 'High picture quality, low bit rate, and low power consumption.']
     },
     {
-      title: ['Eight High-definition Spherical Lenses Capture Space in All Directions', 'Innovative optical design, better adapting to shooting environments', '']
+      title: ['Eight High-definition Spherical Lenses', 'Innovative optical design, better adapting to shooting environments.']
     },
     {
       title: ['SONY CMOS 图像传感器']
     },
     {
-      title: ['Ingenious design of details']
+      title: ['Small Gadget, Huge Power', '4-hour continuous shooting and portability make it easy to record space anytime.']
     }
   ],
   feature: {
@@ -108,7 +105,7 @@ export default {
       case1: {
         content: baseUrl + 'video/8k.mp4',
         back: baseUrl + 'video/4k.mp4',
-        lTxt: '普通',
+        lTxt: '4DKanKan Lite',
         rTxt: '4DKanKan Pro',
         lMask: 'High-definition of 4K',
         rMask: '10K HD picture with 4-times magnification'
@@ -124,20 +121,24 @@ export default {
       case2: {
         content: baseUrl + 'video/qingxi.mp4',
         back: baseUrl + 'video/moku.mp4',
-        lTxt: '普通',
+        lTxt: '4DKanKan Lite',
         rTxt: '4DKanKan Pro'
       }
     },
     manyou: {
-      title: ['模型结构', '更极致的空间还原度'],
-      left: '普通',
-      right: '四维看看 Pro'
+      title: ['Model structure', '更极致的空间还原度'],
+      left: '4DKanKan Lite',
+      right: '4DKanKan Pro'
     },
     endurance: {
       title: '续航时间'
     }
   },
+  technology: {
+    title: 'The Beauty of Technology from Within',
+    dec: 'Powered by the integrated work of hundreds of sophisticated parts, 4DKanKan Pro is light and compact, portable and durable, and can capture space in 3D for you at any time.'
+  },
   parmas: {
-    name: 'Detailed parameters of 4DKanKan Pro'
+    name: 'Detailed Parameters of 4DKanKan Pro'
   }
 }

src/store/language/en/home.js

@@ -5,16 +5,19 @@ let baseUrl = vue.$cdn
 export default{
   tech: {
     title: 'Core technologies',
-    dec:
-        '4DKanKan boasts multiple patents and core technologies in space localization, space reconstruction, and space display.',
+    dec: ['The core technologies of 4DKanKan Pro are developed under the efforts of AI vision specialists',
+      ' from China and Germany. Supported by the proprietary AI digitization technology and the ',
+      'country’s largest 3D model big data from China-Germany Artificial Intelligence ',
+      'Institute, 4DKanKan Pro is able to captures space information ',
+      'in real time and generates accurate 3D digital models.'],
     icon: ['Space localization', 'Space reconstruction', 'Space display'],
     location: {
       title: 'Space localization',
-      dec: 'AI localization algorithm that captures real space information and measures space data.'
+      dec: 'Acquire accurate information from real-life space, including shooting point location and corresponding point cloud data, etc.'
     },
     modeling: {
       title: 'Space reconstruction',
-      dec: 'Automatic calculation of a 3D digital model based on 2D images, and generation in ten minutes without manual intervention.'
+      dec: 'Generate floorplan and 3D structure of space according to camera location and point cloud data.'
     },
     exhibition: {
       title: 'Space display',
@@ -24,8 +27,8 @@ export default{
   cases: {
     title: 'Industrial applications',
     dec: [
-      '4DKanKan has established 3D digital archives for public purposes such as fire protection, public security, and cultural museum, helping real estate,',
-      'hotels and B&B, e-commerce, catering and other industries to create experiential services.'
+      '4DKanKan has established 3D digital archives for public purposes such as fire prevention, forensics, and cultural heritage, helping real ',
+      'estate, hotels and B&B, e-commerce, catering and other industries to create experiential services.'
     ],
     space: {
       title: 'Every space is worth recording',

src/store/language/home_cn.js

@@ -41,16 +41,16 @@ export default {
         {
           icon: 'icon-tutorial',
           name: '使用教程',
-          to: {name: 'service_list', params: {id: 'usebefore', active: 'all'}}
+          to: {name: 'service_list', params: {id: 'use', active: 'pro'}}
         },
         {
           icon: 'icon-faq',
           name: '常见问题',
-          to: {name: 'service_list', params: {id: 'qabefore', active: 'all'}}
+          to: {name: 'service_list', params: {id: 'qa', active: 'pro'}}
         }, {
           icon: 'icon-appdown',
           name: 'app下载',
-          to: {name: 'service_list', params: {id: 'appbefore', active: 'all'}}
+          to: {name: 'service_list', params: {id: 'app', active: 'pro'}}
         },
         {
           icon: 'icon-sysc',

src/store/language/home_en.js

@@ -41,16 +41,16 @@ export default {
         {
           icon: 'icon-tutorial',
           name: 'tutorials',
-          to: {name: 'service_list', params: {id: 'usebefore', active: 'all'}}
+          to: {name: 'service_list', params: {id: 'use', active: 'pro'}}
         },
         {
           icon: 'icon-faq',
           name: 'questions',
-          to: {name: 'service_list', params: {id: 'qabefore', active: 'all'}}
+          to: {name: 'service_list', params: {id: 'qa', active: 'pro'}}
         }, {
           icon: 'icon-appdown',
           name: 'download',
-          to: {name: 'service_list', params: {id: 'appbefore', active: 'all'}}
+          to: {name: 'service_list', params: {id: 'app', active: 'pro'}}
         },
         {
           icon: 'icon-sysc',

src/store/language/index.js

@@ -9,9 +9,9 @@ const en = {
   home: enLang
 }
 
-let current = (localStorage && localStorage.getItem('language')) || 'cn'
+let current = (localStorage && localStorage.getItem('language')) || '中'
 
-let languageObj = current === 'cn' ? cn : en
+let languageObj = current === '中' ? cn : en
 
 export default {
   state: {
@@ -20,7 +20,7 @@ export default {
   },
   mutations: {
     change_language (state, language) {
-      let languageObj = language === 'cn' ? cn : en
+      let languageObj = language === '中' ? cn : en
       Object.keys(languageObj).forEach(key => {
         state[key] = languageObj[key]
       })