88 lines
2.1 KiB
Vue
88 lines
2.1 KiB
Vue
<template>
|
|
<div class="nav-bottom">
|
|
<div class="nav-container" :style="color">
|
|
<div v-for="(item, index) in navArray" :key="index" class="nav-item" @click="navto(item.route)">{{ item.name }}</div>
|
|
</div>
|
|
<div class="copyright" :style="color">Beelink公司版权所有 2019—2022</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import router from '@/router';
|
|
import { defineComponent } from 'vue';
|
|
|
|
export default defineComponent({
|
|
props:{
|
|
color: Object
|
|
},
|
|
setup(){
|
|
interface Nav{
|
|
name: string;
|
|
route: string;
|
|
}
|
|
const navArray: Array<Nav> = [
|
|
{
|
|
name: "直播管理",
|
|
route: "/regime/live"
|
|
},
|
|
{
|
|
name: "视频管理",
|
|
route: "/regime/video"
|
|
},
|
|
{
|
|
name: "订阅者管理",
|
|
route: "/regime/subscriber"
|
|
},
|
|
{
|
|
name: "个人中心",
|
|
route: "/mine/archives"
|
|
}
|
|
]
|
|
function navto(url: string){
|
|
router.push(url)
|
|
}
|
|
|
|
return {
|
|
navArray,
|
|
navto
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.nav-bottom {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.nav-container {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
font-size: 10px;
|
|
font-weight: 500;
|
|
color: #404040;
|
|
.nav-item {
|
|
padding: 0 14px;
|
|
position: relative;
|
|
&:not(:last-child)::after {
|
|
content: "";
|
|
position: absolute;
|
|
right: 0px;
|
|
top: 50%;
|
|
width: 1px;
|
|
height: 10px;
|
|
background: #404040;
|
|
transform: translate(0, -50%);
|
|
}
|
|
}
|
|
}
|
|
.copyright {
|
|
font-size: 9px;
|
|
font-weight: 500;
|
|
color: #808080;
|
|
}
|
|
}
|
|
</style> |