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

<template>
  <div class="location-layout">
    <div class="plate01">
      <div class="layout">
        <div class="info">
          <h2>{{langCoreTech.kjdw.title}}</h2>
          <p>{{langCoreTech.kjdw.dec}}</p>
        </div>
        <div class="p1-model">
          <img src="@/assets/images/hxjs-model.png" alt>
          <div class="pulse" v-for="(item,i) in langCoreTech.kjdw.points" :style="item.posi" :key="i"></div>
        </div>
      </div>
    </div>

    <div class="plate02">
      <div class="info">
        <img src="@/assets/images/img_core_app_phone.png" alt>
        <div class="info-r">
          <h2>{{langCoreTech.kjdw.ability.name}}</h2>
          <p>{{langCoreTech.kjdw.ability.sub}}</p>
          <div class="item" v-for="(item,i) in langCoreTech.kjdw.ability.app" :key="i">
            <div class="icon" :style="item.icon"></div>
            <p v-html="item.sub"></p>
          </div>
        </div>
      </div>
    </div>

    <div class="plate03" id="kjjm">
      <div class="info">
        <h2>{{langCoreTech.kjjm.title}}</h2>
      </div>
      <iframe
        class="ifr"
        src="https://model3d.4dage.com/3D/2018/model/Model.html?m=561"
        frameborder="0"
      ></iframe>
    </div>

    <div class="plate04">
      <div class="info">
        <p>{{langCoreTech.kjjm.dec[0]}}</p>
        <p>{{langCoreTech.kjjm.dec[1]}}</p>
        <p>{{langCoreTech.kjjm.dec[2]}}</p>
        <div class="p4-char">
          <div v-for="(item,index) in langCoreTech.kjjm.chars" :key="index">
            <div class="icon" :style="item.icon"></div>
            <!-- <h3>{{item.title}}</h3> -->
            <p v-html="item.sub"></p>
          </div>
        </div>
      </div>
    </div>

    <div class="plate05" id="kjzs">
      <div class="info">
        <h2>{{langCoreTech.kjzs.title}}</h2>
        <p>{{langCoreTech.kjzs.sub[0]}}</p>
        <p>{{langCoreTech.kjzs.sub[1]}}</p>
      </div>
      <iframe class="ifr" src="https://www.4dkankan.com/showPC.html?m=TZpQAf28" frameborder="0"></iframe>
    </div>

    <div class="plate06">
      <div class="top">
        <div class="intro">
          <h3>{{langCoreTech.kjzs.sdkz.name}}</h3>
          <p>{{langCoreTech.kjzs.sdkz.sub}}</p>
          <img src="@/assets/images/app-label2.jpg" alt>
        </div>
        <img class="i-intro" src="@/assets/images/img_core_show_ele.jpg" alt>
      </div>
      <div class="bottom">
        <img class="i-intro" src="@/assets/images/img_core_show_zfb.jpg" alt>
        <div class="intro">
          <h3>{{langCoreTech.kjzs.zfb.name}}</h3>
          <p>{{langCoreTech.kjzs.zfb.sub}}</p>
          <!-- <img src="@/assets/images/app-label3.jpg" alt=""> -->
        </div>
      </div>
    </div>

    <div class="plate07">
      <div class="info">
        <div class="txt">
          <h3>{{langCoreTech.jianrong.name}}</h3>
          <p>{{langCoreTech.jianrong.sub}}</p>
        </div>
        <ul class="terminal">
          <li v-for="(item,i) in langCoreTech.jianrong.terminal" :key="i">
            <img :src="item.img" alt>
            <h3>{{item.txt}}</h3>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  data () {
    return {

    }
  },
  computed: {
    ...mapState({
      langCoreTech: state => state.language.home.coreTech
    })
  }
}
</script>

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