128 lines
3.1 KiB
Vue
128 lines
3.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)">
|
|
<div :class="item.route==nowroute?'active':''">{{lan.$t(item.name) }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="copyright" :style="color">{{lan.$t("banquan")}}</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import router from '@/router';
|
|
import { useI18n } from '@/utils/i18n';
|
|
import { defineComponent, onMounted, ref } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
|
|
export default defineComponent({
|
|
props:{
|
|
color: Object
|
|
},
|
|
setup(){
|
|
const lan: any = useI18n();
|
|
interface Nav{
|
|
name: string;
|
|
route: string;
|
|
}
|
|
|
|
const routes=useRoute()
|
|
const nowroute=ref<string>(routes.path)
|
|
console.log(routes.path)
|
|
const navArray: Array<Nav> = [
|
|
{
|
|
name: 'zhiboguanli',
|
|
route: "/regime/live"
|
|
},
|
|
{
|
|
name: 'shipinguanli',
|
|
route: "/regime/video"
|
|
},
|
|
{
|
|
name: 'dingyuezheguanli',
|
|
route: "/regime/subscriber"
|
|
},
|
|
{
|
|
name: 'gerenzhongxin',
|
|
route: "/mine/archives"
|
|
}
|
|
]
|
|
// const navArray: Array<Nav> = [
|
|
// {
|
|
// name: "直播管理",
|
|
// route: "/regime/live"
|
|
// },
|
|
// {
|
|
// name: "视频管理",
|
|
// route: "/regime/video"
|
|
// },
|
|
// {
|
|
// name: "订阅者管理",
|
|
// route: "/regime/subscriber"
|
|
// },
|
|
// {
|
|
// name: "个人中心",
|
|
// route: "/mine/archives"
|
|
// }
|
|
// ]
|
|
function navto(url: string){
|
|
nowroute.value=url
|
|
router.push(url)
|
|
|
|
}
|
|
|
|
|
|
return {
|
|
navArray,
|
|
navto,
|
|
nowroute,
|
|
lan
|
|
}
|
|
}
|
|
})
|
|
</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;
|
|
cursor: pointer;
|
|
&:not(:last-child)::after {
|
|
content: "";
|
|
position: absolute;
|
|
right: 0px;
|
|
top: 50%;
|
|
width: 1px;
|
|
height: 10px;
|
|
background: #404040;
|
|
transform: translate(0, -50%);
|
|
}
|
|
}
|
|
|
|
.nav-item:hover{
|
|
color: #06C7AE;
|
|
}
|
|
.active{
|
|
color: #06C7AE;
|
|
}
|
|
}
|
|
.copyright {
|
|
font-size: 9px;
|
|
font-weight: 500;
|
|
color: #808080;
|
|
}
|
|
}
|
|
</style> |