smScreen/src/App.vue

<template>
    <div id="app" @mousemove="mousemove">
        <nav id="nav" :style="{ height: navHeight + 'px' }">
            <router-link to="/" class="a">首页</router-link>
            <router-link to="/monitor" class="a">视频监控</router-link>
            <router-link to="/biology" class="a">生物防控</router-link>
            <router-link to="/robot" class="a">机器人巡查</router-link>
            <router-link to="/environmentalProtection" class="a">环保监测</router-link>
<!--            <router-link to="/userAdmin" class="a">人员管理</router-link>-->
        </nav>
        <header class="header">华腾石湾乡村振兴智能化管理平台</header>
        <router-view />
    </div>
</template>

<script>
export default {
    name: "app",
    data() {
        return {
            navHeight: 0,
        };
    },
    mounted() {
        // this.init();
    },
    methods: {
        init() {
            this.$http.post('http://192.168.1.165:8088/publicNetwork/add')
                    .then(res => {
                        console.log(res);
                    })
        },
        mousemove(e) {
            if (e.y <= 80) {
                this.navHeight = 70;
            } else {
                this.navHeight = 0;
            }
        },
    },
};
</script>

<style lang="scss">
#app {
    height: 100%;
	min-width: 1600px;
    max-width: 2000px;
	// min-height: 800px;
    max-height: 1200px;
	background-color: #060A2D;
	display: flex;
	flex-direction: column;
    #nav {
        width: 100%;
        position: fixed;
        background-color: #0e1e51;
        color: #eee;
        transition: height 0.4s;
        overflow: hidden;
        line-height: 80px;
        padding-left: 30px;
        z-index: 99;
        .a {
            color: #eee;
            margin: 0 20px;
            padding: 12px;
            background-color: #142b77;
            border-radius: 6px;
        }
    }
    > .header {
        // border: 1px solid #8877dd;
        background: url(./assets/bg_header.png) no-repeat;
        background-size: 100% 100%;
        width: 100%;
        // height: 20%;
        line-height: 50px;
        // font-size: 1.3vw;
        font-size: 22px;
        font-weight: 600;
        color: #fff;
        text-align: center;
    }
}
</style>