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="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'
console.log(btn1, 'btn1');

const router = useRouter()
const user = userStore();
const loginFn = () => {
    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('/page2');
            break;
        case 3:
            isBox3Clicked.value = true;
            // router.push('/page3');
            break;
        default:
            break;
    }
};
</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;
            }
        }
    }
}

.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>