<template>
    <div class="main">
        <div class="top">
            <img src="@/assets/images/index/0.png">
        </div>
        <div class="center">
            <div class="c1">
                <img src="@/assets/images/index/1.png">
                <img src="@/assets/images/index/2.png" @click="indexJump('/xjc-integratedmachine/wakeup/index')">
                <img src="@/assets/images/index/3.png" @click="indexJump('/xjc-integratedmachine/cognize/index')">
            </div>
            <div class="c2">
                <img src="@/assets/images/index/4.png" @click="indexJump('/xjc-integratedmachine/environment/index')">
                <img src="@/assets/images/index/5.png" @click="indexJump('/xjc-integratedmachine/decision/index')">
                <img src="@/assets/images/index/6.png" @click="indexJump('/xjc-integratedmachine/plan/index')">
            </div>
        </div>
    </div>
</template>

<script setup>
    const router = useRouter()

    function indexJump(path) {
        console.log("path:",path)
        router.push({
            path: path,
            query: {name: 123}
        })
    }
</script>

<style lang="scss" scoped>
    .main {
        align-items: center;
        display: flex;
        flex-direction: column;
    }

    .top {
        height: 20vh;
    }

    .center {
        display: flex;
        flex-direction: column;
        height: 80vh;
    }

    .c1 {
        height: 50vh;
        display: flex;
        flex-direction: row;
    }

    .c2 {
        height: 50vh;
        display: flex;
        flex-direction: row;
    }
</style>
