4dkankan_official/src/page/home2/index.vue

<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>