mark-web/src/features/library/libraryTrack/MarkHeader.vue

<template>
  <div
    v-if="store.setting"
    class="tw-flex tw-gap-4 tw-justify-start tw-items-center header-container"
  >
    <div
      class="
        tw-text-white
        tw-block
        tw-overflow-ellipsis
        tw-overflow-hidden
        tw-whitespace-nowrap
        header-big-text
        tw-pl-5
      "
    >
      {{
        `${store.setting.subject.code ?? ""}-${
          store.setting.subject.name ?? ""
        }`
      }}
    </div>
    <div class="tw-flex tw-gap-1 tw-items-center">
      <div class="tw-flex tw-items-center">
        <span class="header-small-text">编号</span>
        <span class="highlight-text">
          {{ store.currentTask?.secretNumber }}
        </span>
      </div>
    </div>
    <div class="tw-flex tw-gap-2 tw-items-center tw-flex-1"></div>
    <ZoomPaper v-if="store.isScanImage" />
    <div class="tw-flex tw-cursor-pointer tw-items-center tw-flex-1">
      <div
        class="
          tw-overflow-ellipsis tw-overflow-hidden tw-whitespace-nowrap tw-mr-1
        "
      >
        <span class="header-small-text">分组</span>
        <span class="highlight-text">
          {{ store.setting.groupNumber }}
        </span>
      </div>
    </div>
    <div class="tw-flex tw-place-items-center">
      <UserOutlined class="icon-font icon-with-text" />
      {{ store.setting.userName }}
    </div>
    <div
      class="tw-flex tw-place-items-center tw-cursor-pointer tw-pr-5"
      @click="closeWindow"
    >
      <PoweroffOutlined class="icon-font icon-with-text" />关闭
    </div>
  </div>
</template>

<script setup lang="ts">
import { store } from "@/store/store";
import { UserOutlined, PoweroffOutlined } from "@ant-design/icons-vue";
import ZoomPaper from "@/components/ZoomPaper.vue";

const closeWindow = () => {
  window.close();
};
</script>

<style scoped>
.header-container {
  position: relative;
  height: 56px;
  line-height: 16px;

  background-color: var(--header-bg-color);
  color: rgba(255, 255, 255, 0.5);
}

.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);
}
.svg-red {
  filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg)
    brightness(104%) contrast(97%);
}
</style>