digital_park_static/digital-park-web/digital-park/src/components/Header.vue

<!-- 导航 -->
<template>
    <div class="header">
        <div class="wrap">
            <section class="wrap_left">
                <!-- <img src="@assets/image/index/logo.png" alt="logo" />
                小昆山数据可视化平台 -->
                <img src="@assets/image/index/logo-n.png" alt="logo" />
            </section>
            <section class="wrap_right">
                <div>
                    <router-link
                        v-for="item in nav"
                        :key="item.name"
                        :to="item.path"
                    >{{ item.name }}</router-link>
                </div>
                <section class="enterprise pointer" @click="goMyCompany">
                    <img src="@assets/image/index/icon_company.png" alt="icon_company" />
                    我的企业
                </section>
            </section>
        </div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { routerOpenInNewWindow } from "@/utils/common.js";
import { mapGetters } from "vuex";
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    computed: {
        ...mapGetters({
            currentAccount: "currentAccount",
        }),
    },
    data() {
        //这里存放数据
        return {
            nav: [
                {
                    name: "园区首页",
                    path: "/index",
                },
                {
                    name: "招商服务",
                    path: "/investment-service",
                },
                {
                    name: "上下游企业",
                    path: "/company-list",
                },
                {
                    name: "园区资讯问答",
                    path: "/park-information",
                },
            ],
        };
    },
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        clickRouter(path) {
            routerOpenInNewWindow({
                path,
            });
        },
        // 前往我的企业
        goMyCompany() {
            let path = '/my-business';
            console.log(this.currentAccount,'this.currentAccount')
            if(!this.currentAccount){
                path = '/login'
            }
            this.$router.push(path);
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
    },
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.header {
    @include size(100%, 100px);
    color: $color-white;
    border-bottom: solid 1px rgba(255, 255, 255, 0.5);
    background: transparent;
    @include flex(row, center, center, wrap);
    @include border-box;
}
.wrap {
    @include size($wrapWidth, 100%);
    @include flex(row, space-between, center, wrap);
    .wrap_left {
        @include flex(row, center, center, wrap);
        img {
            @include size(auto, 45px);
            margin-right: 10px;
        }
    }
    .wrap_right {
        height: 100%;
        @include flex(row, flex-end, center, wrap);
        > div {
            height: 100%;
            @include flex(row, space-between, center, wrap);
            a {
                height: 100%;
                margin-right: 50px;
                @include font(18px, $color-white);
                @include flex(row, center, center, wrap);
                @include hoverLine(2px, $color-white);
            }
            .router-link-active::after {
                content: "";
                position: absolute;
                height: 2px;
                width: 100%;
                background: $color-white;
                bottom: 0;
                left: 0;
            }
        }
    }

    .enterprise {
        @include size(160px, 40px);
        border: solid 1px rgba(255, 255, 255, 0.5);
        border-radius: 20px;
        @include border-box;
        @include flex(row, center, center, wrap);
        img {
            @include size(20px, 20px);
            margin-right: 10px;
        }
    }
}
</style>