Front_End_EN/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>Bring Digital Technologies<br>to the Everyday Life of Common People</h1>
          <!-- <p>To 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">Products<a href="#/product" v-if="!isMobile">More   →</a></h2>
        <div class="h_2_layout">
          <a class="h-m-1" href="#/product?id=swkk">
            <div class="img"></div>
            <div class="info">
              <h3>4DKanKan</h3>
              <p>The World's First Cosumer 3D Camera</p>
            </div>
          </a>
          <a class="h-m-2" href="#/product?id=wwq">
            <div class="img"></div>
            <div class="info">
              <h3>4DWall</h3>
              <p>The world at the fingertips</p>
            </div>
          </a>
          <a class="h-m-3" href="#/product?id=swys">
            <div class="img"></div>
            <div class="info">
              <h3>4DArt</h3>
              <p>Everyone can become an artist</p>
            </div>
          </a>
        </div>
      </div>

      <div class="home_3">
        <div class="bg"></div>
        <h2 class="m-title">Solutions</h2>
        <div class="catg clear">
          <router-link :to="{name: 'planculture'}">
            <div></div>
            <h3>Digital Museum</h3>
            <p>By adopting automatic 3D digital modeling technology and high-precision machine vision, digital museums and heritage preservation efforts can better reproduce the splendor of Chinese civilization.</p>
          </router-link>
          <router-link :to="{name: 'planlife'}">
            <div></div>
            <h3>Digital Life</h3>
            <p>Combining 3D digital technology and big data analysis, we create more free, efficient and convenient lifestyles, bringing digital technologies to the everyday lives of ordinary people.</p>
          </router-link>
          <router-link :to="{name: 'planindustry'}">
            <div></div>
            <h3>Digital Industry</h3>
            <p>Applies high-precision 3D machine vision and SLAM technology to all aspects of industrial production improve manufacturing efficiency and product quality, and reduce costs and resource consumption.</p>
          </router-link>
        </div>
      </div>

      <div class="home_4">
        <h2 class="m-title">Technologies</h2>
        <div class="clear">
          <a href="#/technology?id=szjm">
            <img src="http://video.cgaii.com/new4dage/images/images/home_4_a.jpg">
            <h3>Automatic 3D<br>Digital Reconstruction</h3>
            <p>Collect and upload pictures to cloud servers for processing into 3D models. The cloud server is capable of rapid automatic processing, without any manual intervention. This can be used in museums, and in the E-commerce, real estate and other fields.</p>
          </a>
          <a href="#/technology?id=jqsj">
            <img src="http://video.cgaii.com/new4dage/images/images/home_4_b.jpg">
            <h3>High-precision<br>Machine Vision</h3>
            <p>Applying the principles of optics, this technology uses ordinary light or the structured light of depth cameras for distance measurement and fast, high precision modeling and reconstruction of objects' structures. It can be used in museums, E-commerce, real estate and other fields.</p>
          </a>
          <a href="#/technology?id=slam">
            <img src="http://video.cgaii.com/new4dage/images/images/home_4_c.jpg">
            <h3>SLAM<br>Visual Tracking</h3>
            <p>Through the application of our proprietary SLAM algorithm and the integration of sensor data in image analysis, mobile devices can locates themselves more accurately, and acquire more information from the environment. Used for autonomous mobile devices including robots, UAVs, AR/VR, etc.</p>
          </a>
          <a href="#/technology?id=sjjs">
            <img src="http://video.cgaii.com/new4dage/images/images/home_4_d.jpg">
            <h3>AI Vision<br>Technology</h3>
            <p>Application of proprietary machine learning algorithms for extraction of high-level semantic image information permits intelligent analysis and decision-making, face recognition, target detection and style transfer.</p>
          </a>
        </div>
      </div>

      <div class="home_5" ref="mxl2_1">
        <h2 class="m-title">
          3D Showcase
          <!-- <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>Museum</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>Administration</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>E-Commerce</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>Industry</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>Real Estate</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>Cultural Relic</p>
              </div>
            </router-link>
          </div>
        </div>
      </div>

      <div class="home_6" ref="mxl2_2">
        <h2 class="m-title">News
           <router-link :to="{name: 'information_news'}" v-if="!isMobile">More   →</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">Full text >></a>
            </div>
          </div>
        </Slide>
      </div>

      <div class="home_7" ref="mxl3_1">
        <h2 class="m-title">Partners</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">4DAGE</h2>
        <p>Bring Digital Technologies to the Everyday Life of Common People</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/54',
            image: 'http://video.cgaii.com/new4dage/images/images/new_1.jpg',
            maker: '',
            title: 'The Chinese Premier and German Chancellor witnessed a new Sino-German smart tech cooperation agreement. Nouvelles d\'Europe interviewed Cui Yan, CEO of 4DAGE',
            content: `<p>memoranda of cooperation between their countries. At the signing, a young company involved in artificial intelligence cooperation in some of the focal areas of the two countries' cooperative innovation efforts drew reporters' attention. After the signing ceremony, our reporter interviewed the company's CEO.</p>
                      <p>"Only a few photos need to be uploaded to automatically generate a 3D model on the 4DAGE platform, permitting simple, quick 3D cloning of real-world objects."</p>
                      <p>"By just sliding some lines on the screen with your fingers, you can automatically retrieve and match 3D images with the lines. "</p>
                      <p>"Pattern recognition and analysis have been conducted by machine learning on famous paintings. The 'genes' of these famous works can be captured, and transform ordinary videos and photos into the styles of famous artists' paintings."</p>
                      <p>.......These novel artificial intelligence technologies are the technological products of 4DAGE and purely made in China.</p>`
          },
          {
            link: '#/information/news/50',
            image: 'http://video.cgaii.com/new4dage/images/images/new_2.jpg',
            maker: '',
            title: '4DAGE launches its online exhibition platform "4DMuseum", inviting you on a journey into digital art',
            content: `<p>The mini program "4DMuseum" developed by 4DAGE was officially launched today. 4DMuseum combines text, images, video, audio, 720-degree high-definition models of cultural artifacts, 3D scenes and other digital media, and allows users to touch exhibits, listen to sounds, view profiles, check contextual details, and thoroughly experience the artistic atmosphere, creating a private, never-closing exhibition hall for art lovers.</p>
                      <p>Distinct from conventional online exhibition programs, "4DMuseum" applies world-class 3D AI technology and research-based algorithms for 3D digital scene modeling and capture of exhibition halls. It realizes a full range of scene displays, automatically generating 3D data for exhibition halls and exhibitions to micron-level precision, breaking constraints of time and space, and allowing users to really feel as if they were visiting, without having to leave home.</p>
                      <p>The "Home" page of 4DMuseum provides daily-updated museum and exhibitions information, keeping users abreast of the latest museum news. "City Exhibition" page helps users find nearby exhibitions and museums and explore their needs for offline exhibitions. "Personal Center" records favorites and comments, and tracks users' footprint through exhibitions; The "Comments / Favorites / Watched" function helps users collect, comment on and share their favorite scenes.</p>
                      `
          }
        ]
      },
      courses: {
        data: [
          {
            time: '2018',
            title: 'Unshakeable Shoshin',
            content: [
              `Provided intelligent visual display supports for CCTV and Guangdong Spring Festival Gala.`,
              `Launched 4DKanKan, the world's first consumer-grade 3D camera, capable of reconstructing 100m2 of space in five minutes, and features easy operation, automation and high precision.`,
              'Released 4DMuseum, the first online platform for art spaces, integrating 3D exhibitions, informative services and user interactions.',
              `The 3rd China-Germany Artificial Intelligence Conference was held successfully.`
            ]
          },
          {
            time: '2017',
            title: 'Striving ahead',
            content: [
              '4DAGE and German Research Center of Artificial Intelligence initiated the China-Germany Artificial Intelligence Institute, the signing ceremony of which was witness by the Chinese Premier and German Chancellor.',
              ` Became sole virtual reality technology supplier to the China Pavilion at Kazakhstan's Astana World Expo.`,
              'Launched 4DModel, a platform for 3D model sharing and communication.',
              `The 2nd China-Germany Artificial Intelligence Conference was held successfully.`
            ]
          },
          {
            time: '2016',
            title: 'Starting the long journey',
            content: [
              'Obtained the fourth-grade information system integration certification.',
              'Reconstructed online digital museum for Nanchang Han Dynasty Haihunhou Historic Site, one of the top ten national archaeological discoveries.',
              ` Won the China Innovation and Entrepreneurship Competition's Third Place in the electronic information industry group.`,
              'Evaluated as the "Most Promising Overseas Student Entrepreneurial Enterprise".',
              `The First China-Germany Artificial Intelligence Conference was held successfully.`
            ]
          },
          {
            time: '2015',
            title: 'New chapter',
            content: [
              `Won the China Innovation and Entrepreneurship Competition's Outstanding Enterprise Award.`,
              `Dr. Cui Yan, founder of 4DAGE, was received by Premier Li Keqiang and commended to him for his work as a representative of the national "Mass Entrepreneurship and Innovation" initiative.`,
              `Became a partner of heritage preservation with the Palace Museum, Guangdong Museum, etc.`
            ]
          },
          {
            time: '2014',
            title: 'Founding',
            content: [
              `4DAGE was founded in October 2014 by a team of returnees with European doctor's or master's degrees, and was joined by top scientific researchers on AI digital 3D reconstruction and virtual display technologies.`,
              `In December, 4DAGE was granted a patent for a raster scanning digital 3D object reconstruction device with micron-level modeling accuracy.`
            ]
          }
        ],
        index: 0
      },
      isMobile: browser.mobile,
      hzbh
    }
  },
  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(() => {
      console.log('???')
      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>