制作官网

src/components/slide/style.css

@@ -9,7 +9,6 @@
   position: absolute;
   top: -50%;
   height: 100%;
-  background-color: #e2e2e2;
   width: 100%;
   left: 0;
   z-index: 0;
@@ -93,7 +92,7 @@
   transform-origin: left center;
   width: 130.09272%;
 }
-
+/* 
 .ccc-items::after {
   content: '';
   position: absolute;
@@ -104,4 +103,4 @@
   z-index: -1;
   background-color: #e2e2e2;
   transform: translateZ(-10px);
-}
+} */

src/page/home/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="home-layout">
 
-    <img src="@/assets/images/index_img_banner.jpg" class="banner">
+    <!-- <img src="@/assets/images/index_img_banner.jpg" class="banner"> -->
 
     <div class="plate01">
       <h2 class="b-title">全球首款消费级3D相机</h2>

src/page/home2/index.vue

@@ -0,0 +1,253 @@
+<template>
+  <div class="home-layout">
+
+    <div class="plate01">
+      <div class="layout">
+        <div class="info">
+          <div>
+            <img src="@/assets/images/banner_title.png" alt="">
+            <h3>
+              4Dkankan MAX PRO
+              <p>第二代空间智能建模相机</p>
+            </h3>
+            <div class="money">
+              <span>From:</span>
+              <strong>199.00</strong>
+            </div>
+            <div class="btns">
+              <a href="" class="button"><vcenter><img src="@/assets/images/product_icon_arrow.png" alt=""></vcenter></a>
+              <a href="" class="button">立即购买</a>
+            </div>
+          </div>
+        </div>
+        <img src="@/assets/images/banner_pro.png" alt="">
+      </div>
+      <video src="@/assets/video/banner.mp4" autoplay muted loop></video>
+    </div>
+
+    <div class="plate02">
+      <div class="logo"><img src="@/assets/images/plate_icon.png"></div>
+
+      <div class="hxjs">
+        <h2>核心技术介绍</h2>
+        <p>Our tools let developers build a new world powered by location data. Real-time updates. Total customization. Developers first.</p>
+        <div>
+          <figure>
+            <img src="@/assets/images/hxjs_1.png" alt="">
+            <figcaption>空间定位</figcaption>
+          </figure>
+          <figure>
+            <img src="@/assets/images/hxjs_2.png" alt="">
+            <figcaption>空间建模</figcaption>
+          </figure>
+          <figure>
+            <img src="@/assets/images/hxjs_3.png" alt="">
+            <figcaption>空间展示</figcaption>
+          </figure>
+        </div>
+      </div>
+
+      <div class="hxbg-layout">
+        <img src="@/assets/images/background_01.png" alt="" class="hxbg hxbg-1">
+        <div class="item item-1">
+          <div class="media">
+            <img src="@/assets/images/item_1.jpg" alt="">
+          </div>
+          <div class="content">
+            <h2>
+              <span>空间定位</span>
+              通过人工智能算法高度还原空间结构及测距信息
+            </h2>
+            <p>Embed extensible, custom maps, location search, and turn by turn directions into your app, built on a network of over 420 million monthly users.</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="hxbg-layout">
+        <img src="@/assets/images/background_02.png" alt="" class="hxbg hxbg-2">
+        <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>
+            </div>
+          </div>
+          <div class="content">
+            <h2>
+              <span>空间定位</span>
+              通过人工智能算法高度还原空间结构及测距信息
+            </h2>
+            <p>Embed extensible, custom maps, location search, and turn by turn directions into your app, built on a network of over 420 million monthly users.</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="item item-3">
+        <div class="media">
+        <video src="@/assets/video/item_3.mp4" autoplay muted loop></video>
+        </div>
+        <div class="content">
+          <h2>
+            <span>空间定位</span>
+            通过人工智能算法高度还原空间结构及测距信息
+          </h2>
+          <p>Embed extensible, custom maps, location search, and turn by turn directions into your app, built on a network of over 420 million monthly users.</p>
+        </div>
+      </div>
+
+    </div>
+
+    <div class="plate04">
+      <img src="@/assets/images/background_03.png" alt="" class="hxbg hxbg-3">
+      <div class="info">
+        <h2>行业应用展示</h2>
+        <p>立中天之华观兮，连飞阁乎西城。临漳水之长流兮，望园果之滋荣。看空间的故事，听百鸟之悲鸣。</p>
+      </div>
+      <div class="content-layout">
+        <div class="tabs">
+          <div>
+            <a href="" class="active"><img src="@/assets/images/icon_01.png"></a>
+            <a href=""><img src="@/assets/images/icon_02.png"></a>
+            <a href=""><img src="@/assets/images/icon_03.png"></a>
+          </div>
+          <a  href="#/videos">更多行业应用</a>
+        </div>
+        <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>
+          </slide>
+        </div>
+      </div>
+    </div>
+
+    <div class="plate05" ref="numcount">
+      <img src="@/assets/images/index_img_record_bg.png" class="bg">
+      <div class="info">
+        <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>
+            <p v-html="item.text"></p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="plate06">
+      <h2>
+        媒体报道
+        <a href="#/information/news">更多报道</a>
+      </h2>
+
+      <ul>
+        <li v-for="(item,i) in reports" :key="i">
+          <div class="icon">
+            <img :src="item.icon" alt="">
+          </div>
+          <div class="content">
+            <time>{{item.time}}</time>
+            <p>{{item.title}}</p>
+          </div>
+          <div class="cover">
+            <img :src="item.cover" alt="">
+          </div>
+        </li>
+      </ul>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import slide from '@/components/slide'
+import vcenter from '@/components/vcenter'
+import tabs from '@/components/tabs'
+import number from '@/components/number'
+import { getPosition } from '@/util'
+
+export default {
+  data () {
+    let countGroup = [
+      {text: '详情页浏览<br>提升', count: 75},
+      {text: '人均停留<br>增长', count: 318},
+      {text: '人均浏览<br>增长', count: 180},
+      {text: '房源约看<br>增长', count: 138}
+    ]
+    let reports = [
+      {
+        icon: require('@/assets/images/item_icon_1.png'),
+        cover: require('@/assets/images/item_cover_1.png'),
+        time: '2018年6月21日',
+        title: '3D相机“克隆”三维真实世界'
+      },
+      {
+        icon: require('@/assets/images/item_icon_2.png'),
+        cover: require('@/assets/images/item_cover_2.png'),
+        time: '2018年6月21日',
+        title: '“四维看看”3D相机：让老百姓用得起 用得上 '
+      },
+      {
+        icon: require('@/assets/images/item_icon_3.png'),
+        cover: require('@/assets/images/item_cover_3.png'),
+        time: '2018年6月21日',
+        title: '四维时代发布全球首款消费级3D相机'
+      },
+      {
+        icon: require('@/assets/images/item_icon_4.png'),
+        cover: require('@/assets/images/item_cover_4.png'),
+        time: '2018年6月21日',
+        title: '四维时代发布消费级3D相机“四维看看”'
+      }
+    ]
+    let items = [
+      { image: require('@/assets/images/phone_1.jpg'), icon: require('@/assets/images/phone_icon_1.png'), text: '时代豪苑' },
+      { image: require('@/assets/images/phone_2.jpg'), icon: require('@/assets/images/phone_icon_2.png'), text: '武侯祠' },
+      { image: require('@/assets/images/phone_3.jpg'), icon: require('@/assets/images/phone_icon_3.png'), text: '广东省博物馆' },
+      { image: require('@/assets/images/phone_4.jpg'), icon: require('@/assets/images/phone_icon_4.png'), text: '深圳时装店' },
+      { image: require('@/assets/images/phone_5.jpg'), icon: require('@/assets/images/phone_icon_5.png'), text: '时代豪苑' },
+      { image: require('@/assets/images/phone_6.jpg'), icon: require('@/assets/images/phone_icon_6.png'), text: '武侯祠' },
+      { image: require('@/assets/images/phone_7.jpg'), icon: require('@/assets/images/phone_icon_7.png'), text: '广东省博物馆' },
+      { image: require('@/assets/images/phone_8.jpg'), icon: require('@/assets/images/phone_icon_8.png'), text: '深圳时装店' },
+      { image: require('@/assets/images/phone_9.jpg'), icon: require('@/assets/images/phone_icon_1.png'), text: '大西洋展览馆' },
+      { image: require('@/assets/images/phone_10.jpg'), icon: require('@/assets/images/phone_icon_2.png'), text: '深圳时装店' },
+      { image: require('@/assets/images/phone_11.jpg'), icon: require('@/assets/images/phone_icon_3.png'), text: '权利的游戏' },
+      { image: require('@/assets/images/phone_12.jpg'), icon: require('@/assets/images/phone_icon_4.png'), text: '广东省博物馆' },
+      { image: require('@/assets/images/phone_13.jpg'), icon: require('@/assets/images/phone_icon_5.png'), text: '深圳时装店' },
+      { image: require('@/assets/images/phone_14.jpg'), icon: require('@/assets/images/phone_icon_6.png'), text: '时代豪苑' },
+      { image: require('@/assets/images/phone_15.jpg'), icon: require('@/assets/images/phone_icon_7.png'), text: '武侯祠' },
+      { image: require('@/assets/images/phone_16.jpg'), icon: require('@/assets/images/phone_icon_8.png'), text: '权利的游戏' }
+    ]
+
+    return {
+      countGroup,
+      reports,
+      items,
+      startNumCount: false
+    }
+  },
+  mounted () {
+    this.sizeHandle = () => {
+      let y = getPosition(this.$refs.numcount).y + this.$refs.numcount.offsetHeight
+      if (window.innerHeight + window.scrollY > y) {
+        this.startNumCount = true
+        window.removeEventListener('scroll', this.sizeHandle)
+      }
+    }
+
+    window.addEventListener('scroll', this.sizeHandle)
+  },
+  destroyed () {
+    window.removeEventListener('scroll', this.sizeHandle)
+  },
+  components: {tabs, vcenter, slide, number}
+}
+</script>
+
+<style lang="scss" scoped>
+@import './style.scss';
+</style>

src/page/home2/style.scss

@@ -0,0 +1,553 @@
+.b-title {
+  margin-bottom: 25px;
+}
+
+.info>h2 {
+  font-size: 48px;
+  color: #181818;
+  font-weight: 300;
+  line-height: 1.4;
+  margin-bottom: 20px;
+}
+
+.info>p {
+  font-size: 14px;
+  color: #010101;
+  line-height: 2
+}
+
+.btns .button {
+  height: 50px;
+  padding-top: 0;
+  padding-bottom: 0;
+  vertical-align: middle;
+  margin-top: 10px;
+
+  &:first-child {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+
+  &:last-child {
+    line-height: 50px;
+    color: #414141;
+    padding-left: 90px;
+    padding-right: 90px;
+    font-size: 14px;
+  }
+}
+
+
+.plate01 {
+  position: relative;
+  video {
+    width: 100%;
+    height: 684px;
+    object-fit: fill;
+  }
+  
+  .layout {
+    overflow: hidden;
+    margin: 0 auto;
+    max-width: 1210px;
+    min-width: 900px;
+    position: absolute;
+    z-index: 1;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 150px;
+    right: 150px;
+
+
+    >img {
+      float: right;
+    }
+
+    .info {
+      margin-top: 50px;
+      width: 50%;
+      display: inline-block;
+      vertical-align: top;
+
+
+      h3 {
+        font-size: 30px;
+        color: #fff;
+        font-weight: 600;
+        margin-bottom: 24px;
+        margin-top: 22px;
+
+        >p {
+          line-height: 36px;
+          font-size: 36px;
+          margin-top: 10px;
+          font-weight: 300;
+        }        
+      }
+
+      .money {
+        margin-top: 15px;
+        padding: 15px 0;
+        color: #fff;
+
+        span {
+          display: inline-block;
+          font-weight: 100;
+          vertical-align: top;
+        }
+
+        strong {
+          font-size: 44px;
+          display: inline-block;
+          padding-left: 30px;
+          position: relative;
+          line-height: 32px;
+          font-weight: 400;
+
+          &::before {
+            content: '$';
+            font-size: 14px;
+            font-weight: 100;
+            position: absolute;
+            left: 10px;
+            line-height: 14px;
+            top: 0;
+          }
+        }
+      }
+
+      .btns {
+        width: 50%;
+        padding-left: 46px;
+        position: relative;
+
+        .button {
+          margin: 0;
+        }
+
+        .button:first-child {
+          position: absolute;
+          left: 0;
+          top: 0;
+        }
+
+        .button:last-child {
+          display: block;
+          padding: 0;
+          text-align: center;
+        }
+      }
+
+    }
+  }
+}
+
+.plate02 {
+  position: relative;
+
+  .logo {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    width: 150px;
+    height: 150px;
+    background-color: #fff;
+    border-radius: 50%;
+    text-align: center;
+    z-index: 3;
+    > img {
+      margin-top: 30px;
+    }
+  }
+
+  .hxjs {
+    z-index: 2;
+    position: relative;
+    padding-top: 90px;
+    text-align: center;
+    color: #151515;
+
+    h2 {
+      font-size: 48px;
+      font-weight: 500;
+    }
+    p {
+      font-size: 18px;
+      width: 720px;
+      line-height: 1.5em;
+      margin: 20px auto;
+    }
+
+    div {
+      width: 610px;
+      display: flex;
+      margin: 65px auto;
+      justify-content: space-between;
+
+      figure {
+        flex: none;
+        
+        figcaption {
+          font-size: 18px;
+          text-align: center;
+        }
+      }
+    }
+  }
+
+  .item {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    justify-content: space-between;
+    padding: 117px 0;
+    .media {
+      flex: 1 0.5 auto;
+
+      video,
+      img {
+         width: 100%;
+      }
+
+      &.iframe {
+        position: relative;
+        >div {
+          padding-top: 75%;
+        }
+
+        iframe {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .content {
+      flex: 0 0.5 auto;
+      align-self: center;
+      color: #151515;
+
+      h2 {
+        font-size: 24px;
+        margin-bottom: 30px;
+        max-width: 344px;
+        line-height: 1.2em;
+
+        span {
+          display: block;
+          margin-bottom: 15px;
+          font-size: 18px;
+          font-weight: normal;
+        }
+      }
+
+      p {
+        font-weight: 100;
+        font-size: 18px;
+        max-width: 550px;
+      }
+    }
+  }
+
+  .item-1 {
+    padding-top: 134px;
+    margin: 0 15%;
+
+    .content {
+      margin-left: 5%;
+    }
+  }
+
+  .item-2 {
+    margin-left: 15%;
+    flex-direction: row-reverse;
+    .content {
+      margin-right: 5%;
+    }
+  }
+
+  .item-3 {
+    margin-right: 15%;
+    padding-bottom: 0;
+    .content {
+      margin-left: 5%;
+    }
+  }
+
+  .hxbg-layout {
+    position: relative;
+  }
+
+  .hxbg {
+    position: absolute;
+    width: calc(100vw - 50px);
+    left: 0;
+    z-index: 1; 
+  }
+
+  .hxbg-1 {
+    bottom: 80px;
+  }
+
+  .hxbg-2 {
+    bottom: 95px;
+    top: inherit;
+  }
+}
+
+.plate04 {
+  width: 100%;
+  overflow: hidden;
+  padding-bottom: 160px;
+  padding-top: 13%;
+  position: relative;
+
+  .hxbg-3 {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    right: 0;
+    z-index: 0;
+  }
+
+
+  .info {
+    text-align: center;
+    position: relative;
+    z-index: 2;
+
+    h2 {
+      color: #151515;
+      margin-bottom: 10px;
+    }
+
+    p {
+      color: #151515;
+      font-size: 24px;
+    }
+  }
+
+  .content-layout {
+    .tabs {
+      text-align: center;
+      position: relative;
+      z-index: 2;
+      margin-bottom: 20px;
+
+      div {
+        border-bottom: 1px solid #a9b3b2;
+        display: inline-block;
+
+        a {
+          display: inline-block;
+          padding: 15px 18px;
+          position: relative;
+        }
+
+        .active::after {
+          content: '';
+          position: absolute;
+          width: 100%;
+          left: 0;
+          bottom: 0;
+          height: 2px;
+          margin-bottom: -1px;
+          background-color: #1fe4dc;
+        }
+      }
+
+      >a {
+        margin-top: 30px;
+        display: block;
+        text-align: center;
+        font-size: 18px;
+        color: #4d4d4d
+      }
+    }
+  }
+
+  .item {
+    text-align: center;
+    transform-style: preserve-3d;
+
+    .cover {
+      width: 100%;
+      margin-bottom: 74px;
+      box-shadow: -25px 50px 30px rgba(0, 0, 0, 0.125);
+    }
+
+    .jj {
+      bottom: 0;
+      transform: translateX(-50%) translateY(50%) translateZ(10px) rotateY(-20deg);
+      left: 50%;
+      position: absolute;
+
+      .icon {
+        margin: 40px 0 16px;
+        max-width: 75px;
+      }
+
+      span {
+        display: block;
+        text-align: center;
+        font-size: 18px;
+        color: #777777;
+      }
+    }
+  }
+}
+
+.plate05 {
+  overflow: hidden;
+  position: relative;
+
+  .info {
+    position: absolute;
+    width: 1200px;
+    left: 50%;
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    color: rgb(50, 50, 50);
+    text-align: center;
+    z-index: 2;
+
+    .b-title {
+      margin-bottom: 40px;
+      color: inherit;
+    }
+
+    .count-group {
+      overflow: hidden;
+
+      div {
+        width: 20%;
+        text-align: center;
+        float: left;
+
+        span {
+          font-size: 48px;
+          padding-right: 30px;
+          padding-top: 10px;
+          display: inline-block;
+          background: url('~@/assets/images/index_icon_record_arrow.png') no-repeat top right;
+        }
+
+        p {
+          font-size: 14px;
+          margin-top: 14px;
+          font-weight: 300;
+          padding-right: 30px;
+        }
+      }
+    }
+  }
+}
+
+.plate06 {
+  max-width: 1200px;
+  margin: 110px auto 0;
+
+  h2 {
+    font-size: 48px;
+    color: #111111;
+    margin-bottom: 90px;
+    text-align: center;
+    font-weight: 400;
+
+    a {
+      float: right;
+      font-size: 18px;
+      margin-top: 30px;
+      color: #111111;
+    }
+  }
+
+  ul>li {
+    display: flex;
+    position: relative;
+    margin-bottom: 30px;
+
+    ::after {
+      content: '';
+      width: 50%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 1px;
+      background-color: #000;
+    }
+
+    .cover,
+    .icon {
+      flex: 0 0 30%;
+
+      img {
+        max-width: 100%;
+      }
+    }
+
+    .cover {
+      flex: 0 0 auto;
+    }
+
+    .icon {
+      padding: 10px;
+      border-right: 1px solid #dcdcdc;
+      border-top: 1px solid #dcdcdc;
+    }
+
+    .content {
+      border-top: 1px solid #dcdcdc;
+      flex: 1;
+      padding: 25px 15px;
+      margin-right: 15px;
+
+      time {
+        display: block;
+        color: #f9082a;
+        font-size: 14px;
+        font-weight: bold;
+        margin-bottom: 8px;
+      }
+
+      p {
+        font-size: 24px;
+        color: #000000;
+      }
+    }
+
+  }
+}
+
+@keyframes zxdh {
+  from {
+    transform: translate(-50%, -50%) rotate(0);
+  }
+
+  to {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+
+@keyframes fxdh {
+  from {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+
+  to {
+    transform: translate(-50%, -50%) rotate(0);
+  }
+}
+
+.plate09 {
+  overflow: hidden;
+
+  .info {
+    padding: 100px 150px;
+    margin-bottom: 10%;
+  }
+}

src/page/layout/header/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="header-layout" :class="{active: headActive}" @mouseenter="active = true" @mouseleave="active = true">
+  <div class="header-layout" :class="{active: headActive}" @mouseenter="active = true" @mouseleave="active = false">
     <router-link :to="{name: 'home'}" class="logo">
       <i class="iconfont icon-logo_a"></i>
       <i class="iconfont icon-logo_b"></i>
@@ -46,7 +46,7 @@ export default {
   data () {
     return {
       overb: false,
-      active: true,
+      active: false,
       navs: [
         {text: '产品购买', cp: 'iproduct'},
         {text: '交互式视频', cp: 'videos'},
@@ -61,14 +61,14 @@ export default {
       this.$router.push({name: nav.cp})
     },
     overHandle (nav) {
-      // clearTimeout(this.timeout)
-      // this.$store.commit('change_nav', nav.cp)
+      clearTimeout(this.timeout)
+      this.$store.commit('change_nav', nav.cp)
     },
     outHandle () {
-      // clearTimeout(this.timeout)
-      // this.timeout = setTimeout(() => {
-      //   this.$store.commit('change_nav', '')
-      // }, 300)
+      clearTimeout(this.timeout)
+      this.timeout = setTimeout(() => {
+        this.$store.commit('change_nav', '')
+      }, 300)
     }
   },
   computed: {

src/page/layout/header2/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="header-layout" :class="{active: active}" @mouseenter="active = true" @mouseleave="active = false">
+    
+  </div>
+</template>
+
+<script>
+export default {
+  
+}
+</script>

src/router/index.js

@@ -9,7 +9,7 @@ export default new Router({
     {
       path: '/',
       name: 'home',
-      component: () => import('@/page/home1')
+      component: () => import('@/page/home2')
     },
     {
       path: '/videos',