Skip to content

Commit

Permalink
Merge pull request #430 from hamster-shared/login-hot
Browse files Browse the repository at this point in the history 
new user
  • Loading branch information
@Dennisic
Dennisic authored Nov 28, 2023
2 parents a129afa + 84d727a commit 36c505f
Showing 1 changed file with 100 additions and 50 deletions.
150 changes: 100 additions & 50 deletions src/views/login/welcome.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,15 @@
<img src="@/assets/icons/welcome-top.svg" class="h-[28px]" />
</div>
<div class="content-div">
<div class="content-bg" :class="[isJump === true ? 'content-bg-hidden' : 'content-bg-show', {'hidden' : isShowGX === true}]">
<div class="whitespace-pre-wrap">{{ showText }}<label :class="[showText === '' ? 'hidden' : 'visible', {'cursor-css' : isEnd === true}]">|</label></div>
<div class="content-bg"
:class="[isJump === true ? 'content-bg-hidden' : 'content-bg-show', { 'hidden': isShowGX === true }]">
<div class="whitespace-pre-wrap">{{ showText }}<label
:class="[showText === '' ? 'hidden' : 'visible', { 'cursor-css': isEnd === true }]">|</label></div>
</div>
</div>
<div class="welcome-gx-div w-full h-full flex justify-center items-center">
<img class="w-[200px] h-[200px]" :class="[isShowGX === true ? 'welcome-gx' : 'hidden']" src="@/assets/icons/welcome-gx.svg" />
<div class="flex items-center justify-center w-full h-full welcome-gx-div">
<img class="w-[200px] h-[200px]" :class="[isShowGX === true ? 'welcome-gx' : 'hidden']"
src="@/assets/icons/welcome-gx.svg" />
</div>
<div class="welcome-fd" :class="[isShowGX === true ? 'welcome-fd-hidden' : 'welcome-fd-show']">
<img class="w-[200px] h-[200px]" src="@/assets/icons/welcome-fd.svg" />
Expand All @@ -24,7 +27,7 @@
</template>
<script lang='ts' setup>
import { onMounted, onUnmounted, ref } from 'vue';
import { apiUpdateFristState, apiGetUser } from "@/apis/login";
import { apiUpdateFristState, getUserInfo } from "@/apis/login";
import { useRouter } from "vue-router";
const router = useRouter()
Expand Down Expand Up @@ -86,36 +89,36 @@ const changeContentLine = () => {
setTimeout(() => {
if (keyValue.value === "1") { //project页面
router.push('/projects')
} else if (keyValue.value === "2"){ //nodeServer页面
} else if (keyValue.value === "2") { //nodeServer页面
router.push('/node-service/RPCs')
}
}, 2000);
}
}
const updateFristState = async () => {
try {
await apiUpdateFristState();
window.localStorage.setItem('firstShowProjects', "1");
window.localStorage.setItem('firstShowNodeService', "1");
} catch (error: any) {
console.log("erro:",error)
console.log("erro:", error)
} finally {
getUser();
}
}
const getUser = async () => {
try {
const { data } = await apiGetUser();
const { data } = await getUserInfo();
localStorage.setItem('firstState', data.firstState.toString());
localStorage.setItem('userInfo', JSON.stringify(data));
} catch (error: any) {
console.log("erro:",error)
}
console.log("erro:", error)
}
}
const changeContent = (type: string) => {
Expand Down Expand Up @@ -143,7 +146,7 @@ const changeContent = (type: string) => {
setTimeout(() => {
if (keyValue.value === "1") { //project页面
router.push('/projects')
} else if (keyValue.value === "2"){ //nodeServer页面
} else if (keyValue.value === "2") { //nodeServer页面
router.push('/node-service/RPCs')
}
}, 1500);
Expand All @@ -152,128 +155,150 @@ const changeContent = (type: string) => {
}
</script>
<style lang='less' scoped>
.content-div{
.content-div {
width: 655px;
height: 360px;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 99;
position: relative;
overflow: hidden;
overflow: hidden;
}
.content-bg{
.content-bg {
width: 100%;
height: 100%;
background: url(../../assets/icons/welcom-contentbg.svg);
background-size: cover;
padding: 50px;
color: #FFFFFF;
font-size: 16px;
font-size: 16px;
}
.welcome-gx-div{
.welcome-gx-div {
width: 100%;
height: 100%;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 999;
position: absolute;
overflow: hidden;
overflow: hidden;
}
.welcome-gx{
.welcome-gx {
-webkit-animation: scaleGX 500ms 1;
animation: scaleGX 500ms 1;
}
@keyframes scaleGX {
0% {
opacity: 100;
transform: scale(0.2, 0.2);
}
100% {
opacity: 100;
transform: scale(20, 20);
background: #FFFFFF;
}
}
.content-bg-show{
.content-bg-show {
-webkit-animation: scale 2s 1;
animation: scale 2s 1;
animation: scale 2s 1;
}
@keyframes scale {
0% {
opacity: 0;
transform: scale(0.2, 0.2);
}
100% {
opacity: 100;
transform: scale(1, 1);
}
}
.content-bg-hidden{
.content-bg-hidden {
-webkit-animation: scaleH 1s 1;
animation: scaleH 1s 1;
animation: scaleH 1s 1;
}
@keyframes scaleH {
0% {
opacity: 100;
transform: scale(1, 1);
}
50% {
transform: scale(1, 0.1);
}
100% {
transform: scale(0, 0.1);
}
}
.welcome-fd{
.welcome-fd {
position: absolute;
z-index: 99;
right: 10%;
top: 8%;
-webkit-animation: bounce 6s infinite;
animation: bounce 6s infinite;
}
.welcome-fd-show{
.welcome-fd-show {
-webkit-animation: bounce 6s infinite;
animation: bounce 6s infinite;
}
.welcome-fd-hidden{
.welcome-fd-hidden {
-webkit-animation: bounceH 2s 1;
animation: bounceH 2s 1;
}
@keyframes bounce {
0%,
100% {
transform: translate(0, 0);
animation-timing-function: ease;
}
50% {
transform: translate(-20px, 20px);
animation-timing-function: ease;
}
}
@keyframes bounceH {
0% {
opacity: 100;
}
100% {
opacity: 0;
transform: translate(200px, -200px);
animation-timing-function: ease;
}
}
.welcome-bg{
.welcome-bg {
width: 100%;
height: 100%;
z-index: 9;
position: relative;
overflow: hidden;
}
.welcome-bg::before {
content: "";
position: absolute;
Expand All @@ -290,21 +315,37 @@ const changeContent = (type: string) => {
animation: rotate 50s linear infinite;
}
@keyframes rotate{
0%{-webkit-transform:rotate(0deg);}
25%{-webkit-transform:rotate(90deg);}
50%{-webkit-transform:rotate(180deg);}
75%{-webkit-transform:rotate(270deg);}
100%{-webkit-transform:rotate(360deg);}
@keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(90deg);
}
50% {
-webkit-transform: rotate(180deg);
}
75% {
-webkit-transform: rotate(270deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
.welcome-xq{
.welcome-xq {
width: 300px;
height: 300px;
z-index: 9;
position: absolute;
overflow: hidden;
bottom: 0px;
}
.welcome-xq::before {
content: "";
position: absolute;
Expand All @@ -316,34 +357,43 @@ const changeContent = (type: string) => {
background: url(../../assets/icons/welcome-xq.svg) 100% 100% no-repeat;
background-size: cover;
}
.welcome-xq-show::before{
.welcome-xq-show::before {
-webkit-animation: rotate 50s linear infinite;
-moz-animation: rotate 50s linear infinite;
-o-animation: rotate 50s linear infinite;
animation: rotate 50s linear infinite;
}
.welcome-xq-hidden{
.welcome-xq-hidden {
-webkit-animation: bouncexqH 2s 1;
animation: bouncexqH 2s 1;
}
@keyframes bouncexqH {
0% {
opacity: 100;
}
100% {
opacity: 0;
transform: translate(-200px, 200px);
animation-timing-function: ease;
}
}
.cursor-css{
.cursor-css {
-webkit-animation: bounceCursor 1s infinite;
animation: bounceCursor 1s infinite;
}
@keyframes bounceCursor {
0%,100% {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0;
}
Expand Down

0 comments on commit 36c505f

Please sign in to comment.