添加设置功能

pages/post/_id.vue

@@ -159,11 +159,19 @@
     .btnFooter.btnNext(:style='"color: " + (articels.next ? "#333" : "#ccc")')
       | 下一篇 {{ articels.next ? "(" + decodeTitle(articels.next.post_name) + ")" : "" }}  
       Icon(:icon='["fas", "chevron-right"]')
-  modal(name='setting')
-    div
-      | 此功能正在开发中，敬请期待。
-    .vue-module-buttons
-      button.vue-module-button(
+  modal.modal-setting(name='setting')
+    .vue-modal-content
+      Form(ref='form', :model='form', label-width='130px')
+        FormItem(label='手机号')
+          Input(v-model='form.phone')
+        FormItem(label='发送提醒到手机')
+          Switch(v-model='form.sendPhone')
+        FormItem(label='邮箱')
+          Input(v-model='form.phone')
+        FormItem(label='发送提醒到邮箱')
+          Switch(v-model='form.sendEmail')
+    .vue-modal-buttons
+      button.vue-modal-button(
         type='button',
         @click.stop='$modal.hide("setting")'
       )
@@ -173,8 +181,12 @@
 <script>
 import remark from 'remark'
 import strip from 'strip-markdown'
+import { Form, FormItem, Input, Switch } from 'element-ui'
 
 export default {
+  components: {
+    Form, FormItem, Input, Switch
+  },
   async asyncData ({ route, app, $axios, redirect }) {
     let draftStr = ''
     if (route.query && route.query.draft === 'true') {
@@ -262,7 +274,13 @@ export default {
           type: 'weibo',
           logo: 'https://cdn.wyr.me/imgs/Weibo-Login.png'
         }
-      ]
+      ],
+      form: {
+        phone: '',
+        sendPhone: true,
+        email: '',
+        sendEmail: true
+      }
     }
   },
   mounted () {
@@ -1280,15 +1298,24 @@ $logo-width = 64px
   .vditor--fullscreen
     z-index 9999
 
-  .vue-module-buttons
+  .modal-setting
+    z-index 99999
+
+  .vue-modal-content
+    padding 10px
+    box-sizing border-box
+
+  .vue-modal-buttons
     display flex
     flex 0 1 auto
     width 100%
     border-top 1px solid #eee
     box-sizing border-box
     text-align center
+    bottom 0
+    position absolute
 
-    .vue-module-button
+    .vue-modal-button
       font-size 12px !important
       background transparent
       padding 0
@@ -1303,6 +1330,7 @@ $logo-width = 64px
       outline none
       text-align center
       width 100%
+      bottom 0
 
   @media (max-width 768px)
     .postPage