|
@@ -3,36 +3,45 @@
|
|
|
<div class="plate01">
|
|
|
<div class="my-video">
|
|
|
<video :src="language==='en'?`${$cdn}video/banner1.mp4`:`${$cdn}video/4dkkPRO_zh.mp4`" autoplay muted loop></video>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="plate02">
|
|
|
- <div class="logo"><img :src="`${$cdn}images/plate_icon.png`" ></div>
|
|
|
- <div class="booking">
|
|
|
- <div>
|
|
|
- <div class="img-pro">
|
|
|
- <img class="img-banner" :src="`${$cdn}images/banner_pro-white.png`" >
|
|
|
- <!-- <img class="img-tag" :src="language==='en'?`${$cdn}images/booking-tag-en.png`:`${$cdn}images/booking-tag.png`" alt=""> -->
|
|
|
+ <div class="video-info">
|
|
|
+ <h1>四维看看Pro</h1>
|
|
|
+ <p>精准实景复刻 传递空间价值</p>
|
|
|
+ <div class="actions-w">
|
|
|
+ <router-link class="buy-btn" to="purchase">立即购买</router-link>
|
|
|
+ <router-link class="action-link" to="/about">了解更多</router-link>
|
|
|
+ <span class="watch-btn action-link">观看视频</span>
|
|
|
</div>
|
|
|
- <div class="info">
|
|
|
- <img :src="language==='en'?`${$cdn}images/booking-txt-en.png`:`${$cdn}images/zaonianjia.png`" alt="">
|
|
|
- <div class="btns" >
|
|
|
- <div @click="gobuy" class="button"><vcenter><img :src="`${$cdn}images/product_icon_arrow.png`" alt=""></vcenter></div>
|
|
|
- <a @click="gobuy" class="button purchase">{{langHome.booking.btn}}</a>
|
|
|
- </div>
|
|
|
- <!-- <div class="info-dec" :style="{position:language==='en'?'static':'relative'}">{{langHome.booking.sub}}</div> -->
|
|
|
+ <div class="distributor">
|
|
|
+ <router-link to="/" class="">成为经销商</router-link>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <div ref="homeLayout" class="homeLayout">
|
|
|
- <div class="plate" v-for="(item,i) in sequenceArr" :key="i">
|
|
|
- <h2 class="b-title">{{item.name}}</h2>
|
|
|
- <p class="b-label">{{item.sub}}</p>
|
|
|
- <sequence :runAnimation="item.runAnimation" :img="`${$cdn}images/sequence/v${item.img}.jpg`" />
|
|
|
+ </div>
|
|
|
+ <div class="plate02 container">
|
|
|
+ <h1 class="common-title">行业解决方案</h1>
|
|
|
+ <ul class="programme-list">
|
|
|
+ <li class="programme-item" v-for="(item, index) in programme" :key="index">
|
|
|
+ {{ item }}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <div class="solution-content">
|
|
|
+ <img class="" src="@/assets/images/home/solutions-house.png" alt="">
|
|
|
+ <div class="solution-intro">
|
|
|
+ <h4>房产营销</h4>
|
|
|
+ <p>海量复刻真房源</p>
|
|
|
+ <ul>
|
|
|
+ <li>AI自动建模,高效复刻真实房源</li>
|
|
|
+ <li>云带看/云讲房,全方位介绍房源信息</li>
|
|
|
+ <li>易上手操作,人人都能掌握拍摄流程</li>
|
|
|
+ <li>专业地产营销系统,高效管理租售信息</li>
|
|
|
+ </ul>
|
|
|
+ <a href="javascript:;" class="more">更多 ></a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
+ <div class="plate03 container">
|
|
|
+ <h1 class="common-title">看看空间</h1>
|
|
|
+ </div>
|
|
|
<div class="plate04">
|
|
|
<img :src="`${$cdn}images/background_03.png`" alt="" class="hxbg hxbg-3">
|
|
|
<div class="info">
|
|
@@ -110,7 +119,8 @@ export default {
|
|
|
item2: this.$cdn + 'video/item2.mp4',
|
|
|
innerH: window.innerHeight,
|
|
|
devicePixelRatio: detectZoom(),
|
|
|
- startNumCount: false
|
|
|
+ startNumCount: false,
|
|
|
+ programme: ['房产营销', '线上展会', '数字文博', 'VR购物', '安防勘查']
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
@@ -146,34 +156,34 @@ export default {
|
|
|
this.$bus.$emit('showAside')
|
|
|
}
|
|
|
})
|
|
|
- this.sizeHandle = () => {
|
|
|
- let ny = getPosition(this.$refs.numcount).y + this.$refs.numcount.offsetHeight
|
|
|
- let sy = getPosition(this.$refs.slide).y + this.$refs.slide.offsetHeight
|
|
|
- let height = getPosition(this.$refs.homeLayout).y
|
|
|
+ // this.sizeHandle = () => {
|
|
|
+ // let ny = getPosition(this.$refs.numcount).y + this.$refs.numcount.offsetHeight
|
|
|
+ // let sy = getPosition(this.$refs.slide).y + this.$refs.slide.offsetHeight
|
|
|
+ // let height = getPosition(this.$refs.homeLayout).y
|
|
|
|
|
|
- let items = Array.from(this.$refs.homeLayout.querySelectorAll('.plate'))
|
|
|
- if (window.innerHeight + (window.scrollY || window.pageYOffset) > ny) {
|
|
|
- this.startNumCount = true
|
|
|
- }
|
|
|
+ // let items = Array.from(this.$refs.homeLayout.querySelectorAll('.plate'))
|
|
|
+ // if (window.innerHeight + (window.scrollY || window.pageYOffset) > ny) {
|
|
|
+ // this.startNumCount = true
|
|
|
+ // }
|
|
|
|
|
|
- if (window.innerHeight + (window.scrollY || window.pageYOffset) + 400 > sy) {
|
|
|
- this.slideActive = true
|
|
|
- }
|
|
|
+ // if (window.innerHeight + (window.scrollY || window.pageYOffset) + 400 > sy) {
|
|
|
+ // this.slideActive = true
|
|
|
+ // }
|
|
|
|
|
|
- if (this.startNumCount && this.slideActive) {
|
|
|
- window.removeEventListener('scroll', this.sizeHandle)
|
|
|
- }
|
|
|
+ // if (this.startNumCount && this.slideActive) {
|
|
|
+ // window.removeEventListener('scroll', this.sizeHandle)
|
|
|
+ // }
|
|
|
|
|
|
- items.forEach((item, index) => {
|
|
|
- let addHeight = item.offsetParent && (item.offsetParent.nodeName).toLowerCase() === 'body' ? (item.offsetTop + height) : (item.offsetTop + item.offsetParent.offsetTop + height)
|
|
|
- if (addHeight <= window.innerHeight + (window.scrollY || window.pageYOffset) + 1200) {
|
|
|
- this.sequenceArr[index]['runAnimation'] = false
|
|
|
- } else {
|
|
|
- this.sequenceArr[index]['runAnimation'] = true
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- window.addEventListener('scroll', this.sizeHandle)
|
|
|
+ // items.forEach((item, index) => {
|
|
|
+ // let addHeight = item.offsetParent && (item.offsetParent.nodeName).toLowerCase() === 'body' ? (item.offsetTop + height) : (item.offsetTop + item.offsetParent.offsetTop + height)
|
|
|
+ // if (addHeight <= window.innerHeight + (window.scrollY || window.pageYOffset) + 1200) {
|
|
|
+ // this.sequenceArr[index]['runAnimation'] = false
|
|
|
+ // } else {
|
|
|
+ // this.sequenceArr[index]['runAnimation'] = true
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // window.addEventListener('scroll', this.sizeHandle)
|
|
|
},
|
|
|
destroyed () {
|
|
|
window.removeEventListener('scroll', this.sizeHandle)
|