Merge pull request #574 from nagisa77/feature/ui_fix_v0

fix: ui fix

frontend_nuxt/app.vue

@@ -1,6 +1,5 @@
 <template>
   <div id="app">
-
     <div class="header-container">
       <HeaderComponent
         ref="header"
@@ -10,15 +9,18 @@
     </div>
 
     <div class="main-container">
-   
       <div class="menu-container" v-click-outside="handleMenuOutside">
         <MenuComponent :visible="!hideMenu && menuVisible" @item-click="menuVisible = false" />
       </div>
       <div class="content" :class="{ 'menu-open': menuVisible && !hideMenu }">
         <NuxtPage keepalive />
       </div>
- 
-      <div v-if='!menuVisible && route.path !== "/new-post"'  class="new-post-icon" @click="goToNewPost">
+
+      <div
+        v-if="!menuVisible && route.path !== '/new-post'"
+        class="new-post-icon"
+        @click="goToNewPost"
+      >
         <i class="fas fa-edit"></i>
       </div>
     </div>
@@ -73,7 +75,7 @@ export default {
       }
     }
 
-    const goToNewPost = () => { 
+    const goToNewPost = () => {
       navigateTo('/new-post', { replace: false })
     }
 
@@ -116,9 +118,10 @@ export default {
 }
 
 .new-post-icon {
-  background-color: var(--primary-color);
-  width: 40px;
-  height: 40px;
+  background-color: var(--new-post-icon-color);
+  color: white;
+  width: 60px;
+  height: 60px;
   border-radius: 50%;
   position: fixed;
   bottom: 40px;
@@ -127,6 +130,7 @@ export default {
   cursor: pointer;
   z-index: 1000;
   display: flex;
+  backdrop-filter: blur(5px);
   justify-content: center;
   align-items: center;
 }

frontend_nuxt/assets/global.css

@@ -2,6 +2,7 @@
   --primary-color-hover: rgb(9, 95, 105);
   --primary-color: rgb(10, 110, 120);
   --primary-color-disabled: rgba(93, 152, 156, 0.5);
+  --new-post-icon-color: rgba(10, 111, 120, 0.598);
   --header-height: 60px;
   --header-background-color: white;
   --header-border-color: lightgray;
@@ -42,6 +43,7 @@
   --background-color-blur: var(--background-color);
   --menu-border-color: #555;
   --normal-border-color: #555;
+  --new-post-icon-color: rgba(10, 111, 120, 0.598);
   --menu-selected-background-color: rgba(255, 255, 255, 0.1);
   --menu-text-color: white;
   /* --normal-background-color: #000000; */

frontend_nuxt/components/HeaderComponent.vue

@@ -25,11 +25,7 @@
             <i class="fas fa-search"></i>
           </div>
 
-          <ToolTip
-            v-if="!isMobile"
-            content="发帖"
-            placement="bottom"
-          >
+          <ToolTip v-if="!isMobile" content="发帖" placement="bottom">
             <div class="new-post-icon" @click="goToNewPost">
               <i class="fas fa-edit"></i>
             </div>
@@ -294,6 +290,7 @@ onMounted(async () => {
 .new-post-icon {
   font-size: 18px;
   cursor: pointer;
+  margin-right: 10px;
 }
 
 @media (max-width: 1200px) {