tropsCode/src/views/home/index.vue

<template>
  <div class="home">
    <Header :showClose="false" :showTool="true" type="home" logoClass="logo2"></Header>
    <div class="menu">
      <div class="left">
        <div class="li" @click="getJump('/train', '自助锻炼')"><img src="@/assets/images/home/train.png" /></div>
      </div>
      <div class="right">
        <div class="right-top">
          <div class="li" @click="getJump('/test', '测试')">
            <img src="@/assets/images/home/test.png" />
            <i></i>
          </div>
          <div class="li" @click="getJump('/ranking', '排行榜')"><img src="@/assets/images/home/ranking.png" /></div>
        </div>
        <div class="right-bottom">
          <div class="li" @click="getJump('/game', '游戏')"><img src="@/assets/images/home/game.png" /></div>
          <div class="li" @click="getJump('/course', '课程')"><img src="@/assets/images/home/course.png" /></div>
          <div class="li" @click="getJump('/set', '设置')"><img src="@/assets/images/home/set.png" /></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="Home" lang="ts">
import { initSpeech, speckText, playMusic, controlMusic, speckCancel, chineseNumber } from '@/utils/speech';
const { proxy } = getCurrentInstance() as any;
const router = useRouter();

//跳转
const getJump = (url: string, name: string) => {
  if (url == undefined || !url) {
    proxy?.$modal.msgWarning(`正在开发，敬请期待！`);
    return false;
  }
  if (url == '/set') {
    if (import.meta.env.DEV) {
      proxy?.$modal.msgSuccess('测试环境免密进入');
      router.push({ path: url });
    } else {
      let myInfo: any = localStorage.getItem('userInfo');
      let userInfo = JSON.parse(myInfo);
      proxy?.$modal
        .prompt(`【${userInfo.login_name}】，请输入密码`, 'password')
        .then((e: any) => {
          // console.log("e", e)
          if (e.action == 'confirm' && e.value) {
            let params = {
              password: e.value
            };
            proxy?.$http.common.checkPassword(params).then((res: any) => {
              if (res.status === 200 || res.status === 1) {
                router.push({ path: url });
              } else {
                proxy?.$modal.msgError(res.message);
              }
            });
          }
        })
        .finally(() => { });
    }
  } else if (url == '/test') {
    if (import.meta.env.DEV) {
      proxy?.$modal.msgSuccess('测试环境免密进入');
      router.push({ path: url });
    } else {
      proxy?.$modal
        .prompt('请输入密码')
        .then((e: any) => {
          // console.log("e", e)
          if (e.action == 'confirm' && e.value == '160713') {
            let deviceid = e.value;
            localStorage.setItem('deviceid', deviceid);
            router.push({ path: url });
          }
        })
        .finally(() => { });
    }
  } else if (url == '/gesture') {
    proxy?.$modal
      .prompt('请输入设备码')
      .then((e: any) => {
        // console.log("e", e)
        if (e.action == 'confirm' && e.value) {
          let deviceid = e.value;
          localStorage.setItem('deviceid', deviceid);
          router.push({ path: url });
        }
      })
      .finally(() => { });
  } else if (url == '/game') {
    // proxy?.$modal.msgWarning('暂不开放使用，敬请期待！');
    // proxy?.$modal
    //   .prompt('请输入密码')
    //   .then((e: any) => {
    //     if (e.action == 'confirm' && e.value == 'trops') {
    //       router.push({ path: url });
    //     }
    //   })
    //   .finally(() => { });
    if (import.meta.env.DEV) {
      proxy?.$modal.msgSuccess('测试环境直接进入');
      router.push({ path: url });
    } else {
      proxy?.$modal.msgWarning('暂不开放使用，敬请期待！');
    }
  }
  else {
    router.push({ path: url });
  }
};

onMounted(() => {
  //停止播报;
  speckCancel();
});
</script>

<style lang="scss" scoped>
$waiPadding: 6.51rem;

.home {
  width: 100vw;
  height: 100vh;
}

.menu {
  width: calc(100% - ($waiPadding * 2));
  padding-top: 10rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  line-height: 0;

  .li {
    cursor: pointer;

    &:hover {

      img,
      i {
        transform: scale(1.06);
      }
    }
  }

  img {
    width: 100%;
    transition: all 0.5s;
  }

  .left {
    width: 32.6%;

    .li {
      width: 100%;
    }
  }

  .right {
    width: calc(100% - 32.6%);
    $myPadding: 1.22rem;

    .right-top {
      display: flex;
      justify-content: space-between;
      padding-left: $myPadding;
      margin-bottom: $myPadding;

      .li {
        width: calc(50% - $myPadding / 2);
      }

      .li:nth-child(1) {
        position: relative;

        i {
          width: 6vw;
          height: 6vw;
          display: block;
          position: absolute;
          top: calc(6vw / -6.4);
          left: 50%;
          margin-left: calc(6vw * -0.15);
          background-image: url('@/assets/images/home/test_icon.png');
          background-position: center;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          flex-shrink: 0;
          transition: all 0.5s;
        }
      }
    }

    .right-bottom {
      display: flex;
      justify-content: space-between;
      padding-left: $myPadding;

      .li:nth-child(1) {
        width: calc(50% - $myPadding / 2);
      }

      .li:nth-child(2) {
        width: calc((50% - $myPadding / 2) / 2 - $myPadding / 2 + 0.05rem);
      }

      .li:nth-child(3) {
        width: calc((50% - $myPadding / 2) / 2 - $myPadding / 2 - 0.05rem);
      }
    }
  }
}

@media screen and (max-width: 1450px) {
  $waiPadding: 13rem;

  .menu {
    width: calc(100% - ($waiPadding * 2));
  }
}
</style>