xjc-vue/src/views/xjc-integratedmachine/decision/index.vue

<template>
    <div class="wake-up-page">
        <head-component :headinfo=headinfo></head-component>
        <div class="page-content">
            <div class="page-img-box">
                <div class="img-box">
                    <!--高中选科流程图-->
                    <img class="common-img-button" src="@/assets/images/decision/index/card1.png" @click="jumpTo('/xjc-integratedmachine/decision/process_diagram/process_diagram_selecting_subjects')">
                    <!--优势学科测评-->
                    <img class="common-img-button" src="@/assets/images/decision/index/card2.png" @click="jumpTo('/xjc-integratedmachine/decision/advantageous_discipline/advantages_assessment_index')">
                    <!--专业选择测评-->
                    <img class="common-img-button" src="@/assets/images/decision/index/card3.png" @click="jumpTo('/xjc-integratedmachine/decision/major_selection_assessment/index')">
                    <!--根据高校科目选专业-->
                    <img class="common-img-button" src="@/assets/images/decision/index/card4.png" @click="jumpTo('/xjc-integratedmachine/plan/time/time_management_menu')">
                    <img class="common-img-button" src="@/assets/images/decision/index/card5.png" @click="jumpTo('/xjc-integratedmachine/plan/time/time_management_menu')">
                </div>
                <div class="bottom-img">
                    <img class="common-img-button" src="@/assets/images/decision/index/card6.png" @click="jumpTo('/xjc-integratedmachine/plan/self_control/self_control/self_control_index')">
                    <img class="common-img-button" src="@/assets/images/decision/index/card7.png" @click="jumpTo('/xjc-integratedmachine/plan/career_maturity/career_maturity_retest_index')">
                    <img class="common-img-button" src="@/assets/images/decision/index/card8.png" @click="jumpTo('/xjc-integratedmachine/plan/career_maturity/career_maturity_retest_index')">
                    <img class="common-img-button" src="@/assets/images/decision/index/card9.png" @click="jumpTo('/xjc-integratedmachine/plan/career_maturity/career_maturity_retest_index')">
                    <img class="common-img-button" src="@/assets/images/decision/index/card10.png" @click="jumpTo('/xjc-integratedmachine/plan/career_maturity/career_maturity_retest_index')">
                </div>
            </div>
            <drag_component></drag_component>
        </div>
    </div>

</template>

<script setup>
    import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
    import Drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";

    const router = useRouter()

    const headinfo = ref({})

    function setHeadinfo(){
        headinfo.value = {
            title: '生涯决策学习系统',
            user: {
                avatar: '头像路径',
                nickName: '张三'
            },
            backUrl : '/index',
            isHome:true,
            backUrlUse:true,
        }
    }


    function jumpTo(path) {
        router.push({
            path: path,
            query: {name: 123}
        })
    }
    onMounted(() => {
        setHeadinfo()
    })
</script>


<style scoped lang="scss">
    .wake-up-page{
        background: url('@/assets/images/login/login-home-background.png') no-repeat;
        background-size: 1920px 1080px;
        z-index:10;
        width: 100%;
        height: 1080px;
        .page-content{
            width: 100%;
            position: absolute;
            top: 123px;
            bottom: 0;
            p{
                padding-left: 44px;
                padding-right: 44px;
                font-weight: 400;
                font-size: 30px;
                color: #333333;
                line-height: 52px;
                letter-spacing: 3px;
                text-indent: 2em;
            }
        }
        .content-text-box{
            width: 100%;
            height: 126px;
            background: url('@/assets/images/wakeup/background-content-style.png') no-repeat;
            background-size: 1920px 126px;
            margin-top:23px;
            display: flex;
            align-items: center;
        }
        .page-img-box{
            width: 100%;
            display: flex;
            justify-content:space-around;
            flex-direction: column;
            align-items: center;
            margin-top: 40px;
            .img-box{
                width: 1900px;
                display: flex;
                justify-content: space-around;
                img{
                    width: 350px;
                    height: 400px;
                }
            }
            .bottom-img{
                width: 1900px;
                margin-top: 40px;
                display: flex;
                justify-content: space-around;
                img{
                    width: 350px;
                    height: 400px;
                }
            }
        }


    }


</style>