Skip to content

A
antaile-web
Commit f09a3c67 by wangyalan-git
Options

首页

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