增加首页地图和按钮

guanqb

2022-10-12 57d40a94f0892f81dc14fb700e7614a7776a4fca

 src/pcviews/homee/Header/index.vue

@@ -1,12 +1,12 @@
<template>
    <div class="header">
        <div class="title">智慧校园可视化信息管理平台</div>
        <div class="btn1 navBtn">首页</div>
        <div class="btn2 navBtn">能源管理</div>
        <div class="btn3 navBtn">地下管网</div>
        <div class="btn4 navBtn">资产管理</div>
        <div class="btn5 navBtn">虚拟三维</div>
        <div class="btn6 navBtn">新生迎新</div>
        <div class="btn1 navBtn" :class="{'btnClick':isClick == 1}" @click="isClick = 1">首页</div>
        <div class="btn2 navBtn" :class="{'btnClick':isClick == 2}" @click="isClick = 2">能源管理</div>
        <div class="btn3 navBtn" :class="{'btnClick':isClick == 3}" @click="isClick = 3">地下管网</div>
        <div class="btn4 navBtn" :class="{'btnClick':isClick == 4}" @click="isClick = 4">资产管理</div>
        <div class="btn5 navBtn" :class="{'btnClick':isClick == 5}" @click="onBtn5">校园导览</div>
        <div class="btn6 navBtn" :class="{'btnClick':isClick == 6}" @click="isClick = 6">新生迎新</div>

        <div class="underLine"></div>
    </div>
@@ -14,6 +14,17 @@

<script>
export default {
    data () {
        return {
            isClick: 1
        }
    },
    methods: {
        onBtn5 () {
            this.isClick = 5
            this.$router.push('/pcLayout')
        }
    }
}
</script>

@@ -41,7 +52,7 @@
        font-weight: 500;
    }
    .title {
        color: #eed;
        color: #28f2ff;
        width: 550px;
        position: absolute;
        left: 678px;
@@ -80,6 +91,11 @@
    .btn6 {
        right: 37px;
    }
    .btnClick {
        color: #fff;
        font-weight: 700;
        box-shadow: 0px 3px 30px #24f2ff;
    }
    .nav {
        position: absolute;
        display: flex;