beelink/src/components/NavTop.vue

<template>
    <div class="nav">
        <div class="logo" :style="{'background-color': types == 0 ? 'unset' : ''}">

            <img src="" alt="" class="img">
            <div class="title" :style="{'color': types == 0 ? '#07AD97' : ''}">Beelink</div>
        </div>
        <div class="navigation">
            <div class="item" v-for="(i,j) in nav" :key="j">
                {{i.name}}
            </div>
        </div>
        <div style="width: 100%"></div>
        <div class="setting">
            <div class="item">
                <img src="" alt="" class="icon">
                <div class="name">北京 GMT +08:00</div>
                <img src="" alt="" class="down">
            </div>
            <div class="item">
                <img src="" alt="" class="icon">
                <div class="name">人民币</div>
                <img src="" alt="" class="down">
            </div>
            <div class="item">
                <img src="" alt="" class="icon">
                <div class="name">中文</div>
                <img src="" alt="" class="down">
            </div>
            <div class="item">
                <img src="" alt="" class="icon">
                <div class="name">日历</div>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.nav{
    display: flex;
    min-width: 1366px;
    user-select: none;
    .logo{
        width: 171px;
        height: 57px;
        background-color: #06C7AE;
        display: flex;
        align-items: center;
        flex-shrink: 0;
        .img{
            width: 38px;
            height: 38px;
            background-color: #0f0;
            margin-left: 14px;
            border-radius: 50%;
        }
        .title{
            margin-left: 9px;
            font-size: 17px;
            color: #fff;
        }
    }
    .navigation{
        display: flex;
        align-items: center;
        flex-shrink: 0;
        margin-left: 28px;
        .item{
            padding: 0 28px;
            height: 18px;
            border-right: 1px solid #eee;
            font-size: 11px;
            color: #111;
            font-weight: bold;
            &:last-child{
                border-right: none;
            }
        }
    }
    .setting{
        display: flex;
        align-items: center;
        flex-shrink: 0;
        padding: 0 16px;
        .item{
            display: flex;
            align-items: center;
            border-right: 1px solid #eee;
            padding: 0 23px;
            height: 18rpx;
            &:last-child{
                border-right: none;
            }
            .icon{
                width: 16px;
                height: 16px;
                background-color: #0f0;
            }
            .name{
                margin-left: 6px;
                font-size: 11px;
                color: #111;
                font-weight: bold;
            }
            .down{
                width: 9px;
                height: 5px;
                margin-left: 20px;
                background-color: #0f0;
            }
        }
    }
}
</style>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { useRoute } from 'vue-router';

export default defineComponent({
    props:{
        type: {
            type: Number,
            default:0
        }
    },
    setup(props){
        // console.log(useRoute().currentRoute.value.name)
        const routes = useRoute();
        console.log(routes.path);
        const types = ref(props.type)
        console.log(types.value)
        interface Nav{
            name: string;
            route: string;
        }
        const nav: Array<Nav> = [
            {
                name: "直播管理",
                route: ""
            },
            {
                name: "视频管理",
                route: ""
            },
            {
                name: "订阅者管理",
                route: ""
            },
            {
                name: "个人中心",
                route: ""
            }
        ]
        return {
            nav,
            types
        }
    }
})
</script>