Skip to content

A
antaile-web
Commit a4f89454 by wangyalan-git
Options

首页

parent cc1f193a
Showing with 142 additions and 103 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安装，在 ...@@ -8,6 +8,32 @@ import animated from 'animate.css' // npm install animate.css --save安装，在
Vue.use(animated) Vue.use(animated)
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.use(ElementUI); 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({ new Vue({
router, router,
render: h => h(App), render: h => h(App),
......
src/views/Login/register.vue
<template> <template>
<div> <div id="wrap" :style="{ height: screenHeight + 'px' }">
<section ref="qudao" class="qudao"> <div id="main" :style="{ top: nowTop + 'px' }">
<div class="subtitle"> <ul id="pageUl" type="circle">
<h2>连接230万家庭</h2> <li id="pageUlLi1" class="pageUlLi" :class="{'active': curIndex == 1}">&nbsp;</li>
<p>您的设备接入零壹平台后，可直接上线零壹各大渠道和商城</p> <li id="pageUlLi2" class="pageUlLi" :class="{'active': curIndex == 2}">&nbsp;</li>
</div> <li id="pageUlLi3" class="pageUlLi" :class="{'active': curIndex == 3}">&nbsp;</li>
<div class="content"> <li id="pageUlLi4" class="pageUlLi" :class="{'active': curIndex == 4}">&nbsp;</li>
<div class="earth-wrap"> <li id="pageUlLi5" class="pageUlLi" :class="{'active': curIndex == 5}">&nbsp;</li>
<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>
</ul> </ul>
<p class="timeTxt">按照快速引导 修改MCU固件代码适配即可完成接入</p> <div style="background-color: #1b6d85" id="page1" class="page"></div>
</section> <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> </div>
</template> </template>
<script> <script>
export default {
name: "home", export default {
data() { name: 'Home',
return { data(){
close: true, return{
qudaoShow: false, screenWeight: 0, // 屏幕宽度
deviceShow: false, screenHeight: 0, // 屏幕高度
sceneShow: false, index: 1, // 用于判断翻页
oemShow: false, curIndex: 1, // 当前页的index
productShow: false, startTime: 0, // 翻屏起始时间
timeShow: false, endTime: 0, // 上一次翻屏结束时间
dixianShow: false, nowTop: 0, // 翻屏后top的位置
loading: false, pageNum: 0, // 一共有多少页
}; main: Object,
}, obj: Object
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;
});
});
}, },
gdjz(div, offset, callback) { mounted(){
let dom = this.$refs[div]; // 等同于document.querySelector('.earth') true this.screenWeight = document.documentElement.clientWidth;
if (dom) { this.screenHeight = document.documentElement.clientHeight;
var a, b, c, d; this.main = document.getElementById("main");
d = dom.offsetTop; // 元素距离相对父级的高度，这里父级指的是body this.obj = document.getElementsByTagName("div");
a = eval(d + offset); for (let i = 0; i < this.obj.length; i++) {
b = if (this.obj[i].className == 'page') {
window.pageYOffset || this.obj[i].style.height = this.screenHeight + "px";
document.documentElement.scrollTop || }
document.body.scrollTop; // 获取窗口滚动条高度
c = document.documentElement.clientHeight || document.body.clientHeight; // 获取浏览器可视区的高度
if (b + c > a) {
callback && callback();
} }
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> </script>
<style>
html, body {
height: 100%;
}
body, ul, li, a, p, div {
/*慎删*/
padding: 0px;
margin: 0px;
}
#wrap {
overflow: hidden;
width: 100%;
}
<style scoped> #main {
position: relative;
transition:top 1.5s;
}
.page {
/*谨删*/
width: 100%;
margin: 0;
}
#pageUl {
position: fixed;
right: 10px;
bottom: 50%;
}
.active{
color: red;
}
</style> </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