1. <template>
    2.   <v-app-bar app :class="navClass" hide-on-scroll flat height="60">
    3.     <!-- 手机端导航栏 -->
    4.     <div class="d-md-none nav-mobile-container">
    5.       <div style="font-size: 18px; font-weight: bold">
    6.         <router-link to="/"> 星之卡比 </router-link>
    7.       </div>
    8.       <div style="margin-left: auto">
    9.         <a><i class="iconfont iconsousuo" /></a>
    10.         <a @click="openDrawer" style="margin-left: 10px; font-size: 20px">
    11.           <i class="iconfont iconhanbao" />
    12.         </a>
    13.       </div>
    14.     </div>
    15.     <!-- 电脑导航栏 -->
    16.     <div class="d-md-block d-none nav-container">
    17.       <div class="float-left blog-title">
    18.         <router-link to="/"> 星之卡比 </router-link>
    19.       </div>
    20.       <div class="float-right nav-title">
    21.         <div class="menus-btn">
    22.           <a><i class="iconfont iconsousuo" /> 搜索</a>
    23.         </div>
    24.         <div class="menus-item">
    25.           <router-link to="/">
    26.             <i class="iconfont iconzhuye" /> 首页
    27.           </router-link>
    28.         </div>
    29.         <div class="menus-item">
    30.           <router-link to="/archives">
    31.             <i class="iconfont iconguidang" /> 归档
    32.           </router-link>
    33.         </div>
    34.         <div class="menus-item">
    35.           <router-link to="/categories">
    36.             <i class="iconfont iconfenlei" /> 分类
    37.           </router-link>
    38.         </div>
    39.         <div class="menus-item">
    40.           <router-link to="/tags">
    41.             <i class="iconfont iconbiaoqian" /> 标签
    42.           </router-link>
    43.         </div>
    44.         <div class="menus-item">
    45.           <router-link to="/links">
    46.             <i class="iconfont iconlianjie" /> 友链
    47.           </router-link>
    48.         </div>
    49.         <div class="menus-item">
    50.           <router-link to="/about">
    51.             <i class="iconfont iconzhifeiji" /> 关于
    52.           </router-link>
    53.         </div>
    54.         <div class="menus-item">
    55.           <router-link to="/message">
    56.             <i class="iconfont iconpinglunzu" /> 留言
    57.           </router-link>
    58.         </div>
    59.         <div class="user-btn">
    60.           <a v-if="!this.$store.state.avatar">
    61.             <i class="iconfont icondenglu" /> 登录
    62.           </a>
    63.           <template v-else>
    64.             <img
    65.               class="user-avatar"
    66.               :src="this.$store.state.avatar"
    67.               height="30"
    68.               width="30"
    69.             />
    70.             <ul class="user-submenu">
    71.               <li>
    72.                 <router-link to="/user">
    73.                   <i class="iconfont icongerenzhongxin" /> 个人中心
    74.                 </router-link>
    75.               </li>
    76.               <li>
    77.                 <a><i class="iconfont icontuichu" /> 退出</a>
    78.               </li>
    79.             </ul>
    80.           </template>
    81.         </div>
    82.       </div>
    83.     </div>
    84.   </v-app-bar>
    85. </template>
    87. <script>
    88. export default {
    89.   mounted() {
    90.     window.addEventListener("scroll", this.scroll);
    91.   },
    92.   data: function () {
    93.     return {
    94.       navClass: "",
    95.     };
    96.   },
    97.   methods: {
    98.     scroll() {
    99.       const that = this;
    100.       let scrollTop =
    101.         window.pageYOffset ||
    102.         document.documentElement.scrollTop ||
    103.         document.body.scrollTop;
    104.       that.scrollTop = scrollTop;
    105.       if (that.scrollTop > 60) {
    106.         that.navClass = "nav-fixed";
    107.       } else {
    108.         that.navClass = "nav";
    109.       }
    110.     },
    111.     openDrawer() {
    112.       this.$store.state.drawer = true;
    113.     },
    114.   },
    116.   computed: {
    117.     avatar() {
    118.       return this.$store.state.avatar;
    119.     },
    120.   },
    121. };
    122. </script>
    124. <style scoped>
    125. i {
    126.   margin-right: 4px;
    127. }
    128. ul {
    129.   list-style: none;
    130. }
    131. .nav {
    132.   background: rgba(0, 0, 0, 0) !important;
    133. }
    134. .nav a {
    135.   color: #eee !important;
    136. }
    137. .nav .menus-item a {
    138.   text-shadow: 0.05rem 0.05rem 0.1rem rgba(0, 0, 0, 0.3);
    139. }
    140. .nav .blog-title a {
    141.   text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15);
    142. }
    143. .theme--light.nav-fixed {
    144.   background: rgba(255, 255, 255, 0.8) !important;
    145.   box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0.6);
    146. }
    147. .theme--dark.nav-fixed {
    148.   background: rgba(18, 18, 18, 0.8) !important;
    149. }
    150. .theme--dark.nav-fixed a {
    151.   color: rgba(255, 255, 255, 0.8) !important;
    152. }
    153. .theme--light.nav-fixed a {
    154.   color: #4c4948 !important;
    155. }
    156. .nav-fixed .menus-item a,
    157. .nav-fixed .menus-btn a,
    158. .nav-fixed .blog-title a {
    159.   text-shadow: none;
    160. }
    161. .nav-container {
    162.   font-size: 14px;
    163.   width: 100%;
    164.   height: 100%;
    165. }
    166. .nav-mobile-container {
    167.   width: 100%;
    168.   display: flex;
    169.   align-items: center;
    170. }
    171. .blog-title,
    172. .nav-title {
    173.   display: flex;
    174.   align-items: center;
    175.   height: 100%;
    176. }
    177. .blog-title a {
    178.   font-size: 18px;
    179.   font-weight: bold;
    180. }
    181. .user-btn,
    182. .menus-btn,
    183. .menus-item {
    184.   position: relative;
    185.   display: inline-block;
    186.   margin: 0 0 0 0.875rem;
    187. }
    188. .menus-btn a,
    189. .menus-item a {
    190.   transition: all 0.2s;
    191. }
    192. .nav-fixed .menus-btn a:hover,
    193. .nav-fixed .menus-item a:hover {
    194.   color: #49b1f5 !important;
    195. }
    196. .menus-item a:hover:after {
    197.   width: 100%;
    198. }
    199. .menus-item a:after {
    200.   position: absolute;
    201.   bottom: -5px;
    202.   left: 0;
    203.   z-index: -1;
    204.   width: 0;
    205.   height: 3px;
    206.   background-color: #80c8f8;
    207.   content: "";
    208.   transition: all 0.3s ease-in-out;
    209. }
    210. .user-btn a {
    211.   transition: all 0.2s;
    212. }
    213. .user-avatar {
    214.   cursor: pointer;
    215.   border-radius: 50%;
    216. }
    217. .user-btn:hover .user-submenu {
    218.   display: block;
    219. }
    220. .user-submenu {
    221.   position: absolute;
    222.   display: none;
    223.   right: 0;
    224.   width: max-content;
    225.   margin-top: 8px;
    226.   box-shadow: 0 5px 20px -4px rgba(0, 0, 0, 0.5);
    227.   background-color: #fff;
    228.   animation: submenu 0.3s 0.1s ease both;
    229. }
    230. .user-submenu:before {
    231.   position: absolute;
    232.   top: -8px;
    233.   left: 0;
    234.   width: 100%;
    235.   height: 20px;
    236.   content: "";
    237. }
    238. .user-submenu a {
    239.   line-height: 2;
    240.   color: #4c4948 !important;
    241.   text-shadow: none;
    242.   display: block;
    243.   padding: 6px 14px;
    244. }
    245. .user-submenu a:hover {
    246.   background: #4ab1f4;
    247. }
    248. @keyframes submenu {
    249.   0% {
    250.     opacity: 0;
    251.     filter: alpha(opacity=0);
    252.     transform: translateY(10px);
    253.   }
    254.   100% {
    255.     opacity: 1;
    256.     filter: none;
    257.     transform: translateY(0);
    258.   }
    259. }
    260. </style>