fix

src/pages/main.vue

 <template>
-    <transition name = 'move_right'>
-        <view v-show = 'loading.end' class = 'background' :style = "{ '--index' : index.end }">
-            <view class = 'pic' v-html = 'Const.pic.hajimi'></view>
-        </view>
-    </transition>
-    <transition name = 'move_left'>
-        <view v-show = 'loading.start' class = 'background' :style = "{ '--index' : index.start }">
+    <transition name = 'page'>
+        <view v-show = 'loading' class = 'background'>
             <view class = 'pic' v-html = 'Const.pic.hajimi'></view>
         </view>
     </transition>
@@ -17,37 +12,17 @@
     import emitter from '../script/emitter.ts';
     import Const from '../script/const.ts';
 
-    let loading = reactive({
-        start : false,
-        end : true
-    });
-
-    let index = reactive({
-        start : 100,
-        end : 99
-    });
+    let loading = ref(true);
 
     const changeUrl = async (url : string) : Promise<void> => {
-        loading.start = true;
+        loading.value = !loading.value;
         await (new Promise(resolve => setTimeout(resolve, 500)));
         window.location.replace(url);
     }
 
     const show =  async () : Promise<void> => {
-        if (loading.start) {
-            loading.end = true;
-            await (new Promise(resolve => setTimeout(resolve, 500)));
-            index.end = 100;
-            index.start = 99;
-            loading.start = false;
-            await (new Promise(resolve => setTimeout(resolve, 500)));
-            loading.end = false;
-            index.end = 99;
-            index.start = 100;
-            return;
-        }
         await (new Promise(resolve => setTimeout(resolve, 500)));
-        loading.end = false;
+        loading.value = !loading.value;
     }
 
     onBeforeMount(() : void => {
@@ -69,7 +44,7 @@
         background: linear-gradient(45deg, rgb(0, 162, 255), rgb(0, 72, 255));
         width: 100vw;
         height: 100vh;
-        z-index: var(--index);
+        z-index: 100;
         font-family: 'Courier New', monospace;
         display: flex;
         justify-content: center;

src/pages/tabulator.vue

@@ -42,7 +42,7 @@
                 :title = 'Mycard.username'
                 :sub-title = 'Mycard.email'
                 :thumbnail = 'Mycard.avatar'
-                :style = "{ '--size' : `${size.width > size.height ? size.width / 2 : size.width / 1.2}px` }"
+                :style = "{ '--size' : `${size.width > size.height ? size.width / 2 : size.width / 1.2}px`, '--minsize' : `${size.width > size.height ? size.width / 4 : size.width / 2.4}px` }"
             >
             <view v-show = 'Mycard.id >= 0'><h2>{{ Mycard.id }}</h2></view>
             <hr v-show = 'Mycard.id >= 0'>
@@ -181,7 +181,7 @@
             },
             tournament : (v : number = 0): void => {
                 const url = window.location.href.split('/?');
-                emitter.emit(Const.changeUrl, `${url[0].replace(/\/?$/, '')}/${search.result.tournaments[v].id}${url[1] ? `/?${url[1]}` : ''}`);
+                emitter.emit(Const.changeUrl, `${url[0]}/${search.result.tournaments[v].id}${url[1] ? `/?${url[1]}` : ''}`);
             },
             menu : async(): Promise<void> => {
                 page.tournament = false;
@@ -411,12 +411,18 @@
     const loading = async () : Promise<void> => {
         const url = window.location.hash.match(/#\/(.*?)(?:\?|$)/);
         if (url) {
+            
             if (!isNaN(parseInt(url[1]))) {
                 page.menu = false;
                 page.tournament = true;
                 emitter.emit(Const.showTournament);
                 return;
             } else if (url[1].length == 0) {
+                if (window.location.href.includes('/?') && window.location.hash.endsWith('#/')) {
+                    const i = window.location.href.split('/?');
+                    window.location.replace(`${i[0].replace('#/', '')}/#${i[1] ? `/?${i[1].replace('#/', '')}` : '/'}`);
+                    return;
+                }
                 page.tournament = false;
                 page.menu = true;
                 search.mine();

src/script/mycard.ts

 import { Buffer } from 'buffer';
+import { ref } from 'vue';
 import emitter from './emitter.ts'
 import Const from './const.ts'
 
@@ -51,9 +52,16 @@ class MyCard {
 
     logout() {
         window.localStorage.removeItem('mycardLogin');
-        emitter.emit(Const.changeUrl, window.location.href.replace(/\/\?.*/, ''));
+        this.user = {} as MyCardSSOUser;
+        this.id = -1;
+        this.token = '';
+        this.username = '';
+        this.email = '';
+        this.avatar = 'https://cdn02.moecube.com:444/accounts/default_avatar.jpg';
+        const url = window.location.href.split('/?');
+        emitter.emit(Const.changeUrl, `${url[0]}/`);
     }
 }
 
-const Mycard = new MyCard();
+const Mycard = ref(new MyCard()).value;
 export default Mycard;
\ No newline at end of file

src/style/page.scss

@@ -33,6 +33,7 @@
         right: 2%;
         z-index: 2;
         max-width: var(--size);
+        min-width: var(--minsize);
         .user {
             &:hover {
                 cursor: pointer;

src/style/transition.scss

@@ -15,7 +15,7 @@
     }
 }
 
-.move_left, .move_left_slow {
+.move_left {
     &-enter-active,
     &-leave-active {
         transition: transform 0.5s ease;
@@ -32,7 +32,7 @@
     }
 }
 
-.move_right, .move_right_slow {
+.move_right {
     &-enter-active,
     &-leave-active {
         transition: transform 0.5s ease;
@@ -71,3 +71,23 @@
         transform: translateY(0%);
     }
 }
+
+.page {
+    &-enter-active,
+    &-leave-active {
+        transition: transform 0.5s ease;
+    }
+
+    &-enter-from {
+        transform: translateX(-200%);
+    }
+
+    &-enter-to,
+    &-leave-from {
+        transform: translateX(0%);
+    }
+
+    &-leave-to  {
+        transform: translateX(200%);
+    }
+}
\ No newline at end of file