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 music" v-if="music.show">
        <el-select v-model="music.id" :popper-append-to-body="false" placeholder="请选择" @change="changeMusic">
          <el-option v-for="item in music.list" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </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 useAppStore from '@/store/modules/app';
import { initSpeech, speckText, playMusic, controlMusic, speckCancel, chineseNumber } from '@/utils/speech';
import dataDictionary from '@/utils/dataDictionary';
const { proxy } = getCurrentInstance() as any;
const emit = defineEmits(['confirmExit', 'setMusic']);
const router = useRouter();
const route = useRoute();
const dic: any = dataDictionary;

//父值
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,
  music: { id: null, list: [], show: false }
});
const { userInfo, timerManager, parameter, date, voice, screen, music } = 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', {});
};

/**
 * 选择音乐
 */
const changeMusic = (data: any) => {
  emit('setMusic', data);
};

//获取音乐
const getMusic = async () => {
  const list: any = useAppStore().getMusic();
  if (list.length) {
    music.value.list = list;
  } else {
    await proxy?.$http.train.musicList().then((res: any) => {
      if (res.data.length > 0) {
        let myList: any = res.data;
        music.value.list = myList;
        useAppStore().setMusic(myList);
      }
    });
  }
  console.log('music.value', music.value);
  music.value.show = true;
};

//获取个人信息
const getUserInfo = () => {
  if (['home', 'gesture'].includes(props.type)) {
    let params = {};
    proxy?.$http.common.getUserInfo(params).then((res: any) => {
      //保存信息
      if (res.data.length) {
        let myData = res.data[0];
        userInfo.value = myData;
        let info: any = JSON.stringify(myData);
        localStorage.setItem("userInfo", info);
      }
    });
  } else {
    const myInfo: any = localStorage.getItem('userInfo');
    userInfo.value = JSON.parse(myInfo);
  }
};

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;
  }
  //音乐
  if (parameter.value.music) {
    music.value.id = Number(parameter.value.music);
    getMusic();
  }
  //用户信息
  getUserInfo();
});
</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);
  right: calc($topPadding / 2 - 3.2rem / 4);
  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;
    margin-left: 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');
  }

  .music {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-image: url('@/assets/images/common/music.png');

    ::v-deep(.el-select__wrapper) {
      width: 0;
      height: 0;
      padding: 0 0 0 0;
      min-height: 20px;

      .el-select__suffix {
        display: none;
      }
    }
  }
}

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