like 与 admin name

components/Drawer.vue

@@ -10,7 +10,8 @@
     :class="{ show: show, hidden: !show }",
     @click.stop
   )
-    slot
+    .containerbox
+      slot
 </template>
 
 <script>
@@ -69,19 +70,28 @@ export default {
   background: rgba(0, 0, 0, 0.8)
 .container
   color: #333333
-  background: #ffffff
   position: absolute
   left: 0
-  top: 3rem
+  top: 0 //3rem
   right: 0
   bottom: 0
-  border-radius: 2rem 2rem 0 0
   overflow: auto
   scrollbar-width: none
   -ms-overflow-style: none
   //padding: 2rem 4rem
   //max-width: 1280px
   //margin: 0 auto
+  @media (max-width: 1280px)
+    //background: #ff1414
+    width: 980px
+    //top: 0
+    //border-radius: 0 0 0 0
+  .containerbox
+    color: #333333
+    background: #ffffff
+    border-radius: 2rem 2rem 0 0
+    overflow: hidden
+    margin-top: 3rem
 
 .container::-webkit-scrollbar
   display: none // Chrome Safari

components/PostList.vue

@@ -5,10 +5,14 @@
       NuxtLink(:to="`/user/${item.user._id}`")
         img.avatar(:src="item.user.avatar")
       .content
-        .title {{ item.user.name }}
+        .name(:class="{ adminname: item.user.gid === 1 }") {{ item.user.name }}
         .info
           span {{ rwdate(item.updatedAt) }}
           div(v-html="markdown(item.data)")
+      .options
+        i.fas.fa-eraser(v-if="account.gid === 1 || account.uid === item.uid")
+        i.fas.fa-marker(v-if="account.gid === 1 || account.uid === item.uid")
+        i.fas.fa-heart(:class="{ like: item.like }", @click="like(item._id)")
   .post-none(v-else) 没有评论~
 </template>
 
@@ -39,18 +43,42 @@
         overflow: hidden
       .content
         padding-left: 1rem
-        .title
+        .name
           font-size: 1.1rem
           font-weight: 600
+        .name.adminname
+          color: #ff5599
         .info
           span
             margin-right: .5rem
+      .options
+        margin-left: auto
+        i
+          cursor: pointer
+          padding: 0
+          margin: 0 .5rem
+          color: #888888
+          //display: none
+        i:hover
+          color: #cc1414
+        i.like
+          color: #cc1414
+          //display: inline
+    //li:hover
+    //  .options
+    //    i
+    //      display: inline
 </style>
 
 <script>
 import { marked } from "marked";
 export default {
   props: ["data"],
+  computed: {
+    account() {
+      return this.$store.state.account;
+    },
+  },
   methods: {
     rwdate(utc) {
       let t = new Date(utc);
@@ -59,6 +87,19 @@ export default {
     markdown(data) {
       return marked.parse(data);
     },
+    like(_id) {
+      let data = { attach: "post", aid: _id };
+      console.log(data);
+      this.$axios.post("/api/like", data).then((res) => {
+        if (res.status === 200) {
+          this.data.forEach((item) => {
+            if (item._id === _id) {
+              item.like = true;
+            }
+          });
+        }
+      });
+    },
   },
 };
 </script>

components/ThreadList.vue

@@ -38,6 +38,7 @@
         background: rgba(0, 0, 0, .05)
         border-radius: 50%
         overflow: hidden
+        margin-right: .5rem
       .content
         flex: 1
         .title