删除多余 MarkHistory.vue 为了编译通过

src/features/arbitrate/MarkHistory.vue

@@ -1,304 +0,0 @@
-<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-4 tw-font-bold">回评</div>
-      <input
-        v-model="secretNumberInput"
-        @keydown.stop="() => {}"
-        @keypress.stop="() => {}"
-        type="text"
-        placeholder="查找试卷"
-        class="tw-flex-1 tw-rounded tw-h-8 tw-pl-1 tw-pr-8"
-        @keyup.enter="searchHistoryTask"
-      />
-      <SearchOutlined
-        style="margin-left: -24px; font-size: 18px; padding: 3px"
-        @click="searchHistoryTask"
-      />
-    </div>
-    <div class="tw-flex tw-justify-between tw-mt-5">
-      <div class="tw-cursor-pointer tw-flex">编号</div>
-      <div
-        @click="toggleOrderBy('markerTime')"
-        class="tw-cursor-pointer tw-flex tw-items-center"
-      >
-        时间
-        <CaretUpOutlined v-if="order === 'markerTime' && sort === 'ASC'" />
-        <CaretDownOutlined v-if="order === 'markerTime' && sort === 'DESC'" />
-      </div>
-      <div
-        @click="toggleOrderBy('markerScore')"
-        class="tw-cursor-pointer tw-flex tw-items-center"
-      >
-        分数
-        <CaretUpOutlined v-if="order === 'markerScore' && sort === 'ASC'" />
-        <CaretDownOutlined v-if="order === 'markerScore' && sort === 'DESC'" />
-      </div>
-    </div>
-    <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
-            @click="replaceCurrentTask(task)"
-            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'"
-          >
-            <div class="tw-break-words" style="width: 62px">
-              {{ task.secretNumber }}
-            </div>
-            <div>
-              {{ task.markerTime && $filters.datetimeFilter(task.markerTime) }}
-            </div>
-            <div style="width: 30px; text-align: right">
-              {{ task.markerScore }}
-            </div>
-          </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"
-          @click="previousPage"
-          type="primary"
-          title="上一页"
-        >
-          <div class="left-triangle"></div>
-        </a-button>
-        <a-button
-          shape="circle"
-          @click="nextPage"
-          type="primary"
-          title="下一页"
-        >
-          <div class="right-triangle"></div>
-        </a-button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type {
-  HistoryQueryParams,
-  MarkHistoryOrderBy,
-  MarkHistorySortField,
-  Task,
-} from "@/types";
-import { ref, watch } from "vue";
-import { useRoute } from "vue-router";
-import { store } from "@/features/mark/store";
-import {
-  CloseOutlined,
-  SearchOutlined,
-  CaretDownOutlined,
-  CaretUpOutlined,
-} from "@ant-design/icons-vue";
-import { cloneDeep } from "lodash";
-import { getArbitrateHistory } from "@/api/arbitratePage";
-
-const props = defineProps<{ shouldReload: number }>();
-
-const emit = defineEmits(["reload"]);
-
-const route = useRoute();
-const { subjectCode, groupNumber } = route.query as {
-  subjectCode: string;
-  groupNumber: string;
-};
-
-const secretNumberInput = ref("");
-const loading = ref(false);
-const currentPage = ref(1);
-const order = ref("markerTime" as MarkHistoryOrderBy);
-const sort = ref("DESC" as MarkHistorySortField);
-
-const currentTaskChange = async () => {
-  replaceCurrentTask(undefined);
-  if (store.historyOpen) {
-    await updateHistoryTask({
-      secretNumber: secretNumberInput.value,
-      order: order.value,
-      sort: sort.value,
-      pageNumber: currentPage.value,
-    });
-    replaceCurrentTask(store.historyTasks[0]);
-  } else {
-    emit("reload");
-    secretNumberInput.value = "";
-    currentPage.value = 1;
-    order.value = "markerTime";
-    sort.value = "DESC";
-  }
-};
-watch(() => store.historyOpen, currentTaskChange);
-watch([order, sort, currentPage], currentTaskChange);
-
-watch(
-  () => props.shouldReload,
-  async () => {
-    store.globalMask = true;
-    try {
-      const res = await getArbitrateHistory({
-        subjectCode: subjectCode,
-        groupNumber: groupNumber,
-        secretNumber: store.currentTask?.secretNumber,
-      });
-      if (res.data) {
-        let data = cloneDeep(res.data) as Array<Task>;
-        data = data.map((t) => {
-          t.sliceUrls = t.sliceUrls?.map((s) => store.setting.fileServer + s);
-          t.sheetUrls = t.sheetUrls?.map((s) => store.setting.fileServer + s);
-          t.jsonUrl = store.setting.fileServer + t.jsonUrl;
-
-          return t;
-        });
-        if (store.currentTask) {
-          const indexOfTasks = store.historyTasks.indexOf(store.currentTask);
-          if (data[0]) {
-            store.historyTasks.splice(indexOfTasks, 1, data[0]);
-            replaceCurrentTask(store.historyTasks[indexOfTasks]);
-          } else {
-            // 可能会查找不到，这里直接删除此任务
-            store.historyTasks.splice(indexOfTasks, 1);
-            replaceCurrentTask(store.historyTasks[indexOfTasks]);
-          }
-        }
-      }
-    } finally {
-      store.globalMask = false;
-    }
-  }
-);
-
-async function updateHistoryTask({
-  pageNumber = 1,
-  pageSize = 20,
-  order = "markerTime",
-  sort = "DESC",
-  secretNumber = null,
-}: HistoryQueryParams) {
-  loading.value = true;
-  const res = await getArbitrateHistory({
-    pageNumber,
-    pageSize,
-    subjectCode,
-    groupNumber,
-    secretNumber,
-    order,
-    sort,
-  });
-  loading.value = false;
-  if (res.data) {
-    let data = cloneDeep(res.data) as Array<Task>;
-    data = data.map((t) => {
-      t.sliceUrls = t.sliceUrls?.map((s) => store.setting.fileServer + s);
-      t.sheetUrls = t.sheetUrls?.map((s) => store.setting.fileServer + s);
-      t.jsonUrl = store.setting.fileServer + t.jsonUrl;
-
-      return t;
-    });
-    store.historyTasks = data;
-    replaceCurrentTask(store.historyTasks[0]);
-  }
-}
-
-function replaceCurrentTask(task: Task | undefined) {
-  store.currentTask = task;
-}
-
-function previousPage() {
-  if (currentPage.value > 1) {
-    currentPage.value -= 1;
-  }
-}
-function nextPage() {
-  if (store.historyTasks.length >= 20) {
-    currentPage.value += 1;
-  }
-}
-
-function toggleOrderBy(toOrder: MarkHistoryOrderBy) {
-  if (toOrder === order.value) {
-    sort.value = sort.value === "DESC" ? "ASC" : "DESC";
-  } else {
-    order.value = toOrder;
-  }
-}
-
-function searchHistoryTask() {
-  if (currentPage.value !== 1) {
-    currentPage.value = 1;
-  } else {
-    currentTaskChange();
-  }
-}
-</script>
-
-<style scoped>
-.history-container {
-  min-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.show {
-  margin-left: 0;
-}
-.history-container.hide {
-  margin-left: -290px;
-}
-
-.current-task {
-  background-color: var(--app-container-bg-color);
-  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/library/inspect/MarkHistory.vue

@@ -1,149 +0,0 @@
-<template>
-  <div
-    :style="{ display: store.historyOpen ? 'block' : 'none' }"
-    class="history-container tw-px-1"
-  >
-    <div class="tw-p-1 tw-flex tw-justify-between tw-place-items-center">
-      <div class="tw-text-xl">回评</div>
-      <a-button
-        class="tw-content-end"
-        shape="circle"
-        @click="store.historyOpen = false"
-      >
-        <template #icon><CloseOutlined /></template>
-      </a-button>
-    </div>
-    <div class="tw-mt-1 tw-mb-1 tw-flex"></div>
-    <div class="tw-flex tw-justify-between">
-      <div>编号</div>
-      <div>时间</div>
-      <div>分数</div>
-    </div>
-    <a-spin :spinning="loading" size="large" tip="Loading...">
-      <div v-for="(task, index) of store.historyTasks" :key="index">
-        <div
-          @click="replaceCurrentTask(task)"
-          class="
-            tw-flex
-            tw-justify-between
-            tw-place-items-center
-            tw-rounded
-            tw-cursor-pointer
-          "
-          :class="store.currentTask === task && 'current-task'"
-        >
-          <div class="tw-break-words" style="width: 62px">
-            {{ task.secretNumber }}
-          </div>
-          <div>
-            {{ task.inspectTime && $filters.datetimeFilter(task.inspectTime) }}
-          </div>
-          <div style="width: 30px; text-align: center">
-            {{ task.markerScore }}
-          </div>
-        </div>
-      </div>
-    </a-spin>
-    <div class="tw-flex tw-justify-between tw-place-content-center tw-mt-2">
-      <a-button @click="previousPage">上一页</a-button>
-      <div style="line-height: 30px">第{{ currentPage }}页</div>
-      <a-button @click="nextPage">下一页</a-button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { getInspectedHistory } from "@/api/inspectPage";
-import type { Task } from "@/types";
-import { ref, watch, watchEffect } from "vue";
-import { useRoute } from "vue-router";
-import { store } from "@/features/mark/store";
-import { CloseOutlined } from "@ant-design/icons-vue";
-import { cloneDeep } from "lodash";
-
-const props = defineProps<{ shouldReload: number }>();
-
-const emit = defineEmits(["reload"]);
-
-const route = useRoute();
-const { subjectCode } = route.query as {
-  subjectCode: string;
-};
-
-watchEffect(async () => {
-  if (store.historyOpen) {
-    replaceCurrentTask(undefined);
-    await updateHistoryTask({});
-    replaceCurrentTask(store.historyTasks[0]);
-  } else {
-    emit("reload");
-  }
-});
-
-watch(
-  () => props.shouldReload,
-  async () => {
-    await updateHistoryTask({ pageNumber: currentPage.value });
-    // 提交后，渲染第一条
-    replaceCurrentTask(store.historyTasks[0]);
-  }
-);
-
-const loading = ref(false);
-const currentPage = ref(1);
-
-async function updateHistoryTask({
-  pageNumber = 1,
-  pageSize = 20,
-}: {
-  pageNumber?: number; // 从1开始
-  pageSize?: number;
-}) {
-  loading.value = true;
-  const res = await getInspectedHistory({
-    pageNumber,
-    pageSize,
-    subjectCode,
-  });
-  loading.value = false;
-  if (res.data) {
-    let data = cloneDeep(res.data) as Array<Task>;
-    data = data.map((t) => {
-      t.sliceUrls = t.sliceUrls?.map((s) => store.setting.fileServer + s);
-      t.sheetUrls = t.sheetUrls?.map((s) => store.setting.fileServer + s);
-      t.jsonUrl = store.setting.fileServer + t.jsonUrl;
-
-      return t;
-    });
-    store.historyTasks = data;
-    replaceCurrentTask(store.historyTasks[0]);
-  }
-}
-
-function replaceCurrentTask(task: Task | undefined) {
-  store.currentTask = task;
-}
-
-function previousPage() {
-  if (currentPage.value > 1) {
-    currentPage.value -= 1;
-    updateHistoryTask({ pageNumber: currentPage.value });
-  }
-}
-function nextPage() {
-  if (store.historyTasks.length >= 20) {
-    currentPage.value += 1;
-    updateHistoryTask({ pageNumber: currentPage.value });
-  }
-}
-</script>
-
-<style scoped>
-.history-container {
-  min-width: 250px;
-  border-right: 1px solid grey;
-}
-.current-task {
-  background-color: aqua;
-}
-</style>

src/features/library/quality/MarkHistory.vue

@@ -1,198 +0,0 @@
-<template>
-  <div class="history-container tw-px-1">
-    <div class="tw-mt-1 tw-mb-1 tw-flex tw-place-items-center">
-      <div class="tw-text-lg main-text-color tw-mr-4 tw-font-bold">
-        给分记录
-      </div>
-    </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">时间</div>
-      <div class="tw-cursor-pointer tw-flex tw-items-center">分数</div>
-    </div>
-    <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
-            @click="replaceCurrentTask(task)"
-            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'"
-          >
-            <div
-              class="tw-break-words"
-              style="width: 62px"
-              :title="task.secretNumber"
-            >
-              {{ task.secretNumber }}
-            </div>
-            <div>
-              {{ task.markerTime && $filters.datetimeFilter(task.markerTime) }}
-            </div>
-            <div style="width: 30px; text-align: right">
-              {{ task.markerScore === -1 ? "未选做" : task.markerScore }}
-            </div>
-          </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"
-          @click="previousPage"
-          type="primary"
-          title="上一页"
-        >
-          <div class="left-triangle"></div>
-        </a-button>
-        <a-button
-          shape="circle"
-          @click="nextPage"
-          type="primary"
-          title="下一页"
-        >
-          <div class="right-triangle"></div>
-        </a-button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { Task } from "@/types";
-import { ref, watchEffect } from "vue";
-import { useRoute } from "vue-router";
-import { store } from "@/features/mark/store";
-import { cloneDeep } from "lodash";
-import { getQualityHistory } from "@/api/qualityPage";
-
-const emit = defineEmits(["reload"]);
-const route = useRoute();
-const { markerId, markerScore } = route.query as {
-  markerId: string;
-  markerScore: string;
-};
-
-watchEffect(async () => {
-  if (store.historyOpen) {
-    replaceCurrentTask(undefined);
-    await updateHistoryTask({});
-    replaceCurrentTask(store.historyTasks[0]);
-  } else {
-    emit("reload");
-  }
-});
-
-const loading = ref(false);
-const currentPage = ref(1);
-
-async function updateHistoryTask({
-  pageNumber = 1,
-  pageSize = 20,
-}: {
-  pageNumber?: number; // 从1开始
-  pageSize?: number;
-}) {
-  loading.value = true;
-  const res = await getQualityHistory({
-    markerId,
-    markerScore,
-    pageNumber,
-    pageSize,
-  });
-  loading.value = false;
-  if (res.data) {
-    let data = cloneDeep(res.data) as Array<Task>;
-    data = data.map((t) => {
-      t.sliceUrls = t.sliceUrls?.map((s) => store.setting.fileServer + s);
-      t.sheetUrls = t.sheetUrls?.map((s) => store.setting.fileServer + s);
-      t.jsonUrl = store.setting.fileServer + t.jsonUrl;
-
-      return t;
-    });
-    store.historyTasks = data;
-    replaceCurrentTask(store.historyTasks[0]);
-  }
-}
-
-function replaceCurrentTask(task: Task | undefined) {
-  store.currentTask = task;
-}
-
-function previousPage() {
-  if (currentPage.value > 1) {
-    currentPage.value -= 1;
-    updateHistoryTask({ pageNumber: currentPage.value });
-  }
-}
-function nextPage() {
-  if (store.historyTasks.length >= 20) {
-    currentPage.value += 1;
-    updateHistoryTask({ pageNumber: currentPage.value });
-  }
-}
-</script>
-
-<style scoped>
-.history-container {
-  min-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.show {
-  margin-left: 0;
-}
-.history-container.hide {
-  margin-left: -290px;
-}
-
-.current-task {
-  background-color: var(--app-container-bg-color);
-  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/student/inspect/MarkHistory.vue

@@ -1,210 +0,0 @@
-<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-4 tw-font-bold">回评</div>
-    </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">时间</div>
-      <div class="tw-cursor-pointer tw-flex tw-items-center">分数</div>
-    </div>
-    <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
-            @click="replaceCurrentTask(task)"
-            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'"
-          >
-            <div
-              class="tw-break-words"
-              style="width: 62px"
-              :title="task.secretNumber"
-            >
-              {{ task.secretNumber }}
-            </div>
-            <div>
-              {{
-                task.inspectTime && $filters.datetimeFilter(task.inspectTime)
-              }}
-            </div>
-            <div style="width: 30px; text-align: right">
-              {{ task.markerScore === -1 ? "未选做" : task.markerScore }}
-            </div>
-          </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"
-          @click="previousPage"
-          type="primary"
-          title="上一页"
-        >
-          <div class="left-triangle"></div>
-        </a-button>
-        <a-button
-          shape="circle"
-          @click="nextPage"
-          type="primary"
-          title="下一页"
-        >
-          <div class="right-triangle"></div>
-        </a-button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { getInspectedHistory } from "@/api/inspectPage";
-import type { Task } from "@/types";
-import { ref, watch, watchEffect } from "vue";
-import { useRoute } from "vue-router";
-import { store } from "@/features/mark/store";
-import { cloneDeep } from "lodash";
-
-const props = defineProps<{ shouldReload: number }>();
-
-const emit = defineEmits(["reload"]);
-const route = useRoute();
-const { subjectCode } = route.query as {
-  subjectCode: string;
-};
-
-watchEffect(async () => {
-  if (store.historyOpen) {
-    replaceCurrentTask(undefined);
-    await updateHistoryTask({});
-    replaceCurrentTask(store.historyTasks[0]);
-  } else {
-    emit("reload");
-  }
-});
-
-watch(
-  () => props.shouldReload,
-  async () => {
-    await updateHistoryTask({ pageNumber: currentPage.value });
-    // 提交后，渲染第一条
-    replaceCurrentTask(store.historyTasks[0]);
-  }
-);
-
-const loading = ref(false);
-const currentPage = ref(1);
-
-async function updateHistoryTask({
-  pageNumber = 1,
-  pageSize = 20,
-}: {
-  pageNumber?: number; // 从1开始
-  pageSize?: number;
-}) {
-  loading.value = true;
-  const res = await getInspectedHistory({
-    pageNumber,
-    pageSize,
-    subjectCode,
-  });
-  loading.value = false;
-  if (res?.data) {
-    let data = cloneDeep(res.data) as Array<Task>;
-    data = data.map((t) => {
-      t.sliceUrls = t.sliceUrls?.map((s) => store.setting.fileServer + s);
-      t.sheetUrls = t.sheetUrls?.map((s) => store.setting.fileServer + s);
-      t.jsonUrl = store.setting.fileServer + t.jsonUrl;
-
-      return t;
-    });
-    store.historyTasks = data;
-    replaceCurrentTask(store.historyTasks[0]);
-  }
-}
-
-function replaceCurrentTask(task: Task | undefined) {
-  store.currentTask = task;
-}
-
-function previousPage() {
-  if (currentPage.value > 1) {
-    currentPage.value -= 1;
-    updateHistoryTask({ pageNumber: currentPage.value });
-  }
-}
-function nextPage() {
-  if (store.historyTasks.length >= 20) {
-    currentPage.value += 1;
-    updateHistoryTask({ pageNumber: currentPage.value });
-  }
-}
-</script>
-
-<style scoped>
-.history-container {
-  min-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.show {
-  margin-left: 0;
-}
-.history-container.hide {
-  margin-left: -290px;
-}
-
-.current-task {
-  background-color: var(--app-container-bg-color);
-  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>