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

<template>
  <div class="product-layout" ref="productLayout">
    <div class="plate01 plate">
      <img class="pl01-bg" :src="`${$cdn}images/eight-bg.png`" alt="">
      <div class="layout" :style="{marginLeft:(split - 180)+ 'px'}">
        <img class="product-img" :src="`${$cdn}images/banner_pro.png`" alt="">
        <div class="info">
          <img class="txt-logo" :src="language==='en'?`${$cdn}images/pro-en.png`:`${$cdn}images/pro.png`" alt>
          <div class="logo-dec" v-if="language==='en'">{{langEight.introduce.title}}</div>
          <h2 class="b-title">{{langEight.introduce.price}}</h2>
          <div class="lite-line"></div>
          <p class="b-label" v-html="langEight.introduce.dec"></p>
          <div class="btns" @click="$router.push({name:'purchase'})">
            <div class="button"><vcenter><img :src="`${$cdn}images/product_icon_arrow.png`" alt=""></vcenter></div>
            <div class="button buy">{{langEight.introduce.btn}}</div>
          </div>
        </div>
      </div>
      <div class="benefit plate">
        <h2 class="b-title">{{langEight.introduce.subTitle}}</h2>
        <div class="char-con">
          <div :style="{'animation-delay': `${index*0.2}s`}" class="item" v-for="(benefit, index) in langEight.introduce.benefitGroup" :key="index">
            <i class="iconfont" :class="benefit['fontImg']"></i>
            <h3 class="b-label" v-html="benefit.title"></h3>
          </div>
        </div>
      </div>
    </div>

    <div class="plate02 plate">
      <div class="application">
        <h2>{{langEight.app.title}}</h2>
        <h2>{{langEight.app.sub[0]}}</h2>
        <h3>{{langEight.app.sub[1]}}</h3>
        <div class="download-btn">
          <div class="apple">App Store</div>
          <div class="android">Android</div>
        </div>
      </div>
      <div class="app-img">
        <img :src="`${$cdn}images/app_img1.png`"  class="i1">
        <img :src="`${$cdn}images/app_img2.png`"  class="i2">
        <img :src="`${$cdn}images/app_img3.png`"  class="i3">
      </div>
    </div>

    <div class="plate03 plate">
      <div class="front">
        <div class="f-top">
          <h2 class="b-title" v-if="language==='en'">{{langEight.definition.title}}</h2>
          <img class="txt-img" v-else :src="`${$cdn}images/10K.png`" alt="">
          <p class="b-label" v-for="(item,i) in langEight.definition.top.dec" :key="i">{{item}}</p>
        </div>
        <div class="f-img">
          <video class="p3-video" src="@/assets/video/fenbianlv.mp4" autoplay muted loop></video>
        </div>
        <!-- <phone class="p3-phone" :src="require('@/assets/video/fenbianlv.mp4')"/> -->
        <p class="f-dec b-label">{{langEight.definition.top.intro}}</p>
      </div>
    </div>

    <div class="plate04 plate">
      <div class="hsxp-layout">
        <div class="hsxp-imgcon">
          <video class="hsxp-video" src="@/assets/video/xinpian.mp4" autoplay muted loop></video>
        </div>
        <div class="hsxp-right">
            <div class="b-title">{{langEight.hardware[1].title[0]}}</div>
            <div class="b-label">{{langEight.hardware[1].title[1]}}</div>
        </div>
      </div>
      <div class="qmjt-layout plate">
        <div class="qmjt-left">
            <div class="b-title">{{langEight.hardware[2].title[0]}}</div>
            <div class="b-label">{{langEight.hardware[2].title[1]}}</div>
            <div class="b-label">{{langEight.hardware[2].title[2]}}</div>
        </div>
        <div class="qmjt-imgcon">
          <img :src="`${$cdn}images/lens.png`" alt="">
        </div>
      </div>
      <!-- <div class="cgq-layout plate">
        <div class="cgq-imgcon">
          <div></div>
        </div>
        <div class="cgq-right">
            <div class="b-title">{{langEight.hardware[3].title[0]}}</div>
        </div>
      </div> -->
      <!-- <div class="jzxj-layout plate">
        <div class="jzxj-left">
            <div class="b-title">{{langEight.hardware[4].title[0]}}</div>
            <div class="b-label">{{langEight.hardware[4].title[1]}}</div>
        </div>
        <div class="jzxj-imgcon">
          <img :src="`${$cdn}images/jzxj.png`" alt="">
        </div>
      </div> -->
    </div>

    <div class="plate05" >
      <div class="qingxidu">
        <div class="b-title">{{langEight.feature.definition.title}}</div>
        <compare class="c-qxd" :content="langEight.feature.definition.case1.content"
        :back="langEight.feature.definition.case1.back"
        :ltxt="langEight.feature.definition.case1.lTxt"
        :rtxt="langEight.feature.definition.case1.rTxt"
        :lmask="langEight.feature.definition.case1.lMask"
        :rmask="langEight.feature.definition.case1.rMask"
        />
      </div>
      <div class="qingxidu ceju" ref="linecanvas">
        <div class="b-title">{{langEight.feature.ranging.title[0]}}</div>
        <!-- <Linecanvas :start='runLineCanvas' class="line-canvas" /> -->
        <img class="ceju-img" :src="runLineCanvas?`${$cdn}images/ceju.gif`:`${$cdn}images/ceju-n.gif`">
        <div class="line-txt b-label">
            <span>{{runLineCanvas?langEight.feature.ranging.sub:langEight.feature.ranging.hide}}</span>
            <img @click="runLineCanvas=!runLineCanvas" :src="runLineCanvas?`${$cdn}images/canvas-right.png`:`${$cdn}images/canvas-left.png`" alt="">
        </div>
      </div>
      <div class="qingxidu" >
        <div class="b-title">{{langEight.feature.manyou.title[0]}}</div>
        <div class="mxsc plate">
          <img class="mx-bg" :src="`${$cdn}images/liti1.png`" alt="">
          <img class="mx-1" :src="language==='en'?`${$cdn}images/liti2-en.png`:`${$cdn}images/liti2.png`" alt="">
          <img class="mx-2" :src="`${$cdn}images/liti3.png`" alt="">
        </div>
      </div>
      <div class="qingxidu last-item">
        <div class="b-title">{{langEight.feature.model.title[0]}}</div>
        <compare class="c-qxd" :content="langEight.feature.model.case2.content"
        :back="langEight.feature.model.case2.back"
        :ltxt="langEight.feature.model.case2.lTxt"
        :rtxt="langEight.feature.model.case2.rTxt" />
      </div>

    </div>

    <div class="plate06">
      <div class="info plate">
        <h2 class="b-title">{{langEight.technology.title}}</h2>
        <p class="b-label" v-html="langEight.technology.dec"></p>
        <div class="boom"></div>
      </div>
    </div>

    <div class="plate07">
      <div class="info">
        <div class="b-title">{{langEight.parmas.name}}</div>
        <img :src="`${$cdn}images/product_img_content_6.png`" alt="">
        <div class="standard-layout">
          <div class="standard-xinghao">
            <h3 class="s-title b-label">{{langEight.standardGroup.label}}</h3>
            <div class="s-value b-label">{{langEight.standardGroup.name}}</div>
            <p v-for="(standard,i) in langEight.standardGroup.info" :key="i">
              <span class="s-value b-label">{{standard.label}} :</span>
              <span class="s-value b-label">{{standard.value}}</span>
            </p>
          </div>
          <div class="standard-params">
            <div class="s-params1">
              <div class="s1-con" v-for="(item,idx) in langEight.standardGroup.params1" :key="idx">
                <h3 class="s-title b-label">{{item.label}}</h3>
                <p class="s-value b-label" v-for="(sub,i) in item.value" :key="i">
                  {{sub}}
                </p>
              </div>
            </div>
            <div class="s-params2">
              <div class="s2-con" v-for="(item,idx) in langEight.standardGroup.params2" :key="idx">
                <h3 class="s-title b-label">{{item.label}}</h3>
                <p class="s-value b-label" v-for="(sub,i) in item.value" :key="i">
                  {{sub}}
                </p>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="btns">
          <a :to="{name:'purchase'}" href="" class="button">立即购买</a>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
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'
import browser from '@/util/browser'

export default {
  data () {
    let params = [
      '1/2.3 12M CMOS感应器x2(输出像素数等同于 14M)',
      '30fps',
      '新开发的F2.0镜头',
      '25分钟连续拍摄'
    ]

    let params2 = [
      {
        icon: this.$cdn + 'images/icon1.png',
        txt: '实时分享实训世界的所有惊喜。如今，360度图像可实现即时串流！'
      },
      {
        icon: this.$cdn + 'images/icon2.png',
        txt: '使用专用智能手机应用程式，拍摄的同事检查曝光和白平衡。'
      },
      {
        icon: this.$cdn + 'images/icon3.png',
        txt: '快门速度的设定范围为1/6400秒'
      },
      {
        icon: this.$cdn + 'images/icon4.png',
        txt: '静态图像：（大）约1600'
      }
    ]

    return {
      params,
      params2,
      runLineCanvas: true,
      canLine: true,
      ismobile: browser.mobile,
      runNum: 'up',
      numArr: {},
      case1: {
        content: this.$cdn + 'video/8k.mp4',
        back: this.$cdn + 'video/4k.mp4',
        lTxt: '普通',
        rTxt: '4DKankan PRO',
        lMask: '4K高清',
        rMask: '8K高清图像，3倍放大'
      },
      case2: {
        content: this.$cdn + 'video/qingxi.mp4',
        back: this.$cdn + 'video/moku.mp4',
        lTxt: '普通',
        rTxt: '4DKankan PRO'
      }
    }
  },
  computed: {
    ...mapState({
      split: state => state.ui.navDivision,
      language: state => state.language.current,
      langEight: state => state.language.home.eight
    })
  },
  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
          }
        }
      }
    }
  },
  mounted () {
    let height = getPosition(this.$refs.productLayout).y
    let lc = getPosition(this.$refs.linecanvas).y + this.$refs.linecanvas.offsetHeight

    let items = Array.from(this.$refs.productLayout.querySelectorAll('.plate'))
    this.scrollHandle = () => {
      if (window.innerHeight + (window.scrollY || window.pageYOffset) - 200 > lc && this.canLine) {
        this.canLine = false
        this.runLineCanvas = true
      }

      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) - 200) {
          item.classList.remove(`hide${index + 1}`)
        } else {
          item.classList.add(`hide${index + 1}`)
        }
      })
    }
    window.addEventListener('scroll', this.scrollHandle)
    let removeListener = () => {
      (Math.round(devicePixelRatio * 100) !== 100 && devicePixelRatio > 1.5) && window.removeEventListener('scroll', this.scrollHandle)
    }
    removeListener()
    window.addEventListener('resize', () => {
      removeListener()
    })
  },
  destroyed () {
    window.removeEventListener('scroll', this.scrollHandle)
  },
  components: {vcenter, Linecanvas, phone, compare, number}
}
</script>

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