virtualSimulation/src/layout/studyPage.vue

<template>
  <div class="login_container">
    <div class="top">
      <div class="loginBtn">
        <p @click="loginFn">{{ user.token ? "已登录" : "登录/注册" }}</p>
      </div>
      <div class="submit">
        <p @click="submit">提交</p>
      </div>
      <div class="title">{{ setting.title }}</div>
    </div>
    <div class="main-content">
      <div
        class="box"
        :style="{
          backgroundImage: isBox1Clicked ? `url(${btn1})` : `url(${btn2})`,
        }"
        @click="handleBoxClick(1)"
      >
        知识点学习
      </div>
      <div
        class="box"
        :style="{
          backgroundImage: isBox2Clicked ? `url(${btn1})` : `url(${btn2})`,
        }"
        @click="handleBoxClick(2)"
      >
        学习
      </div>
      <div
        class="box"
        :style="{
          backgroundImage: isBox3Clicked ? `url(${btn1})` : `url(${btn2})`,
        }"
        style="margin-bottom: 80px"
        @click="handleBoxClick(3)"
      >
        仿真实验
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="studyPage">
import { ref } from "vue";
import { useRouter } from "vue-router";
import settingStore from "@/store/modules/setting";
const setting = settingStore();
import userStore from "@/store/modules/user";
import btn1 from "@/assets/images/btn1.png";
import btn2 from "@/assets/images/btn2.png";
import { submitExperiment } from "@/api";
import { ElMessage } from "element-plus";
const router = useRouter();
const user = userStore();
const loginFn = () => {
  // user.token ? router.push("/spacePage") : "";

  if (user.token) {
    router.push("/spacePage");
    return;
  }
  router.push("/login");
};
const isBox1Clicked = ref(false);
const isBox2Clicked = ref(false);
const isBox3Clicked = ref(false);
const handleBoxClick = (boxNumber) => {
  isBox1Clicked.value = false;
  isBox2Clicked.value = false;
  isBox3Clicked.value = false;
  switch (boxNumber) {
    case 1:
      isBox1Clicked.value = true;
      // router.push('/page1'); // 跳转到对应的页面，这里以 /page1 为例
      router.push("/knowledgePage");
      break;
    case 2:
      isBox2Clicked.value = true;
      router.push("/subjectTest");
      break;
    case 3:
      isBox3Clicked.value = true;
      router.push("/");
      break;
    default:
      break;
  }
};

const submit = async () => {
  await submitExperiment({ getStudyRecords_id: user.userInfo.id }).then(
    (res: any) => {
      console.log(res);
      if (res.code == 500) {
        ElMessage.error(res.message);
      } else {
        ElMessage.success(res.message);
      }
    }
  );
};
</script>

<style lang="less" scoped>
.login_container {
  position: relative;
  width: 100%;
  // height: 1080px;
  min-height: 100vh;
  background-color: #091d22;
  background: url("../assets//images/bg1.png") no-repeat;
  background-size: cover;

  .top {
    width: 100%;
    height: 75px;
    text-align: center;
    font-size: 42px;
    line-height: 75px;
    font-style: italic;
    background: url("../assets/images/topbgc.png") no-repeat;
    // background-position: center bottom -10px;
    background-size: cover;

    .title {
      color: #fff;
    }

    .loginBtn {
      position: absolute;
      /* 清除浮动影响 */
      float: left;
      /* 向左浮动 */
      top: 10px;
      left: 230px;
      border: 1px solid #33fefe;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      width: 142px;
      height: 40px;
      line-height: 37px;
      background: linear-gradient(to bottom, #08b9c1, #0758b8);
      transform: skew(-30deg);
      cursor: pointer;
      /* 在X轴方向倾斜 -35 度 */
      border-radius: 5%;

      p {
        transform: skew(30deg);
        /* 反向倾斜，抵消父元素的变形 */
        font-size: 18px;
        color: #fff;
      }
    }
    .submit {
      position: absolute;
      /* 清除浮动影响 */
      // float: right;
      /* 向左浮动 */
      top: 10px;
      right: 230px;
      border: 1px solid #33fefe;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      width: 142px;
      height: 40px;
      line-height: 37px;
      background: linear-gradient(to bottom, #08b9c1, #0758b8);
      transform: skew(-30deg);
      cursor: pointer;
      /* 在X轴方向倾斜 -35 度 */
      border-radius: 5%;

      p {
        transform: skew(30deg);
        /* 反向倾斜，抵消父元素的变形 */
        font-size: 18px;
        color: #fff;
      }
    }
  }
}

.main-content {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  // background: url("../assets/images/login.png") no-repeat;
  background-position: center;
  background-size: 50% auto;
  flex-direction: column;

  .box {
    width: 520px;
    height: 162px;
    // background-color: #007BFF;
    // background: url("../assets/images/btn2.png") no-repeat;
    background-repeat: no-repeat;
    margin: 30px 0 0 25px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: contain;
    /* 让图片完整显示在盒子内 */
    background-position: center;
    /* 图片在盒子中水平和垂直居中 */
    display: flex;
    /* 使用 flex 布局 */
    justify-content: center;
    /* 水平居中 */
    // align-items: center;
    /* 垂直居中 */
    color: white;
    /* 设置文字颜色 */
    text-align: center;
    /* 文本居中对齐 */
    font-size: 49px;
    font-weight: 700;
    line-height: 190px;
  }
}
</style>