顶部样式完成

src/components/Menu.vue

@@ -43,6 +43,7 @@
         width: 100%;
         height: 150px;
         display: flex;
+        flex-shrink: 0;
         flex-direction: column;
         align-items: center;
         justify-content: center;

src/components/Nav.vue

@@ -0,0 +1,145 @@
+<template>
+    <div class="nav">
+        <div class="logo">
+            <img src="" alt="" class="img">
+            <div class="title">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;
+    background-color: #fff;
+    .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 } from 'vue';
+
+export default defineComponent({
+    setup(){
+        console.log(1)
+        interface Nav{
+            name: string;
+            route: string;
+        }
+        const nav: Array<Nav> = [
+            {
+                name: "直播管理",
+                route: ""
+            },
+            {
+                name: "视频管理",
+                route: ""
+            },
+            {
+                name: "订阅者管理",
+                route: ""
+            },
+            {
+                name: "个人中心",
+                route: ""
+            }
+        ]
+        return {
+            nav
+        }
+    }
+})
+</script>

src/router/index.ts

@@ -4,7 +4,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
     name: 'Home',
-    component: () => import(/* webpackChunkName: "about" */ '../components/Menu.vue')
+    component: () => import(/* webpackChunkName: "about" */ '../components/Nav.vue')
   },
   {
     path: '/about',