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.
 
 

148 lines
3.2 KiB

<template>
<div :class="['tw-h-full tw-p-[30px] tw-bg-white md:tw-bg-primary-pale']">
<div
class="xl:tw-grid xl:tw-grid-cols-[auto_414px] xl:tw-gap-[96px] xl:tw-max-w-[1246px] xl:tw-mx-auto xl:tw-px-[60px]">
<div class="tw-hidden xl:tw-block xl:tw-mt-[30px]">
<p class="welcome tw-text-primary-light">{{ $t("Welcome to ShowEasy") }}</p>
<p class="sub tw-text-neutral-400">
{{
$t(
"Your best guide from trip to show and from show to the world."
)
}}
</p>
<img class="mt-11 ml-15" :src="require('@/assets/img/UserLoginMain.png')" />
</div>
<div class="md:tw-w-[414px] md:tw-mx-auto">
<div class="tw-bg-white md:tw-rounded-[24px] md:tw-mt-[30px] md:tw-pt-[60px] md:tw-pb-[150px] md:tw-px-[30px]">
<div class="tw-font-bold tw-text-black tw-text-[18px] tw-mb-[16px]">
Thank you for signing up.
</div>
<div class="tw-text-black tw-text-[16px] tw-mb-[24px]">
Your email has been verified.
</div>
<button class="tw-bg-primary-1 tw-text-white tw-text-[16px] tw-w-full tw-py-[10px] tw-rounded-[16px] tw-mb-[16px]">
Explore with ShowEasy
</button>
<div class="tw-mx-auto tw-text-primary-1 tw-text-[14px] tw-w-fit">
Go to ShowEasy in {{ `${this.countdown}` }} sec...
</div>
<loading :isLoading="isPageLoading"></loading>
</div>
</div>
</div>
</div>
</template>
<script>
import loading from "@/components/newComponent/loading/loading.vue";
export default {
name: "Redirect",
layout: "login",
auth: false,
components: {
loading,
},
data() {
return {
isPageLoading: false,
countdown: 5,
};
},
watch: {
},
created(){
this.secondCountDown();
},
methods: {
secondCountDown(){
this.timer = setInterval(() => {
if (this.countdown > 0) {
this.countdown--;
}
if (this.countdown === 0) {
clearInterval(this.timer);
}
}, 1000);
if(this.countdown === 0){
console.log("0")
}
}
},
computed: {
},
};
</script>
<style lang="scss" scoped>
#app {
overflow-y: hidden;
}
.welcome {
color: #f5cda8;
font-family: Damion;
font-size: 48px;
margin-bottom: 0px;
font-weight: 400;
line-height: 66px;
letter-spacing: 0.02em;
}
.sub {
color: #9c9c9c;
font-style: italic;
font-weight: 400;
font-size: 22px;
line-height: 29px;
letter-spacing: 0.02em;
}
:deep(.v-text-field.v-text-field--enclosed .v-text-field__details) {
padding: 0;
margin: 0;
}
:deep(.v-messages__message) {
font-size: 14px;
}
$border-style: 1px solid #e5e5e5;
.title {
font-weight: 700;
font-size: 26px;
line-height: 34px;
letter-spacing: 0.02em;
color: #232323;
}
:deep(.v-text-field.v-text-field--enclosed .v-text-field__details) {
margin-bottom: 0;
padding: 0;
.v-messages {
color: #9c9c9c;
display: none;
}
.v-messages.error--text {
display: block;
margin-top: 4px;
margin-bottom: 16px;
}
}
.btn-border {
border: $border-style;
}
</style>