tropsCode/src/components/Header/index.vue

<template>
  <div>
    <div class="close" :class="{ close2: closeClass == 'close2' }" @click="confirmExit" v-if="showClose"></div>
    <div class="toolList" v-if="showTool">
      <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="ranking" v-if="props.type == 'ranking'">
      <img src="@/assets/images/ranking/ranking.png" />
    </div>
    <div class="logo" :class="{ logo2: logoClass == 'logo2' }" v-else>

      <div class="title" v-if="parameter.project"><i></i><span>{{ dic.project[parameter.project] || "" }}</span></div>
      <div class="logoBox" v-else>
        <template v-if="userInfo?.logo_url">
          <img v-if="userInfo?.logo_url" :src="userInfo.logo_url" />
          <div class="schoolName">{{ userInfo.school_name }}</div>
        </template>
        <template v-else>
          <img src="@/assets/images/common/logo.png" />
        </template>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { initSpeech, speckText, playMusic, controlMusic, 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 myInfo: any = localStorage.getItem("userInfo");

//父值
const props = defineProps({
  type: {
    type: String,
    default: ""
  },
  showClose: {
    type: Boolean,
    default: true
  },
  showTool: {
    type: Boolean,
    default: true
  },
  closeClass: {
    type: String,
    default: ""
  },
  logoClass: {
    type: String,
    default: ""
  },
});

const data = reactive<any>({
  userInfo: {},//用户信息
  timerManager: {},//计时器管理
  parameter: {},//参数
  date: "",//当前时间
  voice: true,
  screen: true
});
const { userInfo, timerManager, parameter, date, voice, screen } = toRefs(data);

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

/**
 * 声音控制
*/
const getVoice = () => {
  voice.value = !voice.value;
  localStorage.setItem("voice", voice.value);
  controlMusic();
};

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

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

onBeforeMount(() => {
  setDate();
  parameter.value = route.query;
  //initSpeech();
  //音控
  let voiceData: any = localStorage.getItem("voice");
  if (voiceData != undefined && voiceData == 'false') {
    voice.value = false;
    speckCancel()
  } else {
    voice.value = true;
  }
  //屏幕
  let screenData = localStorage.getItem("screen");
  if (screenData != undefined && screenData == 'false') {
    screen.value = false;
  } else {
    screen.value = true;
  }
  //用户信息
  userInfo.value = JSON.parse(myInfo);
})
</script>
<style lang="scss" scoped>
$topPadding: 5.19rem;
$waiPadding: 6.51rem;

.ranking {
  position: absolute;
  left: $waiPadding;
  top: calc($topPadding - 2rem);
  display: flex;
  align-items: center;

  img {
    width: 27rem;
  }
}

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

  img {
    //width: 14.563rem;
    height: 3rem;
    margin-right: 2rem;
  }

  .schoolName {
    font-size: 2.5rem;
    height: 3rem;
    line-height: 3rem;
    color: #00FFE8;
  }

  .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%;
    }
  }
}

.logoBox {
  display: flex;
}

.close {
  position: absolute;
  right: calc($waiPadding - 3.2rem);
  top: calc($topPadding / 2 - 3.2rem/4);
}

.close2 {
  $topPadding: 5.19rem;
  $waiPadding: 6.51rem;
  right: calc($waiPadding - 3.2rem);
  top: $topPadding;
}

.toolList {

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

  .li {
    margin-right: 3rem;
  }

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

    display: block;
    cursor: pointer;
  }

  .speck {
    width: 1.5rem;
    height: 1.5rem;
    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");
  }
}

@media screen and (max-width: 1450px) {
  .logo2 {
    left: 13rem;
  }
}
</style>