fix:删除侧边导航栏 (#78)

CloudStriver · Feb 22, 2024 · 11530d8 · 11530d8
1 parent b6234da
commit 11530d8
Show file tree

Hide file tree

Showing 9 changed files with 77 additions and 114 deletions.
diff --git a/src/components/header.vue b/src/components/header.vue
@@ -1,13 +1,14 @@
 <template>
     <div class="main-box">
         <div class="header-box">
+            <Nav class="nav"></Nav>
             <search class="search"></search>
             <div class="header-right">
                 <i class="iconfont icon-calendar-check-solid"></i>
                 <router-link 
+                    class="router"
                     v-if="isLogin"
                     to="/notification" 
-                    style="text-decoration: none;"
                     @click="hasNotification = false"
                 >
                     <div class="notifications-count" v-if="hasNotification"></div>
@@ -36,6 +37,7 @@ import { judgeHasLogin } from '@/utils/judge'
 import { getAllNotificationCount } from '@/utils/public' 
 import Search from '@/components/search.vue'
 import Avatar from '@/components/avatar.vue'
+import Nav from '@/components/navigation.vue'
 import popup from '@/views/home/popup.vue'
 
 const isLogin = ref(false)
@@ -66,52 +68,64 @@ const timingGetNotificationCount = () => {
 
 <style scoped lang="css">
 .main-box {
-    width: 100%;
     height: 70px;
-    padding: 0 2% 0;
-    margin-bottom: 20px;
 
     .header-box {
         width: 100%;
         height: 70px;
-        background-color: rgba(207, 227, 252, 0.6);
+        background-color: rgb(218, 235, 255);
+        box-shadow: 0 1px 10px 3px rgba(0, 0, 0, 0.1);
         padding: 0 60px 0;
         display: flex;
-        justify-content: space-between;
+        justify-content: center;
         align-items: center;
 
+        .nav {
+            margin-right: 50px;
+        }
+
         .search {
-            width: 300px;
+            width: 400px;
             height: 32px;
             padding: 0;
             margin: 0;
+            margin-right: 50px;
         }
 
         .header-right {
             display: flex;
             align-items: center;
             position: relative;
 
-            .notifications-count {
-                position: absolute;
-                width: 13px;
-                height: 13px;
-                color: #fff;
-                background-color: #de3032;
-                border: 3px solid rgba(207, 227, 252, 1);
-                border-radius: 50%;
-                right: 128px;
-                top: 12px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-            }
-            
             i {
                 font-size: 20px;
                 margin-right: 30px;
                 cursor: pointer;
-                color: #494848;
+                color: #818181;
+            }
+
+            .router {
+                text-decoration: none;
+
+                .notifications-count {
+                    position: absolute;
+                    width: 13px;
+                    height: 13px;
+                    color: #fff;
+                    background-color: #de3032;
+                    border: 3px solid rgba(207, 227, 252, 1);
+                    border-radius: 50%;
+                    right: 128px;
+                    top: 12px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                }
+            }
+            .router:hover {
+                i {
+                    color: rgb(165, 180, 197);
+                }
             }
 
             .avatar {

diff --git a/src/components/navigation.vue b/src/components/navigation.vue
@@ -19,7 +19,7 @@
                 class="router"
                 active-class="router-active"
             >
-                <i class="iconfont icon-sidenav-doc" style="font-size: 22px;"></i>
+                <i class="iconfont icon-sidenav-doc" style="font-size: 18px;"></i>
             </router-link>
             <router-link 
                 to="/space" 
@@ -78,44 +78,32 @@ watch(() => props.link, (newVal) => {
 
 <style scoped lang="css">
 .main-box {
-    width: 80px;
-    background-color: rgb(219, 235, 255);
-    padding-top: 10px;
     display: flex;
-    flex-direction: column;
 
     .nav-box {
-        width: 80px;
-        padding-top: 30px;
-        flex-direction: column;
-        align-items: center;
-        justify-content: space-around;
+        display: flex;
 
         .router {
-            width: 80px;
-            height: 50px;
             text-decoration: none;
-            margin-bottom: 30px;
             display: flex;
             justify-content: center;
             align-items: center;
             
             i {
-                font-size: 25px;
-                color: rgb(137, 161, 208);
+                font-size: 22px;
+                margin: 25px;
+                color: #a0a0a0;
             }
 
         }
         .router:hover {
-            background-color: rgba(213, 228, 242, 0.978);
+            i {
+                color: rgb(165, 180, 197);
+            }
         }
-       
-
         .router-active {
-            border-right: 2px solid rgb(76, 145, 220);
             i {
-                color: rgb(76, 145, 220);
-                font-weight: 700;
+                color: rgb(107, 167, 232)
             }
         }
     }

diff --git a/src/components/search.vue b/src/components/search.vue
@@ -13,7 +13,7 @@
 
 <style scoped lang="css">
 .main-box {
-    width: 300px;
+    width: 400px;
     height: 32px;
     border-radius: 25px;
     border: 1.5px solid rgb(107, 167, 232);
@@ -23,7 +23,7 @@
 
     input {
         margin: 0 20px 0 15px;
-        width: 80%;
+        width: 83%;
         height: 96%;
         border: none;
         outline: none;

diff --git a/src/views/home/home.vue b/src/views/home/home.vue
@@ -1,8 +1,7 @@
 <template>
     <div class="main-box">
-        <Nav class="nav"></Nav>
+        <CHeader class="cheader"></CHeader>
         <div class="contents">
-            <CHeader></CHeader>
             <section class="section-top">
                 <activity class="activity"></activity>
             </section>
@@ -21,7 +20,6 @@
 </template>
 
 <script setup lang="ts">
-import Nav from '@/components/navigation.vue'
 import CHeader from '@/components/header.vue'
 import activity from '@/views/home/activity.vue'
 import recommend from '@/views/home/recommend.vue'
@@ -66,17 +64,15 @@ const firstGetUserDetail = () => {
 .main-box {
     width: 100%;
     display: flex;
-    
-    .nav {
+    flex-direction: column;
+
+    .cheader{
         position: fixed;
-        height: 100%;
-        width: 80px;
-        float: left;
     }
 
     .contents {
         background-color: rgba(240, 245, 255, 1);
-        margin-left: 80px;
+        padding-top: 100px;
         flex: 1;
         display: flex;
         flex-direction: column;

diff --git a/src/views/information/user.vue b/src/views/information/user.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="main-box">
-        <Nav class="nav"></Nav>
+        <CHeader class="cheader"></CHeader>
         <div class="contents">
             <div class="operate-box">
                 <div class="avatar-name">
@@ -124,7 +124,7 @@
 </template>
 
 <script setup lang="ts">
-import Nav from '@/components/navigation.vue'
+import CHeader from '@/components/header.vue'
 import avatar from '@/components/avatar.vue'
 import { ref, onMounted } from 'vue'
 import { useStore } from '@/store/index'
@@ -180,19 +180,17 @@ const changeAvatar = async(event: any) => {
     width: 100%;
     height: 100%;
     display: flex;
+    flex-direction: column;
 
-    .nav {
-        position: fixed;
-        height: 100%;
-        width: 80px;
-        float: left;
+    .cheader {
+        height: 70px;
     }
 
     .contents {
         width: 100%;
         height: 100%;
+        flex: 1;
         background-color: rgba(240, 245, 255, 1);
-        margin-left: 80px;
         padding-top: 50px;
         display: flex;
         justify-content: center;

diff --git a/src/views/notification/notification.vue b/src/views/notification/notification.vue
@@ -1,8 +1,7 @@
 <template>
     <div class="main-box">
-        <Nav class="nav"></Nav>
+        <CHeader class="cheader"></CHeader>
         <div class="contents">
-            <CHeader class="cheader"></CHeader>
             <section class="section">
                 <div class="notification-box">
                     <div class="section-top">
@@ -174,7 +173,6 @@
 </template>
 
 <script setup lang="ts">
-import Nav from '@/components/navigation.vue'
 import CHeader from '@/components/header.vue'
 import { ref, onMounted, watch } from 'vue'
 import { turnTime } from '@/utils/public'
@@ -237,27 +235,20 @@ const turnNotificationType = (type: string): number => {
     width: 100%;
     height: 100%;
     display: flex;
+    flex-direction: column;
 
-    .nav {
-        position: fixed;
-        height: 100%;
-        width: 80px;
-        float: left;
+    .cheader {
+        height: 70px;
     }
 
     .contents {
-        position: relative;
+        height: 100%;
+        padding-top: 20px;
         background-color: rgba(240, 245, 255, 1);
-        margin-left: 80px;
-        flex: 1;
         display: flex;
         flex-direction: column;
         align-items: center;
 
-        .cheader {
-            height: 70px;
-        }
-
         .section {
             width: 100%;
             padding-left: 20%;

diff --git a/src/views/personal/personal.vue b/src/views/personal/personal.vue
@@ -1,6 +1,5 @@
 <template>
     <div class="main-box" @click="cancelPopup($event)">
-        <Nav class="nav" :link="fatherId"></Nav>
         <div class="drawer-box">
             <div 
                 class="drawer"
@@ -351,7 +350,6 @@
 </template>
 
 <script setup lang="ts">
-import Nav from '@/components/navigation.vue'
 import Search from '@/components/search.vue'
 import Popup from '@/views/personal/popup.vue'
 import { useStore } from '@/store/index';
@@ -787,11 +785,6 @@ const clickMusic = () => {
     display: flex;
     overflow: hidden;
 
-    .nav {
-        width: 80px;
-        z-index: 10;
-    }
-
     .drawer-box {
         position: relative;  
         display: flex;