151 lines
3.8 KiB
Vue
151 lines
3.8 KiB
Vue
<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;
|
|
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 } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
|
|
export default defineComponent({
|
|
setup(){
|
|
// console.log(useRoute().currentRoute.value.name)
|
|
const routes = useRoute();
|
|
console.log(routes.path);
|
|
|
|
interface Nav{
|
|
name: string;
|
|
route: string;
|
|
}
|
|
const nav: Array<Nav> = [
|
|
{
|
|
name: "直播管理",
|
|
route: ""
|
|
},
|
|
{
|
|
name: "视频管理",
|
|
route: ""
|
|
},
|
|
{
|
|
name: "订阅者管理",
|
|
route: ""
|
|
},
|
|
{
|
|
name: "个人中心",
|
|
route: ""
|
|
}
|
|
]
|
|
return {
|
|
nav
|
|
}
|
|
}
|
|
})
|
|
</script> |