realtorEasier-webSite/pc/src/page/home2/index.vue

<template>
  <div class="home-layout">
    <div class="plate01">
      <div class="my-video">
        <video :src="language==='en'?`${$cdn}video/banner1.mp4`:require('@/assets/images/refactor/home-video.mp4')" autoplay muted loop></video>
        <div class="container">
          <div class="video-info">
          <h1>四维看看Pro</h1>
          <p>精准实景复刻 传递空间价值</p>
          <div class="actions-w">
            <router-link class="buy-btn" to="/mall/kankanPro">立即购买</router-link>
            <router-link class="action-link" to="/about">了解更多</router-link>
            <span class="watch-btn action-link" @click="detailVideo">介绍视频</span>
          </div>
          <div class="distributor">
            <router-link to="/distributor" class=""><h-icon type="shouyegongzi" class="icon" /><span>成为经销商</span></router-link>
          </div>
        </div>
        </div>
      </div>
    </div>
    <div class="plate02 container">
      <h1 class="common-title">行业解决方案</h1>
      <ul class="programme-list">
        <li :class="`programme-item ${active_index === index ? 'active' : ''}`" v-for="(item, index) in programme" :key="index" @click="changeActiveIndex(index)">
          {{ item.title }}
        </li>
      </ul>
      <ul class="solution-list">
        <li class="solution-content clear" v-for="(item,index) in programme" :key="index" >
          <transition name="fade">
            <div v-show="active_index === index">
              <div class="solution-bg" :style="{backgroundImage: `url(${item.img})`}" ></div>
              <div :class="`solution-intro `">
                <h4>{{ item.title_sub }}</h4>
                <p>{{ item.desc }}</p>
                <ul>
                  <li v-for="(item, index) in item.list" :key="index">{{ item }}</li>
                </ul>
                <a href="javascript:;" class="more" @click="toMore(item)">更多 ></a>
              </div>
            </div>
          </transition>
        </li>
      </ul>
    </div>
    <div class="plate03 container clear">
      <h1 class="common-title">看看空间
        <router-link to="/cases/全部" class="more">更多</router-link>
      </h1>
      <h-row class="space-list" :gutter="20">
        
        <h-col :span="6" class="space-item" v-for="(item,index) in space" :key="index">
          <a :href="item.link" target="_blank">
            <img :src="item.bgImg">
            <p>{{item.text}}</p>
          </a>
        </h-col>
      </h-row>
    </div>
    <div class="plate04 container">
      <h1 class="common-title">核心技术</h1>
      <ul class="plate04-list">
        <li class="plate04-item" v-for="(item, index) in plate04List" :key="index">
          <img :src="item.imgUrl" alt="">
          <h3>{{item.title}}</h3>
          <p>{{item.desc}}</p>
        </li>
      </ul>
    </div>

    <div class="plate05 " ref="numcount">
      <div class="container">
        <h1 class="common-title">新闻动态
          <router-link to="/news" class="more">更多</router-link>
        </h1>
        <ul class="news-list">
          <li class="news-item" v-for="(item, index) in plate05List" :key="index" >
            <div class="news-img" :style="{backgroundImage: `url(${item.img})`}"></div>
            <div class="news-info">
              <p class="news-time">{{ item.time }}</p>
              <h5 class="news-title">{{ item.title }}</h5>
              <p class="news-content">{{ item.text }}</p>
              <div class="news-tag">{{ item.sub }}</div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div class="plate06 container">
      <h1 class="common-title">合作伙伴</h1>
    </div>

    
  </div>
</template>

<script>
import slide from '@/components/slide'
import vcenter from '@/components/vcenter'
import number from '@/components/number'
import sequence from '@/components/sequence'
import {mapState} from 'vuex'
import { News } from '@/config/newsData'
export default {
  data () {
    return {
      active_index: 0,
      isAnimation: false,
      swiperOptions: {
        effect: 'fade'
      },
      programme: [{
        title: '房产营销',
        title_sub: '房产营销',
        desc: '海量复刻真房源',
        img: require('@/assets/images/home/solutions-house.png'),
        list: ['AI自动建模，高效复刻真实房源', '云带看/云讲房，全方位介绍房源信息', '易上手操作，人人都能掌握拍摄流程', '专业地产营销系统，高效管理租售信息'],
        link: '/conductHouse'
      }, {
        title: '线上展会',
        title_sub: '线上展会',
        desc: '全方位复现展会信息，全球买家在线看展',
        img: require('@/assets/images/home/solutions-zhan.png'),
        list: ['AI图像重构技术，真实还原线下布展效果', '3D展品互动，720°无死角展示', '同屏在线洽谈，系统可对接供采信息', '自动收集展会数据，数据分析挖掘，降低获客成本'],
        link: '/conductExhibition'
      }, 
      {
        title: '数字文博',
        title_sub: '数字文博',
        desc: '助力打造永不落幕的博物馆',
        img: require('@/assets/images/home/solutions-bo.png'),
        list: ['珍贵陈展3D高清记录，方便留存与保护', '空间交互，让空间表达更多历史内涵', '大师讲解，一带多同屏讲述文化故事', '推动社科教育，促进社会参与'],
        link: '/conductSubject'
      },
      {
        title: 'VR购物',
        title_sub: 'VR购物',
        desc: '海量复刻真房源',
        img: require('@/assets/images/home/solutions-shop.png'),
        list: ['AI自动建模，高效复刻真实房源', '云带看/云讲房，全方位介绍房源信息', '易上手操作，人人都能掌握拍摄流程', '专业地产营销系统，高效管理租售信息']
      },
      {
        title: '安防勘查',
        title_sub: '安防勘查',
        desc: '高效复刻灾害现场，记录全面三维档案',
        img: require('@/assets/images/home/solutions-sec.png'),
        list: ['高效复刻灾害现场，记录全面三维档案', '支持预先采集存档，减少理赔纠纷']
      }],
      space: [
        {
          text: '雍正故宫',
          bgImg: require('@/assets/images/home/4case_01@2x.png')
        },
        {
          text: '小米有品',
          bgImg: require('@/assets/images/home/4case_02@2x.png'),
          link: 'https://www.4dkankan.com/showProPC.html?m=5p1fFyLxv'
        },
        {
          text: '华发依山郡',
          bgImg: require('@/assets/images/home/4case_03@2x.png')
        },
        {
          text: '万豪酒店',
          bgImg: require('@/assets/images/home/4case_04@2x.png')
        }
      ],
      plate04List: [
        {
          title: '空间数字化',
          desc: '自动化三维数字重建还原空间布局与结构',
          imgUrl: require('@/assets/images/home/space_01.png')
        },
        {
          title: '空间互动',
          desc: '自动导览 互动视频多形态动态热点',
          imgUrl: require('@/assets/images/home/space_02.png')
        },
        {
          title: '空间展示',
          desc: '无需插件，多端展示实现720°沉浸体验',
          imgUrl: require('@/assets/images/home/space_03.png')
        }
      ],
      plate05List: News.slice(0, 4)
    }
  },
  methods: {
    gobuy () {
      this.language === 'en' ? window.open('https://www.alibaba.com/product-detail/4DKanKan-Pro-3D-camera-3D-space_62183626283.html?spm=a2700.icbuShop.74.1.66b35b10I4miJd') : this.$router.push({url: '/mall/kankanPro'})
    },
    mediaClick () {
      this.$bus.$emit('showLeft', 'mediaInfo', {id: 83})
    },
    goto (url) {
      window.open(url, '_blank')
    },
    changeActiveIndex (index) {
      this.active_index = index
      this.isAnimation = true
      setTimeout(() => {
        this.isAnimation = false
      }, 500)
    },
    toMore (item) {
      this.$router.push(item.link)
    },
    detailVideo() {
      this.$bus.$emit('toggleVideo', { url: `https://4d-tjw.oss-cn-shenzhen.aliyuncs.com/4dHouse/%E5%9B%9B%E7%BB%B4%E7%9C%8B%E7%9C%8BPro-%202020-7-22%E7%89%88%E6%9C%AC%288K%29.mp4` })
    }
  },
  computed: {
    ...mapState({
      langHome: state => state.language.home.home,
      language: state => state.language.current,
      token: state => state.user.token
    }),
    activeSolution () {
      return this.programme[this.active_index]
    }
  },
  mounted () {
    let open = this.$route.query.open
    setTimeout(() => {
      if (open && !this.token) {
        this.$bus.$emit('showAside')
      }
    })
  },
  destroyed () {
  },
  components: {vcenter,
    slide,
    number,
    sequence,
  }
}
</script>

<style lang="scss" scoped>
@import './style.scss';
.fade-enter-active {
  opacity: 1;
  transition: opacity .5s ease-in-out;
}
.fade-leave-active {
  opacity: 0;
}
.fade-enter-to {
  opacity: 1;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>