1. <template>
    2.   <v-navigation-drawer
    3.     app
    4.     v-model="drawer"
    5.     width="250"
    6.     disable-resize-watcher
    7.     right
    8.     overlay-opacity="0.8"
    9.   >
    10.     <!-- 博主介绍 -->
    11.     <div class="blogger-info">
    12.       <v-avatar size="110" style="margin-bottom=0.5rem">
    13.         <img src=@/assets/img/avatar.jpg />
    14.       </v-avatar>
    15.     </div>
    17.     <!-- 博客信息 -->
    18.     <div class="blog-info-wrapper">
    19.       <div class="blog-info-data">
    20.         <router-link to="/archives">
    21.           <div style="font-size: 0.875rem">文章</div>
    22.           <div style="font-size: 1.125rem">1</div>
    23.         </router-link>
    24.       </div>
    26.       <div class="blog-info-data">
    27.         <router-link to="/categories">
    28.           <div style="font-size: 0.875rem">分类</div>
    29.           <div style="font-size: 1.125rem">1</div>
    30.         </router-link>
    31.       </div>
    33.       <div class="blog-info-data">
    34.         <router-link to="/tags">
    35.           <div style="font-size: 0.875rem">标签</div>
    36.           <div style="font-size: 1.125rem">1</div>
    37.         </router-link>
    38.       </div>
    39.     </div>
    40.     <hr />
    42.     <!-- 页面导航 -->
    43.     <div class="menu-container">
    44.       <div class="menus-item">
    45.         <router-link to="/">
    46.           <i class="iconfont iconzhuye"/> 首页
    47.         </router-link>
    48.       </div>
    50.       <div class="menus-item">
    51.         <router-link to="/">
    52.           <i class="iconfont iconguidang"/> 归档
    53.         </router-link>
    54.       </div>
    56.       <div class="menus-item">
    57.         <router-link to="/">
    58.           <i class="iconfont iconfenlei"/> 分类
    59.         </router-link>
    60.       </div>
    62.       <div class="menus-item">
    63.         <router-link to="/">
    64.           <i class="iconfont iconbiaoqian"/> 标签
    65.         </router-link>
    66.       </div>
    68.       <div class="menus-item">
    69.         <router-link to="/">
    70.           <i class="iconfont iconlianjie"/> 友链
    71.         </router-link>
    72.       </div>
    74.       <div class="menus-item">
    75.         <router-link to="/">
    76.           <i class="iconfont iconzhifeiji"/> 关于
    77.         </router-link>
    78.       </div>
    80.       <div class="menus-item">
    81.         <router-link to="/">
    82.           <i class="iconfont iconpinglunzu"/> 留言
    83.         </router-link>
    84.       </div>
    86.       <div class="menus-item" v-if="!this.$store.state.avatar">
    87.         <a><i class="iconfont icondenglu"/> 登录</a>
    88.       </div>
    89.       <div v-else>
    90.         <div class="menus-item">
    91.           <router-link to="/user">
    92.             <i class="iconfont icongerenzhongxin" />个人中心
    93.           </router-link>
    94.         </div>
    95.         <div class="menus-item">
    96.           <a><i class="iconfont icontuichu" />退出</a>
    97.         </div>
    98.       </div>
    99.     </div>
    100.   </v-navigation-drawer>
    101. </template>
    103. <script>
    104. export default {
    105.   computed: {
    106.     drawer: {
    107.       set(value) {
    108.         this.$store.state.drawer = value;
    109.       },
    110.       get() {
    111.         return this.$store.state.drawer;
    112.       },
    113.     },
    114.   },
    115. };
    116. </script>
    119. <style scoped>
    120. .blogger-info {
    121.   padding: 26px 30px 0;
    122.   text-align: center;
    123. }
    125. .blog-info-wrapper {
    126.   display: flex;
    127.   align-items: center;
    128.   padding: 12px 10px 0;
    129. }
    131. .blog-info-data {
    132.   flex: 1;
    133.   line-height: 2;
    134.   text-align: center;
    135. }
    137. hr {
    138.   border: 2px dashed #d2ebfd;
    139.   margin: 20px 0;
    140. }
    142. .menu-container {
    143.   padding: 0 10px 40px;
    144.   animation: 0.8s ease 0s 1 normal none running sidebarItem;
    145. }
    147. .menus-item a {
    148.   padding: 6px 30px;
    149.   display: block;
    150.   line-height: 2;
    151. }
    153. .menus-item  i {
    154.   margin-right: 2rem;
    155. }
    157. @keyframes sidebarItem {
    158.   0% {
    159.     transform: translateX(200px);
    160.   }
    162.   100% {
    163.     transform: translateX();
    164.   }
    165. }
    166. </style>