You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
231 lines
7.4 KiB
231 lines
7.4 KiB
<template>
|
|
<v-app>
|
|
<div id="app">
|
|
<!-- <Loader></Loader> -->
|
|
<!-- <Header></Header> -->
|
|
<background></background>
|
|
<v-container mt-5 p-5 fluid class="Login">
|
|
<h2 class="Title"> WILLA ENGINE </h2>
|
|
<transition name="Fade" mode="out-in" >
|
|
<v-layout v-if="State === 'Login'" key="Login" column justify-center fill-height class="LoginContainer" ref="LoginContainer" >
|
|
<v-flex xs12>
|
|
<WM-PartTitle class="WM-Margin-T-20" TitleFa=" ورود " TitleEn=" Login " TextFaColor="white--text" TextColor="black--text" Color="white"></WM-PartTitle>
|
|
<v-flex mt-3>
|
|
<v-text-field dark label=" شماره ی همراه خود را وارد کنید " hint="حداکثر 50 کاراکتر " color="white" prepend-icon="fas fa-phone"></v-text-field>
|
|
</v-flex>
|
|
<v-flex>
|
|
<v-text-field dark type="password" label=" کلمه ی عبور " color="white" prepend-icon="fas fa-asterisk"></v-text-field>
|
|
</v-flex>
|
|
<v-flex>
|
|
<v-btn outline fab color="white" @click="State = 'Register'">
|
|
<v-icon>fas fa-plus</v-icon>
|
|
</v-btn>
|
|
<a href="/Main/Home">
|
|
<v-btn outline fab color="white" >
|
|
<v-icon>fas fa-chevron-left</v-icon>
|
|
</v-btn>
|
|
</a>
|
|
</v-flex>
|
|
</v-flex>
|
|
</v-layout>
|
|
<v-layout v-if="State === 'Register'" key="Register" column justify-center fill-height class="RegisterContainer" ref="RegisterContainer" >
|
|
<WM-PartTitle class="WM-Margin-T-20" TitleFa=" ثبت نام " TitleEn=" Sign Up " TextFaColor="white--text" TextColor="black--text" Color="white"></WM-PartTitle>
|
|
<v-flex mt-3>
|
|
<v-text-field dark label=" نام و نام خانوادگی " hint="حداکثر 50 کاراکتر " color="white" prepend-icon="fas fa-user"></v-text-field>
|
|
</v-flex>
|
|
<v-flex>
|
|
<v-text-field dark label=" شماره ی همراه خود را وارد کنید " hint="حداکثر 50 کاراکتر " color="white" prepend-icon="fas fa-phone"></v-text-field>
|
|
</v-flex>
|
|
<v-flex>
|
|
<v-text-field dark type="password" label=" کلمه ی عبور " color="white" prepend-icon="fas fa-asterisk"></v-text-field>
|
|
</v-flex>
|
|
<v-flex>
|
|
<v-btn outline fab color="white" @click="State = 'Login'">
|
|
<v-icon>fas fa-plus</v-icon>
|
|
</v-btn>
|
|
<a href="/Main/Home">
|
|
<v-btn outline fab color="white" >
|
|
<v-icon>fas fa-chevron-left</v-icon>
|
|
</v-btn>
|
|
</a>
|
|
</v-flex>
|
|
</v-layout>
|
|
</transition>
|
|
|
|
</v-container>
|
|
|
|
|
|
</div>
|
|
</v-app>
|
|
</template>
|
|
|
|
<script>
|
|
import Background from '@JS/Authentication/components/Background';
|
|
import Tile from '@JS/Authentication/components/Tile';
|
|
import Loader from '@JS/Authentication/components/Loader';
|
|
import Header from '@JS/Authentication/components/Header';
|
|
export default {
|
|
data() {
|
|
return {
|
|
loading: true,
|
|
isShifted: false,
|
|
loadingVisible: false,
|
|
RegisterStatus: false,
|
|
LoginStatus: false,
|
|
State: 'Login'
|
|
};
|
|
},
|
|
|
|
components: {
|
|
Header: Header,
|
|
background: Background,
|
|
Tile: Tile,
|
|
Loader: Loader,
|
|
},
|
|
methods: {
|
|
Register: function() {
|
|
// console.log(this.$refs.RegisterContainer)
|
|
this.RegisterStatus = !this.RegisterStatus;
|
|
this.LoginStatus = !this.LoginStatus;
|
|
},
|
|
Log(value) {
|
|
this.$store.commit('Log',value);
|
|
}
|
|
},
|
|
beforeMount() {
|
|
var self = this;
|
|
setTimeout(function() {
|
|
self.loading = ! self.loading;
|
|
}, 2000)
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
|
|
.Title {
|
|
letter-spacing: 15px;
|
|
font-size: 18px;
|
|
text-align: center;
|
|
color: #fff;
|
|
|
|
}
|
|
.Login {
|
|
// animation: FadeInUp 1s;
|
|
// transition: all 600ms cubic-bezier(.17,.67,1,.01);
|
|
|
|
}
|
|
.LoginContainer, .RegisterContainer {
|
|
margin-top: 150px !important;
|
|
width:600px;
|
|
margin:0 auto;
|
|
}
|
|
|
|
|
|
|
|
.Blur-enter-active, .Blur2-leave-active {
|
|
animation: BlurIn 0.5s;
|
|
animation-fill-mode: both;
|
|
}
|
|
.Blur-enter, .Blur2-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
|
animation: BlurOut 0.5s;
|
|
animation-fill-mode: both;
|
|
}
|
|
|
|
|
|
.FadeUp-enter-active, .FadeUp-leave-active {
|
|
animation: FadeInUp 500ms;
|
|
}
|
|
.FadeUp-enter, .FadeUp-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
|
animation: FadeOutUp 200ms;
|
|
}
|
|
|
|
|
|
.Fade-enter-active, .Fade-leave-active {
|
|
animation: FadeIn 500ms;
|
|
}
|
|
.Fade-enter, .Fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
|
animation: FadeOut 500ms;
|
|
}
|
|
|
|
|
|
@keyframes FadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
display:none;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@keyframes FadeOut {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
display:none;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
|
|
@keyframes FadeInUp {
|
|
0% {
|
|
display:none;
|
|
opacity: 0;
|
|
transform: translateY(300px);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0px);
|
|
}
|
|
}
|
|
@keyframes FadeOutUp {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateY(0px);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(-300px);
|
|
display:none;
|
|
}
|
|
}
|
|
|
|
|
|
@keyframes BlurIn {
|
|
0% {
|
|
opacity: 0;
|
|
filter: blur(40px);
|
|
-webkit-filter: blur(40px);
|
|
transform: translateY(50px) scale(3);
|
|
-webkit-transform: translateY(50px) scale(3);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
filter: blur(0px);
|
|
-webkit-filter: blur(0px);
|
|
transform: translateY(0px) scale(1);
|
|
-webkit-transform: translateY(0px) scale(1);
|
|
}
|
|
}
|
|
@keyframes BlurOut {
|
|
0% {
|
|
opacity: 1;
|
|
filter: blur(0px);
|
|
-webkit-filter: blur(0px);
|
|
transform: translateY(0px) scale(1);
|
|
-webkit-transform: translateY(0px) scale(1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
filter: blur(40px);
|
|
-webkit-filter: blur(40px);
|
|
transform: translateY(0px) scale(0.4);
|
|
-webkit-transform: translateY(0px) scale(0.4);
|
|
}
|
|
}
|
|
|
|
|
|
</style>
|