theluyuan/beelink
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge branch 'master' of http://git.luyuan.tk/luyuan/beelink into zj

Browse Source
This commit is contained in:
asd
2020-09-27 10:56:38 +08:00
parent b75843988c dfe8618c40
commit 92d255683c
14 changed files with 14645 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/Menu.vue
View File

@@ -35,7 +35,7 @@
.menu{
user-select: none;
width: 171px;
height: 100vh;
height: 100%;
display: flex;
flex-direction: column;
background: linear-gradient(0deg, #0EDCC2, #50DF98, #7EE278, #A2E562);
@@ -43,6 +43,7 @@
width: 100%;
height: 150px;
display: flex;
flex-shrink: 0;
flex-direction: column;
align-items: center;
justify-content: center;
@@ -127,6 +128,7 @@ export default defineComponent({
name: string;
route: string;
}
// 左侧的列表数组
const list: Array<MenuItem> = [
{
icon: "",
@@ -159,8 +161,13 @@ export default defineComponent({
route: ""
}
]
// 当前选中的index
const selnum = ref(0);
const routeto = (index: number) => {
/**
* 跳转路由与赋值对应的下标
* @param index 选中的下标 方便赋值与跳转
*/
function routeto(index: number): void {
console.log(index)
selnum.value = index;

80
src/components/NavBottom.vue Normal file
View File

@@ -0,0 +1,80 @@
<template>
<div class="nav-bottom">
<div class="nav-container">
<div v-for="(item, index) in navArray" :key="index" class="nav-item">{{ item.name }}</div>
</div>
<div class="copyright">Beelink公司版权所有 2019—2022</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'NavBottom',
setup(){
interface Nav{
name: string;
route: string;
}
const navArray: Array<Nav> = [
{
name: "直播管理",
route: ""
},
{
name: "视频管理",
route: ""
},
{
name: "订阅者管理",
route: ""
},
{
name: "个人中心",
route: ""
}
]
return {
navArray
}
}
})
</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>

151
src/components/NavTop.vue Normal file
View File

@@ -0,0 +1,151 @@
<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>