修改number组件

src/assets/font/demo_index.html

@@ -222,6 +222,24 @@
                 <div class="code-name">&amp;#xe642;</div>
               </li>
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe645;</span>
+                <div class="name">空间展示</div>
+                <div class="code-name">&amp;#xe645;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe646;</span>
+                <div class="name">空间建模</div>
+                <div class="code-name">&amp;#xe646;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe648;</span>
+                <div class="name">空间定位</div>
+                <div class="code-name">&amp;#xe648;</div>
+              </li>
+          
           </ul>
           <div class="article markdown">
           <h2 id="unicode-">Unicode 引用</h2>
@@ -560,6 +578,33 @@
             </div>
           </li>
           
+          <li class="dib">
+            <span class="icon iconfont icon-tech_space_display"></span>
+            <div class="name">
+              空间展示
+            </div>
+            <div class="code-name">.icon-tech_space_display
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tech_space_modeling"></span>
+            <div class="name">
+              空间建模
+            </div>
+            <div class="code-name">.icon-tech_space_modeling
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tech_space_location"></span>
+            <div class="name">
+              空间定位
+            </div>
+            <div class="code-name">.icon-tech_space_location
+            </div>
+          </li>
+          
         </ul>
         <div class="article markdown">
         <h2 id="font-class-">font-class 引用</h2>
@@ -845,6 +890,30 @@
                 <div class="code-name">#icon-tutorial</div>
             </li>
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tech_space_display"></use>
+                </svg>
+                <div class="name">空间展示</div>
+                <div class="code-name">#icon-tech_space_display</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tech_space_modeling"></use>
+                </svg>
+                <div class="name">空间建模</div>
+                <div class="code-name">#icon-tech_space_modeling</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tech_space_location"></use>
+                </svg>
+                <div class="name">空间定位</div>
+                <div class="code-name">#icon-tech_space_location</div>
+            </li>
+          
           </ul>
           <div class="article markdown">
           <h2 id="symbol-">Symbol 引用</h2>

src/assets/style/reset.scss

@@ -19,4 +19,29 @@ 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{background:#fff;}
 *{box-sizing: border-box}
-a{text-decoration: none;}
+a{text-decoration: none;}
+
+::-webkit-scrollbar-track-piece {
+  background-color: #fff;
+  -webkit-border-radius: 0;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+  height: 50px;
+  background-color: #999;
+  -webkit-border-radius: 4px;
+  outline: 2px solid #fff;
+  outline-offset: -2px;
+  border: 2px solid #fff;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  height: 50px;
+  background-color: #9f9f9f;
+  -webkit-border-radius: 4px;
+}

src/components/number/index.vue

@@ -1,7 +1,5 @@
 <template>
-  <span :company="after">
-    {{icount}}
-  </span>
+  <span :company="after">{{icount}}</span>
 </template>
 
 <script>
@@ -14,8 +12,14 @@ export default {
       default: 0,
       type: Number
     },
-    start: {
+    startCount: {
+      default: null
+    },
+    startUp: {
       default: true
+    },
+    type: {
+      default: 'up'
     }
   },
   data () {
@@ -24,30 +28,61 @@ export default {
     }
   },
   mounted () {
-    var countStr = this.count.toString()
-    var startNum = Number(countStr[0] - 1 + countStr.slice(1))
-
-    if (this.count - startNum < 100) {
-      startNum = 0
+    if (this.type === 'up') {
+      this.upAttr()
+    } else {
+      this.downAttr()
     }
-
-    this.endNum = this.icount
-    this.icount = startNum
-    this.interval = Math.ceil((this.endNum - startNum) / 100)
     this.excessive = this.excessive.bind(this)
-    this.start && this.excessive()
+    this.startUp && this.excessive()
   },
   methods: {
+    upAttr () {
+      let startNum
+      if (this.startCount === null) {
+        let countStr = this.count.toString()
+        startNum = Number(countStr[0] - 1 + countStr.slice(1))
+
+        if (this.count - startNum < 100) {
+          startNum = 0
+        }
+      } else {
+        startNum = this.startCount
+      }
+
+      this.endNum = this.icount
+      this.icount = startNum
+      this.interval = Math.ceil((this.endNum - startNum) / 100)
+    },
+    downAttr () {
+      let startNum
+      if (this.startCount === null) {
+        let countStr = this.count.toString()
+        startNum = Number(Number(countStr[0]) + 1 + countStr.slice(1))
+
+        if (startNum - this.count < 100) {
+          startNum = this.count + 100
+        }
+      } else {
+        startNum = this.startCount
+      }
+
+      this.endNum = this.icount
+      this.icount = startNum
+      this.interval = Math.ceil((this.endNum - startNum) / 100)
+    },
     excessive () {
-      if (this.icount === this.endNum) {
-        return
+      if ((this.interval > 0 && this.icount + this.interval >= this.endNum) ||
+        (this.interval < 0 && this.icount + this.interval <= this.endNum)) {
+        return this.icount = this.endNum
       }
+
       this.icount += this.interval
       requestAnimationFrame(this.excessive)
     }
   },
   watch: {
-    start (newVal) {
+    startUp (newVal) {
       newVal && this.excessive()
     }
   }

src/components/vcenter/index.vue

@@ -9,7 +9,7 @@
 </template>
 
 <style scoped>
-table {
+table, td {
   width: 100%;
   height: 100%;
 }

src/page/cases/app/index.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="app-layout">
+    <div class="app-item">
+      <div class="app-head">
+        <div :style="{width: split + 'px'}">
+          <img src="@/assets/images/app-label1.jpg" >
+        </div>
+        <div>
+          <h1>app</h1>
+        </div>
+      </div>
+    </div>
+
+    <div class="app-item">
+      <div class="app-banner">
+        <img src="@/assets/images/app-banner1.jpg" alt="">
+      </div>
+      <div class="app-head">
+        <div :style="{width: split + 'px'}">
+          <img src="@/assets/images/app-label2.jpg" >
+        </div>
+        <div>
+          <h2>四维看展介绍</h2>
+          <p>将扫描件上传到云端，强大的算法处理您 的数据，几分钟后之后您就可以随时随地访问 您的拍摄空间，使用便捷易携的四维看看空间相机 扫描任何地方。 速度快且精准使用便捷易携的四何地方非常 简单，完全自动化 副本</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="app-item">
+      <div class="app-banner">
+        <img src="@/assets/images/app-banner2.jpg" alt="">
+      </div>
+      <div class="app-head">
+        <div :style="{width: split + 'px'}">
+          <img src="@/assets/images/app-label3.jpg" >
+        </div>
+        <div>
+          <h2>指房宝介绍</h2>
+          <p>将扫描件上传到云端，强大的算法处理您 的数据，几分钟后之后您就可以随时随地访问 您的拍摄空间，使用便捷易携的四维看看空间相机 扫描任何地方。 速度快且精准使用便捷易携的四何地方非常 简单，完全自动化 副本</p>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+
+export default {
+  computed: {
+    ...mapState({
+      split: state => state.ui.navDivision
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './style.scss';
+</style>

src/page/cases/app/style.scss

@@ -0,0 +1,53 @@
+.app-item {
+  margin: 40px 0 110px;
+  &:first-child {
+    margin-bottom: 40px;
+  }
+
+  .app-banner {
+    margin-bottom: 40px;
+    background: #e7e7e7;
+
+    img {
+      width: 100%;
+      max-width: 1903px;
+    }
+  }
+
+  .app-head {
+    display: flex;
+
+    div:first-of-type {
+      flex: 0 0 auto;
+      text-align: right;
+      padding-right: 20px;
+    }
+
+    div:last-of-type {
+      flex: 1;
+      padding-left: 70px;
+      max-width: 600px;
+      color: #141414;
+
+      h1 {
+        height: 100%;
+        font-size: 48px;
+        font-weight: 500;
+        display: flex;
+        align-items: center;
+      }
+
+      h2 {
+        font-size: 24px;
+      }
+
+      p {
+        font-size: 18px;
+        color: #484747;
+        line-height: 1.5;
+        margin-top: 24px;
+      }
+    }
+  }
+
+}

src/page/home2/index.vue

@@ -68,7 +68,7 @@
         <div class="item item-2">
           <div class="media iframe">
             <div>
-              <iframe src="http://www.4dmodel.com/SuperTwo/index.html?m=158&version=one" frameborder="0"></iframe>
+              <!-- <iframe src="http://www.4dmodel.com/SuperTwo/index.html?m=158&version=one" frameborder="0"></iframe> -->
             </div>
           </div>
           <div class="content">
@@ -133,7 +133,7 @@
         <h2 class="b-title">每个空间，都值得被记录</h2>
         <div class="count-group">
           <div v-for="(item, i) in countGroup" :key="i">
-            <number after="%" :count="item.count" :start="startNumCount"></number>
+            <number after="%" :count="item.count" :startUp="startNumCount"></number>
             <p v-html="item.text"></p>
           </div>
         </div>
@@ -253,11 +253,11 @@ export default {
       let ny = getPosition(this.$refs.numcount).y + this.$refs.numcount.offsetHeight
       let sy = getPosition(this.$refs.slide).y + this.$refs.slide.offsetHeight
 
-      if (window.innerHeight + window.scrollY > ny) {
+      if (window.innerHeight + (window.scrollY || window.pageYOffset) > ny) {
         this.startNumCount = true
       }
 
-      if (window.innerHeight + window.scrollY > sy) {
+      if (window.innerHeight + (window.scrollY || window.pageYOffset) > sy) {
         this.slideActive = true
       }
 

src/page/home2/style.scss

@@ -335,7 +335,6 @@
     .slide-l {
       transition: transform 1s ease-in-out;
       transform: translateX(-100%);
-      overflow: hidden;
 
       &.actice {
         transform: translateX(0)

src/page/layout/header/index.vue

@@ -2,8 +2,9 @@
   <div class="header-layout">
     <div class="logo-layout">
       <router-link :to="{name: 'home'}" class="logo">
-        <i class="iconfont icon-logo_a"></i>
-        <i class="iconfont icon-logo_b"></i>
+        <vcenter>
+          <img src="@/assets/images/logo.png" alt="">
+        </vcenter>
       </router-link>
     </div>
     <div class="menu">
@@ -56,12 +57,12 @@ export default {
   data () {
     return {
       height: 0,
-      hoverCp: null,
+      hoverCp: 'product',
       overb: false,
       active: true,
       navs: [
         {text: '产品购买', cp: 'product'},
-        {text: '核心技术', cp: 'videos'},
+        {text: '核心技术', cp: 'technology'},
         {text: '行业应用', cp: 'case'},
         {text: '服务支持', cp: 'service'},
         {text: '关于我们', cp: 'service'}

src/page/layout/header/istyle.scss

@@ -34,25 +34,7 @@
       width: 150px;
       height: 100%;
       display: inline-block;
-
-      i {
-        position: absolute;
-        left: 50%;
-        top: 60%;
-        transform: translateX(-50%) translateY(-50%);
-      }
-
-      .icon-logo_b {
-        font-size: 110px;
-        color: #fff;
-      }
-
-      .icon-logo_a {
-        font-size: 40px;
-        margin-left: -48px;
-        margin-top: -6px;
-        color: #1fe4dc;
-      }
+      color: #fff;
     }
   }
 
@@ -78,7 +60,7 @@
 
     .list {
       border-left: 1px solid $split;
-      padding-left: 60px;
+      padding: 0 60px;
       display: flex;
       min-width: 480px;
       max-width: 750px;
@@ -87,22 +69,48 @@
 
       a {
         display: inline-block;
-        padding: 25px 0;
+        padding: 25px 20px 25px 0;
         font-size: 16px;
         text-decoration: none;
         font-weight: bold;
         position: relative;
         flex: 0 0 auto;
+        transition: color $mc;
 
+        &::before,
         &::after {
-          display: none;
           content: '';
-          border: 6px solid transparent;
+          border: 9px solid transparent;
+          border-top-color: #fff;
+          border-left-width: 5px;
+          border-right-width: 5px;
           position: absolute;
+          margin-top: 4px;
           right: 0;
           top: 50%;
+          transition: $ts;
+          z-index: 1;
+          transform-origin: center 20%;
           transform: translateY(-50%);
         }
+
+        &::before {
+          z-index: 2;
+        }
+
+        &.active {
+          color: #727272;
+
+          &::after {
+            border-top-color: #727272;
+            transform: translateY(-50%) scale(1.3);
+          }
+
+          &::before {
+            transform: translateY(-50%) scale(0.7);
+            border-top-color: #000;
+          }
+        }
       }
     }
   }

src/page/navs/index.vue

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

src/page/navs/temp.vue

@@ -27,6 +27,21 @@ const setting = {
       to: {name: 'product'}
     }
   ],
+  'technology': [
+    {
+      icon: 'icon-tech_space_location',
+      name: '空间定位',
+      to: {name: 'product'}
+    }, {
+      icon: 'icon-tech_space_modeling',
+      name: '空间建模',
+      to: {name: 'product'}
+    }, {
+      icon: 'icon-tech_space_display',
+      name: '空间展示',
+      to: {name: 'product'}
+    }
+  ],
   'service': [
     {
       icon: 'icon-tutorial',
@@ -78,7 +93,7 @@ const setting = {
     }, {
       icon: 'icon-industry_app',
       name: 'app',
-      to: {name: 'service_list', params: {id: 'clause'}}
+      to: {name: 'cases_app'}
     }
   ]
 }
@@ -140,6 +155,7 @@ $lHeight: 145px;
   display: flex;
 
   .camera {
+    display: block;
     max-width: 120px;
     flex: 1;
     padding: 0 30px;

src/router/index.js

@@ -56,6 +56,11 @@ export default new Router({
       name: 'cases',
       component: () => import('@/page/cases')
     },
+    {
+      path: '/cases/app',
+      name: 'cases_app',
+      component: () => import('@/page/cases/app')
+    },
     information
   ],
   scrollBehavior (to, from, savedPosition) {