NanJingLamanRadarProject/04.系统编码/Frontend/src/components/Shared/Header.vue

<template>
    <div class="header">
        <div class="logo">
            <img src="/images/logo.png" />
            南京生态环境评估决策平台
        </div>
        <div class="nav">
            <div class="nav-item">
                <router-link to="/MicrowaveRadiation">微波辐射计</router-link>
            </div>
            <div class="nav-item">
                <router-link to="/RamanLidar">拉曼激光雷达</router-link>
            </div>
            <div class="nav-item">
                <router-link to="/SynergyEvaluation">生态环境效应评估</router-link>
            </div>
            <div class="nav-item">
                <router-link to="/DecisionSupport">决策支持</router-link>
            </div>
            <div class="nav-item">
                <router-link to="/SystemManagement">系统管理</router-link>
            </div>
        </div>
          <span @click="Logout">退出登录</span>

    </div>
</template>

<script lang="ts">

    import { reactive, onMounted, toRefs } from "vue";
    import { useRouter } from 'vue-router';
    import { clear } from "../../uilts/storage";

    export default {
      name: 'Header',
      setup() {
        const router = useRouter();
        let options = reactive({
          currentPath: 'MicrowaveRadiation'
        })

        const onNavClick = (path) => {
          options.currentPath = path;
          router.push({path: path});
        }

        const Logout = () => {
          clear()
          router.replace('/Login')
        }

        return {
          ...toRefs(options),
          onNavClick,
          Logout
        }
      }
    }
</script>

<style lang="less" scoped>
    .header {
        width: 100%;
        height: 0.84rem;
        display: flex;
        align-items: center;
        color: #ffffff;
      span{
        padding: 10px;
        cursor: pointer;
        background-color: #498DF0;
        border-radius: 10px;
      }
        .logo {
            margin-left: 0.2rem;
            display: flex;
            align-items: center;
            letter-spacing: 2px;
            font-size: 0.3rem;
            font-weight: bold;

            img {
                width: 0.53rem;
                margin-right: 0.1rem;
            }
        }
        .nav {
            margin: 0.17rem 0 0 0.5rem;
            display: flex;
            font-size: 0.22rem;
            .nav-item {
                width: 1.7rem;
                height: 0.66rem;
                margin: 0 0.25rem;
                line-height: 0.5rem;
                text-align: center;
                cursor: pointer;

                a {
                    height: 100%;
                    color: #ffffff;
                }

                &:nth-of-type(3) {
                    width: 2.3rem;
                    .active {
                        background: url("/images/nav-bg-big.png") no-repeat center/cover;
                    }
                }
                .active {
                    color: #23FBFF;
                    background: url("/images/nav-bg.png") no-repeat center/cover;
                }
            }
            
        }
    }
</style>