0528

build/webpack.dev.conf.js

@@ -10,7 +10,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
 const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
 const portfinder = require('portfinder')
 
-const HOST = '192.168.0.67'
+const HOST = '192.168.0.122'
 const PORT = process.env.PORT && Number(process.env.PORT)
 
 const devWebpackConfig = merge(baseWebpackConfig, {

src/App.vue

@@ -6,6 +6,7 @@
       </iheader>
     </div>
     <div class="mask" :class="{active: showMask}" :style="{zIndex: maskZIndex}"></div>
+    <iaside :active="showLogin"/>
     <ichat />
     <router-view />
     <ifooter v-if="$route.name!=='about'" />
@@ -20,7 +21,7 @@ import '@/assets/font/iconfont.css'
 import header from '@/page/layout/header'
 import footer from '@/page/layout/footer'
 import left from '@/page/layout/left'
-import login from '@/page/layout/login'
+import aside from '@/page/layout/aside'
 import navs from '@/page/navs'
 import chat from '@/page/chat'
 
@@ -29,13 +30,14 @@ export default {
   data () {
     return {
       maskZIndex: -1,
-      showMask: false
+      showMask: false,
+      showLogin: false
     }
   },
   components: {
     iheader: header,
     ifooter: footer,
-    ilogin: login,
+    iaside: aside,
     inavs: navs,
     ichat: chat,
     ileft: left
@@ -47,6 +49,14 @@ export default {
       this.showMask = true
     })
 
+    this.$bus.$on('showAside', () => {
+      this.showLogin = true
+    })
+
+    this.$bus.$on('hideAside', () => {
+      this.showLogin = false
+    })
+
     this.$bus.$on('hideMask', () => {
       clearTimeout(this.timeout)
       this.showMask = false

src/assets/font/iconfont.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: 'iconfont';  /* project id 941679 */
-  src: url('//at.alicdn.com/t/font_941679_jr2pstpw74n.eot');
-  src: url('//at.alicdn.com/t/font_941679_jr2pstpw74n.eot?#iefix') format('embedded-opentype'),
-  url('//at.alicdn.com/t/font_941679_jr2pstpw74n.woff2') format('woff2'),
-  url('//at.alicdn.com/t/font_941679_jr2pstpw74n.woff') format('woff'),
-  url('//at.alicdn.com/t/font_941679_jr2pstpw74n.ttf') format('truetype'),
-  url('//at.alicdn.com/t/font_941679_jr2pstpw74n.svg#iconfont') format('svg');
+  src: url('//at.alicdn.com/t/font_941679_ny9c1y052zk.eot');
+  src: url('//at.alicdn.com/t/font_941679_ny9c1y052zk.eot?#iefix') format('embedded-opentype'),
+  url('//at.alicdn.com/t/font_941679_ny9c1y052zk.woff2') format('woff2'),
+  url('//at.alicdn.com/t/font_941679_ny9c1y052zk.woff') format('woff'),
+  url('//at.alicdn.com/t/font_941679_ny9c1y052zk.ttf') format('truetype'),
+  url('//at.alicdn.com/t/font_941679_ny9c1y052zk.svg#iconfont') format('svg');
 }
 .iconfont {
   font-family: "iconfont" !important;
@@ -254,4 +254,15 @@
 
 .icon-sony:before {
   content: "\e65f";
+}
+.icon-sysc:before {
+  content: "\e652";
+}
+
+.icon-cart:before {
+  content: "\e667";
+}
+
+.icon-plus:before {
+  content: "\e668";
 }

src/assets/style/public.scss

@@ -1,6 +1,6 @@
 $battery-start:52%;
 $battery-end:32%;
-
+$theme-color:#1fe4dc;
 
 #app {
   background-color: #fff;

src/assets/style/reset.scss

@@ -16,15 +16,11 @@ label,summary{cursor:default;}
 a,button{cursor:pointer;}
 h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
 del,ins,u,s,a,a:hover{text-decoration:none;}
-body,textarea,input,button,select,keygen,legend{font:14px/1.14 'Microsoft YaHei',\5b8b\4f53;outline:0;}
+body,textarea,input,button,select,keygen,legend{font:14px/1.14 'Microsoft YaHei',Arial,\5b8b\4f53;outline:0;}
 body{background:#fff;}
 *{box-sizing: border-box}
 a{text-decoration: none;}
 
-::-webkit-scrollbar-track-piece {
-  background-color: #fff;
-  -webkit-border-radius: 0;
-}
 
 ::-webkit-scrollbar {
   width: 8px;
@@ -37,7 +33,6 @@ a{text-decoration: none;}
   -webkit-border-radius: 4px;
   outline: 2px solid #fff;
   outline-offset: -2px;
-  border: 2px solid #fff;
 }
 
 ::-webkit-scrollbar-thumb:hover {

src/components/Linecanvas/index.vue

@@ -19,7 +19,7 @@ export default {
       type: Number
     },
     start: {
-      default: true
+      default: false
     }
   },
   data () {
@@ -419,7 +419,6 @@ export default {
             item.forEach((sub, idx) => {
               item[this.index - maxLength] && this.testArr2[myArr.length + index].push(item[this.index - maxLength])
             })
-            console.log(this.testArr2)
           })
         }
         this.index++

src/components/edit/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="edit-layout">
+    <div class="edit-bar">
+      <span>{{name}}</span>
+      <span :class="{active:!isActive}" @click="clickhandle">{{oper}}</span>
+    </div>
+    <div class="slot" :style="{maxHeight:isActive?'800px':'0'}">
+      <slot name="show" ></slot>
+    </div>
+    <div class="slot" :style="{maxHeight:!isActive?'800px':'0'}">
+      <slot name="edit"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['name', 'oper', 'isActive'],
+  methods: {
+    clickhandle () {
+      this.$emit('clickOper')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.edit-layout{
+  padding: 30px 0 30px 40px;
+  width: 850px;
+  border-bottom: 1px solid #e7e7e7;
+  .edit-bar{
+    font-size: 16px;
+    display: flex;
+    justify-content: space-between;
+    span{
+      &:last-of-type{
+        position: relative;
+        padding-right: 20px;
+        cursor: pointer;
+        &::after{
+          content: '';
+          border: 9px solid transparent;
+          border-top-color: #000;
+          border-left-width: 5px;
+          border-right-width: 5px;
+          position: absolute;
+          margin-top: 5px;
+          right: 0;
+          top: 50%;
+          transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
+          z-index: 1;
+          transform-origin: center 25%;
+          transform: translateY(-50%);
+        }
+      }
+    }
+    .active{
+      &:last-of-type{
+         &::after{
+          transform: translateY(-50%) rotate(180deg);
+        }
+      }
+
+    }
+  }
+  .slot{
+    overflow: hidden;
+    transition: max-height 0.5s ease;
+  }
+}
+</style>

src/components/number/index.vue

@@ -53,7 +53,6 @@ export default {
       } else {
         startNum = this.startCount
       }
-      console.log(this.icount)
       this.endNum = this.icount
       this.icount = startNum
       this.interval = Math.ceil((this.endNum - startNum) / 100)
@@ -76,7 +75,6 @@ export default {
       this.interval = Math.floor((this.endNum - startNum) / 100)
     },
     excessive () {
-      // console.log(this.icount, this.interval)
       if ((this.interval > 0 && Number(this.icount) + this.interval >= this.endNum) ||
         (this.interval < 0 && Number(this.icount) + this.interval <= this.endNum)) {
         this.icount = this.endNum

src/components/tabs/index.vue

@@ -22,6 +22,8 @@ export default {
       checked: this.selected
     }
   },
+  mounted () {
+  },
   methods: {
     clickHandle (item) {
       this.checked = item

src/page/binocular/index.vue

@@ -8,8 +8,8 @@
           <h2>{{langBinocular.introduce.title[0]}}</h2>
           <h2>{{langBinocular.introduce.title[1]}}</h2>
           <!-- <p><span class="money">{{langBinocular.introduce.price[0]}}</span>{{langBinocular.introduce.price[1]}}</p> -->
-          <p class="p1">{{langBinocular.introduce.dec[0]}}</p>
-          <p class="p2">{{langBinocular.introduce.dec[1]}}</p>
+          <p v-for="(item,i) in langBinocular.introduce.dec" :key="i">{{item}}</p>
+          <!-- <p class="p2">{{langBinocular.introduce.dec[1]}}</p> -->
           <!-- <div class="btns">
             <a href="" class="button"><vcenter><img :src="`${$cdn}images/product_icon_arrow.png`"  alt=""></vcenter></a>
             <a href="" class="button">{{langBinocular.introduce.btn}}</a>
@@ -55,7 +55,7 @@
         <h2 class="b-title">{{langBinocular.guide[0].title[0]}}</h2>
         <p class="b-label">{{langBinocular.guide[0].title[1]}}</p>
         <!-- <img :src="`${$cdn}images/product_img_content_4.png`" alt=""> -->
-        <phone src="https://www.4dkankan.com/showPC.html?m=5cQcvVwp"/>
+        <phone class="p3-phone" src="https://www.4dkankan.com/showPC.html?m=5cQcvVwp"/>
       </div>
       <div class="fkkj-layout plate">
         <div class="fkkj-imgcon">
@@ -255,51 +255,22 @@ export default {
   },
   methods: {},
   mounted () {
-    this.timeout = setTimeout(() => {
-      let height = getPosition(this.$refs.productLayout).y
-      let items = Array.from(
-        this.$refs.productLayout.querySelectorAll('.plate')
-      )
-      this.scrollHandle = function () {
-        items.forEach((item, index) => {
-          let isContain = Array.from(item.classList).some(sub => {
-            return (
-              sub === 'hdsp-layout' ||
-              sub === 'mxsc-layout' ||
-              sub === 'benefit'
-            )
-          })
-
-          let addHeight =
-            item.offsetParent &&
-            item.offsetParent.nodeName.toLowerCase() === 'body'
-              ? item.offsetTop + height
-              : item.offsetTop + item.offsetParent.offsetTop + height
-
-          if (
-            addHeight <=
-              window.innerHeight +
-                (window.scrollY || window.pageYOffset) -
-                300 &&
-            isContain
-          ) {
-            item.classList.remove(`hide${index + 1}`)
-          } else if (
-            addHeight <=
-              window.innerHeight +
-                (window.scrollY || window.pageYOffset) -
-                500 &&
-            !isContain
-          ) {
-            item.classList.remove(`hide${index + 1}`)
-          } else {
-            item.classList.add(`hide${index + 1}`)
-          }
-        })
-      }
-      window.addEventListener('scroll', this.scrollHandle)
-      this.scrollHandle()
-    }, 300)
+    let height = getPosition(this.$refs.productLayout).y
+    let items = Array.from(this.$refs.productLayout.querySelectorAll('.plate'))
+    this.scrollHandle = function () {
+      items.forEach((item, index) => {
+        let addHeight = (item.offsetParent && item.offsetParent.nodeName.toLowerCase() === 'body')
+          ? item.offsetTop + height
+          : item.offsetTop + item.offsetParent.offsetTop + height
+        if (addHeight <= window.innerHeight + (window.scrollY || window.pageYOffset) - 200) {
+          item.classList.remove(`hide${index + 1}`)
+        } else {
+          item.classList.add(`hide${index + 1}`)
+        }
+      })
+    }
+    window.addEventListener('scroll', this.scrollHandle)
+    this.scrollHandle()
   },
   destroyed () {
     clearTimeout(this.timeout)

src/page/binocular/style.scss

@@ -58,7 +58,6 @@ $txt_delay: 0.2s;
         color: #fff;
         font-size: 48px;
         animation: fadeUp 0.5s ease-out 1 both;
-        letter-spacing: -2.4px;
       }
 
       > h2:last-of-type {
@@ -118,8 +117,7 @@ $txt_delay: 0.2s;
       flex-wrap: wrap;
       justify-content: space-between;
       .item {
-        float: left;
-        width: 214px;
+        width: 240px;
         text-align: center;
         animation: fadeUp 0.5s ease-out 1 both;
         opacity: 0;
@@ -250,10 +248,12 @@ $txt_delay: 0.2s;
   // );
 
   .info {
-    width: 900px;
     margin: 0 auto;
     color: #fff;
     text-align: center;
+    .p3-phone{
+      width: 900px;
+    }
     > img {
       width: 84%;
       position: relative;
@@ -498,7 +498,7 @@ $txt_delay: 0.2s;
 
 .plate04 {
   background: linear-gradient(90deg, #000000 20%, #12141a 50%, #000000 90%);
-
+  background-color: #151515;
   padding-top: 175px;
 
   .info {

src/page/cases/index.vue

@@ -59,7 +59,7 @@ let wh = {
   width: window.innerWidth,
   height: window.innerHeight
 }
-let isWide = wh.width > 1400
+let isWide = wh.width > 1500
 export default {
   // import引入的组件需要注入到对象中才能使用
   components: {

src/page/cases/overview/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <div class="plate01">
+      <img src="@/assets/images/cases_img_ban.png" class="banner">
+      <p :style="{left:(split-180)+'px'}">行业与应用</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">
+          <i class="iconfont" :class="item.icon"></i>
+          {{item.name}}
+        </router-link>
+      </div>
+    </div>
+      <iFooter/>
+  </div>
+</template>
+<script>
+import {mapState} from 'vuex'
+import footer from '../../service/footer.vue'
+
+export default {
+  components: {iFooter: footer},
+  computed: {
+    ...mapState({
+      langOverview: state => state.language.home.navs.setting.case_overview,
+      split: state => state.ui.navDivision
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.plate01{
+  position: relative;
+  p{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateY(-50%);
+    font-size: 48px;
+  }
+}
+.plate02 {
+  max-width: 1220px;
+  .navs {
+    padding: 50px 0 0;
+    overflow: hidden;
+
+    a {
+      overflow: hidden;
+      width: 20%;
+      text-decoration: none;
+      border-right: 1px solid #dcdcdc;
+      text-align: center;
+      color: #8c8c8c;
+      padding: 22px;
+      float: left;
+
+      i {
+        display: block;
+        font-size: 78px;
+        margin: 0 auto 20px;
+      }
+
+      &:last-child {
+        border-right: none;
+      }
+    }
+  }
+}
+</style>

src/page/eight/index.vue

@@ -8,8 +8,7 @@
           <h2>{{langEight.introduce.title[0]}}</h2>
           <h2>{{langEight.introduce.title[1]}}</h2>
           <!-- <p><span class="money">{{langEight.introduce.price[0]}}</span>{{langEight.introduce.price[1]}}</p> -->
-          <p class="p1">{{langEight.introduce.dec[0]}}</p>
-          <p class="p2">{{langEight.introduce.dec[1]}}</p>
+          <p v-for="(item,i) in langEight.introduce.dec" :key="i">{{item}}</p>
           <!-- <div class="btns" @click="$router.push({name:'purchase'})">
             <a class="button"><vcenter><img :src="`${$cdn}images/product_icon_arrow.png`" alt=""></vcenter></a>
             <a href="" class="button">{{langEight.introduce.btn}}</a>
@@ -51,9 +50,7 @@
       <div class="front">
         <img class="front-img" :src="`${$cdn}images/camera1.png`" alt="">
         <div class="f-right">
-          <p>{{langEight.definition.top.dec[0]}}</p>
-          <p>{{langEight.definition.top.dec[1]}}</p>
-          <p>{{langEight.definition.top.dec[2]}}</p>
+          <p v-for="(item,i) in langEight.definition.top.dec" :key="i">{{item}}</p>
 
           <!-- <div class="f-params">
             <span v-for="(item,i) in langEight.definition.top.params" :key="i">
@@ -61,16 +58,17 @@
             </span>
           </div> -->
           <!-- <img class="f-img" :src="`${$cdn}images/xingkong.png`" alt=""> -->
-          <iframe  class="f-img" src="https://www.4dage.com/overview/webvr/tour.html" frameborder="0"></iframe>
+          <div class="f-img">
+            <iframe src="https://www.4dage.com/overview/webvr/tour.html" frameborder="0"></iframe>
+          </div>
+          <p class="f-dec">四维看看Pro所拍摄的画面分辨率高达10000*5000像素</p>
         </div>
       </div>
       <div class="bottom plate">
         <img class="front-img" :src="`${$cdn}images/camera2.png`" alt="">
         <div class="f-right">
           <div class="b-title">{{langEight.definition.bottom.title}}</div>
-          <p>{{langEight.definition.bottom.dec[0]}}</p>
-          <p>{{langEight.definition.bottom.dec[1]}}</p>
-          <p>{{langEight.definition.bottom.dec[2]}}</p>
+          <p v-for="(item,i) in langEight.definition.bottom.dec" :key="i">{{item}}</p>
 
           <div class="f-params">
             <div class="f-div"><img :src="`${$cdn}images/camera4.png`" alt=""></div>
@@ -91,7 +89,8 @@
       </div>
       <div class="hsxp-layout">
         <div class="hsxp-imgcon">
-          <div></div>
+          <video class="hsxp-video" src="@/assets/video/xinpian.mp4" autoplay muted loop></video>
+          <!-- <div></div> -->
         </div>
         <div class="hsxp-right">
             <div class="b-title">{{langEight.hardware[1].title[0]}}</div>
@@ -108,14 +107,14 @@
           <img :src="`${$cdn}images/lens.png`" alt="">
         </div>
       </div>
-      <div class="cgq-layout plate">
+      <!-- <div class="cgq-layout plate">
         <div class="cgq-imgcon">
           <div></div>
         </div>
         <div class="cgq-right">
             <div class="b-title">{{langEight.hardware[3].title[0]}}</div>
         </div>
-      </div>
+      </div> -->
       <div class="jzxj-layout plate">
         <div class="jzxj-left">
             <div class="b-title">{{langEight.hardware[4].title[0]}}</div>
@@ -127,7 +126,7 @@
       </div>
     </div>
 
-    <div class="plate05">
+    <div class="plate05" >
       <div class="qingxidu">
         <div class="b-title">{{langEight.feature.definition.title}}</div>
         <compare class="c-qxd" :content="langEight.feature.definition.case1.content"
@@ -138,7 +137,7 @@
         :rmask="langEight.feature.definition.case1.rMask"
         />
       </div>
-      <div class="qingxidu ceju">
+      <div class="qingxidu ceju" ref="linecanvas">
         <div class="b-title">{{langEight.feature.ranging.title[0]}}</div>
         <Linecanvas :start='runLineCanvas' class="line-canvas" />
         <div class="line-txt">
@@ -155,8 +154,8 @@
         :rtxt="langEight.feature.model.case2.rTxt" />
       </div>
 
-      <div class="qingxidu plate num-lighting" ref="number">
-        <!-- <div class="b-title">{{langEight.feature.endurance.title}}</div> -->
+      <!-- <div class="qingxidu plate num-lighting" ref="number">
+        <div class="b-title">{{langEight.feature.endurance.title}}</div>
         <div class="qxd-4">
           <div class="qxd-4-battery">
             <div class='b-l'>
@@ -173,10 +172,10 @@
             </div>
           </div>
         </div>
-      </div>
+      </div> -->
     </div>
 
-    <div class="plate06 plate">
+    <div class="plate06">
       <div class="info">
         <div class="b-title">{{langEight.parmas.name}}</div>
         <img :src="`${$cdn}images/product_img_content_6.png`" alt="">
@@ -303,7 +302,8 @@ export default {
       standardGroup,
       params,
       params2,
-      runLineCanvas: true,
+      runLineCanvas: false,
+      canLine: true,
       ismobile: browser.mobile,
       runNum: 'up',
       numArr: {},
@@ -349,47 +349,29 @@ export default {
       }
     }
   },
-  methods: {
-
-  },
   mounted () {
-    this.timeout = setTimeout(() => {
-      let height = getPosition(this.$refs.productLayout).y
-      let ny = this.$refs.number
-      let items = Array.from(this.$refs.productLayout.querySelectorAll('.plate'))
-      this.scrollHandle = () => {
-        let isRun = Array.from(ny.classList).some(sub => {
-          return sub === 'hide10'
-        })
-        if (!isRun) {
-          this.runNum = 'up'
-        } else {
-          this.runNum = 'dowm'
-        }
+    let height = getPosition(this.$refs.productLayout).y
+    let lc = getPosition(this.$refs.linecanvas).y + this.$refs.linecanvas.offsetHeight
 
-        items.forEach((item, index) => {
-          let isContain = Array.from(item.classList).some(sub => {
-            return sub === 'bottom' || sub === 'benefit' ||
-                  sub === 'qmjt-layout' || sub === 'cgq-layout' || sub === 'jzxj-layout'
-          })
-
-          let addHeight = item.offsetParent && (item.offsetParent.nodeName).toLowerCase() === 'body' ? (item.offsetTop + height) : (item.offsetTop + item.offsetParent.offsetTop + height)
-
-          if (addHeight <= window.innerHeight + (window.scrollY || window.pageYOffset) - 300 && isContain) {
-            item.classList.remove(`hide${index + 1}`)
-          } else if (addHeight <= window.innerHeight + (window.scrollY || window.pageYOffset) - 500 && !isContain) {
-            item.classList.remove(`hide${index + 1}`)
-          } else {
-            item.classList.add(`hide${index + 1}`)
-          }
-        })
+    let items = Array.from(this.$refs.productLayout.querySelectorAll('.plate'))
+    this.scrollHandle = () => {
+      if (window.innerHeight + (window.scrollY || window.pageYOffset) - 200 > lc && this.canLine) {
+        this.canLine = false
+        this.runLineCanvas = true
       }
-      window.addEventListener('scroll', this.scrollHandle)
-      this.scrollHandle()
-    }, 300)
+
+      items.forEach((item, index) => {
+        let addHeight = item.offsetParent && (item.offsetParent.nodeName).toLowerCase() === 'body' ? (item.offsetTop + height) : (item.offsetTop + item.offsetParent.offsetTop + height)
+        if (addHeight <= window.innerHeight + (window.scrollY || window.pageYOffset) - 200) {
+          item.classList.remove(`hide${index + 1}`)
+        } else {
+          item.classList.add(`hide${index + 1}`)
+        }
+      })
+    }
+    window.addEventListener('scroll', this.scrollHandle)
   },
   destroyed () {
-    clearTimeout(this.timeout)
     window.removeEventListener('scroll', this.scrollHandle)
   },
   components: {vcenter, Linecanvas, phone, compare, number}

src/page/eight/style.scss

@@ -62,7 +62,6 @@ $num_time: 0.6s;
         color: #fff;
         font-size: 48px;
         animation: fadeUp 0.5s ease-out 1 both;
-        letter-spacing: -2.4px;
       }
 
       >h2:last-of-type{
@@ -285,8 +284,8 @@ $num_time: 0.6s;
     margin: 138px 0 0 175px;
     width: 1260px;
     .front-img{
-      flex: 1;
       width: 550px;
+      flex-shrink: 0;
       animation: fadeUp 0.5s ease-out 1 both $txt_delay;
     }
     .f-right{
@@ -333,6 +332,19 @@ $num_time: 0.6s;
         animation: fadeUp 0.5s ease-out 1 both $txt_delay*3;
         width: 530px;
         height: 265px;
+        border-radius: 5px;
+        overflow: hidden;
+        iframe{
+          width: 100%;
+          height: 100%;
+        }
+      }
+      .f-dec{
+        color: #ccc;
+        font-size: 12px;
+        letter-spacing: 0.5px;
+        animation: fadeUp 0.5s ease-out 1 both $txt_delay*4;
+        margin-top: 12px;
       }
     
       .f-intro{
@@ -354,7 +366,6 @@ $num_time: 0.6s;
     margin: 202px 0 145px 175px;
     width: 1260px;
     .front-img{
-      flex: 1;
       width: 550px;
       flex-shrink: 0;
       animation: fadeUp 0.5s ease-out 1 both;
@@ -418,6 +429,10 @@ $num_time: 0.6s;
     margin: 130px auto;
     .hsxp-imgcon{
       animation: fadeUp 0.5s ease-out 1 both;
+      .hsxp-video{
+        width: 37.5vw;
+        margin-left: 280px;
+      }
       div{
         width: 57.5vw;
         height: 20vw;
@@ -464,35 +479,37 @@ $num_time: 0.6s;
     }
   }
 
-  .cgq-layout{
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin: 130px auto;
-    .cgq-imgcon{
-      animation: fadeUp 0.5s ease-out 1 both;
-      div{
-        width: 34vw;
-        height: 20vw;
-        margin-left: 280px;
-        background-image: url('~@/assets/images/sony.png');
-        background-repeat: no-repeat;
-        background-position: 0% 0px;
-        background-size: cover;
-        overflow-x: hidden;
-        will-change: background;
-        animation: xinpian-open 0.2s steps(5) forwards $ani_delay;
-      }
-    }
-    .cgq-right{
-      color: #fff;
-      position: relative;
-      right: 340px;
-      animation: fadeUp 0.5s ease-out 1 both;
-      text-align: right;
-    }
+  // .cgq-layout{
+  //   height: 0;
+  //   overflow: hidden;
+  //   display: flex;
+  //   justify-content: space-between;
+  //   align-items: center;
+  //   margin: 0 auto;
+  //   .cgq-imgcon{
+  //     animation: fadeUp 0.5s ease-out 1 both;
+  //     div{
+  //       width: 34vw;
+  //       height: 20vw;
+  //       margin-left: 280px;
+  //       background-image: url('~@/assets/images/sony.png');
+  //       background-repeat: no-repeat;
+  //       background-position: 0% 0px;
+  //       background-size: cover;
+  //       overflow-x: hidden;
+  //       will-change: background;
+  //       animation: xinpian-open 0.2s steps(5) forwards $ani_delay;
+  //     }
+  //   }
+  //   .cgq-right{
+  //     color: #fff;
+  //     position: relative;
+  //     right: 340px;
+  //     animation: fadeUp 0.5s ease-out 1 both;
+  //     text-align: right;
+  //   }
     
-  }
+  // }
 
   .jzxj-layout{
     display: flex;
@@ -530,13 +547,14 @@ $num_time: 0.6s;
 .plate05{
   padding: 200px 0 0;
   background: url('~@/assets/images/lin-bg.png') top center no-repeat;
-  .num-lighting{
-    height: 0;
-    overflow: hidden;
-    max-height: 0;
-    padding: 0!important;
-    box-sizing: border-box;
-  }
+  background-size: 100% auto;
+  // .num-lighting{
+  //   height: 0;
+  //   overflow: hidden;
+  //   max-height: 0;
+  //   padding: 0!important;
+  //   box-sizing: border-box;
+  // }
   .b-title{
     color: #fff;
     font-size: 36px;
@@ -842,7 +860,7 @@ $num_time: 0.6s;
   }
 }
 .hide4{
-  .b-title,.b-label,.front-img,p,.f-params span,.f-img,.f-intro p{
+  .b-title,.b-label,.front-img,p,.f-params span,.f-img,.f-dec,.f-intro p{
     animation: fadeDown 0.5s ease-out 1 both!important;
   }
 }
@@ -1062,7 +1080,7 @@ $num_time: 0.6s;
         width: 100%;
         justify-content: space-around;
         .hsxp-imgcon{
-          div{
+          div,video{
             margin-left: 0;
           }
         }

src/page/home2/index.vue

@@ -28,6 +28,20 @@
 
     <div class="plate02">
       <div class="logo"><img :src="`${$cdn}images/plate_icon.png`" ></div>
+      <div class="booking">
+        <div>
+          <img class="img-pro" :src="`${$cdn}images/banner_pro.png`" >
+          <div class="info">
+            <h2>四维看看 Pro</h2>
+            <h3>专业精准建模，高效复刻空间</h3>
+            <p>100元定金预售</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>
+            </div>
+          </div>
+        </div>
+      </div>
       <div class="hxjs">
         <h2>{{langHome.tech.title}}</h2>
         <p>{{langHome.tech.dec}}</p>
@@ -130,9 +144,10 @@
     </div>
 
     <div class="plate05" ref="numcount">
-      <img :src="`${$cdn}images/index_img_record_bg.png`" class="bg">
+      <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>
         <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>
@@ -201,6 +216,8 @@ 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
       }

src/page/home2/style.scss

@@ -164,7 +164,7 @@
     transform: translateX(-50%) translateY(-50%);
     width: 150px;
     height: 150px;
-    background-color: #fff;
+    background-color: #f7f7f8;
     border-radius: 50%;
     text-align: center;
     z-index: 2;
@@ -173,6 +173,43 @@
       animation: linear-jump 1s infinite ease-out alternate;
     }
   }
+  .booking{
+    background: url('~@/assets/images/booking-bg.png') #f7f7f8 no-repeat top center;
+    background-size: cover;
+    &>div{
+      max-width: 840px;
+      margin: 0 auto;
+      padding: 80px 0;
+      .img-pro{
+        width: 150px;
+        margin-right: 115px;
+      }
+      .info{
+        vertical-align: top;
+        display: inline-block;
+        margin-top: 40px;
+        h2{
+          font-size: 36px;
+          margin-bottom: 0;
+          font-weight: bold;
+        }
+        h3{
+          font-size: 36px;
+          font-weight: 300;
+        }
+        p{
+          margin: 76px 0 20px;
+          font-size: 48px;
+          line-height: 1;
+          font-weight: 100;
+        }
+        .purchase{
+          width: 260px;
+          text-align:center;
+        }
+      }
+    }
+  }
 
   .hxjs {
     z-index: 2;
@@ -432,20 +469,28 @@
 .plate05 {
   overflow: hidden;
   position: relative;
-
+  img{
+    width: 100%;
+  }
   .info {
     position: absolute;
     width: 1200px;
     left: 50%;
-    top: 50%;
+    top: 48%;
     transform: translateX(-50%) translateY(-50%);
     color: rgb(50, 50, 50);
     text-align: center;
     z-index: 2;
 
     .b-title {
-      margin-bottom: 40px;
       color: inherit;
+      font-weight: 400;
+    }
+
+    .b-sub{
+      font-size: 18px;
+      margin-bottom: 40px;
+      font-weight: normal;
     }
 
     .count-group {
@@ -521,7 +566,7 @@
       flex: 0 0 30%;
 
       img {
-        max-width: 100%;
+        max-width:100%;
       }
     }
 

src/page/layout/aside/index.vue

@@ -0,0 +1,41 @@
+<template>
+<div class="login-layout">
+  <div class="mask" :style="{maxHeight:active?'100%':'0'}"></div>
+  <component :is="'login'" :active='active'></component>
+</div>
+</template>
+
+<script>
+import login from './temp/login'
+import cart from './temp/cart'
+
+export default {
+  props: ['active'],
+  components: {
+    login,
+    cart
+  },
+  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);
+  }
+
+}
+</style>

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

@@ -0,0 +1,181 @@
+<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>
+  </div>
+</template>
+
+<script>
+import vcenter from '@/components/vcenter'
+
+export default {
+  props: ['active'],
+  data () {
+    let products = ['asd']
+    return {
+      products
+    }
+  },
+  components: {
+    vcenter
+  },
+  methods: {
+    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;
+  &:first-child {
+    width: 50px;
+    box-sizing: border-box;
+  }
+
+  &:last-child {
+    width: 150px;
+    line-height: 50px;
+    color: #000;
+    font-size: 14px;
+  }
+}
+.cart-con {
+  $animateType: cubic-bezier(0.77, 0, 0.175, 1);
+  width: 730px;
+  position: fixed;
+  right: 0;
+  height: 100%;
+  transition: max-height 0.7s $animateType;
+  max-height: 100%;
+  background: #fff;
+  z-index: 99999;
+  top: 0;
+  overflow: hidden;
+  .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 {
+    .item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-top: 1px solid #e7e7e7;
+      border-bottom: 1px solid #e7e7e7;
+      padding: 20px 60px;
+      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;
+          }
+        }
+      }
+    }
+  }
+  .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/login.vue

@@ -0,0 +1,135 @@
+<template>
+  <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>
+</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-con {
+  $animateType: cubic-bezier(0.77, 0, 0.175, 1);
+
+  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/aside/temp/ltemp/forget.vue

@@ -0,0 +1,16 @@
+<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/aside/temp/ltemp/login.vue

@@ -0,0 +1,23 @@
+<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/aside/temp/ltemp/register.vue

@@ -0,0 +1,18 @@
+<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/aside/temp/ltemp/style.scss

@@ -0,0 +1,96 @@
+$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/layout/footer.vue

@@ -35,9 +35,9 @@
       </div>
       <div class="relevant">
         <div>
-          <a href="http://www.4dkankan.com" target="_blank">四维看看</a>
+          <a href="https://www.4dage.com" target="_blank">四维时代</a>
           <a href="http://www.4dmodel.com/" target="_blank">四维模库</a>
-          <a href="http://www.cgaii.com" target="_blank">中德人工智能研究院</a>
+          <a href="https://www.cgaii.com" target="_blank">中德人工智能研究院</a>
         </div>
         <p>Copyright © 2018 4DAGE Co., Ltd. All rights reserved. </p>
         <p>粤ICP备14078495号-1</p>

src/page/layout/header/index.vue

@@ -7,18 +7,18 @@
         </vcenter>
       </router-link>
     </div>
-    <div  class="menu">
+    <div class="menu">
       <div class="lang">
         <vcenter>
           <a :class="{active: language === 'en'}" @click="$store.commit('change_language', 'en')">En</a>
           <a :class="{active: language === 'cn'}" @click="$store.commit('change_language', 'cn')">Cn</a>
         </vcenter>
       </div>
-      <div class="list" ref="list" @mouseleave="hoverCp !== 'isearch' && hideCp()">
+      <div class="list" ref="list" @mouseleave="hoverCp !== 'isearch' && hoverCp !== 'ilogin' && hideCp()">
         <a
           v-for="nav in langHeader"
           :key="nav.text"
-          @mouseenter="hoverCp !== 'isearch' && showCp(nav.cp, 135)"
+          @mouseenter="hoverCp !== 'isearch' && hoverCp !== 'ilogin' && showCp(nav.cp, 135)"
           @click="clickHandle(nav)"
           :class="{active: hoverCp === nav.cp}">
           {{nav.text}}
@@ -38,12 +38,12 @@
           <i class="iconfont icon-cuowu hide"></i>
         </vcenter>
       </a>
-      <!-- <a class="user">
+      <a class="user" @click="loginHandle" >
         <vcenter>
           <i class="iconfont icon-geren"></i>
-          <span>登入</span>
+          <span>登录</span>
         </vcenter>
-      </a> -->
+      </a>
     </div>
   </div>
 </template>
@@ -58,7 +58,7 @@ export default {
   data () {
     return {
       height: 0,
-      hoverCp: 'product',
+      hoverCp: 'eight',
       overb: false,
       active: true,
       ismobile: browser.mobile
@@ -66,9 +66,7 @@ export default {
   },
   methods: {
     clickHandle (nav) {
-      if (nav.cp === 'about') {
-        this.$router.push({name: nav.cp})
-      }
+      this.$router.push({name: nav.cp})
     },
     showCp (cp, height) {
       clearTimeout(this.timeout)
@@ -90,8 +88,10 @@ export default {
       } else {
         this.showCp('isearch', window.innerHeight - 68)
       }
+    },
+    loginHandle () {
+      this.$bus.$emit('showAside')
     }
-
   },
   computed: {
     ...mapState({

src/page/layout/header/istyle.scss

@@ -56,7 +56,12 @@
         font-weight: bold;
         margin-left: 5px;
         color: #727272;
+        transition: color 0.3s ease;
+        &:hover{
+          color: #fff;
+        }
       }
+
       .active{
         color: #fff;
       }
@@ -67,7 +72,7 @@
       padding: 0 34px;
       display: flex;
       min-width: 480px;
-      max-width: 610px;
+      max-width: 750px;
       justify-content: space-between;
       flex: 4;
 
@@ -81,7 +86,7 @@
         flex: 0 0 auto;
         transition: color $mc;
         
-        &:last-of-type{
+        &:last-of-type,&:nth-last-child(3){
           &::before,
           &::after {
             display: none;
@@ -153,7 +158,10 @@
 
       &.user {
         background-color: #fff;
-        color: #101010
+        color: #101010;
+        width: 120px;
+        text-align: center;
+        box-sizing: border-box;
       }
     }
 

src/page/layout/header/style.scss

@@ -26,6 +26,9 @@
         &.active {
           color: $color;
         }
+        &::hover{
+          color: $color;
+        }
       }
 
       .list {
@@ -87,6 +90,9 @@
       .lang a{
         transition: $ts;
         color: $activeColor;
+        &:hover{
+          color: $activeColor;
+        }
         &.active {
           color: $color;
         }
@@ -238,6 +244,9 @@
           font-size: 16px;
           font-weight: bold;
           margin-left: 5px;
+          &:hover{
+            color: $activeColor;
+          }
         }
       }
 

src/page/layout/login.vue

@@ -1,5 +1,146 @@
 <template>
-  <div>
-    login
+<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

@@ -0,0 +1,16 @@
+<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

@@ -0,0 +1,23 @@
+<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

@@ -0,0 +1,18 @@
+<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

@@ -0,0 +1,96 @@
+$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/location/index.vue

@@ -28,21 +28,24 @@
     </div>
 
     <div class="plate03" id="kjjm">
-      <div class="info">
-        <h2>{{langCoreTech.kjjm.title}}</h2>
-      </div>
       <iframe
         class="ifr"
-        src="https://model3d.4dage.com/3D/2018/model/Model.html?m=561"
+        src="https://model3d.4dage.com/3D/2018/model/Model-auto.html?m=561"
         frameborder="0"
       ></iframe>
+      <div class="info">
+        <h2>{{langCoreTech.kjjm.title}}</h2>
+        <p>{{langCoreTech.kjjm.dec[0]}}</p>
+        <p>{{langCoreTech.kjjm.dec[1]}}</p>
+        <p>{{langCoreTech.kjjm.dec[2]}}</p>
+      </div>
     </div>
 
     <div class="plate04">
       <div class="info">
-        <p>{{langCoreTech.kjjm.dec[0]}}</p>
+        <!-- <p>{{langCoreTech.kjjm.dec[0]}}</p>
         <p>{{langCoreTech.kjjm.dec[1]}}</p>
-        <p>{{langCoreTech.kjjm.dec[2]}}</p>
+        <p>{{langCoreTech.kjjm.dec[2]}}</p> -->
         <div class="p4-char">
           <div v-for="(item,index) in langCoreTech.kjjm.chars" :key="index">
             <div class="icon" :style="item.icon"></div>
@@ -54,12 +57,12 @@
     </div>
 
     <div class="plate05" id="kjzs">
+      <iframe class="ifr" src="https://www.4dkankan.com/showPC.html?m=TZpQAf28" frameborder="0"></iframe>
       <div class="info">
         <h2>{{langCoreTech.kjzs.title}}</h2>
-        <p>{{langCoreTech.kjzs.sub[0]}}</p>
-        <p>{{langCoreTech.kjzs.sub[1]}}</p>
+        <p v-for="(item,i) in langCoreTech.kjzs.sub" :key="i">{{item}}</p>
+
       </div>
-      <iframe class="ifr" src="https://www.4dkankan.com/showPC.html?m=TZpQAf28" frameborder="0"></iframe>
     </div>
 
     <div class="plate06">

src/page/location/style.scss

@@ -1,6 +1,7 @@
 $loca-ani:0.5s;
 
 .location-layout{
+  overflow: hidden;
   .plate01{
     background: url("~@/assets/images/hxjs-bg.jpg") center no-repeat;
     .layout{
@@ -21,7 +22,6 @@ $loca-ani:0.5s;
           font-size: 18px;
           line-height: 30px;
           width: 380px;
-          text-align: justify;
         }
       }
       .p1-model{
@@ -119,30 +119,38 @@ $loca-ani:0.5s;
 
   .plate03{
     position: relative;
+    display: flex;
+    align-items: center;
     .info{
-      position: absolute;
+      padding-left: 80px;
+      padding-right: 20px;
+      box-sizing: border-box;
       z-index: 33;
+      color: #000;
       text-align: center;
-      width: 100%;
-      color: #fff;
       margin-top: 80px;
+      flex-shrink: 0; 
+      width: 630px;
       h2{
+        text-align: left;
         font-size: 48px;
         margin-bottom: 30px;
       }
       p{
         font-size: 18px;
+        text-align: left;
+        line-height: 30px;
       }
     }
     .ifr{
-      width: 100%;
-      height: 900px;
+      flex: 7;
+      height: 700px;
     }
   }
 
   .plate04{
     text-align: center;
-    padding: 80px 0 130px;
+    padding: 20px 0 130px;
     border-bottom: 1px solid #ededed;
     .info{
       p{
@@ -187,8 +195,15 @@ $loca-ani:0.5s;
   
   .plate05{
     margin: 100px auto;
+    display: flex;
+    align-items: center;
     .info{
+      padding-left: 80px;
+      padding-right: 20px;
+      width: 630px;
+      flex-shrink: 0;
       text-align: center;
+      text-align: left;
       h2{
         font-size: 48px;
         margin-bottom: 25px;
@@ -199,8 +214,8 @@ $loca-ani:0.5s;
       }
     }
     .ifr{
-      width: 100%;
-      height: 900px;
+      flex: 7;
+      height: 700px;
       margin-top: 50px;
     }
   }
@@ -278,4 +293,21 @@ $loca-ani:0.5s;
       }
     }
   }
+}
+
+@media screen and (max-width: 1600px) {
+  .location-layout {
+    .plate01{
+      .layout{
+        margin-left: 200px;
+      }
+    }
+    .plate06{
+      .top,.bottom{
+        .intro{
+          margin-left: 200px;
+        }
+      }
+    }
+  }
 }

src/page/manage/index.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="manage-layout">
+    <div class="manage-bg">
+      <div class="manage-con" :style="{marginLeft:(split+37)+'px'}">
+        <div class="info" >
+        <img class="avatar" src="@/assets/images/product_img_content_3.jpg" alt>
+        <div class="member">
+          <p>尚未开通任何会员</p>
+          <p>138****2255</p>
+        </div>
+        <div class="open-btn">立即开通</div>
+      </div>
+      <div class="capacity">
+        <div class="c-line">
+          <div class="active" :style="{width:'32%'}"></div>
+        </div>
+        <div class="c-detail">
+          <span>已使用：15G / 36G (32%)</span>
+          <span>查看特权介绍</span>
+        </div>
+      </div>
+      </div>
+    </div>
+    <div class="manage-body">
+      <div class="mc-left" :style="{width:split+'px'}">
+        <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>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="mc-right">
+        <component :is="active"/>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import {mapState} from 'vuex'
+import iinfomation from './temp/infomation'
+import ichange from './temp/change'
+import iconsumption from './temp/consumption'
+import iinvoice from './temp/invoice'
+import ilogout from './temp/logout'
+import iorder from './temp/order'
+import iprivilege from './temp/privilege'
+import iscene from './temp/scene'
+
+export default {
+  components: {iinfomation, ichange, iconsumption, iinvoice, ilogout, iorder, iscene, iprivilege},
+  data () {
+    let settings = [
+      {
+        name: 'info',
+        items: [{
+          name: '账号信息',
+          cp: 'iinfomation'
+        }, {
+          name: '我的场景',
+          cp: 'iscene'
+        }, {
+          name: '我的订单',
+          cp: 'iorder'
+        }]
+      },
+      {
+        name: 'member',
+        items: [{
+          name: '特权介绍',
+          cp: 'iprivilege'
+        }, {
+          name: '消费记录',
+          cp: 'iconsumption'
+        }, {
+          name: '增值发票',
+          cp: 'iinvoice'
+        }]
+      },
+      {
+        name: 'security',
+        items: [{
+          name: '修改密码',
+          cp: 'ichange'
+        }, {
+          name: '退出登录',
+          cp: 'ilogout'
+        }]
+      }
+    ]
+    return {
+      settings,
+      active: 'iinfomation'
+    }
+  },
+  computed: {
+    ...mapState({
+      split: state => state.ui.navDivision
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "./style.scss";
+</style>

src/page/manage/style.scss

@@ -0,0 +1,113 @@
+.manage-layout{
+  .manage-bg{
+    background: url('~@/assets/images/person-bg.png') no-repeat top center;
+    background-size: cover;
+    .manage-con{
+      padding: 30px 0;
+      .info{
+        color: #fff;
+        display: flex;
+        align-items: center;
+        width: 680px;
+        position: relative;
+        .avatar{
+          width: 64px;
+          height: 64px;
+          flex-shrink: 0;
+        }
+        .member{
+          display:flex;
+          flex-direction: column;
+          justify-content: space-between;
+          height: 64px;
+          padding: 6px 14px;
+          p{
+            &:first-child{
+              font-size: 18px;
+            }
+          }
+        }
+        .open-btn{
+          position: absolute;
+          right: 0;
+          color: #010101;
+          line-height: 40px;
+          height: 40px;
+          width: 170px;
+          text-align: center;
+          background-color: #1fe4dc;
+          cursor: pointer;
+        }
+      }
+      .capacity{
+        margin-top: 30px;
+        width: 680px;
+        .c-line{
+          width: 100%;
+          height: 8px;
+          background-color: #ccc;
+          .active{
+            background-color: #1fe4dc;
+            height: 100%;
+          }
+        }
+        .c-detail{
+          margin-top: 20px;
+          color: #fff;
+          display: flex;
+          justify-content: space-between;
+        }
+      }
+    }
+  }
+  .manage-body{
+    min-height: 900px;
+    display: flex;
+    .mc-left{
+      flex-shrink: 0;
+      background-color: #f4f4f6;
+      border-right: 1px solid #e7e7e7;
+      padding-top: 30px;
+      .list-items{
+        font-size: 16px;
+        display: inline-block;
+        margin-bottom: 50px;
+        width: 100%;
+        li{
+          width: 100%;
+          line-height: 36px;
+          text-align: right;
+          padding-right: 110px;
+          span{
+            cursor: pointer;
+            display: inline-block;
+            position: relative;
+            vertical-align: middle;
+            padding-left: 12px;
+            &::before{
+              position: absolute;
+              top: 50%;
+              left: 0;
+              display: inline-block;
+              transform: translateY(-50%);
+              content: '';
+              width: 6px;
+              height: 6px;
+              vertical-align: middle;
+              border-radius: 50%;
+              border: 1px solid #000;
+            }
+          }
+          .active{
+            &::before{
+              background-color: #1fe4dc;
+              border: 1px solid #1fe4dc;
+            }
+          }
+        }
+      }
+    }
+    .mc-right{
+    }
+  }
+}

src/page/manage/temp/change.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>change</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/page/manage/temp/consumption.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>information</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/page/manage/temp/infomation.vue

@@ -0,0 +1,237 @@
+<template>
+  <div class="info-layout">
+    <edit
+      :name="'账号信息'"
+      @clickOper="handleOper('infoStatus')"
+      :oper="infoStatus?'编辑':'收起'"
+      :isActive="infoStatus"
+    >
+      <div class="info" slot="show">
+        <p>头像</p>
+        <img class="avatar" src="@/assets/images/product_img_content_3.jpg" alt>
+        <p>昵称</p>
+        <div>abc345</div>
+      </div>
+      <div class="info edit-info" slot="edit">
+        <div class="info-left">
+          <p>头像</p>
+          <img class="avatar" src="@/assets/images/product_img_content_3.jpg" alt>
+          <p>昵称</p>
+          <input autofocus class="nickname" type="text" placeholder="abc345">
+          <div class="btn parmary">保存</div>
+        </div>
+        <div>
+          <div class="btn choose">选择图片</div>
+          <p class="p-desc">请选择一张新照片进行上传</p>
+          <p class="p-desc">支持图片格式为：JPG/PNG</p>
+          <p class="p-desc">推荐分辨率为：512*512px，大小不小于1MB</p>
+        </div>
+      </div>
+    </edit>
+
+    <edit
+      :name="'我的收货地址'"
+      @clickOper="handleOper('addressStatus')"
+      :oper="addressStatus?'编辑':'收起'"
+      :isActive="addressStatus"
+    >
+      <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 class="btn parmary">保存</div>
+      </div>
+    </edit>
+
+    <edit
+      :name="'我的发票抬头'"
+      @clickOper="handleOper('invoiceStatus')"
+      :oper="invoiceStatus?'编辑':'收起'"
+      :isActive="invoiceStatus"
+    >
+      <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==='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 class="btn parmary">保存</div>
+      </div>
+    </edit>
+  </div>
+</template>
+
+<script>
+import edit from '@/components/edit'
+export default {
+  components: { edit },
+  data () {
+    return {
+      infoStatus: true,
+      addressStatus: true,
+      invoiceStatus: true,
+      invoice: 'normal'
+    }
+  },
+  methods: {
+    handleOper (type) {
+      this[type] = !this[type]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.info-layout {
+  $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;
+    }
+  }
+  .btn {
+    text-align: center;
+    cursor: pointer;
+  }
+  .parmary {
+    background-color: $theme-color;
+    width: 126px;
+    height: 36px;
+    line-height: 36px;
+    margin-top: 20px;
+  }
+  .choose {
+    background-color: #ddd;
+    color: #fff;
+    width: 100px;
+    line-height: 26px;
+    height: 26px;
+    font-size: 12px;
+    margin: 12px 0 20px;
+  }
+  .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-info {
+    display: flex;
+    .info-left {
+      min-width: 210px;
+    }
+  }
+  .edit-address {
+    .input-con {
+      input {
+        width: 200px;
+        line-height: 36px;
+        height: 36px;
+        margin: 10px 25px 10px 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;
+        }
+      }
+      .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;
+      }
+    }
+  }
+}
+</style>

src/page/manage/temp/invoice.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>information</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/page/manage/temp/logout.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>information</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/page/manage/temp/order.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>information</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/page/manage/temp/privilege.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>information</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/page/manage/temp/scene.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="scene-layout">
+    <ul>
+      <li v-for="(item,index) in scene" :key="index">
+        <img :src="item.img" alt="">
+        <div class="name">
+          <div class="title">{{item.title}}</div>
+          <div class="oper">
+            <span>编辑</span> / <span>删除</span>
+          </div>
+        </div>
+        <div><span>拍摄日期：</span><span>2018-07-09</span></div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    let scene = [
+      {
+        title: 'Oin Bar 前台',
+        username: 'VannyShen',
+        img: require('@/assets/images/cases/case_01.png'),
+        viewcount: '2564'
+      }, {
+        title: 'Oin Bar 前台',
+        img: require('@/assets/images/cases/case_02.png'),
+        username: 'VannyShen',
+        viewcount: '2564'
+      }, {
+        title: 'Oin Bar 前台',
+        img: require('@/assets/images/cases/case_03.png'),
+        username: 'VannyShen',
+        viewcount: '2564'
+      }, {
+        title: 'Oin Bar 前台',
+        img: require('@/assets/images/cases/case_04.png'),
+        username: 'VannyShen',
+        viewcount: '2564'
+      }, {
+        title: 'Oin Bar 前台',
+        img: require('@/assets/images/cases/case_05.png'),
+        username: 'VannyShen',
+        viewcount: '2564'
+      }, {
+        title: 'Oin Bar 前台',
+        img: require('@/assets/images/cases/case_06.png'),
+        username: 'VannyShen',
+        viewcount: '2564'
+      }, {
+        title: 'Oin Bar 前台',
+        img: require('@/assets/images/cases/case_07.png'),
+        username: 'VannyShen',
+        viewcount: '2564'
+      }, {
+        title: 'Oin Bar 前台',
+        img: require('@/assets/images/cases/case_08.png'),
+        username: 'VannyShen',
+        viewcount: '2564'
+      }, {
+        title: 'Oin Bar 前台',
+        img: require('@/assets/images/cases/case_09.png'),
+        username: 'VannyShen',
+        viewcount: '2564'
+      }, {
+        title: 'Oin Bar 前台',
+        img: require('@/assets/images/cases/case_10.png'),
+        username: 'VannyShen',
+        viewcount: '2564'
+      }, {
+        title: 'Oin Bar 前台',
+        img: require('@/assets/images/cases/case_11.png'),
+        username: 'VannyShen',
+        viewcount: '2564'
+      }, {
+        title: 'Oin Bar 前台',
+        img: require('@/assets/images/cases/case_12.png'),
+        username: 'VannyShen',
+        viewcount: '2564'
+      }, {
+        title: 'Oin Bar 前台',
+        img: require('@/assets/images/cases/case_13.png'),
+        username: 'VannyShen',
+        viewcount: '2564'
+      }, {
+        title: 'Oin Bar 前台',
+        img: require('@/assets/images/cases/case_14.png'),
+        username: 'VannyShen',
+        viewcount: '2564'
+      }, {
+        title: 'Oin Bar 前台',
+        img: require('@/assets/images/cases/case_15.png'),
+        username: 'VannyShen',
+        viewcount: '2564'
+      }, {
+        title: 'Oin Bar 前台',
+        img: require('@/assets/images/cases/case_16.png'),
+        username: 'VannyShen',
+        viewcount: '2564'
+      }]
+
+    return {
+      scene
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scene-layout{
+  padding: 30px 0 30px 40px;
+  ul{
+    display: flex;
+    flex-wrap: wrap;
+    li{
+      width: 30%;
+      display: inline-block;
+      position: relative;
+      margin-right: 25px;
+      margin-bottom: 35px;
+      color: #a0a0a0;
+      max-width: 330px;
+      img{
+        width: 100%;
+      }
+      .name{
+        display: flex;
+        justify-content: space-between;
+        line-height: 32px;
+        .title{
+          font-weight: bold;
+          color: #000;
+        }
+        .oper{
+          span{
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/page/navs/index.vue

@@ -10,7 +10,7 @@ import temp from './temp'
 import isearch from './search/'
 
 const modulMap = {
-  temp: ['case', 'technology', 'product', 'forum']
+  temp: ['case_overview', 'eight', 'service_overview', 'forum']
 }
 
 export default {

src/page/navs/search/index.vue

@@ -118,10 +118,6 @@ export default {
     pageChange () {
 
     },
-    maskTitle (name) {
-      let arr = String(name).split(this.searchTxt)
-      console.log(arr)
-    },
     async getData () {
       let params = {
         sceneType: -1,

src/page/navs/search/item/index.vue

@@ -61,7 +61,7 @@ export default {
   // 监听属性 类似于data概念
   computed: {
     height () {
-      return window.innerHeight - (68 + 145 + 145 - 12) + 'px'
+      return window.innerHeight - (68 + 145 + 145 - 27) + 'px'
     }
   },
   // 监控data中的数据变化
@@ -76,8 +76,6 @@ export default {
       window.open(url.replace('http://', 'https://'), '_blank')
     },
     maskTitle (name) {
-      // let arr = String(name).split(this.searchTxt)
-      // let htmlSearch = `<span>${this.searchTxt}</span>`
       let html = ''
       var arr = name.split(this.searchTxt)
       html = arr.join('<span style="background:#feced4;">' + this.searchTxt + '</span>')

src/page/navs/temp.vue

@@ -4,6 +4,7 @@
       <vcenter>
         <i class="iconfont" :class="item.icon"></i>
         <div style="margin-top:10px;">{{item.name}}</div>
+        <img v-if="item.new" class="icon-new" src="@/assets/images/pro-new.png">
       </vcenter>
     </router-link>
   </div>
@@ -89,6 +90,11 @@ $lHeight: 145px;
     transform: translateX(100px);
     opacity: 0;
 
+    .icon-new{
+      position: absolute;
+      top: 14px;
+      right: 14px;
+    }
     &:hover {
       color: #000;
     }

src/page/service/crumbs.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="crumbs-layout">
+    <ul :style="{marginLeft:(split-178)+'px'}" class="crumbs-con">
+      <li v-for="(item,i) in navs" :key="i" @click="$router.push(item.to)">
+        <span>{{item.name}}</span> <span v-if="i<navs.length-1">></span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+
+let navsKey = {
+  product: {
+    name: '产品手册'
+  },
+  qa: {
+    name: '常见问题',
+    to: {name: 'service_list', params: {id: 'qabefore', active: 'all'}}
+  },
+  app: {
+    name: 'app下载',
+    to: {name: 'service_list', params: {id: 'appbefore', active: 'all'}}
+  },
+  use: {
+    name: '使用教程',
+    to: {name: 'service_list', params: {id: 'usebefore', active: 'all'}}
+  },
+  pro: {
+    name: '4DKankan Pro'
+  },
+  lite: {
+    name: '4DKankan Lite'
+  }
+}
+export default {
+  computed: {
+    ...mapState({
+      split: state => state.ui.navDivision
+    })
+  },
+  data () {
+    return {
+      navs: []
+    }
+  },
+  watch: {
+    '$route.params': {
+      immediate: true,
+      handler: function (newVal) {
+        this.navs = []
+        let {id, active} = newVal
+        let fixId = id.replace('before', '')
+        navsKey[fixId] && this.navs.push(navsKey[fixId])
+        navsKey[active] && this.navs.push(navsKey[active])
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .crumbs-layout{
+    width: 100%;
+    background-color: #ededed;
+    .crumbs-con{
+      font-size: 14px;
+      line-height: 62.5px;
+    }
+    ul{
+      li{
+        display: inline-block;
+        span{
+          padding: 0 4px;
+          &:first-child{
+            cursor: pointer;
+            padding: 0;
+          }
+        }
+      }
+    }
+  }
+
+  @media screen and (max-width: 1600px) {
+    .crumbs-con{
+      margin: 0 auto!important;
+      max-width: 1180px!important;
+      padding: 0 65px!important;
+    }
+  }
+
+</style>

src/page/service/footer.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="footer-layout" :style="{marginLeft:(split-240)+'px'}">
+    <ul class="footer-l">
+      <li v-for="(item,i) in kefu" :key="i">
+        {{item.key}}<span>  : </span>{{item.val}}
+      </li>
+    </ul>
+    <div class="footer-r">
+      <img src="@/assets/images/service_img_ecode@2x.png" alt="">
+      <div>4DKanKan 微信公众号</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+
+export default {
+  computed: {
+    ...mapState({
+      split: state => state.ui.navDivision
+    })
+  },
+  data () {
+    let kefu = [
+      {
+        key: '客服咨询',
+        val: 'ecommerce@4dage.com'
+      }, {
+        key: '销售合作',
+        val: 'sales.cn@4dage.com'
+      }, {
+        key: '市场合作',
+        val: 'marketing.cn@4dage.com'
+      }, {
+        key: '媒体合作',
+        val: 'pr.cn@4dage.com'
+      }, {
+        key: '工作时间',
+        val: '周一至周五 09:30 - 12:30, 14:00 - 18:00 (GMT+8)'
+      }
+    ]
+
+    return {
+      kefu
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .footer-layout{
+    position: relative;
+    max-width: 1180px;
+    margin: 50px auto 72px;
+    overflow: hidden;
+    padding: 50px 50px 50px 65px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-top: #dcdcdc 1px solid;
+    .footer-l{
+      li{
+        font-size: 12px;
+        line-height: 26px;
+        color: #888787;
+        span{
+          text-align: center;
+          width: 46px;
+          display: inline-block;
+        }
+      }
+    }
+    .footer-r{
+      text-align: center;
+      img{
+        width: 145px;
+      }
+      div{
+        font-size: 12px;
+        line-height: 26px;
+      }
+    }
+  }
+
+  @media screen and (max-width: 1600px) {
+    .footer-layout{
+      margin: 50px auto 72px!important;
+    }
+  }
+</style>

src/page/service/index.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="service-layout">
+    <crumbs/>
+    <router-view />
+    <iFooter/>
+  </div>
+</template>
+
+<script>
+import crumbs from './crumbs.vue'
+import footer from './footer.vue'
+
+export default {
+  components: {crumbs, iFooter: footer},
+  data () {
+    return {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/page/service/overview/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <div class="plate01">
+      <img src="@/assets/images/service_img_ban.png" class="banner">
+      <p :style="{left:(split-180)+'px'}">服务与支持</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">
+          <i class="iconfont" :class="item.icon"></i>
+          {{item.name}}
+        </router-link>
+      </div>
+    </div>
+      <iFooter/>
+  </div>
+</template>
+<script>
+import {mapState} from 'vuex'
+import footer from '../footer.vue'
+
+export default {
+  components: {iFooter: footer},
+  computed: {
+    ...mapState({
+      langOverview: state => state.language.home.navs.setting.service_overview,
+      split: state => state.ui.navDivision
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.plate01{
+  position: relative;
+  p{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateY(-50%);
+    font-size: 48px;
+  }
+}
+.plate02 {
+  max-width: 1220px;
+  .navs {
+    padding: 50px 0 0;
+    overflow: hidden;
+
+    a {
+      overflow: hidden;
+      width: 25%;
+      text-decoration: none;
+      border-right: 1px solid #dcdcdc;
+      text-align: center;
+      color: #8c8c8c;
+      padding: 22px;
+      float: left;
+
+      i {
+        display: block;
+        font-size: 78px;
+        margin: 0 auto 20px;
+      }
+
+      &:last-child {
+        border-right: none;
+      }
+    }
+  }
+}
+</style>

src/page/service/support/index.vue

@@ -1,125 +0,0 @@
-<template>
-  <div>
-    <div class="plate01">
-      <img src="@/assets/images/service_img_ban.jpg" class="banner">
-    </div>
-
-    <div class="plate02">
-      <div class="navs">
-        <router-link tag="a" :to="{name: 'service_list', params: {id: 'use'}}">
-          <img src="@/assets/images/service_icon_01@2x.png" alt="">
-          使用教程
-        </router-link>
-        <router-link tag="a" :to="{name: 'service_list', params: {id: 'qa'}}">
-          <img src="@/assets/images/service_icon_02@2x.png" alt="">
-          常见问题
-        </router-link>
-        <router-link tag="a" :to="{name: 'service_down'}">
-          <img src="@/assets/images/service_icon_03@2x.png" alt="">
-          app下载
-        </router-link>
-        <router-link tag="a" :to="{name: 'service_support'}">
-          <img src="@/assets/images/service_icon_04@2x.png" alt="">
-          维修服务
-        </router-link>
-        <router-link tag="a" :to="{name: 'service_list', params: {id: 'clause'}}">
-          <img src="@/assets/images/service_icon_05@2x.png" alt="">
-          网站条款
-        </router-link>
-      </div>
-      <div class="info">
-        <div>
-          <p><span>客服咨询</span>ecommerce@4dage.com</p>
-          <p><span>销售合作</span>sales.cn@4dage.com</p>
-          <p><span>市场合作</span>marketing.cn@4dage.com</p>
-          <p><span>媒体合作</span>pr.cn@4dage.com</p>
-          <p><span>工作时间</span>周一至周五 09:30 - 12:30, 14:00 - 18:00 (GMT+8)</p>
-        </div>
-        <div>
-          <img src="@/assets/images/service_img_ecode@2x.png" alt="">
-          <p>4DKanKan 微信公众号</p>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.plate02 {
-  max-width: 1220px;
-  margin: 0 auto;
-
-  .navs {
-    padding: 50px 0 48px;
-    border-bottom: 1px solid #dcdcdc;
-    overflow: hidden;
-
-    a {
-      overflow: hidden;
-      width: 20%;
-      text-decoration: none;
-      border-right: 1px solid #dcdcdc;
-      text-align: center;
-      color: #8c8c8c;
-      padding: 22px;
-      float: left;
-
-      img {
-        display: block;
-        width: 30%;
-        height: auto;
-        margin: 0 auto 20px;
-      }
-
-      &:last-child {
-        border-right: none;
-      }
-    }
-  }
-
-  .info {
-    padding: 52px 60px;
-    overflow: hidden;
-
-    div:first-child {
-      float: left;
-      font-size: 12px;
-      color: #888787;
-
-      p {
-        $wl: 94px;
-        margin-bottom: 12px;
-        padding-left: $wl;
-        position: relative;
-
-        span {
-          position: absolute;
-          top: 0;
-          left: 0;
-
-          &::after {
-            content: ":";
-            display: inline-block;
-            margin-left: 15px;
-          }
-        }
-      }
-    }
-
-    div:last-child {
-      float: right;
-      img {
-        width: 118px;
-        height: auto;;
-      }
-
-      p {
-        margin-top: 8px;
-        text-align: center;
-        font-size: 12px;
-        color: #2a2a2a;
-      }
-    }
-  }
-}
-</style>

src/page/service/temp/app.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="app-layout">
+    <div class="logo">
+      <img src="@/assets/images/app-logo.png" alt srcset>
+    </div>
+    <div class="info">
+      <h2>
+        <span>{{data.name}}</span>
+        空间相机控制app
+      </h2>
+      <p>4Dkankan 是复刻空间的客户端，能帮助客户操作复刻现实空间的搭配软件</p>
+
+      <div>
+        <p>
+          <b>iOS v0.5.21</b>
+          <br>2018-10-17
+          <br>1.修复部分情况效果不一致情况；
+          <br>2.常规维护与更新；
+          <br>
+        </p>
+        <p>
+          <b>Android v1.0.6</b>
+          <br>2018-10-29
+          <br>常规性能优化与bug修复。
+          <br>
+        </p>
+      </div>
+
+      <div>
+        <p>
+          <a class="button">
+            <img src="@/assets/images/service_icon_ios@2x.png">
+            <span>App Store</span>
+          </a>
+        </p>
+        <p>
+          <a class="button">
+            <img src="@/assets/images/service_icon_android@2x.png">
+            <span>Android</span>
+          </a>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['data']
+}
+</script>
+
+<style lang="scss" scoped>
+.app-layout {
+  max-width: 1170px;
+  margin: 52px auto 78px;
+
+  .logo {
+    float: left;
+  }
+
+  .info {
+    width: 750px;
+    max-width: 100%;
+    margin-left: 180px;
+    > h2 {
+      font-size: 24px;
+      color: #000000;
+      margin-bottom: 20px;
+      line-height: 1.4em;
+
+      span {
+        color: #aaaaaa;
+        display: block;
+      }
+    }
+
+    > p {
+      color: #373737;
+    }
+
+    > div {
+      margin-top: 50px;
+      overflow: hidden;
+
+      p {
+        color: #858585;
+        line-height: 26px;
+        width: 266px;
+        float: left;
+
+        &:first-child .button {
+          width: 150px;
+          border-radius: 5px;
+          background-color: #2d2d2d;
+          text-align: center;
+        }
+
+        &:last-child .button {
+          text-align: center;
+          width: 150px;
+          border-radius: 5px;
+          background-color: #7fc651;
+        }
+      }
+
+      .button {
+        padding: 8px 12px;
+
+        img {
+          width: 30px;
+          height: auto;
+          vertical-align: middle;
+        }
+
+        span {
+          display: inline-block;
+          vertical-align: middle;
+        }
+      }
+    }
+  }
+}
+</style>

src/page/service/temp/before.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="before-layout">
+    <div @click="goto('lite')">
+      <img src="@/assets/images/t_product.png" alt>
+      <div>Lite</div>
+    </div>
+    <div @click="goto('pro')">
+      <img src="@/assets/images/banner_pro.png" alt>
+      <div>Pro</div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ['data'],
+  methods: {
+    goto (item) {
+      this.$router.push({name: 'service_list', params: {id: this.data.to, active: item}})
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.before-layout {
+  width: 1280px;
+  margin: 80px auto 150px;
+  &>div {
+    cursor: pointer;
+    text-align: center;
+    display: inline-block;
+    img{
+      width: 55px;
+      margin-bottom: 40px;
+    }
+    &:first-of-type{
+      margin-right: 200px;
+      img{
+        width: 45px;
+      }
+    }
+  }
+}
+</style>

src/page/service/temp/index.vue

@@ -1,53 +1,56 @@
 <template>
-  <div class="service-layout">
-    <lselect :options="navs" :selected="navs[0]" class="select" :class="{oy: navs.length > 15}" @change="nav => active = nav" />
-
-    <div>
-      <component :is="active.cp" :data="active" />
-    </div>
+  <div class="temp-layout" >
+    <component class="fix-layout" :style="{marginLeft:(split-178)+'px'}" :is="active.isbefore?'ibefore':active.cp" :data='active'/>
   </div>
 </template>
 
 <script>
 import lselect from '@/components/lselect'
+import {mapState} from 'vuex'
 import iuse from './use'
+import iapp from './app'
+import ibefore from './before'
 import iqa from './qa'
-import iclause from './clause'
+import iproduct from './product'
 import data from './config'
 
 export default {
+  computed: {
+    ...mapState({
+      split: state => state.ui.navDivision
+    })
+  },
   data () {
-    let navs = data[this.$route.params.id]
-
-    return {navs, active: ''}
+    return {active: ''}
   },
   watch: {
-    '$route.params.id': function (newVal) {
-      this.navs = data[newVal]
+    '$route.params': {
+      immediate: true,
+      handler: function (newVal) {
+        if (newVal.active && newVal.active !== 'all') {
+          this.active = data[newVal.id][newVal.active]
+        } else {
+          this.active = data[newVal.id]
+        }
+      }
     }
   },
-  components: {lselect, iuse, iqa, iclause}
+  components: {lselect, ibefore, iuse, iapp, iproduct, iqa},
+  mounted () {
+  }
 }
 </script>
 
 <style lang="scss" scoped>
-.service-layout {
-  position: relative;
-  $lw: 220px;
-  max-width: 1310px;
-  margin: 50px auto 72px;
-  overflow: hidden;
-  padding-left: $lw;
-  padding-right: 10px;
-  box-sizing: border-box;
-  min-height: 650px;
-
-  .select {
-    width: $lw - 10px;
-    position: absolute;
-    top: 0;
-    left: 10px;
-    max-height: 100%;
+  .temp-layout{
+    min-height: 350px;
+    overflow: hidden;
+  }
+   @media screen and (max-width: 1600px) {
+    .fix-layout{
+      margin-left: auto!important;
+      margin-right: auto!important;
+      max-width: 1050px!important;
+    }
   }
-}
 </style>

src/page/service/temp/product.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="product-layout">
+    <ul class="t-body">
+      <li class="t-header">
+        <span>文件名称</span>
+        <span>类型</span>
+        <span>操作</span>
+      </li>
+      <li v-for="(item,i ) in downloads" :key="i">
+        <span><strong class="file-type">{{item.fileType}}</strong>{{item.name}}</span>
+        <span>{{item.type}}</span>
+        <span><div>{{item.oprea}}</div></span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    let downloads = [{
+      fileType: '[PDF]',
+      name: '四维看看 Lite使用说明书',
+      type: '产品说明书',
+      oprea: '下载'
+    }, {
+      fileType: '[PDF]',
+      name: '四维看看 Pro使用说明书',
+      type: '产品说明书',
+      oprea: '下载'
+    }]
+    return {
+      downloads
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.product-layout {
+  text-align: center;
+  .t-body{
+    max-width: 1060px;
+    margin: 75px 0;
+    border: 1px solid #dedede;
+    .t-header{
+      font-size: 20px;
+      font-weight: 700;
+      background-color: #ededed;
+      span{
+        &:first-of-type{
+          flex:7;
+          text-align: center;
+          padding-left: 0;
+        }
+      }
+    }
+    li{
+      display: flex;
+      justify-content: space-between;
+      font-size: 16px;
+      span{
+        text-align: center;
+        flex: 1;
+        line-height: 62.5px;
+        border-right: 1px solid #dedede;
+        border-bottom: 1px solid #dedede;
+        vertical-align: middle;
+
+        div{
+          display:inline-block;
+          background-color: #949494;
+          color: #fff;
+          height: 45px;
+          line-height: 45px;
+          width: 130px;
+          cursor: pointer;
+        }
+        &:last-of-type{
+          flex:2;
+          border-right: 0;
+        }
+        &:first-of-type{
+          flex:7;
+          text-align: left;
+          strong{
+            margin-left: 60px;
+          }
+        }
+
+      }
+      &:last-of-type{
+        span{
+          border-bottom: 0;
+        }
+      }
+    }
+  }
+}
+
+</style>

src/page/service/temp/qa.vue

@@ -1,23 +1,51 @@
 <template>
-  <div class="qa-layout">
-    <div v-for="(item, key) in data.childs" :key="key" @click="active = item" :class="{active: active === item}">
-      <h4>{{key+1}}. {{item.title}}</h4>
+ <div class="qa-layout">
+  <lselect :options="navs" :selected="navs[0]" class="select" :class="{oy: navs.length > 15}" @change="nav => active = nav" />
+  <div class="qa-con">
+    <div v-for="(item, key) in active.childs" :key="key" @click="sub = item" :class="{active: sub === item}">
+      <h4>Q. {{item.title}}</h4>
       <p v-html="item.content"></p>
     </div>
   </div>
+ </div>
 </template>
 
 <script>
+import lselect from '@/components/lselect'
+
 export default {
+  components: {lselect},
   props: ['data'],
   data () {
-    return {active: null}
+    return {
+      sub: '',
+      navs: this.data.data,
+      active: this.data.data[0]
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
 .qa-layout {
+  position: relative;
+  $lw: 220px;
+  max-width: 1310px;
+  margin: 50px auto 72px;
+  overflow: hidden;
+  padding-left: $lw + 10px;
+  padding-right: 10px;
+  box-sizing: border-box;
+  min-height: 650px;
+
+  .select {
+    width: $lw;
+    position: absolute;
+    top: 0;
+    left: 0;
+    max-height: 100%;
+  }
+  .qa-con {
   padding: 0 40px;
 
   div {
@@ -37,9 +65,9 @@ export default {
     p {
       color: #858585;
       font-weight: 300;
-      line-height: 1.5em;
+      line-height: 40px;
       margin-top: 10px;
-      padding-left: 2em;
+      padding-left: 16px;
       max-height: 0;
       overflow: hidden;
       transition: max-height .3s linear;
@@ -51,9 +79,14 @@ export default {
       }
 
       p {
-        max-height: 84px;
+        max-height: 220px;
       }
     }
   }
 }
+  .img{
+    margin-top: 40px;
+  }
+}
+
 </style>

src/page/service/temp/use.vue

@@ -1,21 +1,47 @@
 <template>
   <div class="use-layout">
-    <img :src="data.cover" alt="">
+    <lselect :options="navs" :selected="navs[0]" class="select" :class="{oy: navs.length > 15}" @change="nav => active = nav" />
+      <div>
+        <img class="img" :src="active.cover" alt="">
+      </div>
   </div>
 </template>
 
 <script>
+import lselect from '@/components/lselect'
 export default {
-  props: ['data']
+  props: ['data'],
+  data () {
+    return {
+      navs: this.data.data,
+      active: ''
+    }
+  },
+  components: {lselect}
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .use-layout {
-  text-align: center;
-}
+  position: relative;
+  $lw: 220px;
+  max-width: 1310px;
+  margin: 50px auto 72px;
+  overflow: hidden;
+  padding-left: $lw + 10px;
+  padding-right: 10px;
+  box-sizing: border-box;
+  min-height: 650px;
 
-.use-layout img {
-  max-width: 100%;
+  .select {
+    width: $lw;
+    position: absolute;
+    top: 0;
+    left: 0;
+    max-height: 100%;
+  }
+  .img{
+    margin-top: 40px;
+  }
 }
 </style>

src/router/index.js

@@ -52,19 +52,41 @@ let router = new Router({
       component: () => import('@/page/purchase')
     },
     {
-      path: '/service/down',
-      name: 'service_down',
-      component: () => import('@/page/service/down')
+      path: '/manage',
+      name: 'manage',
+      component: () => import('@/page/manage')
     },
+    // {
+    //   path: '/service/down',
+    //   name: 'service_down',
+    //   component: () => import('@/page/service/down')
+    // },
     {
-      path: '/service/support',
-      name: 'service_support',
-      component: () => import('@/page/service/support')
+      path: '/service/overview',
+      name: 'service_overview',
+      component: () => import('@/page/service/overview')
     },
     {
-      path: '/service/:id',
-      name: 'service_list',
-      component: () => import('@/page/service/temp')
+      path: '/cases/overview',
+      name: 'case_overview',
+      component: () => import('@/page/cases/overview')
+    },
+    // {
+    //   path: '/service/:id',
+    //   name: 'service_list',
+    //   component: () => import('@/page/service/temp')
+    // },
+    {
+      path: '/service/',
+      name: 'service',
+      children: [
+        {
+          path: ':id/:active',
+          name: 'service_list',
+          component: () => import('@/page/service/temp')
+        }
+      ],
+      component: () => import('@/page/service')
     },
     {
       path: '/cases/:id',

src/store/language/home_cn.js

@@ -6,56 +6,64 @@ export default {
   title: '中文',
   navs: {
     setting: {
-      'product': [
+      'eight': [
         {
           icon: 'icon-icon_cam_lite',
-          name: '4DKankan Lite',
+          name: '四维看看 Lite',
           to: {name: 'binocular'}
         }, {
           icon: 'icon-icon_cam_pro',
-          name: '4DKankan Pro',
+          name: '四维看看 Pro',
+          new: true,
           to: {name: 'eight'}
         }
       ],
-      'technology': [
-        {
-          icon: 'icon-tech_space_location',
-          name: '空间定位',
-          to: {name: 'location', query: {id: 'kjdw'}}
-        }, {
-          icon: 'icon-tech_space_modeling',
-          name: '空间建模',
-          to: {name: 'location', query: {id: 'kjjm'}}
-        }, {
-          icon: 'icon-tech_space_display',
-          name: '空间展示',
-          to: {name: 'location', query: {id: 'kjzs'}}
-        }
-      ],
-      // 'service': [
+      // 'technology': [
       //   {
-      //     icon: 'icon-tutorial',
-      //     name: '使用教程',
-      //     to: {name: 'service_list', params: {id: 'use'}}
+      //     icon: 'icon-tech_space_location',
+      //     name: '空间定位',
+      //     to: {name: 'location', query: {id: 'kjdw'}}
       //   }, {
-      //     icon: 'icon-faq',
-      //     name: '常见问题',
-      //     to: {name: 'service_list', params: {id: 'qa'}}
+      //     icon: 'icon-tech_space_modeling',
+      //     name: '空间建模',
+      //     to: {name: 'location', query: {id: 'kjjm'}}
       //   }, {
-      //     icon: 'icon-appdown',
-      //     name: 'app下载',
-      //     to: {name: 'service_down'}
-      //   }, {
-      //     icon: 'icon-service',
-      //     name: '维修服务',
-      //     to: {name: 'service_support'}
-      //   }, {
-      //     icon: 'icon-protocol',
-      //     name: '网站条款',
-      //     to: {name: 'service_list', params: {id: 'clause'}}
+      //     icon: 'icon-tech_space_display',
+      //     name: '空间展示',
+      //     to: {name: 'location', query: {id: 'kjzs'}}
       //   }
       // ],
-      'case': [
+      'service_overview': [
+        {
+          icon: 'icon-tutorial',
+          name: '使用教程',
+          to: {name: 'service_list', params: {id: 'usebefore', active: 'all'}}
+        },
+        {
+          icon: 'icon-faq',
+          name: '常见问题',
+          to: {name: 'service_list', params: {id: 'qabefore', active: 'all'}}
+        }, {
+          icon: 'icon-appdown',
+          name: 'app下载',
+          to: {name: 'service_list', params: {id: 'appbefore', active: 'all'}}
+        },
+        {
+          icon: 'icon-sysc',
+          name: '产品手册',
+          to: {name: 'service_list', params: {id: 'product', active: 'all'}}
+        }
+        // {
+        //   icon: 'icon-service',
+        //   name: '维修服务',
+        //   to: {name: 'service_support'}
+        // }, {
+        //   icon: 'icon-protocol',
+        //   name: '网站条款',
+        //   to: {name: 'service_list', params: {id: 'clause'}}
+        // }
+      ],
+      'case_overview': [
         {
           icon: 'icon-industry_realty',
           name: '房地产',
@@ -99,33 +107,33 @@ export default {
     }
   },
   headers: [
-    {text: '产品购买', cp: 'product'},
-    {text: '核心技术', cp: 'technology'},
-    {text: '行业应用', cp: 'case'},
-    // {text: '服务支持', cp: 'service'},
+    {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: '模拟人眼的双球幕SFM技术，采集真实空间信息，测量空间数据',
+        dec: '人工智能空间定位算法，采集真实空间信息，测量空间数据。',
         eng:
           'The bi-spherical SfM technology that simulates human eyes captures real space information and measures space data.'
       },
       modeling: {
         title: '空间建模',
-        dec: '根据二维图像自动计算三维数字模型，5分钟生成，无需人工干预',
+        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°畅游3D实景。',
+        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.'
       }
@@ -138,6 +146,7 @@ export default {
       ],
       space: {
         title: '每个空间，都值得被记录',
+        sub: '迄今为止四维看看记录的空间数量',
         nums: [
           {
             text: '文博',
@@ -208,6 +217,13 @@ export default {
       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日',
@@ -254,11 +270,11 @@ export default {
   },
   binocular: {
     introduce: {
-      title: ['4DKankan Lite', '全球首款 消费级3D空间相机'],
+      title: ['四维看看 Lite', '全球首款 消费级3D空间相机'],
       price: ['￥4999', '起'],
       dec: [
-        '安霸H2V95专业级芯片，1600万像素双鱼眼',
-        'Sony IMX 206图像传感器，超爽握感轻便随行'
+        '消费级的空间建模神器，10分钟复刻',
+        '空间，720°沉浸式实景漫游体验'
       ],
       btn: '立即购买',
       subTitle: '3D 4K实景复刻神器',
@@ -307,8 +323,8 @@ export default {
     guide: [
       {
         title: [
-          '身临其境，自动导览',
-          '同步录制漫游和声音，带你声临其境，享你所享'
+          '视听导览，身临其境',
+          '制定个性化路线并录制语音导览，带给观众如临现场的视听体验。'
         ]
       },
       {
@@ -327,12 +343,12 @@ export default {
       dec: '由多达794个精密元件组装而成，超细腻喷涂工艺'
     },
     parmas: {
-      name: '4DKankan Lite 详细参数'
+      name: '四维看看 Lite 详细参数'
     }
   },
   eight: {
     introduce: {
-      title: ['4DKankan Pro', '专业精准建模，高效复刻空间'],
+      title: ['四维看看 Pro', '专业精准建模，高效复刻空间'],
       price: ['￥4999', '起'],
       dec: [
         '720°沉浸式实景漫游，10K高清画质',
@@ -355,7 +371,7 @@ export default {
         },
         {
           fontImg: 'icon-sfm',
-          title: '双球幕SFM空间定位技术'
+          title: '人工智能空间定位技术'
         },
         {
           fontImg: 'icon-3d',
@@ -363,7 +379,7 @@ export default {
         },
         {
           fontImg: 'icon-dianlang',
-          title: '四小时连续拍摄续航电量'
+          title: '支持四小时连续拍摄'
         },
         {
           fontImg: 'icon-bianji',
@@ -380,10 +396,10 @@ export default {
       sub: ['快速编辑和分享你的互动式视频', '分享你的空间故事']
     },
     definition: {
-      title: '10K高清画质，720度无死角展现，实景3D尽在细节中',
+      title: '10K高清画质，720度无死角展现，捕捉空间的每个细节',
       top: {
         dec:
-          ['四维看看Pro3D空间相机全方位记录方向、角度、体积等空间立体信息，', '生成实景数字3D模型，让你随时随地感受如临现场的在线漫游体验。', '10K清晰度，可4倍放大画面，不错过任何细节。'],
+          ['四维看看Pro 3D空间相机全方位记录方向、角度、体积等空间立体信息，', '生成实景数字3D模型，让你随时随地感受如临现场的在线漫游体验。', '10K清晰度，可4倍放大画面，不错过任何细节。'],
         params: [
           '1/2.3 12M CMOS感应器x2(输出像素数等同于 14M)',
           '30fps',
@@ -429,17 +445,17 @@ export default {
         title: ['SONY CMOS 图像传感器']
       },
       {
-        title: ['方寸之间，尽显美学张力', '独具匠心的细节设计']
+        title: ['独具匠心的细节设计']
       }
     ],
     feature: {
       definition: {
-        title: '图片清晰度',
+        title: '图像清晰度',
         case1: {
           content: baseUrl + 'video/8k.mp4',
           back: baseUrl + 'video/4k.mp4',
           lTxt: '普通',
-          rTxt: '4DKankan Pro',
+          rTxt: '四维看看 Pro',
           lMask: '4K高清',
           rMask: '10K高清图像，4倍放大'
         }
@@ -455,27 +471,27 @@ export default {
           content: baseUrl + 'video/qingxi.mp4',
           back: baseUrl + 'video/moku.mp4',
           lTxt: '普通',
-          rTxt: '4DKankan Pro'
+          rTxt: '四维看看 Pro'
         }
       },
       manyou: {
         title: ['模型结构', '更极致的空间还原度'],
         left: '普通',
-        right: '4DKankan Pro'
+        right: '四维看看 Pro'
       },
       endurance: {
         title: '续航时间'
       }
     },
     parmas: {
-      name: '4DKankan Pro 详细参数'
+      name: '四维看看 Pro 详细参数'
     }
   },
   about: {
     intro: [
       '四维看看由四维时代团队独立自主研发。作为国内首家3D数字化重建技术中心，四维时代在国际上首创的微米级三维数字化精细扫描技术，较传统三维建模方式在效率上提高200倍以上，远超美国Adobe公司的厘米级精度。目前世界上能做到这个精度的只有两家，一家是四维时代，另一家是MIT计算视觉实验室。',
       '2017年6月，四维时代与德国人工智能研究中心（DFKI）在中德两国总理见证下正式签订《中德人工智能研究院项目》，并成立中德人工智能研究院，利用中德两国技术优势，推进人工智能视觉技术的深入和应用。',
-      '2018年5月，四维时代成功将领先的三维建模技术民用化，推出全球首款消费级3D相机四维看看。'
+      '2018年5月，四维时代成功将领先的三维建模技术民用化，推出专业八目3D相机四维看看Pro。当月，该产品在德国柏林人工智能大会上亮相。'
     ],
     events: {
       title: '团队大事记',
@@ -520,6 +536,7 @@ export default {
           year: '2019年',
           txt: [
             '4月 为德国陶瓷博物馆展馆及馆藏进行三维数字化重建，并开发数字博物馆App。',
+            '5月 四维看看Pro在德国柏林人工智能大会上亮相。',
             '6月 推出高精度消费级3D相机四维看看Pro。'
           ]
         }
@@ -537,24 +554,24 @@ export default {
       {
         title: '客户服务',
         class: 'khfw',
-        content: ['客服/售后：4006698025', 'Email：service@4dage.com']
+        content: ['客服/售后：4006698025', '电子邮件：service@4dage.com']
       },
       {
         title: '媒体垂询',
         class: 'mtcx',
-        content: ['热线：0756-6996790', 'Email：pr@4dage.com']
+        content: ['热线：0756-6996790', '电子邮件：pr@4dage.com']
       },
       {
         title: '业务合作',
         class: 'ywhz',
-        content: ['热线：0756-6996796/6996791', 'Email：sales@4dage.com']
+        content: ['热线：0756-6996796/6996791', '电子邮件：sales@4dage.com']
       }
     ]
   },
   coreTech: {
     kjdw: {
       title: '空间定位',
-      dec: '模拟人眼的双球幕SFM技术，采集真实空间信息测量空间数据。通过提取图像特征点，再进行特征点匹配。计算匹配点在空间中的坐标，从而对空间中相机所在的位置进行定位。',
+      dec: '人工智能空间定位技术，提取并匹配图像中的特征点，计算点位的空间坐标，从而判定相机的位置。',
       points: [
         {
           posi: {
@@ -601,7 +618,7 @@ export default {
       ],
       ability: {
         name: '空间定位的创新技术能力',
-        sub: '我们采用全新的算法，极大的提高了关键帧特征点的匹配数目，为后端增加足够多的约束成本，尽可能的减少了定位丢失的情况，基于自适应分段的集束调整，将长序列分成若干序列进行后端优化，大大加快优化速度',
+        sub: '全新算法极大增加了关键帧特征点的匹配数目，把定位丢失的情况降至最低。另外，基于自适应分段的集束调整，把长序列分成若干序列在后端优化，改善了优化效率。',
         app: [
           {
             icon: {
@@ -613,20 +630,20 @@ export default {
             icon: {
               backgroundImage: `url(${require('@/assets/images/img_core_app02.png')})`
             },
-            sub: '立体SFM与环闭合配合运作，<br/>使相机几何校准更加快速稳定'
+            sub: '通过算法计算出准确的相机位姿，<br/>捕捉所有色彩信息以及部分深度信息。'
           },
           {
             icon: {
               backgroundImage: `url(${require('@/assets/images/img_core_app03.png')})`
             },
-            sub: '通过立体SFM计算出准确的位姿捕捉<br/>所有色彩信息及部分深度信息'
+            sub: '人工智能算法与环闭合配合运作，<br/>使相机几何校准更加快速稳定。'
           }
         ]
       }
     },
     kjjm: {
       title: '空间建模',
-      dec: ['自动化高精度三维数字建模，', '基于二维图像生成三维模型，数据自动化分析并处理无', '需人工干预，从上传到生成结果，只需要5-10分钟（上传数据大小决定计算时间）'],
+      dec: ['自动化高精度三维数字建模技术，', '基于二维图像，通过点云计算生成空间三维模型，', '无需人工干预，从上传到生成结果仅需要5-10分钟。'],
       chars: [
         {
           icon: {
@@ -634,7 +651,7 @@ export default {
           },
           title: '生理结构',
           sub:
-            '输入由SfM提取的稀疏点云和相机<br/>位姿数据，计算自由空间和核心自由空间。'
+            '输入稀疏点云和相机位姿<br/>数据，计算自由空间和核心自由空间。'
         },
         {
           icon: {
@@ -654,19 +671,19 @@ export default {
     },
     kjzs: {
       title: '空间展示',
-      sub: ['空间展示内容的多样性，有空间热点（包含多种媒体格式，文字图片、超链接、视频、音频和三维模型等）、', '测距信息、自动导览，将一个空间以多种形式展示给用户。'],
+      sub: ['计算生成的结果通过WebGL呈现交互式3D模型，', '模型中可添加图文、视频、音频、超链接等多种媒体格式，', '并可显示测距信息，或者制定自动导览，通过数字三维空间承载丰富的信息。'],
       sdkz: {
-        name: '与博物馆-四维看展',
+        name: '在线漫游博物馆 - 四维看展',
         sub: '四维看展是国内首家集文字、图片、语音、在线场景漫游于一体的线上艺术空间。打开小程序即可浏览全球最新最全的艺术资讯，实时了解最热门的文博动态； 足不出户就能逛遍艺术展厅，720°轻松鉴赏艺术作品。它是一座永不落幕的美术馆，带你踏上数字艺术之旅。'
       },
       zfb: {
-        name: '与房地产（看房、装修）-指房宝',
-        sub: '指房宝平台是致力于提供看房，装企、中介自助式VR实景的采集、制作、发布的管理平台，通过我们的技术赋予传统房地产行业全新的看房体验，运用专业的人工智能空间技术结合不同业务场景，深度融合助力行业APP'
+        name: '3D实景看房 - 指房宝',
+        sub: '指房宝平台覆盖房产中介、装修企业的行业需求，应用四维看看展示技术推出App，为传统房地产行业提供全新的数字3D实景看房体验，应用于租房、买房、装修建房等多样的业务场景。'
       }
     },
     jianrong: {
-      name: '兼容多端多平台展示',
-      sub: '包括移动网页端、嵌入小程序，APP端，以及支持AR眼镜等硬件设备',
+      name: '兼容多平台、多终端',
+      sub: '可通过移动网页端、嵌入小程序、APP端进行展示，并支持在VR眼镜等硬件设备上观看。',
       terminal: [
         {
           txt: 'VR端',

src/store/language/index.js

@@ -9,12 +9,14 @@ const en = {
   home: enLang
 }
 
-let languageObj = ((localStorage && localStorage.getItem('language')) || 'cn') === 'cn' ? cn : en
+let current = (localStorage && localStorage.getItem('language')) || 'cn'
+
+let languageObj = current === 'cn' ? cn : en
 
 export default {
   state: {
     ...languageObj,
-    current: 'cn'
+    current: current
   },
   mutations: {
     change_language (state, language) {