tropsCode/src/components/Header/index.vue

<template>
  <div class="close" @click="confirmExit"></div>
  <div class="toolList">
    <div class="li">{{ date }}</div>
    <div class="li btn speck" :class="{ 'on': voice, 'off': !voice }" @click="getVoice"></div>
    <div class="li btn screen" :class="{ 'on': screen, 'off': !screen }" @click="getFullScreen"></div>
  </div>
  <div class="logo"> <img src="@/assets/images/logo.png">
    </img>
    <div class="title"><i></i><span>{{ dic.project[parameter.project] || "" }}</span></div>
  </div>
</template>
<script setup lang="ts">
import { initSpeech, speckText, speckCancel, chineseNumber } from '@/utils/speech'
import dataDictionary from "@/utils/dataDictionary"
const { proxy } = getCurrentInstance() as any;
const emit = defineEmits(['confirmExit']);
const router = useRouter();
const route = useRoute();
const dic: any = dataDictionary;
const data = reactive<any>({
  timerManager: {},//计时器管理
  parameter: {},//参数
  date: "",//当前时间
  voice: true,
  screen: true
});
const { timerManager, parameter, date, voice, screen } = toRefs(data);

/**
 * 更新时间
*/
const setDate = () => {
  date.value = proxy?.$utils.getDate();
  setTimeout(setDate, 1000);
};

/**
 * 屏幕模式
*/
const getVoice = () => {
  voice.value = !voice.value;
};

/**
 * 屏幕模式
*/
const getFullScreen = () => {
  screen.value = !screen.value;
  proxy?.$utils.fullScreen();
};

/**
 * 确定退出
*/
const confirmExit = () => {
  emit('confirmExit', {});
};

onBeforeMount(() => {
  setDate();
  parameter.value = route.query;
  initSpeech();
})
</script>
<style lang="scss" scoped>
$topPadding: 5.19rem;
$waiPadding: 6.51rem;

.logo {
  position: absolute;
  left: $waiPadding;
  top: $topPadding;
  display: flex;
  align-items: center;

  img {
    width: 14.563rem;
  }

  .title {
    width: auto;
    padding: 0 1.2rem 0 0.7rem;
    height: 3rem;
    line-height: 3rem;
    border-radius: 1.5rem;
    color: #ffffff;
    font-size: 1.7rem;
    margin-left: 1rem;
    background: linear-gradient(180deg, #FFB200 0%, #ED7905 72%);
    box-shadow: inset 0px 1px 0px 1px rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;

    i {
      width: 2.5rem;
      height: 2.1rem;
      margin-right: 0.8rem;
      background-image: url("@/assets/images/test/ai.png");
      background-position: center;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
}

.close {
  width: 3.2rem;
  height: 3.2rem;
  position: absolute;
  right: calc($waiPadding - 3.2rem);
  top: calc($topPadding / 2 - 3.2rem/4);
  box-sizing: border-box;
  border: 1px solid #979797;
  background-image: url("@/assets/images/common/close.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 45% 45%;
  background-color: rgba(216, 216, 216, 0.8);
  border-radius: 50%;
  transition: all 0.5s;
  cursor: pointer;

  &:hover {
    transform: rotate(180deg);
    background-color: rgba(216, 216, 216, 1);
  }
}

.toolList {

  position: absolute;
  right: $waiPadding;
  top: calc($topPadding / 2);
  color: #00FFE8;
  font-size: 1.1rem;
  display: flex;

  .li {
    margin-right: 3rem;
  }

  .btn {
    width: 1.1rem;
    height: 1.1rem;

    display: block;
    cursor: pointer;
  }

  .speck {

    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
  }

  .speck.on {
    background-image: url("@/assets/images/common/speck1.png");
  }

  .speck.off {
    background-image: url("@/assets/images/common/speck2.png");
  }

  .screen {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
  }

  .screen.on {
    background-image: url("@/assets/images/common/screen1.png");
  }

  .screen.off {
    background-image: url("@/assets/images/common/screen2.png");
  }
}
</style>