完成文章列表

web/layouts/default.vue

@@ -543,6 +543,10 @@ export default {
       color: #bdc3c7 !important;
     }
   }
+  .el-breadcrumb__inner a,
+  .el-breadcrumb__inner.is-link {
+    font-weight: normal;
+  }
   padding-top: 60px;
   .el-card {
     border-radius: 5px;

web/pages/article/_id.vue

@@ -5,6 +5,15 @@
         <el-card shadow="never">
           <div slot="header">
             <h1>{{ article.title }}</h1>
+            <el-breadcrumb separator="/">
+              <el-breadcrumb-item>
+                <nuxt-link to="/"><i class="fa fa-home"></i> 首页</nuxt-link>
+              </el-breadcrumb-item>
+              <el-breadcrumb-item>
+                <nuxt-link to="/article">文章列表</nuxt-link>
+              </el-breadcrumb-item>
+              <el-breadcrumb-item>文章详情</el-breadcrumb-item>
+            </el-breadcrumb>
           </div>
           <div class="help-block text-muted article-info">
             <!-- 如果没有作者，则默认显示网站名称 -->
@@ -104,10 +113,26 @@ export default {
 </script>
 <style lang="scss">
 .page-article {
+  .el-breadcrumb {
+    margin-top: 15px;
+    .el-breadcrumb__inner a,
+    .el-breadcrumb__inner.is-link {
+      color: #666;
+    }
+    .el-breadcrumb__item:last-child .el-breadcrumb__inner {
+      color: #777;
+    }
+    .el-breadcrumb__inner a:hover,
+    .el-breadcrumb__inner.is-link:hover {
+      color: #409eff;
+    }
+  }
   .el-card__header {
     h1 {
-      font-size: 16px;
+      font-size: 24px;
+      font-weight: 400;
       margin: 0;
+      color: #111;
     }
   }
   [data-w-e-type='todo'] {

web/pages/article/index.vue

@@ -3,7 +3,14 @@
     <el-row :gutter="20">
       <el-col :span="18">
         <el-card shadow="never">
-          <div slot="header">文章列表</div>
+          <div slot="header">
+            <el-breadcrumb separator="/">
+              <el-breadcrumb-item>
+                <nuxt-link to="/"><i class="fa fa-home"></i> 首页</nuxt-link>
+              </el-breadcrumb-item>
+              <el-breadcrumb-item>文章列表</el-breadcrumb-item>
+            </el-breadcrumb>
+          </div>
           <article-list :articles="articles" />
           <el-pagination
             v-if="total > 0"
@@ -117,6 +124,9 @@ export default {
     }
   }
   .popular {
+    .el-card__header {
+      padding: 14px 20px;
+    }
     a {
       display: block;
       white-space: nowrap;
@@ -131,4 +141,15 @@ export default {
     }
   }
 }
+
+@media screen and (max-width: $mobile-width) {
+  .page-article-index {
+    .el-col {
+      width: 100%;
+    }
+    .popular {
+      margin-top: 15px;
+    }
+  }
+}
 </style>