Skip to content

A
antaile-web
Commit a4f89454 by wangyalan-git
Options

首页

parent cc1f193a
Showing with 590 additions and 150 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/Home/index.vue
<template>
<div>
<router-link :to="{ path: 'register' }">跳转</router-link>
<Header></Header>
<div class="show-bg">
<img src="@/assets/images/writtenwords.png" alt="" class="show-title" />
<div class="show-video">
<!-- animated flipInX -->
<video
autoplay
loop
:class="[{ 'animate-video': scrollTop }, 'video']"
v-on:canplay="canplay"
muted
ref="video">
<source :src="PATH_TO_MP4" type="video/mp4" />
浏览器不支持 video 标签，建议升级浏览器。
<!-- <source :src="PATH_TO_WEBM" type="video/webm"/>
<div id="wrap" :style="{ height: screenHeight + 'px' }">
<div class="main" id="main" :style="{ top: nowTop + 'px' }">
<!-- 第一屏 -->
<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
autoplay
loop
:class="[
{
'animate-video':
screenIndex == 2 ||
screenIndex == 3 ||
screenIndex == 4 ||
screenIndex == 5,
},
{ 'show-border': screenIndex == 4 },
'video',
]"
v-on:canplay="canplay"
muted
ref="video"
>
<source :src="PATH_TO_MP4" type="video/mp4" />
浏览器不支持 video 标签，建议升级浏览器。
<!-- <source :src="PATH_TO_WEBM" type="video/webm"/>
浏览器不支持 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>
<Footer></Footer>
......@@ -32,18 +138,118 @@ export default {
Footer,
},
props: {},
created() {
window.addEventListener("scroll", this.handleScroll);
},
data() {
return {
vedioCanPlay: false,
PATH_TO_MP4: "https://atlimg.oss-cn-hangzhou.aliyuncs.com/web/2574.mp4",
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: {
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() {
// 实现当滚动到指定位置，触发动画
console.log(11111);
......@@ -61,71 +267,214 @@ export default {
</script>
<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;
color: #ffffff;
padding: 100px 0;
}
#main {
position: relative;
margin-bottom: 100px;
transition: top 1.5s;
}
.page {
/*谨删*/
width: 100%;
margin: 0;
}
.show-bg {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.show-video {
width: 1200px;
width: 80%;
max-width: 80%;
margin-top: 140px;
border-radius: 20px;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
position: relative;
.show-border {
border: 10px solid #000;
}
.video {
height: 430px;
object-fit: fill;
border-radius: 10px;
width: 100%;
height: 100%;
transform: perspective(400px) rotate3d(1, 0, 0, 20deg);
transform: perspective(1200px) rotate3d(1, 0, 0, 50deg);
}
.animate-video {
transform: perspective(400px);
width: 1200px;
height: 800px;
transform: perspective(1200px);
width: 100%;
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 {
margin: 0 auto;
text-align: center;
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 {
from {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 20deg);
transform: perspective(400px) rotate3d(1, 0, 0, 20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
-webkit-transform: perspective(1200px) rotate3d(1, 0, 0, 25deg);
transform: perspective(1200px) rotate3d(1, 0, 0, 25deg);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
-webkit-transform: perspective(1200px);
transform: perspective(1200px);
}
}
@keyframes flipInX {
from {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-transform: perspective(1200px) rotate3d(1, 0, 0, 25deg);
transform: perspective(1200px) rotate3d(1, 0, 0, 25deg);
-webkit-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% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
-webkit-transform: perspective(1200px) rotate3d(1, 0, 0, 5deg);
transform: perspective(1200px) rotate3d(1, 0, 0, 5deg);
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
-webkit-transform: perspective(1200px);
transform: perspective(1200px);
}
}
......@@ -187,5 +536,57 @@ export default {
-webkit-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>
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