顶部样式完成
This commit is contained in:
parent
5d96982822
commit
011fa5337c
@ -43,6 +43,7 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 150px;
|
height: 150px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-shrink: 0;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
145
src/components/Nav.vue
Normal file
145
src/components/Nav.vue
Normal 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>
|
@ -4,7 +4,7 @@ const routes: Array<RouteRecordRaw> = [
|
|||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
name: 'Home',
|
name: 'Home',
|
||||||
component: () => import(/* webpackChunkName: "about" */ '../components/Menu.vue')
|
component: () => import(/* webpackChunkName: "about" */ '../components/Nav.vue')
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/about',
|
path: '/about',
|
||||||
|
Loading…
Reference in New Issue
Block a user