留言模块添加数字

src/components/schedule_list/scheduleHome.vue

@@ -19,8 +19,8 @@
           v-for="item in result.list"
           :item="item"
           :key="item.id">
-          <span slot="opearate" class="obear-opearate-button" >
-            <el-button type="primary" size="mini" @click.prevent.stop="leaveMessageSch(item)"><i class="fa fa-commenting"></i>留言</el-button>
+          <span slot="opearate" class="obear-opearate-button">
+            <el-button type="primary" size="mini" @click.prevent.stop="leaveMessageSch(item)"><span class="badge">6</span><i class="fa fa-commenting"></i>留言</el-button>
             <el-button type="primary" size="mini"><i class="fa fa-calendar-check-o"></i>汇报</el-button>
             <el-button type="primary" size="mini" @click.prevent.stop="editSch(item)"><i class="fa fa-edit animated"></i>编辑</el-button>
             <el-button type="primary" size="mini" @click.prevent.stop="deleteSch(item.id)"><i class="fa fa-trash-o animated-hove"></i>删除</el-button>
@@ -205,11 +205,27 @@ export default {
 </script>
 
 <style scoped lang="scss">
-  @include c('opearate-button') {
-    > .el-button {
-      margin-right:0px;
-    }
+@include c('opearate-button') {
+  > .el-button {
+    margin-right:0px;
+  }
+  & .btn-primary .badge {
+    color: #333744;
+    background-color: #fff;
   }
-  .leaveMessage {
+  & .badge {
+    position: relative;
+    top: 0px;
+    left: -5px;
+    display: inline-block;
+    padding: 0px 5px;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 1;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: baseline;
+    border-radius: .25rem;
   }
+}
 </style>