4.28更更新

src/App.vue

@@ -16,7 +16,6 @@
 <script>
 import '@/assets/style/reset.scss'
 import '@/assets/style/public.scss'
-import '@/assets/imgfont/iconfont.css'
 import '@/assets/font/iconfont.css'
 import header from '@/page/layout/header'
 import footer from '@/page/layout/footer'

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/imgfont/iconfont.css

@@ -1,72 +0,0 @@
-@font-face {
-  font-family: 'iconfont';  /* project id 1135851 */
-  src: url('//at.alicdn.com/t/font_1135851_dr1c66aiupo.eot');
-  src: url('//at.alicdn.com/t/font_1135851_dr1c66aiupo.eot?#iefix') format('embedded-opentype'),
-  url('//at.alicdn.com/t/font_1135851_dr1c66aiupo.woff2') format('woff2'),
-  url('//at.alicdn.com/t/font_1135851_dr1c66aiupo.woff') format('woff'),
-  url('//at.alicdn.com/t/font_1135851_dr1c66aiupo.ttf') format('truetype'),
-  url('//at.alicdn.com/t/font_1135851_dr1c66aiupo.svg#iconfont') format('svg');
-}
-.iconfont {
-  font-family: "iconfont" !important;
-  font-size: 16px;
-  font-style: normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.icon-koudai:before {
-  content: "\e649";
-}
-
-.icon-jianmo:before {
-  content: "\e64a";
-}
-
-.icon-manyou:before {
-  content: "\e32a";
-}
-
-.icon-paise:before {
-  content: "\e64c";
-}
-
-.icon-genxing:before {
-  content: "\e64d";
-}
-
-.icon-lxwm:before {
-  content: "\e64e";
-}
-
-.icon-khfw:before {
-  content: "\e653";
-}
-
-.icon-mtcx:before {
-  content: "\e650";
-}
-
-.icon-ywhz:before {
-  content: "\e654";
-}
-
-.icon-szkj:before {
-  content: "\e646";
-}
-
-.icon-kjsj:before {
-  content: "\e645";
-}
-
-.icon-swhy:before {
-  content: "\e123";
-}
-
-.icon-switchopen:before {
-  content: "\e648";
-}
-
-.icon-switchclose:before {
-  content: "\e655";
-}

src/assets/style/public.scss

@@ -1,5 +1,5 @@
-$battery-start:55%;
-$battery-end:75%;
+$battery-start:52%;
+$battery-end:32%;
 
 
 #app {
@@ -172,102 +172,33 @@ $battery-end:75%;
     width: $battery-start
   }
 }
+
+$fix-posi:2%;
 @keyframes lighting1 {
   0% {
-    left: $battery-start - 4%;
+    left: $battery-start - $fix-posi ;
 		background-position: 0 0px;
   }
   100% {
-    left: 100% - $battery-end + 5%;
+    left: $battery-end - $fix-posi;
     background-position: 100% 0;
   }
 }
 
 @keyframes lighting1-back {
   0% {
-    left: 100% - $battery-end + 5%;
+    left: $battery-end - $fix-posi;
     background-position: 100% 0;
   }
   // 50%{
   //   left: 60%;
   // }
   100% {
-    left: $battery-start - 4%;
+    left: $battery-start - $fix-posi;
     background-position: 0% 0;
   }
 }
 
-@keyframes num-add {
-  0% {
-    content: '2'
-  }
-  10% {
-    content: '2.5'
-  }
-  20% {
-    content: '3.5'
-  }
-  30% {
-    content: '3.8'
-  }
-  40% {
-    content: '4.5'
-  }
-  50% {
-    content: '4.8'
-  }
-  60% {
-    content: '5.3'
-  }
-  70% {
-    content: '5.8'
-  }
-  80%{
-    content: '6.5'
-  }
-  90% {
-    content: '7.5'
-  }
-  100% {
-    content: '8'
-  }
-}
-@keyframes num-reduce {
-  100% {
-    content: '2'
-  }
-  90% {
-    content: '2.5'
-  }
-  80% {
-    content: '3.5'
-  }
-  70% {
-    content: '3.8'
-  }
-  60% {
-    content: '4.5'
-  }
-  50% {
-    content: '4.8'
-  }
-  40% {
-    content: '5.3'
-  }
-  30% {
-    content: '5.8'
-  }
-  20%{
-    content: '6.5'
-  }
-  10% {
-    content: '7.5'
-  }
-  0% {
-    content: '8'
-  }
-}
-
 $padding:20px;
 @keyframes mymove {
   0% {

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/compare/index.vue

@@ -170,10 +170,10 @@ export default {
     z-index: 15;
     background: url('~@/assets/images/border-linear.png') left top no-repeat;
   }
-  .overlap .r-move::before {
+  /* .overlap .r-move::before {
     width: 0;
     background: none;
-  }
+  } */
 
   .overlap .l-linear{
     content: '';
@@ -219,6 +219,7 @@ export default {
     left: 1px;
     top: 0px;
     width: 64px;
+    height: 64px;
   }
 
   .slide img:last-of-type{

src/components/number/index.vue

@@ -1,12 +1,14 @@
 <template>
-  <span :company="after">
-    {{icount}}
-  </span>
+  <span :company="after">{{icount}}</span>
 </template>
 
 <script>
 export default {
   props: {
+    pageProduct: {
+      default: false,
+      type: Boolean
+    },
     after: {
       default: ''
     },
@@ -14,8 +16,14 @@ export default {
       default: 0,
       type: Number
     },
-    start: {
+    startCount: {
+      default: null
+    },
+    startUp: {
       default: true
+    },
+    type: {
+      default: 'up'
     }
   },
   data () {
@@ -24,31 +32,89 @@ 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
+      }
+      console.log(this.icount)
+      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.floor((this.endNum - startNum) / 100)
+    },
     excessive () {
-      if (this.icount === this.endNum) {
+      // 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
         return
       }
-      this.icount += this.interval
+
+      if (this.pageProduct) {
+        if (this.interval > 0) {
+          this.icount = Math.ceil((parseFloat(this.icount) + this.interval / 10) * 10) / 10
+          let temp = String(this.icount * 10)
+          this.icount = temp[0] + '.' + temp[1]
+        } else {
+          this.icount = Math.floor((parseFloat(this.icount) + this.interval / 10) * 10) / 10
+          let temp = String(this.icount * 10)
+          this.icount = temp[0] + '.' + temp[1]
+        }
+      } else {
+        this.icount += this.interval
+      }
+
       requestAnimationFrame(this.excessive)
     }
   },
   watch: {
-    start (newVal) {
-      newVal && this.excessive()
+    startUp (newVal) {
+      if (newVal) {
+        this.excessive()
+      }
+    },
+    type (newVal) {
+      this.icount = this.count
+
+      if (newVal === 'up') {
+        this.upAttr()
+      } else {
+        this.downAttr()
+      }
+      this.excessive()
     }
   }
 }

src/components/vcenter/index.vue

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

src/page/binocular/index.vue

@@ -67,7 +67,7 @@
           <img class="fk_mask_1" src="@/assets/images/fk_mask.png" alt="">
           <img class="fk_mask_2" src="@/assets/images/fk_mask.png" alt="">
         </div>
-        <div class="fkkj-right"><span class="b-title">十分钟复刻空间简便易用</span></div>
+        <div class="fkkj-right"><h2 class="b-title">十分钟复刻空间简便易用</h2></div>
       </div>
       <div class="mxsc-layout plate">
         <div class="mxsc-left">

src/page/binocular/style.scss

@@ -383,6 +383,7 @@ $txt_delay: 0.2s;
       }
       .fk_mask{
         width: 2vw;
+        height: 2.2vw;
         top: 0vw;
         left: 24vw;
         opacity: 0.8;
@@ -390,12 +391,14 @@ $txt_delay: 0.2s;
       }
       .fk_mask_1{
         width: 1.5vw;
+        height: 1.7vw;
         top: -4vw;
         left: 30vw;
         opacity: 0.5;
       }
       .fk_mask_2{
         width: 1vw;
+        height: 1.1vw;
         top: -1vw;
         left: 24vw;
         opacity: 0.6;

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/eight/index.vue

@@ -172,20 +172,22 @@
           </div>
         </div>
       </div>
-      <div class="qingxidu plate lighting">
+      <div class="qingxidu plate num-lighting" ref="number">
         <div class="b-title">续航时间</div>
         <div class="qxd-4">
           <div class="qxd-4-battery">
-           <img class="battery-l" src="@/assets/images/battery-left.png" alt="">
-           <div class="lighting-txt first-txt"><span>LITE</span>2H</div>
-           <div class="lighting">
-           </div>
-           <div class="battery-mask">
-              <div class="lighting-txt fix-txt">
-                <span>PRO</span>
-                <span class="lighting-span">H</span>
-              </div>
-           </div>
+            <div class='b-l'>
+              <img class="bl-img" src="@/assets/images/battery-left.png" alt="">
+              <div class="bl-txt"><span>LITE</span>2H</div>
+            </div>
+            <div class="lighting"></div>
+            <div class="br-txt">
+              <span>PRO</span><number class="br-num"
+              :type="numArr.type"
+              :startCount="numArr.start"
+              :pageProduct="true"
+              :count="numArr.end"/>H
+            </div>
           </div>
         </div>
       </div>
@@ -237,6 +239,7 @@ import {mapState} from 'vuex'
 import vcenter from '@/components/vcenter'
 import { getPosition } from '@/util'
 import phone from '@/components/phone'
+import number from '@/components/number'
 import compare from '@/components/compare'
 import Linecanvas from '@/components/Linecanvas'
 
@@ -339,6 +342,8 @@ export default {
       params,
       params2,
       runLineCanvas: false,
+      runNum: 'up',
+      numArr: {},
       case1: {
         content: require('@/assets/video/8k.mp4'),
         back: require('@/assets/video/4k.mp4'),
@@ -360,14 +365,44 @@ export default {
       split: state => state.ui.navDivision
     })
   },
+  watch: {
+    runNum: {
+      immediate: true,
+      handler: function (newVal) {
+        if (newVal === 'up') {
+          this.numArr = {
+            type: 'up',
+            start: 2,
+            end: 8
+          }
+        } else {
+          this.numArr = {
+            type: 'down',
+            start: 8,
+            end: 2
+          }
+        }
+      }
+    }
+  },
   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 = function () {
+      this.scrollHandle = () => {
+        let isRun = Array.from(ny.classList).some(sub => {
+          return sub === 'hide10'
+        })
+        if (!isRun) {
+          this.runNum = 'up'
+        } else {
+          this.runNum = 'dowm'
+        }
+
         items.forEach((item, index) => {
           let isContain = Array.from(item.classList).some(sub => {
             return sub === 'bottom' || sub === 'benefit' ||
@@ -393,7 +428,7 @@ export default {
     clearTimeout(this.timeout)
     window.removeEventListener('scroll', this.scrollHandle)
   },
-  components: {vcenter, Linecanvas, phone, compare}
+  components: {vcenter, Linecanvas, phone, compare, number}
 }
 </script>
 

src/page/eight/style.scss

@@ -382,12 +382,16 @@ $num_time: 0.6s;
           align-items: center;
           margin-bottom: 20px;
           animation: fadeUp 0.5s ease-out 1 both $txt_delay*3;
+          img{
+            width: 47px;
+          }
           span{
             display: inline-block;
             color: #fff;
             line-height: 34px;
             position: relative;
             padding:0 20px;
+            width: calc(100% - 47px);
           }
         }
       }
@@ -565,9 +569,11 @@ $num_time: 0.6s;
         left: calc(50% + 19px);
         z-index: 15;
         top: 6px;
+        padding: 0;
+        opacity: 0;
         transform: translateX(-50%);
-        animation:mymove 1s infinite;
-        box-sizing: content-box
+        animation:mymove 1s linear infinite;
+        box-sizing: content-box;
       }
     }
 
@@ -598,43 +604,62 @@ $num_time: 0.6s;
         width: 679px;
         height: 131px;
         position: relative;
-        .lighting-txt{
-          font-size: 30px;
-          color: #dadada;
+        background: url('~@/assets/images/battery-right.png') top center no-repeat;
+        .b-l{
+          $skew_num:25deg;
+          $position:23px;
           position: absolute;
-          top: 50%;
-          transform: translateY(-50%);
-          // animation: lighting-back $battery_time linear forwards;
-          font-weight: bold;
-          span:first-child{
-            font-weight: normal;
-            color: #6b6b6c;
-            padding-right: 15px;
-          }
-          .lighting-span{
+          top: 0;
+          left: -$position;
+          transform: skewX(-$skew_num);
+          width: 50%;
+          height: 131px;
+          animation: lighting $battery_time linear forwards;
+          overflow: hidden;
+          .bl-txt{
             font-size: 30px;
+            height: 100%;
+            line-height: 131px;
+            font-weight: bold;
+            color: #dadada;
+            transform: skewX($skew_num);
+            position: relative;
+            span{
+              font-weight: normal;
+              color: #6b6b6c;
+              padding-right: 15px;
+            }
           }
-          .lighting-span::before{
-            content: '8';
-            display: inline-block;
-            animation: num-add $num_time linear forwards;
-          }
-          .num{
-            color: #fff;
-            padding-right: 0;
+          .bl-img{
+            transform: skewX($skew_num);
+            width: 679px;
+            height: 100%;
+            position: absolute;
+            left: $position;
           }
         }
-        .first-txt{
-          width: 45%;
-          animation: lighting-txt $battery_time linear forwards;
-        }
-        .fix-txt{
+        .br-txt{
+          position: absolute;
           right: 0;
-          font-size: 0;
+          line-height: 131px;
+          height: 100%;
+          font-size: 30px;
+          font-weight: bold;
+          color: #dadada;
+          animation:lighting-txt $battery_time linear forwards ;
+
           span{
-           font-size: 30px;
+            font-weight: normal;
+            color: #6b6b6c;
+            padding-right: 15px;
+          }
+          .br-num{
+            font-weight: bold;
+            color: #dadada;
+            padding-right: 0;
           }
         }
+
         .lighting{
           width: 80px;
           height: 130px;
@@ -647,44 +672,10 @@ $num_time: 0.6s;
           position: absolute;
           left: 50%;
           z-index: 20;
-          // animation: lighting1 0.5s ease-in-out forwards;
           transform: translateX(-50%);
           will-change: background;
           animation: lighting1 $battery_time steps(9) forwards;
         }
-        .battery-mask{
-          position: absolute;
-          right: 0;
-          top: 0;
-          height: 100%;
-          width: 55%;
-          background: no-repeat 100% 0;
-          background-image: url('~@/assets/images/battery-right.png');
-          background-size: auto 100%;
-          animation: lighting $battery_time linear forwards;
-          clip-path: polygon(14% 0%,100% 0, 100% 100%, 0% 100%);
-          // &::before{
-          //   position: absolute;
-          //   top: 0;
-          //   left: 0;
-          //   content: '';
-          //   width: 20px;
-          //   height: 98%;
-          //   background: #111111;
-          //   transform: skewX(-20deg)
-          // }
-          .lighting-txt{
-            width: 100%;
-          }
-        }
-        img:first-child{
-          position: absolute;
-          top: 0;
-          left: 0;
-          margin: 0;
-          width: 100%;
-          height: 100%;
-        }
       }
     }
   }
@@ -853,20 +844,17 @@ $num_time: 0.6s;
 }
 
 .hide10{
-  .first-txt{
+  .br-txt{
     animation:lighting-txt-back $battery_time linear forwards !important;
   }
-  .battery-mask{
+  .b-l{
     animation:lighting-back $battery_time linear forwards !important;
   }
   
   .lighting{
     animation:lighting1-back $battery_time steps(9) forwards !important;
   }
-  .lighting-span::before{
-    content: '2'!important;
-    animation:num-reduce $num_time linear forwards!important;
-  }
+ 
 }
 
 

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">
@@ -111,16 +111,18 @@
           </div>
           <a  href="#/videos">更多行业应用</a>
         </div>
-        <div class="content">
-          <slide :items="items" class="body">
-            <div slot-scope="{data}" class="item">
-              <img :src="data.image" class="cover">
-              <div class="jj">
-                <img :src="data.icon" class="icon">
-                <span v-if="data.text">{{data.text}}</span>
+        <div class="slide-l" :class="{actice: slideActive}" ref="slide">
+          <div class="content">
+            <slide :items="items" class="body">
+              <div slot-scope="{data}" class="item">
+                <img :src="data.image" class="cover">
+                <div class="jj">
+                  <img :src="data.icon" class="icon">
+                  <span v-if="data.text">{{data.text}}</span>
+                </div>
               </div>
-            </div>
-          </slide>
+            </slide>
+          </div>
         </div>
       </div>
     </div>
@@ -131,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>
@@ -234,6 +236,7 @@ export default {
     ]
 
     return {
+      slideActive: false,
       countGroup,
       reports,
       items,
@@ -247,9 +250,18 @@ export default {
   },
   mounted () {
     this.sizeHandle = () => {
-      let y = getPosition(this.$refs.numcount).y + this.$refs.numcount.offsetHeight
-      if (window.innerHeight + window.scrollY > y) {
+      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 || window.pageYOffset) > ny) {
         this.startNumCount = true
+      }
+
+      if (window.innerHeight + (window.scrollY || window.pageYOffset) > sy) {
+        this.slideActive = true
+      }
+
+      if (this.startNumCount && this.slideActive) {
         window.removeEventListener('scroll', this.sizeHandle)
       }
     }

src/page/home2/style.scss

@@ -332,6 +332,15 @@
   }
 
   .content-layout {
+    .slide-l {
+      transition: transform 1s ease-in-out;
+      transform: translateX(-100%);
+
+      &.actice {
+        transform: translateX(0)
+      }
+    }
+
     .tabs {
       text-align: center;
       position: relative;
@@ -467,15 +476,16 @@
   }
 
   .media-layout {
-    overflow: auto;
-    max-height: 800px;
+    overflow: auto; 
+    max-height: 510px;
   }
 
   ul>li {
     display: flex;
     position: relative;
-    margin-bottom: 30px;
+    padding-bottom: 30px;
     cursor: pointer;
+    max-height: 170px;
 
     ::after {
       content: '';

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: 'about'}

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: 'cases', params: {id: 'app'}}
+      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) {