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

<template>
  <div class="home-layout">
    <div class="plate01">
      <div class="layout">
        <div class="info">
          <!-- <div>
            <img :src="`${$cdn}images/banner_title.png`"  alt="">
            <h3>
              4Dkankan 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="`${$cdn}images/product_icon_arrow.png`" alt=""></vcenter></a>
              <a href="" class="button">立即购买</a>
            </div>
          </div> -->
        </div>
        <!-- <img :src="`${$cdn}images/banner_pro.png`" alt=""> -->
      </div>
      <div class="my-video">
        <video :src="`${$cdn}video/banner1.mp4`" autoplay muted loop></video>
      </div>
    </div>

    <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>{{langHome.booking.name}}</h2>
            <h3>{{langHome.booking.dec}}</h3>
            <p>{{langHome.booking.price}}</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">{{langHome.booking.btn}}</router-link>
            </div>
          </div>
        </div>
      </div>
      <div class="hxjs">
        <h2 class="b-title">{{langHome.tech.title}}</h2>
        <p class="b-label">{{langHome.tech.dec}}</p>
        <div>
          <figure>
            <img :src="`${$cdn}images/hxjs_1.png`" alt="">
            <figcaption class="b-label">{{langHome.tech.icon[0]}}</figcaption>
          </figure>
          <figure>
            <img :src="`${$cdn}images/hxjs_2.png`" alt="">
            <figcaption class="b-label">{{langHome.tech.icon[1]}}</figcaption>
          </figure>
          <figure>
            <img :src="`${$cdn}images/hxjs_3.png`" alt="">
            <figcaption class="b-label">{{langHome.tech.icon[2]}}</figcaption>
          </figure>
        </div>
      </div>

      <div class="hxbg-layout">
        <!-- <img :src="`${$cdn}images/background_01.png`"  alt="" class="hxbg hxbg-1"> -->
        <div class="item item-1">
          <div class="media">
            <!-- <img :src="`${$cdn}images/item_1.jpg`" alt=""> -->
            <video class="video" autoplay muted loop :src="kjdw" >
            </video>
          </div>
          <div class="content">
            <h2 class="b-title">
              {{langHome.tech.location.title}}
              <span class="b-label">{{langHome.tech.location.dec}}</span>
            </h2>
            <p></p>
          </div>
        </div>
      </div>

      <div class="hxbg-layout">
        <img :src="`${$cdn}images/background_01.png`" alt="" class="hxbg hxbg-2">
        <div class="item item-2">
          <div class="media iframe">
              <video class="video" autoplay muted loop :src="item2" ></video>
              <!-- <iframe src="http://www.4dmodel.com/SuperTwo/index.html?m=158&version=one" frameborder="0"></iframe> -->
          </div>
          <div class="content">
            <h2 class="b-title">
              {{langHome.tech.modeling.title}}
              <span  class="b-label">{{langHome.tech.modeling.dec}}</span>
            </h2>
            <p></p>
          </div>
        </div>
      </div>

      <img :src="`${$cdn}images/background_02.png`" alt="" class="kjzs-img">

      <div class="item item-3">
        <div class="media">
        <video  :src="`${$cdn}video/item_3.mp4`" autoplay muted loop></video>
        </div>
        <div class="content">
          <h2 class="b-title">
            {{langHome.tech.exhibition.title}}
            <span class="b-label">{{langHome.tech.exhibition.dec}}</span>
          </h2>
          <p></p>
        </div>
      </div>

    </div>

    <div class="plate04">
      <img :src="`${$cdn}images/background_03.png`"  alt="" class="hxbg hxbg-3">
      <div class="info">
        <h2 class="b-title">{{langHome.cases.title}}</h2>
        <p class="b-label" v-for="(item,i) in langHome.cases.dec" :key="i">{{item}}</p>
      </div>
      <div class="content-layout">
        <div class="tabs">
          <!-- <div>
            <a href="" class="active"><img :src="`${$cdn}images/icon_01.png`" ></a>
            <a href=""><img :src="`${$cdn}images/icon_02.png`" ></a>
            <a href=""><img :src="`${$cdn}images/icon_03.png`" ></a>
          </div> -->
          <!-- <a  href="#/videos">更多行业应用</a> -->
        </div>
        <div class="slide-l" :class="{actice: slideActive}" ref="slide">
          <div class="content">
            <slide :items="langHome.items" class="body">
              <div slot-scope="{data}" class="item">
                <img :src="data.image" class="cover" @click="goto(data.url)">
                <div class="jj">
                  <img :src="data.icon" class="icon">
                  <span v-if="data.text">{{data.text}}</span>
                </div>
              </div>
            </slide>
          </div>
        </div>
      </div>
    </div>

    <div class="plate05" ref="numcount">
      <img :src="`${$cdn}images/index_img_record_bg.png`">
      <div class="info">
        <h2 class="b-title">{{langHome.cases.space.title}}</h2>
        <h3 class="b-label">{{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>
            <p class="b-label" v-html="item.text"></p>
          </div>
        </div>
      </div>
    </div>

    <div class="plate06">
      <h2 class="b-title">{{langHome.reports.name}}</h2>
      <div class="media-layout">
        <ul>
          <li v-for="(item,i) in langHome.reports.items" :key="i" @click="goto(item.url)">
            <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>

  </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'
import {mapState} from 'vuex'

export default {
  data () {
    return {
      slideActive: false,
      // countGroup,
      kjdw: this.$cdn + 'video/kjdw.mp4',
      item2: this.$cdn + 'video/item2.mp4',
      startNumCount: false
    }
  },
  methods: {
    mediaClick () {
      this.$bus.$emit('showLeft', 'mediaInfo', {id: 83})
    },
    goto (url) {
      window.open(url, '_blank')
    }
  },
  computed: {
    ...mapState({
      langHome: state => state.language.home.home
    })
  },
  mounted () {
    this.sizeHandle = () => {
      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) + 400 > sy) {
        this.slideActive = true
      }

      if (this.startNumCount && this.slideActive) {
        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>