xjc-vue/src/views/xjc-integratedmachine/decision/balance_sheet/decision_balance_sheet_index.vue

<template>
    <div class="maturity-game-page">
        <head-component :headinfo=headinfo></head-component>
        <div class="page-content">
            <div class="top">
                <img src="@/assets/images/decision/decision_balance_sheet/game-title.png" >
            </div>
            <div class="bottom">
                <img src="@/assets/images/decision/common/index-game-left.png" @click="jumpTo('/xjc-integratedmachine/decision/balance_sheet/decision_balance_sheet_explanation')">
                <img src="@/assets/images/decision/common/index-game-right.png" @click="jumpTo('/xjc-integratedmachine/decision/balance_sheet/decision_balance_sheet')">
            </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";
    import {onMounted} from "vue";
    const router = useRouter()

    const headinfo = ref({})

    function setHeadinfo(){
        headinfo.value = {
            title: '',
            user: {
                avatar: '头像路径',
                nickName: '张三'
            },
            backUrl: '/xjc-integratedmachine/decision/index',
            backUrlUse:true,
        }
    }

    function jumpTo(path) {
        router.push({
            path: path,
            query: {name: 123}
        })
    }

    onMounted(() => {
        setHeadinfo()
    })
</script>


<style scoped lang="scss">
    .maturity-game-page{
        background: url('@/assets/images/wakeup/maturity/maturity-game-bg.png') no-repeat;
        background-size: 1920px 1080px;
        z-index:10;
        width: 100%;
        height: 1080px;
        .page-content{
            width: 100%;
            position: absolute;
            top: 123px;
            bottom: 0;
            .top{
                width: 100%;
                height: 212px;
                display: flex;
                justify-content: center;
                margin-top: 104px;
                img{
                    width: 864px;
                    height: 212px;
                }
            }
            .bottom{
                width: 100%;
                height: 248px;
                display: flex;
                justify-content: space-around;
                margin-top:186px;
                img{
                    width: 398px;
                    height: 248px;
                }
            }
        }

    }

</style>