添加导航

src/components/NavTop.vue

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

src/layout/Mine.vue

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

src/layout/Regime.vue

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

src/views/login/Login.vue

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

src/views/login/Sign.vue

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