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

<template>
  <div class="product-layout" ref="productLayout">
    <div class="plate01 plate">
      <img class="pl01-bg" src="@/assets/images/t-bg.png" alt="">
      <div class="layout" :style="{marginLeft:(split - 170)+ 'px'}">
        <img class="product-img" src="@/assets/images/t_product.png" alt="">
        <div class="info">
          <h2>4DKankan Pro</h2>
          <h2>全球首款 消费级3D空间相机</h2>
          <p><span class="money">￥4999</span>起</p>
          <p class="p1">安霸H2V95专业级芯片，1600万像素双鱼眼</p>
          <p class="p2">Sony IMX 206图像传感器，超爽握感轻便随行</p>
          <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>
      <div class="benefit plate">
        <h2 class="b-title">3D 4K实景复刻神器</h2>

        <div :style="{'animation-delay': `${index*0.2}s`}" class="item" v-for="(benefit, index) in benefitGroup" :key="index">
          <i class="iconfont" :class="benefit['fontImg']"></i>
          <h3>{{benefit.title}}</h3>
          <p v-html="benefit.content"></p>
        </div>
      </div>
    </div>

    <div class="plate02 plate">
      <div class="application">
        <h2>4DKankan App</h2>
        <h2>快速编辑和分享你的互动式视频</h2>
        <h3>分享你的空间故事</h3>
        <div class="download-btn">
          <div class="apple">App Store</div>
          <div class="android">Android</div>
        </div>
      </div>
      <div class="app-img">
        <img src="@/assets/images/app_img1.png"  class="i1">
        <img src="@/assets/images/app_img2.png"  class="i2">
        <img src="@/assets/images/app_img3.png"  class="i3">
      </div>
    </div>

    <div class="plate03 plate">
      <div class="info">
        <h2 class="b-title">身临其境，自动导览</h2>
        <p class="b-label">同步录制漫游和声音，带你声临其境，享你所享</p>
        <!-- <img src="@/assets/images/product_img_content_4.png" alt=""> -->
        <phone src="https://www.4dkankan.com/showPC.html?m=5cQcvVwp" />
      </div>
      <div class="fkkj-layout plate">
        <div class="fkkj-imgcon">
          <img class="fk_logo" src="@/assets/images/fk_logo.png" alt="">
          <img class="fk_jiantou" src="@/assets/images/fk_jiantou.png" alt="">
          <img class="fk_jiantou-2" src="@/assets/images/fk_jiantou.png" alt="">
          <img class="fk_img" src="@/assets/images/fk_img.png" alt="">
          <div class="upload_txt">上传至云端计算</div>
          <img class="fk_shouji" src="@/assets/images/fk_shouji.png" alt="">
          <div class="shouji_txt">用户端空间展示</div>
          <img class="fk_paishe" src="@/assets/images/fk_paishe.png" alt="">
          <div class="paishe_txt">APP+空间相机拍摄</div>
          <img class="fk_upload" src="@/assets/images/fk_upload.png" alt="">
          <img class="fk_mask" src="@/assets/images/fk_mask.png" alt="">
          <img class="fk_mask_1" src="@/assets/images/fk_mask.png" alt="">
          <img class="fk_mask_2" src="@/assets/images/fk_mask.png" alt="">
        </div>
        <div class="fkkj-right"><h2 class="b-title">十分钟复刻空间简便易用</h2></div>
      </div>
      <div class="mxsc-layout plate">
        <div class="mxsc-left">
          <h2 class="b-title">空间模型瞬间自动生成</h2>
          <p class="b-label">平面结构一目了然</p>
        </div>
        <div class="mxsc-imgcon">
          <img class="mx_house" src="@/assets/images/mx_house.png" alt="">
          <img class="mx_platform" src="@/assets/images/mx_platform.png" alt="">
        </div>
      </div>
      <div class="hdsp-layout plate">
        <div class="hdsp-imgcon">
          <img class="hdsp_1" src="@/assets/images/hdsp_1.png" alt="">
          <img class="hdsp_2" src="@/assets/images/hdsp_2.png" alt="">
          <img class="hdsp_3" src="@/assets/images/hdsp_3.png" alt="">
        </div>
        <div class="hdsp-right">
          <h2 class="b-title">编辑和分享互动式视频</h2>
          <p class="b-label">让你的空间讲故事</p>
        </div>
      </div>
    </div>

    <div class="plate04 ">
      <div class="info plate" ref='p4Info'>
        <h2 class="b-title">极致工艺，登峰造极</h2>
        <p class="b-label">由多达794个精密元件组装而成，超细腻喷涂工艺</p>
        <div class="boom">
        </div>
      </div>
    </div>

    <div class="plate05 plate">
      <div class="info">
        <div class="b-title">4DKankan PRO详细参数</div>
        <img src="@/assets/images/product_img_content_6.jpg" alt="">

        <div class="standard-layout">
          <div class="standard-xinghao">
            <h3 class="s-title">{{standardGroup.label}}</h3>
            <div class="s-value">{{standardGroup.name}}</div>
            <p v-for="(standard,i) in standardGroup.info" :key="i">
              <span class="s-value">{{standard.label}} :</span>
              <span class="s-value">{{standard.value}}</span>
            </p>
          </div>
          <div class="standard-params">
            <div class="s-params1">
              <div class="s1-con" v-for="(item,idx) in standardGroup.params1" :key="idx">
                <h3 class="s-title">{{item.label}}</h3>
                <p class="s-value" 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 standardGroup.params2" :key="idx">
                <h3 class="s-title">{{item.label}}</h3>
                <p class="s-value" v-for="(sub,i) in item.value" :key="i">
                  {{sub}}
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="btns">
          <a 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'

export default {
  data () {
    let benefitGroup = [
      {
        fontImg: 'icon-koudai',
        icon: require('@/assets/images/product_img_02_a@2x.png'),
        title: '轻便易携  装进口袋',
        content: '机身体积与普通手机无异， <br>重量为115克，<br>仅为同类型产品重量的1/30。'
      },
      {
        fontImg: 'icon-jianmo',
        icon: require('@/assets/images/product_img_02_b@2x.png'),
        title: '轻松操作  高效建模',
        content: '无需具备专业知识，10分钟即可采集<br>100平米空间数据，一键上传云端系统， <br>5分钟自动生成模型。'
      },
      {
        fontImg: 'icon-manyou',
        icon: require('@/assets/images/product_img_02_c@2x.png'),
        title: '高精还原   空间漫游',
        content: '720°无死角复刻3D实景， <br>呈现4K高清画质， <br>实现沉浸式空间漫游。'
      },
      {
        fontImg: 'icon-paise',
        icon: require('@/assets/images/product_img_02_d@2x.png'),
        title: '室内室外   皆可拍摄',
        content: '攻克同类型设备无法采集室外数据<br>的技术难点，使得3D数据采集<br>不再受地点限制，室内室外皆可完成。'
      },
      {
        fontImg: 'icon-genxing',
        icon: require('@/assets/images/product_img_02_e@2x.png'),
        title: '自由编辑   随时更新',
        content: '贴心打造模型编辑平台<br>支持图文、 视频、 链接等信息热点的<br>添加及更新。'
      }
    ]

    let showGroup = [
      {
        title: '空间模型瞬间自动生成',
        label: '平面结构一目了然',
        cover: require('@/assets/images/product_img_content_1.jpg')
      },
      {
        title: '编辑属于你的空间故事',
        label: '让故事迷漫於空间',
        cover: require('@/assets/images/product_img_content_2.jpg')
      },
      {
        title: '把世界装进口袋里',
        label: '世界掌握在你手中',
        cover: require('@/assets/images/product_img_content_3.jpg')
      }
    ]

    let standardGroup = {
      label: '型号',
      name: '四维二目',
      info: [{
        label: '高度',
        value: '141.5毫米'
      }, {
        label: '宽度',
        value: '71.1mm'
      }, {
        label: '厚度',
        value: '17.98mm'
      }, {
        label: '重量',
        value: '115g'
      }],
      params1: [{
        label: '材质',
        value: ['钛金属', '磨砂背']
      }, {
        label: '摄像头',
        value: ['f / 2.0 大光圈镜头', '3200万像素SNOY sensor', '220°双鱼眼镜头', '9片8组光学镜头', '3K视频录制速度为30fps']
      }, {
        label: '连接',
        value: ['蓝牙：5.0', 'WiFi：802.11a / b / g / n / ac']
      }, {
        label: '',
        value: []
      }],
      params2: [{
        label: '电池',
        value: ['3040mAh', '通过USB快速充电']
      }, {
        label: '存储',
        value: ['支持128G TF卡', '3K视频 录制120分钟']
      }, {
        label: '端口',
        value: ['microUSB', '三脚架固定孔']
      }, {
        label: '防水防尘',
        value: ['IP54']
      }]
    }

    return {
      benefitGroup,
      showGroup,
      standardGroup
    }
  },
  computed: {
    ...mapState({
      split: state => state.ui.navDivision
    })
  },
  methods: {

  },
  mounted () {
    this.timeout = setTimeout(() => {
      let height = getPosition(this.$refs.productLayout).y
      let items = Array.from(this.$refs.productLayout.querySelectorAll('.plate'))
      this.scrollHandle = function () {
        items.forEach((item, index) => {
          let isContain = Array.from(item.classList).some(sub => {
            return sub === 'hdsp-layout' || sub === 'mxsc-layout' || sub === 'benefit'
          })

          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 && isContain) {
            item.classList.remove(`hide${index + 1}`)
          } else if (addHeight <= window.innerHeight + (window.scrollY || window.pageYOffset) - 500 && !isContain) {
            item.classList.remove(`hide${index + 1}`)
          } else {
            item.classList.add(`hide${index + 1}`)
          }
        })
      }
      window.addEventListener('scroll', this.scrollHandle)
      this.scrollHandle()
    }, 300)
  },
  destroyed () {
    clearTimeout(this.timeout)
    window.removeEventListener('scroll', this.scrollHandle)
  },
  components: {vcenter, phone}
}
</script>

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