tropsCode/src/views/home/index.vue

<template>
  <div class="home">
    <Header :showClose="false" :showTool="true" 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('/gesture', '竞赛')"><img src="@/assets/images/home/competition.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">
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 == '/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 {
    router.push({ path: url });
  }
};

onMounted(() => {

})
</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>