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

顶部样式完成 #9

Merged
theluyuan merged 1 commits from xbx into master 2020-09-25 15:46:28 +08:00
Conversation 0 Commits 1 Files Changed 3 +147 -1
3 changed files with 147 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/Menu.vue
View File

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

145
src/components/Nav.vue Normal file
View File

@ -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>

2
src/router/index.ts
View File

@ -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',