Skip to content

A
antaile-web
Commit a4f89454 by wangyalan-git
Options

首页

parent cc1f193a
Showing with 146 additions and 107 deletions
src/assets/images/图片/198A5253.jpg deleted 100644 → 0
This image diff could not be displayed because it is too large. You can view the blob instead.
src/main.js
......@@ -8,6 +8,32 @@ import animated from 'animate.css' // npm install animate.css --save安装，在
Vue.use(animated)
Vue.config.productionTip = false
Vue.use(ElementUI);
Vue.directive('class', {
inserted: function (el, binding) {
// 聚焦元素
binding.addClass = () => {
const { top } = el.getBoundingClientRect()
const h = document.documentElement.clientHeight || document.body.clientHeight
// console.log("h",top<h)
if (top < h) {
el.className = binding.value
if (binding.addClass) {
window.removeEventListener('mousewheel', binding.addClass)
}
}
}
window.addEventListener('mousewheel', binding.addClass)
binding.addClass()
},
unbind: function (el, binding) {
if (binding.addClass) {
window.removeEventListener('mousewheel', binding.addClass)
console.log('取消事件绑定')
}
}
})
new Vue({
router,
render: h => h(App),
......
src/views/Login/register.vue
<template>
<div>
<section ref="qudao" class="qudao">
<div class="subtitle">
<h2>连接230万家庭</h2>
<p>您的设备接入零壹平台后，可直接上线零壹各大渠道和商城</p>
</div>
<div class="content">
<div class="earth-wrap">
<div
v-show="qudaoShow"
ref="earth"
class="earth animated bounceInDown delay-1"
></div>
<div v-show="qudaoShow" class="left-con animated fadeInLeft delay-1">
<h4>海外渠道</h4>
<p class="dec">
零壹正在大力发展海外渠道，产品套装即将登陆亚马逊、Shopee等海外电商平台，同时布设大量线下经销商，远销美国、欧洲、东南亚等地。
</p>
</div>
<div
v-show="qudaoShow"
class="right-con animated fadeInRight delay-1"
>
<h4>国内渠道</h4>
<p class="dec">
零壹小区物业系统已实际部署超7000个小区，线上商城覆盖超230万个家庭，线下体验店遍布各大城市。超300个城市和行业合伙人负责大型项目落地，统一从零壹渠道采购设备。
</p>
</div>
</div>
</div>
</section>
<section ref="time" class="time">
<div class="subtitle">
<h2>接入，最快6小时完成</h2>
<p>
我们相信，效率就是生命，为您准备了多种上云途径，零壹专家实时进行技术支援
</p>
</div>
<ul class="flexbox">
<li v-show="timeShow" class="animated flipInY delay">
<img src="@/assets/images/logo.png" />
</li>
<li v-show="timeShow" class="animated flipInY delay-2">
<img src="@/assets/images/logo.png" />
</li>
<li v-show="timeShow" class="animated flipInY delay-4">
<img src="@/assets/images/logo.png" />
</li>
<div id="wrap" :style="{ height: screenHeight + 'px' }">
<div id="main" :style="{ top: nowTop + 'px' }">
<ul id="pageUl" type="circle">
<li id="pageUlLi1" class="pageUlLi" :class="{'active': curIndex == 1}">&nbsp;</li>
<li id="pageUlLi2" class="pageUlLi" :class="{'active': curIndex == 2}">&nbsp;</li>
<li id="pageUlLi3" class="pageUlLi" :class="{'active': curIndex == 3}">&nbsp;</li>
<li id="pageUlLi4" class="pageUlLi" :class="{'active': curIndex == 4}">&nbsp;</li>
<li id="pageUlLi5" class="pageUlLi" :class="{'active': curIndex == 5}">&nbsp;</li>
</ul>
<p class="timeTxt">按照快速引导 修改MCU固件代码适配即可完成接入</p>
</section>
<div style="background-color: #1b6d85" id="page1" class="page"></div>
<div style="background-color: #5cb85c" id="page2" class="page"></div>
<div style="background-color: #8a6d3b" id="page3" class="page"></div>
<div style="background-color: #337ab7" id="page4" class="page"></div>
<div style="background-color: #66512c" id="page5" class="page"></div>
</div>
</div>
</template>
<script>
export default {
name: "home",
data() {
return {
close: true,
qudaoShow: false,
deviceShow: false,
sceneShow: false,
oemShow: false,
productShow: false,
timeShow: false,
dixianShow: false,
loading: false,
};
},
mounted() {
window.addEventListener("scroll", this.handleScroll);
},
methods: {
handleScroll() {
// 实现当滚动到指定位置，触发动画
// let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop // 获取窗口滚动条高度
// this.gdjz('earth', 'earth animated bounceInDown', 50)
let _this = this;
let refArray = [
{ ref: "qudao", show: "qudaoShow" },
{ ref: "device", show: "deviceShow" },
{ ref: "scene", show: "sceneShow" },
{ ref: "oem", show: "oemShow" },
{ ref: "product", show: "productShow" },
{ ref: "time", show: "timeShow" },
{ ref: "dixian", show: "dixianShow" },
];
refArray.forEach(r => {
_this.gdjz(r.ref, 20, () => {
_this[r.show] = true;
});
});
export default {
name: 'Home',
data(){
return{
screenWeight: 0, // 屏幕宽度
screenHeight: 0, // 屏幕高度
index: 1, // 用于判断翻页
curIndex: 1, // 当前页的index
startTime: 0, // 翻屏起始时间
endTime: 0, // 上一次翻屏结束时间
nowTop: 0, // 翻屏后top的位置
pageNum: 0, // 一共有多少页
main: Object,
obj: Object
}
},
gdjz(div, offset, callback) {
let dom = this.$refs[div]; // 等同于document.querySelector('.earth') true
if (dom) {
var a, b, c, d;
d = dom.offsetTop; // 元素距离相对父级的高度，这里父级指的是body
a = eval(d + offset);
b =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop; // 获取窗口滚动条高度
c = document.documentElement.clientHeight || document.body.clientHeight; // 获取浏览器可视区的高度
if (b + c > a) {
callback && callback();
mounted(){
this.screenWeight = document.documentElement.clientWidth;
this.screenHeight = document.documentElement.clientHeight;
this.main = document.getElementById("main");
this.obj = document.getElementsByTagName("div");
for (let i = 0; i < this.obj.length; i++) {
if (this.obj[i].className == 'page') {
this.obj[i].style.height = this.screenHeight + "px";
}
}
this.pageNum = document.querySelectorAll(".page").length;
// 浏览器兼容
if ((navigator.userAgent.toLowerCase().indexOf("firefox") != -1)) {
document.addEventListener("DOMMouseScroll", this.scrollFun, false);
} else if (document.addEventListener) {
document.addEventListener("mousewheel", this.scrollFun, false);
} else if (document.attachEvent) {
document.attachEvent("onmousewheel", this.scrollFun);
} else {
document.onmousewheel = this.scrollFun;
}
},
},
};
methods:{
scrollFun(event) {
this.startTime = new Date().getTime();
// mousewheel事件中的 “event.wheelDelta” 属性值：返回的如果是正值说明滚轮是向上滚动
// DOMMouseScroll事件中的 “event.detail” 属性值：返回的如果是负值说明滚轮是向上滚动
let delta = event.detail || (-event.wheelDelta);
// 如果当前滚动开始时间和上次滚动结束时间的差值小于1.5s，则不执行翻页动作，这样做是为了实现类似节流的效果
if ((this.startTime - this.endTime) > 1500) {
if (delta > 0 && parseInt(this.main.offsetTop) >= -(this.screenHeight * (this.pageNum - 2))) {
// 向下滚动
this.index++;
this.toPage(this.index);
}else if (delta < 0 && parseInt(this.main.offsetTop) < 0) {
// 向上滚动
this.index--;
this.toPage(this.index);
}
// 本次翻页结束，记录结束时间，用于下次判断
this.endTime = new Date().getTime();
}
},
// 翻页
toPage(index) {
if (index != this.curIndex) {
let delta = index - this.curIndex;
this.nowTop = this.nowTop - delta * this.screenHeight;
this.curIndex = index;
}
}
}
}
</script>
<style scoped>
</style>
<style>
html, body {
height: 100%;
}
body, ul, li, a, p, div {
/*慎删*/
padding: 0px;
margin: 0px;
}
#wrap {
overflow: hidden;
width: 100%;
}
#main {
position: relative;
transition:top 1.5s;
}
.page {
/*谨删*/
width: 100%;
margin: 0;
}
#pageUl {
position: fixed;
right: 10px;
bottom: 50%;
}
.active{
color: red;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment