BusinessBenchmark/src/mobeilComponent/menuMobeilPage.vue

<template>
    <div class="menuMobeil">
        <div class="menuBack">
            <img :src="menuImg" alt="">
        </div>
        <div class="menuMain">
            <div class="menuMainTop">
                <img :src="menuImg2" alt="">
                <p>全业务域考评系统</p>
            </div>
            <div class="menuMainBot">
                <p @click="enterPage('mobeil')">年度单位评级</p>
                <p @click="enterPage('quarterConpany')">季度单位评级</p>
                <p @click="enterPage('report')">单位考评报告</p>
                <p @click="enterPage('earlyWarning')">单位考评预警</p>
                <p @click="enterPage('notificationMobeil')">对标考评公告</p>
                <img :src="closeMenu" alt="" @click="goBack">
            </div>
        </div>
    </div>
</template>

<script>
import menuImg from '../assets/mobeilImg/menuBack.png'
import menuImg2 from '../assets/mobeilImg/menuBack2.png'
import closeMenu from '../assets/mobeilImg/closeMenu.png'
export default {
    data() {
        return {
            menuImg: menuImg,
            menuImg2: menuImg2,
            closeMenu: closeMenu,
        }
    },
    methods: {
        goBack() {
            this.$router.go(-1)
        },
        enterPage(type) {
            this.$router.push({ path: "/"+type})
        }
    }
}
</script>

<style lang='less'>
.menuMobeil{
    height: 100vh;
    background-color: #184FB4;
    .menuBack{
        img{
            width: 80%;
            position: fixed;
            top: 0;
            left: 10%;
        }
    }
    .menuMain{
        width: calc(100% - 80px);
        // height: 100%;
        padding: 0 40px;
        .menuMainTop{
            position: relative;
            top: 70px;
            img{
                width: 35px;
                position: absolute;
                left: 45%;
            }
            p{
                font-family: MicrosoftYaHei;
                color: #fff;
                font-size: 20px;
                font-weight: 400;
                position: absolute;
                left: 25%;
                margin-top: 60px;
            }
        }
        .menuMainBot{
            position: relative;
            top: 230px;
            text-align: center;
            border-top: 1px solid #fff;
            p{
                font-family: MicrosoftYaHei;
                color: #fff;
                font-size: 18px;
                font-weight: 400;
                line-height: 70px;
                border-bottom: 1px solid #fff;
            }
            img{
                width: 30px;
                position: absolute;
                left: 45%;
                margin-top: 80px;
            }
        }
    }
}
</style>