Update index.vue

components/NoteAbstract/index.vue

@@ -4,24 +4,21 @@
       v-for="(item, index) in data"
       :key="index"
       v-if="((index + 1) > (currentPage - 1) * 10) && ((index + 1) <= currentPage * 10)"
-      class="abstract-item"
-    >
+      class="abstract-item">
       <div class="title">
-        <router-link class="abstract-item-title" :title="item.title" :to="item.path">{{item.title}}</router-link>
-        <div class="abstract-item-author-time">
-          <span class="abstract-item-time">{{item.frontmatter.time?item.frontmatter.time:""}}</span>
-          <span class="abstract-item-author">{{item.frontmatter.author?item.frontmatter.author:""}}</span>
-        </div>
+        <router-link
+          :to="item.path">{{item.title}}</router-link>
       </div>
       <div class="abstract" v-html="item.excerpt"></div>
       <hr>
       <div class="tags">
-        <span
+        <span 
           v-for="(subItem, subIndex) in item.frontmatter.tags"
           :key="subIndex"
           class="tag-item"
-          @click="goTags(subItem)"
-        >{{subItem}}</span>
+          @click="goTags(subItem)">
+          {{subItem}}
+        </span>
       </div>
     </div>
   </div>
@@ -29,51 +26,44 @@
 
 <script>
 export default {
-  props: ["data", "currentPage"],
+  props: ['data', 'currentPage'],
   methods: {
-    goTags(tag) {
-      const tagClick = this.$site.themeConfig.tagClick;
-      this.$emit("currentTag", tag);
+    goTags (tag) {
+      const tagClick = this.$site.themeConfig.tagClick
+      this.$emit('currentTag', tag)
       if (tagClick == true) {
         // 目前通过name跳转会报错
-        this.$router.push({ path: "/tags/" });
+        this.$router.push({path: '/tags/'})
       }
     }
   }
-};
+}
 </script>
 
 <style lang="stylus" scoped>
-@import '../../styles/config.styl';
+@import '../../styles/config.styl'
 
-.abstract-wrapper {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  align-content: stretch;
-  justify-content: space-between;
-  .abstract-item {
+.abstract-wrapper
+  width 100%
+  .abstract-item
     margin: 0 auto 20px;
     padding: 16px 20px;
-    width: 100%;
+    width 100%
     overflow: hidden;
     border-radius: 2px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
     box-sizing: border-box;
-    transition: all 0.3s;
-    background-color: #fff;
-
-    &:hover {
+    transition all .3s
+    background-color #fff
+    &:hover
       box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.2);
-    }
-
-    .title {
+    .title
       position: relative;
       font-size: 1.28rem;
       line-height: 36px;
-
-      :after {
-        content: '';
+      display: inline-block;
+      :after
+        content: "";
         position: absolute;
         width: 100%;
         height: 2px;
@@ -83,64 +73,24 @@ export default {
         visibility: hidden;
         -webkit-transform: scaleX(0);
         transform: scaleX(0);
-        transition: 0.3s ease-in-out;
-      }
-
-      :hover:after {
-        visibility: visible;
+        transition: .3s ease-in-out;
+      :hover:after
+        visibility visible
         -webkit-transform: scaleX(1);
         transform: scaleX(1);
-      }
-      .abstract-item-title {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        display: inline-block;
-      }
-      .abstract-item-author-time {
-        display: inline-block;
-        font-size: .5rem;
-        color: #999;
-        float: right;
-        width: 50%;
-        vertical-align: middle;
-        .abstract-item-time { 
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          display: inline-block;
-          width: 50%;
-          float: right;
-          text-align: right;
-          vertical-align: middle;
-        }
-        .abstract-item-author {
-          width: 50%;
-          float: right;
-          text-align: right;
-        }
-      }
-    }
-
-    .tags {
-      .tag-item {
-        transition: all 0.3s;
+    .tags
+      .tag-item
+        transition: all .3s
         vertical-align: middle;
         margin: 4px;
-        padding: 4px 8px;
+        padding 4px 8px
         display: inline-flex;
         cursor: pointer;
         border-radius: 2px;
         background: #fff;
         color: #999;
-        font-size: 13px;
-        box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
-
-        &:hover {
-          transform: scale(1.05);
-        }
-      }
-    }
-  }
-}
+        font-size: 13px; 
+        box-shadow 0 1px 5px 0 rgba(0,0,0,0.2)
+        &:hover 
+          transform scale(1.05)
 </style>