菜单动画

src/features/mark/Mark.vue

@@ -362,5 +362,6 @@ const saveTaskToServer = async () => {
 <style scoped>
 .my-container {
   width: 100%;
+  overflow: clip;
 }
 </style>

src/features/mark/MarkBoardKeyBoard.vue

@@ -16,7 +16,7 @@
   <div
     v-if="store.currentTask"
     class="mark-board-track-container"
-    :class="store.setting.uiSetting['score.board.collapse'] && 'hide-board'"
+    :class="[store.setting.uiSetting['score.board.collapse'] ? 'hide' : 'show']"
   >
     <div class="tw-my-2 tw-flex">
       <a-dropdown class="tw-self-end">
@@ -321,16 +321,23 @@ function submit() {
 
 <style scoped>
 .mark-board-track-container {
-  max-width: 250px;
-  min-width: 250px;
+  max-width: 290px;
+  min-width: 290px;
   border-left: 1px solid grey;
   padding-left: 6px;
   padding-right: 6px;
   max-height: calc(100vh - 56px);
   overflow: auto;
   z-index: 1001;
+  transition: margin-right 0.5s;
 }
-.hide-board {
+.mark-board-track-container.show {
+  margin-right: 0;
+}
+.mark-board-track-container.hide {
+  margin-right: -290px;
+}
+/* .hide-board {
   display: none;
 }
 .show-board {
@@ -338,7 +345,7 @@ function submit() {
   background-color: white;
   right: 0px;
   display: block;
-}
+} */
 .question {
   min-width: 80px;
   border: 1px solid grey;

src/features/mark/MarkBoardMouse.vue

@@ -16,7 +16,7 @@
   <div
     v-if="store.currentTask"
     class="mark-board-track-container"
-    :class="store.setting.uiSetting['score.board.collapse'] && 'hide-board'"
+    :class="[store.setting.uiSetting['score.board.collapse'] ? 'hide' : 'show']"
   >
     <div class="tw-my-2 tw-flex">
       <!-- <div
@@ -183,16 +183,23 @@ function submit() {
 
 <style scoped>
 .mark-board-track-container {
-  max-width: 250px;
-  min-width: 250px;
+  max-width: 290px;
+  min-width: 290px;
   border-left: 1px solid grey;
   padding-left: 6px;
   padding-right: 6px;
   max-height: calc(100vh - 56px);
   overflow: auto;
   z-index: 1001;
+  transition: margin-right 0.5s;
 }
-.hide-board {
+.mark-board-track-container.show {
+  margin-right: 0;
+}
+.mark-board-track-container.hide {
+  margin-right: -290px;
+}
+/* .hide-board {
   display: none;
 }
 .show-board {
@@ -200,7 +207,7 @@ function submit() {
   background-color: white;
   right: 0px;
   display: block;
-}
+} */
 .question {
   min-width: 80px;
   border: 1px solid grey;

src/features/mark/MarkBoardTrack.vue

@@ -2,7 +2,7 @@
   <div
     v-if="store.currentTask"
     class="mark-board-track-container"
-    :class="store.setting.uiSetting['score.board.collapse'] && 'hide-board'"
+    :class="[store.setting.uiSetting['score.board.collapse'] ? 'hide' : 'show']"
   >
     <div class="tw-flex">
       <!-- <div class="tw-self-start tw-cursor-pointer hover:tw-bg-gray-200">
@@ -348,24 +348,32 @@ function submit() {
 
 <style scoped>
 .mark-board-track-container {
-  max-width: 250px;
-  min-width: 250px;
+  max-width: 290px;
+  min-width: 290px;
   border-left: 1px solid grey;
   padding-left: 6px;
   padding-right: 6px;
   max-height: calc(100vh - 56px);
   overflow: auto;
   z-index: 1001;
+  transition: margin-right 0.5s;
 }
-.hide-board {
-  display: none;
+.mark-board-track-container.show {
+  margin-right: 0;
+}
+.mark-board-track-container.hide {
+  margin-right: -290px;
 }
-.show-board {
+
+/* .hide-board {
+  display: none;
+} */
+/* .show-board {
   position: absolute;
   background-color: white;
   right: 0px;
   display: block;
-}
+} */
 .question {
   min-width: 100px;
   max-width: 100px;

src/features/mark/MarkHistory.vue

@@ -50,7 +50,7 @@
         />
       </div>
     </div>
-    <a-spin :spinning="loading" size="large" tip="Loading..." delay="0.5">
+    <a-spin :spinning="loading" size="large" tip="Loading..." :delay="500">
       <div style="margin-bottom: -40px; padding-bottom: 40px">
         <div v-for="(task, index) of store.historyTasks" :key="index">
           <div
@@ -286,13 +286,13 @@ function searchHistoryTask() {
   font-size: 12px;
   overflow-y: auto;
   height: calc(100vh - 56px);
-  transition: margin-right 0.5s;
+  transition: margin-left 0.5s;
 }
 .history-container.show {
-  margin-right: 0;
+  margin-left: 0;
 }
 .history-container.hide {
-  margin-right: -290px;
+  margin-left: -290px;
 }
 
 .current-task {