pref: rebuild top bar

src/components/top-bar/KUNGalgameTopBar.vue

@@ -59,28 +59,31 @@ onBeforeRouteLeave(() => {
           </KeepAlive>
         </transition>
       </div>
-      <div class="kungalgame">
+
       <!-- 网站的名字和网站图标 -->
+      <div class="kungalgame">
         <RouterLink to="/kun">
-          <img src="@/assets/images/favicon.webp" alt="KUNgal" />
+          <img
-        </RouterLink>
+            src="@/assets/images/favicon.webp"
-        <RouterLink to="/kun">
+            alt="KUN Visual Novel 鲲 Galgame"
+          />
           <span>{{ $tm('header.name') }}</span>
         </RouterLink>
       </div>
+
+      <!-- 导航栏 -->
       <div class="top-bar">
-        <ul>
         <!-- 顶部单个板块 -->
-          <li v-for="kun in topBarItem" :key="kun.index">
+        <span v-for="kun in topBarItem" :key="kun.index">
           <RouterLink :to="{ path: kun.router }">
             {{ $tm(`header['${kun.name}']`) }}
           </RouterLink>
-          </li>
+        </span>
         <!-- 顶部板块下部的 hover 效果 -->
         <div class="box"></div>
-        </ul>
       </div>
     </div>
+
     <div class="kungalgamer-info">
       <!-- showKUNGalgamePanel 为 store 里的布尔值,其真假控制设置面板的显示与关闭 -->
       <span @click="showKUNGalgamePanel = !showKUNGalgamePanel">
@@ -122,13 +125,10 @@ onBeforeRouteLeave(() => {
 <style lang="scss" scoped>
 /* 头部样式 */
 .header {
-  /* 头部高度 */
   height: 58px;
-  /* 头部下方阴影 */
   box-shadow: 0 2px 4px 0 var(--kungalgame-trans-blue-1);
-  /* 头部背景 */
-  backdrop-filter: blur(5px);
   background-color: var(--kungalgame-trans-white-5);
+  backdrop-filter: blur(5px);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -151,22 +151,7 @@ onBeforeRouteLeave(() => {
 .nav-top {
   display: flex;
   align-items: center;
-}
+  height: 100%;
-.kungalgame {
-  display: flex;
-  align-items: center;
-  img {
-    height: 50px;
-    margin-left: 50px;
-    cursor: pointer;
-  }
-  span {
-    margin-left: 20px;
-    margin-right: 7px;
-    color: var(--kungalgame-font-color-3);
-    font-weight: bold;
-    cursor: pointer;
-  }
 }
 
 // 顶部交互栏
@@ -176,10 +161,8 @@ $navNumber: v-bind(navItemNum);
   position: relative;
   text-align: center;
   width: v-bind(navItemLength);
-  ul {
   align-items: center;
   display: flex;
-    right: 5%;
   .box {
     border-radius: 2px;
     bottom: 0;
@@ -193,14 +176,15 @@ $navNumber: v-bind(navItemNum);
       z-index: -1;
     }
   }
+
   a {
-      // 转变 a 标签为块级元素
     display: block;
     color: var(--kungalgame-blue-5);
     width: 100%;
     height: 100%;
   }
-    li {
+
+  span {
     cursor: pointer;
     display: block;
     font-weight: bold;
@@ -232,6 +216,23 @@ $navNumber: v-bind(navItemNum);
       left: calc(100% / $navNumber * 4);
     }
   }
+}
+
+.kungalgame {
+  display: flex;
+  align-items: center;
+  margin-left: 50px;
+
+  a {
+    display: flex;
+    align-items: center;
+    color: var(--kungalgame-font-color-3);
+
+    img {
+      width: 50px;
+      height: 50px;
+      margin-right: 30px;
+    }
   }
 }
 

src/views/Home/content/article/components/UserPart.vue

@@ -59,6 +59,8 @@ const user = computed(() => props.user)
     flex-grow: 1;
   }
   img {
+    height: 50px;
+    width: 50px;
     padding: 2px;
     border-radius: 50%;
     /* 页面缩小时头像缩小 */

src/views/topic/components/KUNGalgamerInfo.vue

@@ -49,11 +49,12 @@ const user = computed(() => props.user)
 }
 /* 头像 */
 .avatar {
-  /* 图像加载不出来时页面不塌陷 */
   width: 100px;
   margin-top: 17px;
+
   img {
     width: 100px;
+    height: 100px;
   }
 }
 /* 名字 */