Skip to content

A
antaile-web
Commit f09a3c67 by wangyalan-git
Options

首页

parent a4f89454
Showing with 169 additions and 101 deletions
src/components/Header.vue
......@@ -25,6 +25,10 @@ export default {
justify-content: space-between;
align-items: center;
padding: 0 calc((100% - 1200px) / 2);
position:fixed;
left: 0;
right: 0;
z-index: 999;
.logo{
width: 200px;
}
......
src/views/Home/index.vue
<template>
<div>
<router-link :to="{ path: 'register' }">跳转</router-link>
<Header></Header>
<div id="wrap" :style="{ height: screenHeight + 'px' }">
<Header></Header>
<div class="main" id="main" :style="{ top: nowTop + 'px' }">
<!-- 第一屏 -->
<div class="show-bg page" id="page1">
<transition leave-active-class="animated bounceOutUp">
<transition leave-active-class="animateTitle">
<img
class="show-title"
src="@/assets/images/writtenwords.png"
......@@ -29,17 +28,7 @@
<video
autoplay
loop
:class="[
{
'animate-video':
screenIndex == 2 ||
screenIndex == 3 ||
screenIndex == 4 ||
screenIndex == 5,
},
{ 'show-border': screenIndex == 4 },
'video',
]"
:class="[{ 'show-border': screenIndex == 4 }, 'video']"
v-on:canplay="canplay"
muted
ref="video"
......@@ -49,24 +38,30 @@
<!-- <source :src="PATH_TO_WEBM" type="video/webm"/>
浏览器不支持 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"
enter-active-class="animated mask-video"
leave-active-class="animated bounceOutDown"
>
<img
src="@/assets/images/writtenwordsone.png"
alt=""
v-if="screenIndex == 3"
/>
<div class="show-url" v-if="screenIndex == 4 || screenIndex == 5">
<img src="@/assets/images/1605239923175.png" alt="" />
</div>
</transition>
</div>
<transition leave-active-class="animated bounceOutDown">
<div class="show-mask" v-if="screenIndex == 3"></div>
</transition>
<transition
enter-active-class="animated bounceInUp"
leave-active-class="animated bounceOutDown"
>
<img
class="mask-img"
src="@/assets/images/writtenwordsone.png"
alt=""
v-if="screenIndex == 3"
/>
</transition>
<div class="show-mask" v-if="screenIndex == 5">
<img src="@/assets/images/writtenwordstwo.png" alt="" />
</div>
......@@ -74,16 +69,21 @@
<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 class="my-tab">
<ul>
<li
@click="changeTab(item.id)"
:class="checkedTab == item.id ? 'checked' : ''"
v-for="(item, index) in tabs"
:key="index"
>
{{ item.name }}
</li>
</ul>
<div class="show-tip">
我们提供了丰富模版，根据自己喜欢可自由选择
</div>
</div>
</div>
</div>
<div class="show-bg page" id="page3">
......@@ -124,8 +124,8 @@
</div>
</div>
</div>
<Footer></Footer>
</div>
<Footer></Footer>
</div>
</template>
<script>
......@@ -195,7 +195,7 @@ export default {
// DOMMouseScroll事件中的 “event.detail” 属性值：返回的如果是负值说明滚轮是向上滚动
let delta = event.detail || -event.wheelDelta;
// 如果当前滚动开始时间和上次滚动结束时间的差值小于1.5s，则不执行翻页动作，这样做是为了实现类似节流的效果
if (this.startTime - this.endTime > 1500) {
if (this.startTime - this.endTime > 500) {
if (
delta > 0 &&
parseInt(this.main.offsetTop) >=
......@@ -231,7 +231,7 @@ export default {
this.main.offsetTop
);
if (delta < 0 && this.index == 1) {
if (this.screenIndex >1) {
if (this.screenIndex > 1) {
console.log(111111);
this.screenIndex--;
}
......@@ -291,6 +291,9 @@ div {
#main {
position: relative;
width: 100%;
text-align: center;
margin: 0 auto;
margin-bottom: 100px;
transition: top 1.5s;
}
......@@ -303,38 +306,44 @@ div {
.show-bg {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}
.show-video {
width: 80%;
max-width: 80%;
width: 70%;
height: 60%;
max-width: 800px;
max-height: 600px;
margin-top: 140px;
border-radius: 20px;
border-radius: 30px;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
position: relative;
transform: perspective(1200px) rotate3d(1, 0, 0, 50deg);
.show-border {
border: 10px solid #000;
box-sizing: border-box;
}
.video {
object-fit: fill;
border-radius: 10px;
width: 100%;
height: 100%;
transform: perspective(1200px) rotate3d(1, 0, 0, 50deg);
}
.animate-video {
transform: perspective(1200px);
width: 100%;
height: 50vw;
&.animate-video {
transform: perspective(1200px) scale(1.2);
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-name: flipInX;
animation-name: flipInX;
// margin-bottom: 30px;
}
// .scale-video{
// -webkit-animation-duration: 0.5s;
// animation-duration: 0.5s;
// transform: scale(1.5);
// }
.show-url {
width: 35%;
position: absolute;
......@@ -343,6 +352,7 @@ div {
bottom: 5px;
z-index: 1;
border: 10px solid #000;
transform: translate(0px, 0px);
img {
width: 100%;
height: 100%;
......@@ -351,9 +361,11 @@ div {
}
.show-title {
margin: 0 auto;
width: 30%;
padding-top: 10%;
transform: translate3d(0px, 129.735px, 0px);
}
.animateTitle {
transform: translate(0px, -288.333px);
}
.show-mask {
width: 100%;
......@@ -364,21 +376,26 @@ div {
right: 0;
bottom: 0;
z-index: 1;
img {
width: 40%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
&.animate-hidden {
opacity: 0;
}
}
.mask-img {
width: 40%;
position: absolute;
left: 50%;
top: 50%;
// transform: translate(-50%, -50%);
margin-left: -20%;
z-index: 2;
}
.show-tab {
width: 100%;
height: 100%;
position: relative;
img {
width: 100%;
// max-height: 70%;
height: 100%;
}
.my-tab {
......@@ -389,13 +406,18 @@ div {
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;
ul {
display: flex;
justify-content: space-between;
font-size: 20px;
border-bottom: 2px solid #fff;
}
li {
padding: 20px 10px;
color: #fff;
font-size: 26px;
font-weight: bold;
cursor: pointer;
&.checked {
-webkit-background-clip: text;
background-clip: text;
......@@ -404,24 +426,24 @@ div {
linear,
left top,
right top,
from(#178cde),
to(#00ffe4)
from(#b8832d),
to(#f6c943)
);
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);
background-image: -webkit-linear-gradient(left, #b8832d, #f6c943);
background-image: -moz-linear-gradient(left, #b8832d, #f6c943);
background-image: linear-gradient(to right, #b8832d, #f6c943);
color: linear-gradient(to right, #b8832d, #f6c943);
border-bottom: 1px solid linear-gradient(to right, #b8832d, #f6c943);
position: relative;
}
&.checked::after {
content: "";
// width: 20%;
height: 1px;
height: 2px;
position: absolute;
left: 0;
right: 0;
bottom: 0;
bottom: -2px;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
transition: 0.3s;
......@@ -429,55 +451,97 @@ div {
linear,
left top,
right top,
from(#178cde),
to(#00ffe4)
from(#b8832d),
to(#f6c943)
);
background-image: -webkit-linear-gradient(left, #178cde, #00ffe4);
background-image: -moz-linear-gradient(left, #178cde, #00ffe4);
background-image: linear-gradient(to right, #178cde, #00ffe4);
background-image: -webkit-linear-gradient(left, #b8832d, #f6c943);
background-image: -moz-linear-gradient(left, #b8832d, #f6c943);
background-image: linear-gradient(to right, #b8832d, #f6c943);
}
}
.show-tip {
font-size: 16px;
color: #ffffff;
margin: 20px;
text-align: left;
}
}
}
@-webkit-keyframes flipInX {
.mask-video {
transform: translate3d(-692px, 0px, 576.667px) scale(1.3, 1.3);
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-name: scaleHidden;
animation-name: scaleHidden;
}
@keyframes scaleHidden {
from {
-webkit-transform: perspective(1200px) rotate3d(1, 0, 0, 25deg);
transform: perspective(1200px) rotate3d(1, 0, 0, 25deg);
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
// transform-origin: center bottom;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
to {
-webkit-transform: perspective(1200px);
transform: perspective(1200px);
// transform-origin: center bottom;
-webkit-transform: translate3d(-692px, 0px, 576.667px) scale(1.3, 1.3);
transform: translate3d(-692px, 0px, 576.667px) scale(1.3, 1.3);
}
}
// @-webkit-keyframes flipInX {
// from {
// -webkit-transform: perspective(1200px) rotate3d(1, 0, 0, 50deg);
// transform: perspective(1200px) rotate3d(1, 0, 0, 50deg);
// -webkit-animation-timing-function: linear;
// animation-timing-function: linear;
// }
// 50% {
// -webkit-transform: perspective(1200px) rotate3d(1, 0, 0, 30deg);
// transform: perspective(1200px) rotate3d(1, 0, 0, 30deg) ;
// }
// to {
// -webkit-transform: perspective(1200px) ;
// transform: perspective(1200px) ;
// }
// }
@keyframes flipInX {
from {
-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;
-webkit-transform: perspective(1200px) rotate3d(1, 0, 0, 50deg) scale(1);
transform: perspective(1200px) rotate3d(1, 0, 0, 50deg) scale(1);
// transform-origin: center bottom;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
20% {
-webkit-transform: perspective(1200px) rotate3d(1, 0, 0, 20deg);
transform: perspective(1200px) rotate3d(1, 0, 0, 20deg);
to {
// transform-origin: center bottom;
-webkit-transform: perspective(1200px) scale(1.2);
transform: perspective(1200px) scale(1.2);
}
40% {
-webkit-transform: perspective(1200px) rotate3d(1, 0, 0, 10deg);
transform: perspective(1200px) rotate3d(1, 0, 0, 10deg);
}
@keyframes bounceOutDown {
/*向下，向上，再直接下去：透明度为0*/
20% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
80% {
-webkit-transform: perspective(1200px) rotate3d(1, 0, 0, 5deg);
transform: perspective(1200px) rotate3d(1, 0, 0, 5deg);
40%,
45% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
to {
-webkit-transform: perspective(1200px);
transform: perspective(1200px);
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
}
/*动画持续时间*/
.animated {
-webkit-animation-duration: 1s;
......@@ -569,7 +633,7 @@ div {
}
.show-btn {
background: linear-gradient(270deg, #b8832d 0%, #f6c943 100%);
background: linear-gradient(260deg, #b8832d 0%, #f6c943 100%);
border-radius: 51px;
width: 330px;
padding: 10px 0;
......
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