添加导航

This commit is contained in:
luyuan 2020-09-29 18:58:51 +08:00
parent 9c1f5b965b
commit f4af1db7a5
Signed by: theluyuan
GPG Key ID: A7972FD973317FF3
5 changed files with 28 additions and 12 deletions

View File

@ -1,8 +1,9 @@
<template> <template>
<div class="nav"> <div class="nav">
<div class="logo"> <div class="logo" :style="{'background-color': types == 0 ? 'unset' : ''}">
<img src="" alt="" class="img"> <img src="" alt="" class="img">
<div class="title">Beelink</div> <div class="title" :style="{'color': types == 0 ? '#07AD97' : ''}">Beelink</div>
</div> </div>
<div class="navigation"> <div class="navigation">
<div class="item" v-for="(i,j) in nav" :key="j"> <div class="item" v-for="(i,j) in nav" :key="j">
@ -36,7 +37,6 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.nav{ .nav{
display: flex; display: flex;
background-color: #fff;
min-width: 1366px; min-width: 1366px;
user-select: none; user-select: none;
.logo{ .logo{
@ -112,15 +112,22 @@
} }
</style> </style>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent, ref } from 'vue';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
export default defineComponent({ export default defineComponent({
setup(){ props:{
type: {
type: Number,
default:0
}
},
setup(props){
// console.log(useRoute().currentRoute.value.name) // console.log(useRoute().currentRoute.value.name)
const routes = useRoute(); const routes = useRoute();
console.log(routes.path); console.log(routes.path);
const types = ref(props.type)
console.log(types.value)
interface Nav{ interface Nav{
name: string; name: string;
route: string; route: string;
@ -144,7 +151,8 @@ export default defineComponent({
} }
] ]
return { return {
nav nav,
types
} }
} }
}) })

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="mine" :style="{height:height + 'px'}"> <div class="mine" :style="{height:height + 'px'}">
<NavTop style="flex-shrink:0"></NavTop> <NavTop :type="1" style="flex-shrink:0"></NavTop>
<div class="body"> <div class="body">
<Menu></Menu> <Menu></Menu>
<div class="container"> <div class="container">

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="mine" :style="{height:height + 'px'}"> <div class="mine" :style="{height:height + 'px'}">
<NavTop style="flex-shrink:0"></NavTop> <NavTop :type="1" style="flex-shrink:0"></NavTop>
<div class="body"> <div class="body">
<router-view/> <router-view/>
</div> </div>

View File

@ -1,5 +1,6 @@
<template> <template>
<div class="login"> <div class="login">
<NavTop :type="0" style="flex-shrink:0"></NavTop>
<div class="box"> <div class="box">
<div class="left"> <div class="left">
<div class="title"> <div class="title">
@ -145,10 +146,13 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, ref } from "vue"; import { defineComponent, ref } from "vue";
import LoginTab from "@/components/login/LoginTab.vue"; import LoginTab from "@/components/login/LoginTab.vue";
import NavTop from "@/components/NavTop.vue"
export default defineComponent({ export default defineComponent({
name: "Login", name: "Login",
components: { components: {
LoginTab, LoginTab,
NavTop
}, },
setup() { setup() {
const formLayout = { const formLayout = {
@ -220,8 +224,8 @@ export default defineComponent({
background: url("../../static/images/loginbg.png"); background: url("../../static/images/loginbg.png");
background-size: 100% 130%; background-size: 100% 130%;
background-repeat: no-repeat; background-repeat: no-repeat;
padding-top: 145px;
.box { .box {
padding-top: 145px;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
.left { .left {

View File

@ -1,5 +1,6 @@
<template> <template>
<div class="login"> <div class="login">
<NavTop :type="0" style="flex-shrink:0"></NavTop>
<div class="box"> <div class="box">
<div :class="stepnow != 2 ? 'left' : 'left left1'"> <div :class="stepnow != 2 ? 'left' : 'left left1'">
<div class="title"> <div class="title">
@ -128,9 +129,11 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, ref } from "vue"; import { defineComponent, ref } from "vue";
import NavTop from "@/components/NavTop.vue"
export default defineComponent({ export default defineComponent({
name: "Sign", name: "Sign",
components: {}, components: {NavTop},
setup() { setup() {
const formLayout = { const formLayout = {
labelCol: 4, labelCol: 4,
@ -213,8 +216,9 @@ export default defineComponent({
background: url("../../static/images/loginbg.png"); background: url("../../static/images/loginbg.png");
background-size: 100% 130%; background-size: 100% 130%;
background-repeat: no-repeat; background-repeat: no-repeat;
padding-top: 145px;
.box { .box {
padding-top: 145px;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
.left1 { .left1 {