menu bg color

src/features/mark/MarkHeader.vue

@@ -1,15 +1,11 @@
 <template>
   <div
-    class="
-      tw-flex tw-gap-2 tw-justify-between tw-items-center
-      header-container
-      tw-px-1
-    "
+    class="tw-flex tw-gap-2 tw-justify-between tw-items-center header-container"
     v-if="store.setting && store.setting.subject.name"
   >
     <div
-      class="tw-flex tw-place-content-center tw-cursor-pointer tw-relative"
-      style="width: 56px; padding: 20px"
+      class="tw-flex tw-place-content-center tw-cursor-pointer tw-relative menu"
+      :class="[store.historyOpen && 'menu-toggled']"
       @click="toggleHistory"
     >
       <span title="回看" class="tw-inline-flex tw-place-content-center">
@@ -252,8 +248,10 @@
       退出
     </div>
     <div
-      class="tw-flex tw-place-content-center tw-cursor-pointer"
-      style="width: 56px; padding: 20px"
+      class="tw-flex tw-place-content-center tw-cursor-pointer menu"
+      :class="[
+        !store.setting.uiSetting['score.board.collapse'] && 'menu-toggled',
+      ]"
       @click="toggleScoreBoard"
     >
       <span
@@ -403,6 +401,16 @@ watchEffect(() => {
   background-color: var(--header-bg-color);
   color: rgba(255, 255, 255, 0.5);
 }
+.menu {
+  width: 56px;
+  height: 56px;
+  padding: 20px;
+}
+.menu:hover,
+.menu-toggled {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
 .header-container span {
   vertical-align: middle;
 }

src/features/mark/MarkHistory.vue

@@ -1,7 +1,6 @@
 <template>
-  <div
-    :style="{ display: store.historyOpen ? 'block' : 'none' }"
     class="history-container tw-px-1"
+    :class="[store.historyOpen ? 'show' : 'hide']"
   >
     <!-- <div class="tw-p-1 tw-flex tw-justify-between tw-place-items-center">
       <div class="tw-text-lg main-text-color">回评</div>
@@ -298,7 +297,15 @@ function searchHistoryTask() {
   font-size: 12px;
   overflow-y: auto;
   height: calc(100vh - 56px);
+  /* animation: width 5s ease-in-out; */
 }
+.history-container.show {
+  display: block;
+}
+.history-container.hide {
+  display: none;
+}
+
 .current-task {
   background-color: white;
   padding-left: 5px;