history

components.d.ts

@@ -18,6 +18,7 @@ declare module '@vue/runtime-core' {
     AMenu: typeof import('ant-design-vue/es')['Menu']
     AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
     AModal: typeof import('ant-design-vue/es')['Modal']
+    APagination: typeof import('ant-design-vue/es')['Pagination']
     APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
     APopover: typeof import('ant-design-vue/es')['Popover']
     ARadio: typeof import('ant-design-vue/es')['Radio']

src/features/mark/Mark.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="mark">
     <mark-header :showTotalScore="store.isMultiMedia" />
-    <div class="tw-flex tw-gap-1">
+    <mark-tool />
+    <div class="mark-main">
       <mark-history showSearch showOrder :getHistory="getHistoryTask" />
       <mark-body @error="removeBrokenTask" />
       <mark-board-track
@@ -68,6 +69,7 @@ import {
 } from "@/api/markPage";
 import { store } from "@/store/store";
 import MarkHeader from "./MarkHeader.vue";
+import MarkTool from "./MarkTool.vue";
 import MarkBody from "./MarkBody.vue";
 import { useTimers } from "@/setups/useTimers";
 import MarkHistory from "./MarkHistory.vue";

src/features/mark/MarkBoardTrack.vue

@@ -611,7 +611,7 @@ const buttonHeightForSelective = $computed(() =>
   max-width: 290px;
   min-width: 290px;
   padding: 20px;
-  max-height: calc(100vh - 56px - 0px);
+  max-height: calc(100vh - 56px - 57px);
   overflow: auto;
   z-index: 1001;
   transition: margin-right 0.5s;

src/features/mark/MarkHeader.vue

@@ -23,20 +23,20 @@
           }}
         </a>
       </div>
-      <div class="header-programs">
-        <a-tooltip color="#fff">
-          <template #title>
-            问题卷{{ store.status.problemCount }}
-            <br />
-            待仲裁{{ store.status.arbitrateCount }}
-          </template>
+      <a-tooltip overlayClassName="mark-tooltip">
+        <template #title>
+          问题卷 {{ store.status.problemCount }}
+          <br />
+          待仲裁 {{ store.status.arbitrateCount }}
+        </template>
+        <div class="header-programs">
           <img
             class="header-icon"
             src="@/assets/icons/icon-problems.svg"
             @mouseover="questionMarkShouldChange = false"
           />
-        </a-tooltip>
-      </div>
+        </div>
+      </a-tooltip>
       <!-- <div v-if="store.setting.statusValue === 'TRIAL'">试评</div> -->
       <div class="header-secret">
         <div class="header-noun">
@@ -116,7 +116,7 @@
     </div>
 
     <div class="mark-header-part">
-      <a-tooltip>
+      <a-tooltip overlayClassName="mark-tooltip" trigger="click">
         <template #title>
           {{
             store.setting.startTime > 0
@@ -327,7 +327,7 @@ import MarkSwitchGroupDialog from "./MarkSwitchGroupDialog.vue";
 import MarkProblemDialog from "./MarkProblemDialog.vue";
 import { isNumber } from "lodash-es";
 import { Modal } from "ant-design-vue";
-import { CaretDownOutlined, CaretUpOutlined } from "@ant-design/icons-vue";
+import { CaretDownOutlined } from "@ant-design/icons-vue";
 
 const props = defineProps<{ showTotalScore?: boolean }>();
 
@@ -384,9 +384,9 @@ const openSwitchGroupModal = () => {
 
 let problemRef = $ref<InstanceType<typeof MarkProblemDialog>>();
 
-const openProblemModal = () => {
-  (problemRef.showModal as ShowModalFunc)();
-};
+// const openProblemModal = () => {
+//   (problemRef.showModal as ShowModalFunc)();
+// };
 
 watchEffect(() => {
   if (
@@ -427,50 +427,6 @@ watch(
 </script>
 
 <style scoped>
-.header-bg-color {
-  background-color: var(--header-bg-color);
-}
-
-.assistant-table {
-  z-index: 5500;
-  border-collapse: separate;
-  border-spacing: 0 1em;
-  color: var(--app-bold-text-color);
-  width: 240px;
-}
-
-.assistant-table tr td:nth-child(2) {
-  text-align: right;
-}
-
-.svg-red {
-  filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg)
-    brightness(104%) contrast(97%);
-}
-
-.svg-red-hover:hover {
-  filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg)
-    brightness(104%) contrast(97%);
-}
-
-.triangle {
-  background-color: white;
-  width: 10px;
-  height: 10px;
-  clip-path: polygon(0 100%, 100% 100%, 50% 0);
-
-  position: absolute;
-  bottom: -2px;
-}
-
-.dropdown-triangle {
-  background-color: #8c8d9b;
-  width: 7px;
-  height: 5px;
-  clip-path: polygon(0 0, 100% 0, 50% 100%);
-  margin-left: 4px;
-}
-
 .count-animation-enter-active,
 .count-animation-leave-active {
   transition: all 1.2s ease-in-out;

src/features/mark/MarkHistory.vue

@@ -1,138 +1,91 @@
 <template>
-  <div
-    class="history-container tw-px-1"
-    :class="[store.historyOpen ? 'show' : 'hide']"
-  >
-    <div class="tw-mt-1 tw-mb-1 tw-flex tw-place-items-center">
-      <div class="tw-text-lg main-text-color tw-mr-3 tw-font-bold">
-        {{ title }}
-      </div>
-      <div
-        v-if="showSearch && store.getStatusValueName !== '试评'"
-        class="tw-flex-1 tw-flex"
+  <div class="mark-history" :class="[store.historyOpen ? 'show' : 'hide']">
+    <div class="mark-history-title">
+      {{ title }}
+    </div>
+    <div
+      v-if="showSearch && store.getStatusValueName !== '试评'"
+      class="mark-history-search"
+    >
+      <a-select
+        ref="select"
+        v-model:value="searchType"
+        style="width: 75px; margin-right: 12px; font-size: 12px"
+        @change="searchTypeChange"
       >
-        <a-select
-          ref="select"
-          v-model:value="searchType"
-          style="width: 75px; margin-right: 4px; font-size: 12px"
-          @change="searchTypeChange"
-        >
-          <a-select-option value="1">编号</a-select-option>
-          <a-select-option value="2">分数</a-select-option>
-        </a-select>
-        <a-input-search
-          v-model:value="secretNumberInput"
-          style="font-size: 13px"
-          class="tw-flex-1 search-value"
-          placeholder="查找试卷"
-          allowClear
-          @keyup.enter="searchHistoryTask"
-          @keypress.stop=""
-          @keydown.stop=""
-          @search="searchHistoryTask"
-        >
-          <!-- <template #suffix>
-            <SearchOutlined style="color: rgba(0, 0, 0, 0.45)" />
-          </template> -->
-        </a-input-search>
-      </div>
-
-      <!-- <input
-        v-if="showSearch"
-        v-model="secretNumberInput"
-        type="text"
+        <a-select-option value="1">编号</a-select-option>
+        <a-select-option value="2">分数</a-select-option>
+      </a-select>
+      <a-input
+        v-model:value="secretNumberInput"
+        style="font-size: 13px"
+        class="search-value"
         placeholder="查找试卷"
-        class="tw-flex-1 tw-rounded tw-h-8 tw-pl-1 tw-pr-8"
-        @keydown.stop=""
-        @keypress.stop=""
+        allowClear
         @keyup.enter="searchHistoryTask"
-      />
-      <SearchOutlined
-        v-if="showSearch"
-        style="margin-left: -24px; font-size: 18px; padding: 3px"
+        @keypress.stop=""
+        @keydown.stop=""
+      >
+      </a-input>
+      <a-button
+        type="primary"
+        style="margin-left: 8px"
         @click="searchHistoryTask"
-      /> -->
+        >搜索</a-button
+      >
     </div>
-    <div class="tw-flex tw-justify-between tw-mt-5">
-      <div class="tw-cursor-pointer tw-flex">编号</div>
-      <!-- <div
-        class="tw-cursor-pointer tw-flex tw-items-center"
-        @click="toggleOrderBy(orderTimeField)"
-      > -->
-      <div class="tw-flex tw-items-center">
-        时间
-        <!-- <CaretUpOutlined
-          v-if="showOrder && order === orderTimeField && sort === 'ASC'"
-        />
-        <CaretDownOutlined
-          v-if="showOrder && order === orderTimeField && sort === 'DESC'"
-        /> -->
-      </div>
-      <!-- <div
-        class="tw-cursor-pointer tw-flex tw-items-center"
-        @click="toggleOrderBy('markerScore')"
-      > -->
-      <div class="tw-flex tw-items-center">
-        分数
-        <!-- <CaretUpOutlined
-          v-if="showOrder && order === 'markerScore' && sort === 'ASC'"
-        />
-        <CaretDownOutlined
-          v-if="showOrder && order === 'markerScore' && sort === 'DESC'"
-        /> -->
-      </div>
+    <div class="mark-history-table-head">
+      <div class="head-item">编号</div>
+      <div class="head-item head-item-time">时间</div>
+      <div class="head-item">分数</div>
     </div>
-    <a-spin
-      v-if="remarkCount !== 0"
-      :spinning="loading"
-      size="large"
-      tip="Loading..."
-      :delay="500"
-    >
-      <div style="margin-bottom: -40px; padding-bottom: 72px">
-        <div v-for="(task, index) of store.historyTasks" :key="index">
-          <div
-            class="tw-flex tw-justify-between tw-place-items-center tw-rounded tw-cursor-pointer tw-font-bold tw-py-2"
-            :class="store.currentTask === task && 'current-task'"
-            @click="replaceCurrentTask(task)"
-          >
-            <div class="tw-break-words" style="width: 62px">
-              {{ task.secretNumber }}
-            </div>
-            <div>
-              {{ $filters.datetimeFilter(task.markerTime ?? task.inspectTime) }}
-            </div>
-            <div style="width: 30px; text-align: right">
-              {{ task.markerScore === -1 ? "未选做" : task.markerScore }}
-            </div>
+    <div class="mark-history-table-body">
+      <a-spin
+        v-if="remarkCount !== 0"
+        :spinning="loading"
+        size="large"
+        tip="Loading..."
+        :delay="500"
+      >
+        <div
+          v-for="(task, index) of store.historyTasks"
+          :key="index"
+          :class="['body-row', { 'is-active': store.currentTask === task }]"
+          @click="replaceCurrentTask(task)"
+        >
+          <div class="body-col">
+            {{ task.secretNumber }}
+          </div>
+          <div class="body-col">
+            {{ $filters.datetimeFilter(task.markerTime ?? task.inspectTime) }}
+          </div>
+          <div class="body-col">
+            {{ task.markerScore === -1 ? "未选做" : task.markerScore }}
           </div>
         </div>
-      </div>
-    </a-spin>
-    <div
-      class="tw-flex tw-justify-between tw-place-content-center tw-mt-2 pager-container"
-    >
-      <div class="tw-font-bold" style="line-height: 30px">
-        第{{ currentPage }}页
-      </div>
-      <div class="tw-flex tw-gap-2">
-        <a-button
-          shape="circle"
-          type="primary"
-          title="上一页"
-          @click="previousPage"
-        >
-          <div class="left-triangle"></div>
-        </a-button>
+      </a-spin>
+    </div>
+    <div class="mark-history-table-page">
+      <div>共{{ total }}项数据</div>
+      <a-pagination v-model:current="currentPage" simple :total="total" />
+
+      <!-- <a-button
+        shape="circle"
+        type="primary"
+        title="上一页"
+        @click="previousPage"
+      >
+        <div class="page-prev"></div>
+        <div class="page-body"></div>
+        <div class="page-next"></div>
         <a-button
           shape="circle"
-          type="primary"
+          type=" d"
           title="下一页"
           @click="nextPage"
         >
-          <div class="right-triangle"></div>
         </a-button>
-      </div>
+      </a-button> -->
     </div>
   </div>
 </template>
@@ -147,11 +100,6 @@ import type {
 } from "@/types";
 import { watch, computed } from "vue";
 import { store } from "@/store/store";
-import {
-  SearchOutlined,
-  CaretDownOutlined,
-  CaretUpOutlined,
-} from "@ant-design/icons-vue";
 import { cloneDeep } from "lodash-es";
 import EventBus from "@/plugins/eventBus";
 import { addFileServerPrefixToTask, preDrawImageHistory } from "@/utils/utils";
@@ -165,6 +113,7 @@ const limitPageSize = computed(() => {
   //     : 20
   return 20;
 });
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const hasLimit = computed(() => {
   console.log("remarkCount.value:", remarkCount.value);
   return typeof remarkCount.value == "number";
@@ -213,6 +162,7 @@ const searchTypeChange = (val) => {
 };
 let loading = $ref(false);
 let currentPage = $ref(1);
+let total = $ref(0);
 let order: MarkHistoryOrderBy = $ref("markerTime");
 if (orderTimeField) {
   order = orderTimeField;
@@ -293,16 +243,16 @@ EventBus.on("should-reload-history", () => {
           if (data[0]) {
             // 如果原任务依然存在
             store.historyTasks.splice(indexOfTasks, 1, data[0]);
-            replaceCurrentTask(store.historyTasks[indexOfTasks]);
+            await replaceCurrentTask(store.historyTasks[indexOfTasks]);
           } else {
             // 问题卷会查找不到，这里直接删除此任务
             store.historyTasks.splice(indexOfTasks, 1);
-            replaceCurrentTask(store.historyTasks[indexOfTasks]);
+            await replaceCurrentTask(store.historyTasks[indexOfTasks]);
           }
         } else {
           // 问题卷会将清除它作为 currentTask ，然后刷新当前页
           store.historyTasks = data;
-          replaceCurrentTask(store.historyTasks[0]);
+          await replaceCurrentTask(store.historyTasks[0]);
         }
       }
     } finally {
@@ -313,6 +263,7 @@ EventBus.on("should-reload-history", () => {
 
 async function updateHistoryTask({
   pageNumber = 1,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   pageSize = 20,
   order = "markerTime",
   sort = "DESC",
@@ -345,6 +296,7 @@ async function updateHistoryTask({
     }
     data = data.map(addFileServerPrefixToTask);
     store.historyTasks = data;
+    total = data.length;
     replaceCurrentTask(store.historyTasks[0]).catch((err) => {
       console.log(err);
       void message.error("切换至回评任务失败");
@@ -378,6 +330,7 @@ function nextPage() {
   }
 }
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 function toggleOrderBy(toOrder: MarkHistoryOrderBy) {
   if (showOrder) {
     if (toOrder === order) {
@@ -396,59 +349,3 @@ async function searchHistoryTask() {
   }
 }
 </script>
-
-<style scoped>
-.history-container {
-  min-width: 290px;
-  width: 290px;
-  padding: 20px;
-  font-size: var(--app-secondary-font-size);
-  overflow-y: auto;
-  height: calc(100vh - 56px);
-  transition: margin-left 0.5s;
-}
-.history-container .search-value :deep(.ant-input::-webkit-input-placeholder) {
-  font-size: 12px;
-}
-.history-container :deep(.ant-input-affix-wrapper) {
-  padding: 4px 6px;
-}
-.history-container.show {
-  margin-left: 0;
-}
-.history-container.hide {
-  margin-left: -290px;
-}
-
-.current-task {
-  background-color: var(--app-score-color);
-  color: white;
-  padding-left: 5px;
-  margin-left: -5px;
-  padding-right: 5px;
-  margin-right: -5px;
-}
-
-.left-triangle {
-  width: 12px;
-  height: 12px;
-  background-color: white;
-  clip-path: polygon(0 50%, 100% 0, 100% 100%);
-  transform: translateX(60%);
-}
-
-.right-triangle {
-  width: 12px;
-  height: 12px;
-  background-color: white;
-  clip-path: polygon(100% 50%, 0 100%, 0 0);
-  transform: translateX(90%);
-}
-.pager-container {
-  position: absolute;
-  bottom: 0px;
-  padding-bottom: 20px;
-  width: 250px;
-  background-color: var(--app-main-bg-color);
-}
-</style>

src/features/mark/MarkTool.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="mark-tool">
+    <div>
+      <div class="mark-tool-item">
+        <img src="@/assets/icons/icon-all-page.svg" />
+        <p>全卷</p>
+      </div>
+      <div class="mark-tool-item">
+        <img src="@/assets/icons/icon-thumbnail.svg" />
+        <p>缩略图</p>
+      </div>
+      <div class="mark-tool-item">
+        <img src="@/assets/icons/icon-issue-paper.svg" />
+        <p>问题试卷</p>
+      </div>
+      <div class="mark-tool-item">
+        <img src="@/assets/icons/icon-shortcut.svg" />
+        <p>快捷键</p>
+      </div>
+    </div>
+    <div>
+      <div class="mark-tool-item">
+        <img src="@/assets/icons/icon-magnify.svg" />
+        <p>放大</p>
+      </div>
+      <div class="mark-tool-item">
+        <img src="@/assets/icons/icon-minify.svg" />
+        <p>缩小</p>
+      </div>
+      <div class="mark-tool-item">
+        <img src="@/assets/icons/icon-origin-size.svg" />
+        <p>实际大小</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>

src/styles/cssvar.css

@@ -6,8 +6,8 @@
   --app-min-width: 1280px;
   --app-bold-text-color: #435488;
   --app-small-header-text-color: #7584ac;
-  --app-score-color: #5d65ff;
-  --app-primary-button-bg-color: #5d65ff;
+  --app-score-color: #165dff;
+  --app-primary-button-bg-color: #165dff;
   --app-ant-select-bg-override-color: #5d6d7d;
   --app-undo-button-bg-color: #4ed885;
 

src/styles/page.less

@@ -3,6 +3,41 @@
   width: 100%;
   overflow: clip;
 
+  .mark-main {
+    height: calc(100vh - 56px - 57px);
+    display: flex;
+    justify-content: stretch;
+  }
+}
+// mark-header
+.mark-header {
+  position: relative;
+  height: 56px;
+  line-height: 20px;
+  background-color: var(--header-bg-color);
+  color: rgba(255, 255, 255, 0.5);
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  &-part {
+    &:first-child {
+      flex-grow: 2;
+      display: flex;
+      justify-content: left;
+      align-items: center;
+    }
+    &:last-child {
+      flex-grow: 0;
+      flex-shrink: 0;
+
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
+
   .header-icon {
     opacity: 0.5;
     cursor: pointer;
@@ -12,34 +47,6 @@
     }
   }
 
-  .mark-header {
-    position: relative;
-    height: 56px;
-    line-height: 20px;
-    background-color: var(--header-bg-color);
-    color: rgba(255, 255, 255, 0.5);
-
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    &-part {
-      &:first-child {
-        flex-grow: 2;
-        display: flex;
-        justify-content: left;
-        align-items: center;
-      }
-      &:last-child {
-        flex-grow: 0;
-        flex-shrink: 0;
-
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-      }
-    }
-  }
   .header-menu {
     width: 56px;
     padding: 19px;
@@ -67,19 +74,32 @@
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
-      text-align: center;
+      text-align: right;
 
       &:hover {
-        color: var(--app-primary-button-bg-color);
+        opacity: 0.8;
       }
     }
   }
   .header-programs {
-    padding: 0 24px 0 16px;
-    border-right: 1px solid #8c8d9b;
+    margin: 0 24px 0 16px;
+    padding: 6px;
+    height: 30px;
+    width: 30px;
+    border-radius: 4px;
+    cursor: pointer;
+
+    &:hover {
+      background: #3e4057;
+
+      .header-icon {
+        opacity: 0.8;
+      }
+    }
   }
   .header-secret {
     padding: 0 12px;
+    border-left: 1px solid #8c8d9b;
     border-right: 1px solid #8c8d9b;
   }
   .header-total {
@@ -120,6 +140,209 @@
   .header-logout {
     &:hover {
       background: transparent;
+      opacity: 0.8;
     }
   }
 }
+
+// mark-tool
+.mark-tool {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  background: #ffffff;
+  border-bottom: 1px solid #e5e5e5;
+
+  &-item {
+    display: inline-block;
+    vertical-align: middle;
+    width: 50px;
+    color: #8c8c8c;
+    cursor: pointer;
+
+    &:hover {
+      color: #000;
+    }
+
+    > img {
+      display: block;
+      width: 20px;
+      height: 20px;
+      margin: 0 auto;
+    }
+    > p {
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 16px;
+      margin: 0;
+      text-align: center;
+    }
+  }
+}
+// mark-history
+.mark-history {
+  min-width: 328px;
+  width: 328px;
+  padding: 16px;
+  font-size: var(--app-secondary-font-size);
+  overflow-y: auto;
+  transition: margin-left 0.5s;
+  background-color: #fff;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  .search-value .ant-input::-webkit-input-placeholder {
+    font-size: 12px;
+  }
+  .ant-input-affix-wrapper {
+    padding: 4px 6px;
+  }
+  &.show {
+    margin-left: 0;
+  }
+  &.hide {
+    margin-left: -328px;
+  }
+
+  &-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #262626;
+    line-height: 24px;
+    margin-bottom: 16px;
+  }
+  &-search {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+  }
+  &-table-head {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 44px;
+    font-size: 12px;
+    font-weight: 400;
+    color: #8c8c8c;
+    .head-item {
+      &:nth-of-type(1) {
+        width: 86px;
+        padding-left: 16px;
+      }
+      &:nth-of-type(2) {
+        width: 86px;
+        padding-left: 16px;
+        flex-grow: 2;
+      }
+      &:nth-of-type(3) {
+        width: 52px;
+        padding-right: 6px;
+        padding-left: 6px;
+      }
+    }
+  }
+  &-table-body {
+    flex-grow: 2;
+    overflow-x: hidden;
+    overflow-y: auto;
+    color: #262626;
+
+    .body-row {
+      padding: 12px 0;
+      border-top: 1px solid #e5e5e5;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      cursor: pointer;
+
+      &:last-child {
+        border-bottom: 1px solid #e5e5e5;
+      }
+
+      &:hover {
+        color: #165dff;
+      }
+
+      &.is-active {
+        color: #fff;
+        background: #165dff;
+      }
+    }
+    .body-col {
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 20px;
+
+      &:nth-of-type(1) {
+        width: 86px;
+        padding-left: 16px;
+      }
+      &:nth-of-type(2) {
+        width: 86px;
+        padding-left: 16px;
+        flex-grow: 2;
+      }
+      &:nth-of-type(3) {
+        width: 52px;
+        padding-left: 6px;
+        padding-right: 6px;
+      }
+    }
+  }
+  &-table-page {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 32px;
+
+    .ant-pagination-simple {
+      .ant-pagination-prev,
+      .ant-pagination-next {
+        height: 32px;
+        .ant-pagination-item-link {
+          height: 32px;
+          line-height: 32px;
+        }
+      }
+      .ant-pagination-simple-pager {
+        height: 32px;
+        background: #f0f0f0;
+        border-radius: 0px 3px 3px 0px;
+        border: 1px solid #d9d9d9;
+        padding-right: 12px;
+        width: 132px;
+        input {
+          padding: 0 12px;
+          border: 0;
+          width: 66px;
+          border-right: 1px solid #d9d9d9;
+        }
+        .ant-pagination-slash {
+          margin: 0;
+        }
+      }
+      .anticon {
+        vertical-align: middle;
+      }
+    }
+  }
+}
+
+// common
+.mark-tooltip {
+  padding-top: 0px !important;
+  .ant-tooltip-arrow {
+    display: none;
+  }
+  .ant-tooltip-inner {
+    background-color: #fff;
+    color: #000;
+    padding: 9px 14px;
+    line-height: 28px;
+    border-radius: 4px;
+  }
+}