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

<template>
  <div class="about-layout" ref="aboutLayout">
    <aboutBg class="about-bg"/>
    <div id="luxy" >
      <div class="plate01 plate">
        <img class="about-logo" :src="`${$cdn}images/about_logo.png`" alt>
        <div class="introduce">
          <img :src="`${$cdn}images/fdage.png`" alt>
          <div class="intro-r">
            <div class="item" v-for="(item,index) in langAbout.intro" :key="index">
              <img src="@/assets/images/DFKI.png" v-if="item.img" alt="">
              <div class="b-title">{{item.name}}</div>
              <p class="b-label" v-for="(sub,i) in item.txt" :key="i" >{{sub}}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="plate02 ">
        <img :src="`${$cdn}images/hezhao.png`" alt>
      </div>
      <div class="plate03" :style="{marginLeft:(split - 405)+ 'px'}">
        <div class="event plate">
          <touch class="touch-layout" :iactive='iactive' :data="imgs" :width="360" :loop="3000">
            <div class="item" slot="item" slot-scope="{item}">
              <img :src="item.img">
            </div>
            <div slot="foot" slot-scope="{data, index}" class="ban">
              <span @click="iactive=i" v-for="(item, i) in data" :key="i" :class="{active: i===index}"></span>
            </div>
          </touch>
          <div class="e-node">
            <h2>{{langAbout.events.title}}</h2>
            <ul>
              <li v-for="(item,idx) in langAbout.events.nodes" :key="idx">
                <h3>{{item.year}}</h3>
                <p v-for="(sub, i) in item.txt" :key="i">{{sub}}</p>
              </li>
            </ul>
          </div>
        </div>
        <div class="contact plate">
          <img :src="`${$cdn}images/company.png`" alt>
          <div class="e-node">
            <ul>
              <li v-for="(item,idx) in langAbout.kefu" :key="idx">
                <h3 :class="item.class">{{item.title}}</h3>
                <p v-for="(sub, i) in item.content" :key="i">{{sub}}</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <ifooter/>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import aboutBg from '@/components/aboutBg'
import touch from '@/components/touch'
import footer from '@/page/layout/footer'
import { getPosition } from '@/util'

import * as luxy from 'luxy.js'

export default {
  data () {
    const imgs = [
      {
        img: this.$cdn + 'images/event.png'
      },
      {
        img: this.$cdn + 'images/about1.jpg'
      },
      {
        img: this.$cdn + 'images/about2.jpg'
      },
      {
        img: this.$cdn + 'images/about3.jpg'
      },
      {
        img: this.$cdn + 'images/about4.jpg'
      },
      {
        img: this.$cdn + 'images/about5.jpg'
      }
    ]
    return {
      imgs,
      iactive: 0
    }
  },
  components: {
    aboutBg,
    touch,
    ifooter: footer
  },
  computed: {
    ...mapState({
      split: state => state.ui.navDivision,
      langAbout: state => state.language.home.about
    })
  },
  mounted () {
    this.timeout = setTimeout(() => {
      luxy.init({
        wrapperSpeed: 0.06
      })
      let height = getPosition(this.$refs.aboutLayout).y
      let items = Array.from(this.$refs.aboutLayout.querySelectorAll('.plate'))
      this.scrollHandle = function () {
        items.forEach((item, index) => {
          let addHeight = item.offsetParent && (item.offsetParent.nodeName).toLowerCase() === 'body' ? (item.offsetTop + height) : (item.offsetTop + item.offsetParent.offsetTop + height)
          if (addHeight <= window.innerHeight + (window.scrollY || window.pageYOffset) - 300) {
            item.classList.remove(`hide${index + 1}`)
          } else {
            item.classList.add(`hide${index + 1}`)
          }
        })
      }
      window.addEventListener('scroll', this.scrollHandle)
      this.scrollHandle()
    }, 100)
  },
  destroyed () {
    clearTimeout(this.timeout)
    window.removeEventListener('scroll', this.scrollHandle)
  }
}
</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>