소스 검색

修改 NavBar.vue 的导航栏, 解决移动端页面显示异常的问题

reghao 2 년 전
부모
커밋
1724374e3a
1개의 변경된 파일13개의 추가작업 그리고 20개의 파일을 삭제
  1. 13 20
      src/components/layout/NavBar.vue

+ 13 - 20
src/components/layout/NavBar.vue

@@ -2,60 +2,53 @@
   <div>
     <el-row id="navbar" class="main">
       <!--logo-->
-      <el-col :md="2" class="right">
+      <el-col :sm="4" class="right">
         <a href="/" class="tit">
           <img src="@/assets/img/icon/logo.png" class="logo" alt="img">
           <span>bili</span>
         </a>
       </el-col>
-      <el-col :md="1" class="right">
-        <a href="/status" class="tit">
+      <el-col :sm="1" class="right">
+        <a href="/status/11011" class="tit">
           <span>状态</span>
         </a>
       </el-col>
-      <el-col :md="1" class="right">
+      <el-col :sm="1" class="right">
         <a href="/video" class="tit">
           <span>视频</span>
         </a>
       </el-col>
-      <el-col :md="1" class="right">
+      <el-col :sm="1" class="right">
         <a href="/audio" class="tit">
           <span>音频</span>
         </a>
       </el-col>
-      <el-col :md="1" class="right">
+      <el-col :sm="1" class="right">
         <a href="/image" class="tit">
           <span>图片</span>
         </a>
       </el-col>
-      <el-col :md="1" class="right">
-        <a href="/article" class="tit">
-          <span>文章</span>
-        </a>
-      </el-col>
-      <el-col :md="1" class="right">
+      <el-col :sm="1" class="right">
         <a href="/discover" class="tit">
           <span>发现</span>
         </a>
       </el-col>
       <!--搜索框-->
-      <el-col :md="8" class="search">
+      <el-col :sm="8" class="search">
         <search-box />
       </el-col>
-      <el-col :md="2" class="logo">
-        <a href="/message">
-          <el-badge :value="120" :max="99">
-            <span class="el-icon-bell logo" />
-          </el-badge>
+      <el-col :sm="1" class="right logo">
+        <a href="/message" class="tit logo">
+          <span class="el-icon-bell logo" />
         </a>
       </el-col>
-      <el-col :md="2" class="right logo">
+      <el-col :sm="1" class="right logo">
         <a href="/post/publish" class="tit logo">
           <span class="el-icon-upload logo" />
         </a>
       </el-col>
       <!--用户信息-->
-      <el-col :md="4" class="user-info">
+      <el-col :sm="5" class="user-info">
         <!--头像-->
         <img
           v-if="!user"