<template>
  <div class="technology">
    <div class="top">
      <img src="@/assets/img/technology_1.png" alt="">
      <div>
        <h1>{{ technology[characters].title}}</h1>
        <p>{{ technology[characters].desc1}}</p>
      </div>
    </div>
    <div>
    <div class="ct2">
      {{ technology[characters].desc2}}
    </div>
    </div>
    <div>
      <img src="@/assets/img/technology_2.png" alt="">
    </div>
    <div class="ct2">
      {{ technology[characters].desc}}
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  data(){
    return {
      technology: {
        1: {
          title: 'MetaGene Avater技术',
          desc1: 'MetaGene是邃芒科技创造数字人的核心技术，以GAN（生成对抗网络）、NeRF（神经辐射场） 以及多模态合成技术为基础，由数字人形象、数字人驱动以及数字人交互等组成的数字人创造平台， 是元宇宙的基础设施。',
          desc2: '通过MetaGene可以实时创造2K分辨率的虚拟数字人形象，或复刻真人形象，并且可以自由的编辑及风格化。',
          desc3: 'MetaGene还支持语音、文字、视频等多种有/无中之人的数字人驱动方式，实时的生成高质量的驱动视频。',
        }
      }
    }
  },
  computed: {
    ...mapState({
      characters: state => state.publicObj.characters
    })
  }
}
</script>
<style lang="scss" scoped>
  .technology{
    .top{
      position: relative;
      div{
        position: absolute;
        left: 95px;
        right: 95px;
        bottom: 90px;
        h1{
          font-size: 34px;
          color: #fff;
        }
        p{
          font-size: 26px;
          margin-top: 35px;
          color: #fff;
        }
      }
    }
    .ct2{
      font-size: 26px;
      margin: 75px 95px;
      color: #3d3d3d;
    }
  }
</style>
