|
@@ -1,13 +1,32 @@
|
|
|
<template>
|
|
|
<div
|
|
|
- class="
|
|
|
- tw-flex tw-gap-4 tw-justify-between tw-items-center
|
|
|
- header-container
|
|
|
- tw-px-1
|
|
|
- "
|
|
|
+ class="tw-flex tw-gap-4 tw-justify-start tw-items-center header-container"
|
|
|
v-if="store.setting"
|
|
|
>
|
|
|
- <div>
|
|
|
+ <div
|
|
|
+ v-if="!isSingleStudent"
|
|
|
+ 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">
|
|
|
+ <img
|
|
|
+ src="../../mark/images/left-menu.svg"
|
|
|
+ :class="[store.historyOpen && 'svg-red']"
|
|
|
+ />
|
|
|
+ </span>
|
|
|
+ <div v-if="store.historyOpen" class="triangle"></div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="
|
|
|
+ tw-text-white
|
|
|
+ tw-block
|
|
|
+ tw-overflow-ellipsis
|
|
|
+ tw-overflow-hidden
|
|
|
+ tw-whitespace-nowrap
|
|
|
+ header-big-text
|
|
|
+ "
|
|
|
+ >
|
|
|
{{
|
|
|
`${store.setting.subject.code ?? ""}-${
|
|
|
store.setting.subject.name ?? ""
|
|
@@ -16,26 +35,25 @@
|
|
|
</div>
|
|
|
<div class="tw-flex tw-gap-1">
|
|
|
<div>
|
|
|
- 编号<span class="highlight-text">{{
|
|
|
- store.currentTask?.secretNumber
|
|
|
- }}</span>
|
|
|
+ <span class="header-small-text">编号</span>
|
|
|
+ <span class="highlight-text">
|
|
|
+ {{ store.currentTask?.secretNumber ?? "-" }}
|
|
|
+ </span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <ul v-if="!isSingleStudent" class="tw-flex tw-gap-2 tw-mb-0">
|
|
|
- <li>
|
|
|
- 待复核<span class="highlight-text">{{ store.status.totalCount }}</span>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- <ZoomPaper v-if="isScanImage()" :store="store" />
|
|
|
- <div @click="toggleHistory" v-if="!isSingleStudent" title="回看">
|
|
|
- <SnippetsOutlined
|
|
|
- class="icon-font icon-font-size-20 tw-cursor-pointer"
|
|
|
- :style="{
|
|
|
- color: store.historyOpen ? 'red' : 'white',
|
|
|
- }"
|
|
|
- />
|
|
|
+ <div
|
|
|
+ v-if="!isSingleStudent"
|
|
|
+ class="tw-flex tw-gap-2 tw-items-center tw-flex-1"
|
|
|
+ >
|
|
|
+ <span>
|
|
|
+ <span class="header-small-text">待复核</span
|
|
|
+ ><span class="highlight-text">{{
|
|
|
+ store.status.totalCount ?? "-"
|
|
|
+ }}</span>
|
|
|
+ </span>
|
|
|
</div>
|
|
|
- <div class="tw-flex tw-place-items-center">
|
|
|
+ <ZoomPaper v-if="isScanImage()" :store="store" />
|
|
|
+ <div class="tw-flex tw-place-items-center tw-justify-end">
|
|
|
{{ store.setting.userName }}
|
|
|
</div>
|
|
|
<div
|
|
@@ -44,6 +62,36 @@
|
|
|
>
|
|
|
<PoweroffOutlined class="icon-font icon-with-text" />关闭
|
|
|
</div>
|
|
|
+ <div
|
|
|
+ class="
|
|
|
+ tw-flex tw-place-content-center tw-cursor-pointer tw-justify-self-end
|
|
|
+ menu
|
|
|
+ "
|
|
|
+ :class="[
|
|
|
+ !store.setting.uiSetting['score.board.collapse'] &&
|
|
|
+ store.currentTask &&
|
|
|
+ 'menu-toggled',
|
|
|
+ ]"
|
|
|
+ @click="toggleScoreBoard"
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ title="给分板"
|
|
|
+ class="tw-inline-flex tw-place-content-center tw-relative"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="../../mark/images/right-menu.svg"
|
|
|
+ :class="[
|
|
|
+ !store.setting.uiSetting['score.board.collapse'] && 'svg-red',
|
|
|
+ ]"
|
|
|
+ />
|
|
|
+ </span>
|
|
|
+ <div
|
|
|
+ v-if="
|
|
|
+ !store.setting.uiSetting['score.board.collapse'] && store.currentTask
|
|
|
+ "
|
|
|
+ class="triangle"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -85,28 +133,92 @@ onMounted(() => {
|
|
|
updateClearTask();
|
|
|
});
|
|
|
});
|
|
|
+
|
|
|
+const toggleScoreBoard = () => {
|
|
|
+ store.setting.uiSetting["score.board.collapse"] =
|
|
|
+ !store.setting.uiSetting["score.board.collapse"];
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
+.header-bg-color {
|
|
|
+ background-color: var(--header-bg-color);
|
|
|
+}
|
|
|
.header-container {
|
|
|
position: relative;
|
|
|
- font-size: 16px;
|
|
|
- height: 40px;
|
|
|
+ height: 56px;
|
|
|
+ line-height: 16px;
|
|
|
|
|
|
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;
|
|
|
+}
|
|
|
+.header-big-text {
|
|
|
+ font-size: 20px;
|
|
|
+ line-height: 30px;
|
|
|
+}
|
|
|
+.header-small-text {
|
|
|
+ font-size: var(--app-secondary-font-size);
|
|
|
+}
|
|
|
.highlight-text {
|
|
|
color: white;
|
|
|
+ font-size: var(--app-title-font-size);
|
|
|
}
|
|
|
-.icon-font {
|
|
|
- display: block;
|
|
|
+.header-bg-color.ant-btn:hover {
|
|
|
+ background-color: var(--app-ant-select-bg-override-color) !important;
|
|
|
}
|
|
|
-.icon-font-size-20 {
|
|
|
- font-size: 20px;
|
|
|
+
|
|
|
+.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%);
|
|
|
+}
|
|
|
+.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;
|
|
|
+}
|
|
|
+.markcount-animation {
|
|
|
+ animation: change-color 3s ease-in-out;
|
|
|
}
|
|
|
-.icon-with-text {
|
|
|
- font-size: 18px;
|
|
|
- line-height: 18px;
|
|
|
+@keyframes change-color {
|
|
|
+ 0% {
|
|
|
+ color: red;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|