6 年之前 · 738ce71074
--- a/build/webpack.dev.conf.js
+++ b/build/webpack.dev.conf.js
@@ -10,7 +10,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
 
				 const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
			
 
				 const portfinder = require('portfinder')
			
 
				 
			
 
				-const HOST = '192.168.0.89'
			
 
				+const HOST = '192.168.0.67'
			
 
				 const PORT = process.env.PORT && Number(process.env.PORT)
			
 
				 
			
 
				 const devWebpackConfig = merge(baseWebpackConfig, {
			
--- a/index.html
+++ b/index.html
@@ -1,8 +1,16 @@
 
				 <!DOCTYPE html>
			
 
				 <html>
			
 
				   <head>
			
 
				-    <meta charset="utf-8">
			
 
				     <meta name="viewport" content="width=device-width,initial-scale=1.0">
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta http-equiv="Cache-Control" content="max-age=7200" />
			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+    <meta content="telephone=no" name="format-detection">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <meta name="description" content="世界上首款消费级3D相机—四维看看（4DKanKan）。技术核心三要素：易操作；自动化；高精度。主要应用领域为数字文博、数字地产、数字电商、数字餐饮、数字家居等。">
			
 
				+    <link rel="shortcut icon" href="//4dkk.4dage.com/FDKKIMG/icon/kankan_icon.ico">
			
 
				+    <link rel="icon" type="image/png" href="//4dkk.4dage.com/FDKKIMG/icon/kankan_icon192.png" sizes="192x192">
			
 
				+    <link rel="apple-touch-icon" sizes="180x180" href="//4dkk.4dage.com/FDKKIMG/icon/kankan_icon180.png">
			
 
				     <title>四维看看</title>
			
 
				   </head>
			
 
				   <body>
			
--- a/src/App.vue
+++ b/src/App.vue
@@ -43,7 +43,7 @@ export default {
 
				   mounted () {
			
 
				     this.$bus.$on('showMask', (index) => {
			
 
				       clearTimeout(this.timeout)
			
 
				-      this.maskZIndex = index || 3
			
 
				+      this.maskZIndex = index || 99
			
 
				       this.showMask = true
			
 
				     })
			
 
				 
			
@@ -81,4 +81,9 @@ export default {
 
				 .mask.active {
			
 
				   background-color: rgba(0,0,0,0.4);
			
 
				 }
			
 
				+@media screen and (max-width:600px){
			
 
				+  #app {
			
 
				+    padding-top: 60px;
			
 
				+  }
			
 
				+}
			
 
				 </style>
			
--- a/src/assets/font/iconfont.css
+++ b/src/assets/font/iconfont.css
@@ -1,11 +1,11 @@
 
				 @font-face {
			
 
				   font-family: 'iconfont';  /* project id 941679 */
			
 
				-  src: url('//at.alicdn.com/t/font_941679_1nh6nmzpyat.eot');
			
 
				-  src: url('//at.alicdn.com/t/font_941679_1nh6nmzpyat.eot?#iefix') format('embedded-opentype'),
			
 
				-  url('//at.alicdn.com/t/font_941679_1nh6nmzpyat.woff2') format('woff2'),
			
 
				-  url('//at.alicdn.com/t/font_941679_1nh6nmzpyat.woff') format('woff'),
			
 
				-  url('//at.alicdn.com/t/font_941679_1nh6nmzpyat.ttf') format('truetype'),
			
 
				-  url('//at.alicdn.com/t/font_941679_1nh6nmzpyat.svg#iconfont') format('svg');
			
 
				+  src: url('//at.alicdn.com/t/font_941679_jr2pstpw74n.eot');
			
 
				+  src: url('//at.alicdn.com/t/font_941679_jr2pstpw74n.eot?#iefix') format('embedded-opentype'),
			
 
				+  url('//at.alicdn.com/t/font_941679_jr2pstpw74n.woff2') format('woff2'),
			
 
				+  url('//at.alicdn.com/t/font_941679_jr2pstpw74n.woff') format('woff'),
			
 
				+  url('//at.alicdn.com/t/font_941679_jr2pstpw74n.ttf') format('truetype'),
			
 
				+  url('//at.alicdn.com/t/font_941679_jr2pstpw74n.svg#iconfont') format('svg');
			
 
				 }
			
 
				 .iconfont {
			
 
				   font-family: "iconfont" !important;
			
@@ -223,3 +223,35 @@
 
				 .icon-guanbi:before {
			
 
				   content: "\e65d";
			
 
				 }
			
 
				+
			
 
				+.icon-liulan:before {
			
 
				+  content: "\e666";
			
 
				+}
			
 
				+
			
 
				+.icon-bianji:before {
			
 
				+  content: "\e665";
			
 
				+}
			
 
				+
			
 
				+.icon-dianlang:before {
			
 
				+  content: "\e664";
			
 
				+}
			
 
				+
			
 
				+.icon-3d:before {
			
 
				+  content: "\e663";
			
 
				+}
			
 
				+
			
 
				+.icon-sfm:before {
			
 
				+  content: "\e662";
			
 
				+}
			
 
				+
			
 
				+.icon-qiumu:before {
			
 
				+  content: "\e661";
			
 
				+}
			
 
				+
			
 
				+.icon-haisi:before {
			
 
				+  content: "\e660";
			
 
				+}
			
 
				+
			
 
				+.icon-sony:before {
			
 
				+  content: "\e65f";
			
 
				+}
			
--- a/src/assets/images/3dcase_img_tit.png
+++ b/src/assets/images/3dcase_img_tit.png
--- a/src/assets/images/banner_pro.png
+++ b/src/assets/images/banner_pro.png
--- a/src/assets/images/camera1.png
+++ b/src/assets/images/camera1.png
--- a/src/assets/images/camera2.png
+++ b/src/assets/images/camera2.png
--- a/src/assets/images/fdage.png
+++ b/src/assets/images/fdage.png
--- a/src/assets/images/hxjs-bg.jpg
+++ b/src/assets/images/hxjs-bg.jpg
--- a/src/assets/images/hxjs-bg.png
+++ b/src/assets/images/hxjs-bg.png
--- a/src/assets/images/hxjs-model.png
+++ b/src/assets/images/hxjs-model.png
--- a/src/assets/images/img_core_app01.png
+++ b/src/assets/images/img_core_app01.png
--- a/src/assets/images/img_core_app02.png
+++ b/src/assets/images/img_core_app02.png
--- a/src/assets/images/img_core_app03.png
+++ b/src/assets/images/img_core_app03.png
--- a/src/assets/images/img_core_app_phone.png
+++ b/src/assets/images/img_core_app_phone.png
--- a/src/assets/images/img_core_model01.png
+++ b/src/assets/images/img_core_model01.png
--- a/src/assets/images/img_core_model02.png
+++ b/src/assets/images/img_core_model02.png
--- a/src/assets/images/img_core_model03.png
+++ b/src/assets/images/img_core_model03.png
--- a/src/assets/images/img_core_platform_pc.jpg
+++ b/src/assets/images/img_core_platform_pc.jpg
--- a/src/assets/images/img_core_platform_pc.png
+++ b/src/assets/images/img_core_platform_pc.png
--- a/src/assets/images/img_core_platform_phone.jpg
+++ b/src/assets/images/img_core_platform_phone.jpg
--- a/src/assets/images/img_core_platform_phone.png
+++ b/src/assets/images/img_core_platform_phone.png
--- a/src/assets/images/img_core_platform_vr.jpg
+++ b/src/assets/images/img_core_platform_vr.jpg
--- a/src/assets/images/img_core_platform_vr.png
+++ b/src/assets/images/img_core_platform_vr.png
--- a/src/assets/images/img_core_show_ele.jpg
+++ b/src/assets/images/img_core_show_ele.jpg
--- a/src/assets/images/img_core_show_zfb.jpg
+++ b/src/assets/images/img_core_show_zfb.jpg
--- a/src/assets/images/index_img_record_bg.png
+++ b/src/assets/images/index_img_record_bg.png
--- a/src/assets/images/item_cover_2.png
+++ b/src/assets/images/item_cover_2.png
--- a/src/assets/images/item_cover_3.png
+++ b/src/assets/images/item_cover_3.png
--- a/src/assets/images/item_cover_4.png
+++ b/src/assets/images/item_cover_4.png
--- a/src/assets/images/item_cover_5.png
+++ b/src/assets/images/item_cover_5.png
--- a/src/assets/images/item_cover_6.png
+++ b/src/assets/images/item_cover_6.png
--- a/src/assets/images/item_icon_1.png
+++ b/src/assets/images/item_icon_1.png
--- a/src/assets/images/item_icon_2.png
+++ b/src/assets/images/item_icon_2.png
--- a/src/assets/images/item_icon_3.png
+++ b/src/assets/images/item_icon_3.png
--- a/src/assets/images/item_icon_4.png
+++ b/src/assets/images/item_icon_4.png
--- a/src/assets/images/item_icon_5.png
+++ b/src/assets/images/item_icon_5.png
--- a/src/assets/images/item_icon_6.png
+++ b/src/assets/images/item_icon_6.png
--- a/src/assets/images/jzxj.png
+++ b/src/assets/images/jzxj.png
--- a/src/assets/images/lens.png
+++ b/src/assets/images/lens.png
--- a/src/assets/images/logo.png
+++ b/src/assets/images/logo.png
--- a/src/assets/images/m-SONY.png
+++ b/src/assets/images/m-SONY.png
--- a/src/assets/images/m-eight-params.png
+++ b/src/assets/images/m-eight-params.png
--- a/src/assets/images/m-product_img_content_6.png
+++ b/src/assets/images/m-product_img_content_6.png
--- a/src/assets/images/m-txt.png
+++ b/src/assets/images/m-txt.png
--- a/src/assets/images/m-xinpian.png
+++ b/src/assets/images/m-xinpian.png
--- a/src/assets/images/meight-bg.png
+++ b/src/assets/images/meight-bg.png
--- a/src/assets/images/mtow-boombg.jpg
+++ b/src/assets/images/mtow-boombg.jpg
--- a/src/assets/images/mtwo-bg.png
+++ b/src/assets/images/mtwo-bg.png
--- a/src/assets/images/mtwo-bj.png
+++ b/src/assets/images/mtwo-bj.png
--- a/src/assets/images/mtwo-fk.png
+++ b/src/assets/images/mtwo-fk.png
--- a/src/assets/images/mtwo-sc.png
+++ b/src/assets/images/mtwo-sc.png
--- a/src/assets/images/mtwo-txt.png
+++ b/src/assets/images/mtwo-txt.png
--- a/src/assets/images/phone_1.jpg
+++ b/src/assets/images/phone_1.jpg
--- a/src/assets/images/phone_10.jpg
+++ b/src/assets/images/phone_10.jpg
--- a/src/assets/images/phone_2.jpg
+++ b/src/assets/images/phone_2.jpg
--- a/src/assets/images/phone_3.jpg
+++ b/src/assets/images/phone_3.jpg
--- a/src/assets/images/phone_4.jpg
+++ b/src/assets/images/phone_4.jpg
--- a/src/assets/images/phone_5.jpg
+++ b/src/assets/images/phone_5.jpg
--- a/src/assets/images/phone_6.jpg
+++ b/src/assets/images/phone_6.jpg
--- a/src/assets/images/phone_7.jpg
+++ b/src/assets/images/phone_7.jpg
--- a/src/assets/images/phone_8.jpg
+++ b/src/assets/images/phone_8.jpg
--- a/src/assets/images/phone_9.jpg
+++ b/src/assets/images/phone_9.jpg
--- a/src/assets/images/phone_icon_1.png
+++ b/src/assets/images/phone_icon_1.png
--- a/src/assets/images/phone_icon_10.png
+++ b/src/assets/images/phone_icon_10.png
--- a/src/assets/images/phone_icon_3.png
+++ b/src/assets/images/phone_icon_3.png
--- a/src/assets/images/phone_icon_4.png
+++ b/src/assets/images/phone_icon_4.png
--- a/src/assets/images/phone_icon_5.png
+++ b/src/assets/images/phone_icon_5.png
--- a/src/assets/images/phone_icon_6.png
+++ b/src/assets/images/phone_icon_6.png
--- a/src/assets/images/phone_icon_7.png
+++ b/src/assets/images/phone_icon_7.png
--- a/src/assets/images/phone_icon_8.png
+++ b/src/assets/images/phone_icon_8.png
--- a/src/assets/images/phone_icon_9.png
+++ b/src/assets/images/phone_icon_9.png
--- a/src/assets/images/product_img_content_6.png
+++ b/src/assets/images/product_img_content_6.png
--- a/src/assets/images/product_img_content_binocular.png
+++ b/src/assets/images/product_img_content_binocular.png
--- a/src/assets/images/swkz-intro.jpg
+++ b/src/assets/images/swkz-intro.jpg
--- a/src/assets/images/xingkong.png
+++ b/src/assets/images/xingkong.png
--- a/src/assets/images/zfb-intro.jpg
+++ b/src/assets/images/zfb-intro.jpg
--- a/src/assets/style/public.scss
+++ b/src/assets/style/public.scss
@@ -215,4 +215,52 @@ $padding:20px;
 
				     transform: translateX(-50%) translateY(-$padding);
			
 
				     opacity: 0;
			
 
				   }
			
 
				-}
			
 
				+}
			
 
				+
			
 
				+@keyframes linear-jump{
			
 
				+  0%{
			
 
				+    transform: translateY(0px);
			
 
				+  }
			
 
				+  100%{
			
 
				+    transform: translateY(-10px);
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+
			
 
				+@keyframes pulsate {
			
 
				+  0% {
			
 
				+    transform: scale(0.1, 0.1);
			
 
				+    opacity: 0;
			
 
				+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
			
 
				+    filter: alpha(opacity=0);
			
 
				+  }
			
 
				+  50% {
			
 
				+    opacity: 1;
			
 
				+    -ms-filter: none;
			
 
				+    filter: none;
			
 
				+  }
			
 
				+  100% {
			
 
				+    transform: scale(1.2, 1.2);
			
 
				+    opacity: 0;
			
 
				+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
			
 
				+    filter: alpha(opacity=0);
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+@keyframes loca-int{
			
 
				+  0%{
			
 
				+		background-position: 0 0px;
			
 
				+  }
			
 
				+  100%{
			
 
				+		background-position: 0 100%;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+@keyframes loca-back{
			
 
				+  0%{
			
 
				+		background-position: 0 100%;
			
 
				+  }
			
 
				+  100%{
			
 
				+		background-position: 0 0;
			
 
				+  }
			
 
				+}
			
--- a/src/assets/video/4k.mp4
+++ b/src/assets/video/4k.mp4
--- a/src/assets/video/banner1.mp4
+++ b/src/assets/video/banner1.mp4
--- a/src/assets/video/item2.mp4
+++ b/src/assets/video/item2.mp4
--- a/src/assets/video/kjdw.mp4
+++ b/src/assets/video/kjdw.mp4
--- a/src/components/Linecanvas/index.vue
+++ b/src/components/Linecanvas/index.vue
@@ -19,7 +19,7 @@ export default {
 
				       type: Number
			
 
				     },
			
 
				     start: {
			
 
				-      default: false
			
 
				+      default: true
			
 
				     }
			
 
				   },
			
 
				   data () {
			
@@ -480,7 +480,7 @@ export default {
 
				       // this.ctx.lineTo(1045, 626)
			
 
				       // this.ctx.stroke()
			
 
				     }
			
 
				-    // this.animated()
			
 
				+    this.animated()
			
 
				   }
			
 
				 }
			
 
				 </script>
			
--- a/src/main.js
+++ b/src/main.js
@@ -6,6 +6,7 @@ import vuex from 'vuex'
 
				 import axios from './util/http.js'
			
 
				 
			
 
				 Vue.prototype.$http = axios
			
 
				+Vue.prototype.$cdn = 'https://4dscene.4dage.com/new4dkk/'
			
 
				 
			
 
				 Vue.use(vuex)
			
 
				 
			
--- a/src/page/about/index.vue
+++ b/src/page/about/index.vue
@@ -3,18 +3,16 @@
 
				     <aboutBg class="about-bg"/>
			
 
				     <div id="luxy" >
			
 
				       <div class="plate01 plate">
			
 
				-        <img class="about-logo" src="@/assets/images/about_logo.png" alt>
			
 
				+        <img class="about-logo" :src="`${$cdn}images/about_logo.png`" alt>
			
 
				         <div class="introduce">
			
 
				-          <img src="@/assets/images/fdage.png" alt>
			
 
				+          <img :src="`${$cdn}images/fdage.png`" alt>
			
 
				           <div class="intro-r">
			
 
				-            <p>四维看看由四维时代团队独立自主研发。作为国内首家3D数字化重建技术中心，四维时代在国际上首创的微米级三维数字化精细扫描技术，较传统三维建模方式在效率上提高200倍以上，远超美国Adobe公司的厘米级精度。目前世界上能做到这个精度的只有两家，一家是四维时代，另一家是MIT计算视觉实验室。</p>
			
 
				-            <p>2017年6月，四维时代与德国人工智能研究中心（DFKI）在中德两国总理见证下正式签订《中德人工智能研究院项目》，并成立中德人工智能研究院，利用中德两国技术优势，推进人工智能视觉技术的深入和应用。</p>
			
 
				-            <p>2018年5月，四维时代成功将领先的三维建模技术民用化，推出全球首款消费级3D相机四维看看。</p>
			
 
				+            <p v-for="(item,index) in langAbout.intro" :key="index">{{item}}</p>
			
 
				           </div>
			
 
				         </div>
			
 
				       </div>
			
 
				       <div class="plate02 ">
			
 
				-        <img src="@/assets/images/hezhao.png" alt>
			
 
				+        <img :src="`${$cdn}images/hezhao.png`" alt>
			
 
				       </div>
			
 
				       <div class="plate03" :style="{marginLeft:(split - 405)+ 'px'}">
			
 
				         <div class="event plate">
			
@@ -27,9 +25,9 @@
 
				             </div>
			
 
				           </touch>
			
 
				           <div class="e-node">
			
 
				-            <h2>{{events.title}}</h2>
			
 
				+            <h2>{{langAbout.events.title}}</h2>
			
 
				             <ul>
			
 
				-              <li v-for="(item,idx) in events.nodes" :key="idx">
			
 
				+              <li v-for="(item,idx) in langAbout.events.nodes" :key="idx">
			
 
				                 <h3>{{item.year}}</h3>
			
 
				                 <p v-for="(sub, i) in item.txt" :key="i">{{sub}}</p>
			
 
				               </li>
			
@@ -37,10 +35,10 @@
 
				           </div>
			
 
				         </div>
			
 
				         <div class="contact plate">
			
 
				-          <img src="@/assets/images/company.png" alt>
			
 
				+          <img :src="`${$cdn}images/company.png`" alt>
			
 
				           <div class="e-node">
			
 
				             <ul>
			
 
				-              <li v-for="(item,idx) in kefu" :key="idx">
			
 
				+              <li v-for="(item,idx) in langAbout.kefu" :key="idx">
			
 
				                 <h3 :class="item.class">{{item.title}}</h3>
			
 
				                 <p v-for="(sub, i) in item.content" :key="i">{{sub}}</p>
			
 
				               </li>
			
@@ -64,102 +62,27 @@ import * as luxy from 'luxy.js'
 
				 
			
 
				 export default {
			
 
				   data () {
			
 
				-    const events = {
			
 
				-      title: '团队大事记',
			
 
				-      nodes: [
			
 
				-        {
			
 
				-          year: '2014年',
			
 
				-          txt: [
			
 
				-            '10月 四维时代创立，成员在人工智能三维数字化重建及数字化虚拟展示技术方面具有世界领先的科研实力。',
			
 
				-            '12月 建模精度达微米级的一种基于光栅扫描的物体数字化三维重建装置，获专利授权。'
			
 
				-          ]
			
 
				-        },
			
 
				-        {
			
 
				-          year: '2015年',
			
 
				-          txt: [
			
 
				-            '8月 “高精度一键式三维数字化重建及其展示”获“中国创翼”青年创业创新大赛三等奖。',
			
 
				-            '10月 作为全国双创代表获得李克强总理接见，并向总理汇报工作。',
			
 
				-            '相继成为故宫博物院、广东省博物馆等文物保护机构的合作伙伴。'
			
 
				-          ]
			
 
				-        },
			
 
				-        {
			
 
				-          year: '2016年',
			
 
				-          txt: [
			
 
				-            '5月 为中国十大考古发现之一—南昌汉代海昏侯国遗址博物馆打造的线上数字博物馆上线。'
			
 
				-          ]
			
 
				-        },
			
 
				-        {
			
 
				-          year: '2017年',
			
 
				-          txt: [
			
 
				-            '6月 在中德两国总理见证下与德国人工智能研究中心签约《中德人工智能研究院项目》，为中德科技交流建立有力纽带。',
			
 
				-            '成为阿斯塔纳世博会中国馆虚拟现实技术唯一指定供应商。'
			
 
				-          ]
			
 
				-        },
			
 
				-        {
			
 
				-          year: '2018年',
			
 
				-          txt: [
			
 
				-            '5月 推出全球首款消费级3D相机四维看看，10分钟即可复刻100平米空间。',
			
 
				-            '11月 中国高科技产业化研究会授予四维看看“科学技术成果”称号。',
			
 
				-            '中国国际高虚拟技术成果交易会授予四维看看“优秀产品奖”。'
			
 
				-          ]
			
 
				-        },
			
 
				-        {
			
 
				-          year: '2019年',
			
 
				-          txt: [
			
 
				-            '4月 为德国陶瓷博物馆展馆及馆藏进行三维数字化重建，并开发数字博物馆App。',
			
 
				-            '6月 推出高精度消费级3D相机四维看看Pro6。'
			
 
				-          ]
			
 
				-        }
			
 
				-      ]
			
 
				-    }
			
 
				-    const kefu = [
			
 
				-      {
			
 
				-        title: '联系我们',
			
 
				-        class: 'lxwm',
			
 
				-        content: [
			
 
				-          '公司：珠海市四维时代网络科技有限公司',
			
 
				-          '地址：广东省珠海市高新区唐家湾港湾大道南港湾一号'
			
 
				-        ]
			
 
				-      },
			
 
				-      {
			
 
				-        title: '客户服务',
			
 
				-        class: 'khfw',
			
 
				-        content: ['客服/售后：4006698025', 'Email：service@4dage.com']
			
 
				-      },
			
 
				-      {
			
 
				-        title: '媒体垂询',
			
 
				-        class: 'mtcx',
			
 
				-        content: ['热线：0756-6996790', 'Email：pr@4dage.com']
			
 
				-      },
			
 
				-      {
			
 
				-        title: '业务合作',
			
 
				-        class: 'yehz',
			
 
				-        content: ['热线：0756-6996796/6996791', 'Email：sales@4dage.com']
			
 
				-      }
			
 
				-    ]
			
 
				     const imgs = [
			
 
				       {
			
 
				-        img: require('@/assets/images/event.png')
			
 
				+        img: this.$cdn + 'images/event.png'
			
 
				       },
			
 
				       {
			
 
				-        img: require('@/assets/images/about1.jpg')
			
 
				+        img: this.$cdn + 'images/about1.jpg'
			
 
				       },
			
 
				       {
			
 
				-        img: require('@/assets/images/about2.jpg')
			
 
				+        img: this.$cdn + 'images/about2.jpg'
			
 
				       },
			
 
				       {
			
 
				-        img: require('@/assets/images/about3.jpg')
			
 
				+        img: this.$cdn + 'images/about3.jpg'
			
 
				       },
			
 
				       {
			
 
				-        img: require('@/assets/images/about4.jpg')
			
 
				+        img: this.$cdn + 'images/about4.jpg'
			
 
				       },
			
 
				       {
			
 
				-        img: require('@/assets/images/about5.jpg')
			
 
				+        img: this.$cdn + 'images/about5.jpg'
			
 
				       }
			
 
				     ]
			
 
				     return {
			
 
				-      kefu,
			
 
				-      events,
			
 
				       imgs,
			
 
				       iactive: 0
			
 
				     }
			
@@ -171,7 +94,8 @@ export default {
 
				   },
			
 
				   computed: {
			
 
				     ...mapState({
			
 
				-      split: state => state.ui.navDivision
			
 
				+      split: state => state.ui.navDivision,
			
 
				+      langAbout: state => state.language.home.about
			
 
				     })
			
 
				   },
			
 
				   mounted () {
			
--- a/src/page/about/mobile.vue
+++ b/src/page/about/mobile.vue
@@ -0,0 +1,126 @@
 
				+<template>
			
 
				+  <div class="about-layout">
			
 
				+    <div class="plate01">
			
 
				+      <img class="about-logo" src="@/assets/images/about_logo.png" alt>
			
 
				+      <div class="about-intro">
			
 
				+        <img src="@/assets/images/event.png" alt="">
			
 
				+        <p>四维看看由四维时代团队独立自主研发。作为国内首家3D数字化重建技术中心，四维时代在国际上首创的微米级三维数字化精细扫描技术，较传统三维建模方式在效率上提高200倍以上，远超美国Adobe公司的厘米级精度。</p>
			
 
				+        <p>目前世界上能做到这个精度的只有两家，一家是四维时代，另一家是MIT计算视觉实验室。</p>
			
 
				+        <p>2017年6月，四维时代与德国人工智能研究中心（DFKI）在中德两国总理见证下正式签订《中德人工智能研究院项目》，并成立中德人工智能研究院，利用中德两国技术优势，推进人工智能视觉技术的深入和应用。</p>
			
 
				+        <p>2018年5月，四维时代成功将领先的三维建模技术民用化，推出全球首款消费级3D相机四维看看。</p>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="plate02">
			
 
				+      <img src="@/assets/images/hezhao.png" alt>
			
 
				+    </div>
			
 
				+    <div class="plate03">
			
 
				+      <div class="e-node">
			
 
				+        <h2>{{events.title}}</h2>
			
 
				+        <ul>
			
 
				+          <li v-for="(item,idx) in events.nodes" :key="idx">
			
 
				+            <h3>{{item.year}}</h3>
			
 
				+            <p v-for="(sub, i) in item.txt" :key="i">{{sub}}</p>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </div>
			
 
				+      <div class="contact">
			
 
				+        <img src="@/assets/images/company.png" alt>
			
 
				+        <ul>
			
 
				+          <li v-for="(item,idx) in kefu" :key="idx">
			
 
				+            <i class="iconfont" :class="[`icon-${item.class}`]"></i>
			
 
				+            <h3 :class="item.class">{{item.title}}</h3>
			
 
				+            <p v-for="(sub, i) in item.content" :key="i">{{sub}}</p>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  data () {
			
 
				+    const events = {
			
 
				+      title: '团队大事记',
			
 
				+      nodes: [
			
 
				+        {
			
 
				+          year: '2014年',
			
 
				+          txt: [
			
 
				+            '10月 四维时代创立，成员在人工智能三维数字化重建及数字化虚拟展示技术方面具有世界领先的科研实力。',
			
 
				+            '12月 建模精度达微米级的一种基于光栅扫描的物体数字化三维重建装置，获专利授权。'
			
 
				+          ]
			
 
				+        },
			
 
				+        {
			
 
				+          year: '2015年',
			
 
				+          txt: [
			
 
				+            '8月 “高精度一键式三维数字化重建及其展示”获“中国创翼”青年创业创新大赛三等奖。',
			
 
				+            '10月 作为全国双创代表获得李克强总理接见，并向总理汇报工作。',
			
 
				+            '相继成为故宫博物院、广东省博物馆等文物保护机构的合作伙伴。'
			
 
				+          ]
			
 
				+        },
			
 
				+        {
			
 
				+          year: '2016年',
			
 
				+          txt: [
			
 
				+            '5月 为中国十大考古发现之一—南昌汉代海昏侯国遗址博物馆打造的线上数字博物馆上线。'
			
 
				+          ]
			
 
				+        },
			
 
				+        {
			
 
				+          year: '2017年',
			
 
				+          txt: [
			
 
				+            '6月 在中德两国总理见证下与德国人工智能研究中心签约《中德人工智能研究院项目》，为中德科技交流建立有力纽带。',
			
 
				+            '成为阿斯塔纳世博会中国馆虚拟现实技术唯一指定供应商。'
			
 
				+          ]
			
 
				+        },
			
 
				+        {
			
 
				+          year: '2018年',
			
 
				+          txt: [
			
 
				+            '5月 推出全球首款消费级3D相机四维看看，10分钟即可复刻100平米空间。',
			
 
				+            '11月 中国高科技产业化研究会授予四维看看“科学技术成果”称号。',
			
 
				+            '中国国际高虚拟技术成果交易会授予四维看看“优秀产品奖”。'
			
 
				+          ]
			
 
				+        },
			
 
				+        {
			
 
				+          year: '2019年',
			
 
				+          txt: [
			
 
				+            '4月 为德国陶瓷博物馆展馆及馆藏进行三维数字化重建，并开发数字博物馆App。',
			
 
				+            '6月 推出高精度消费级3D相机四维看看Pro6。'
			
 
				+          ]
			
 
				+        }
			
 
				+      ]
			
 
				+    }
			
 
				+    const kefu = [
			
 
				+      {
			
 
				+        title: '联系我们',
			
 
				+        class: 'lxwm',
			
 
				+        content: [
			
 
				+          '公司：珠海市四维时代网络科技有限公司',
			
 
				+          '地址：广东省珠海市高新区唐家湾港湾大道南港湾一号'
			
 
				+        ]
			
 
				+      },
			
 
				+      {
			
 
				+        title: '客户服务',
			
 
				+        class: 'khfw',
			
 
				+        content: ['客服/售后：4006698025', 'Email：service@4dage.com']
			
 
				+      },
			
 
				+      {
			
 
				+        title: '媒体垂询',
			
 
				+        class: 'mtcx',
			
 
				+        content: ['热线：0756-6996790', 'Email：pr@4dage.com']
			
 
				+      },
			
 
				+      {
			
 
				+        title: '业务合作',
			
 
				+        class: 'ywhz',
			
 
				+        content: ['热线：0756-6996796/6996791', 'Email：sales@4dage.com']
			
 
				+      }
			
 
				+    ]
			
 
				+    return {
			
 
				+      events,
			
 
				+      kefu
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style lang="scss" scoped>
			
 
				+@import "./mstyle.scss";
			
 
				+</style>
			
--- a/src/page/about/mstyle.scss
+++ b/src/page/about/mstyle.scss
@@ -0,0 +1,100 @@
 
				+.about-layout{
			
 
				+  width: 100%;
			
 
				+  .plate01{
			
 
				+    width: 90%;
			
 
				+    margin: 40px auto;
			
 
				+    text-align: center;
			
 
				+    .about-logo{
			
 
				+      width: 80%;
			
 
				+      margin: 20px auto;
			
 
				+    }
			
 
				+    .about-intro{
			
 
				+      text-align: left;
			
 
				+      img{
			
 
				+        width: 180px;
			
 
				+        margin-right: 10px;
			
 
				+        float: left;
			
 
				+      }
			
 
				+      p{
			
 
				+        font-size: 14px;
			
 
				+        line-height: 20px;
			
 
				+        text-align: justify;
			
 
				+        color: #333333;
			
 
				+        margin-bottom: 10px;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+  .plate02{
			
 
				+    width: 100%;
			
 
				+    img{
			
 
				+     width: 100%;
			
 
				+    }
			
 
				+  }
			
 
				+  .plate03{
			
 
				+    margin: 40px auto;
			
 
				+    .e-node {
			
 
				+      text-align: left;
			
 
				+      margin:0 25px;
			
 
				+      color: #000;
			
 
				+      ul{
			
 
				+        border-left: 1px solid rgba($color: #cccccc, $alpha: 0.5);
			
 
				+        padding-left: 25px;
			
 
				+      }
			
 
				+      li {
			
 
				+        margin-bottom: 40px;
			
 
				+      }
			
 
				+      h2 {
			
 
				+        font-size: 20px;
			
 
				+        font-weight: bold;
			
 
				+        margin-bottom: 40px;
			
 
				+        text-align: center;
			
 
				+      }
			
 
				+      h3 {
			
 
				+        font-weight: 400;
			
 
				+        font-size: 16px;
			
 
				+        line-height: 30px;
			
 
				+        position: relative;
			
 
				+      }
			
 
				+      h3::before {
			
 
				+        content: "";
			
 
				+        background: url("~@/assets/images/cicle.png") center no-repeat;
			
 
				+        z-index: 1000;
			
 
				+        display: inline-block;
			
 
				+        width: 12px;
			
 
				+        height: 12px;
			
 
				+        position: absolute;
			
 
				+        left: -32px;
			
 
				+        top: 9px;
			
 
				+      }
			
 
				+
			
 
				+      p {
			
 
				+        font-size: 14px;
			
 
				+        line-height: 22px;
			
 
				+        margin-bottom: 10px;
			
 
				+        font-weight: lighter;
			
 
				+        color: #000;
			
 
				+      }
			
 
				+    }
			
 
				+    .contact{
			
 
				+      width: 100%;
			
 
				+      text-align: center;
			
 
				+      img{
			
 
				+        width: 60%;
			
 
				+        margin:40px 0 20px;
			
 
				+      }
			
 
				+      li{
			
 
				+        margin: 20px 0;
			
 
				+        h3{
			
 
				+          margin: 6px auto;
			
 
				+          font-size: 16px;
			
 
				+        }
			
 
				+        p{
			
 
				+          margin: 6px auto;
			
 
				+          font-size: 16px;
			
 
				+          line-height: 1.2;
			
 
				+          color: #333333;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
--- a/src/page/about/style.scss
+++ b/src/page/about/style.scss
@@ -32,10 +32,12 @@ $txt_delay:0.2s;
 
				         margin-top: 56px;
			
 
				         display: flex;
			
 
				         align-items: flex-start;
			
 
				+        justify-content: space-between;
			
 
				         >img{
			
 
				           width: 360px;
			
 
				           height: 230px;
			
 
				           margin-top: 6px;
			
 
				+          flex-shrink: 0;
			
 
				         }
			
 
				         .intro-r {
			
 
				           text-align: justify;
			
@@ -209,3 +211,13 @@ $txt_delay:0.2s;
 
				      }
			
 
				   }
			
 
				 }
			
 
				+
			
 
				+@media screen and (max-width: 1600px){
			
 
				+  .about-layout {
			
 
				+    #luxy{
			
 
				+      .plate03{
			
 
				+        width: 1190px;
			
 
				+      }
			
 
				+    }
			
 
				+  } 
			
 
				+}
			
--- a/src/page/binocular/index.vue
+++ b/src/page/binocular/index.vue
@@ -1,112 +1,119 @@
 
				 <template>
			
 
				   <div class="product-layout" ref="productLayout">
			
 
				     <div class="plate01 plate">
			
 
				-      <img class="pl01-bg" src="@/assets/images/t-bg.png" alt="">
			
 
				+      <img class="pl01-bg" :src="`${$cdn}images/t-bg.png`" alt>
			
 
				       <div class="layout" :style="{marginLeft:(split - 170)+ 'px'}">
			
 
				-        <img class="product-img" src="@/assets/images/t_product.png" alt="">
			
 
				+        <img class="product-img" :src="`${$cdn}images/t_product.png`" alt>
			
 
				         <div class="info">
			
 
				-          <h2>4DKankan Pro</h2>
			
 
				-          <h2>全球首款 消费级3D空间相机</h2>
			
 
				-          <p><span class="money">￥4999</span>起</p>
			
 
				-          <p class="p1">安霸H2V95专业级芯片，1600万像素双鱼眼</p>
			
 
				-          <p class="p2">Sony IMX 206图像传感器，超爽握感轻便随行</p>
			
 
				-          <div class="btns">
			
 
				-            <a href="" class="button"><vcenter><img src="@/assets/images/product_icon_arrow.png" alt=""></vcenter></a>
			
 
				-            <a href="" class="button">立即购买</a>
			
 
				-          </div>
			
 
				+          <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 class="p1">{{langBinocular.introduce.dec[0]}}</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>-->
			
 
				         </div>
			
 
				       </div>
			
 
				       <div class="benefit plate">
			
 
				-        <h2 class="b-title">3D 4K实景复刻神器</h2>
			
 
				-
			
 
				-        <div :style="{'animation-delay': `${index*0.2}s`}" class="item" v-for="(benefit, index) in benefitGroup" :key="index">
			
 
				-          <i class="iconfont" :class="benefit['fontImg']"></i>
			
 
				-          <h3>{{benefit.title}}</h3>
			
 
				-          <p v-html="benefit.content"></p>
			
 
				+        <h2 class="b-title">{{langBinocular.introduce.subTitle}}</h2>
			
 
				+        <div class="char-con">
			
 
				+          <div
			
 
				+            :style="{'animation-delay': `${index*0.2}s`}"
			
 
				+            class="item"
			
 
				+            v-for="(benefit, index) in langBinocular.introduce.benefitGroup"
			
 
				+            :key="index"
			
 
				+          >
			
 
				+            <i class="iconfont" :class="benefit['fontImg']"></i>
			
 
				+            <h3>{{benefit.title}}</h3>
			
 
				+            <p v-html="benefit.content"></p>
			
 
				+          </div>
			
 
				         </div>
			
 
				       </div>
			
 
				     </div>
			
 
				 
			
 
				     <div class="plate02 plate">
			
 
				       <div class="application">
			
 
				-        <h2>4DKankan App</h2>
			
 
				-        <h2>快速编辑和分享你的互动式视频</h2>
			
 
				-        <h3>分享你的空间故事</h3>
			
 
				+        <h2>{{langBinocular.app.title}}</h2>
			
 
				+        <h2>{{langBinocular.app.sub[0]}}</h2>
			
 
				+        <h3>{{langBinocular.app.sub[1]}}</h3>
			
 
				         <div class="download-btn">
			
 
				           <div class="apple">App Store</div>
			
 
				           <div class="android">Android</div>
			
 
				         </div>
			
 
				       </div>
			
 
				       <div class="app-img">
			
 
				-        <img src="@/assets/images/app_img1.png"  class="i1">
			
 
				-        <img src="@/assets/images/app_img2.png"  class="i2">
			
 
				-        <img src="@/assets/images/app_img3.png"  class="i3">
			
 
				+        <img :src="`${$cdn}images/app_img1.png`" class="i1">
			
 
				+        <img :src="`${$cdn}images/app_img2.png`" class="i2">
			
 
				+        <img :src="`${$cdn}images/app_img3.png`" class="i3">
			
 
				       </div>
			
 
				     </div>
			
 
				 
			
 
				     <div class="plate03 plate">
			
 
				       <div class="info">
			
 
				-        <h2 class="b-title">身临其境，自动导览</h2>
			
 
				-        <p class="b-label">同步录制漫游和声音，带你声临其境，享你所享</p>
			
 
				-        <!-- <img src="@/assets/images/product_img_content_4.png" alt=""> -->
			
 
				-        <phone src="https://www.4dkankan.com/showPC.html?m=5cQcvVwp" />
			
 
				+        <h2 class="b-title">{{langBinocular.guide[0].title[0]}}</h2>
			
 
				+        <p class="b-label">{{langBinocular.guide[0].title[1]}}</p>
			
 
				+        <!-- <img :src="`${$cdn}images/product_img_content_4.png`" alt=""> -->
			
 
				+        <phone src="https://www.4dkankan.com/showPC.html?m=5cQcvVwp"/>
			
 
				       </div>
			
 
				       <div class="fkkj-layout plate">
			
 
				         <div class="fkkj-imgcon">
			
 
				-          <img class="fk_logo" src="@/assets/images/fk_logo.png" alt="">
			
 
				-          <img class="fk_jiantou" src="@/assets/images/fk_jiantou.png" alt="">
			
 
				-          <img class="fk_jiantou-2" src="@/assets/images/fk_jiantou.png" alt="">
			
 
				-          <img class="fk_img" src="@/assets/images/fk_img.png" alt="">
			
 
				-          <div class="upload_txt">上传至云端计算</div>
			
 
				-          <img class="fk_shouji" src="@/assets/images/fk_shouji.png" alt="">
			
 
				-          <div class="shouji_txt">用户端空间展示</div>
			
 
				-          <img class="fk_paishe" src="@/assets/images/fk_paishe.png" alt="">
			
 
				-          <div class="paishe_txt">APP+空间相机拍摄</div>
			
 
				-          <img class="fk_upload" src="@/assets/images/fk_upload.png" alt="">
			
 
				-          <img class="fk_mask" src="@/assets/images/fk_mask.png" alt="">
			
 
				-          <img class="fk_mask_1" src="@/assets/images/fk_mask.png" alt="">
			
 
				-          <img class="fk_mask_2" src="@/assets/images/fk_mask.png" alt="">
			
 
				+          <img class="fk_logo" :src="`${$cdn}images/fk_logo.png`" alt>
			
 
				+          <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>
			
 
				+          <img class="fk_shouji" :src="`${$cdn}images/fk_shouji.png`" alt>
			
 
				+          <div class="shouji_txt">{{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>
			
 
				+          <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>
			
 
				+          <img class="fk_mask_2" :src="`${$cdn}images/fk_mask.png`" alt>
			
 
				+        </div>
			
 
				+        <div class="fkkj-right">
			
 
				+          <h2 class="b-title">{{langBinocular.guide[1].title[0]}}</h2>
			
 
				         </div>
			
 
				-        <div class="fkkj-right"><h2 class="b-title">十分钟复刻空间简便易用</h2></div>
			
 
				       </div>
			
 
				       <div class="mxsc-layout plate">
			
 
				         <div class="mxsc-left">
			
 
				-          <h2 class="b-title">空间模型瞬间自动生成</h2>
			
 
				-          <p class="b-label">平面结构一目了然</p>
			
 
				+          <h2 class="b-title">{{langBinocular.guide[2].title[0]}}</h2>
			
 
				+          <p class="b-label">{{langBinocular.guide[2].title[1]}}</p>
			
 
				         </div>
			
 
				         <div class="mxsc-imgcon">
			
 
				-          <img class="mx_house" src="@/assets/images/mx_house.png" alt="">
			
 
				-          <img class="mx_platform" src="@/assets/images/mx_platform.png" alt="">
			
 
				+          <img class="mx_house" :src="`${$cdn}images/mx_house.png`" alt>
			
 
				+          <img class="mx_platform" :src="`${$cdn}images/mx_platform.png`" alt>
			
 
				         </div>
			
 
				       </div>
			
 
				       <div class="hdsp-layout plate">
			
 
				         <div class="hdsp-imgcon">
			
 
				-          <img class="hdsp_1" src="@/assets/images/hdsp_1.png" alt="">
			
 
				-          <img class="hdsp_2" src="@/assets/images/hdsp_2.png" alt="">
			
 
				-          <img class="hdsp_3" src="@/assets/images/hdsp_3.png" alt="">
			
 
				+          <img class="hdsp_1" :src="`${$cdn}images/hdsp_1.png`" alt>
			
 
				+          <img class="hdsp_2" :src="`${$cdn}images/hdsp_2.png`" alt>
			
 
				+          <img class="hdsp_3" :src="`${$cdn}images/hdsp_3.png`" alt>
			
 
				         </div>
			
 
				         <div class="hdsp-right">
			
 
				-          <h2 class="b-title">编辑和分享互动式视频</h2>
			
 
				-          <p class="b-label">让你的空间讲故事</p>
			
 
				+          <h2 class="b-title">{{langBinocular.guide[3].title[0]}}</h2>
			
 
				+          <p class="b-label">{{langBinocular.guide[3].title[1]}}</p>
			
 
				         </div>
			
 
				       </div>
			
 
				     </div>
			
 
				 
			
 
				-    <div class="plate04 ">
			
 
				-      <div class="info plate" ref='p4Info'>
			
 
				-        <h2 class="b-title">极致工艺，登峰造极</h2>
			
 
				-        <p class="b-label">由多达794个精密元件组装而成，超细腻喷涂工艺</p>
			
 
				-        <div class="boom">
			
 
				-        </div>
			
 
				+    <div class="plate04">
			
 
				+      <div class="info plate" ref="p4Info">
			
 
				+        <h2 class="b-title">{{langBinocular.technology.title}}</h2>
			
 
				+        <p class="b-label">{{langBinocular.technology.dec}}</p>
			
 
				+        <div class="boom"></div>
			
 
				       </div>
			
 
				     </div>
			
 
				 
			
 
				     <div class="plate05 plate">
			
 
				       <div class="info">
			
 
				-        <div class="b-title">4DKankan PRO详细参数</div>
			
 
				-        <img src="@/assets/images/product_img_content_6.jpg" alt="">
			
 
				+        <div class="b-title">{{langBinocular.parmas.name}}</div>
			
 
				+        <img :src="`${$cdn}images/product_img_content_binocular.png`" alt>
			
 
				 
			
 
				-        <div class="standard-layout">
			
 
				+        <!-- <div class="standard-layout">
			
 
				           <div class="standard-xinghao">
			
 
				             <h3 class="s-title">{{standardGroup.label}}</h3>
			
 
				             <div class="s-value">{{standardGroup.name}}</div>
			
@@ -133,147 +140,157 @@
 
				               </div>
			
 
				             </div>
			
 
				           </div>
			
 
				-        </div>
			
 
				-        <div class="btns">
			
 
				+        </div>-->
			
 
				+        <!-- <div class="btns">
			
 
				           <a href="" class="button">立即购买</a>
			
 
				-        </div>
			
 
				+        </div>-->
			
 
				       </div>
			
 
				     </div>
			
 
				   </div>
			
 
				 </template>
			
 
				 
			
 
				 <script>
			
 
				-import {mapState} from 'vuex'
			
 
				+import { mapState } from 'vuex'
			
 
				 import vcenter from '@/components/vcenter'
			
 
				 import { getPosition } from '@/util'
			
 
				 import phone from '@/components/phone'
			
 
				+import browser from '@/util/browser'
			
 
				 
			
 
				 export default {
			
 
				   data () {
			
 
				-    let benefitGroup = [
			
 
				-      {
			
 
				-        fontImg: 'icon-koudai',
			
 
				-        icon: require('@/assets/images/product_img_02_a@2x.png'),
			
 
				-        title: '轻便易携  装进口袋',
			
 
				-        content: '机身体积与普通手机无异， <br>重量为115克，<br>仅为同类型产品重量的1/30。'
			
 
				-      },
			
 
				-      {
			
 
				-        fontImg: 'icon-jianmo',
			
 
				-        icon: require('@/assets/images/product_img_02_b@2x.png'),
			
 
				-        title: '轻松操作  高效建模',
			
 
				-        content: '无需具备专业知识，10分钟即可采集<br>100平米空间数据，一键上传云端系统， <br>5分钟自动生成模型。'
			
 
				-      },
			
 
				-      {
			
 
				-        fontImg: 'icon-manyou',
			
 
				-        icon: require('@/assets/images/product_img_02_c@2x.png'),
			
 
				-        title: '高精还原   空间漫游',
			
 
				-        content: '720°无死角复刻3D实景， <br>呈现4K高清画质， <br>实现沉浸式空间漫游。'
			
 
				-      },
			
 
				-      {
			
 
				-        fontImg: 'icon-paise',
			
 
				-        icon: require('@/assets/images/product_img_02_d@2x.png'),
			
 
				-        title: '室内室外   皆可拍摄',
			
 
				-        content: '攻克同类型设备无法采集室外数据<br>的技术难点，使得3D数据采集<br>不再受地点限制，室内室外皆可完成。'
			
 
				-      },
			
 
				-      {
			
 
				-        fontImg: 'icon-genxing',
			
 
				-        icon: require('@/assets/images/product_img_02_e@2x.png'),
			
 
				-        title: '自由编辑   随时更新',
			
 
				-        content: '贴心打造模型编辑平台<br>支持图文、 视频、 链接等信息热点的<br>添加及更新。'
			
 
				-      }
			
 
				-    ]
			
 
				-
			
 
				     let showGroup = [
			
 
				       {
			
 
				         title: '空间模型瞬间自动生成',
			
 
				         label: '平面结构一目了然',
			
 
				-        cover: require('@/assets/images/product_img_content_1.jpg')
			
 
				+        cover: this.$cdn + 'images/product_img_content_1.jpg'
			
 
				       },
			
 
				       {
			
 
				         title: '编辑属于你的空间故事',
			
 
				         label: '让故事迷漫於空间',
			
 
				-        cover: require('@/assets/images/product_img_content_2.jpg')
			
 
				+        cover: this.$cdn + 'images/product_img_content_2.jpg'
			
 
				       },
			
 
				       {
			
 
				         title: '把世界装进口袋里',
			
 
				         label: '世界掌握在你手中',
			
 
				-        cover: require('@/assets/images/product_img_content_3.jpg')
			
 
				+        cover: this.$cdn + 'images/product_img_content_3.jpg'
			
 
				       }
			
 
				     ]
			
 
				 
			
 
				     let standardGroup = {
			
 
				       label: '型号',
			
 
				       name: '四维二目',
			
 
				-      info: [{
			
 
				-        label: '高度',
			
 
				-        value: '141.5毫米'
			
 
				-      }, {
			
 
				-        label: '宽度',
			
 
				-        value: '71.1mm'
			
 
				-      }, {
			
 
				-        label: '厚度',
			
 
				-        value: '17.98mm'
			
 
				-      }, {
			
 
				-        label: '重量',
			
 
				-        value: '115g'
			
 
				-      }],
			
 
				-      params1: [{
			
 
				-        label: '材质',
			
 
				-        value: ['钛金属', '磨砂背']
			
 
				-      }, {
			
 
				-        label: '摄像头',
			
 
				-        value: ['f / 2.0 大光圈镜头', '3200万像素SNOY sensor', '220°双鱼眼镜头', '9片8组光学镜头', '3K视频录制速度为30fps']
			
 
				-      }, {
			
 
				-        label: '连接',
			
 
				-        value: ['蓝牙：5.0', 'WiFi：802.11a / b / g / n / ac']
			
 
				-      }, {
			
 
				-        label: '',
			
 
				-        value: []
			
 
				-      }],
			
 
				-      params2: [{
			
 
				-        label: '电池',
			
 
				-        value: ['3040mAh', '通过USB快速充电']
			
 
				-      }, {
			
 
				-        label: '存储',
			
 
				-        value: ['支持128G TF卡', '3K视频 录制120分钟']
			
 
				-      }, {
			
 
				-        label: '端口',
			
 
				-        value: ['microUSB', '三脚架固定孔']
			
 
				-      }, {
			
 
				-        label: '防水防尘',
			
 
				-        value: ['IP54']
			
 
				-      }]
			
 
				+      info: [
			
 
				+        {
			
 
				+          label: '高度',
			
 
				+          value: '141.5毫米'
			
 
				+        },
			
 
				+        {
			
 
				+          label: '宽度',
			
 
				+          value: '71.1mm'
			
 
				+        },
			
 
				+        {
			
 
				+          label: '厚度',
			
 
				+          value: '17.98mm'
			
 
				+        },
			
 
				+        {
			
 
				+          label: '重量',
			
 
				+          value: '115g'
			
 
				+        }
			
 
				+      ],
			
 
				+      params1: [
			
 
				+        {
			
 
				+          label: '材质',
			
 
				+          value: ['钛金属', '磨砂背']
			
 
				+        },
			
 
				+        {
			
 
				+          label: '摄像头',
			
 
				+          value: [
			
 
				+            'f / 2.0 大光圈镜头',
			
 
				+            '3200万像素SNOY sensor',
			
 
				+            '220°双鱼眼镜头',
			
 
				+            '9片8组光学镜头',
			
 
				+            '3K视频录制速度为30fps'
			
 
				+          ]
			
 
				+        },
			
 
				+        {
			
 
				+          label: '连接',
			
 
				+          value: ['蓝牙：5.0', 'WiFi：802.11a / b / g / n / ac']
			
 
				+        },
			
 
				+        {
			
 
				+          label: '',
			
 
				+          value: []
			
 
				+        }
			
 
				+      ],
			
 
				+      params2: [
			
 
				+        {
			
 
				+          label: '电池',
			
 
				+          value: ['3040mAh', '通过USB快速充电']
			
 
				+        },
			
 
				+        {
			
 
				+          label: '存储',
			
 
				+          value: ['支持128G TF卡', '3K视频 录制120分钟']
			
 
				+        },
			
 
				+        {
			
 
				+          label: '端口',
			
 
				+          value: ['microUSB', '三脚架固定孔']
			
 
				+        },
			
 
				+        {
			
 
				+          label: '防水防尘',
			
 
				+          value: ['IP54']
			
 
				+        }
			
 
				+      ]
			
 
				     }
			
 
				 
			
 
				     return {
			
 
				-      benefitGroup,
			
 
				       showGroup,
			
 
				+      ismobile: browser.mobile,
			
 
				       standardGroup
			
 
				     }
			
 
				   },
			
 
				   computed: {
			
 
				     ...mapState({
			
 
				-      split: state => state.ui.navDivision
			
 
				+      split: state => state.ui.navDivision,
			
 
				+      langBinocular: state => state.language.home.binocular
			
 
				     })
			
 
				   },
			
 
				-  methods: {
			
 
				-
			
 
				-  },
			
 
				+  methods: {},
			
 
				   mounted () {
			
 
				     this.timeout = setTimeout(() => {
			
 
				       let height = getPosition(this.$refs.productLayout).y
			
 
				-      let items = Array.from(this.$refs.productLayout.querySelectorAll('.plate'))
			
 
				+      let items = Array.from(
			
 
				+        this.$refs.productLayout.querySelectorAll('.plate')
			
 
				+      )
			
 
				       this.scrollHandle = function () {
			
 
				         items.forEach((item, index) => {
			
 
				           let isContain = Array.from(item.classList).some(sub => {
			
 
				-            return sub === 'hdsp-layout' || sub === 'mxsc-layout' || sub === 'benefit'
			
 
				+            return (
			
 
				+              sub === 'hdsp-layout' ||
			
 
				+              sub === 'mxsc-layout' ||
			
 
				+              sub === 'benefit'
			
 
				+            )
			
 
				           })
			
 
				 
			
 
				-          let addHeight = item.offsetParent && (item.offsetParent.nodeName).toLowerCase() === 'body' ? (item.offsetTop + height) : (item.offsetTop + item.offsetParent.offsetTop + height)
			
 
				+          let addHeight =
			
 
				+            item.offsetParent &&
			
 
				+            item.offsetParent.nodeName.toLowerCase() === 'body'
			
 
				+              ? item.offsetTop + height
			
 
				+              : item.offsetTop + item.offsetParent.offsetTop + height
			
 
				 
			
 
				-          if (addHeight <= window.innerHeight + (window.scrollY || window.pageYOffset) - 300 && isContain) {
			
 
				+          if (
			
 
				+            addHeight <=
			
 
				+              window.innerHeight +
			
 
				+                (window.scrollY || window.pageYOffset) -
			
 
				+                300 &&
			
 
				+            isContain
			
 
				+          ) {
			
 
				             item.classList.remove(`hide${index + 1}`)
			
 
				-          } else if (addHeight <= window.innerHeight + (window.scrollY || window.pageYOffset) - 500 && !isContain) {
			
 
				+          } else if (
			
 
				+            addHeight <=
			
 
				+              window.innerHeight +
			
 
				+                (window.scrollY || window.pageYOffset) -
			
 
				+                500 &&
			
 
				+            !isContain
			
 
				+          ) {
			
 
				             item.classList.remove(`hide${index + 1}`)
			
 
				           } else {
			
 
				             item.classList.add(`hide${index + 1}`)
			
@@ -288,10 +305,10 @@ export default {
 
				     clearTimeout(this.timeout)
			
 
				     window.removeEventListener('scroll', this.scrollHandle)
			
 
				   },
			
 
				-  components: {vcenter, phone}
			
 
				+  components: { vcenter, phone }
			
 
				 }
			
 
				 </script>
			
 
				 
			
 
				 <style lang="scss" scoped>
			
 
				-@import './style.scss';
			
 
				+@import "./style.scss";
			
 
				 </style>
			
--- a/src/page/binocular/style.scss
+++ b/src/page/binocular/style.scss
--- a/src/page/cases/index.vue
+++ b/src/page/cases/index.vue
@@ -8,8 +8,8 @@
 
				           <vcenter>
			
 
				             <div class="list-txt">{{caseType}}</div>
			
 
				             <ul class="list-navs">
			
 
				-              <li><span>排序</span></li>
			
 
				-              <li :class="{active:sortActive===item.id}" v-for="(item,index) in sort" :key="index" @click="sortActive = item.id">
			
 
				+              <li><span>{{langCases.sort.name}}</span></li>
			
 
				+              <li :class="{active:sortActive===item.id}" v-for="(item,index) in langCases.sort.items" :key="index" @click="sortActive = item.id">
			
 
				                 <span>{{item.name}}</span>
			
 
				               </li>
			
 
				             </ul>
			
@@ -18,9 +18,9 @@
 
				       </div>
			
 
				     </div>
			
 
				   </div>
			
 
				-  <div class="case-body" :style="{marginLeft:(split-380)+ 'px'}">
			
 
				+  <div class="case-body" :style="{marginLeft:(split-(isWide?380:329))+ 'px'}">
			
 
				     <div style="display:inline-block" v-for="(item,i) in scene" :key="i">
			
 
				-      <card class="card" :data="item" :style="{marginRight:(i+1)%4===0?'0':'50px'}"></card>
			
 
				+      <card class="card" :data="item" :style="{marginRight:(i+1)%(isWide?4:3)===0?'0':'50px'}"></card>
			
 
				     </div>
			
 
				     <div class="paging">
			
 
				       <vcenter>
			
@@ -39,102 +39,6 @@ import vcenter from '@/components/vcenter'
 
				 import card from '@/components/card'
			
 
				 import Paging from '@/components/Paging'
			
 
				 
			
 
				-const cardArr = [{
			
 
				-  title: 'Oin Bar 前台',
			
 
				-  username: 'VannyShen',
			
 
				-  img: require('@/assets/images/cases/case_01.png'),
			
 
				-  viewcount: '2564'
			
 
				-}, {
			
 
				-  title: 'Oin Bar 前台',
			
 
				-  img: require('@/assets/images/cases/case_02.png'),
			
 
				-  username: 'VannyShen',
			
 
				-  viewcount: '2564'
			
 
				-}, {
			
 
				-  title: 'Oin Bar 前台',
			
 
				-  img: require('@/assets/images/cases/case_03.png'),
			
 
				-  username: 'VannyShen',
			
 
				-  viewcount: '2564'
			
 
				-}, {
			
 
				-  title: 'Oin Bar 前台',
			
 
				-  img: require('@/assets/images/cases/case_04.png'),
			
 
				-  username: 'VannyShen',
			
 
				-  viewcount: '2564'
			
 
				-}, {
			
 
				-  title: 'Oin Bar 前台',
			
 
				-  img: require('@/assets/images/cases/case_05.png'),
			
 
				-  username: 'VannyShen',
			
 
				-  viewcount: '2564'
			
 
				-}, {
			
 
				-  title: 'Oin Bar 前台',
			
 
				-  img: require('@/assets/images/cases/case_06.png'),
			
 
				-  username: 'VannyShen',
			
 
				-  viewcount: '2564'
			
 
				-}, {
			
 
				-  title: 'Oin Bar 前台',
			
 
				-  img: require('@/assets/images/cases/case_07.png'),
			
 
				-  username: 'VannyShen',
			
 
				-  viewcount: '2564'
			
 
				-}, {
			
 
				-  title: 'Oin Bar 前台',
			
 
				-  img: require('@/assets/images/cases/case_08.png'),
			
 
				-  username: 'VannyShen',
			
 
				-  viewcount: '2564'
			
 
				-}, {
			
 
				-  title: 'Oin Bar 前台',
			
 
				-  img: require('@/assets/images/cases/case_09.png'),
			
 
				-  username: 'VannyShen',
			
 
				-  viewcount: '2564'
			
 
				-}, {
			
 
				-  title: 'Oin Bar 前台',
			
 
				-  img: require('@/assets/images/cases/case_10.png'),
			
 
				-  username: 'VannyShen',
			
 
				-  viewcount: '2564'
			
 
				-}, {
			
 
				-  title: 'Oin Bar 前台',
			
 
				-  img: require('@/assets/images/cases/case_11.png'),
			
 
				-  username: 'VannyShen',
			
 
				-  viewcount: '2564'
			
 
				-}, {
			
 
				-  title: 'Oin Bar 前台',
			
 
				-  img: require('@/assets/images/cases/case_12.png'),
			
 
				-  username: 'VannyShen',
			
 
				-  viewcount: '2564'
			
 
				-}, {
			
 
				-  title: 'Oin Bar 前台',
			
 
				-  img: require('@/assets/images/cases/case_13.png'),
			
 
				-  username: 'VannyShen',
			
 
				-  viewcount: '2564'
			
 
				-}, {
			
 
				-  title: 'Oin Bar 前台',
			
 
				-  img: require('@/assets/images/cases/case_14.png'),
			
 
				-  username: 'VannyShen',
			
 
				-  viewcount: '2564'
			
 
				-}, {
			
 
				-  title: 'Oin Bar 前台',
			
 
				-  img: require('@/assets/images/cases/case_15.png'),
			
 
				-  username: 'VannyShen',
			
 
				-  viewcount: '2564'
			
 
				-}, {
			
 
				-  title: 'Oin Bar 前台',
			
 
				-  img: require('@/assets/images/cases/case_16.png'),
			
 
				-  username: 'VannyShen',
			
 
				-  viewcount: '2564'
			
 
				-}]
			
 
				-
			
 
				-const sort = [
			
 
				-  {
			
 
				-    id: 1,
			
 
				-    name: '网站推荐'
			
 
				-  },
			
 
				-  {
			
 
				-    id: 2,
			
 
				-    name: '最新发布'
			
 
				-  },
			
 
				-  {
			
 
				-    id: 3,
			
 
				-    name: '热门浏览'
			
 
				-  }
			
 
				-]
			
 
				 let typeArr = {
			
 
				   '房地产': 2,
			
 
				   '博物馆': 1,
			
@@ -150,6 +54,12 @@ let typeTotal = {
 
				   '餐饮': 30,
			
 
				   '其他': 150
			
 
				 }
			
 
				+
			
 
				+let wh = {
			
 
				+  width: window.innerWidth,
			
 
				+  height: window.innerHeight
			
 
				+}
			
 
				+let isWide = wh.width > 1400
			
 
				 export default {
			
 
				   // import引入的组件需要注入到对象中才能使用
			
 
				   components: {
			
@@ -161,19 +71,19 @@ export default {
 
				     // 这里存放数据
			
 
				 
			
 
				     return {
			
 
				-      cardArr,
			
 
				       total: 0,
			
 
				       pageSize: 10,
			
 
				       currentPage: 1,
			
 
				-      sort,
			
 
				       sortActive: 1,
			
 
				       scene: [],
			
 
				+      isWide,
			
 
				       caseType: null
			
 
				     }
			
 
				   },
			
 
				   // 监听属性 类似于data概念
			
 
				   computed: {
			
 
				     ...mapState({
			
 
				+      langCases: state => state.language.home.cases,
			
 
				       split: state => state.ui.navDivision
			
 
				     })
			
 
				     // caseType () {
			
@@ -206,6 +116,7 @@ export default {
 
				       this.currentPage = data
			
 
				     },
			
 
				     async getData () {
			
 
				+      window.scrollTo(0, 0)
			
 
				       let params = {
			
 
				         sceneType: typeArr[this.caseType],
			
 
				         sceneInterest: this.sortActive,
			
--- a/src/page/chat/index.vue
+++ b/src/page/chat/index.vue
@@ -24,5 +24,7 @@ export default {
 
				   background-color: #1fe4dc;
			
 
				   text-align: center;
			
 
				   z-index: 99;
			
 
				+  display: none;
			
 
				 }
			
 
				+
			
 
				 </style>
			
--- a/src/page/eight/index.vue
+++ b/src/page/eight/index.vue
@@ -1,81 +1,84 @@
 
				 <template>
			
 
				   <div class="product-layout" ref="productLayout">
			
 
				     <div class="plate01 plate">
			
 
				-      <img class="pl01-bg" src="@/assets/images/eight-bg.png" alt="">
			
 
				+      <img class="pl01-bg" :src="`${$cdn}images/eight-bg.png`" alt="">
			
 
				       <div class="layout" :style="{marginLeft:(split - 170)+ 'px'}">
			
 
				-        <img class="product-img" src="@/assets/images/banner_pro.png" alt="">
			
 
				+        <img class="product-img" :src="`${$cdn}images/banner_pro.png`" alt="">
			
 
				         <div class="info">
			
 
				-          <h2>4DKankan Pro</h2>
			
 
				-          <h2>让空间讲故事</h2>
			
 
				-          <p><span class="money">￥4999</span>起</p>
			
 
				-          <p class="p1">骁龙835高性能处理器，6颗200°超广角鱼眼镜头</p>
			
 
				-          <p class="p2">高速5GWi-Fi传输方式，超强AI算法自动建模</p>
			
 
				-          <div class="btns" @click="$router.push({name:'purchase'})">
			
 
				-            <a class="button"><vcenter><img src="@/assets/images/product_icon_arrow.png" alt=""></vcenter></a>
			
 
				-            <a class="button">立即购买</a>
			
 
				-          </div>
			
 
				+          <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 class="p1">{{langEight.introduce.dec[0]}}</p>
			
 
				+          <p class="p2">{{langEight.introduce.dec[1]}}</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 class="benefit plate">
			
 
				-        <h2 class="b-title">3D 4K实景复刻神器</h2>
			
 
				-
			
 
				-        <div :style="{'animation-delay': `${index*0.2}s`}" class="item" v-for="(benefit, index) in benefitGroup" :key="index">
			
 
				-          <i class="iconfont" :class="benefit['fontImg']"></i>
			
 
				-          <h3>{{benefit.title}}</h3>
			
 
				-          <p v-html="benefit.content"></p>
			
 
				+        <h2 class="b-title">{{langEight.introduce.subTitle}}</h2>
			
 
				+        <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>
			
 
				+          </div>
			
 
				         </div>
			
 
				       </div>
			
 
				     </div>
			
 
				 
			
 
				     <div class="plate02 plate">
			
 
				       <div class="application">
			
 
				-        <h2>4DKankan App</h2>
			
 
				-        <h2>快速编辑和分享你的互动式视频</h2>
			
 
				-        <h3>分享你的空间故事</h3>
			
 
				+        <h2>{{langEight.app.title}}</h2>
			
 
				+        <h2>{{langEight.app.sub[0]}}</h2>
			
 
				+        <h3>{{langEight.app.sub[1]}}</h3>
			
 
				         <div class="download-btn">
			
 
				           <div class="apple">App Store</div>
			
 
				           <div class="android">Android</div>
			
 
				         </div>
			
 
				       </div>
			
 
				       <div class="app-img">
			
 
				-        <img src="@/assets/images/app_img1.png"  class="i1">
			
 
				-        <img src="@/assets/images/app_img2.png"  class="i2">
			
 
				-        <img src="@/assets/images/app_img3.png"  class="i3">
			
 
				+        <img :src="`${$cdn}images/app_img1.png`"  class="i1">
			
 
				+        <img :src="`${$cdn}images/app_img2.png`"  class="i2">
			
 
				+        <img :src="`${$cdn}images/app_img3.png`"  class="i3">
			
 
				       </div>
			
 
				     </div>
			
 
				 
			
 
				     <div class="plate03 plate">
			
 
				       <div class="info">
			
 
				-        <h2 class="b-title">720度、8K分辨率捕捉所有驚喜和美景</h2>
			
 
				+        <h2 class="b-title">{{langEight.definition.title}}</h2>
			
 
				       </div>
			
 
				       <div class="front">
			
 
				-        <img class="front-img" src="@/assets/images/camera1.png" alt="">
			
 
				+        <img class="front-img" :src="`${$cdn}images/camera1.png`" alt="">
			
 
				         <div class="f-right">
			
 
				-          <p>如自己看到的一般美麗，給人一種驚艷感，讓您覺得「就在眼前，就在當下」。從靜態圖像到較長的影片，以生動、高解像度 720度世界記錄您的記憶。全新 PRO 能夠提供更高的品質和效能。</p>
			
 
				-          <div class="f-params">
			
 
				-            <span v-for="(item,i) in params" :key="i">
			
 
				+          <p>{{langEight.definition.top.dec[0]}}</p>
			
 
				+          <p>{{langEight.definition.top.dec[1]}}</p>
			
 
				+          <p>{{langEight.definition.top.dec[2]}}</p>
			
 
				+
			
 
				+          <!-- <div class="f-params">
			
 
				+            <span v-for="(item,i) in langEight.definition.top.params" :key="i">
			
 
				               {{item}}
			
 
				             </span>
			
 
				-          </div>
			
 
				-          <img class="f-img" src="@/assets/images/xingkong.png" alt="">
			
 
				-          <div class="f-intro">
			
 
				-            <p>*1 资料一完整高清（1920x1080）解像度记录</p>
			
 
				-            <p>但是球面全景实训的解像度在观看时会随显示器类型或显示器放大情况而异</p>
			
 
				-          </div>
			
 
				+          </div> -->
			
 
				+          <!-- <img class="f-img" :src="`${$cdn}images/xingkong.png`" alt=""> -->
			
 
				+          <iframe  class="f-img" src="https://www.4dage.com/overview/webvr/tour.html" frameborder="0"></iframe>
			
 
				         </div>
			
 
				       </div>
			
 
				       <div class="bottom plate">
			
 
				-        <img class="front-img" src="@/assets/images/camera2.png" alt="">
			
 
				+        <img class="front-img" :src="`${$cdn}images/camera2.png`" alt="">
			
 
				         <div class="f-right">
			
 
				-          <div class="b-title">4DKankan PRO 功能配置更高級</div>
			
 
				-          <p>如自己看到的一般美麗，給人一種驚艷感，讓您覺得「就在眼前，就在當下」。從靜態圖像到較長的影片，以生動、高解像度 720度世界記錄您的記憶。全新 PRO 能夠提供更高的品質和效能。</p>
			
 
				+          <div class="b-title">{{langEight.definition.bottom.title}}</div>
			
 
				+          <p>{{langEight.definition.bottom.dec[0]}}</p>
			
 
				+          <p>{{langEight.definition.bottom.dec[1]}}</p>
			
 
				+          <p>{{langEight.definition.bottom.dec[2]}}</p>
			
 
				+
			
 
				           <div class="f-params">
			
 
				-            <div class="f-div"><img  src="@/assets/images/camera3.png" alt=""></div>
			
 
				-            <div class="f-div"><img  src="@/assets/images/camera4.png" alt=""></div>
			
 
				-            <div class="f-item" v-for="(item,i) in params2" :key="i">
			
 
				+            <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>
			
@@ -83,25 +86,26 @@
 
				 
			
 
				     <div class="plate04 plate">
			
 
				       <div class="info">
			
 
				-        <h2 class="b-title">4DKankan Pro 硬件</h2>
			
 
				-        <p class="b-label">采用一线厂商主流硬件产品</p>
			
 
				+        <h2 class="b-title">{{langEight.hardware[0].title[0]}}</h2>
			
 
				+        <p class="b-label">{{langEight.hardware[0].title[1]}}</p>
			
 
				       </div>
			
 
				       <div class="hsxp-layout">
			
 
				         <div class="hsxp-imgcon">
			
 
				           <div></div>
			
 
				         </div>
			
 
				         <div class="hsxp-right">
			
 
				-            <div class="b-title">海思 摄像机芯片</div>
			
 
				-            <div class="b-label">战略合作</div>
			
 
				+            <div class="b-title">{{langEight.hardware[1].title[0]}}</div>
			
 
				+            <div class="b-label">{{langEight.hardware[1].title[1]}}</div>
			
 
				         </div>
			
 
				       </div>
			
 
				       <div class="qmjt-layout plate">
			
 
				         <div class="qmjt-left">
			
 
				-            <div class="b-title">自研12透镜 超高清球幕镜头</div>
			
 
				-            <div class="b-label">自主研发、定制开模</div>
			
 
				+            <div class="b-title">{{langEight.hardware[2].title[0]}}</div>
			
 
				+            <div class="b-label">{{langEight.hardware[2].title[1]}}</div>
			
 
				+            <div class="b-label">{{langEight.hardware[2].title[2]}}</div>
			
 
				         </div>
			
 
				         <div class="qmjt-imgcon">
			
 
				-          <img src="@/assets/images/lens.png" alt="">
			
 
				+          <img :src="`${$cdn}images/lens.png`" alt="">
			
 
				         </div>
			
 
				       </div>
			
 
				       <div class="cgq-layout plate">
			
@@ -109,70 +113,54 @@
 
				           <div></div>
			
 
				         </div>
			
 
				         <div class="cgq-right">
			
 
				-            <div class="b-title">SONY CMOS 图像传感器</div>
			
 
				-            <div class="b-label">一线厂商供应</div>
			
 
				+            <div class="b-title">{{langEight.hardware[3].title[0]}}</div>
			
 
				         </div>
			
 
				       </div>
			
 
				       <div class="jzxj-layout plate">
			
 
				         <div class="jzxj-left">
			
 
				-            <div class="b-title">工艺精湛 精致细节</div>
			
 
				-            <div class="b-label">流畅自然 简洁不失优雅</div>
			
 
				+            <div class="b-title">{{langEight.hardware[4].title[0]}}</div>
			
 
				+            <div class="b-label">{{langEight.hardware[4].title[1]}}</div>
			
 
				         </div>
			
 
				         <div class="jzxj-imgcon">
			
 
				-          <img src="@/assets/images/jzxj.png" alt="">
			
 
				+          <img :src="`${$cdn}images/jzxj.png`" alt="">
			
 
				         </div>
			
 
				       </div>
			
 
				     </div>
			
 
				 
			
 
				     <div class="plate05">
			
 
				       <div class="qingxidu">
			
 
				-        <div class="b-title">图片清晰度</div>
			
 
				-        <compare class="c-qxd" :content="case1.content"
			
 
				-        :back="case1.back"
			
 
				-        :ltxt="case1.lTxt"
			
 
				-        :rtxt="case1.rTxt"
			
 
				-        :lmask="case1.lMask"
			
 
				-        :rmask="case1.rMask"
			
 
				+        <div class="b-title">{{langEight.feature.definition.title}}</div>
			
 
				+        <compare class="c-qxd" :content="langEight.feature.definition.case1.content"
			
 
				+        :back="langEight.feature.definition.case1.back"
			
 
				+        :ltxt="langEight.feature.definition.case1.lTxt"
			
 
				+        :rtxt="langEight.feature.definition.case1.rTxt"
			
 
				+        :lmask="langEight.feature.definition.case1.lMask"
			
 
				+        :rmask="langEight.feature.definition.case1.rMask"
			
 
				         />
			
 
				       </div>
			
 
				-      <div class="qingxidu">
			
 
				-        <div class="b-title">测距功能</div>
			
 
				-        <div class="b-label">更极致的空间还原度</div>
			
 
				+      <div class="qingxidu ceju">
			
 
				+        <div class="b-title">{{langEight.feature.ranging.title[0]}}</div>
			
 
				         <Linecanvas :start='runLineCanvas' class="line-canvas" />
			
 
				         <div class="line-txt">
			
 
				-            <span>显示测距</span>
			
 
				-            <img @click="runLineCanvas=!runLineCanvas" :src="runLineCanvas?require('@/assets/images/canvas-right.png'):require('@/assets/images/canvas-left.png')" alt="">
			
 
				+            <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> -->
			
 
				         </div>
			
 
				       </div>
			
 
				       <div class="qingxidu">
			
 
				-        <div class="b-title">模型结构</div>
			
 
				-        <div class="b-label">更极致的空间还原度</div>
			
 
				-        <compare class="c-qxd" :content="case2.content"
			
 
				-        :back="case2.back"
			
 
				-        :ltxt="case2.lTxt"
			
 
				-        :rtxt="case2.rTxt" />
			
 
				-      </div>
			
 
				-      <div class="qingxidu">
			
 
				-        <div class="b-title">模型结构</div>
			
 
				-        <div class="b-label">更自然的漫游效果</div>
			
 
				-        <div class="qxd-3">
			
 
				-          <div>
			
 
				-            <video src="@/assets/video/myxg1.mp4" autoplay muted loop></video>
			
 
				-            <p>普通</p>
			
 
				-          </div>
			
 
				-          <div>
			
 
				-            <video src="@/assets/video/myxg1.mp4" autoplay muted loop></video>
			
 
				-            <p>4DKankan PRO</p>
			
 
				-          </div>
			
 
				-        </div>
			
 
				+        <div class="b-title">{{langEight.feature.model.title[0]}}</div>
			
 
				+        <compare class="c-qxd" :content="langEight.feature.model.case2.content"
			
 
				+        :back="langEight.feature.model.case2.back"
			
 
				+        :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">续航时间</div>
			
 
				+        <!-- <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="@/assets/images/battery-left.png" alt="">
			
 
				+              <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>
			
@@ -190,10 +178,10 @@
 
				 
			
 
				     <div class="plate06 plate">
			
 
				       <div class="info">
			
 
				-        <div class="b-title">4DKankan PRO详细参数</div>
			
 
				-        <img src="@/assets/images/product_img_content_6.jpg" alt="">
			
 
				+        <div class="b-title">{{langEight.parmas.name}}</div>
			
 
				+        <img :src="`${$cdn}images/product_img_content_6.png`" alt="">
			
 
				 
			
 
				-        <div class="standard-layout">
			
 
				+        <!-- <div class="standard-layout">
			
 
				           <div class="standard-xinghao">
			
 
				             <h3 class="s-title">{{standardGroup.label}}</h3>
			
 
				             <div class="s-value">{{standardGroup.name}}</div>
			
@@ -220,10 +208,10 @@
 
				               </div>
			
 
				             </div>
			
 
				           </div>
			
 
				-        </div>
			
 
				-        <div class="btns">
			
 
				+        </div> -->
			
 
				+        <!-- <div class="btns">
			
 
				           <a :to="{name:'purchase'}" href="" class="button">立即购买</a>
			
 
				-        </div>
			
 
				+        </div> -->
			
 
				       </div>
			
 
				     </div>
			
 
				   </div>
			
@@ -237,30 +225,10 @@ import phone from '@/components/phone'
 
				 import number from '@/components/number'
			
 
				 import compare from '@/components/compare'
			
 
				 import Linecanvas from '@/components/Linecanvas'
			
 
				+import browser from '@/util/browser'
			
 
				 
			
 
				 export default {
			
 
				   data () {
			
 
				-    let benefitGroup = [
			
 
				-      {
			
 
				-        fontImg: 'icon-szkj',
			
 
				-        icon: require('@/assets/images/product_img_02_a@2x.png'),
			
 
				-        title: '人人皆可自行打造数字空间',
			
 
				-        content: '机身体积与普通手机无异， <br>重量为115克，<br>仅为同类型产品重量的1/30。'
			
 
				-      },
			
 
				-      {
			
 
				-        fontImg: 'icon-kjsj',
			
 
				-        icon: require('@/assets/images/product_img_02_b@2x.png'),
			
 
				-        title: '全自动采集空间数据',
			
 
				-        content: '无需具备专业知识，10分钟即可采集<br>100平米空间数据，一键上传云端系统， <br>5分钟自动生成模型。'
			
 
				-      },
			
 
				-      {
			
 
				-        fontImg: 'icon-swhy',
			
 
				-        icon: require('@/assets/images/product_img_02_c@2x.png'),
			
 
				-        title: '高精度三维还原',
			
 
				-        content: '720°无死角复刻3D实景， <br>呈现4K高清画质， <br>实现沉浸式空间漫游。'
			
 
				-      }
			
 
				-    ]
			
 
				-
			
 
				     let params = [
			
 
				       '1/2.3 12M CMOS感应器x2(输出像素数等同于 14M)',
			
 
				       '30fps',
			
@@ -270,19 +238,19 @@ export default {
 
				 
			
 
				     let params2 = [
			
 
				       {
			
 
				-        icon: require('@/assets/images/icon1.png'),
			
 
				+        icon: this.$cdn + 'images/icon1.png',
			
 
				         txt: '实时分享实训世界的所有惊喜。如今，360度图像可实现即时串流！'
			
 
				       },
			
 
				       {
			
 
				-        icon: require('@/assets/images/icon2.png'),
			
 
				+        icon: this.$cdn + 'images/icon2.png',
			
 
				         txt: '使用专用智能手机应用程式，拍摄的同事检查曝光和白平衡。'
			
 
				       },
			
 
				       {
			
 
				-        icon: require('@/assets/images/icon3.png'),
			
 
				+        icon: this.$cdn + 'images/icon3.png',
			
 
				         txt: '快门速度的设定范围为1/6400秒'
			
 
				       },
			
 
				       {
			
 
				-        icon: require('@/assets/images/icon4.png'),
			
 
				+        icon: this.$cdn + 'images/icon4.png',
			
 
				         txt: '静态图像：（大）约1600'
			
 
				       }
			
 
				     ]
			
@@ -332,24 +300,24 @@ export default {
 
				     }
			
 
				 
			
 
				     return {
			
 
				-      benefitGroup,
			
 
				       standardGroup,
			
 
				       params,
			
 
				       params2,
			
 
				-      runLineCanvas: false,
			
 
				+      runLineCanvas: true,
			
 
				+      ismobile: browser.mobile,
			
 
				       runNum: 'up',
			
 
				       numArr: {},
			
 
				       case1: {
			
 
				-        content: require('@/assets/video/8k.mp4'),
			
 
				-        back: require('@/assets/video/4k.mp4'),
			
 
				+        content: this.$cdn + 'video/8k.mp4',
			
 
				+        back: this.$cdn + 'video/4k.mp4',
			
 
				         lTxt: '普通',
			
 
				         rTxt: '4DKankan PRO',
			
 
				         lMask: '4K高清',
			
 
				         rMask: '8K高清图像，3倍放大'
			
 
				       },
			
 
				       case2: {
			
 
				-        content: require('@/assets/video/qingxi.mp4'),
			
 
				-        back: require('@/assets/video/moku.mp4'),
			
 
				+        content: this.$cdn + 'video/qingxi.mp4',
			
 
				+        back: this.$cdn + 'video/moku.mp4',
			
 
				         lTxt: '普通',
			
 
				         rTxt: '4DKankan PRO'
			
 
				       }
			
@@ -357,7 +325,8 @@ export default {
 
				   },
			
 
				   computed: {
			
 
				     ...mapState({
			
 
				-      split: state => state.ui.navDivision
			
 
				+      split: state => state.ui.navDivision,
			
 
				+      langEight: state => state.language.home.eight
			
 
				     })
			
 
				   },
			
 
				   watch: {
			
--- a/src/page/eight/style.scss
+++ b/src/page/eight/style.scss
@@ -32,7 +32,7 @@ $num_time: 0.6s;
 
				 }
			
 
				 
			
 
				 .plate01 {
			
 
				-  padding: 50px 0 ;
			
 
				+  padding: 50px 0 0;
			
 
				   background: #000;
			
 
				   position: relative;
			
 
				 
			
@@ -41,7 +41,7 @@ $num_time: 0.6s;
 
				     height: 1600px;
			
 
				     position: absolute;
			
 
				     left: 0;
			
 
				-    top: -90px;
			
 
				+    top: -60px;
			
 
				     z-index: 0;
			
 
				   }
			
 
				   .layout {
			
@@ -56,7 +56,7 @@ $num_time: 0.6s;
 
				     .info {
			
 
				       display: inline-block;
			
 
				       margin:40px 0 0 58px;
			
 
				-      width: 500px;
			
 
				+      width: 650px;
			
 
				       vertical-align: top;
			
 
				       >h2 {
			
 
				         color: #fff;
			
@@ -67,10 +67,10 @@ $num_time: 0.6s;
 
				 
			
 
				       >h2:last-of-type{
			
 
				         letter-spacing: 0;
			
 
				-        font-weight: 300;
			
 
				+        font-weight: 100;
			
 
				         margin: 6px 0 50px;
			
 
				         animation: fadeUp 0.5s ease-out 1 both $txt_delay;
			
 
				-
			
 
				+        font-size: 48px;
			
 
				       }
			
 
				    
			
 
				       >p {
			
@@ -109,12 +109,9 @@ $num_time: 0.6s;
 
				   
			
 
				   .benefit {
			
 
				     overflow: hidden;
			
 
				-    width: 1300px;
			
 
				+    width: 1500px;
			
 
				     padding-top: 300px;
			
 
				     margin: 0 auto;
			
 
				-    position: relative;
			
 
				-    left: -28px;
			
 
				-
			
 
				       .b-title {
			
 
				       color: #ffffff;
			
 
				       text-align: center;
			
@@ -126,36 +123,42 @@ $num_time: 0.6s;
 
				       opacity: 0;
			
 
				     }
			
 
				 
			
 
				-    .item {
			
 
				-      float: left;
			
 
				-      width: 396px;
			
 
				-      margin-right: 56px;
			
 
				-      text-align: center;
			
 
				-      animation: fadeUp 0.5s ease-out 1 both;
			
 
				-      opacity: 0;
			
 
				-
			
 
				-      &:last-child {
			
 
				-        margin-right: 0;
			
 
				-      }
			
 
				-
			
 
				-      .iconfont{
			
 
				-        color: #1fe4dc;
			
 
				-        font-size: 74px;
			
 
				-      }
			
 
				-      
			
 
				-      h3 {
			
 
				-        font-size: 20px;
			
 
				-        color: #ffffff;
			
 
				-        font-weight: 500;
			
 
				-        margin:26px 0 5px;
			
 
				-      }
			
 
				-
			
 
				-      p {
			
 
				-        color: #737373;
			
 
				-        line-height: 22px;
			
 
				-        font-size: 12px;
			
 
				+    .char-con{
			
 
				+      display: flex;
			
 
				+      flex-wrap: wrap;
			
 
				+      justify-content: center;
			
 
				+      .item {
			
 
				+        float: left;
			
 
				+        width: 300px;
			
 
				+        margin-bottom: 80px;
			
 
				+        text-align: center;
			
 
				+        animation: fadeUp 0.5s ease-out 1 both;
			
 
				+        opacity: 0;
			
 
				+  
			
 
				+        &:last-child {
			
 
				+          margin-right: 0;
			
 
				+        }
			
 
				+  
			
 
				+        .iconfont{
			
 
				+          color: #1fe4dc;
			
 
				+          font-size: 74px;
			
 
				+        }
			
 
				+        
			
 
				+        h3 {
			
 
				+          font-size: 20px;
			
 
				+          color: #ffffff;
			
 
				+          font-weight: 500;
			
 
				+          margin:26px 0 5px;
			
 
				+        }
			
 
				+  
			
 
				+        p {
			
 
				+          color: #737373;
			
 
				+          line-height: 22px;
			
 
				+          font-size: 12px;
			
 
				+        }
			
 
				       }
			
 
				     }
			
 
				+    
			
 
				   }
			
 
				 
			
 
				 }
			
@@ -163,8 +166,9 @@ $num_time: 0.6s;
 
				 .plate02 {
			
 
				   margin: 0 auto ;
			
 
				   background: #000;
			
 
				-  padding: 170px 0;
			
 
				-  height: 1050px;
			
 
				+  // padding: 170px 0;
			
 
				+  // height: 1050px;
			
 
				+  height: 0;
			
 
				   position: relative;
			
 
				   overflow: hidden;
			
 
				 
			
@@ -191,6 +195,7 @@ $num_time: 0.6s;
 
				       font-size: 36px;
			
 
				       color: #fff;
			
 
				       font-weight: 300;
			
 
				+      animation: fadeUp 0.5s ease-out 1 both $txt_delay*2;
			
 
				       opacity: 0;
			
 
				     }
			
 
				     .download-btn{
			
@@ -241,10 +246,7 @@ $num_time: 0.6s;
 
				       transform: rotate(270deg) translateX(47%);
			
 
				       transition: transform 1s cubic-bezier(.59, .01, .28, 1) .15s,
			
 
				     }
			
 
				-    
			
 
				   }
			
 
				-  
			
 
				-  
			
 
				 }
			
 
				 
			
 
				 .plate03 {
			
@@ -258,6 +260,7 @@ $num_time: 0.6s;
 
				     color: #fff;
			
 
				     animation: fadeUp 0.5s ease-out 1 both;
			
 
				     opacity: 0;
			
 
				+    line-height: 1.2;
			
 
				   }
			
 
				 
			
 
				   .b-label {
			
@@ -269,8 +272,8 @@ $num_time: 0.6s;
 
				   }
			
 
				 
			
 
				   .info {
			
 
				-    width: 900px;
			
 
				-    margin: 0 auto;
			
 
				+    width: 1200px;
			
 
				+    margin-left: 424px ;
			
 
				     color: #fff;
			
 
				     text-align: center;
			
 
				   }
			
@@ -279,16 +282,16 @@ $num_time: 0.6s;
 
				     display: flex;
			
 
				     justify-content: space-around;
			
 
				     align-items: flex-start;
			
 
				-    margin: 145px auto;
			
 
				+    margin: 138px 0 0 175px;
			
 
				     width: 1260px;
			
 
				     .front-img{
			
 
				       flex: 1;
			
 
				-      width: 380px;
			
 
				+      width: 550px;
			
 
				       animation: fadeUp 0.5s ease-out 1 both $txt_delay;
			
 
				     }
			
 
				     .f-right{
			
 
				       flex: 3;
			
 
				-      margin-left: 100px;
			
 
				+      margin-left: 52px;
			
 
				       p{
			
 
				         width: 600px;
			
 
				         color: #fff;
			
@@ -296,7 +299,9 @@ $num_time: 0.6s;
 
				         line-height: 36px;
			
 
				         font-weight: 400;
			
 
				         animation: fadeUp 0.5s ease-out 1 both $txt_delay;
			
 
				-
			
 
				+        &:last-of-type{
			
 
				+          line-height: 48px;
			
 
				+        }
			
 
				       }
			
 
				       .f-params{
			
 
				         display: flex;
			
@@ -324,9 +329,12 @@ $num_time: 0.6s;
 
				         }
			
 
				       }
			
 
				       .f-img{
			
 
				-        margin-top: 80px;
			
 
				+        margin-top: 83px;
			
 
				         animation: fadeUp 0.5s ease-out 1 both $txt_delay*3;
			
 
				+        width: 530px;
			
 
				+        height: 265px;
			
 
				       }
			
 
				+    
			
 
				       .f-intro{
			
 
				         margin-top: 10px;
			
 
				         p{
			
@@ -334,7 +342,6 @@ $num_time: 0.6s;
 
				           line-height: 20px;
			
 
				           color: #ccc;
			
 
				           animation: fadeUp 0.5s ease-out 1 both $txt_delay*4;
			
 
				-          
			
 
				         }
			
 
				       }
			
 
				     }
			
@@ -344,55 +351,43 @@ $num_time: 0.6s;
 
				     display: flex;
			
 
				     justify-content: space-around;
			
 
				     align-items: flex-start;
			
 
				-    margin: 145px auto;
			
 
				+    margin: 202px 0 145px 175px;
			
 
				     width: 1260px;
			
 
				     .front-img{
			
 
				       flex: 1;
			
 
				-      width: 380px;
			
 
				+      width: 550px;
			
 
				+      flex-shrink: 0;
			
 
				       animation: fadeUp 0.5s ease-out 1 both;
			
 
				     }
			
 
				     .f-right{
			
 
				       flex: 3;
			
 
				-      margin-left: 100px;
			
 
				+      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: 18px;
			
 
				+        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{
			
 
				-          width: 50%;
			
 
				           text-align: center;
			
 
				           position: relative;
			
 
				-          top: 60px;
			
 
				           animation: fadeUp 0.5s ease-out 1 both $txt_delay*2;
			
 
				-
			
 
				-        }
			
 
				-        .f-item{
			
 
				-          width: 50%;
			
 
				-          display: flex;
			
 
				-          align-items: center;
			
 
				-          margin-bottom: 20px;
			
 
				-          animation: fadeUp 0.5s ease-out 1 both $txt_delay*3;
			
 
				-          img{
			
 
				-            width: 47px;
			
 
				-          }
			
 
				-          span{
			
 
				-            display: inline-block;
			
 
				-            color: #fff;
			
 
				-            line-height: 34px;
			
 
				-            position: relative;
			
 
				-            padding:0 20px;
			
 
				-            width: calc(100% - 47px);
			
 
				+          &:first-of-type{
			
 
				+            margin-right: 93px;
			
 
				           }
			
 
				         }
			
 
				       }
			
@@ -411,11 +406,14 @@ $num_time: 0.6s;
 
				     margin: 0 auto;
			
 
				     color: #fff;
			
 
				     text-align: center;
			
 
				+    .b-title {
			
 
				+      font-size: 48px;
			
 
				+    }
			
 
				   }
			
 
				 
			
 
				   .hsxp-layout{
			
 
				     display: flex;
			
 
				-    justify-content: space-around;
			
 
				+    justify-content: space-between;
			
 
				     align-items: center;
			
 
				     margin: 130px auto;
			
 
				     .hsxp-imgcon{
			
@@ -423,7 +421,7 @@ $num_time: 0.6s;
 
				       div{
			
 
				         width: 57.5vw;
			
 
				         height: 20vw;
			
 
				-        margin-left: 220px;
			
 
				+        margin-left: 280px;
			
 
				         background-image: url('~@/assets/images/xinpian.png');
			
 
				         background-repeat: no-repeat;
			
 
				         background-position: 0% 0px;
			
@@ -436,30 +434,39 @@ $num_time: 0.6s;
 
				     .hsxp-right{
			
 
				       color: #fff;
			
 
				       position: relative;
			
 
				-      left: -350px;
			
 
				+      right: 340px;
			
 
				       text-align: right;
			
 
				       animation: fadeUp 0.5s ease-out 1 both;
			
 
				+      .b-title{
			
 
				+        font-weight: bold;
			
 
				+      }
			
 
				     }
			
 
				   }
			
 
				 
			
 
				   .qmjt-layout{
			
 
				     display: flex;
			
 
				-    justify-content: space-around;
			
 
				+    justify-content: space-between;
			
 
				     align-items: center;
			
 
				     margin: 130px auto;
			
 
				-    width: 1300px;
			
 
				     .qmjt-left{
			
 
				       color: #fff;
			
 
				+      margin-left: 280px;
			
 
				       animation: fadeUp 0.5s ease-out 1 both;
			
 
				+      .b-label{
			
 
				+        &:last-of-type{
			
 
				+          line-height: 36px;
			
 
				+        }
			
 
				+      }
			
 
				     }
			
 
				     .qmjt-imgcon{
			
 
				       animation: fadeUp 0.5s ease-out 1 both;
			
 
				+      margin-right: 280px;
			
 
				     }
			
 
				   }
			
 
				 
			
 
				   .cgq-layout{
			
 
				     display: flex;
			
 
				-    justify-content: space-around;
			
 
				+    justify-content: space-between;
			
 
				     align-items: center;
			
 
				     margin: 130px auto;
			
 
				     .cgq-imgcon{
			
@@ -467,6 +474,7 @@ $num_time: 0.6s;
 
				       div{
			
 
				         width: 34vw;
			
 
				         height: 20vw;
			
 
				+        margin-left: 280px;
			
 
				         background-image: url('~@/assets/images/sony.png');
			
 
				         background-repeat: no-repeat;
			
 
				         background-position: 0% 0px;
			
@@ -479,7 +487,7 @@ $num_time: 0.6s;
 
				     .cgq-right{
			
 
				       color: #fff;
			
 
				       position: relative;
			
 
				-      left: -250px;
			
 
				+      right: 340px;
			
 
				       animation: fadeUp 0.5s ease-out 1 both;
			
 
				       text-align: right;
			
 
				     }
			
@@ -488,41 +496,52 @@ $num_time: 0.6s;
 
				 
			
 
				   .jzxj-layout{
			
 
				     display: flex;
			
 
				-    justify-content: space-around;
			
 
				+    justify-content: space-between;
			
 
				     align-items: center;
			
 
				     margin: 130px auto;
			
 
				-    width: 1300px;
			
 
				     .jzxj-left{
			
 
				       animation: fadeUp 0.5s ease-out 1 both;
			
 
				       color: #fff;
			
 
				+      margin-left: 280px;
			
 
				     }
			
 
				     .jzxj-imgcon{
			
 
				       animation: fadeUp 0.5s ease-out 1 both;
			
 
				+      margin-right: 305px;
			
 
				     }
			
 
				   }
			
 
				 
			
 
				   .b-title {
			
 
				-    margin-bottom: 30px;
			
 
				+    line-height: 60px;
			
 
				     animation: fadeUp 0.5s ease-out 1 both ;
			
 
				     opacity: 0;
			
 
				+    font-size: 36px;
			
 
				   }
			
 
				 
			
 
				   .b-label {
			
 
				-    font-weight: 300;
			
 
				+    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: 250px 0 260px;
			
 
				+  padding: 200px 0 0;
			
 
				   background: url('~@/assets/images/lin-bg.png') top center no-repeat;
			
 
				+  .num-lighting{
			
 
				+    height: 0;
			
 
				+    overflow: hidden;
			
 
				+    max-height: 0;
			
 
				+    padding: 0!important;
			
 
				+    box-sizing: border-box;
			
 
				+  }
			
 
				   .b-title{
			
 
				     color: #fff;
			
 
				     font-size: 36px;
			
 
				     font-weight: 400;
			
 
				+    margin-bottom: 90px;
			
 
				   }
			
 
				   .b-label{
			
 
				     color: #fff;
			
@@ -530,11 +549,11 @@ $num_time: 0.6s;
 
				     font-weight: 300;
			
 
				     margin-top: 20px;
			
 
				   }
			
 
				+ 
			
 
				   .qingxidu{
			
 
				     text-align: center;
			
 
				-    padding: 50px 0;
			
 
				+    padding: 0 0 200px;
			
 
				     .c-qxd{
			
 
				-      margin-top: 40px;
			
 
				     }
			
 
				 
			
 
				     .line-canvas{
			
@@ -545,6 +564,10 @@ $num_time: 0.6s;
 
				       margin: 0 auto;
			
 
				       position: relative;
			
 
				       span{
			
 
				+        position: absolute;
			
 
				+        left: calc(50% - 100px);
			
 
				+        top: 48%;
			
 
				+        transform: translate(-50%,-50%);
			
 
				         font-size: 24px;
			
 
				         color: #6b6b6c;
			
 
				         display: inline-block;
			
@@ -676,6 +699,11 @@ $num_time: 0.6s;
 
				         }
			
 
				       }
			
 
				     }
			
 
				+
			
 
				+
			
 
				+  }
			
 
				+  .ceju{
			
 
				+    padding: 0 0 160px;
			
 
				   }
			
 
				 }
			
 
				 
			
@@ -768,7 +796,7 @@ $num_time: 0.6s;
 
				     color: #fff;
			
 
				     text-align: center;
			
 
				     font-size: 42px;
			
 
				-    margin-bottom: 72px;
			
 
				+    margin-bottom: 100px;
			
 
				     letter-spacing: -1px;
			
 
				     animation: fadeUp 0.5s ease-out 1 both;
			
 
				     opacity: 0;    
			
@@ -1014,3 +1042,86 @@ $num_time: 0.6s;
 
				   }
			
 
				 }
			
 
				 
			
 
				+@media screen and (max-width: 1600px) {
			
 
				+  .product-layout{
			
 
				+    .plate01{
			
 
				+      .benefit{
			
 
				+        width: 1200px;  
			
 
				+      }
			
 
				+    }
			
 
				+    .plate03{
			
 
				+      .info{
			
 
				+        margin: 0 auto;
			
 
				+      }
			
 
				+      .front,.bottom{
			
 
				+        margin: 138px auto 175px;
			
 
				+      }
			
 
				+    }
			
 
				+    .plate04{
			
 
				+      .hsxp-layout{
			
 
				+        width: 100%;
			
 
				+        justify-content: space-around;
			
 
				+        .hsxp-imgcon{
			
 
				+          div{
			
 
				+            margin-left: 0;
			
 
				+          }
			
 
				+        }
			
 
				+        .hsxp-right{
			
 
				+          position: static;
			
 
				+        }
			
 
				+      }
			
 
				+      .qmjt-layout{
			
 
				+        justify-content: center;
			
 
				+        width: 100%;
			
 
				+        .qmjt-left{
			
 
				+          margin-left: 20px;
			
 
				+          .b-title{
			
 
				+            max-width: 450px;
			
 
				+          }
			
 
				+        }
			
 
				+        .qmjt-imgcon{
			
 
				+          margin-right: 0;
			
 
				+          text-align: right;
			
 
				+          img{
			
 
				+            width: 90%;
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+      .cgq-layout{
			
 
				+        justify-content: space-around;
			
 
				+        .cgq-imgcon{
			
 
				+          div{
			
 
				+            margin-left: 0;
			
 
				+          }
			
 
				+        }
			
 
				+        .cgq-right{
			
 
				+          position: static;
			
 
				+        }
			
 
				+      }
			
 
				+      .jzxj-layout{
			
 
				+        justify-content:center;
			
 
				+        width: 100%;
			
 
				+        .jzxj-left{
			
 
				+          margin-left: 20px;
			
 
				+          .b-title{
			
 
				+            max-width: 450px;
			
 
				+          }
			
 
				+        }
			
 
				+        .jzxj-imgcon{
			
 
				+          margin-right: 0;
			
 
				+          text-align: right;
			
 
				+          img{
			
 
				+            width: 90%;
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+    .plate06{
			
 
				+      .info{
			
 
				+        img{
			
 
				+          width: 90%;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
--- a/src/page/home2/index.vue
+++ b/src/page/home2/index.vue
@@ -1,11 +1,10 @@
 
				 <template>
			
 
				   <div class="home-layout">
			
 
				-
			
 
				     <div class="plate01">
			
 
				       <div class="layout">
			
 
				         <div class="info">
			
 
				-          <div>
			
 
				-            <img src="@/assets/images/banner_title.png" alt="">
			
 
				+          <!-- <div>
			
 
				+            <img :src="`${$cdn}images/banner_title.png`"  alt="">
			
 
				             <h3>
			
 
				               4Dkankan PRO
			
 
				               <p>专业精准建模，高效复刻空间</p>
			
@@ -15,107 +14,110 @@
 
				               <strong>199.00</strong>
			
 
				             </div>
			
 
				             <div class="btns">
			
 
				-              <a href="" class="button"><vcenter><img src="@/assets/images/product_icon_arrow.png" alt=""></vcenter></a>
			
 
				+              <a href="" class="button"><vcenter><img :src="`${$cdn}images/product_icon_arrow.png`" alt=""></vcenter></a>
			
 
				               <a href="" class="button">立即购买</a>
			
 
				             </div>
			
 
				-          </div>
			
 
				+          </div> -->
			
 
				         </div>
			
 
				-        <!-- <img src="@/assets/images/banner_pro.png" alt=""> -->
			
 
				+        <!-- <img :src="`${$cdn}images/banner_pro.png`" alt=""> -->
			
 
				+      </div>
			
 
				+      <div class="my-video">
			
 
				+        <video :src="`${$cdn}video/banner1.mp4`" autoplay muted loop></video>
			
 
				       </div>
			
 
				-      <video src="@/assets/video/banner.mp4" autoplay muted loop></video>
			
 
				     </div>
			
 
				 
			
 
				     <div class="plate02">
			
 
				-      <div class="logo"><img src="@/assets/images/plate_icon.png"></div>
			
 
				-
			
 
				+      <div class="logo"><img :src="`${$cdn}images/plate_icon.png`" ></div>
			
 
				       <div class="hxjs">
			
 
				-        <h2>核心技术</h2>
			
 
				-        <p>四维看看拥有多项发明专利和核心技术，其中主要有空间定位、空间建模、空间展示</p>
			
 
				+        <h2>{{langHome.tech.title}}</h2>
			
 
				+        <p>{{langHome.tech.dec}}</p>
			
 
				         <div>
			
 
				           <figure>
			
 
				-            <img src="@/assets/images/hxjs_1.png" alt="">
			
 
				-            <figcaption>空间定位</figcaption>
			
 
				+            <img :src="`${$cdn}images/hxjs_1.png`" alt="">
			
 
				+            <figcaption>{{langHome.tech.icon[0]}}</figcaption>
			
 
				           </figure>
			
 
				           <figure>
			
 
				-            <img src="@/assets/images/hxjs_2.png" alt="">
			
 
				-            <figcaption>空间建模</figcaption>
			
 
				+            <img :src="`${$cdn}images/hxjs_2.png`" alt="">
			
 
				+            <figcaption>{{langHome.tech.icon[1]}}</figcaption>
			
 
				           </figure>
			
 
				           <figure>
			
 
				-            <img src="@/assets/images/hxjs_3.png" alt="">
			
 
				-            <figcaption>空间展示</figcaption>
			
 
				+            <img :src="`${$cdn}images/hxjs_3.png`" alt="">
			
 
				+            <figcaption>{{langHome.tech.icon[2]}}</figcaption>
			
 
				           </figure>
			
 
				         </div>
			
 
				       </div>
			
 
				 
			
 
				       <div class="hxbg-layout">
			
 
				-        <img src="@/assets/images/background_01.png" alt="" class="hxbg hxbg-1">
			
 
				+        <!-- <img :src="`${$cdn}images/background_01.png`"  alt="" class="hxbg hxbg-1"> -->
			
 
				         <div class="item item-1">
			
 
				           <div class="media">
			
 
				-            <img src="@/assets/images/item_1.jpg" alt="">
			
 
				+            <!-- <img :src="`${$cdn}images/item_1.jpg`" alt=""> -->
			
 
				+            <video class="video" autoplay muted loop :src="kjdw" >
			
 
				+            </video>
			
 
				           </div>
			
 
				           <div class="content">
			
 
				             <h2>
			
 
				-              <span>空间定位</span>
			
 
				-              模拟人眼的双球幕SFM技术，采集真实空间信息，测量空间数据
			
 
				+              <span>{{langHome.tech.location.title}}</span>
			
 
				+              {{langHome.tech.location.dec}}
			
 
				             </h2>
			
 
				-            <p>Embed extensible, custom maps, location search, and turn by turn directions into your app, built on a network of over 420 million monthly users.</p>
			
 
				+            <p></p>
			
 
				           </div>
			
 
				         </div>
			
 
				       </div>
			
 
				 
			
 
				       <div class="hxbg-layout">
			
 
				-        <img src="@/assets/images/background_02.png" alt="" class="hxbg hxbg-2">
			
 
				+        <img :src="`${$cdn}images/background_01.png`" alt="" class="hxbg hxbg-2">
			
 
				         <div class="item item-2">
			
 
				           <div class="media iframe">
			
 
				-            <div>
			
 
				+              <video class="video" autoplay muted loop :src="item2" ></video>
			
 
				               <!-- <iframe src="http://www.4dmodel.com/SuperTwo/index.html?m=158&version=one" frameborder="0"></iframe> -->
			
 
				-            </div>
			
 
				           </div>
			
 
				           <div class="content">
			
 
				             <h2>
			
 
				-              <span>空间建模</span>
			
 
				-              根据二维图像自动计算三维数字模型，5分钟生成，无需人工干预
			
 
				+              <span>{{langHome.tech.modeling.title}}</span>
			
 
				+              {{langHome.tech.modeling.dec}}
			
 
				             </h2>
			
 
				-            <p>Embed extensible, custom maps, location search, and turn by turn directions into your app, built on a network of over 420 million monthly users.</p>
			
 
				+            <p></p>
			
 
				           </div>
			
 
				         </div>
			
 
				       </div>
			
 
				 
			
 
				       <div class="item item-3">
			
 
				         <div class="media">
			
 
				-        <video src="@/assets/video/item_3.mp4" autoplay muted loop></video>
			
 
				+        <video  :src="`${$cdn}video/item_3.mp4`" autoplay muted loop></video>
			
 
				         </div>
			
 
				         <div class="content">
			
 
				           <h2>
			
 
				-            <span>空间展示</span>
			
 
				-            多元化的空间展示，且无需插件，适应多端多平台展示
			
 
				+            <span>{{langHome.tech.exhibition.title}}</span>
			
 
				+            {{langHome.tech.exhibition.dec}}
			
 
				           </h2>
			
 
				-          <p>Embed extensible, custom maps, location search, and turn by turn directions into your app, built on a network of over 420 million monthly users.</p>
			
 
				+          <p></p>
			
 
				         </div>
			
 
				       </div>
			
 
				 
			
 
				     </div>
			
 
				 
			
 
				     <div class="plate04">
			
 
				-      <img src="@/assets/images/background_03.png" alt="" class="hxbg hxbg-3">
			
 
				+      <img :src="`${$cdn}images/background_03.png`"  alt="" class="hxbg hxbg-3">
			
 
				       <div class="info">
			
 
				-        <h2>行业应用展示</h2>
			
 
				-        <p>四维看看已为消防、公安、文博等公共领域建立三维数字化档案，助力地产、酒店民宿、电商、餐饮等行业打造体验式服务</p>
			
 
				+        <h2>{{langHome.cases.title}}</h2>
			
 
				+        <p>{{langHome.cases.dec[0]}}</p>
			
 
				+        <p>{{langHome.cases.dec[1]}}</p>
			
 
				       </div>
			
 
				       <div class="content-layout">
			
 
				         <div class="tabs">
			
 
				-          <div>
			
 
				-            <a href="" class="active"><img src="@/assets/images/icon_01.png"></a>
			
 
				-            <a href=""><img src="@/assets/images/icon_02.png"></a>
			
 
				-            <a href=""><img src="@/assets/images/icon_03.png"></a>
			
 
				-          </div>
			
 
				-          <a  href="#/videos">更多行业应用</a>
			
 
				+          <!-- <div>
			
 
				+            <a href="" class="active"><img :src="`${$cdn}images/icon_01.png`" ></a>
			
 
				+            <a href=""><img :src="`${$cdn}images/icon_02.png`" ></a>
			
 
				+            <a href=""><img :src="`${$cdn}images/icon_03.png`" ></a>
			
 
				+          </div> -->
			
 
				+          <!-- <a  href="#/videos">更多行业应用</a> -->
			
 
				         </div>
			
 
				         <div class="slide-l" :class="{actice: slideActive}" ref="slide">
			
 
				           <div class="content">
			
 
				-            <slide :items="items" class="body">
			
 
				+            <slide :items="langHome.items" class="body">
			
 
				               <div slot-scope="{data}" class="item">
			
 
				-                <img :src="data.image" class="cover">
			
 
				+                <img :src="data.image" class="cover" @click="goto(data.url)">
			
 
				                 <div class="jj">
			
 
				                   <img :src="data.icon" class="icon">
			
 
				                   <span v-if="data.text">{{data.text}}</span>
			
@@ -128,12 +130,12 @@
 
				     </div>
			
 
				 
			
 
				     <div class="plate05" ref="numcount">
			
 
				-      <img src="@/assets/images/index_img_record_bg.png" class="bg">
			
 
				+      <img :src="`${$cdn}images/index_img_record_bg.png`" class="bg">
			
 
				       <div class="info">
			
 
				-        <h2 class="b-title">每个空间，都值得被记录</h2>
			
 
				+        <h2 class="b-title">{{langHome.cases.space.title}}</h2>
			
 
				         <div class="count-group">
			
 
				-          <div v-for="(item, i) in countGroup" :key="i">
			
 
				-            <number after="%" :count="item.count" :startUp="startNumCount"></number>
			
 
				+          <div v-for="(item, i) in langHome.cases.space.nums" :key="i">
			
 
				+            <number :startCount="0" after="" :count="item.count" :startUp="startNumCount"></number>
			
 
				             <p v-html="item.text"></p>
			
 
				           </div>
			
 
				         </div>
			
@@ -141,10 +143,10 @@
 
				     </div>
			
 
				 
			
 
				     <div class="plate06">
			
 
				-      <h2>媒体报道</h2>
			
 
				+      <h2>{{langHome.reports.name}}</h2>
			
 
				       <div class="media-layout">
			
 
				         <ul>
			
 
				-          <li v-for="(item,i) in reports" :key="i" @click="mediaClick(item)">
			
 
				+          <li v-for="(item,i) in langHome.reports.items" :key="i" @click="goto(item.url)">
			
 
				             <div class="icon">
			
 
				               <img :src="item.icon" alt="">
			
 
				             </div>
			
@@ -169,85 +171,31 @@ import vcenter from '@/components/vcenter'
 
				 import tabs from '@/components/tabs'
			
 
				 import number from '@/components/number'
			
 
				 import { getPosition } from '@/util'
			
 
				+import {mapState} from 'vuex'
			
 
				 
			
 
				 export default {
			
 
				   data () {
			
 
				-    let countGroup = [
			
 
				-      {text: '详情页浏览<br>提升', count: 75},
			
 
				-      {text: '人均停留<br>增长', count: 318},
			
 
				-      {text: '人均浏览<br>增长', count: 180},
			
 
				-      {text: '房源约看<br>增长', count: 138}
			
 
				-    ]
			
 
				-    let reports = [
			
 
				-      {
			
 
				-        icon: require('@/assets/images/item_icon_1.png'),
			
 
				-        cover: require('@/assets/images/item_cover_1.png'),
			
 
				-        time: '2018年6月21日',
			
 
				-        title: '3D相机“克隆”三维真实世界'
			
 
				-      },
			
 
				-      {
			
 
				-        icon: require('@/assets/images/item_icon_2.png'),
			
 
				-        cover: require('@/assets/images/item_cover_2.png'),
			
 
				-        time: '2018年6月21日',
			
 
				-        title: '“四维看看”3D相机：让老百姓用得起 用得上 '
			
 
				-      },
			
 
				-      {
			
 
				-        icon: require('@/assets/images/item_icon_3.png'),
			
 
				-        cover: require('@/assets/images/item_cover_3.png'),
			
 
				-        time: '2018年6月21日',
			
 
				-        title: '四维时代发布全球首款消费级3D相机'
			
 
				-      },
			
 
				-      {
			
 
				-        icon: require('@/assets/images/item_icon_4.png'),
			
 
				-        cover: require('@/assets/images/item_cover_4.png'),
			
 
				-        time: '2018年6月21日',
			
 
				-        title: '四维时代发布消费级3D相机“四维看看”'
			
 
				-      },
			
 
				-      {
			
 
				-        icon: require('@/assets/images/item_icon_4.png'),
			
 
				-        cover: require('@/assets/images/item_cover_4.png'),
			
 
				-        time: '2018年6月21日',
			
 
				-        title: '四维时代发布消费级3D相机“四维看看”'
			
 
				-      },
			
 
				-      {
			
 
				-        icon: require('@/assets/images/item_icon_4.png'),
			
 
				-        cover: require('@/assets/images/item_cover_4.png'),
			
 
				-        time: '2018年6月21日',
			
 
				-        title: '四维时代发布消费级3D相机“四维看看”'
			
 
				-      }
			
 
				-    ]
			
 
				-    let items = [
			
 
				-      { image: require('@/assets/images/phone_1.jpg'), icon: require('@/assets/images/phone_icon_1.png'), text: '时代豪苑' },
			
 
				-      { image: require('@/assets/images/phone_2.jpg'), icon: require('@/assets/images/phone_icon_2.png'), text: '武侯祠' },
			
 
				-      { image: require('@/assets/images/phone_3.jpg'), icon: require('@/assets/images/phone_icon_3.png'), text: '广东省博物馆' },
			
 
				-      { image: require('@/assets/images/phone_4.jpg'), icon: require('@/assets/images/phone_icon_4.png'), text: '深圳时装店' },
			
 
				-      { image: require('@/assets/images/phone_5.jpg'), icon: require('@/assets/images/phone_icon_5.png'), text: '时代豪苑' },
			
 
				-      { image: require('@/assets/images/phone_6.jpg'), icon: require('@/assets/images/phone_icon_6.png'), text: '武侯祠' },
			
 
				-      { image: require('@/assets/images/phone_7.jpg'), icon: require('@/assets/images/phone_icon_7.png'), text: '广东省博物馆' },
			
 
				-      { image: require('@/assets/images/phone_8.jpg'), icon: require('@/assets/images/phone_icon_8.png'), text: '深圳时装店' },
			
 
				-      { image: require('@/assets/images/phone_9.jpg'), icon: require('@/assets/images/phone_icon_1.png'), text: '大西洋展览馆' },
			
 
				-      { image: require('@/assets/images/phone_10.jpg'), icon: require('@/assets/images/phone_icon_2.png'), text: '深圳时装店' },
			
 
				-      { image: require('@/assets/images/phone_11.jpg'), icon: require('@/assets/images/phone_icon_3.png'), text: '权利的游戏' },
			
 
				-      { image: require('@/assets/images/phone_12.jpg'), icon: require('@/assets/images/phone_icon_4.png'), text: '广东省博物馆' },
			
 
				-      { image: require('@/assets/images/phone_13.jpg'), icon: require('@/assets/images/phone_icon_5.png'), text: '深圳时装店' },
			
 
				-      { image: require('@/assets/images/phone_14.jpg'), icon: require('@/assets/images/phone_icon_6.png'), text: '时代豪苑' },
			
 
				-      { image: require('@/assets/images/phone_15.jpg'), icon: require('@/assets/images/phone_icon_7.png'), text: '武侯祠' },
			
 
				-      { image: require('@/assets/images/phone_16.jpg'), icon: require('@/assets/images/phone_icon_8.png'), text: '权利的游戏' }
			
 
				-    ]
			
 
				-
			
 
				     return {
			
 
				       slideActive: false,
			
 
				-      countGroup,
			
 
				-      reports,
			
 
				-      items,
			
 
				+      // countGroup,
			
 
				+      kjdw: this.$cdn + 'video/kjdw.mp4',
			
 
				+      item2: this.$cdn + 'video/item2.mp4',
			
 
				       startNumCount: false
			
 
				     }
			
 
				   },
			
 
				   methods: {
			
 
				     mediaClick () {
			
 
				       this.$bus.$emit('showLeft', 'mediaInfo', {id: 83})
			
 
				+    },
			
 
				+    goto (url) {
			
 
				+      window.open(url, '_blank')
			
 
				     }
			
 
				   },
			
 
				+  computed: {
			
 
				+    ...mapState({
			
 
				+      langHome: state => state.language.home.home
			
 
				+    })
			
 
				+  },
			
 
				   mounted () {
			
 
				     this.sizeHandle = () => {
			
 
				       let ny = getPosition(this.$refs.numcount).y + this.$refs.numcount.offsetHeight
			
--- a/src/page/home2/style.scss
+++ b/src/page/home2/style.scss
@@ -38,14 +38,26 @@
 
				 }
			
 
				 
			
 
				 
			
 
				+.home-layout{
			
 
				+  overflow: hidden;
			
 
				+}
			
 
				+
			
 
				 .plate01 {
			
 
				   position: relative;
			
 
				-  video {
			
 
				+  .my-video{
			
 
				     width: 100%;
			
 
				-    height: 684px;
			
 
				-    object-fit: fill;
			
 
				+    height: 820px;
			
 
				+    overflow: hidden;
			
 
				+    video {
			
 
				+      width: 100%;
			
 
				+      position: relative;
			
 
				+      top: -150px;
			
 
				+      // height: 684px;
			
 
				+      // object-fit: fill;
			
 
				+    }
			
 
				   }
			
 
				   
			
 
				+  
			
 
				   .layout {
			
 
				     overflow: hidden;
			
 
				     margin: 0 auto;
			
@@ -155,9 +167,10 @@
 
				     background-color: #fff;
			
 
				     border-radius: 50%;
			
 
				     text-align: center;
			
 
				-    z-index: 3;
			
 
				+    z-index: 2;
			
 
				     > img {
			
 
				       margin-top: 30px;
			
 
				+      animation: linear-jump 1s infinite ease-out alternate;
			
 
				     }
			
 
				   }
			
 
				 
			
@@ -204,18 +217,20 @@
 
				     padding: 117px 0;
			
 
				     .media {
			
 
				       flex: 1 0.5 auto;
			
 
				-
			
 
				       video,
			
 
				       img {
			
 
				          width: 100%;
			
 
				       }
			
 
				-
			
 
				       &.iframe {
			
 
				         position: relative;
			
 
				         >div {
			
 
				           padding-top: 75%;
			
 
				         }
			
 
				-
			
 
				+        .video{
			
 
				+          width: 66%!important;
			
 
				+          position: relative;
			
 
				+          left: 2px;
			
 
				+        }
			
 
				         iframe {
			
 
				           position: absolute;
			
 
				           top: 0;
			
@@ -234,9 +249,8 @@
 
				       h2 {
			
 
				         font-size: 24px;
			
 
				         margin-bottom: 30px;
			
 
				-        max-width: 360px;
			
 
				+        max-width: 460px;
			
 
				         line-height: 1.2em;
			
 
				-
			
 
				         span {
			
 
				           display: block;
			
 
				           margin-bottom: 15px;
			
@@ -259,6 +273,7 @@
 
				 
			
 
				     .content {
			
 
				       margin-left: 5%;
			
 
				+      margin-right: 5%;
			
 
				     }
			
 
				   }
			
 
				 
			
@@ -266,7 +281,7 @@
 
				     margin-left: 15%;
			
 
				     flex-direction: row-reverse;
			
 
				     .content {
			
 
				-      margin-right: 5%;
			
 
				+      margin-right: 12%;
			
 
				     }
			
 
				   }
			
 
				 
			
@@ -280,17 +295,20 @@
 
				 
			
 
				   .hxbg-layout {
			
 
				     position: relative;
			
 
				+    .video{
			
 
				+      width: 82%!important;
			
 
				+    }
			
 
				   }
			
 
				 
			
 
				   .hxbg {
			
 
				     position: absolute;
			
 
				-    width: calc(100vw - 50px);
			
 
				+    width: 100vw;
			
 
				     left: 0;
			
 
				     z-index: 1; 
			
 
				   }
			
 
				 
			
 
				   .hxbg-1 {
			
 
				-    bottom: 80px;
			
 
				+    bottom: 10px;
			
 
				   }
			
 
				 
			
 
				   .hxbg-2 {
			
@@ -387,6 +405,7 @@
 
				       width: 100%;
			
 
				       margin-bottom: 74px;
			
 
				       box-shadow: -25px 50px 30px rgba(0, 0, 0, 0.125);
			
 
				+      cursor: pointer;
			
 
				     }
			
 
				 
			
 
				     .jj {
			
@@ -442,7 +461,7 @@
 
				           padding-right: 30px;
			
 
				           padding-top: 10px;
			
 
				           display: inline-block;
			
 
				-          background: url('~@/assets/images/index_icon_record_arrow.png') no-repeat top right;
			
 
				+          background: url('https://4dscene.4dage.com/new4dkk/images/index_icon_record_arrow.png') no-repeat top right;
			
 
				         }
			
 
				 
			
 
				         p {
			
@@ -566,4 +585,51 @@
 
				     padding: 100px 150px;
			
 
				     margin-bottom: 10%;
			
 
				   }
			
 
				+}
			
 
				+
			
 
				+@media screen and (max-width: 1600px) {
			
 
				+  .home-layout{
			
 
				+    .plate01 {
			
 
				+      .my-video{
			
 
				+        height: auto;
			
 
				+        video{
			
 
				+          top: 0;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+    .plate02 {
			
 
				+      .item{
			
 
				+        .content{
			
 
				+          h2{
			
 
				+            max-width:530px;
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+      .item-1{
			
 
				+        margin: 0 10%;
			
 
				+      }
			
 
				+      .item-2{
			
 
				+        margin-left: 10%;
			
 
				+        .content{
			
 
				+          margin-right: 7%;
			
 
				+          h2{
			
 
				+            max-width: 485px;
			
 
				+          }
			
 
				+        }
			
 
				+        .media{
			
 
				+          .video{
			
 
				+            width: 76% !important;
			
 
				+          }
			
 
				+        } 
			
 
				+      }
			
 
				+      .item-3{
			
 
				+        margin-right:10%;
			
 
				+        .content{
			
 
				+          h2{
			
 
				+            max-width: 600px;
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				 }
			
--- a/src/page/layout/header/index.vue
+++ b/src/page/layout/header/index.vue
@@ -1,13 +1,13 @@
 
				 <template>
			
 
				   <div class="header-layout">
			
 
				-    <div class="logo-layout">
			
 
				+    <div  class="logo-layout">
			
 
				       <router-link :to="{name: 'home'}" class="logo">
			
 
				         <vcenter>
			
 
				-          <img src="@/assets/images/logo.png" alt="">
			
 
				+          <img :src="`${$cdn}images/logo.png`" alt="">
			
 
				         </vcenter>
			
 
				       </router-link>
			
 
				     </div>
			
 
				-    <div class="menu">
			
 
				+    <div  class="menu">
			
 
				       <div class="lang">
			
 
				         <vcenter>
			
 
				           <a :class="{active: language === 'en'}" @click="$store.commit('change_language', 'en')">En</a>
			
@@ -16,7 +16,7 @@
 
				       </div>
			
 
				       <div class="list" ref="list" @mouseleave="hoverCp !== 'isearch' && hideCp()">
			
 
				         <a
			
 
				-          v-for="nav in navs"
			
 
				+          v-for="nav in langHeader"
			
 
				           :key="nav.text"
			
 
				           @mouseenter="hoverCp !== 'isearch' && showCp(nav.cp, 135)"
			
 
				           @click="clickHandle(nav)"
			
@@ -25,13 +25,13 @@
 
				         </a>
			
 
				 
			
 
				         <div class="child-layout" :style="{maxHeight: height + 'px'}" ref="navLayout">
			
 
				-          <i class="silp" :style="{left: split + 'px'}"></i>
			
 
				+          <i class="silp" :style="{left: split + 'px',height:hoverCp === 'isearch'?'auto':'100%'}"></i>
			
 
				           <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>
			
@@ -52,6 +52,7 @@
 
				 import {mapState} from 'vuex'
			
 
				 import vcenter from '@/components/vcenter'
			
 
				 import { getPosition } from '@/util'
			
 
				+import browser from '@/util/browser'
			
 
				 
			
 
				 export default {
			
 
				   data () {
			
@@ -60,18 +61,14 @@ export default {
 
				       hoverCp: 'product',
			
 
				       overb: false,
			
 
				       active: true,
			
 
				-      navs: [
			
 
				-        {text: '产品购买', cp: 'product'},
			
 
				-        {text: '核心技术', cp: 'technology'},
			
 
				-        {text: '行业应用', cp: 'case'},
			
 
				-        {text: '服务支持', cp: 'service'},
			
 
				-        {text: '关于我们', cp: 'about'}
			
 
				-      ]
			
 
				+      ismobile: browser.mobile
			
 
				     }
			
 
				   },
			
 
				   methods: {
			
 
				     clickHandle (nav) {
			
 
				-      this.$router.push({name: nav.cp})
			
 
				+      if (nav.cp === 'about') {
			
 
				+        this.$router.push({name: nav.cp})
			
 
				+      }
			
 
				     },
			
 
				     showCp (cp, height) {
			
 
				       clearTimeout(this.timeout)
			
@@ -99,6 +96,7 @@ export default {
 
				   computed: {
			
 
				     ...mapState({
			
 
				       language: state => state.language.current,
			
 
				+      langHeader: state => state.language.home.headers,
			
 
				       split: state => state.ui.navDivision
			
 
				     })
			
 
				   },
			
--- a/src/page/layout/header/istyle.scss
+++ b/src/page/layout/header/istyle.scss
@@ -15,12 +15,12 @@
 
				     right: 0;
			
 
				     transition: max-height $mc;
			
 
				     overflow: hidden;
			
 
				-
			
 
				+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
			
 
				     .silp {
			
 
				       position: absolute;
			
 
				       width: 1px;
			
 
				       height: 100%;
			
 
				-      background-color: $split;
			
 
				+      background-color: #ededed;
			
 
				       z-index: 2;
			
 
				     }
			
 
				   }
			
@@ -55,15 +55,19 @@
 
				         font-size: 16px;
			
 
				         font-weight: bold;
			
 
				         margin-left: 5px;
			
 
				+        color: #727272;
			
 
				+      }
			
 
				+      .active{
			
 
				+        color: #fff;
			
 
				       }
			
 
				     }
			
 
				 
			
 
				     .list {
			
 
				       border-left: 1px solid $split;
			
 
				-      padding: 0 60px;
			
 
				+      padding: 0 34px;
			
 
				       display: flex;
			
 
				       min-width: 480px;
			
 
				-      max-width: 750px;
			
 
				+      max-width: 610px;
			
 
				       justify-content: space-between;
			
 
				       flex: 4;
			
 
				 
			
@@ -76,7 +80,13 @@
 
				         position: relative;
			
 
				         flex: 0 0 auto;
			
 
				         transition: color $mc;
			
 
				-
			
 
				+        
			
 
				+        &:last-of-type{
			
 
				+          &::before,
			
 
				+          &::after {
			
 
				+            display: none;
			
 
				+          }
			
 
				+        }
			
 
				         &::before,
			
 
				         &::after {
			
 
				           content: '';
			
@@ -111,6 +121,7 @@
 
				             border-top-color: #000;
			
 
				           }
			
 
				         }
			
 
				+
			
 
				       }
			
 
				     }
			
 
				   }
			
@@ -183,4 +194,14 @@
 
				     }
			
 
				   }
			
 
				 
			
 
				-}
			
 
				+}
			
 
				+
			
 
				+@media screen and (max-width:1600px){
			
 
				+  .header-layout{
			
 
				+    .menu {
			
 
				+      .lang {
			
 
				+        max-width: 150px;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
--- a/src/page/location/index.vue
+++ b/src/page/location/index.vue