Front_End_CN/src/pages/home/index.vue

<template>
  <Scroll class="ov">
    <div class="home_1" ref="video">
      <img src="http://video.cgaii.com/new4dage/images/images/home_ban.jpg" v-if="isMobile" alt="">
      <video
        src="http://model3d.4dage.com/video/H5/homeVideo.mp4"
        loop="loop" preload="" autoplay="autoplay" muted="muted" v-else ></video>
      <div>
        <div>
          <h1>让 数 字 化 飞 入 寻 常 百 姓 家</h1>
          <p>Bring Digital Technologies to the Everyday Life of Common People</p>
        </div>
      </div>
    </div>
    <div class="home-layout">
      <div class="home_2 clear">
        <h2 class="m-title">产品中心<a href="#/product" v-if="!isMobile && width <= 500">更多产品   →</a></h2>
        <div class="h_2_layout">
          <a class="h-m-1" href="#/product?id=swkk">
            <div class="img"></div>
            <div class="info">
              <h3>四维看看</h3>
              <p>世界上⾸款消费级3D相机</p>
            </div>
          </a>
          <a class="h-m-2" href="#/product?id=wwq">
            <div class="img"></div>
            <div class="info">
              <h3>万物墙</h3>
              <p>⼀体化展示的数字互动⼤屏</p>
            </div>
          </a>
          <a class="h-m-3" href="#/product?id=swys">
            <div class="img"></div>
            <div class="info">
              <h3>四维艺术</h3>
              <p>⼈⼈皆可成为艺术⼤师</p>
            </div>
          </a>
        </div>
      </div>

      <div class="home_3">
        <div class="bg"></div>
        <h2 class="m-title">解决方案</h2>
        <div class="catg clear">
          <router-link :to="{name: 'planculture'}">
            <div></div>
            <h3>数字文博</h3>
            <p>融合自动化三维数字建模技术和高精度机器视觉，深耕数字博物馆及数字文物保护，再现华夏灿烂文明。</p>
          </router-link>
          <router-link :to="{name: 'planlife'}">
            <div></div>
            <h3>数字生活</h3>
            <p>通过三维数字化技术和大数据学习成果，创造开放、高效、便捷生活方式，让数字化飞入寻常百姓家。</p>
          </router-link>
          <router-link :to="{name: 'planindustry'}">
            <div></div>
            <h3>数字工业</h3>
            <p>将高精度三维机器视觉和SLAM技术应用到工业生产的各个环节，提高制造效率，改善产品质量，降低成本和资源消耗。</p>
          </router-link>
        </div>
      </div>

      <div class="home_4">
        <h2 class="m-title">核心技术</h2>
        <div class="clear">
          <a href="#/technology?id=szjm">
            <img src="http://video.cgaii.com/new4dage/images/images/home_4_a.jpg">
            <h3>自动化三维数字建模</h3>
            <p>采集图片后上传至云端服务器处理，生成三维立体模型，实现拍照建模。云端服务器计算过程快速、全自动，无需人工干预。广泛应用于文博、电商、房地产等领域。</p>
          </a>
          <a href="#/technology?id=jqsj">
            <img src="http://video.cgaii.com/new4dage/images/images/home_4_b.jpg">
            <h3>高精度机器视觉</h3>
            <p>应用光学原理，使用普通或深度相机结构光等方式对物体进行测距，并对物体结构进行建模和还原，计算速度快、精度高。广泛应用于文博、地产电商等领域。</p>
          </a>
          <a href="#/technology?id=slam">
            <img src="http://video.cgaii.com/new4dage/images/images/home_4_c.jpg">
            <h3>SLAM视觉追踪</h3>
            <p>用自主研发的SLAM算法处理图片融合传感器数据获取位姿信息，为移动智能设备提供三维空间环境信息。该方案获取的相机位姿更准确稳定，点云数据更丰富。可广泛应用于机器人、无人机、AR/VR等自主移动设备中。</p>
          </a>
          <a href="#/technology?id=sjjs">
            <img src="http://video.cgaii.com/new4dage/images/images/home_4_d.jpg">
            <h3>人工智能视觉技术</h3>
            <p>应用四维时代自主研发的机器学习算法，提取图像的高层语义信息，并作出智能分析和判断，实现人脸识别、目标检测和风格迁移。</p>
          </a>
        </div>
      </div>

      <div class="home_5" ref="mxl2_1">
        <h2 class="m-title">
          客户案例
          <!-- <router-link :to="{name: 'case_list'}" v-if="!isMobile">更多案例   →</router-link> -->
        </h2>
        <div class="clear">
          <div class="h_5_2 categ_h_5">
            <router-link class="h_5_article" :to="{name: 'case_details', params: {id: '文博'}}">
            <!-- http://video.cgaii.com/new4dage/images/images/ -->
              <img src="http://video.cgaii.com/new4dage/images/images/h_5_1.jpg">
              <div>
                <p>文博</p>
              </div>
            </router-link>
            <div class="h_5_2">
              <router-link class="h_5_article" :to="{name: 'case_details', params: {id: '政务'}}">
                <img src="http://video.cgaii.com/new4dage/images/images/h_5_2.jpg">
                <div>
                  <p>政务</p>
                </div>
              </router-link>
              <router-link class="h_5_article" :to="{name: 'case_details', params: {id: '电商'}}">
                <img src="http://video.cgaii.com/new4dage/images/images/h_5_3.jpg">
                <div>
                  <p>电商</p>
                </div>
              </router-link>
            </div>
          </div>
          <div class="h_5_2 categ_h_5">
            <div class="h_5_2">
              <router-link class="h_5_article" :to="{name: 'case_details', params: {id: '工业'}}">
                <img src="http://video.cgaii.com/new4dage/images/images/h_5_4.jpg">
                <div>
                  <p>工业</p>
                </div>
              </router-link>
              <router-link class="h_5_article" :to="{name: 'case_details', params: {id: '地产'}}">
                <img src="http://video.cgaii.com/new4dage/images/images/h_5_5.jpg">
                <div>
                  <p>地产</p>
                </div>
              </router-link>
            </div>
            <router-link class="h_5_article" :to="{name: 'case_details', params: {id: '文物'}}">
              <img src="http://video.cgaii.com/new4dage/images/images/h_5_6.jpg">
              <div>
                <p>文物</p>
              </div>
            </router-link>
          </div>
        </div>
      </div>

      <div class="home_6" ref="mxl2_2">
        <h2 class="m-title">新闻中心
           <router-link :to="{name: 'information_news'}" v-if="!isMobile">更多新闻   →</router-link>
        </h2>
        <Slide :screens="news.data" :current="news.index">
          <div slot="item" slot-scope="{data, index}" class="h_6_slide_item clear">
            <div class="item-img">
              <div>
                <!-- #/information/news/14 -->
                <img :src="data.image">
                <div class="h_6_slide_foot">
                  <span v-for="(a,i) in news.data" :key="i" :class="{active: i === index}" @click="news.index=i"></span>
                </div>
              </div>
              <p>{{data.maker}}</p>
            </div>
            <div class="item-content">
              <h3>{{data.title}}</h3>
              <div v-html="data.content"></div>
              <a :href="data.link">阅读全文>></a>
            </div>
          </div>
        </Slide>
      </div>

      <div class="home_7" ref="mxl3_1">
        <h2 class="m-title">合作伙伴</h2>
        <div v-if="isMobile" class="phone-cls">
          <img v-for="img in hzbh" :key="img" :src="img" alt="">
        </div>
        <div v-else>
          <!-- <img src="http://video.cgaii.com/new4dage/images/images/cooperation_main.jpg" alt=""> -->
          <img src="http://video.cgaii.com/new4dage/images/images/cooperation_main.jpg" alt="">
        </div>
      </div>

      <div class="home_8" ref="mxl2_3">
        <div class="bg"></div>
        <h2 class="m-title">四维时代</h2>
        <p>让数字化飞入寻常百姓家</p>
        <div class="h_8_catg clear">
          <Slide :screens="courses.data" v-if="isMobile" :current="courses.index">
            <div slot="item" slot-scope="{data: course}" class="course-item corse-item-slide">
              <!-- <h3><span>{{course.title}}</span></h3> -->
              <div>
                <p v-for="(c, i) in course.content" :key="i">{{c}}</p>
              </div>
            </div>
            <div slot="foot" slot-scope="{index}" class="time-zhou">
              <span
                v-for="(course, i) in courses.data"
                :key="course.time"
                @click="courses.index = i"
                :class="{active: i === index}">{{course.time}}</span>
            </div>
          </Slide>
          <div class="course-item" v-for="course in courses.data" :key="course.time" v-else>
            <h3>
              {{course.time}}
              <!-- <span>{{course.title}}</span> -->
            </h3>
            <div>
              <p v-for="(c, i) in course.content" :key="i">{{c}}</p>
            </div>
          </div>
        </div>
      </div>

    </div>
  </Scroll>
</template>

<script>
import Scroll from '@/components/Scroll'
import Slide from '@/components/Slide'
import browser from '@/util/browser'
const hzbh = [
  'http://video.cgaii.com/new4dage/images/images/hb01.png',
  'http://video.cgaii.com/new4dage/images/images/hb02.png',
  'http://video.cgaii.com/new4dage/images/images/hb03.png',
  'http://video.cgaii.com/new4dage/images/images/hb04.png',
  'http://video.cgaii.com/new4dage/images/images/hb05.png',
  'http://video.cgaii.com/new4dage/images/images/hb06.png',
  'http://video.cgaii.com/new4dage/images/images/hb07.png',
  'http://video.cgaii.com/new4dage/images/images/hb08.png',
  'http://video.cgaii.com/new4dage/images/images/hb09.png',
  'http://video.cgaii.com/new4dage/images/images/hb10.png',
  'http://video.cgaii.com/new4dage/images/images/hb11.png',
  'http://video.cgaii.com/new4dage/images/images/hb12.png',
  'http://video.cgaii.com/new4dage/images/images/hb13.png',
  'http://video.cgaii.com/new4dage/images/images/hb14.png',
  'http://video.cgaii.com/new4dage/images/images/hb15.png',
  'http://video.cgaii.com/new4dage/images/images/hb16.png',
  'http://video.cgaii.com/new4dage/images/images/hb17.png',
  'http://video.cgaii.com/new4dage/images/images/hb18.png',
  'http://video.cgaii.com/new4dage/images/images/hb19.png',
  'http://video.cgaii.com/new4dage/images/images/hb20.png',
  'http://video.cgaii.com/new4dage/images/images/hb21.png',
  'http://video.cgaii.com/new4dage/images/images/hb22.png',
  'http://video.cgaii.com/new4dage/images/images/hb23.png',
  'http://video.cgaii.com/new4dage/images/images/hb24.png',
  'http://video.cgaii.com/new4dage/images/images/hb25.png',
  'http://video.cgaii.com/new4dage/images/images/hb26.png',
  'http://video.cgaii.com/new4dage/images/images/hb27.png',
  'http://video.cgaii.com/new4dage/images/images/hb28.png',
  'http://video.cgaii.com/new4dage/images/images/hb29.png',
  'http://video.cgaii.com/new4dage/images/images/hb30.png',
  'http://video.cgaii.com/new4dage/images/images/hb31.png',
  'http://video.cgaii.com/new4dage/images/images/hb32.png',
  'http://video.cgaii.com/new4dage/images/images/hb33.png',
  'http://video.cgaii.com/new4dage/images/images/hb34.png',
  'http://video.cgaii.com/new4dage/images/images/hb35.png',
  'http://video.cgaii.com/new4dage/images/images/hb36.png',
  'http://video.cgaii.com/new4dage/images/images/hb37.png',
  'http://video.cgaii.com/new4dage/images/images/hb38.png',
  'http://video.cgaii.com/new4dage/images/images/hb39.png',
  'http://video.cgaii.com/new4dage/images/images/hb40.png',
  'http://video.cgaii.com/new4dage/images/images/hb41.png',
  'http://video.cgaii.com/new4dage/images/images/hb42.png',
  'http://video.cgaii.com/new4dage/images/images/hb43.png',
  'http://video.cgaii.com/new4dage/images/images/hb44.png',
  'http://video.cgaii.com/new4dage/images/images/hb45.png',
  'http://video.cgaii.com/new4dage/images/images/hb46.png',
  'http://video.cgaii.com/new4dage/images/images/hb47.png'
]

let pStyle = document.createElement('style')
pStyle.innerHTML = `
#ctrl {
  padding-top: 0;
}`

let oStyle = document.createElement('style')
oStyle.innerHTML = `
  #head-nav {
    background-color: transparent;
    box-shadow: none;
  }

  #ctrl .child > .a {
    background-color: transparent
  }
`

export default {
  data () {
    return {
      news: {
        index: 0,
        data: [
          {
            link: '#/information/news/36',
            image: 'http://video.cgaii.com/new4dage/images/images/new_1.jpg',
            maker: '',
            title: '两国总理见证中德智能新合作 欧时专访四维时代董事长崔岩',
            content: `<p>【欧洲时报记者张乔楠柏林报道】6月1日上午，在中德两国总理的见证下双方签署多项合作备忘录。签约现场，一家年轻的企业引起了记者注意，其所涉及的人工智能合作也是两国创新合作最火热的议题之一。签约仪式后，本报记者对这家企业进行了专访。</p>
                      <p>“只需要上传几张照片就可以在四维时代的平台上自动生成一个三维模型简单快速的实现对现实世界物体的3D克隆，让每一个人都可以零距离欣赏3D数据以及创造3D数据，并结合3D打印技术进行3D复制。”</p>
                      <p>“只需要用手指在屏幕上滑动线条，就可以自动检索和匹配出与线条相一致的三维图像，开拓了一种图像数据检索的全新人机交互方式。”</p>
                      <p>“应用机器学习和人工智能算法，将图形自动转化为声音，进而实现反向推导可以解码和加密声音与图像。”</p>
                      <p>“应用计算视觉与人工智能技术，将全世界的名家名作进行模式识别与分析，将名画名作的基因记录下来，并可以作为模板应用于现实的场景中，使普通的视频与照片变成了名画家笔下的画风。”</p>
                      <p>……以上这些新奇的人工智能技术，都是四维时代科技的产品，是纯粹的中国制造。</p>`
          },
          {
            link: '#/information/news/31',
            image: 'http://video.cgaii.com/new4dage/images/images/new_2.jpg',
            maker: '',
            title: '四维时代推出在线看展平台“四维看展”，邀您踏上数字艺术之旅',
            content: `<p>四维时代开发的小程序“四维看展”今日正式上线。四维看展集合了文本、图像、视频、音频、720度高清文物模型以及3D大场景等多种数字化表达形式，供用户随手触碰展品，听其声音、观其简介、查看其脉络细节，全方位多角度感受其艺术气质，为艺术爱好者打造一座永不落幕的私人展馆。</p>
                      <p>区别于常规的在线看展应用，“四维看展”将全球最顶尖的人工智能三维数字化技术和研究算法用于三维场景建模，对展览场馆进行数字化场景记录。通过对科技恰到好处的应用，实现全方位的场景展示，在微米的精度范围内可对展馆、展览实现自动化三维数据生成，让用户打破时间、空间限制，漫游其中，如亲临现场，给您一场足不出户的参观体验。</p>
                      <p>四维看展小程序“首页”每日更新各大博物馆、展览资讯，让用户掌握文博领域最新动态；“同城展会”页面可帮助用户寻找距离最近的展览和博物馆，为用户打通线下观展的信息需求；“我的“个人中心，记录你的收藏与评论，清晰反映个人的观赏足迹；“评论/收藏/看过”功能帮助用户收藏喜欢的场景、参与评论，并与朋友远程分享。</p>
                      `
          },
          {
            link: '#/information/news/32',
            image: 'http://video.cgaii.com/new4dage/images/images/new_3.jpg',
            maker: '',
            title: '“四维看看”3D相机：让老百姓用得起 用得上',
            content: `<p>近期，全球首款消费级3D相机“四维看看”成功发布。小巧便携的光学设备，可帮助用户将线下场景轻松转换为线上数字化立体空间，其创新的产品体验和亲民的市场定位，引发媒体深入报道和市场的广泛关注。</p>
                      <p>“四维看看”让原本服务于特定行业的尖端科技，终于进入大众视野，三维空间技术不再遥不可及，终端消费者的数字化3D需求也能在“一人一机”的情况下快速实现，并获得高质量的极致体验。</p>
                      <p>历时两年的技术攻关，将原本笨重的大型扫描设备，体积优化至手机大小，价格也下降到千元级，颠覆性的设计理念不禁让人眼前一亮。这一切的背后，全球首款消费级3D相机“四维看看”的研发团队“四维时代”为何要决定打赢这场“硬仗”？研发期间又经历了怎样的创新历程？</p>
                      <p>事实上，空间三维数字化可视技术已经有几十年的历史，用于实现空间建模的硬件设备也是由来已久。早在30多年前，业界普遍采用大型激光扫描的解决方案，一套完整的设备，成本高达百万元。</p>
                      <p>进入21世纪后，伴随科技的不断发展，三维扫描仪的体积获得一定程度优化，成本也相对有所下降，但运用于城市级空间建模的大型白光、光栅3D扫描仪器，价格仍然需要十几万元，执行操作也必须具备较高的专业技能。这一切让三维空间技术注定与大众无缘，而只能停留在特定领域，解决一小部分科研或工商业需求。
                      <p>直到几年前，美国MatterPort公司推出了一款针对室内的三维空间扫描设备，售价3999美元，设备重量也被压缩到3.4 KG，这引发了市场和投资者的强烈追捧。出品方累计获得超过6500万美元融资，公司估值达数亿美元。</p>
                      `
          }
        ]
      },
      courses: {
        data: [
          {
            time: '2018',
            title: '初心如磐',
            content: [
              '联手中央电视台和广东春晚节目组，通过人工智能三维数字技术在中央1套和中央3套为全国观众呈现“中国奇迹”。',
              '推出“四维看展”，国内首个利用人工智能三维重建技术打造的线上艺术空间。',
              '推出全球首款消费级3D相机四维看看，5分钟即可复刻100平米空间。',
              '成功举办第三届中德人工智能大会。'
            ]
          },
          {
            time: '2017',
            title: '砥砺前行',
            content: [
              '在中德两国总理见证下，与德国人工智能研究中心签约《中德人工智能研究院项目》。',
              '成为阿斯塔纳世博会中国馆虚拟现实唯一指定供应商，向全世界展示中国技术实力。',
              '推出大型3D模型资源共享与交流平台四维模库（4DModel）。',
              '成功举办第二届中德人工智能大会。'
            ]
          },
          {
            time: '2016',
            title: '踏上征途',
            content: [
              '获得四级信息系统集成资质。',
              '为中国十大考古发现之一—南昌汉代海昏侯国遗址博物馆打造的线上数字博物馆上线。',
              '从两万两千多家参赛企业中脱颖而出，获第五届中国创新创业大赛电子信息行业企业组第三名。',
              '获“最具成长潜力的留学人员创业企业”称号。'
            ]
          },
          {
            time: '2015',
            title: '展开新篇',
            content: [
              '从两万七千多家企业中突出重围，获中国创新创业大赛优秀企业奖。',
              '作为全国双创代表获得李克强总理接见，并向总理汇报工作。',
              '这一年，四维时代相继成为故宫博物院、广东省博物馆等文物保护机构的合作伙伴。'
            ]
          },
          {
            time: '2014',
            title: '建立之初',
            content: [
              '四维时代创立，创始人及高级管理人员均是欧洲海归博士、硕士，在人工智能三维数字化重建及数字化虚拟展示技术方面具有世界领先的科研水平及实力。',
              '12月，建模精度达微米级的一种基于光栅扫描的物体数字化三维重建装置，获专利授权。'
            ]
          }
        ],
        index: 0
      },
      isMobile: browser.mobile,
      hzbh,
      width: window.outerWidth
    }
  },
  methods: {
    prev (ev) {
      this.isMobile && ev.preventDefault()
    }
  },
  mounted () {
    let adapt = (mx, cls, doms) => {
      if (document.documentElement.clientWidth >= mx) {
        for (let dom of doms) {
          this.$refs[dom].classList.add(cls)
        }
      } else {
        for (let dom of doms) {
          this.$refs[dom].classList.remove(cls)
        }
      }
    }

    this.onResize = () => {
      adapt(1440, 'mxlayout2', ['mxl2_1', 'mxl2_2', 'mxl2_3'])
      adapt(1200, 'mxlayout3', ['mxl3_1'])
    }
    this.$bus.$on('resize', this.onResize)
    this.onResize()

    this.interval = setInterval(() => {
      this.news.index++
      if (this.news.index >= this.news.data.length) {
        this.news.index = 0
      }
    }, 8000)

    if (!this.isMobile) {
      let height = this.$refs.video.offsetHeight
      this.addStyle = e => {
        let scrollY = window.scrollY || window.pageYOffset
        if (scrollY < height) {
          this.isInsert || document.body.appendChild(oStyle)
          this.isInsert = true
        } else {
          this.isInsert && document.body.removeChild(oStyle)
          this.isInsert = false
        }
      }
      document.body.appendChild(pStyle)
      window.addEventListener('scroll', this.addStyle)
      this.addStyle()
    }
  },
  destroyed () {
    this.$bus.$off('resize', this.onResize)
    clearInterval(this.interval)
    if (!this.isMobile) {
      this.isInsert && document.body.removeChild(oStyle)
      document.body.removeChild(pStyle)
      window.removeEventListener('scroll', this.addStyle)
    }
  },
  components: {Scroll, Slide}
}
</script>

<style scoped>
@import url('./style.css');
</style>

<style>
.item-content p {
  color: #666666;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 20px;
}
</style>