Skip to content

A
antaile-web
Commit a4f89454 by wangyalan-git
Options

首页

parent cc1f193a
Showing with 577 additions and 137 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/Home/index.vue
<template> <template>
<div> <div>
<router-link :to="{ path: 'register' }">跳转</router-link>
<Header></Header> <Header></Header>
<div class="show-bg"> <div id="wrap" :style="{ height: screenHeight + 'px' }">
<img src="@/assets/images/writtenwords.png" alt="" class="show-title" /> <div class="main" id="main" :style="{ top: nowTop + 'px' }">
<div class="show-video"> <!-- 第一屏 -->
<!-- animated flipInX --> <div class="show-bg page" id="page1">
<transition leave-active-class="animated bounceOutUp">
<img
class="show-title"
src="@/assets/images/writtenwords.png"
alt=""
v-if="screenIndex == 1"
/>
</transition>
<div
:class="[
{
'animate-video':
screenIndex == 2 ||
screenIndex == 3 ||
screenIndex == 4 ||
screenIndex == 5,
},
'show-video',
]"
>
<video <video
autoplay autoplay
loop loop
:class="[{ 'animate-video': scrollTop }, 'video']" :class="[
{
'animate-video':
screenIndex == 2 ||
screenIndex == 3 ||
screenIndex == 4 ||
screenIndex == 5,
},
{ 'show-border': screenIndex == 4 },
'video',
]"
v-on:canplay="canplay" v-on:canplay="canplay"
muted muted
ref="video"> ref="video"
>
<source :src="PATH_TO_MP4" type="video/mp4" /> <source :src="PATH_TO_MP4" type="video/mp4" />
浏览器不支持 video 标签，建议升级浏览器。 浏览器不支持 video 标签，建议升级浏览器。
<!-- <source :src="PATH_TO_WEBM" type="video/webm"/> <!-- <source :src="PATH_TO_WEBM" type="video/webm"/>
浏览器不支持 video 标签，建议升级浏览器。 --> 浏览器不支持 video 标签，建议升级浏览器。 -->
</video> </video>
<div class="show-url" v-if="screenIndex == 4 || screenIndex == 5">
<img src="@/assets/images/1605239923175.png" alt="" />
</div>
</div>
<div class="show-mask" v-if="screenIndex == 3">
<transition
enter-active-class="animated fadeInUpBig"
leave-active-class="animated fadeOutDown"
>
<img
src="@/assets/images/writtenwordsone.png"
alt=""
v-if="screenIndex == 3"
/>
</transition>
</div>
<div class="show-mask" v-if="screenIndex == 5">
<img src="@/assets/images/writtenwordstwo.png" alt="" />
</div>
</div>
<div class="show-bg page" id="page2">
<div class="show-tab">
<img src="@/assets/images/198A5253.png" alt="" />
<ul class="my-tab">
<li
@click="changeTab(item.id)"
:class="checkedTab == item.id ? 'checked' : ''"
v-for="(item, index) in tabs"
:key="index"
>
{{ item.name }}
</li>
</ul>
</div>
</div>
<div class="show-bg page" id="page3">
<img
src="@/assets/images/writtenwordssix.png"
class="show-moretitle"
alt=""
/>
<div class="show-more">
<div v-class="'animated bounce'">
<img src="@/assets/images/Warehouse.png" alt="" />
<p class="show-subtitle">应用仓库</p>
<p>不断扩展应用库</p>
<p>满足不同用户需求</p>
</div>
<div v-class="'animated bounce'">
<img src="@/assets/images/Administration.png" alt="" />
<p class="show-subtitle">轻管理</p>
<p>有APP、PC两端</p>
<p>管理</p>
</div>
<div v-class="'animated bounce'">
<img src="@/assets/images/security.png" alt="" />
<p class="show-subtitle">更安全</p>
<p>资料可存入私人</p>
<p>oss存储空间</p>
</div>
<div v-class="'animated bounce'">
<img src="@/assets/images/Multiterminal.png" alt="" />
<p class="show-subtitle">多端展示</p>
<p>手机端、IAPD和</p>
<p>TV端</p>
</div>
</div>
<div class="show-btn">
<p>立即创建</p>
<p>安泰乐·网上生命记念馆</p>
</div>
</div>
</div> </div>
</div> </div>
<Footer></Footer> <Footer></Footer>
...@@ -32,18 +138,118 @@ export default { ...@@ -32,18 +138,118 @@ export default {
Footer, Footer,
}, },
props: {}, props: {},
created() {
window.addEventListener("scroll", this.handleScroll);
},
data() { data() {
return { return {
vedioCanPlay: false, vedioCanPlay: false,
PATH_TO_MP4: "https://atlimg.oss-cn-hangzhou.aliyuncs.com/web/2574.mp4", PATH_TO_MP4: "https://atlimg.oss-cn-hangzhou.aliyuncs.com/web/2574.mp4",
scrollTop: 0, scrollTop: 0,
screenWeight: 0, // 屏幕宽度
screenHeight: 0, // 屏幕高度
index: 1, // 用于判断翻页
screenIndex: 1, //用于记录第一页面内部的顺序
curIndex: 1, // 当前页的index
startTime: 0, // 翻屏起始时间
endTime: 0, // 上一次翻屏结束时间
nowTop: 0, // 翻屏后top的位置
pageNum: 0, // 一共有多少页
main: Object,
obj: Object,
checkedTab: 1,
tabs: [
{ id: 1, name: "风格多样化" },
{ id: 2, name: "在线纪念功能" },
{ id: 3, name: "多端展示" },
],
}; };
}, },
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.indexOf("page") != -1) {
// console.log("this.obj[i]",this.obj[i].className)
this.obj[i].style.height = this.screenHeight + "px";
}
}
this.pageNum = document.querySelectorAll(".page").length;
// console.log("page",this.pageNum,this.obj)
// 浏览器兼容
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: { 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))
) {
console.log("向下");
if (this.index == 1) {
this.screenIndex++;
}
if (this.screenIndex == 5) {
// 向下滚动
this.index++;
this.toPage(this.index);
}
} else if (delta < 0 && parseInt(this.main.offsetTop) < 0) {
console.log("向上，index", this.index);
if (this.index == 1) {
this.screenIndex--;
}
if (this.screenIndex == 5) {
// 向上滚动
this.index--;
this.toPage(this.index);
}
}
// 本次翻页结束，记录结束时间，用于下次判断
this.endTime = new Date().getTime();
} else {
console.log(
"this.index例外",
this.index,
this.screenIndex,
this.main.offsetTop
);
if (delta < 0 && this.index == 1) {
if (this.screenIndex >1) {
console.log(111111);
this.screenIndex--;
}
}
}
},
// 翻页
toPage(index) {
if (index != this.curIndex) {
let delta = index - this.curIndex;
this.nowTop = this.nowTop - delta * this.screenHeight;
this.curIndex = index;
console.log("index", this.curIndex);
}
},
changeTab(id) {
this.checkedTab = id;
},
handleScroll() { handleScroll() {
// 实现当滚动到指定位置，触发动画 // 实现当滚动到指定位置，触发动画
console.log(11111); console.log(11111);
...@@ -61,71 +267,214 @@ export default { ...@@ -61,71 +267,214 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.show-bg { html,
body {
height: 100%;
}
body,
ul,
li,
a,
p,
div {
/*慎删*/
padding: 0px;
margin: 0px;
}
#wrap {
overflow: hidden;
width: 100%;
background: #091a38; background: #091a38;
color: #ffffff; }
padding: 100px 0;
#main {
position: relative;
margin-bottom: 100px;
transition: top 1.5s;
}
.page {
/*谨删*/
width: 100%;
margin: 0;
}
.show-bg {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
position: relative;
} }
.show-video { .show-video {
width: 1200px; width: 80%;
max-width: 80%;
margin-top: 140px; margin-top: 140px;
border-radius: 20px; border-radius: 20px;
-webkit-backface-visibility: visible !important; -webkit-backface-visibility: visible !important;
backface-visibility: visible !important; backface-visibility: visible !important;
position: relative;
.show-border {
border: 10px solid #000;
}
.video { .video {
height: 430px;
object-fit: fill; object-fit: fill;
border-radius: 10px; border-radius: 10px;
width: 100%; width: 100%;
height: 100%; height: 100%;
transform: perspective(400px) rotate3d(1, 0, 0, 20deg); transform: perspective(1200px) rotate3d(1, 0, 0, 50deg);
} }
.animate-video { .animate-video {
transform: perspective(400px); transform: perspective(1200px);
width: 1200px; width: 100%;
height: 800px; height: 50vw;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-name: flipInX;
animation-name: flipInX;
// margin-bottom: 30px;
}
.show-url {
width: 35%;
position: absolute;
left: 0;
top: 0;
bottom: 5px;
z-index: 1;
border: 10px solid #000;
img {
width: 100%;
height: 100%;
}
} }
} }
.show-title { .show-title {
margin: 0 auto; margin: 0 auto;
text-align: center;
width: 30%; width: 30%;
padding-top: 10%;
}
.show-mask {
width: 100%;
height: 100%;
background: rgba(11, 11, 20, 0.85);
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
img {
width: 40%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
}
.show-tab {
width: 100%;
height: 100%;
position: relative;
img {
width: 100%;
height: 100%;
}
.my-tab {
width: 40%;
position: absolute;
left: 50%;
left: 50%;
transform: translate(-50%, -50%);
bottom: 30px;
z-index: 1;
display: flex;
justify-content: space-between;
font-size: 20px;
border-bottom: 1px solid #ccc;
> li {
padding-bottom: 10px;
color: #ccc;
&.checked {
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-image: -webkit-gradient(
linear,
left top,
right top,
from(#178cde),
to(#00ffe4)
);
background-image: -webkit-linear-gradient(left, #178cde, #00ffe4);
background-image: -moz-linear-gradient(left, #178cde, #00ffe4);
background-image: linear-gradient(to right, #178cde, #00ffe4);
color: linear-gradient(to right, #178cde, #00ffe4);
border-bottom: 1px solid linear-gradient(to right, #178cde, #00ffe4);
position: relative;
}
&.checked::after {
content: "";
// width: 20%;
height: 1px;
position: absolute;
left: 0;
right: 0;
bottom: 0;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
transition: 0.3s;
background-image: -webkit-gradient(
linear,
left top,
right top,
from(#178cde),
to(#00ffe4)
);
background-image: -webkit-linear-gradient(left, #178cde, #00ffe4);
background-image: -moz-linear-gradient(left, #178cde, #00ffe4);
background-image: linear-gradient(to right, #178cde, #00ffe4);
}
}
}
} }
@-webkit-keyframes flipInX { @-webkit-keyframes flipInX {
from { from {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 20deg); -webkit-transform: perspective(1200px) rotate3d(1, 0, 0, 25deg);
transform: perspective(400px) rotate3d(1, 0, 0, 20deg); transform: perspective(1200px) rotate3d(1, 0, 0, 25deg);
-webkit-animation-timing-function: ease-in; -webkit-animation-timing-function: linear;
animation-timing-function: ease-in; animation-timing-function: linear;
} }
to { to {
-webkit-transform: perspective(400px); -webkit-transform: perspective(1200px);
transform: perspective(400px); transform: perspective(1200px);
} }
} }
@keyframes flipInX { @keyframes flipInX {
from { from {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-transform: perspective(1200px) rotate3d(1, 0, 0, 25deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(1200px) rotate3d(1, 0, 0, 25deg);
-webkit-animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; animation-timing-function: ease-in;
} }
20% {
-webkit-transform: perspective(1200px) rotate3d(1, 0, 0, 20deg);
transform: perspective(1200px) rotate3d(1, 0, 0, 20deg);
}
40% {
-webkit-transform: perspective(1200px) rotate3d(1, 0, 0, 10deg);
transform: perspective(1200px) rotate3d(1, 0, 0, 10deg);
}
80% { 80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); -webkit-transform: perspective(1200px) rotate3d(1, 0, 0, 5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(1200px) rotate3d(1, 0, 0, 5deg);
} }
to { to {
-webkit-transform: perspective(400px); -webkit-transform: perspective(1200px);
transform: perspective(400px); transform: perspective(1200px);
} }
} }
...@@ -187,5 +536,57 @@ export default { ...@@ -187,5 +536,57 @@ export default {
-webkit-animation-duration: 3s; -webkit-animation-duration: 3s;
animation-duration: 3s; animation-duration: 3s;
} }
.show-moretitle {
width: 10%;
margin: 100px 0;
}
.show-more {
display: flex;
align-items: center;
width: 80%;
> div {
width: calc(25% - 30px);
margin: 15px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
img {
width: 131px;
height: 131px;
margin-bottom: 34px;
}
p {
color: #ccc;
font-size: 24px;
}
.show-subtitle {
font-size: 40px;
margin-bottom: 30px;
color: #ffffff;
}
}
}
.show-btn {
background: linear-gradient(270deg, #b8832d 0%, #f6c943 100%);
border-radius: 51px;
width: 330px;
padding: 10px 0;
margin: 150px auto 300px;
color: #ffff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
p:first-child {
font-size: 38px;
margin-bottom: 5px;
}
p:last-child {
font-size: 14px;
}
}
// 动画效果
</style> </style>
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