0603

src/assets/style/public.scss

@@ -2,6 +2,14 @@ $battery-start:52%;
 $battery-end:32%;
 $theme-color:#1fe4dc;
 
+@font-face {
+  font-family: 'OSP-DIN';
+  src: url('https://static.insta360.com/assets/www/common/fonts/osp-din/OSP-DIN.eot');
+  /* IE9 Compat Modes */
+  src: url('https://static.insta360.com/assets/www/common/fonts/osp-din/OSP-DIN.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('https://static.insta360.com/assets/www/common/fonts/osp-din/OSP-DIN.woff') format('woff'), /* Pretty Modern Browsers */ url('https://static.insta360.com/assets/www/common/fonts/osp-din/OSP-DIN.ttf') format('truetype'), /* Safari, Android, iOS */ url('https://static.insta360.com/assets/www/common/fonts/osp-din/OSP-DIN.svg#OSP-DIN') format('svg');
+  /* Legacy iOS */
+}
+
 #app {
   background-color: #fff;
 }
@@ -15,6 +23,10 @@ $theme-color:#1fe4dc;
   background-color: rgba(0, 0, 0, 0.4)
 }
 
+html {
+  font-family: "Roboto", "BlinkMacSystemFont", "Segoe UI", "Helvetica Neue", Helvetica, Arial, "Noto Sans CJK SC", "PingFang SC", "-apple-system", "Hiragino Sans GB", "Noto Sans", "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1", "WenQuanYi Micro Hei", "Heiti SC", sans-serif;
+}
+
 .middle {
   position: absolute;
   left: 50%;
@@ -58,6 +70,7 @@ $theme-color:#1fe4dc;
   font-weight: normal;
 }
 
+
 .b-label {
   font-size: 30px;
 }

src/assets/style/reset.scss

@@ -29,7 +29,7 @@ a{text-decoration: none;}
 
 ::-webkit-scrollbar-thumb {
   height: 50px;
-  background-color: #999;
+  background-color: #ddd;
   -webkit-border-radius: 4px;
   outline: 2px solid #fff;
   outline-offset: -2px;

src/page/binocular/style.scss

@@ -404,7 +404,7 @@ $txt_delay: 0.2s;
       left: -6vw;
 
       .b-title {
-        margin: 0 0 0 25px;
+        margin: 0 0 0 120px;
         letter-spacing: 2.4px;
         opacity: 0;
       }
@@ -920,6 +920,9 @@ $txt_delay: 0.2s;
       .fkkj-layout {
         .fkkj-right {
           left: 0;
+          .b-title {
+            text-align: left;
+          }
         }
       }
       .hdsp-layout {

src/page/cases/index.vue

@@ -99,12 +99,15 @@ export default {
       this.currentPage = 1
       this.getData()
     },
+    langCases (newVal) {
+      this.caseType = newVal.typeName[this.$route.params.id]
+    },
     '$route.params.id': {
       deep: true,
       immediate: true,
       handler (newVal) {
         this.currentPage = 1
-        this.caseType = newVal
+        this.caseType = this.langCases.typeName[newVal]
         this.total = typeTotal[newVal]
         this.getData()
       }
@@ -142,5 +145,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import './style.scss'
+@import './style.scss';
 </style>

src/page/cases/overview/index.vue

@@ -2,12 +2,12 @@
   <div>
     <div class="plate01">
       <img src="@/assets/images/cases_img_ban.png" class="banner">
-      <p :style="{left:(split-180)+'px'}">行业与应用</p>
+      <p :style="{left:(split-180)+'px'}">{{langOverview.application}}</p>
     </div>
 
     <div class="plate02" :style="{marginLeft:(split-288)+'px'}">
       <div class="navs">
-        <router-link v-for="(item,i) in langOverview" :key="i" tag="a" :to="item.to">
+        <router-link v-for="(item,i) in langOverview.setting.case_overview" :key="i" tag="a" :to="item.to">
           <i class="iconfont" :class="item.icon"></i>
           {{item.name}}
         </router-link>
@@ -24,7 +24,7 @@ export default {
   components: {iFooter: footer},
   computed: {
     ...mapState({
-      langOverview: state => state.language.home.navs.setting.case_overview,
+      langOverview: state => state.language.home.navs,
       split: state => state.ui.navDivision
     })
   }

src/page/cases/style.scss

@@ -35,7 +35,8 @@
           }
           li {
             border-right: 1px solid #e5e5e5;
-            width: 97px;
+            // width: 97px;
+            padding: 0 20px;
             text-align: center;
             float: left;
             cursor: pointer;

src/page/eight/index.vue

@@ -59,9 +59,10 @@
           </div> -->
           <!-- <img class="f-img" :src="`${$cdn}images/xingkong.png`" alt=""> -->
           <div class="f-img">
-            <iframe src="https://www.4dage.com/overview/webvr/tour.html" frameborder="0"></iframe>
+            <video src="@/assets/video/fenbianlv.mp4" autoplay muted loop></video>
+            <!-- <iframe src="https://www.4dage.com/overview/webvr/tour.html" frameborder="0"></iframe> -->
           </div>
-          <p class="f-dec">四维看看Pro所拍摄的画面分辨率高达10000*5000像素</p>
+          <p class="f-dec">{{langEight.definition.top.intro}}</p>
         </div>
       </div>
       <div class="bottom plate">

src/page/eight/style.scss

@@ -331,12 +331,15 @@ $num_time: 0.6s;
         margin-top: 83px;
         animation: fadeUp 0.5s ease-out 1 both $txt_delay*3;
         width: 530px;
-        height: 265px;
-        border-radius: 5px;
+        // height: 265px;
         overflow: hidden;
-        iframe{
+        // iframe,video{
+        //   width: 100%;
+        //   height: 100%;
+        // }
+        video{
           width: 100%;
-          height: 100%;
+          border-radius: 5px;
         }
       }
       .f-dec{
@@ -583,9 +586,9 @@ $num_time: 0.6s;
       position: relative;
       span{
         position: absolute;
-        left: calc(50% - 100px);
+        right: calc(50% + 50px);
         top: 48%;
-        transform: translate(-50%,-50%);
+        transform: translate(0,-50%);
         font-size: 24px;
         color: #6b6b6c;
         display: inline-block;

src/page/home2/index.vue

@@ -32,31 +32,31 @@
         <div>
           <img class="img-pro" :src="`${$cdn}images/banner_pro.png`" >
           <div class="info">
-            <h2>四维看看 Pro</h2>
-            <h3>专业精准建模，高效复刻空间</h3>
-            <p>100元定金预售</p>
+            <h2>{{langHome.booking.name}}</h2>
+            <h3>{{langHome.booking.dec}}</h3>
+            <p>{{langHome.booking.price}}</p>
             <div class="btns">
               <div class="button"><vcenter><img :src="`${$cdn}images/product_icon_arrow.png`" alt=""></vcenter></div>
-              <router-link to="/purchase" class="button purchase">立即预购</router-link>
+              <router-link to="/purchase" class="button purchase">{{langHome.booking.btn}}</router-link>
             </div>
           </div>
         </div>
       </div>
       <div class="hxjs">
-        <h2>{{langHome.tech.title}}</h2>
-        <p>{{langHome.tech.dec}}</p>
+        <h2 class="b-title">{{langHome.tech.title}}</h2>
+        <p class="b-label">{{langHome.tech.dec}}</p>
         <div>
           <figure>
             <img :src="`${$cdn}images/hxjs_1.png`" alt="">
-            <figcaption>{{langHome.tech.icon[0]}}</figcaption>
+            <figcaption class="b-label">{{langHome.tech.icon[0]}}</figcaption>
           </figure>
           <figure>
             <img :src="`${$cdn}images/hxjs_2.png`" alt="">
-            <figcaption>{{langHome.tech.icon[1]}}</figcaption>
+            <figcaption class="b-label">{{langHome.tech.icon[1]}}</figcaption>
           </figure>
           <figure>
             <img :src="`${$cdn}images/hxjs_3.png`" alt="">
-            <figcaption>{{langHome.tech.icon[2]}}</figcaption>
+            <figcaption class="b-label">{{langHome.tech.icon[2]}}</figcaption>
           </figure>
         </div>
       </div>
@@ -70,9 +70,9 @@
             </video>
           </div>
           <div class="content">
-            <h2>
-              <span>{{langHome.tech.location.title}}</span>
-              {{langHome.tech.location.dec}}
+            <h2 class="b-title">
+              {{langHome.tech.location.title}}
+              <span class="b-label">{{langHome.tech.location.dec}}</span>
             </h2>
             <p></p>
           </div>
@@ -87,23 +87,25 @@
               <!-- <iframe src="http://www.4dmodel.com/SuperTwo/index.html?m=158&version=one" frameborder="0"></iframe> -->
           </div>
           <div class="content">
-            <h2>
-              <span>{{langHome.tech.modeling.title}}</span>
-              {{langHome.tech.modeling.dec}}
+            <h2 class="b-title">
+              {{langHome.tech.modeling.title}}
+              <span  class="b-label">{{langHome.tech.modeling.dec}}</span>
             </h2>
             <p></p>
           </div>
         </div>
       </div>
 
+      <img :src="`${$cdn}images/background_02.png`" alt="" class="kjzs-img">
+
       <div class="item item-3">
         <div class="media">
         <video  :src="`${$cdn}video/item_3.mp4`" autoplay muted loop></video>
         </div>
         <div class="content">
-          <h2>
-            <span>{{langHome.tech.exhibition.title}}</span>
-            {{langHome.tech.exhibition.dec}}
+          <h2 class="b-title">
+            {{langHome.tech.exhibition.title}}
+            <span class="b-label">{{langHome.tech.exhibition.dec}}</span>
           </h2>
           <p></p>
         </div>
@@ -114,9 +116,8 @@
     <div class="plate04">
       <img :src="`${$cdn}images/background_03.png`"  alt="" class="hxbg hxbg-3">
       <div class="info">
-        <h2>{{langHome.cases.title}}</h2>
-        <p>{{langHome.cases.dec[0]}}</p>
-        <p>{{langHome.cases.dec[1]}}</p>
+        <h2 class="b-title">{{langHome.cases.title}}</h2>
+        <p class="b-label" v-for="(item,i) in langHome.cases.dec" :key="i">{{item}}</p>
       </div>
       <div class="content-layout">
         <div class="tabs">
@@ -147,18 +148,18 @@
       <img :src="`${$cdn}images/index_img_record_bg.png`">
       <div class="info">
         <h2 class="b-title">{{langHome.cases.space.title}}</h2>
-        <h3 class="b-sub">{{langHome.cases.space.sub}}</h3>
+        <h3 class="b-label">{{langHome.cases.space.sub}}</h3>
         <div class="count-group">
           <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>
+            <p class="b-label" v-html="item.text"></p>
           </div>
         </div>
       </div>
     </div>
 
     <div class="plate06">
-      <h2>{{langHome.reports.name}}</h2>
+      <h2 class="b-title">{{langHome.reports.name}}</h2>
       <div class="media-layout">
         <ul>
           <li v-for="(item,i) in langHome.reports.items" :key="i" @click="goto(item.url)">
@@ -216,13 +217,11 @@ export default {
       let ny = getPosition(this.$refs.numcount).y + this.$refs.numcount.offsetHeight
       let sy = getPosition(this.$refs.slide).y + this.$refs.slide.offsetHeight
 
-      console.log('asd', window.innerHeight + (window.scrollY || window.pageYOffset))
-      console.log('asdas', ny)
       if (window.innerHeight + (window.scrollY || window.pageYOffset) > ny) {
         this.startNumCount = true
       }
 
-      if (window.innerHeight + (window.scrollY || window.pageYOffset) > sy) {
+      if (window.innerHeight + (window.scrollY || window.pageYOffset) + 400 > sy) {
         this.slideActive = true
       }
 

src/page/home2/style.scss

@@ -1,20 +1,17 @@
 .b-title {
-  margin-bottom: 25px;
+  line-height: 66px;
+  font-size: 44px;
+  color: #343434;
+  font-weight: 700;
 }
-
-.info>h2 {
-  font-size: 48px;
-  color: #181818;
-  font-weight: 300;
-  line-height: 1.4;
-  margin-bottom: 20px;
+.b-label {
+  line-height: 24px;
+  font-size: 16px;
+  color: #717171;
+  font-weight: normal;
+  margin-top: 10px;
 }
 
-.info>p {
-  font-size: 14px;
-  color: #010101;
-  line-height: 2
-}
 
 .btns .button {
   height: 50px;
@@ -46,7 +43,7 @@
   position: relative;
   .my-video{
     width: 100%;
-    height: 820px;
+    height: calc(100vh - 128px);
     overflow: hidden;
     video {
       width: 100%;
@@ -188,6 +185,7 @@
         vertical-align: top;
         display: inline-block;
         margin-top: 40px;
+        max-width: 550px;
         h2{
           font-size: 36px;
           margin-bottom: 0;
@@ -218,14 +216,8 @@
     text-align: center;
     color: #151515;
 
-    h2 {
-      font-size: 48px;
-      font-weight: 500;
-    }
     p {
-      font-size: 18px;
       width: 720px;
-      line-height: 1.5em;
       margin: 20px auto;
     }
 
@@ -239,7 +231,6 @@
         flex: none;
         
         figcaption {
-          font-size: 18px;
           text-align: center;
         }
       }
@@ -253,7 +244,7 @@
     justify-content: space-between;
     padding: 117px 0;
     .media {
-      flex: 1 0.5 auto;
+      flex: 3;
       video,
       img {
          width: 100%;
@@ -264,7 +255,6 @@
           padding-top: 75%;
         }
         .video{
-          width: 66%!important;
           position: relative;
           left: 2px;
         }
@@ -279,19 +269,16 @@
     }
 
     .content {
-      flex: 0 0.5 auto;
       align-self: center;
       color: #151515;
+      flex: 2;
 
       h2 {
-        font-size: 24px;
         margin-bottom: 30px;
         max-width: 460px;
-        line-height: 1.2em;
         span {
           display: block;
           margin-bottom: 15px;
-          font-size: 18px;
           font-weight: normal;
         }
       }
@@ -308,6 +295,7 @@
     padding-top: 134px;
     margin: 0 15%;
 
+
     .content {
       margin-left: 5%;
       margin-right: 5%;
@@ -315,16 +303,22 @@
   }
 
   .item-2 {
-    margin-left: 15%;
+    margin:0 15%;
     flex-direction: row-reverse;
-    .content {
-      margin-right: 12%;
+    .content{
+      margin-right: 10%;
     }
+    
   }
 
+  .kjzs-img{
+    position: absolute;
+    width: 100vw;
+  }
   .item-3 {
     margin-right: 15%;
     padding-bottom: 0;
+    
     .content {
       margin-left: 5%;
     }
@@ -332,9 +326,6 @@
 
   .hxbg-layout {
     position: relative;
-    .video{
-      width: 82%!important;
-    }
   }
 
   .hxbg {
@@ -349,7 +340,7 @@
   }
 
   .hxbg-2 {
-    bottom: 95px;
+    bottom: 495px;
     top: inherit;
   }
 }
@@ -376,14 +367,8 @@
     z-index: 2;
 
     h2 {
-      color: #151515;
       margin-bottom: 10px;
     }
-
-    p {
-      color: #151515;
-      font-size: 24px;
-    }
   }
 
   .content-layout {
@@ -484,11 +469,9 @@
 
     .b-title {
       color: inherit;
-      font-weight: 400;
     }
 
-    .b-sub{
-      font-size: 18px;
+    .b-label{
       margin-bottom: 40px;
       font-weight: normal;
     }
@@ -510,8 +493,8 @@
         }
 
         p {
-          font-size: 14px;
           margin-top: 14px;
+          margin-bottom: 0;
           font-weight: 300;
           padding-right: 30px;
         }
@@ -525,12 +508,8 @@
   margin: 110px auto 40px;
 
   h2 {
-    font-size: 48px;
-    color: #111111;
     margin-bottom: 90px;
     text-align: center;
-    font-weight: 400;
-
     a {
       float: right;
       font-size: 18px;
@@ -636,7 +615,7 @@
   .home-layout{
     .plate01 {
       .my-video{
-        height: auto;
+        height: calc(100vh - 88px);
         video{
           top: 0;
         }
@@ -661,11 +640,6 @@
             max-width: 485px;
           }
         }
-        .media{
-          .video{
-            width: 76% !important;
-          }
-        } 
       }
       .item-3{
         margin-right:10%;

src/page/layout/aside/index.vue

@@ -1,15 +1,21 @@
 <template>
 <div class="login-layout">
   <div class="mask" :style="{maxHeight:active?'100%':'0'}"></div>
-  <component :is="'login'" :active='active'></component>
+  <component :is="login?'cart':'login'" :active='active'></component>
 </div>
 </template>
 
 <script>
+import {mapState} from 'vuex'
 import login from './temp/login'
 import cart from './temp/cart'
 
 export default {
+  computed: {
+    ...mapState({
+      login: state => state.user.name
+    })
+  },
   props: ['active'],
   components: {
     login,

src/page/layout/aside/temp/cart.vue

@@ -1,61 +1,23 @@
 <template>
   <div class="cart-con" :style="{maxHeight:active?'100%':'0'}">
-    <div class="cart">
-      <div class="c-title">你的购物车</div>
-      <i @click="cartHandle" class="iconfont icon-cuowu"></i>
-    </div>
-    <div class="items">
-      <div class="item" v-for="(item, index) in products" :key="index">
-        <div>
-          <img class="product-img" :src="`${$cdn}images/t_product.png`" alt>
-          <i @click="cartHandle" class="iconfont icon-plus"></i>
-          <img class="product-img" src="@/assets/images/zhijia.png" alt>
-        </div>
-        <div class="taocan">
-          <div>标准套装</div>
-          <div class="numAP">
-            <i>-</i>
-            <span>2</span>
-            <i>+</i>
-          </div>
-        </div>
-        <div class="jiage">
-          <div>￥3399</div>
-          <div class="oper">
-            <span>移除</span>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="jiesuan">
-      <p>共计2件套装</p>
-      <div class="price">￥6,839</div>
-      <div class="btns">
-        <div class="c-button"><vcenter><img :src="`${$cdn}images/product_icon_arrow.png`" alt=""></vcenter></div>
-        <router-link to="/purchase" class="c-button purchase">立即结算</router-link>
-      </div>
-    </div>
+    <component :is="cp" @backList="cp='list'" @toPay="cp='detail'"></component>
   </div>
 </template>
 
 <script>
-import vcenter from '@/components/vcenter'
+import list from './ctemp/list'
+import detail from './ctemp/detail'
 
 export default {
   props: ['active'],
   data () {
-    let products = ['asd']
     return {
-      products
+      cp: 'list'
     }
   },
   components: {
-    vcenter
-  },
-  methods: {
-    cartHandle () {
-      this.$bus.$emit('hideAside')
-    }
+    list,
+    detail
   }
 }
 </script>
@@ -71,6 +33,7 @@ export default {
   display: inline-block;
   background-color: #1fe4dc;
   text-align: center;
+  cursor: pointer;
   &:first-child {
     width: 50px;
     box-sizing: border-box;
@@ -112,13 +75,17 @@ export default {
     }
   }
   .items {
+    max-height:600px;
+    overflow: auto;
     .item {
       display: flex;
       justify-content: space-between;
       align-items: center;
       border-top: 1px solid #e7e7e7;
-      border-bottom: 1px solid #e7e7e7;
       padding: 20px 60px;
+      &:last-of-type {
+        border-bottom: 1px solid #e7e7e7;
+      }
       img {
         width: 80px;
         vertical-align: middle;

src/page/layout/aside/temp/ctemp/detail.vue

@@ -0,0 +1,442 @@
+<template>
+  <div>
+    <div class="detail-layout">
+      <div class="detail-header">
+        <div class="c-title">确认订单</div>
+        <i @click="backHandle" class="iconfont icon-shang"></i>
+      </div>
+      <edit
+        :name="'收货信息'"
+        @clickOper="handleOper('addressStatus')"
+        :oper="addressStatus?'编辑':'保存'"
+        :isActive="addressStatus"
+        class="edit-item"
+      >
+        <div class="address" slot="show">
+          <p>
+            <span>陈志广</span>
+            <span>13211064273</span>
+          </p>
+          <p class="p-desc">广东省珠海市唐家高新区港湾1号港11四维时代科技</p>
+        </div>
+        <div class="address edit-address" slot="edit">
+          <div class="input-con">
+            <input type="text" placeholder="姓名">
+            <input type="text" placeholder="电话">
+          </div>
+          <div class="input-con">
+            <input type="text" placeholder="广东省">
+            <input type="text" placeholder="珠海市">
+            <input type="text" placeholder="唐家湾镇">
+          </div>
+          <div class="input-con address-input">
+            <input type="text" placeholder="港湾1号">
+          </div>
+        </div>
+      </edit>
+      <div class="pay-type">
+        <div class="title">支付方式</div>
+        <div class="body">
+          <div class="pay-tag" :class="{'tag-active':paytype==='alipay'}" @click="paytype='alipay'">
+            <img src="@/assets/images/ali-pay.png" class="t-icon" alt>
+            <span>支付宝</span>
+            <img src="@/assets/images/tag-icon.png" class="t-click" alt>
+          </div>
+          <div class="pay-tag" :class="{'tag-active':paytype==='wechat'}" @click="paytype='wechat'">
+            <img src="@/assets/images/wechat-pay.png" class="t-icon" alt>
+            <span>微信支付</span>
+            <img src="@/assets/images/tag-icon.png" class="t-click" alt>
+          </div>
+          <div class="pay-tag" :class="{'tag-active':paytype==='paypal'}" @click="paytype='paypal'">
+            <img src="@/assets/images/paypal.png" class="t-icon" alt>
+            <span>paypal</span>
+            <img src="@/assets/images/tag-icon.png" class="t-click" alt>
+          </div>
+        </div>
+      </div>
+      <edit
+        :name="'我的发票抬头'"
+        @clickOper="handleOper('invoiceStatus')"
+        :oper="invoiceStatus?'编辑':'保存'"
+        :isActive="invoiceStatus"
+        class="edit-item"
+      >
+        <div class="invoice" slot="show">
+          <p class="p-desc">暂无信息</p>
+        </div>
+        <div class="invoice edit-invoice" slot="edit">
+          <div class="select-con">
+            <div :class="{'tag-active':invoice==='noinvoice'}" @click="invoice='noinvoice'">
+              <span>不需要发票</span>
+              <img src="@/assets/images/tag-icon.png" alt>
+            </div>
+            <div :class="{'tag-active':invoice==='normal'}" @click="invoice='normal'">
+              <span>增值税普通发票</span>
+              <img src="@/assets/images/tag-icon.png" alt>
+            </div>
+            <div :class="{'tag-active':invoice==='zengzhi'}" @click="invoice='zengzhi'">
+              <span>增值税专用发票</span>
+              <i></i>
+              <img src="@/assets/images/tag-icon.png" alt>
+            </div>
+          </div>
+          <div class="input-con">
+            <input type="text" placeholder="请输入发票抬头">
+            <input type="text" placeholder="18位的统一社会信用代码 / 税务登记号">
+          </div>
+          <div class="input-con">
+            <input type="text" placeholder="注册地址">
+            <input type="text" placeholder="注册电话">
+          </div>
+          <div class="input-con">
+            <input type="text" placeholder="开户银行">
+            <input type="text" placeholder="银行账户">
+          </div>
+        </div>
+      </edit>
+      <div class="express-type">
+        <div class="title">物流方式</div>
+        <img class="express-img" src="@/assets/images/sf-express.png" alt>
+      </div>
+      <div class="product-type">
+        <div class="title">商品信息</div>
+        <div class="p-info">
+          <img src="@/assets/images/banner_pro.png" alt>
+          <div class="p-params">
+            <h3>四维看看 Pro</h3>
+            <p>本机主体 x 1, 拍摄支架 x 1</p>
+          </div>
+          <div class="p-price">￥ 8,458</div>
+        </div>
+        <div class="p-detail">
+          <div>
+            <span>商品总价：</span>
+            <span>￥8,458</span>
+          </div>
+          <div>
+            <span>税费及其他费用：</span>
+            <span>￥0</span>
+          </div>
+          <div>
+            <span>运费：</span>
+            <span>￥0</span>
+          </div>
+          <div>
+            <span>合计：</span>
+            <span>￥8,458</span>
+          </div>
+        </div>
+        <div class="p-pay">
+          <div class="agree">
+            <span></span>
+            <span>同意商城销售协议</span>
+          </div>
+          <div class="c-button purchase">付款</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import vcenter from '@/components/vcenter'
+import edit from '@/components/edit'
+
+export default {
+  data () {
+    let products = ['asd', 'dwdwd']
+    return {
+      products,
+      addressStatus: false,
+      invoiceStatus: false,
+      invoice: 'noinvoice',
+      paytype: 'wechat'
+    }
+  },
+  components: {
+    vcenter,
+    edit
+  },
+  methods: {
+    backHandle () {
+      this.$emit('backList')
+    },
+    handleOper (type) {
+      this[type] = !this[type]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$theme-color: #1fe4dc;
+$border-color: #e7e7e7;
+input {
+  appearance: none;
+  line-height: 36px;
+  height: 36px;
+  border: solid 1px $border-color;
+  padding-left: 10px;
+  &:focus {
+    border: solid 1px $theme-color;
+  }
+}
+.c-button {
+  height: 50px;
+  padding-top: 0;
+  padding-bottom: 0;
+  vertical-align: middle;
+  margin-top: 10px;
+  display: inline-block;
+  background-color: #1fe4dc;
+  text-align: center;
+  cursor: pointer;
+  &:first-child {
+    width: 50px;
+    box-sizing: border-box;
+  }
+
+  &:last-child {
+    width: 150px;
+    line-height: 50px;
+    color: #000;
+    font-size: 14px;
+  }
+}
+
+.detail-layout {
+  overflow: auto;
+  height: 100vh;
+  padding-bottom: 40px;
+  .detail-header {
+    color: #000;
+    font-size: 16px;
+    position: relative;
+    .c-title {
+      height: 70px;
+      line-height: 70px;
+      text-align: center;
+      padding: 0 30px;
+      border-bottom: 1px solid #e7e7e7;
+    }
+    i {
+      position: absolute;
+      color: #999;
+      top: 50%;
+      left: 30px;
+      font-size: 24px;
+      cursor: pointer;
+      transform: translateY(-50%) rotate(-90deg);
+    }
+  }
+  .edit-item {
+    width: 100%;
+    border-bottom: 0;
+    padding: 30px;
+    .info,
+    .address,
+    .invoice {
+      margin-top: 20px;
+      p {
+        line-height: 36px;
+        span {
+          padding-right: 10px;
+        }
+      }
+      .p-desc {
+        color: #a0a0a0;
+        line-height: 24px;
+      }
+      .avatar {
+        width: 68px;
+        height: 68px;
+        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
+        margin: 5px 0;
+      }
+      .nickname {
+        width: 126px;
+      }
+    }
+    .edit-address {
+      .input-con {
+        input {
+          width: 200px;
+          line-height: 36px;
+          height: 36px;
+          margin: 10px 25px 10px 0;
+          &:last-of-type {
+            margin-right: 0;
+          }
+        }
+      }
+      .address-input {
+        input {
+          width: 660px;
+        }
+      }
+    }
+    .edit-invoice {
+      .select-con {
+        div {
+          position: relative;
+          cursor: pointer;
+          width: 200px;
+          line-height: 36px;
+          height: 36px;
+          margin: 10px 25px 10px 0;
+          border: solid 1px $border-color;
+          color: #a0a0a0;
+          padding: 0 10px;
+          display: inline-block;
+          img {
+            display: none;
+            position: absolute;
+            bottom: 0;
+            right: 0;
+          }
+          &:last-of-type {
+            margin-right: 0;
+          }
+        }
+        .tag-active {
+          border: solid 1px $theme-color;
+          color: #000;
+          img {
+            display: inline-block;
+          }
+        }
+      }
+      .input-con {
+        input {
+          width: 316px;
+          line-height: 36px;
+          height: 36px;
+          margin: 10px 25px 10px 0;
+          &:last-of-type {
+            margin-right: 0;
+          }
+        }
+      }
+    }
+  }
+  .pay-type,
+  .express-type,
+  .product-type {
+    .title {
+      padding: 0 30px;
+      font-size: 16px;
+    }
+    .body {
+      padding: 0 30px;
+      .pay-tag {
+        cursor: pointer;
+        border: 1px solid $border-color;
+        width: 200px;
+        line-height: 36px;
+        height: 36px;
+        margin-top: 20px;
+        position: relative;
+        span {
+          margin-left: 36px;
+          display: inline-block;
+          text-align: center;
+          padding-left: 60px;
+        }
+        img {
+          position: absolute;
+        }
+        .t-icon {
+          width: 36px;
+          height: 36px;
+          padding: 6px;
+          left: 0;
+          border-right: 1px solid $border-color;
+        }
+        .t-click {
+          right: 0;
+          bottom: 0;
+          display: none;
+        }
+      }
+      .tag-active {
+        border: 1px solid $theme-color;
+        span {
+          color: #000;
+        }
+        .t-icon {
+          border-right: 1px solid $theme-color;
+        }
+        .t-click {
+          display: inline-block;
+        }
+      }
+    }
+    .express-img {
+      padding: 30px;
+    }
+    .p-info {
+      border-bottom: 1px solid $border-color;
+      padding: 20px 30px;
+      min-height: 80px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      position: relative;
+      img {
+        width: 30px;
+        flex-shrink: 0;
+      }
+      .p-params {
+        padding-left: 30px;
+        vertical-align: middle;
+        position: absolute;
+        top: 50%;
+        left: 50px;
+        transform: translateY(-50%);
+        h3 {
+          font-weight: normal;
+        }
+        p {
+          color: #ddd;
+          margin-top: 5px;
+        }
+      }
+    }
+    .p-detail {
+      padding: 30px;
+      & > div {
+        display: flex;
+        height: 30px;
+        line-height: 30px;
+        font-size: 16px;
+        justify-content: space-between;
+        span {
+          &:last-child {
+            display: inline-block;
+            width: 80px;
+          }
+        }
+      }
+    }
+    .p-pay{
+      padding: 0 30px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .agree{
+        cursor: pointer;
+        span{
+          color: #a0a0a0;
+          vertical-align: middle;
+          &:first-child{
+            border: solid 1px $border-color;
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/page/layout/aside/temp/ctemp/list.vue

@@ -0,0 +1,216 @@
+<template>
+  <div>
+    <div class="cart">
+      <div class="c-title">你的购物车</div>
+      <i @click="cartHandle" class="iconfont icon-cuowu"></i>
+    </div>
+    <div class="items">
+      <div class="item" v-for="(item, index) in products" :key="index">
+        <div>
+          <img class="product-img" :src="`${$cdn}images/t_product.png`" alt>
+          <i @click="cartHandle" class="iconfont icon-plus"></i>
+          <img class="product-img" src="@/assets/images/zhijia.png" alt>
+        </div>
+        <div class="taocan">
+          <div>标准套装</div>
+          <div class="numAP">
+            <i>-</i>
+            <span>2</span>
+            <i>+</i>
+          </div>
+        </div>
+        <div class="jiage">
+          <div>￥3399</div>
+          <div class="oper">
+            <span @click="rmItem(item.id)">移除</span>
+          </div>
+        </div>
+      </div>
+      <div v-if="products.length<=0" class="no-cart">
+        <img src="@/assets/images/no-cart.png" alt="">
+        <p>您的购物车空空如也</p>
+        <p>赶紧行动吧</p>
+      </div>
+    </div>
+    <div v-if="products.length>0" class="jiesuan">
+      <p>共计2件套装</p>
+      <div class="price">￥6,839</div>
+      <div class="btns">
+        <div class="c-button">
+          <vcenter>
+            <img :src="`${$cdn}images/product_icon_arrow.png`" alt>
+          </vcenter>
+        </div>
+        <div @click="toPay" class="c-button purchase">立即结算</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import vcenter from '@/components/vcenter'
+
+export default {
+  data () {
+    let products = [{
+      id: 0
+    }]
+    return {
+      products
+    }
+  },
+  components: {
+    vcenter
+  },
+  methods: {
+    rmItem (id) {
+      console.log(id)
+      let arr = []
+      this.products.forEach(item => {
+        if (item.id !== id) {
+          arr.push(item)
+        }
+      })
+      console.log(arr)
+
+      this.products = arr
+    },
+    toPay () {
+      this.$emit('toPay')
+    },
+    cartHandle () {
+      this.$bus.$emit('hideAside')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.c-button {
+  height: 50px;
+  padding-top: 0;
+  padding-bottom: 0;
+  vertical-align: middle;
+  margin-top: 10px;
+  display: inline-block;
+  background-color: #1fe4dc;
+  text-align: center;
+  cursor: pointer;
+  &:first-child {
+    width: 50px;
+    box-sizing: border-box;
+  }
+
+  &:last-child {
+    width: 150px;
+    line-height: 50px;
+    color: #000;
+    font-size: 14px;
+  }
+}
+
+.cart {
+  color: #000;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 30px;
+  font-size: 16px;
+  .c-title {
+    height: 70px;
+    line-height: 70px;
+  }
+  i {
+    color: #999;
+    cursor: pointer;
+  }
+}
+.items {
+  max-height: 600px;
+  overflow: auto;
+  text-align: center;
+  .item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-top: 1px solid #e7e7e7;
+    padding: 20px 60px;
+    &:last-of-type {
+      border-bottom: 1px solid #e7e7e7;
+    }
+    img {
+      width: 80px;
+      vertical-align: middle;
+      &:last-of-type {
+        width: 100px;
+        margin-top: 40px;
+      }
+    }
+    .iconfont {
+      font-size: 36px;
+      vertical-align: middle;
+      margin: 0 20px;
+    }
+    .taocan {
+      text-align: center;
+      .numAP {
+        margin-top: 30px;
+        span {
+          font-size: 16px;
+          margin: 0 10px;
+        }
+        i {
+          cursor: pointer;
+          display: inline-block;
+          width: 20px;
+          height: 20px;
+          line-height: 10px;
+          padding: 5px;
+          border: 1px solid #e7e7e7;
+        }
+      }
+    }
+    .jiage {
+      .oper {
+        margin-top: 30px;
+        text-align: right;
+        span {
+          cursor: pointer;
+          color: #a0a0a0;
+          border-bottom: 1px solid #e7e7e7;
+        }
+      }
+    }
+  }
+
+  .no-cart{
+    margin: 0 auto;
+    width: 100%;
+    border-top: 1px solid #e7e7e7;
+    padding-top: 40px;
+    img{
+      max-width: 300px;
+      margin-bottom: 20px;
+    }
+    p{
+      font-size: 24px;
+      color: #a0a0a0;
+      margin-left: 100px;
+      line-height: 1.5;
+    }
+  }
+}
+.jiesuan {
+  text-align: right;
+  margin-top: 40px;
+  margin-right: 60px;
+  p {
+    color: #a0a0a0;
+    line-height: 36px;
+  }
+  .price {
+    line-height: 40px;
+    font-size: 24px;
+  }
+}
+</style>

src/page/layout/aside/temp/ltemp/login.vue

@@ -7,7 +7,7 @@
         <span></span>
         <span>记住密码</span>
       </div>
-      <div class="temp-btn">登录</div>
+      <div class="temp-btn" @click="login">登录</div>
       <div class="login-dec">不支持通过第三方账号授权登录</div>
     </div>
     <div class="qrcode">
@@ -17,6 +17,16 @@
     </div>
   </div>
 </template>
+<script>
+export default {
+  methods: {
+    login () {
+      this.$bus.$emit('hideAside')
+      this.$store.commit('login')
+    }
+  }
+}
+</script>
 
 <style lang="scss" scoped>
   @import './style.scss';

src/page/layout/header/index.vue

@@ -16,7 +16,7 @@
       </div>
       <div class="list" ref="list" @mouseleave="hoverCp !== 'isearch' && hoverCp !== 'ilogin' && hideCp()">
         <a
-          v-for="nav in langHeader"
+          v-for="nav in langHeader.navs"
           :key="nav.text"
           @mouseenter="hoverCp !== 'isearch' && hoverCp !== 'ilogin' && showCp(nav.cp, 135)"
           @click="clickHandle(nav)"
@@ -38,10 +38,23 @@
           <i class="iconfont icon-cuowu hide"></i>
         </vcenter>
       </a>
-      <a class="user" @click="loginHandle" >
+      <!-- <img class="avatar" src="@/assets/images/product_img_content_3.jpg" alt> -->
+      <a class="user" v-if="!isLogin" @click="loginHandle" >
         <vcenter>
           <i class="iconfont icon-geren"></i>
-          <span>登录</span>
+          <span>{{langHeader.login}}</span>
+        </vcenter>
+      </a>
+      <a class="user cart" v-else >
+        <vcenter>
+          <div class="cart-user" @click="$router.push({name:'manage'})" >
+            <i class="iconfont icon-geren"></i>
+          </div>
+          <div class="cart-icon"  @click="loginHandle" >
+            <i class="iconfont icon-cart"></i>
+            <sup>2</sup>
+            <span>{{langHeader.cart}}</span>
+          </div>
         </vcenter>
       </a>
     </div>
@@ -97,7 +110,8 @@ export default {
     ...mapState({
       language: state => state.language.current,
       langHeader: state => state.language.home.headers,
-      split: state => state.ui.navDivision
+      split: state => state.ui.navDivision,
+      isLogin: state => state.user.name
     })
   },
   mounted () {

src/page/layout/header/istyle.scss

@@ -155,6 +155,10 @@
         margin-left: 4px;
         font-weight: bold;
       }
+      .avatar{
+        width: 68px;
+        height: 68px;
+      }
 
       &.user {
         background-color: #fff;
@@ -163,6 +167,39 @@
         text-align: center;
         box-sizing: border-box;
       }
+
+      &.cart{
+        width: 188px;
+        background-color: #101010;
+        color: #fff;
+        padding: 0;
+        .cart-user{
+          display: inline-block;
+          background: #fff;
+          color: #101010;
+          width: 68px;
+          height: 100%;
+          line-height: 68px;
+        }
+        .cart-icon{
+          padding: 0 14px;
+          display: inline-block;
+          position: relative;
+          sup{
+            width: 14px;
+            height: 14px;
+            font-size: 12px;
+            border-radius: 50%;
+            line-height: 14px;
+            top: -4px;
+            left: 32px;
+            display: inline-block;
+            position: absolute;
+            background-color: #ff0000;
+          }
+        }
+      }
+      
     }
 
     .search {
@@ -200,6 +237,7 @@
         }
       }
     }
+   
   }
 
 }

src/page/layout/login.vue

@@ -1,146 +0,0 @@
-<template>
-<div class="login-layout">
-  <div class="mask" :style="{maxHeight:active?'100%':'0'}"></div>
-  <div class="login-con" :style="{maxHeight:active?'100%':'0'}">
-    <div class="user">
-      <div class="user-btn" @click="logoutHandle">
-        <vcenter>
-          <i class="iconfont icon-geren"></i>
-          <span>关闭</span>
-        </vcenter>
-      </div>
-    </div>
-    <div class="tab">
-      <ul>
-        <li :class="{active:item.id === tabActive}" @click="tabActive = item.id" v-for="(item,i) in tabs" :key="i">
-          {{item.name}}
-        </li>
-      </ul>
-      <component :is="tabActive"></component>
-    </div>
-  </div>
-</div>
-</template>
-
-<script>
-import vcenter from '@/components/vcenter'
-import ilogin from './ltemp/login'
-import iregister from './ltemp/register'
-import iforget from './ltemp/forget'
-
-export default {
-  props: ['active'],
-  components: {
-    vcenter,
-    ilogin,
-    iregister,
-    iforget
-  },
-  data () {
-    let tabs = [
-      {
-        name: '个人账号登录',
-        id: 'ilogin'
-      }, {
-        name: '注册',
-        id: 'iregister'
-      }, {
-        name: '忘记密码',
-        id: 'iforget'
-      }
-    ]
-    return {
-      tabs,
-      tabActive: 'ilogin'
-    }
-  },
-  methods: {
-    logoutHandle () {
-      this.$bus.$emit('hideAside')
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.login-layout {
-  $animateType: cubic-bezier(0.77, 0, 0.175, 1);
-
-  .mask {
-    transition: max-height 0.7s $animateType;
-    max-height: 100%;
-    position: fixed;
-    z-index: 9999;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    background: rgba($color: #000000, $alpha: 0.8);
-  }
-
-  .login-con {
-    position: fixed;
-    right: 0;
-    height: 100%;
-    transition: max-height 0.7s $animateType;
-    max-height: 100%;
-    background: #232326;
-    z-index: 99999;
-    top: 0;
-    overflow: hidden;
-    .user {
-      background: #fff;
-      height: 68px;
-      .user-btn {
-        cursor: pointer;
-        float: right;
-        background-color: #000;
-        color: #fff;
-        height: 68px;
-        width: 120px;
-        text-align: center;
-        box-sizing: border-box;
-        i {
-          font-size: 24px;
-          vertical-align: middle;
-        }
-
-        span {
-          font-size: 16px;
-          margin-left: 4px;
-          font-weight: bold;
-          vertical-align: middle;
-        }
-      }
-    }
-    .tab{
-      ul{
-        background-color: #fff;
-        padding-right: 120px;
-        li{
-          display: inline-block;
-          color: #a1a1a1;
-          background-color: #fff;
-          line-height: 70px;
-          text-align: center;
-          height: 70px;
-          font-size: 18px;
-          cursor: pointer;
-          width: 140px;
-          &:last-child{
-            border-left: 1px solid #ededed;
-            width: 170px;
-          }
-          &:first-child{
-            border-right: 1px solid #ededed;
-            width: 190px;
-          }
-        }
-        .active{
-          color: #fff;
-          background-color: #232326;
-        }
-      }
-    }
-  }
-}
-</style>

src/page/layout/ltemp/forget.vue

@@ -1,16 +0,0 @@
-<template>
-  <div class="iforget-layout">
-    <div class="input"><input placeholder="输入手机号码" type="text"></div>
-    <div class="verification input">
-      <input placeholder="验证码" type="text">
-      <span>获取验证码</span>
-    </div>
-    <div class="input"><input placeholder="新密码" type="text"></div>
-    <div class="input"><input placeholder="再次输入新密码" type="text"></div>
-    <div class="temp-btn submit">提交</div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-  @import './style.scss';
-</style>

src/page/layout/ltemp/login.vue

@@ -1,23 +0,0 @@
-<template>
-  <div class="ilogin-layout">
-    <div class="input-con">
-    <div class="input"><input placeholder="请输入手机号码" type="text"></div>
-    <div class="input"><input placeholder="输入密码" type="text"></div>
-      <div class="remember">
-        <span></span>
-        <span>记住密码</span>
-      </div>
-      <div class="temp-btn">登录</div>
-      <div class="login-dec">不支持通过第三方账号授权登录</div>
-    </div>
-    <div class="qrcode">
-      <img src="@/assets/images/index_img_ecode.png" alt="">
-      <img src="@/assets/images/icon-qrcode.png" alt="">
-      <div class="login-dec">打开四维看看app扫一扫登录</div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-  @import './style.scss';
-</style>

src/page/layout/ltemp/register.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="iregister-layout">
-    <div class="input"><input placeholder="昵称" type="text"></div>
-    <div class="input"><input placeholder="输入手机号码" type="text"></div>
-    <div class="verification input">
-      <input placeholder="输入验证码" type="text">
-      <span>获取验证码</span>
-    </div>
-    <div class="input"><input placeholder="输入手机号码" type="text"></div>
-    <div class="input"><input placeholder="密码" type="text"></div>
-    <div class="input"><input placeholder="再次输入密码" type="text"></div>
-    <div class="temp-btn submit">提交</div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-  @import './style.scss';
-</style>

src/page/layout/ltemp/style.scss

@@ -1,96 +0,0 @@
-$lincolor:#d0d0d1;
-
-.input{
-  height: 60px;
-  input{
-    appearance: none;
-    border: none;
-    border-bottom: 1px $lincolor solid;
-    display: block;
-    background: none;
-    font-size: 16px;
-    color: #fff;
-    width: 100%;
-    height:60px;
-  }
-}
-.remember{
-  margin: 40px 0 60px;
-  span{
-    vertical-align: middle;
-    color: #fff;
-    margin-right: 10px;
-    &:first-child{
-      border: solid 1px $lincolor;
-      display: inline-block;
-      width: 16px;
-      height: 16px;
-    }
-  }
-}
-
-.verification{
-  display: flex;
-  input{
-    flex: auto;
-  }
-  span{
-    width: 200px;
-    flex-shrink: 0;
-    text-align: center;
-    color: #fa082a;
-    height: 60px;
-    line-height: 60px;
-    cursor: pointer;
-    background-color: #fff;
-  }
-}
-
-.submit{
-  float: right;
-  margin-top: 40px;
-}
-
-.temp-btn{
-  background: #1fe4dc;
-  color: #000;
-  height: 50px;
-  width: 200px;
-  line-height: 50px;
-  text-align: center;
-  cursor: pointer;
-}
-.login-dec{
-  color: #fff;
-  width: 200px;
-  letter-spacing: 0.2px;
-  margin-top: 20px;
-}
-
-.iregister-layout, .iforget-layout{
-  width: 500px;
-  padding: 32px 0 0 45px;
-}
-
-.ilogin-layout{
-  display: flex;
-  .input-con{
-    width: 330px;
-    padding: 32px 0 0 45px;
-  }
-  .qrcode{
-    text-align: center;
-    margin-top: 68px;
-    margin-left: 45px;
-    img{
-      display: block;
-      width: 150px;
-      margin: 0 auto 20px;
-      &:last-of-type{
-        width: 50px;
-        height: 50px;
-        margin: 52px auto 20px;
-      }
-    }
-  }
-}

src/page/manage/index.vue

@@ -26,7 +26,7 @@
         <div v-for="(item,index) in settings" :key="index">
           <ul class="list-items">
             <li v-for="(sub,i) in item.items" :key="i">
-              <span @click="active=sub.cp" :class='{active:active===sub.cp}'>{{sub.name}}</span>
+              <span @click="tabHandle(sub)" :class='{active:active===sub.cp}'>{{sub.name}}</span>
             </li>
           </ul>
         </div>
@@ -94,6 +94,21 @@ export default {
       active: 'iinfomation'
     }
   },
+  methods: {
+    tabHandle (sub) {
+      switch (sub.cp) {
+        case 'ilogout':
+          this.$store.commit('logout')
+          this.$router.push({name: 'home'})
+          break
+
+        default:
+          this.active = sub.cp
+          break
+      }
+      // sub.cp !== 'ilogout' ? this.active = sub.cp : this.$store.commit('logout')&&t
+    }
+  },
   computed: {
     ...mapState({
       split: state => state.ui.navDivision

src/page/manage/temp/infomation.vue

@@ -72,11 +72,12 @@
         <div class="select-con">
           <div :class="{'tag-active':invoice==='normal'}" @click="invoice='normal'">
             <span>增值税普通发票</span>
-            <img src="@/assets/images/tag-icon.png" alt="">
+            <img src="@/assets/images/tag-icon.png" alt>
           </div>
           <div :class="{'tag-active':invoice==='zengzhi'}" @click="invoice='zengzhi'">
-            <span>增值税专用发票</span><i></i>
-            <img src="@/assets/images/tag-icon.png" alt="">
+            <span>增值税专用发票</span>
+            <i></i>
+            <img src="@/assets/images/tag-icon.png" alt>
           </div>
         </div>
         <div class="input-con">
@@ -120,7 +121,7 @@ export default {
 <style lang="scss" scoped>
 .info-layout {
   $theme-color: #1fe4dc;
-  $border-color:#e7e7e7;
+  $border-color: #e7e7e7;
   input {
     appearance: none;
     line-height: 36px;
@@ -196,9 +197,9 @@ export default {
       }
     }
   }
-  .edit-invoice{
-    .select-con{
-      div{
+  .edit-invoice {
+    .select-con {
+      div {
         position: relative;
         cursor: pointer;
         width: 200px;
@@ -209,17 +210,17 @@ export default {
         color: #a0a0a0;
         padding: 0 10px;
         display: inline-block;
-        img{
+        img {
           display: none;
           position: absolute;
           bottom: 0;
           right: 0;
         }
       }
-      .tag-active{
+      .tag-active {
         border: solid 1px $theme-color;
         color: #000;
-        img{
+        img {
           display: inline-block;
         }
       }

src/page/purchase/index.vue

@@ -2,8 +2,8 @@
   <div class="purchase-layout">
     <div class="plate01">
       <div class="p1-banner">
-        <span>概览</span>
-        <span>技术规格</span>
+        <span @click="$router.push({name:'eight'})">概览</span>
+        <span @click="scrollTo('jsgg')">技术规格</span>
       </div>
       <img
         class="product-img"
@@ -43,24 +43,24 @@
         <spinner @count="handleSpinner"/>
         <div>
           <div class="btns">
-            <a href class="button add-cart">
+            <div class="button add-cart" @click="addcart">
               <vcenter>
                 <img src="@/assets/images/product_icon_arrow_l.png" alt>
                 <span>加入购物车</span>
               </vcenter>
-            </a>
-            <a href class="button">
+            </div>
+            <div class="button">
               <vcenter>
                 <img src="@/assets/images/product_icon_arrow.png" alt>
                 <span>立即购买</span>
               </vcenter>
-            </a>
+            </div>
           </div>
           <div class="sub">* 付款成功后5个工作日内发货，默认顺丰快递包邮</div>
         </div>
       </div>
     </div>
-    <div class="plate02" :style="{marginLeft:split + 'px'}">
+    <div class="plate02" ref="jsgg" :style="{marginLeft:split + 'px'}">
       <div class="b-title">技术规格</div>
       <div class="params-con">
         <div class="params-item" v-for="(item,index) in guige" :key="index">
@@ -83,6 +83,7 @@
 import { mapState } from 'vuex'
 import spinner from '@/components/spinner'
 import vcenter from '@/components/vcenter'
+import { getPosition } from '@/util'
 
 export default {
   components: {
@@ -91,7 +92,8 @@ export default {
   },
   computed: {
     ...mapState({
-      split: state => state.ui.navDivision
+      split: state => state.ui.navDivision,
+      isLogin: state => state.user.name
     })
   },
   data () {
@@ -142,8 +144,32 @@ export default {
   },
   methods: {
     handleSpinner (data) {
+    },
+    addcart () {
+      if (this.isLogin) {
+
+      } else {
+        this.$bus.$emit('showAside')
+      }
+    },
+    scrollTo (href) {
+      this.interval = null
+      let inter = 0
+      let tag = getPosition(this.$refs[href]).y - 68
+      let speed = Math.ceil(tag / 40)
+      this.interval = setInterval(() => {
+        inter += speed
+        window.scrollTo(0, Math.min(inter, tag))
+        if ((window.scrollY || window.pageYOffset) >= tag) {
+          clearInterval(this.interval)
+        }
+      })
     }
+  },
+  beforeDestroy () {
+    clearInterval(this.interval)
   }
+
 }
 </script>
 

src/page/purchase/style.scss

@@ -6,6 +6,7 @@
   font-size: 0;
 }
 .btns .button{
+  cursor: pointer;
   width: 250px;
   height: 50px;
   padding-top: 0;
@@ -31,7 +32,7 @@
     background: #fff;
     height: 65px;
     text-align: right;
-    padding-right: 100px;
+    padding-right: 120px;
     span{
       display: inline-block;
       margin-left: 50px;
@@ -144,7 +145,8 @@
 
 .plate02{
   width: 845px;
-  margin: 130px 0 130px 600px ;
+  margin-left: 600px;
+  padding: 130px 0;
   text-align: center;
   .b-title{
     font-size: 30px;

src/page/service/overview/index.vue

@@ -2,12 +2,12 @@
   <div>
     <div class="plate01">
       <img src="@/assets/images/service_img_ban.png" class="banner">
-      <p :style="{left:(split-180)+'px'}">服务与支持</p>
+      <p :style="{left:(split-180)+'px'}">{{langOverview.services}}</p>
     </div>
 
     <div class="plate02" :style="{marginLeft:(split-288)+'px'}">
       <div class="navs">
-        <router-link v-for="(item,i) in langOverview" :key="i" tag="a" :to="item.to">
+        <router-link v-for="(item,i) in langOverview.setting.service_overview" :key="i" tag="a" :to="item.to">
           <i class="iconfont" :class="item.icon"></i>
           {{item.name}}
         </router-link>
@@ -24,7 +24,7 @@ export default {
   components: {iFooter: footer},
   computed: {
     ...mapState({
-      langOverview: state => state.language.home.navs.setting.service_overview,
+      langOverview: state => state.language.home.navs,
       split: state => state.ui.navDivision
     })
   }

src/store/language/cn/about.js

@@ -0,0 +1,80 @@
+export default{
+  intro: [
+    '四维看看由四维时代团队独立自主研发。作为国内首家3D数字化重建技术中心，四维时代在国际上首创的微米级三维数字化精细扫描技术，较传统三维建模方式在效率上提高200倍以上，远超美国Adobe公司的厘米级精度。目前世界上能做到这个精度的只有两家，一家是四维时代，另一家是MIT计算视觉实验室。',
+    '2017年6月，四维时代与德国人工智能研究中心（DFKI）在中德两国总理见证下正式签订《中德人工智能研究院项目》，并成立中德人工智能研究院，利用中德两国技术优势，推进人工智能视觉技术的深入和应用。',
+    '2018年5月，四维时代成功将领先的三维建模技术民用化，推出专业八目3D相机四维看看Pro。当月，该产品在德国柏林人工智能大会上亮相。'
+  ],
+  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。',
+          '5月 四维看看Pro在德国柏林人工智能大会上亮相。'
+        ]
+      }
+    ]
+  },
+  kefu: [
+    {
+      title: '联系我们',
+      class: 'lxwm',
+      content: [
+        '公司：珠海市四维时代网络科技有限公司',
+        '地址：广东省珠海市高新区唐家湾港湾大道南港湾一号'
+      ]
+    },
+    {
+      title: '客户服务',
+      class: 'khfw',
+      content: ['客服/售后：4006698025', '电子邮件：service@4dage.com']
+    },
+    {
+      title: '媒体垂询',
+      class: 'mtcx',
+      content: ['热线：0756-6996790', '电子邮件：pr@4dage.com']
+    },
+    {
+      title: '业务合作',
+      class: 'ywhz',
+      content: ['热线：0756-6996796/6996791', '电子邮件：sales@4dage.com']
+    }
+  ]
+}

src/store/language/cn/binocular - 副本 (2).js

@@ -0,0 +1,7 @@
+import Vue from 'vue'
+let vue = new Vue()
+let baseUrl = vue.$cdn
+
+export default{
+
+}

src/store/language/cn/binocular.js

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

src/store/language/cn/coreTech.js

@@ -0,0 +1,133 @@
+
+export default{
+  kjdw: {
+    title: '空间定位',
+    dec: '人工智能空间定位技术，提取并匹配图像中的特征点，计算点位的空间坐标，从而判定相机的位置。',
+    points: [
+      {
+        posi: {
+          top: '33%',
+          left: '27%'
+        }
+      },
+      {
+        posi: {
+          top: '20%',
+          left: '50%'
+        }
+      },
+      {
+        posi: {
+          top: '27%',
+          left: '57%'
+        }
+      },
+      {
+        posi: {
+          top: '38%',
+          left: '47%'
+        }
+      },
+      {
+        posi: {
+          top: '60%',
+          left: '50%'
+        }
+      },
+      {
+        posi: {
+          top: '63%',
+          left: '63%'
+        }
+      },
+      {
+        posi: {
+          top: '74%',
+          left: '82%'
+        }
+      }
+    ],
+    ability: {
+      name: '空间定位的创新技术能力',
+      sub: '全新算法极大增加了关键帧特征点的匹配数目，把定位丢失的情况降至最低。另外，基于自适应分段的集束调整，把长序列分成若干序列在后端优化，改善了优化效率。',
+      app: [
+        {
+          icon: {
+            backgroundImage: `url(${require('@/assets/images/img_core_app01.png')})`
+          },
+          sub: '全新室内重建系统，<br/>应用双球幕镜头采集数据'
+        },
+        {
+          icon: {
+            backgroundImage: `url(${require('@/assets/images/img_core_app02.png')})`
+          },
+          sub: '通过算法计算出准确的相机位姿，<br/>捕捉所有色彩信息以及部分深度信息。'
+        },
+        {
+          icon: {
+            backgroundImage: `url(${require('@/assets/images/img_core_app03.png')})`
+          },
+          sub: '人工智能算法与环闭合配合运作，<br/>使相机几何校准更加快速稳定。'
+        }
+      ]
+    }
+  },
+  kjjm: {
+    title: '空间建模',
+    dec: ['自动化高精度三维数字建模技术，', '基于二维图像，通过点云计算生成空间三维模型，', '无需人工干预，从上传到生成结果仅需要5-10分钟。'],
+    chars: [
+      {
+        icon: {
+          backgroundImage: `url(${require('@/assets/images/img_core_model01.png')})`
+        },
+        title: '生理结构',
+        sub:
+          '输入稀疏点云和相机位姿<br/>数据，计算自由空间和核心自由空间。'
+      },
+      {
+        icon: {
+          backgroundImage: `url(${require('@/assets/images/img_core_model02.png')})`
+        },
+        title: '生理结构',
+        sub: '两次解决最短<br/>路径问题以恢复细结构。'
+      },
+      {
+        icon: {
+          backgroundImage: `url(${require('@/assets/images/img_core_model03.png')})`
+        },
+        title: '生理结构',
+        sub: '基于计算出的平面图，<br/>生成网格结构和实景模型。'
+      }
+    ]
+  },
+  kjzs: {
+    title: '空间展示',
+    sub: ['计算生成的结果通过WebGL呈现交互式3D模型，', '模型中可添加图文、视频、音频、超链接等多种媒体格式，', '并可显示测距信息，或者制定自动导览，通过数字三维空间承载丰富的信息。'],
+    sdkz: {
+      name: '在线漫游博物馆 - 四维看展',
+      sub: '四维看展是国内首家集文字、图片、语音、在线场景漫游于一体的线上艺术空间。打开小程序即可浏览全球最新最全的艺术资讯，实时了解最热门的文博动态； 足不出户就能逛遍艺术展厅，720°轻松鉴赏艺术作品。它是一座永不落幕的美术馆，带你踏上数字艺术之旅。'
+    },
+    zfb: {
+      name: '3D实景看房 - 指房宝',
+      sub: '指房宝平台覆盖房产中介、装修企业的行业需求，应用四维看看展示技术推出App，为传统房地产行业提供全新的数字3D实景看房体验，应用于租房、买房、装修建房等多样的业务场景。'
+    }
+  },
+  jianrong: {
+    name: '兼容多平台、多终端',
+    sub: '可通过移动网页端、嵌入小程序、APP端进行展示，并支持在VR眼镜等硬件设备上观看。',
+    terminal: [
+      {
+        txt: 'VR端',
+        img: require('@/assets/images/img_core_platform_vr.png')
+      },
+      {
+        txt: '网页端',
+        img: require('@/assets/images/img_core_platform_pc.png')
+      },
+      {
+        txt: '移动端',
+        img: require('@/assets/images/img_core_platform_phone.png')
+      }
+    ]
+  }
+}

src/store/language/cn/eight.js

@@ -0,0 +1,140 @@
+import Vue from 'vue'
+let vue = new Vue()
+let baseUrl = vue.$cdn
+
+export default{
+  introduce: {
+    title: ['四维看看 Pro', '专业精准建模，高效复刻空间'],
+    price: ['￥4999', '起'],
+    dec: [
+      '720°沉浸式实景漫游，10K高清画质',
+      '自动还原空间结构，生成测量数据'
+    ],
+    btn: '立即购买',
+    subTitle: '让信息在三维立体空间中获得新生',
+    benefitGroup: [
+      {
+        fontImg: 'icon-sony',
+        title: 'SONY CMOS 图像传感器'
+      },
+      {
+        fontImg: 'icon-haisi',
+        title: '海思 摄像机芯片'
+      },
+      {
+        fontImg: 'icon-qiumu',
+        title: '8组精密球幕镜头'
+      },
+      {
+        fontImg: 'icon-sfm',
+        title: '人工智能空间定位技术'
+      },
+      {
+        fontImg: 'icon-3d',
+        title: '全自动3D空间建模技术'
+      },
+      {
+        fontImg: 'icon-dianlang',
+        title: '支持四小时连续拍摄'
+      },
+      {
+        fontImg: 'icon-bianji',
+        title: '编辑定制交互式视频'
+      },
+      {
+        fontImg: 'icon-liulan',
+        title: '全平台无插件分享浏览'
+      }
+    ]
+  },
+  app: {
+    title: '4DKankan App',
+    sub: ['快速编辑和分享你的互动式视频', '分享你的空间故事']
+  },
+  definition: {
+    title: '10K高清画质，720度无死角展现，捕捉空间的每个细节',
+    top: {
+      dec:
+          ['四维看看Pro 3D空间相机全方位记录方向、角度、体积等空间立体信息，', '生成实景数字3D模型，让你随时随地感受如临现场的在线漫游体验。', '10K清晰度，可4倍放大画面，不错过任何细节。'],
+      intro: '四维看看Pro所拍摄的画面分辨率高达10000*5000像素'
+
+    },
+    bottom: {
+      title: '细节之处，纤毫毕现',
+      dec: ['4DKanKan Pro 从视觉外观到握持手感，再到机身防护，无处不凝聚匠心巧思。', '以Pro的独特性作为设计理念，以想象力的创意概念作为设计亮点。', '精湛工艺，细致耐用，细节之处，纤毫毕现。'],
+      params2: [
+        {
+          icon: baseUrl + 'images/icon1.png',
+          txt: '实时分享实训世界的所有惊喜。如今，360度图像可实现即时串流！'
+        },
+        {
+          icon: baseUrl + 'images/icon2.png',
+          txt: '使用专用智能手机应用程式，拍摄的同事检查曝光和白平衡。'
+        },
+        {
+          icon: baseUrl + 'images/icon3.png',
+          txt: '快门速度的设定范围为1/6400秒'
+        },
+        {
+          icon: baseUrl + 'images/icon4.png',
+          txt: '静态图像：（大）约1600'
+        }
+      ]
+    }
+  },
+  hardware: [
+    {
+      title: ['工艺设计', '汇聚一线精湛科技与工艺']
+    },
+    {
+      title: ['HI-SILICON', '海思HI3516AV200']
+    },
+    {
+      title: ['八组高清全视角球幕镜头，全方位捕捉空间', '高分辨率创新光学设计，', '适应更复杂光线的空间拍摄需求']
+    },
+    {
+      title: ['SONY CMOS 图像传感器']
+    },
+    {
+      title: ['独具匠心的细节设计']
+    }
+  ],
+  feature: {
+    definition: {
+      title: '图像清晰度',
+      case1: {
+        content: baseUrl + 'video/8k.mp4',
+        back: baseUrl + 'video/4k.mp4',
+        lTxt: '普通',
+        rTxt: '四维看看 Pro',
+        lMask: '4K高清',
+        rMask: '10K高清图像，4倍放大'
+      }
+    },
+    ranging: {
+      title: ['测距功能', '更极致的空间还原度'],
+      sub: '显示测距',
+      hide: '隐藏测距'
+    },
+    model: {
+      title: ['模型结构', '更极致的空间还原度'],
+      case2: {
+        content: baseUrl + 'video/qingxi.mp4',
+        back: baseUrl + 'video/moku.mp4',
+        lTxt: '普通',
+        rTxt: '四维看看 Pro'
+      }
+    },
+    manyou: {
+      title: ['模型结构', '更极致的空间还原度'],
+      left: '普通',
+      right: '四维看看 Pro'
+    },
+    endurance: {
+      title: '续航时间'
+    }
+  },
+  parmas: {
+    name: '四维看看 Pro 详细参数'
+  }
+}

src/store/language/cn/home.js

@@ -0,0 +1,165 @@
+import Vue from 'vue'
+let vue = new Vue()
+let baseUrl = vue.$cdn
+
+export default{
+  tech: {
+    title: '核心技术',
+    dec:
+        '四维看看在空间定位、空间建模和空间展示上拥有多项发明专利和核心技术。',
+    icon: ['空间定位', '空间建模', '空间展示'],
+    location: {
+      title: '空间定位',
+      dec: '人工智能空间定位算法，采集真实空间信息，测量空间数据。',
+      eng:
+          'The bi-spherical SfM technology that simulates human eyes captures real space information and measures space data.'
+    },
+    modeling: {
+      title: '空间建模',
+      dec: '根据二维图像自动计算三维数字模型，10分钟生成，无需人工干预。',
+      eng:
+          'Automatic calculation of a 3D digital model based on 2D images, and generation in five minutes without manual intervention.'
+    },
+    exhibition: {
+      title: '空间展示',
+      dec: '无需插件，在VR眼镜、手机、平板、电脑等显示端720°沉浸式实景漫游体验。',
+      eng:
+          'View 3D scenes at 720° without plugins on the display terminals such as VR glasses, mobile phones, tablet PCs, and computers.'
+    }
+  },
+  booking: {
+    name: '四维看看 Pro',
+    dec: '专业精准建模，高效复刻空间',
+    price: '100元定金预售',
+    btn: '立即预购'
+  },
+  cases: {
+    title: '行业应用展示',
+    dec: [
+      '四维看看已为消防、公安、文博等公共领域建立三维数字化档案，助力地产、酒店民宿、',
+      '电商、餐饮等行业打造体验式服务'
+    ],
+    space: {
+      title: '每个空间，都值得被记录',
+      sub: '迄今为止四维看看记录的空间数量',
+      nums: [
+        {
+          text: '文博',
+          count: 16893
+        },
+        {
+          text: '地产',
+          count: 32689
+        },
+        {
+          text: '电商',
+          count: 65682
+        },
+        {
+          text: '餐饮',
+          count: 42737
+        },
+        {
+          text: '家居',
+          count: 61368
+        }
+      ]
+    }
+  },
+  items: [
+    {url: 'https://www.4dkankan.com/showPC.html?m=x2kIkoCB',
+      image: baseUrl + 'images/phone_7.jpg',
+      icon: baseUrl + 'images/phone_icon_7.png',
+      text: '万豪' },
+    {url: 'https://admin.4dmuseum.cn/showApp.html?m=241&bigScene&novr',
+      image: baseUrl + 'images/phone_2.jpg',
+      icon: baseUrl + 'images/phone_icon_2.png',
+      text: '广东省博物馆' },
+    {url: 'http://www.4dkankan.com/showPC.html?m=laaVIiT7',
+      image: baseUrl + 'images/phone_3.jpg',
+      icon: baseUrl + 'images/phone_icon_3.png',
+      text: '海昏侯' },
+    {url: 'http://www.4dkankan.com/showPC.html?m=OOM185Kf',
+      image: baseUrl + 'images/phone_4.jpg',
+      icon: baseUrl + 'images/phone_icon_4.png',
+      text: '华发' },
+    {url: 'http://www.4dkankan.com/showPC.html?m=djryzBtW',
+      image: baseUrl + 'images/phone_5.jpg',
+      icon: baseUrl + 'images/phone_icon_5.png',
+      text: '欧派' },
+    {url: 'http://www.4dkankan.com/showPC.html?m=ImlLYDW8',
+      image: baseUrl + 'images/phone_6.jpg',
+      icon: baseUrl + 'images/phone_icon_6.png',
+      text: '融信' },
+    {url: 'https://www.cgaii.com/museum/cultural/index.html',
+      image: baseUrl + 'images/phone_1.jpg',
+      icon: baseUrl + 'images/phone_icon_1.png',
+      text: '德国陶瓷博物馆' },
+    {url: 'https://www.4dkankan.com/showPC.html?m=iTz0LxLs',
+      image: baseUrl + 'images/phone_8.jpg',
+      icon: baseUrl + 'images/phone_icon_8.png',
+      text: '万科' },
+    {url: 'https://www.4dkankan.com/showPC.html?m=0mVvxHHT',
+      image: baseUrl + 'images/phone_9.jpg',
+      icon: baseUrl + 'images/phone_icon_9.png',
+      text: '伟星' },
+    {url: 'https://admin.4dmuseum.cn/showPC.html?m=333&bigScene&novr',
+      image: baseUrl + 'images/phone_10.jpg',
+      icon: baseUrl + 'images/phone_icon_10.png',
+      text: '武侯祠' }
+  ],
+  reports: {
+    name: '媒体报道',
+    items: [
+      {
+        icon: baseUrl + 'images/item_icon_7.png',
+        cover: baseUrl + 'images/item_cover_7.png',
+        time: '2019年5月17日',
+        title: '四维时代发布新一代3D空间相机',
+        url: 'https://proapi.jingjiribao.cn/detail.html?id=177829'
+      },
+      {
+        icon: baseUrl + 'images/item_icon_1.png',
+        cover: baseUrl + 'images/item_cover_1.png',
+        time: '2018年5月9日',
+        title: '四维时代发布全球首款消费级3D相机“四维看看”',
+        url: 'http://www.iheima.com/article-168187.html'
+      },
+      {
+        icon: baseUrl + 'images/item_icon_2.png',
+        cover: baseUrl + 'images/item_cover_2.png',
+        time: '2018年10月29日',
+        title: '原科技部部长万钢视察四维时代 为四维看看及四维看展点赞',
+        url: 'http://bj.news.163.com/18/1029/14/DV9U6QN8043897TC.html'
+      },
+      {
+        icon: baseUrl + 'images/item_icon_3.png',
+        cover: baseUrl + 'images/item_cover_3.png',
+        time: '2018年11月15日',
+        title: '利用AI视觉秒建数字化模型，四维时代展示手机端三维重建技术',
+        url: 'https://www.tmtpost.com/3590578.html'
+      },
+      {
+        icon: baseUrl + 'images/item_icon_4.png',
+        cover: baseUrl + 'images/item_cover_4.png',
+        time: '2018年11月19日',
+        title: '四维时代发布手机端三维重建技术 助力AI产业发展',
+        url: 'http://smart.huanqiu.com/viewpoint/2018-11/13585013.html'
+      },
+      {
+        icon: baseUrl + 'images/item_icon_5.png',
+        cover: baseUrl + 'images/item_cover_5.png',
+        time: '2018年6月21日',
+        title: '“四维看看”3D相机：让老百姓用得起 用得上',
+        url: 'http://smart.huanqiu.com/viewpoint/2018-06/12206604.html'
+      },
+      {
+        icon: baseUrl + 'images/item_icon_6.png',
+        cover: baseUrl + 'images/item_cover_6.png',
+        time: '2018年5月10日',
+        title: '四维时代发布消费级3D相机“四维看看”',
+        url: 'http://www.xinhuanet.com/tech/2018-05/10/c_1122813759.html'
+      }
+    ]
+  }
+}

src/store/language/en/binocular.js

@@ -0,0 +1,83 @@
+import Vue from 'vue'
+let vue = new Vue()
+let baseUrl = vue.$cdn
+
+export default{
+  introduce: {
+    title: ['4DKanKan Lite', 'World’s First Consumer 3D Camera'],
+    price: ['￥4999', '起'],
+    dec: [
+      'A powerful consumer device for space ',
+      'reconstruction. Simulates space in as short as 10 minutes',
+      'and provides 720 degree immersive real-life roaming experience'
+    ],
+    btn: '立即购买',
+    subTitle: '3D 4K real scene reproduction artifact',
+    benefitGroup: [
+      {
+        fontImg: 'icon-koudai',
+        icon: baseUrl + 'images/product_img_02_a@2x.png',
+        title: 'Light, portable, and pocket-sized',
+        content:
+          'The same size as mobile phone at 115g, 4DKanKan is 1/30 the weight of existing products.'
+      },
+      {
+        fontImg: 'icon-jianmo',
+        icon: baseUrl + 'images/product_img_02_b@2x.png',
+        title: 'Easy operation and efficient modeling',
+        content:
+          'No expertise required. 100 square meters of spatial data can be collected in 10 minutes. Upload it to the cloud in one click, and the model is automatically generated within 5 minutes.'
+      },
+      {
+        fontImg: 'icon-manyou',
+        icon: baseUrl + 'images/product_img_02_c@2x.png',
+        title: 'High-precision spatial reconstruction and exploration',
+        content:
+          'Scenes are reconstructed in realistic 3D. View models in 4K and 720 degrees, and explore space through an immersive experience.'
+      },
+      {
+        fontImg: 'icon-paise',
+        icon: baseUrl + 'images/product_img_02_d@2x.png',
+        title: 'Indoor and outdoor shooting',
+        content:
+          'Shoots both indoors and outdoors. Data collection is no longer restricted by environment.'
+      },
+      {
+        fontImg: 'icon-genxing',
+        icon: baseUrl + 'images/product_img_02_e@2x.png',
+        title: 'Edit freely, update anytime',
+        content:
+          'Model editing platform supports adding and updating annotations including images, texts, videos and links.'
+      }
+    ]
+  },
+  app: {
+    title: '4DKankan App',
+    sub: ['快速编辑和分享你的互动式视频', '分享你的空间故事']
+  },
+  guide: [
+    {
+      title: [
+        'Audio-visual guidance to provide real-life experience',
+        'Make customized routes and record audio guidance to offer immersive audio-visual experience'
+      ]
+    },
+    {
+      title: ['Reconstruct space in 10 minutes easily and conveniently'],
+      sub: ['Upload to the cloud', 'APP+ shooting by 3D camera', 'Space display in the user’s end']
+    },
+    {
+      title: ['Instant automatic generation of space model', 'Easy-to-understand planar structure']
+    },
+    {
+      title: ['Edit and share interactive videos', 'Enable your space to tell stories']
+    }
+  ],
+  technology: {
+    title: 'reach the peak of perfection',
+    dec: 'By as many as 794 precision components assembly, super fine spraying technology'
+  },
+  parmas: {
+    name: 'Detailed parameters of 4DKanKan Lite'
+  }
+}

src/store/language/en/eight.js

@@ -0,0 +1,143 @@
+import Vue from 'vue'
+let vue = new Vue()
+let baseUrl = vue.$cdn
+
+export default {
+  introduce: {
+    title: ['4DKanKan Pro', 'Professional and accurate modeling that reconstructs space with efficiency'],
+    price: ['￥4999', '起'],
+    dec: [
+      '720-degree immersive virtual tour in 10K definition',
+      'Automatically recovers space',
+      'structure and generates measurements'
+    ],
+    btn: '立即购买',
+    subTitle: 'Bringing Data to Life in 3D',
+    benefitGroup: [
+      {
+        fontImg: 'icon-sony',
+        title: 'SONY CMOS Image Sensor'
+      },
+      {
+        fontImg: 'icon-haisi',
+        title: 'Hisilicon Camera Chip'
+      },
+      {
+        fontImg: 'icon-qiumu',
+        title: '8 Sophisticated Spherical lenses'
+      },
+      {
+        fontImg: 'icon-sfm',
+        title: 'AI Localization Technology'
+      },
+      {
+        fontImg: 'icon-3d',
+        title: 'Automated 3D Reconstruction'
+      },
+      {
+        fontImg: 'icon-dianlang',
+        title: '4-hour Continuous Shooting'
+      },
+      {
+        fontImg: 'icon-bianji',
+        title: 'Customize Interactive Navigation'
+      },
+      {
+        fontImg: 'icon-liulan',
+        title: 'All Platforms, No Plugin'
+      }
+    ]
+  },
+  app: {
+    title: '4DKanKan App',
+    sub: ['快速编辑和分享你的互动式视频', '分享你的空间故事']
+  },
+  definition: {
+    title: '10K Image Quality in 720 Degrees. Realistic 3D Is in the Details.',
+    top: {
+      dec:
+        ['4DKanKan Pro records three-dimensional information of space,', ' and produces realistic 3D digital models, allowing you to enter anytime and enjoy 720-degree immersive experience. ', '10K image quality and 4x magnification enable you to see every detail.'],
+      intro: 'Quality of images shot by 4DKanKan Pro reaches up to 10000*5000 pixels'
+
+    },
+    bottom: {
+      title: 'Every detail is there',
+      dec: ['4DKanKan Pro from the visual appearance to the handle, and then to the body protection, there is no lack of ingenuity.',
+        'Take the uniqueness of Pro as the design concept, and the creative concept of imagination as the design highlight.',
+        'Exquisite workmanship, meticulous and durable, the details, the meticulous.'],
+      params2: [
+        {
+          icon: baseUrl + 'images/icon1.png',
+          txt: '实时分享实训世界的所有惊喜。如今，360度图像可实现即时串流！'
+        },
+        {
+          icon: baseUrl + 'images/icon2.png',
+          txt: '使用专用智能手机应用程式，拍摄的同事检查曝光和白平衡。'
+        },
+        {
+          icon: baseUrl + 'images/icon3.png',
+          txt: '快门速度的设定范围为1/6400秒'
+        },
+        {
+          icon: baseUrl + 'images/icon4.png',
+          txt: '静态图像：（大）约1600'
+        }
+      ]
+    }
+  },
+  hardware: [
+    {
+      title: ['Design Techniques', 'Integration of First-liner Technologies and Techniques']
+    },
+    {
+      title: ['HI-SILICON', '海思HI3516AV200']
+    },
+    {
+      title: ['Eight High-definition Spherical Lenses Capture Space in All Directions', 'Innovative optical design, better adapting to shooting environments', '']
+    },
+    {
+      title: ['SONY CMOS 图像传感器']
+    },
+    {
+      title: ['Ingenious design of details']
+    }
+  ],
+  feature: {
+    definition: {
+      title: 'Image definition',
+      case1: {
+        content: baseUrl + 'video/8k.mp4',
+        back: baseUrl + 'video/4k.mp4',
+        lTxt: '普通',
+        rTxt: '4DKanKan Pro',
+        lMask: 'High-definition of 4K',
+        rMask: '10K HD picture with 4-times magnification'
+      }
+    },
+    ranging: {
+      title: ['Distance measurement function', '更极致的空间还原度'],
+      sub: 'Display of distance measurement',
+      hide: '隐藏测距'
+    },
+    model: {
+      title: ['Model structure', '更极致的空间还原度'],
+      case2: {
+        content: baseUrl + 'video/qingxi.mp4',
+        back: baseUrl + 'video/moku.mp4',
+        lTxt: '普通',
+        rTxt: '4DKanKan Pro'
+      }
+    },
+    manyou: {
+      title: ['模型结构', '更极致的空间还原度'],
+      left: '普通',
+      right: '四维看看 Pro'
+    },
+    endurance: {
+      title: '续航时间'
+    }
+  },
+  parmas: {
+    name: 'Detailed parameters of 4DKanKan Pro'
+  }
+}

src/store/language/en/home.js

@@ -0,0 +1,159 @@
+import Vue from 'vue'
+let vue = new Vue()
+let baseUrl = vue.$cdn
+
+export default{
+  tech: {
+    title: 'Core technologies',
+    dec:
+        '4DKanKan boasts multiple patents and core technologies in space localization, space reconstruction, and space display.',
+    icon: ['Space localization', 'Space reconstruction', 'Space display'],
+    location: {
+      title: 'Space localization',
+      dec: 'AI localization algorithm that captures real space information and measures space data.'
+    },
+    modeling: {
+      title: 'Space reconstruction',
+      dec: 'Automatic calculation of a 3D digital model based on 2D images, and generation in ten minutes without manual intervention.'
+    },
+    exhibition: {
+      title: 'Space display',
+      dec: 'View 3D scenes at 720° without plugins on the display terminals such as VR glasses, mobile phones, tablet PCs, and computers.'
+    }
+  },
+  cases: {
+    title: 'Industrial applications',
+    dec: [
+      '4DKanKan has established 3D digital archives for public purposes such as fire protection, public security, and cultural museum, helping real estate,',
+      'hotels and B&B, e-commerce, catering and other industries to create experiential services.'
+    ],
+    space: {
+      title: 'Every space is worth recording',
+      sub: 'Spaces 4DKanKan recorded so far',
+      nums: [
+        {
+          text: 'Museum',
+          count: 16893
+        },
+        {
+          text: 'Real estate',
+          count: 32689
+        },
+        {
+          text: 'E-commerce',
+          count: 65682
+        },
+        {
+          text: 'Catering',
+          count: 42737
+        },
+        {
+          text: 'Home',
+          count: 61368
+        }
+      ]
+    }
+  },
+  booking: {
+    name: '4DKanKan Pro',
+    dec: 'Professional and accurate modeling that reconstructs space with efficiency',
+    price: '100元定金预售',
+    btn: '立即预购'
+  },
+  items: [
+    {url: 'https://www.4dkankan.com/showPC.html?m=x2kIkoCB',
+      image: baseUrl + 'images/phone_7.jpg',
+      icon: baseUrl + 'images/phone_icon_7.png',
+      text: '万豪' },
+    {url: 'https://admin.4dmuseum.cn/showApp.html?m=241&bigScene&novr',
+      image: baseUrl + 'images/phone_2.jpg',
+      icon: baseUrl + 'images/phone_icon_2.png',
+      text: '广东省博物馆' },
+    {url: 'http://www.4dkankan.com/showPC.html?m=laaVIiT7',
+      image: baseUrl + 'images/phone_3.jpg',
+      icon: baseUrl + 'images/phone_icon_3.png',
+      text: '海昏侯' },
+    {url: 'http://www.4dkankan.com/showPC.html?m=OOM185Kf',
+      image: baseUrl + 'images/phone_4.jpg',
+      icon: baseUrl + 'images/phone_icon_4.png',
+      text: '华发' },
+    {url: 'http://www.4dkankan.com/showPC.html?m=djryzBtW',
+      image: baseUrl + 'images/phone_5.jpg',
+      icon: baseUrl + 'images/phone_icon_5.png',
+      text: '欧派' },
+    {url: 'http://www.4dkankan.com/showPC.html?m=ImlLYDW8',
+      image: baseUrl + 'images/phone_6.jpg',
+      icon: baseUrl + 'images/phone_icon_6.png',
+      text: '融信' },
+    {url: 'https://www.cgaii.com/museum/cultural/index.html',
+      image: baseUrl + 'images/phone_1.jpg',
+      icon: baseUrl + 'images/phone_icon_1.png',
+      text: '德国陶瓷博物馆' },
+    {url: 'https://www.4dkankan.com/showPC.html?m=iTz0LxLs',
+      image: baseUrl + 'images/phone_8.jpg',
+      icon: baseUrl + 'images/phone_icon_8.png',
+      text: '万科' },
+    {url: 'https://www.4dkankan.com/showPC.html?m=0mVvxHHT',
+      image: baseUrl + 'images/phone_9.jpg',
+      icon: baseUrl + 'images/phone_icon_9.png',
+      text: '伟星' },
+    {url: 'https://admin.4dmuseum.cn/showPC.html?m=333&bigScene&novr',
+      image: baseUrl + 'images/phone_10.jpg',
+      icon: baseUrl + 'images/phone_icon_10.png',
+      text: '武侯祠' }
+  ],
+  reports: {
+    name: 'Media coverage',
+    items: [
+      {
+        icon: baseUrl + 'images/item_icon_7.png',
+        cover: baseUrl + 'images/item_cover_7.png',
+        time: '2019年5月17日',
+        title: '四维时代发布新一代3D空间相机',
+        url: 'https://proapi.jingjiribao.cn/detail.html?id=177829'
+      },
+      {
+        icon: baseUrl + 'images/item_icon_1.png',
+        cover: baseUrl + 'images/item_cover_1.png',
+        time: '2018年5月9日',
+        title: '四维时代发布全球首款消费级3D相机“四维看看”',
+        url: 'http://www.iheima.com/article-168187.html'
+      },
+      {
+        icon: baseUrl + 'images/item_icon_2.png',
+        cover: baseUrl + 'images/item_cover_2.png',
+        time: '2018年10月29日',
+        title: '原科技部部长万钢视察四维时代 为四维看看及四维看展点赞',
+        url: 'http://bj.news.163.com/18/1029/14/DV9U6QN8043897TC.html'
+      },
+      {
+        icon: baseUrl + 'images/item_icon_3.png',
+        cover: baseUrl + 'images/item_cover_3.png',
+        time: '2018年11月15日',
+        title: '利用AI视觉秒建数字化模型，四维时代展示手机端三维重建技术',
+        url: 'https://www.tmtpost.com/3590578.html'
+      },
+      {
+        icon: baseUrl + 'images/item_icon_4.png',
+        cover: baseUrl + 'images/item_cover_4.png',
+        time: '2018年11月19日',
+        title: '四维时代发布手机端三维重建技术 助力AI产业发展',
+        url: 'http://smart.huanqiu.com/viewpoint/2018-11/13585013.html'
+      },
+      {
+        icon: baseUrl + 'images/item_icon_5.png',
+        cover: baseUrl + 'images/item_cover_5.png',
+        time: '2018年6月21日',
+        title: '“四维看看”3D相机：让老百姓用得起 用得上',
+        url: 'http://smart.huanqiu.com/viewpoint/2018-06/12206604.html'
+      },
+      {
+        icon: baseUrl + 'images/item_icon_6.png',
+        cover: baseUrl + 'images/item_cover_6.png',
+        time: '2018年5月10日',
+        title: '四维时代发布消费级3D相机“四维看看”',
+        url: 'http://www.xinhuanet.com/tech/2018-05/10/c_1122813759.html'
+      }
+    ]
+  }
+}

src/store/language/home_cn.js

@@ -1,10 +1,14 @@
-import Vue from 'vue'
-let vue = new Vue()
-let baseUrl = vue.$cdn
+import home from './cn/home'
+import binocular from './cn/binocular'
+import eight from './cn/eight'
+import about from './cn/about'
+import coreTech from './cn/coreTech'
 
 export default {
   title: '中文',
   navs: {
+    services: '服务与支持',
+    application: '行业与应用',
     setting: {
       'eight': [
         {
@@ -106,599 +110,16 @@ export default {
       ]
     }
   },
-  headers: [
-    {text: '产品购买', cp: 'eight'},
-    {text: '行业应用', cp: 'case_overview'},
-    {text: '服务支持', cp: 'service_overview'},
-    {text: '核心技术', cp: 'location'},
-    {text: '关于我们', cp: 'about'}
-  ],
-  home: {
-    tech: {
-      title: '核心技术',
-      dec:
-        '四维看看在空间定位、空间建模和空间展示上拥有多项发明专利和核心技术。',
-      icon: ['空间定位', '空间建模', '空间展示'],
-      location: {
-        title: '空间定位',
-        dec: '人工智能空间定位算法，采集真实空间信息，测量空间数据。',
-        eng:
-          'The bi-spherical SfM technology that simulates human eyes captures real space information and measures space data.'
-      },
-      modeling: {
-        title: '空间建模',
-        dec: '根据二维图像自动计算三维数字模型，10分钟生成，无需人工干预。',
-        eng:
-          'Automatic calculation of a 3D digital model based on 2D images, and generation in five minutes without manual intervention.'
-      },
-      exhibition: {
-        title: '空间展示',
-        dec: '无需插件，在VR眼镜、手机、平板、电脑等显示端720°沉浸式实景漫游体验。',
-        eng:
-          'View 3D scenes at 720° without plugins on the display terminals such as VR glasses, mobile phones, tablet PCs, and computers.'
-      }
-    },
-    cases: {
-      title: '行业应用展示',
-      dec: [
-        '四维看看已为消防、公安、文博等公共领域建立三维数字化档案，助力地产、酒店民宿、',
-        '电商、餐饮等行业打造体验式服务'
-      ],
-      space: {
-        title: '每个空间，都值得被记录',
-        sub: '迄今为止四维看看记录的空间数量',
-        nums: [
-          {
-            text: '文博',
-            count: 16893
-          },
-          {
-            text: '地产',
-            count: 32689
-          },
-          {
-            text: '电商',
-            count: 65682
-          },
-          {
-            text: '餐饮',
-            count: 42737
-          },
-          {
-            text: '家居',
-            count: 61368
-          }
-        ]
-      }
-    },
-    items: [
-      {url: 'https://www.4dkankan.com/showPC.html?m=x2kIkoCB',
-        image: baseUrl + 'images/phone_7.jpg',
-        icon: baseUrl + 'images/phone_icon_7.png',
-        text: '万豪' },
-      {url: 'https://admin.4dmuseum.cn/showApp.html?m=241&bigScene&novr',
-        image: baseUrl + 'images/phone_2.jpg',
-        icon: baseUrl + 'images/phone_icon_2.png',
-        text: '广东省博物馆' },
-      {url: 'http://www.4dkankan.com/showPC.html?m=laaVIiT7',
-        image: baseUrl + 'images/phone_3.jpg',
-        icon: baseUrl + 'images/phone_icon_3.png',
-        text: '海昏侯' },
-      {url: 'http://www.4dkankan.com/showPC.html?m=OOM185Kf',
-        image: baseUrl + 'images/phone_4.jpg',
-        icon: baseUrl + 'images/phone_icon_4.png',
-        text: '华发' },
-      {url: 'http://www.4dkankan.com/showPC.html?m=djryzBtW',
-        image: baseUrl + 'images/phone_5.jpg',
-        icon: baseUrl + 'images/phone_icon_5.png',
-        text: '欧派' },
-      {url: 'http://www.4dkankan.com/showPC.html?m=ImlLYDW8',
-        image: baseUrl + 'images/phone_6.jpg',
-        icon: baseUrl + 'images/phone_icon_6.png',
-        text: '融信' },
-      {url: 'https://www.cgaii.com/museum/cultural/index.html',
-        image: baseUrl + 'images/phone_1.jpg',
-        icon: baseUrl + 'images/phone_icon_1.png',
-        text: '德国陶瓷博物馆' },
-      {url: 'https://www.4dkankan.com/showPC.html?m=iTz0LxLs',
-        image: baseUrl + 'images/phone_8.jpg',
-        icon: baseUrl + 'images/phone_icon_8.png',
-        text: '万科' },
-      {url: 'https://www.4dkankan.com/showPC.html?m=0mVvxHHT',
-        image: baseUrl + 'images/phone_9.jpg',
-        icon: baseUrl + 'images/phone_icon_9.png',
-        text: '伟星' },
-      {url: 'https://admin.4dmuseum.cn/showPC.html?m=333&bigScene&novr',
-        image: baseUrl + 'images/phone_10.jpg',
-        icon: baseUrl + 'images/phone_icon_10.png',
-        text: '武侯祠' }
-    ],
-    reports: {
-      name: '媒体报道',
-      items: [
-        {
-          icon: baseUrl + 'images/item_icon_7.png',
-          cover: baseUrl + 'images/item_cover_7.png',
-          time: '2019年5月17日',
-          title: '四维时代发布新一代3D空间相机',
-          url: 'https://proapi.jingjiribao.cn/detail.html?id=177829'
-        },
-        {
-          icon: baseUrl + 'images/item_icon_1.png',
-          cover: baseUrl + 'images/item_cover_1.png',
-          time: '2018年5月9日',
-          title: '四维时代发布全球首款消费级3D相机“四维看看”',
-          url: 'http://www.iheima.com/article-168187.html'
-        },
-        {
-          icon: baseUrl + 'images/item_icon_2.png',
-          cover: baseUrl + 'images/item_cover_2.png',
-          time: '2018年10月29日',
-          title: '原科技部部长万钢视察四维时代 为四维看看及四维看展点赞',
-          url: 'http://bj.news.163.com/18/1029/14/DV9U6QN8043897TC.html'
-        },
-        {
-          icon: baseUrl + 'images/item_icon_3.png',
-          cover: baseUrl + 'images/item_cover_3.png',
-          time: '2018年11月15日',
-          title: '利用AI视觉秒建数字化模型，四维时代展示手机端三维重建技术',
-          url: 'https://www.tmtpost.com/3590578.html'
-        },
-        {
-          icon: baseUrl + 'images/item_icon_4.png',
-          cover: baseUrl + 'images/item_cover_4.png',
-          time: '2018年11月19日',
-          title: '四维时代发布手机端三维重建技术 助力AI产业发展',
-          url: 'http://smart.huanqiu.com/viewpoint/2018-11/13585013.html'
-        },
-        {
-          icon: baseUrl + 'images/item_icon_5.png',
-          cover: baseUrl + 'images/item_cover_5.png',
-          time: '2018年6月21日',
-          title: '“四维看看”3D相机：让老百姓用得起 用得上',
-          url: 'http://smart.huanqiu.com/viewpoint/2018-06/12206604.html'
-        },
-        {
-          icon: baseUrl + 'images/item_icon_6.png',
-          cover: baseUrl + 'images/item_cover_6.png',
-          time: '2018年5月10日',
-          title: '四维时代发布消费级3D相机“四维看看”',
-          url: 'http://www.xinhuanet.com/tech/2018-05/10/c_1122813759.html'
-        }
-      ]
-    }
-  },
-  binocular: {
-    introduce: {
-      title: ['四维看看 Lite', '全球首款 消费级3D空间相机'],
-      price: ['￥4999', '起'],
-      dec: [
-        '消费级的空间建模神器，10分钟复刻',
-        '空间，720°沉浸式实景漫游体验'
-      ],
-      btn: '立即购买',
-      subTitle: '3D 4K实景复刻神器',
-      benefitGroup: [
-        {
-          fontImg: 'icon-koudai',
-          icon: baseUrl + 'images/product_img_02_a@2x.png',
-          title: '轻便易携  装进口袋',
-          content:
-            '机身体积与普通手机无异， <br>重量为115克，<br>仅为同类型产品重量的1/30。'
-        },
-        {
-          fontImg: 'icon-jianmo',
-          icon: baseUrl + 'images/product_img_02_b@2x.png',
-          title: '轻松操作  高效建模',
-          content:
-            '无需具备专业知识，10分钟即可采集<br>100平米空间数据，一键上传云端系统， <br>5分钟自动生成模型。'
-        },
-        {
-          fontImg: 'icon-manyou',
-          icon: baseUrl + 'images/product_img_02_c@2x.png',
-          title: '高精还原   空间漫游',
-          content:
-            '720°无死角复刻3D实景， <br>呈现4K高清画质， <br>实现沉浸式空间漫游。'
-        },
-        {
-          fontImg: 'icon-paise',
-          icon: baseUrl + 'images/product_img_02_d@2x.png',
-          title: '室内室外   皆可拍摄',
-          content:
-            '攻克同类型设备无法采集室外数据<br>的技术难点，使得3D数据采集<br>不再受地点限制，室内室外皆可完成。'
-        },
-        {
-          fontImg: 'icon-genxing',
-          icon: baseUrl + 'images/product_img_02_e@2x.png',
-          title: '自由编辑   随时更新',
-          content:
-            '贴心打造模型编辑平台<br>支持图文、 视频、 链接等信息热点的<br>添加及更新。'
-        }
-      ]
-    },
-    app: {
-      title: '4DKankan App',
-      sub: ['快速编辑和分享你的互动式视频', '分享你的空间故事']
-    },
-    guide: [
-      {
-        title: [
-          '视听导览，身临其境',
-          '制定个性化路线并录制语音导览，带给观众如临现场的视听体验。'
-        ]
-      },
-      {
-        title: ['十分钟复刻空间简便易用'],
-        sub: ['上传至云端计算', 'APP+空间相机拍摄', '用户端空间展示']
-      },
-      {
-        title: ['空间模型瞬间自动生成', '平面结构一目了然']
-      },
-      {
-        title: ['编辑和分享互动式视频', '让你的空间讲故事']
-      }
-    ],
-    technology: {
-      title: '极致工艺，登峰造极',
-      dec: '由多达794个精密元件组装而成，超细腻喷涂工艺'
-    },
-    parmas: {
-      name: '四维看看 Lite 详细参数'
-    }
-  },
-  eight: {
-    introduce: {
-      title: ['四维看看 Pro', '专业精准建模，高效复刻空间'],
-      price: ['￥4999', '起'],
-      dec: [
-        '720°沉浸式实景漫游，10K高清画质',
-        '自动还原空间结构，生成测量数据'
-      ],
-      btn: '立即购买',
-      subTitle: '让信息在三维立体空间中获得新生',
-      benefitGroup: [
-        {
-          fontImg: 'icon-sony',
-          title: 'SONY CMOS 图像传感器'
-        },
-        {
-          fontImg: 'icon-haisi',
-          title: '海思 摄像机芯片'
-        },
-        {
-          fontImg: 'icon-qiumu',
-          title: '8组精密球幕镜头'
-        },
-        {
-          fontImg: 'icon-sfm',
-          title: '人工智能空间定位技术'
-        },
-        {
-          fontImg: 'icon-3d',
-          title: '全自动3D空间建模技术'
-        },
-        {
-          fontImg: 'icon-dianlang',
-          title: '支持四小时连续拍摄'
-        },
-        {
-          fontImg: 'icon-bianji',
-          title: '编辑定制交互式视频'
-        },
-        {
-          fontImg: 'icon-liulan',
-          title: '全平台无插件分享浏览'
-        }
-      ]
-    },
-    app: {
-      title: '4DKankan App',
-      sub: ['快速编辑和分享你的互动式视频', '分享你的空间故事']
-    },
-    definition: {
-      title: '10K高清画质，720度无死角展现，捕捉空间的每个细节',
-      top: {
-        dec:
-          ['四维看看Pro 3D空间相机全方位记录方向、角度、体积等空间立体信息，', '生成实景数字3D模型，让你随时随地感受如临现场的在线漫游体验。', '10K清晰度，可4倍放大画面，不错过任何细节。'],
-        params: [
-          '1/2.3 12M CMOS感应器x2(输出像素数等同于 14M)',
-          '30fps',
-          '新开发的F2.0镜头',
-          '25分钟连续拍摄'
-        ]
-
-      },
-      bottom: {
-        title: '细节之处，纤毫毕现',
-        dec: ['4DKanKan Pro 从视觉外观到握持手感，再到机身防护，无处不凝聚匠心巧思。', '以Pro的独特性作为设计理念，以想象力的创意概念作为设计亮点。', '精湛工艺，细致耐用，细节之处，纤毫毕现。'],
-        params2: [
-          {
-            icon: baseUrl + 'images/icon1.png',
-            txt: '实时分享实训世界的所有惊喜。如今，360度图像可实现即时串流！'
-          },
-          {
-            icon: baseUrl + 'images/icon2.png',
-            txt: '使用专用智能手机应用程式，拍摄的同事检查曝光和白平衡。'
-          },
-          {
-            icon: baseUrl + 'images/icon3.png',
-            txt: '快门速度的设定范围为1/6400秒'
-          },
-          {
-            icon: baseUrl + 'images/icon4.png',
-            txt: '静态图像：（大）约1600'
-          }
-        ]
-      }
-    },
-    hardware: [
-      {
-        title: ['工艺设计', '汇聚一线精湛科技与工艺']
-      },
-      {
-        title: ['HI-SILICON', '海思HI3516AV200']
-      },
-      {
-        title: ['八组高清全视角球幕镜头，全方位捕捉空间', '高分辨率创新光学设计，', '适应更复杂光线的空间拍摄需求']
-      },
-      {
-        title: ['SONY CMOS 图像传感器']
-      },
-      {
-        title: ['独具匠心的细节设计']
-      }
+  headers: {
+    navs: [
+      {text: '产品购买', cp: 'eight'},
+      {text: '行业应用', cp: 'case_overview'},
+      {text: '服务支持', cp: 'service_overview'},
+      {text: '核心技术', cp: 'location'},
+      {text: '关于我们', cp: 'about'}
     ],
-    feature: {
-      definition: {
-        title: '图像清晰度',
-        case1: {
-          content: baseUrl + 'video/8k.mp4',
-          back: baseUrl + 'video/4k.mp4',
-          lTxt: '普通',
-          rTxt: '四维看看 Pro',
-          lMask: '4K高清',
-          rMask: '10K高清图像，4倍放大'
-        }
-      },
-      ranging: {
-        title: ['测距功能', '更极致的空间还原度'],
-        sub: '显示测距',
-        hide: '隐藏测距'
-      },
-      model: {
-        title: ['模型结构', '更极致的空间还原度'],
-        case2: {
-          content: baseUrl + 'video/qingxi.mp4',
-          back: baseUrl + 'video/moku.mp4',
-          lTxt: '普通',
-          rTxt: '四维看看 Pro'
-        }
-      },
-      manyou: {
-        title: ['模型结构', '更极致的空间还原度'],
-        left: '普通',
-        right: '四维看看 Pro'
-      },
-      endurance: {
-        title: '续航时间'
-      }
-    },
-    parmas: {
-      name: '四维看看 Pro 详细参数'
-    }
-  },
-  about: {
-    intro: [
-      '四维看看由四维时代团队独立自主研发。作为国内首家3D数字化重建技术中心，四维时代在国际上首创的微米级三维数字化精细扫描技术，较传统三维建模方式在效率上提高200倍以上，远超美国Adobe公司的厘米级精度。目前世界上能做到这个精度的只有两家，一家是四维时代，另一家是MIT计算视觉实验室。',
-      '2017年6月，四维时代与德国人工智能研究中心（DFKI）在中德两国总理见证下正式签订《中德人工智能研究院项目》，并成立中德人工智能研究院，利用中德两国技术优势，推进人工智能视觉技术的深入和应用。',
-      '2018年5月，四维时代成功将领先的三维建模技术民用化，推出专业八目3D相机四维看看Pro。当月，该产品在德国柏林人工智能大会上亮相。'
-    ],
-    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。',
-            '5月 四维看看Pro在德国柏林人工智能大会上亮相。',
-            '6月 推出高精度消费级3D相机四维看看Pro。'
-          ]
-        }
-      ]
-    },
-    kefu: [
-      {
-        title: '联系我们',
-        class: 'lxwm',
-        content: [
-          '公司：珠海市四维时代网络科技有限公司',
-          '地址：广东省珠海市高新区唐家湾港湾大道南港湾一号'
-        ]
-      },
-      {
-        title: '客户服务',
-        class: 'khfw',
-        content: ['客服/售后：4006698025', '电子邮件：service@4dage.com']
-      },
-      {
-        title: '媒体垂询',
-        class: 'mtcx',
-        content: ['热线：0756-6996790', '电子邮件：pr@4dage.com']
-      },
-      {
-        title: '业务合作',
-        class: 'ywhz',
-        content: ['热线：0756-6996796/6996791', '电子邮件：sales@4dage.com']
-      }
-    ]
-  },
-  coreTech: {
-    kjdw: {
-      title: '空间定位',
-      dec: '人工智能空间定位技术，提取并匹配图像中的特征点，计算点位的空间坐标，从而判定相机的位置。',
-      points: [
-        {
-          posi: {
-            top: '33%',
-            left: '27%'
-          }
-        },
-        {
-          posi: {
-            top: '20%',
-            left: '50%'
-          }
-        },
-        {
-          posi: {
-            top: '27%',
-            left: '57%'
-          }
-        },
-        {
-          posi: {
-            top: '38%',
-            left: '47%'
-          }
-        },
-        {
-          posi: {
-            top: '60%',
-            left: '50%'
-          }
-        },
-        {
-          posi: {
-            top: '63%',
-            left: '63%'
-          }
-        },
-        {
-          posi: {
-            top: '74%',
-            left: '82%'
-          }
-        }
-      ],
-      ability: {
-        name: '空间定位的创新技术能力',
-        sub: '全新算法极大增加了关键帧特征点的匹配数目，把定位丢失的情况降至最低。另外，基于自适应分段的集束调整，把长序列分成若干序列在后端优化，改善了优化效率。',
-        app: [
-          {
-            icon: {
-              backgroundImage: `url(${require('@/assets/images/img_core_app01.png')})`
-            },
-            sub: '全新室内重建系统，<br/>应用双球幕镜头采集数据'
-          },
-          {
-            icon: {
-              backgroundImage: `url(${require('@/assets/images/img_core_app02.png')})`
-            },
-            sub: '通过算法计算出准确的相机位姿，<br/>捕捉所有色彩信息以及部分深度信息。'
-          },
-          {
-            icon: {
-              backgroundImage: `url(${require('@/assets/images/img_core_app03.png')})`
-            },
-            sub: '人工智能算法与环闭合配合运作，<br/>使相机几何校准更加快速稳定。'
-          }
-        ]
-      }
-    },
-    kjjm: {
-      title: '空间建模',
-      dec: ['自动化高精度三维数字建模技术，', '基于二维图像，通过点云计算生成空间三维模型，', '无需人工干预，从上传到生成结果仅需要5-10分钟。'],
-      chars: [
-        {
-          icon: {
-            backgroundImage: `url(${require('@/assets/images/img_core_model01.png')})`
-          },
-          title: '生理结构',
-          sub:
-            '输入稀疏点云和相机位姿<br/>数据，计算自由空间和核心自由空间。'
-        },
-        {
-          icon: {
-            backgroundImage: `url(${require('@/assets/images/img_core_model02.png')})`
-          },
-          title: '生理结构',
-          sub: '两次解决最短<br/>路径问题以恢复细结构。'
-        },
-        {
-          icon: {
-            backgroundImage: `url(${require('@/assets/images/img_core_model03.png')})`
-          },
-          title: '生理结构',
-          sub: '基于计算出的平面图，<br/>生成网格结构和实景模型。'
-        }
-      ]
-    },
-    kjzs: {
-      title: '空间展示',
-      sub: ['计算生成的结果通过WebGL呈现交互式3D模型，', '模型中可添加图文、视频、音频、超链接等多种媒体格式，', '并可显示测距信息，或者制定自动导览，通过数字三维空间承载丰富的信息。'],
-      sdkz: {
-        name: '在线漫游博物馆 - 四维看展',
-        sub: '四维看展是国内首家集文字、图片、语音、在线场景漫游于一体的线上艺术空间。打开小程序即可浏览全球最新最全的艺术资讯，实时了解最热门的文博动态； 足不出户就能逛遍艺术展厅，720°轻松鉴赏艺术作品。它是一座永不落幕的美术馆，带你踏上数字艺术之旅。'
-      },
-      zfb: {
-        name: '3D实景看房 - 指房宝',
-        sub: '指房宝平台覆盖房产中介、装修企业的行业需求，应用四维看看展示技术推出App，为传统房地产行业提供全新的数字3D实景看房体验，应用于租房、买房、装修建房等多样的业务场景。'
-      }
-    },
-    jianrong: {
-      name: '兼容多平台、多终端',
-      sub: '可通过移动网页端、嵌入小程序、APP端进行展示，并支持在VR眼镜等硬件设备上观看。',
-      terminal: [
-        {
-          txt: 'VR端',
-          img: require('@/assets/images/img_core_platform_vr.png')
-        },
-        {
-          txt: '网页端',
-          img: require('@/assets/images/img_core_platform_pc.png')
-        },
-        {
-          txt: '移动端',
-          img: require('@/assets/images/img_core_platform_phone.png')
-        }
-      ]
-    }
+    login: '登录',
+    cart: '购物车'
   },
   cases: {
     sort: {
@@ -717,9 +138,21 @@ export default {
           name: '热门浏览'
         }
       ]
+    },
+    typeName: {
+      '房地产': '房地产',
+      '博物馆': '博物馆',
+      '家居': '家居',
+      '餐饮': '餐饮',
+      '其他': '其他'
     }
   },
   search: {
     placeholder: '请输入关键字查找'
-  }
+  },
+  home,
+  binocular,
+  eight,
+  about,
+  coreTech
 }

src/store/user.js

@@ -1,4 +1,4 @@
-import http from '@/util/http'
+// import http from '@/util/http'
 
 export default {
   state: {
@@ -8,14 +8,17 @@ export default {
     login (state) {
       state.name = 'bill'
     },
+    logout (state) {
+      state.name = ''
+    },
     user_not_login (state) {
       state.name = null
     }
   },
   actions: {
     async login (context) {
-      let data = await http.get('/')
-      context.commit('login', data)
+      // let data = await http.get('/')
+      context.commit('login', 'bill')
     }
   }
 }