diff --git a/.eslintrc.js b/.eslintrc.js
index b6b5d34c..c101e75a 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -23,6 +23,7 @@ module.exports = {
     'generator-star-spacing': 0,
     // allow debugger during development
     'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
-    'space-before-function-paren': 0
+    'space-before-function-paren': 0,
+    'no-multiple-empty-lines': [2, { max: 2, maxEOF: 1 }]
   }
 }
diff --git a/src/App.vue b/src/App.vue
index fe45e6bf..c8f0615d 100755
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,27 +1,28 @@
 <template>
-    <div>
-        <keep-alive>
-            <router-view v-if="$route.meta.keepAlive"></router-view>
-        </keep-alive>
-        <router-view v-if="!$route.meta.keepAlive"></router-view>
-        <svg-icon></svg-icon>
-    </div>
+  <div>
+    <keep-alive>
+      <router-view v-if="$route.meta.keepAlive"></router-view>
+    </keep-alive>
+    <router-view v-if="!$route.meta.keepAlive"></router-view>
+    <svg-icon></svg-icon>
+  </div>
 </template>
 <script>
 export default {
   name: 'app',
   components: {
-    svgIcon: () =>
-            import(/* webpackChunkName: 'svgIcon' */ '@/components/common/svgIcon')
+    svgIcon: () => import(/* webpackChunkName: 'svgIcon' */ '@/components/common/svgIcon')
   }
 }
+
 </script>
 <style lang="less">
 .router-fade-enter-active, .router-fade-leave-active {
-    transition: opacity .3s;
+  transition: opacity .3s;
 }
 
 .router-fade-enter, .router-fade-leave-active {
-    opacity: 0;
+  opacity: 0;
 }
-</style>
\ No newline at end of file
+
+</style>
diff --git a/src/components/feed/commentInputTnstance.js b/src/components/feed/commentInputTnstance.js
new file mode 100644
index 00000000..d670c374
--- /dev/null
+++ b/src/components/feed/commentInputTnstance.js
@@ -0,0 +1,106 @@
+import Vue from 'vue'
+import CommentInput from './components/commentInput'
+
+const prefixCls = 'v-comment-input'
+
+CommentInput.newInstance = properties => {
+  const _props = properties || {}
+
+  const Instance = new Vue({
+    data: Object.assign({}, {
+      visible: true,
+      loading: false,
+      placeholder: '随便说说~'
+    }, _props),
+
+    render(h) {
+      let maskVNodes = []
+      maskVNodes.push(h('div', {
+        attrs: {
+          class: `${prefixCls}-mask`
+        },
+        on: {
+          'click': this.maskClick
+        }
+      }))
+
+      let bodyVNodes = []
+
+      bodyVNodes.push(h('div', {
+        attrs: {
+          class: `${prefixCls}-wrap`
+        }
+      }, [h(CommentInput, {
+        class: `${prefixCls}`,
+        props: {
+          loading: this.loading,
+          focus: this.visible,
+          placeholder: this.placeholder
+        },
+        on: {
+          'on-ok': this.ok
+        }
+      })]))
+
+      return h('div', {
+        directives: [{
+          name: 'show',
+          value: this.visible
+        }]
+      }, [maskVNodes, bodyVNodes])
+    },
+    computed: {},
+    methods: {
+      maskClick() {
+        this.visible = !this.visible
+      },
+      cancel() {
+        this.onCancel()
+        this.remove()
+      },
+      ok(txt) {
+        this.loading = true
+        this.onOk(txt, () => {
+          this.loading = false
+          this.cancel()
+        })
+      },
+      remove() {
+        this.$nextTick(() => {
+          this.destroy()
+        })
+      },
+      destroy() {
+        this.$destroy()
+        document.body.removeChild(this.$el)
+        this.onRemove()
+      },
+      onOk() {},
+      onCancel() {},
+      onRemove() {}
+    }
+  })
+
+  const Parent = Instance.$mount()
+  document.body.appendChild(Parent.$el)
+  const Input = Instance.$children[0]
+
+  return {
+    show(props) {
+      if ('onOk' in props) {
+        Parent.onOk = props.onOk
+      }
+      if ('placeholder' in props) {
+        Parent.placeholder = props.placeholder
+      }
+      Parent.onRemove = props.onRemove
+      Parent.visible = true
+    },
+    remove() {
+      Parent.remove()
+    },
+    components: Input
+  }
+}
+
+export default CommentInput
diff --git a/src/components/feed/components/commentInput.vue b/src/components/feed/components/commentInput.vue
index 696cd02d..ac5df346 100644
--- a/src/components/feed/components/commentInput.vue
+++ b/src/components/feed/components/commentInput.vue
@@ -1,13 +1,18 @@
 <template>
-    <div @click.stop='' class="comment-input">
-        <textarea :style='textareaStyles' :maxlength="maxlength" :placeholder="placeholder" ref='input' autofocus="true" :value="currentValue" @keyup.ctrl.enter="handleEnter" @input="handleInput" />
-        <div class="comment-input-append">
-            <template v-if='len > 200'>
-                <p>{{ len }}/{{maxlength}}</p>
-            </template>
-            <button :disabled="!(len > 0)" @click='handleDone'>发送</button>
-        </div>
+  <div @click.stop='' class="comment-input">
+    <textarea :style='textareaStyles' :maxlength="maxlength" :placeholder="placeholder" ref='input' autofocus="true" :value="currentValue" @keyup.ctrl.enter="handleEnter" @input="handleInput" />
+    <div class="comment-input-append">
+      <template v-if='len > 200'>
+        <p>{{ len }}/{{maxlength}}</p>
+      </template>
+      <button :disabled="disabled" @click='handleDone'>
+        <template v-if='loading'>
+          <v-icon type='base-loading'></v-icon>
+        </template>
+        <template v-else>发送</template>
+      </button>
     </div>
+  </div>
 </template>
 <script>
 import calcTextareaHeight from '../../../util/calcTextareaHeight'
@@ -15,6 +20,7 @@ export default {
   name: 'commentInput',
   props: {
     focus: Boolean,
+    loading: Boolean,
     placeholder: {
       type: String,
       default: '随便说说~',
@@ -23,146 +29,158 @@ export default {
     maxlength: {
       type: [Number, String],
       default: 255,
-      validator (val) {
+      validator(val) {
         return typeof (+val) === 'number'
       }
     }
   },
-  data () {
+  data() {
     return {
       textareaStyles: {},
       currentValue: ''
     }
   },
   computed: {
-    len () {
+    disabled() {
+      return !(this.len > 0 && !this.loading)
+    },
+    len() {
       return this.currentValue.length
     }
   },
   methods: {
-    handleDone () {
+    handleDone() {
       if (this.currentValue) {
         this.$emit('on-ok', this.currentValue)
       }
     },
-    handleInput (event) {
+    handleInput(event) {
       let value = event.target.value
       this.$emit('input', value)
       this.setCurrentValue(value)
       this.$emit('on-change', event)
     },
-    handleEnter () {
+    handleEnter() {
       if (this.currentValue) {
         this.$emit('on-ok', this.currentValue)
       }
     },
-    handleChange (event) {
+    handleChange(event) {
       this.$emit('on-input-change', event)
     },
-    setCurrentValue (value) {
+    setCurrentValue(value) {
       if (value === this.currentValue) return
       this.$nextTick(() => {
         this.resizeTextarea()
       })
       this.currentValue = value
     },
-    resizeTextarea () {
+    resizeTextarea() {
       this.textareaStyles = calcTextareaHeight(this.$refs.input)
     }
   },
   watch: {
-    focus (val) {
+    focus(val) {
       if (val) {
         this.$refs.input.focus()
       }
     }
   },
-  mounted () {
+  mounted() {
     this.$refs.input.focus()
   }
 }
+
 </script>
 <style lang='less'>
 .v-comment-input {
+  position: fixed;
+  overflow: hidden;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1000;
+  -webkit-overflow-scrolling: touch;
+  outline: 0;
+  &-mask {
     position: fixed;
-    overflow: hidden;
-    right: 0;
+    top: 0;
     bottom: 0;
     left: 0;
+    right: 0;
+    background-color: rgba(55, 55, 55, 0.3);
+    height: 100%;
     z-index: 1000;
-    -webkit-overflow-scrolling: touch;
-    outline: 0;
-    &-mask {
-        position: fixed;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        background-color: rgba(55, 55, 55, 0.3);
-        height: 100%;
-        z-index: 1000;
-    }
-    &-body {
-        position: relative;
-        background-color: #fff;
-        border: 0;
-        background-clip: padding-box;
-    }
+  }
+  &-body {
+    position: relative;
+    background-color: #fff;
+    border: 0;
+    background-clip: padding-box;
+  }
 }
 
 .comment-input {
-    width: 100%;
-    padding: 15px 20px;
-    min-height: 100px;
-    background-color: #fafafa;
-    display: flex;
-    align-items: flex-end;
-    >* {
-        flex: 0 0 auto
-    }
-    textarea {
-        flex: 1 1 auto;
-        height: 26*1.5+10px;
-        padding: 5px 0;
-        min-height: 26*1.5+10px;
-        max-height: 175px;
-        line-height: 1.5;
-        color: #000;
-        font-size: 26px;
-        background: none;
-        resize: none;
-        border-radius: 0;
-        border-bottom: 1px solid #59b6d7;
-        /*no*/
-        &:focus, &:active, &:hover {
-            outline: none !important;
-        }
-    }
-    p {
-        text-align: center;
-        color: #999;
-        margin-bottom: 15px;
-        font-size: 20px;
-        margin-left: 15px;
+  width: 100%;
+  padding: 15px 20px;
+  min-height: 100px;
+  background-color: #fafafa;
+  display: flex;
+  align-items: flex-end;
+  >* {
+    flex: 0 0 auto
+  }
+  textarea {
+    flex: 1 1 auto;
+    height: 26*1.5+10px;
+    padding: 5px 0;
+    min-height: 26*1.5+10px;
+    max-height: 175px;
+    line-height: 1.5;
+    color: #000;
+    font-size: 26px;
+    background: none;
+    resize: none;
+    border-radius: 0;
+    border-bottom: 1px solid #59b6d7;
+    /*no*/
+    &:focus,
+    &:active,
+    &:hover {
+      outline: none !important;
     }
-    button {
-        font-size: 24px;
-        margin-left: 15px;
-        width: 89px;
-        height: 50px;
-        color: #fff;
-        background-color: #59b6d7;
-        border-radius: 2px;
-        /*no*/
-        &[disabled] {
-            background-color: #ccc;
-        }
+  }
+  p {
+    text-align: center;
+    color: #999;
+    margin-bottom: 15px;
+    font-size: 20px;
+    margin-left: 15px;
+  }
+  button {
+    font-size: 24px;
+    margin-left: 15px;
+    width: 89px;
+    height: 50px;
+    color: #fff;
+    background-color: #59b6d7;
+    border-radius: 2px;
+    /*no*/
+    &[disabled] {
+      background-color: #ccc;
     }
-    &-append {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: flex-end;
+    .v-icon{
+      width: 28px;
+      height: 28px;
+      animation: rotate360 2s infinite linear;
     }
+  }
+  &-append {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-end;
+  }
 }
-</style>
\ No newline at end of file
+
+</style>
diff --git a/src/components/feed/components/feedCommentItem.vue b/src/components/feed/components/feedCommentItem.vue
index 3108763d..dc0150fe 100644
--- a/src/components/feed/components/feedCommentItem.vue
+++ b/src/components/feed/components/feedCommentItem.vue
@@ -1,12 +1,12 @@
 <template>
-    <div class="feed-comment-item" v-if='user.id' @click.stop='commentAction'>
-        <a @click.stop="to(`/user/${user.id}`)" class="user-name">{{ user.name }}</a>
-        <template v-if='replyUser'>
-            回复
-            <a @click.stop='to(`/user/${replyUser.id}`)' class="user-name">{{ replyUser.name }}</a>
-        </template>
-        <span class="content">{{ body }}</span>
-    </div>
+  <div class="feed-comment-item" v-if='user.id' @click.stop='commentAction'>
+    <a @click.stop="to(`/user/${user.id}`)" class="user-name">{{ user.name }}</a>
+    <template v-if='replyUser'>
+      回复
+      <a @click.stop='to(`/user/${replyUser.id}`)' class="user-name">{{ replyUser.name }}</a>
+    </template>
+    <span class="content">{{ body }}</span>
+  </div>
 </template>
 <script>
 export default {
@@ -17,48 +17,53 @@ export default {
     }
   },
   computed: {
-    user () {
-      const { user, user_id: userID } = this.comment
-      const usr = user || this.$store.getter.getUserById(userID)
-      /* eslint-diable camelcase */
-      if (usr.id === userID) {
+    user() {
+      const { user } = this.comment
+      if (user) {
         return user
       }
-      return {}
     },
-    replyUser () {
-      return this.comment.reply
+    replyUser() {
+      const { reply } = this.comment
+      return reply
     },
-    body () {
+    body() {
       let r = this.comment.body
       return r.length > 60 ? r.slice(0, 57) + '…' : r
     }
   },
   methods: {
-    to (path) {
+    to(path) {
       this.$router.push({ path })
     },
-    commentAction () {
+    commentAction() {
       this.$emit('action', this.user.id, this.user.name, this.comment.id)
     }
+  },
+  mounted() {
+    if (this.user.id) {
+      this.$store.commit('SAVE_USER', this.user)
+    }
   }
 }
+
 </script>
 <style lang='less'>
 .feed-comment-item {
-    color: #999;
-    font-size: 26px;
-    line-height: 1.4;
-    max-height: 26*1.4*3px;
-    overflow-y: hidden;
-    .user-name {
-        padding: 0 5px;
-        color: #333;
-        &:last-of-type:after {
-            content: ':';
-            padding-left: 5px;
-            color: #999;
-        }
+  color: #999;
+  font-size: 26px;
+  line-height: 1.4;
+  max-height: 26*1.4*3px;
+  overflow-y: hidden;
+  .user-name {
+    padding: 0 5px;
+    color: #333;
+    &:last-of-type:after {
+      content: ':';
+      padding-left: 5px;
+      color: #999;
     }
+  }
 }
-</style>
\ No newline at end of file
+
+</style>
diff --git a/src/components/feed/feedItem.js b/src/components/feed/feedItem.js
index 82b0152a..b3d43396 100644
--- a/src/components/feed/feedItem.js
+++ b/src/components/feed/feedItem.js
@@ -143,14 +143,6 @@ const props = {
   isPay: {
     type: Boolean,
     default: false
-  },
-  /**
-   * 动态标题
-   * @type {String}
-   */
-  title: {
-    type: String,
-    default: ''
   }
 }
 
@@ -238,11 +230,10 @@ const methods = {
    */
   showCommentInput (options = {}) {
     const that = this
-    const fId = this.feed.id
     const { reply_user } = options
     options = Object.assign({}, {
-      onOk (txt) {
-        that.commentFeed(txt, { fId, reply_user }, showCommentInput.remove)
+      onOk (txt, cb) {
+        that.commentFeed(txt, reply_user, cb)
       }
     }, options)
     showCommentInput.show(options)
diff --git a/src/components/feed/mixins/feed.mixin.js b/src/components/feed/mixins/feed.mixin.js
index f09b2048..e9062112 100644
--- a/src/components/feed/mixins/feed.mixin.js
+++ b/src/components/feed/mixins/feed.mixin.js
@@ -4,7 +4,7 @@ export default {
     text () {
       let r = this.feed.feed_content
       r = r
-        ? (r.length < 50
+        ? (r.length < 49
           ? r
           : (this.isPay
             ? `${r.slice(0, 40)}`
@@ -12,6 +12,7 @@ export default {
         : false
       return r
     },
+    title() { return '' },
     hasLike () {
       return this.feed.has_like
     },
@@ -42,7 +43,6 @@ export default {
         url,
         method
       }).then(({ data }) => {
-        console.log(data)
         this.feed.has_like = !this.feed.has_like
         this.feed.like_count = num
       }).catch(err => {
@@ -58,13 +58,14 @@ export default {
      * @param  {String} txt
      * @param  {[type]} option
      */
-    commentFeed (body, { fId, reply_user }, cb) {
+    commentFeed (body, replyUser, cb) {
       // POST /feeds/:feed/comments
-      this.$http.post(`/feeds/${fId}/comments`, {
+      this.$http.post(`/feeds/${this.feed.id}/comments`, {
         body,
-        reply_user
+        reply_user: replyUser
       }).then(({ data: { message, comment } = {} }) => {
         this.feed.comments.unshift(comment)
+        this.feed.feed_comment_count += 1
         cb && cb()
       }).catch(err => {
         const { response: { data = { message: '评论失败' } } = {} } = err
diff --git a/src/components/feed/mixins/groupFeed.mixin.js b/src/components/feed/mixins/groupFeed.mixin.js
index 85028f27..9491a93a 100644
--- a/src/components/feed/mixins/groupFeed.mixin.js
+++ b/src/components/feed/mixins/groupFeed.mixin.js
@@ -1,8 +1,9 @@
 export default {
   computed: {
     text() {
-      return '12345678gggg'
+      return this.feed.summary
     },
+    title() { return this.feed.title },
     hasLike() {
       return this.feed.liked
     },
@@ -28,15 +29,14 @@ export default {
       // DELETE /group-posts/:post/likes
       const method = this.hasLike ? 'delete' : 'post'
       const num = this.hasLike
-        ? this.feed.comments_count - 1
-        : this.feed.comments_count + 1
+        ? this.feed.likes_count - 1
+        : this.feed.likes_count + 1
       this.$http({
         method,
         url: `/plus-group/group-posts/${this.feed.id}/likes`
       }).then(({ data }) => {
-        console.log(data)
         this.feed.liked = !this.feed.liked
-        this.feed.comments_count = num
+        this.feed.likes_count = num
       }).catch(err => {
         console.log(err)
       })
@@ -50,13 +50,14 @@ export default {
      * @param  {String} txt
      * @param  {[type]} option
      */
-    commentFeed(body, { fId, reply_user }, cb) {
+    commentFeed(body, replyUser, cb) {
       // /group-posts/:post/comments
-      this.$http.post(`/plus-group/group-posts//${fId}/comments`, {
+      this.$http.post(`/plus-group/group-posts/${this.feed.id}/comments`, {
         body,
-        reply_user
-      }).then(({ data = {} }) => {
-        console.log(data)
+        reply_user: replyUser
+      }).then(({ data: { message, comment } = {} }) => {
+        this.feed.comments.unshift(comment)
+        this.feed.comments_count += 1
         cb && cb()
       }).catch(err => {
         const { response: { data = { message: '评论失败' } } = {} } = err
diff --git a/src/components/feed/showCommentInput.js b/src/components/feed/showCommentInput.js
index 21ecfea9..8ab81558 100644
--- a/src/components/feed/showCommentInput.js
+++ b/src/components/feed/showCommentInput.js
@@ -1,129 +1,27 @@
-import Vue from 'vue'
-import CommentInput from './components/commentInput'
-
-const prefixCls = 'v-comment-input'
-CommentInput.newInstance = properties => {
-  const _props = properties || {}
-
-  const Instance = new Vue({
-    data: Object.assign({}, {
-      mask: true,
-      visible: true,
-      placeholder: '随便说说~'
-    }, _props),
-
-    render (h) {
-      let maskVNodes = []
-      if (this.mask) {
-        maskVNodes.push(h('div', {
-          attrs: {
-            class: `${prefixCls}-mask`
-          },
-          on: {
-            'click': this.maskClick
-          }
-        }))
-      }
-
-      let bodyVNodes = []
-
-      bodyVNodes.push(h('div', {
-        attrs: {
-          class: `${prefixCls}-wrap`
-        }
-      }, [h('div', {
-        attrs: {
-          class: `${prefixCls}`
-        }
-      }, [h(CommentInput, {
-        props: {
-          focus: this.visible,
-          placeholder: this.placeholder
-        },
-        on: {
-          'on-ok': this.ok
-        }
-      })])]))
-
-      return h('div', {
-        directives: [{
-          name: 'show',
-          value: this.visible
-        }]
-      }, [maskVNodes, bodyVNodes])
-    },
-    computed: {},
-    methods: {
-      maskClick () {
-        this.visible = !this.visible
-      },
-      cancel () {
-        this.$children[0].visible = false
-        this.onCancel()
-        this.remove()
-      },
-      ok (txt) {
-        this.onOk(txt)
-      },
-      remove () {
-        setTimeout(() => {
-          this.destroy()
-        }, 300)
-      },
-      destroy () {
-        this.$destroy()
-        document.body.removeChild(this.$el)
-        this.onRemove()
-      },
-      onOk () {},
-      onCancel () {},
-      onRemove () {}
-    }
-  })
-
-  const component = Instance.$mount()
-  document.body.appendChild(component.$el)
-  const Input = Instance.$children[0]
-
-  return {
-    show (options = {}) {
-      if ('onOk' in options) {
-        Input.$parent.onOk = options.onOk
-      }
-      if ('placeholder' in options) {
-        Input.$parent.placeholder = options.placeholder
-      }
-      Input.$parent.visible = true
-    },
-    remove () {
-      Input.visible = false
-      Input.$parent.remove()
-    },
-    comment: Input
-  }
-}
+import CommentInput from './commentInputTnstance'
 
 let inputInstance
 
-function getInputInstance ({ placeholder } = {}) {
-  inputInstance = inputInstance || CommentInput.newInstance({
-    placeholder
-  })
+function getInputInstance() {
+  inputInstance = inputInstance || CommentInput.newInstance()
   return inputInstance
 }
 
-function showInput (option) {
+function showInput(options) {
   let instance = getInputInstance()
-  instance.show(option)
+  options.onRemove = () => {
+    inputInstance = null
+  }
+  instance.show(options)
 }
 
 export default {
   name: 'CommentInput',
-  show (option = {}) {
-    option.placeholder = option.placeholder || '随便说说~'
-    return showInput(option)
+  show(options = {}) {
+    options.placeholder = options.placeholder
+    return showInput(options)
   },
-  remove () {
+  remove() {
     if (!inputInstance) {
       return false
     }
diff --git a/src/components/postMenu/postMenu.less b/src/components/postMenu/postMenu.less
index 6d539638..ade1fd0a 100644
--- a/src/components/postMenu/postMenu.less
+++ b/src/components/postMenu/postMenu.less
@@ -1,59 +1,86 @@
 @post-menu-prefixCls: v-post-menu;
 
 .@{post-menu-prefixCls} {
-    &-wrap {
-        position: fixed;
-        overflow: hidden;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        z-index: 1010;
-        -webkit-overflow-scrolling: touch;
-        outline: 0;
-    }
+  &-wrap {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1010;
+    -webkit-overflow-scrolling: touch;
+    outline: 0;
+  }
+
+  &-mask {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: rgba(255, 255, 255, .95);
+    height: 100%;
+    z-index: 1000;
+  }
 
-    &-mask {
-        position: fixed;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        background-color: rgba(255, 255, 255, .95);
-        height: 100%;
-        z-index: 1000;
+  &-list {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  &-item {
+    width: 130px;
+    margin: 0 0 65px 90px;
+    text-align: center;
+    &-icon {
+      width: 130px;
+      height: 130px;
+      border-radius: 50%;
+      overflow: hidden;
+      background-color: #fff;
+      margin-bottom: 20px;
+      transition: .1s ease;
+    }
+    &-label {
+      font-size: 28px;
     }
+  }
 
-    &-foot {
-        width: 100%;
-        height: 100px;
-        position: relative;
-        text-align: center;
-        background-color: #fff;
-        border-top: 1px solid #ededed;
-        /*no*/
-        box-shadow: 0 10px 10px 0 #ededed;
-        /*no*/
+  &-foot {
+    width: 100%;
+    height: 100px;
+    position: relative;
+    text-align: center;
+    background-color: #fff;
+    border-top: 1px solid #ededed;
+    /*no*/
+    box-shadow: 0 10px 10px 0 #ededed;
+    /*no*/
+  }
+
+  &-close {
+    span {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      margin: auto;
+      display: block;
+      width: 56px;
+      height: 2px;
+      border-radius: 2px;
+      /*no*/
+      transition: .3s ease;
+      background-color: #59b6d7;
     }
-    &-close {
-        span {
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            margin: auto;
-            display: block;
-            width: 56px;
-            height: 2px;
-            border-radius: 2px;
-            /*no*/
-            background-color: #59b6d7;
-            &:nth-of-type(1) {
-                transform: rotate(45deg);
-            }
-            &:nth-of-type(2) {
-                transform: rotate(-45deg);
-            }
+    &.open {
+      span {
+        &:nth-of-type(1) {
+          transform: rotate(45deg);
+        }
+        &:nth-of-type(2) {
+          transform: rotate(-45deg);
         }
+      }
     }
-}
\ No newline at end of file
+  }
+}
diff --git a/src/components/postMenu/postMenu.vue b/src/components/postMenu/postMenu.vue
index dbd7026c..03d2e879 100644
--- a/src/components/postMenu/postMenu.vue
+++ b/src/components/postMenu/postMenu.vue
@@ -1,23 +1,30 @@
 <template>
-<div :class="`${prefixCls}`">
-  <div :class="`${prefixCls}-ad`"></div>
-  <div :class="`${prefixCls}-menu-list`">
-    <slot></slot>
-  </div>
-  <div :class="`${prefixCls}-foot`">
-    <div :class="`${prefixCls}-close`" @click='close'>
-      <span></span>
-      <span></span>
+  <transition name='router-fadeInTop' mode="out-in">
+    <div :class="`${prefixCls}`">
+      <div :class="`${prefixCls}-ad`"></div>
+      <div :class="`${prefixCls}-list`">
+        <slot></slot>
+      </div>
+      <div :class="`${prefixCls}-foot`">
+        <div :class="[`${prefixCls}-close`, { open }]" @click='close'>
+          <span></span>
+          <span></span>
+        </div>
+      </div>
     </div>
-  </div>
-</div>
+  </transition>
 </template>
 <script>
 const prefixCls = 'v-post-menu'
 export default {
   name: 'postMenu',
-  props: {},
-  data () {
+  props: {
+    open: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
     return {
       prefixCls
     }
@@ -25,10 +32,11 @@ export default {
   computed: {},
   watch: {},
   methods: {
-    close () {
+    close() {
       this.$emit('on-close')
     }
   }
 }
+
 </script>
-<style lang="less" src='./postMenu.less'></style>
\ No newline at end of file
+<style lang="less" src='./postMenu.less'></style>
diff --git a/src/components/postMenu/postMenuInstance.js b/src/components/postMenu/postMenuInstance.js
index e673475c..15f5116a 100644
--- a/src/components/postMenu/postMenuInstance.js
+++ b/src/components/postMenu/postMenuInstance.js
@@ -1,82 +1,61 @@
+import Vue from 'vue'
+import router from '@/routers'
 import PostMenu from './postMenu'
-
-const
-  menus = [{
-    label: '文字',
-    icon: 'wenzi',
-    cls: 'wenzi',
-    path: '/post/wenzi'
-  }, {
-    label: '图片',
-    icon: 'pic',
-    cls: 'pic',
-    path: '/post/pic'
-  }, {
-    label: '投稿',
-    icon: 'tougao',
-    cls: 'tougao',
-    path: '/post/release'
-  }, {
-    label: '签到',
-    icon: 'check-in',
-    cls: 'check-in',
-    path: '/post/checkin'
-  }, {
-    label: '提问',
-    icon: 'check-in',
-    cls: 'check-in',
-    path: '/post/checkin'
-  }, {
-    label: '发帖',
-    icon: 'check-in',
-    cls: 'check-in',
-    path: '/post/checkin'
-  }],
-  prefixCls = 'v-post-menu'
+const prefixCls = 'v-post-menu'
 
 PostMenu.newInstance = properties => {
   const _props = properties || {}
 
   const Instance = new Vue({
     data: Object.assign({}, {
-      mask: true,
       visible: false
-    }, { menus }, _props),
+    }, _props),
 
-    render (h) {
+    render(h) {
       const menusVNodes = []
-      menus.forEach(menu => {
+      this.menus.forEach(menu => {
         menusVNodes.push(h('div', {
           class: `${prefixCls}-item _${menu.cls}`
-        }, [h('div')]))
+        }, [h('img', {
+          class: `${prefixCls}-item-icon`,
+          attrs: {
+            src: `${menu.src}`
+          },
+          on: {
+            click: () => {
+              router.push(`${menu.path}`)
+              this.$nextTick(() => {
+                this.close()
+              })
+            }
+          }
+        }), h('div', {
+          class: `${prefixCls}-item-label`
+        }, menu.label)]))
       })
 
       const maskVNodes = []
-      if (this.mask) {
-        maskVNodes.push(h('div', {
-          attrs: {
-            class: `${prefixCls}-mask`
-          }
-        }))
-      }
+      maskVNodes.push(h('div', {
+        attrs: {
+          class: `${prefixCls}-mask`
+        }
+      }))
 
       const bodyVNodes = []
-
       bodyVNodes.push(h('div', {
         attrs: {
           class: `${prefixCls}-wrap`
         }
       }, [h(PostMenu, {
+        props: {
+          open: this.visible
+        },
         on: {
           'on-close': this.close
         }
-      })]))
+      }, [menusVNodes])]))
 
       return h('div', {
-        directives: [{
-          name: 'show',
-          value: this.visible
-        }],
         attrs: {
           class: `${prefixCls}-modal`
         }
@@ -84,23 +63,33 @@ PostMenu.newInstance = properties => {
     },
     computed: {},
     methods: {
-      close () {
+      close() {
         this.visible = false
         this.onClose()
-      }
-    },
-    onClose () {}
+      },
+      onClose() {
+        this.$destroy()
+        document.body.removeChild(this.$el)
+        this.onRemove()
+      },
+      onRemove() {}
+    }
   })
 
-  const component = Instance.$mount()
-  document.body.appendChild(component.$el)
+  const Parent = Instance.$mount()
+  document.body.appendChild(Parent.$el)
   const Menu = Instance.$children[0]
 
   return {
-    show () {
-      Menu.$parent.visible = true
+    show(props) {
+      Parent.onRemove = props.onRemove
+      Parent.visible = true
+    },
+    remove() {
+      Parent.visible = false
+      Parent.remove()
     },
-    comment: Menu
+    component: Menu
   }
 }
 
diff --git a/src/components/postMenu/showPostMenu.js b/src/components/postMenu/showPostMenu.js
index 399fd52d..53cfb4c9 100644
--- a/src/components/postMenu/showPostMenu.js
+++ b/src/components/postMenu/showPostMenu.js
@@ -1,96 +1,72 @@
-import Vue from 'vue'
-import PostMenu from './postMenu'
+import PostMenu from './postMenuInstance'
+import WENZI from '@/images/ico_word@3x.png'
+import PIC from '@/images/ico_potoablum@3x.png'
+import TOUGAO from '@/images/ico_contribute@3x.png'
+import CHECKIN from '@/images/ico_attendance@3x.png'
+import QUESTION from '@/images/ico_question@3x.png'
+import FATIE from '@/images/ico_fatie@3x.png'
+let menuInstance
+const
+  menus = [{
+    label: '文字',
+    src: WENZI,
+    cls: 'wenzi',
+    path: '/post/wenzi'
+  }, {
+    label: '图片',
+    src: PIC,
+    cls: 'pic',
+    path: '/post/pic'
+  }, {
+    label: '投稿',
+    src: TOUGAO,
+    cls: 'tougao',
+    path: '/post/release'
+  }, {
+    label: '签到',
+    src: CHECKIN,
+    cls: 'check-in',
+    path: '/post/checkin'
+  }, {
+    label: '提问',
+    src: QUESTION,
+    cls: 'check-in',
+    path: '/post/question'
+  }, {
+    label: '发帖',
+    src: FATIE,
+    cls: 'check-in',
+    path: '/post/fatie'
+  }]
 
-// const defaultMenuList = {
-
-// }
-
-const prefixCls = 'v-post-menu'
-
-PostMenu.newInstance = properties => {
-  const _props = properties || {}
-  /* eslint-disable no-new */
-  const Instance = new Vue({
-    data: Object.assign({}, {
-      mask: true,
-      visible: false
-    }, _props),
-
-    render (h) {
-      const maskVNodes = []
-      if (this.mask) {
-        maskVNodes.push(h('div', {
-          attrs: {
-            class: `${prefixCls}-mask`
-          }
-        }))
-      }
-
-      const bodyVNodes = []
-
-      bodyVNodes.push(h('div', {
-        attrs: {
-          class: `${prefixCls}-wrap`
-        }
-      }, [h(PostMenu, {
-        on: {
-          'on-close': this.close
-        }
-      })]))
-
-      return h('div', {
-        directives: [{
-          name: 'show',
-          value: this.visible
-        }],
-        attrs: {
-          class: `${prefixCls}-modal`
-        }
-      }, [maskVNodes, bodyVNodes])
-    },
-    computed: {},
-    methods: {
-      close () {
-        this.visible = false
-        this.onClose()
-      }
-    }
+function getInputInstance() {
+  menuInstance = menuInstance || PostMenu.newInstance({
+    menus
   })
-
-  const component = Instance.$mount()
-  document.body.appendChild(component.$el)
-  const Menu = Instance.$children[0]
-
-  return {
-    show () {
-      Menu.$parent.visible = true
-    },
-    comment: Menu
-  }
-}
-
-let inputInstance
-
-function getInputInstance () {
-  inputInstance = inputInstance || PostMenu.newInstance({})
-  return inputInstance
+  return menuInstance
 }
 
-function showInput (option) {
+function showInput(options) {
   const instance = getInputInstance()
-  instance.show(option)
+  options.onRemove = () => {
+    menuInstance = null
+  }
+  instance.show(options)
 }
 
 export default {
   name: 'PostMenu',
-  show (option = {}) {
-    return showInput(option)
+  show(options = {}) {
+    return showInput(options)
   },
-  remove () {
-    if (!inputInstance) {
+  remove() {
+    if (!menuInstance) {
       return false
     }
     const instance = getInputInstance()
     instance.remove()
+  },
+  config({ menus = [] }) {
+
   }
 }
diff --git a/src/images/ico_attendance@3x.png b/src/images/ico_attendance@3x.png
new file mode 100644
index 00000000..7b65ea42
Binary files /dev/null and b/src/images/ico_attendance@3x.png differ
diff --git a/src/images/ico_contribute@3x.png b/src/images/ico_contribute@3x.png
new file mode 100644
index 00000000..e6fc093b
Binary files /dev/null and b/src/images/ico_contribute@3x.png differ
diff --git a/src/images/ico_fatie@3x.png b/src/images/ico_fatie@3x.png
new file mode 100644
index 00000000..67ec8a56
Binary files /dev/null and b/src/images/ico_fatie@3x.png differ
diff --git a/src/images/ico_potoablum@3x.png b/src/images/ico_potoablum@3x.png
new file mode 100644
index 00000000..ccfe0e61
Binary files /dev/null and b/src/images/ico_potoablum@3x.png differ
diff --git a/src/images/ico_question@3x.png b/src/images/ico_question@3x.png
new file mode 100644
index 00000000..29431e59
Binary files /dev/null and b/src/images/ico_question@3x.png differ
diff --git a/src/images/ico_word@3x.png b/src/images/ico_word@3x.png
new file mode 100644
index 00000000..8884e2a3
Binary files /dev/null and b/src/images/ico_word@3x.png differ
diff --git a/src/images/ico_zhibo@3x.png b/src/images/ico_zhibo@3x.png
new file mode 100644
index 00000000..eb896cc2
Binary files /dev/null and b/src/images/ico_zhibo@3x.png differ
diff --git a/src/page/common/postGroupFeed/children/chooseGroup.vue b/src/page/common/postGroupFeed/children/chooseGroup.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/src/page/common/postGroupFeed/index.vue b/src/page/common/postGroupFeed/index.vue
new file mode 100644
index 00000000..968b68cd
--- /dev/null
+++ b/src/page/common/postGroupFeed/index.vue
@@ -0,0 +1,124 @@
+<template>
+  <div :class='prefixCls'>
+    <head-top :go-back='true' title='发帖' :append='true'>
+      <button slot='prepend' :class="`${prefixCls}-btn`" @click='goBack'>取消</button>
+      <button slot='append' :class="`${prefixCls}-btn`" :disabled="disabled" @click='postFeed'>发布</button>
+    </head-top>
+    <div></div>
+    <div :class="`${prefixCls}-content`">
+      <template v-if='!!groupID'>
+        <div :class="`${prefixCls}-group`">
+
+        </div>
+      </template>
+      <div :class="`${prefixCls}-title`">
+        <input type="text" v-model='title' placeholder='输入标题, 20字以内' maxlength="20">
+      </div>
+      <div :class="`${prefixCls}-body`">
+        <textarea placeholder="输入要说的话, 图文结合更精彩哦" v-model='body' ref='body'></textarea>
+      </div>
+    </div>
+    <router-view></router-view>
+  </div>
+</template>
+<script>
+import calcTextareaHeight from '@/util/calcTextareaHeight'
+import HeadTop from '@/components/HeadTop'
+const prefixCls = 'post--group-feed'
+export default {
+  name: 'postGroupFeed',
+  components: {
+    HeadTop
+  },
+  data() {
+    return {
+      groupID: this.$route.params.groupID,
+      prefixCls,
+      title: '',
+      body: ''
+    }
+  },
+  watch: {
+    body(val) {
+      this.$nextTick(() => {
+        this.resizeTextarea(this.$refs.body)
+      })
+    }
+  },
+  computed: {
+    disabled() {
+      return !(this.title.length > 0 && this.body.length > 0)
+    }
+  },
+  methods: {
+    goBack() {
+      this.$router.go(-1)
+    },
+    resizeTextarea(el) {
+      el.style.height = calcTextareaHeight(el).height
+    },
+    postFeed() {
+      const params = {
+        title: this.title,
+        body: this.body
+      }
+      // /groups/:group/posts
+      this.$http.post(`/plus-group/groups/${this.$router}`, {
+        params
+      }).then(({ data = [] }) => {
+        console.log(data)
+      })
+    }
+  }
+}
+
+</script>
+<style lang='less'>
+@post-group-feed-prefix: post--group-feed;
+.@{post-group-feed-prefix} {
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  &-btn {
+    font-size: 32px;
+    background-color: #fff;
+    color: #59b6d7;
+    &[disabled] {
+      color: #ccc
+    }
+  }
+  &-content {
+    padding: 0 30px;
+    height: calc(~'100vh -' 90px);
+    background-color: #fff;
+  }
+
+  &-title {
+    display: flex;
+    align-items: conter;
+    height: 100px;
+    border-bottom: 1px solid #dedede;
+    /*no*/
+    input {
+      font-size: 30px;
+      padding: 0 20px;
+      height: 100%;
+      width: 100%;
+    }
+  }
+
+  &-body {
+    max-height: calc(~'100% -' 100px);
+    overflow-y: scroll;
+    textarea {
+      font-size: 30px;
+      padding: 20px;
+      width: 100%;
+      min-height: 400px;
+      max-height: 100%;
+      resize: none;
+    }
+  }
+}
+
+</style>
diff --git a/src/page/common/postWenzi.vue b/src/page/common/postWenzi.vue
new file mode 100644
index 00000000..524067ed
--- /dev/null
+++ b/src/page/common/postWenzi.vue
@@ -0,0 +1,15 @@
+<template>
+  <div></div>
+</template>
+<script>
+export default {
+  name: 'postWenzi',
+  data() {
+    return {
+
+    }
+  }
+}
+
+</script>
+<style lang='less'></style>
diff --git a/src/page/common/userHome.vue b/src/page/common/userHome.vue
index e8f960ab..c0acc331 100644
--- a/src/page/common/userHome.vue
+++ b/src/page/common/userHome.vue
@@ -1,95 +1,120 @@
 <template>
-    <div class="user-home">
-        <head-top :go-back='goBack' :append='true' :title='user.name' :transparent='top_tranparent'>
-            <div class="user-home-share" slot='append'>
-                <v-icon type='base-share'></v-icon>
-            </div>
-        </head-top>
-        <!-- user info  -->
-        <div class="user-home-info">
-            <div class="user-home-info-box">
-                <div class="user-home-bgcover" :style='bg_cover'>
-                    <v-avatar sex='user.sex' :badeg='verified.icon' :src='user.avatar' class='user-home-avatar' size='large'></v-avatar>
-                    <h2 class='user-home-name'>{{ user.name }}</h2>
-                    <div class="user-home-number">
-                        <p>粉丝数
-                            <span>{{ followers_count }}</span>
-                        </p>
-                        <p>关注
-                            <span>{{ followings_count }}</span>
-                        </p>
-                    </div>
-                </div>
-            </div>
-            <div class="user-home-info-box txt">
-                <p class="user-home-verified" v-if='verified'>认证:
-                    <span>{{ verified.description }}</span>
-                </p>
-                <p class="user-home-location" v-if='location'>地址:
-                    <span>{{ location }}</span>
-                </p>
-                <p class="user-home-bio" v-if='bio'>简介:
-                    <span>{{ bio }}</span>
-                </p>
-                <div class="user-home-tag">
-                    <div class="user-home-tag-item" v-for='tag in tags' v-if='tag.id' :key='`user-tag-${tag.id}`'>
-                        {{ tag.name }}
-                    </div>
-                </div>
-            </div>
+  <div class="user-home">
+    <head-top :go-back='goBack' :append='true' :title='user.name' :transparent='topTranparent'>
+      <div class="user-home-share" slot='append'>
+        <v-icon type='base-share'></v-icon>
+      </div>
+    </head-top>
+    <!-- user info  -->
+    <div class="user-home-info">
+      <div class="user-home-info-box">
+        <div class="user-home-bgcover" :style='bg_cover'>
+          <v-avatar sex='user.sex' :badeg='verified.icon' :src='user.avatar' class='user-home-avatar' size='large'></v-avatar>
+          <h2 class='user-home-name'>{{ user.name }}</h2>
+          <div class="user-home-number">
+            <p>粉丝数
+              <span>{{ followers_count }}</span>
+            </p>
+            <p>关注
+              <span>{{ followings_count }}</span>
+            </p>
+          </div>
         </div>
-        <!-- user info END -->
-        <!-- user feeds -->
-        <div class="user-home-feeds">
-            <div class="user-home-feeds-head">
-                <span class="user-home-feeds-length">{{ feeds_length }}个动态</span>
-            </div>
-            <div class="user-home-feeds-list">
-                <feed-item v-for='feed in feeds' :no_user='true' v-if='feed.id' :key='`user-feed-${feed.id}`' :feed='feed'></feed-item>
+      </div>
+      <div class="user-home-info-box txt">
+        <p class="user-home-verified" v-if='verified'>认证:
+          <span>{{ verified.description }}</span>
+        </p>
+        <p class="user-home-location" v-if='location'>地址:
+          <span>{{ location }}</span>
+        </p>
+        <p class="user-home-bio" v-if='bio'>简介:
+          <span>{{ bio }}</span>
+        </p>
+        <div class="user-home-tag">
+          <div class="user-home-tag-item" v-for='tag in tags' v-if='tag.id' :key='`user-tag-${tag.id}`'>
+            {{ tag.name }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- user info END -->
+    <!-- user feeds -->
+    <div class="user-home-feeds">
+      <div class="user-home-feeds-label">
+        <span>{{ feeds_length }}个动态</span>
+        <div class="user-home-feeds-filter-wrap">
+          <div class="user-home-feeds-filter" @click='showFilter'>
+            <span>{{ filterType.label }}</span>
+            <v-icon type='base-filter-list'></v-icon>
+          </div>
+          <div class="user-home-feeds-filter-select" v-show='filterShow' @click='showFilter'>
+            <div class="user-home-feeds-filter-option" :class='{active: option.type === filterType.type}' v-for='option in filterTypes' @click='selectFilterType(option)'>
+              <span>{{ option.label }}</span>
+              <v-icon type='base-checked'></v-icon>
             </div>
+          </div>
         </div>
-        <!-- user feeds END -->
-        <!-- user action -->
-        <!-- user action -->
+      </div>
+      <div class="user-home-feeds-list">
+        <feed-item :isPay='!!(feed.paid_node)' v-for='feed in feeds' :no_user='true' v-if='feed.id' :key='`user-feed-${feed.id}`' :feed='feed'></feed-item>
+      </div>
     </div>
+    <!-- user feeds END -->
+    <!-- user action -->
+    <!-- user action -->
+  </div>
 </template>
 <script>
 import { formatNum } from '@/util/'
 import HeadTop from '@/components/HeadTop'
 import { FeedItem } from '@/components/feed/feedItem'
+const filterTypes = [{
+  type: '',
+  label: '全部动态'
+}, {
+  type: 'paid',
+  label: '付费动态'
+}, {
+  type: 'pinned',
+  label: '置顶动态'
+}]
 export default {
   name: 'userHome',
   components: {
     HeadTop,
     FeedItem
   },
-  data () {
+  data() {
     return {
       user: {
-        ...this.$store.getters.getUserById(this.$route.params.Uid),
         tags: [],
-        feeds: []
+        feeds: [],
+        ...this.$store.getters.getUserById(this.$route.params.Uid)
       },
-      scrollTop: 0
+      filterTypes,
+      scrollTop: 0,
+      filterShow: false,
+      filterType: filterTypes[0]
     }
   },
   computed: {
-    Uid () {
+    Uid() {
       return this.$route.params.Uid
     },
-    followers_count () {
+    followers_count() {
       return formatNum((this.user.extra || {}).followers_count || 0)
     },
-    followings_count () {
+    followings_count() {
       return formatNum((this.user.extra || {}).followings_count || 0)
     },
-    bg_cover () {
+    bg_cover() {
       const bg = this.user.bg
       return bg ? {
         'background-image': `url(${bg})`
       } : {}
     },
-    verified () {
+    verified() {
       const verified = this.user.verified
       const { description, icon } = verified || {}
       return verified ? {
@@ -97,33 +122,38 @@ export default {
         icon
       } : false
     },
-    location () {
+    location() {
       return this.user.location || false
     },
-    bio () {
+    bio() {
       return this.user.bio || '这家伙很懒. 什么也没留下'
     },
-    feeds_length () {
+    feeds_length() {
       return (this.user.extra || {}).feeds_count || 0
     },
-    tags () {
+    tags() {
       return this.user.tags
     },
-    feeds () {
+    feeds() {
       return this.user.feeds
     },
 
-    top_tranparent () {
+    topTranparent() {
       return !(this.scrollTop > 110)
     }
   },
+  watch: {
+    filterType() {
+      this.getUserFeeds()
+    }
+  },
   methods: {
     /**
-         * 触发一个刷新 同步用户数据
-         *     同时更新 vuex 中的数据
-         * @author jsonleex <jsonlseex@163.com>
-         */
-    updateUserData (cb) {
+     * 触发一个刷新 同步用户数据
+     *     同时更新 vuex 中的数据
+     * @author jsonleex <jsonlseex@163.com>
+     */
+    updateUserData(cb) {
       this.$http.get(`/users/${this.Uid}`).then(({ data = {} }) => {
         this.user = Object.assign({}, this.user, data)
         cb && cb()
@@ -133,135 +163,198 @@ export default {
       })
     },
 
-    getUserTags (cb) {
+    getUserTags(cb) {
       this.$http.get(`/users/${this.Uid}/tags`).then(({ data = [] }) => {
         this.user.tags = [...data]
         cb && cb()
       })
     },
 
-    getUserFeeds (cb) {
+    getUserFeeds(cb) {
+      const params = { type: 'users', user: this.Uid }
+      if (this.filterType.type) {
+        params.screen = this.filterType.type
+      }
       this.$http.get('/feeds', {
-        params: { type: 'users', user: this.Uid }
+        params
       }).then(({ data = [] } = {}) => {
         this.user = Object.assign({}, this.user, { feeds: data['feeds'] })
         cb && cb()
       })
     },
 
-    init () {
+    init() {
       this.updateUserData(this.getUserFeeds(this.getUserTags(() => {
         this.$store.commit('SAVE_USER', this.user)
       })))
     },
 
-    goBack () {
+    goBack() {
       this.$router.go(-1)
+    },
+
+    selectFilterType(type) {
+      this.filterType = type
+    },
+
+    showFilter() {
+      this.filterShow = !this.filterShow
     }
   },
-
-  activated () {
+  activated() {
     if (this.user.id !== this.Uid) {
       this.init()
+      // this.$route.meta.toTop = true
     }
   },
-
-  mounted () {
+  mounted() {
     this.init()
     this.$el.addEventListener('scroll', (e) => {
       this.scrollTop = this.$el.scrollTop
     })
   }
 }
+
 </script>
 <style lang='less'>
 @user-home-prefix: user-home;
 .@{user-home-prefix} {
-    height: 100vh;
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
-    &-info {
-        padding-top: 0;
+  height: 100vh;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  &-info {
+    padding-top: 0 !important;
+  }
+  &-info-box.txt {
+    background-color: #fff;
+    padding: 30px 20px;
+    p {
+      font-size: 26px;
+      color: #999;
+      margin-bottom: 18px;
+      &.@{user-home-prefix}-verified {
+        color: #ff9400;
+      }
+      span {
+        margin-left: 5px;
+        /*no*/
+      }
     }
-    &-info-box.txt {
-        background-color: #fff;
-        padding: 30px 20px;
-        p {
-            font-size: 26px;
-            color: #999;
-            margin-bottom: 18px;
-            &.@{user-home-prefix}-verified {
-                color: #ff9400;
-            }
-            span {
-                margin-left: 5px;
-                /*no*/
-            }
-        }
+  }
+  &-bgcover {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-end;
+    height: 375px;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-image: url('../../images/user_home_default_cover.png');
+  }
+
+  &-avatar {
+    margin-bottom: 15px;
+  }
+
+  &-name {
+    font-size: 32px;
+    color: #fff;
+    margin-bottom: 20px;
+  }
+
+  &-number {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 30px;
+    font-size: 20px;
+    color: #fff;
+    p+p {
+      margin-left: 50px;
     }
-    &-bgcover {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: flex-end;
-        height: 375px;
-        background-size: cover;
-        background-position: center;
-        background-repeat: no-repeat;
-        background-image: url('../../images/user_home_default_cover.png');
+    span {
+      margin-left: 12px;
     }
-
-    &-avatar {
-        margin-bottom: 15px;
+  }
+  &-tag {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    margin-left: -10px;
+    margin-bottom: -10px;
+    &-item {
+      padding: 0 15px;
+      height: 36px;
+      line-height: 36px;
+      font-size: 20px;
+      color: #666;
+      text-align: center;
+      border-radius: 18px;
+      background-color: rgba(102, 102, 102, .1);
+      margin-bottom: 10px;
+      margin-left: 10px;
     }
-
-    &-name {
-        font-size: 32px;
-        color: #fff;
-        margin-bottom: 20px;
+  }
+  &-feeds {
+    &-label {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 20px;
+      height: 70px;
+      background-color: #f4f5f5;
+      font-size: 26px;
+      color: #999;
     }
 
-    &-number {
+    &-filter {
+      &-wrap {
+        height: 100%;
+        position: relative;
+        z-index: 10;
+        line-height: 70px;
+      }
+      &-select {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        background-color: #fff;
+        transform: translateY(100%);
+        border-radius: 8px;
+        box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
+      }
+      &-option {
         display: flex;
         align-items: center;
-        justify-content: center;
-        margin-bottom: 30px;
-        font-size: 20px;
-        color: #fff;
-        p+p {
-            margin-left: 50px;
+        justify-content: space-between;
+        padding: 0 20px;
+        width: 200px;
+        height: 150/2px;
+        &+& {
+          border-top: 1px solid #ededed;
         }
-        span {
-            margin-left: 12px;
+        .v-icon {
+          visibility: hidden;
+          width: 20px;
+          height: 20px;
         }
-    }
-    &-tag {
-        width: 100%;
-        display: flex;
-        flex-wrap: wrap;
-        margin-left: -10px;
-        margin-bottom: -10px;
-        &-item {
-            padding: 0 15px;
-            height: 36px;
-            line-height: 36px;
-            font-size: 20px;
-            color: #666;
-            text-align: center;
-            border-radius: 18px;
-            background-color: rgba(102, 102, 102, .1);
-            margin-bottom: 10px;
-            margin-left: 10px;
-        }
-    }
-    &-feeds {
-        &-head {
-            padding: 0 20px;
-            height: 75px;
-            line-height: 73px;
-            background-color: #f4f5f5;
-            font-size: 26px;
+        &.active {
+          color: #666;
+          .v-icon {
+            visibility: visible;
+          }
         }
+      }
+      display: flex;
+      align-items: center;
+      .v-icon {
+        margin-left: 15px;
+        width: 36px;
+        height: 30px;
+      }
     }
+  }
 }
-</style>
\ No newline at end of file
+
+</style>
diff --git a/src/page/group/children/addGroup.vue b/src/page/group/children/addGroup.vue
index 2ce2a148..5269ea51 100644
--- a/src/page/group/children/addGroup.vue
+++ b/src/page/group/children/addGroup.vue
@@ -1,95 +1,95 @@
 <template>
-    <div>
-        <head-top :go-back='cancel' title='创建圈子' append='true'>
-            <button slot='append' class="add_group_btn" :disabled="disabled" @click='addGroup'>创建</button>
-        </head-top>
-        <div class="form-group">
-            <!-- 头像 -->
-            <div class="form-row header-upload" @click='chooseImg'>
-                <input type="file" ref='uploadFile' @change='getImg'>
-                <div class="group-header">
-                    <img :src="header" v-if='header'>
-                </div>
-                <span>上传圈子头像</span>
-                <v-icon type='base-arrow-r'></v-icon>
-            </div>
+  <div>
+    <head-top :go-back='cancel' title='创建圈子' append='true'>
+      <button slot='append' class="add_group_btn" :disabled="disabled" @click='addGroup'>创建</button>
+    </head-top>
+    <div class="form-group">
+      <!-- 头像 -->
+      <div class="form-row header-upload" @click='chooseImg'>
+        <input type="file" ref='uploadFile' @change='getImg'>
+        <div class="group-header">
+          <img :src="header" v-if='header'>
         </div>
-        <div class="form-group">
-            <div class="form-row">
-                <label for="name">圈名</label>
-                <input class="input" type="text" v-model='name' placeholder="输入圈名, 20字以内" maxlength="20" id="name">
-            </div>
-            <div class="form-row">
-                <label>分类</label>
-                <div :class="['input', 'ccc', { c333: category.id}]" @click='toChoose("group/add/category")'>
-                    {{ (category || {}).name || '选择圈子类别' }}
-                    <v-icon type='base-arrow-r'></v-icon>
-                </div>
-            </div>
-            <div class="form-row">
-                <label>标签</label>
-                <div :class="['input', 'ccc', { c333: tagsLen > 0}]" @click='toChoose("tags?redirect=-1")'>
-                    <template v-if='tagsLen > 0'>
-                        <div class="tags-list">
-                            <div class="tags-item" v-for='tag in tags' v-if='tag.id' :key='`group-tag-${tag.id}`'>{{ tag.name }}</div>
-                        </div>
-                    </template>
-                    <template v-else>
-                        最多可选5个标签
-                    </template>
-                    <v-icon type='base-arrow-r'></v-icon>
-                </div>
-            </div>
-            <!-- # todo -->
-            <div class="form-row">
-                <label>位置</label>
-                <div :class="['input', 'ccc', { c333: location_txt}]" @click='toChoose("location")'>
-                    {{ location_txt || '设置圈子地理位置' }}
-                    <v-icon type='base-arrow-r'></v-icon>
-                </div>
-            </div>
-            <div class="form-row">
-                <label for="summary">简介</label>
-                <div class="input auto">
-                    <textarea :style='textareaStyles' ref='summary' v-model='summary' placeholder="编辑简介" maxlength="50" id="summary"></textarea>
-                </div>
+        <span>上传圈子头像</span>
+        <v-icon type='base-arrow-r'></v-icon>
+      </div>
+    </div>
+    <div class="form-group">
+      <div class="form-row">
+        <label for="name">圈名</label>
+        <input class="input" type="text" v-model='name' placeholder="输入圈名, 20字以内" maxlength="20" id="name">
+      </div>
+      <div class="form-row">
+        <label>分类</label>
+        <div :class="['input', 'ccc', { c333: category.id}]" @click='toChoose("group/add/category")'>
+          {{ (category || {}).name || '选择圈子类别' }}
+          <v-icon type='base-arrow-r'></v-icon>
+        </div>
+      </div>
+      <div class="form-row">
+        <label>标签</label>
+        <div :class="['input', 'ccc', { c333: tagsLen > 0}]" @click='toChoose("tags?redirect=-1")'>
+          <template v-if='tagsLen > 0'>
+            <div class="tags-list">
+              <div class="tags-item" v-for='tag in tags' v-if='tag.id' :key='`group-tag-${tag.id}`'>{{ tag.name }}</div>
             </div>
+          </template>
+          <template v-else>
+            最多可选5个标签
+          </template>
+          <v-icon type='base-arrow-r'></v-icon>
         </div>
-        <!-- switch -->
-        <div class="switch-group">
-            <v-switch v-model='allow_feed' type='checkbox'>帖子同步至动态</v-switch>
-            <v-switch v-model='private' type='checkbox'>设置为封闭圈子</v-switch>
-            <template v-if='private'>
-                <v-switch v-model='paid' :data-value='true' type='radio'>
-                    收费入圈
-                    <template v-if='paid'>
-                        <div slot='append'>
-                            <!-- 移动端 数字键盘 -->
-                            <!-- pattern="[0-9]*" -->
-                            <input type="number" placeholder="设置入圈收费金额" v-model='money' pattern="[0-9]*">金币
-                        </div>
-                    </template>
-                </v-switch>
-                <v-switch v-model='paid' :data-value='false' type='radio'>免费入圈</v-switch>
-            </template>
-            <p class="tips">注: 用户需经圈管理员同意方可加入封闭圈子</p>
+      </div>
+      <!-- # todo -->
+      <div class="form-row">
+        <label>位置</label>
+        <div :class="['input', 'ccc', { c333: location_txt}]" @click='toChoose("location")'>
+          {{ location_txt || '设置圈子地理位置' }}
+          <v-icon type='base-arrow-r'></v-icon>
         </div>
-        <!-- switch -->
-        <!-- notice -->
-        <div class="form-group notice">
-            <div class="form-row">
-                <label for="notice">公告</label>
-                <div class="input auto">
-                    <textarea :style='textareaStyles' ref='notice' v-model='notice' placeholder="选填" maxlength="50" id="notice"></textarea>
-                </div>
+      </div>
+      <div class="form-row">
+        <label for="summary">简介</label>
+        <div class="input auto">
+          <textarea :style='textareaStyles' ref='summary' v-model='summary' placeholder="编辑简介" maxlength="50" id="summary"></textarea>
+        </div>
+      </div>
+    </div>
+    <!-- switch -->
+    <div class="switch-group">
+      <v-switch v-model='allow_feed' type='checkbox'>帖子同步至动态</v-switch>
+      <v-switch v-model='private' type='checkbox'>设置为封闭圈子</v-switch>
+      <template v-if='private'>
+        <v-switch v-model='paid' :data-value='true' type='radio'>
+          收费入圈
+          <template v-if='paid'>
+            <div slot='append'>
+              <!-- 移动端 数字键盘 -->
+              <!-- pattern="[0-9]*" -->
+              <input type="number" placeholder="设置入圈收费金额" v-model='money' pattern="[0-9]*">金币
             </div>
+          </template>
+        </v-switch>
+        <v-switch v-model='paid' :data-value='false' type='radio'>免费入圈</v-switch>
+      </template>
+      <p class="tips">注: 用户需经圈管理员同意方可加入封闭圈子</p>
+    </div>
+    <!-- switch -->
+    <!-- notice -->
+    <div class="form-group notice">
+      <div class="form-row">
+        <label for="notice">公告</label>
+        <div class="input auto">
+          <textarea :style='textareaStyles' ref='notice' v-model='notice' placeholder="选填" maxlength="50" id="notice"></textarea>
         </div>
-        <p class="tips" style="padding-bottom: 30px">点击创建即代表同意《ThinkSNS+圈子创建协议》</p>
-        <!-- notice END -->
-        <transition name="router-slid" mode='out-in'>
-            <router-view></router-view>
-        </transition>
+      </div>
     </div>
+    <p class="tips" style="padding-bottom: 30px">点击创建即代表同意《ThinkSNS+圈子创建协议》</p>
+    <!-- notice END -->
+    <transition name="router-slid" mode='out-in'>
+      <router-view></router-view>
+    </transition>
+  </div>
 </template>
 <script>
 import { getFileUrl } from '@/util/'
@@ -101,7 +101,7 @@ export default {
   components: {
     HeadTop
   },
-  data () {
+  data() {
     return {
       name: '', // 圈名
       // tags: [], //  标签
@@ -119,49 +119,49 @@ export default {
     }
   },
   computed: {
-    disabled () {
+    disabled() {
       return [this.name, this.header, this.tags].map(v => v.length > 0).includes(false)
     },
-    tagsLen () {
+    tagsLen() {
       return this.tags.length
     },
-    tags () {
+    tags() {
       return this.$store.state.CUR_SELECTED_TAGS
     },
-    cur_location () {
+    cur_location() {
       return this.$store.state.CUR_GROUP_LOCATION
     },
-    location_txt () {
+    location_txt() {
       return this.cur_location.label || ''
     },
-    mode () {
+    mode() {
       return this.paid ? 'paid' : (this.private ? 'private' : 'public')
     }
   },
   watch: {
-    money (val) {
+    money(val) {
       if (val < 0) {
         this.money = 0
       }
     },
-    private (val) {
+    private(val) {
       if (!val) {
         this.paid = val
       }
     },
-    summary (val) {
+    summary(val) {
       this.$nextTick(() => {
         this.resizeTextarea(this.$refs.summary)
       })
     },
-    notice (val) {
+    notice(val) {
       this.$nextTick(() => {
         this.resizeTextarea(this.$refs.notice)
       })
     }
   },
   methods: {
-    init () {
+    init() {
       this.name = ''
       this.header = ''
       this.avatar = {}
@@ -174,18 +174,18 @@ export default {
       this.$store.state.CUR_GROUP_LOCATION = {}
     },
     /**
-         * 取消 并 返回上一页
-         *     @author jsonleex <jsonlseex@163.com>
-         */
-    cancel () {
+     * 取消 并 返回上一页
+     *     @author jsonleex <jsonlseex@163.com>
+     */
+    cancel() {
       this.init()
       this.$router.go(-1)
     },
     /**
-         * 创建圈子
-         *     @author jsonleex <jsonlseex@163.com>
-         */
-    addGroup () {
+     * 创建圈子
+     *     @author jsonleex <jsonlseex@163.com>
+     */
+    addGroup() {
       // POST /categories/:category/groups
       const category = this.category.id
       if (!category) {
@@ -238,28 +238,28 @@ export default {
     },
 
     /**
-         * 选择图片
-         *     @author jsonleex <jsonlseex@163.com>
-         */
-    chooseImg () {
+     * 选择图片
+     *     @author jsonleex <jsonlseex@163.com>
+     */
+    chooseImg() {
       this.$refs.uploadFile.click()
     },
 
     /**
-         * 裁剪图片
-         *     @author jsonleex <jsonlseex@163.com>
-         */
-    getImg (e) {
+     * 裁剪图片
+     *     @author jsonleex <jsonlseex@163.com>
+     */
+    getImg(e) {
       const vm = this
       let files = e.target.files || e.dataTransfer.files
       if (!files.length) return
       this.$ImgCropper.show({
         url: getFileUrl(files[0]),
         round: false,
-        onCancel () {
+        onCancel() {
           vm.$refs.uploadFile.value = null
         },
-        onOk (canvas) {
+        onOk(canvas) {
           vm.avatar = canvas
           vm.header = canvas.toDataURL()
           vm.$refs.uploadFile.value = null
@@ -268,25 +268,25 @@ export default {
     },
 
     /**
-         * 更新 文本域 的样式
-         *     @author jsonleex <jsonlseex@163.com>
-         */
-    resizeTextarea (el) {
+     * 更新 文本域 的样式
+     *     @author jsonleex <jsonlseex@163.com>
+     */
+    resizeTextarea(el) {
       el.style.height = calcTextareaHeight(el).height
       el.style.paddingBottom = '.3rem'
     },
     /**
-         * 进入选择页面
-         *     @author jsonleex <jsonlseex@163.com>
-         */
-    toChoose (type) {
+     * 进入选择页面
+     *     @author jsonleex <jsonlseex@163.com>
+     */
+    toChoose(type) {
       if (!type) {
         return
       }
       this.$router.push(`/${type.toLocaleLowerCase()}`)
     }
   },
-  beforeRouteEnter (to, from, next) {
+  beforeRouteEnter(to, from, next) {
     // todo
     const { category } = from.params
     next(vm => {
@@ -297,168 +297,172 @@ export default {
     })
   }
 }
+
 </script>
 <style lang='less'>
 .add_group_btn {
-    width: 100%;
-    height: 100%;
-    font-size: 32px;
-    background: none;
-    color: #59b6d7;
-    &[disabled] {
-        color: #ccc;
-    }
+  width: 100%;
+  height: 100%;
+  font-size: 32px;
+  background: none;
+  color: #59b6d7;
+  &[disabled] {
+    color: #ccc;
+  }
 }
 
 .form-group {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    background-color: #fff;
-    font-size: 30px;
-    color: #999;
-    border-bottom: 1px solid #dedede;
-    /*no*/
-    &.notice {
-        margin-top: 30px;
-    }
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  background-color: #fff;
+  font-size: 30px;
+  color: #999;
+  border-bottom: 1px solid #dedede;
+  /*no*/
+  &.notice {
+    margin-top: 30px;
+  }
 }
 
 .form-row {
-    display: flex;
-    padding: 0 20px;
-    line-height: 1;
-    width: 100%;
-    font-size: 30px;
-    justify-content: space-between;
-    align-items: center;
-    &.header-upload {
-        input[type='file'] {
-            display: none!important;
-        }
-        span {
-            flex: 1 1 auto;
-            color: #333;
-        }
+  display: flex;
+  padding: 0 20px;
+  line-height: 1;
+  width: 100%;
+  font-size: 30px;
+  justify-content: space-between;
+  align-items: center;
+  &.header-upload {
+    input[type='file'] {
+      display: none!important;
     }
-    label {
-        color: #999;
-        width: 126px;
-        flex: 0 0 auto;
+    span {
+      flex: 1 1 auto;
+      color: #333;
     }
-    .input {
-        flex: 1 1 auto;
-        min-height: 100px;
-        line-height: 100px;
-        color: #333;
-        font-size: 30px;
-        border-bottom: 1px solid #ededed;
-        /*no*/
-        &[type='text'] {
-            line-height: normal;
-        }
-        &.ccc {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            color: #ccc;
-            &.c333 {
-                color: #333;
-            }
-        }
-        &.auto {
-            overflow: hidden;
-            height: auto;
-            min-height: 100px;
-            border: 0;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-        }
+  }
+  label {
+    color: #999;
+    width: 126px;
+    flex: 0 0 auto;
+  }
+  .input {
+    flex: 1 1 auto;
+    min-height: 100px;
+    line-height: 100px;
+    color: #333;
+    font-size: 30px;
+    border-bottom: 1px solid #ededed;
+    /*no*/
+    &[type='text'] {
+      line-height: normal;
     }
-
-    textarea {
-        outline: 0;
-        border: 0;
-        width: 100%;
-        height: auto;
-        min-height: 100px;
-        resize: none;
-        font-size: 30px;
-        vertical-align: middle;
-        padding-top: 30px;
+    &.ccc {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      color: #ccc;
+      &.c333 {
         color: #333;
+      }
     }
-
-     ::placeholder {
-        color: #ccc;
+    &.auto {
+      overflow: hidden;
+      height: auto;
+      min-height: 100px;
+      border: 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
     }
+  }
 
-    .v-icon {
-        width: 32px;
-        height: 32px;
-        color: #bfbfbf;
-        flex: 0 0 auto;
-    }
+  textarea {
+    outline: 0;
+    border: 0;
+    width: 100%;
+    height: auto;
+    min-height: 100px;
+    resize: none;
+    font-size: 30px;
+    vertical-align: middle;
+    padding-top: 30px;
+    color: #333;
+  }
+
+   ::placeholder {
+    color: #ccc;
+  }
+
+  .v-icon {
+    width: 32px;
+    height: 32px;
+    color: #bfbfbf;
+    flex: 0 0 auto;
+  }
 }
 
 .group-header {
+  display: block;
+  width: 90px;
+  height: 90px;
+  background-color: #ededed;
+  margin: 35px 25px 35px 0;
+  img {
     display: block;
-    width: 90px;
-    height: 90px;
-    background-color: #ededed;
-    margin: 35px 25px 35px 0;
-    img {
-        display: block;
-        width: 100%;
-    }
+    width: 100%;
+  }
 }
 
-.router-slid-enter-active, .router-slid-leave-active {
-    transition: all .4s;
+.router-slid-enter-active,
+.router-slid-leave-active {
+  transition: all .4s;
 }
 
-.router-slid-enter, .router-slid-leave-active {
-    transform: translate3d(100%, 0, 0);
+.router-slid-enter,
+.router-slid-leave-active {
+  transform: translate3d(100%, 0, 0);
 }
 
 .switch-group {
-    margin-top: 30px;
+  margin-top: 30px;
 }
 
 .full-page {
-    overflow: auto;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 1010;
-    background-color: #fff;
+  overflow: auto;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1010;
+  background-color: #fff;
 }
 
 .tags-list {
-    height: 100%;
-    padding: 25px 0;
-    display: flex;
-    flex-wrap: wrap;
-    .tags-item {
-        margin-left: 10px;
-        margin-bottom: 10px;
-        padding: 0 20px;
-        height: 48px;
-        line-height: 46px;
-        background-color: #f4f5f5;
-        color: #666;
-        border-radius: 3px;
-        /*no*/
-    }
+  height: 100%;
+  padding: 25px 0;
+  display: flex;
+  flex-wrap: wrap;
+  .tags-item {
+    margin-left: 10px;
+    margin-bottom: 10px;
+    padding: 0 20px;
+    height: 48px;
+    line-height: 46px;
+    background-color: #f4f5f5;
+    color: #666;
+    border-radius: 3px;
+    /*no*/
+  }
 }
 
 .tips {
-    padding-left: 20px;
-    margin-top: 15px;
-    font-size: 20px;
-    color: #b3b3b3;
+  padding-left: 20px;
+  margin-top: 15px;
+  font-size: 20px;
+  color: #b3b3b3;
 }
-</style>
\ No newline at end of file
+
+</style>
diff --git a/src/page/group/children/groupAll.less b/src/page/group/children/groupAll.less
index 7f75eb63..f24b7530 100644
--- a/src/page/group/children/groupAll.less
+++ b/src/page/group/children/groupAll.less
@@ -1,96 +1,96 @@
 @group-all-prefix: group-all;
 
 .@{group-all-prefix} {
-    // 分类
-    &-category {
-        position: fixed;
-        top: 90px;
-        width: 100%;
-        height: 90px;
-        padding: 0 40px 0 20px;
-        line-height: 90px;
-        border-bottom: 1px solid #ededed;
-        /*no*/
-        background-color: #fff;
-        &.open {
-            height: calc(~'100vh -' 90px);
-            padding: 0 20px;
-            line-height: normal;
-            .@{group-all-prefix}-category {
+  // 分类
+  &-category {
+    position: fixed;
+    top: 90px;
+    width: 100%;
+    height: 90px;
+    padding: 0 40px 0 20px;
+    line-height: 90px;
+    border-bottom: 1px solid #ededed;
+    /*no*/
+    background-color: #fff;
+    &.open {
+      height: calc(~'100vh -' 90px);
+      padding: 0 20px;
+      line-height: normal;
+      .@{group-all-prefix}-category {
 
-                &-list {
-                    padding-top: 30px;
-                    height: auto;
-                    flex-wrap: wrap;
-                    &-item {
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                        white-space: nowrap;
-                        flex: none;
-                        height: 60px;
-                        width: calc(~'25% - 30px');
-                        margin: 0 30px 30px 0;
-                        padding: 0 10px;
-                        line-height: 60px;
-                        border-radius: 4px;
-                        /*no*/
-                        background: #f4f5f5;
-                        font-size: 28px;
-                        text-align: center;
-                        &.active {
-                            background-color: #d9eef6;
-                        }
-                    }
-                }
-                &-switch {
-                    display: none;
-                }
-            }
-        }
         &-list {
-            width: 100%;
-            height: 100%;
-            overflow-x: scroll;
-            -webkit-overflow-scrolling: touch;
-            display: flex;
-            flex-wrap: nowrap;
-            &-item {
-                flex: none;
-                font-size: 26px;
-                color: #999;
-                &+& {
-                    margin-left: 50px;
-                }
-                &.active {
-                    color: #333;
-                }
-                &:last-child {
-                    padding-right: 40px;
-                }
+          padding-top: 30px;
+          height: auto;
+          flex-wrap: wrap;
+          &-item {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            flex: none;
+            height: 60px;
+            width: calc(~'25% - 30px');
+            margin: 0 30px 30px 0;
+            padding: 0 10px;
+            line-height: 60px;
+            border-radius: 4px;
+            /*no*/
+            background: #f4f5f5;
+            font-size: 28px;
+            text-align: center;
+            &.active {
+              background-color: #d9eef6;
             }
+          }
         }
         &-switch {
-            width: 80px;
-            height: 80px;
-            background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 0, white 40%, white);
-            position: absolute;
-            top: 50%;
-            right: 0;
-            transform: translateY(-50%);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            .v-icon {
-                color: #333;
-                transform: rotate(90deg);
-                width: 24px;
-                height: 24px;
-            }
+          display: none;
         }
+      }
     }
-
-    &-content{
-        padding-top: 180px;
-        min-height: 100vh;
+    &-list {
+      width: 100%;
+      height: 100%;
+      overflow-x: scroll;
+      -webkit-overflow-scrolling: touch;
+      display: flex;
+      flex-wrap: nowrap;
+      &-item {
+        flex: none;
+        font-size: 26px;
+        color: #999;
+        &+& {
+          margin-left: 50px;
+        }
+        &.active {
+          color: #333;
+        }
+        &:last-child {
+          padding-right: 40px;
+        }
+      }
     }
-}
\ No newline at end of file
+    &-switch {
+      width: 80px;
+      height: 80px;
+      background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 0, white 40%, white);
+      position: absolute;
+      top: 50%;
+      right: 0;
+      transform: translateY(-50%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .v-icon {
+        color: #333;
+        transform: rotate(90deg);
+        width: 24px;
+        height: 24px;
+      }
+    }
+  }
+
+  &-content {
+    padding-top: 90px;
+    min-height: 100vh;
+  }
+}
diff --git a/src/page/group/children/groupAll.vue b/src/page/group/children/groupAll.vue
index 5229f9ac..4d827596 100644
--- a/src/page/group/children/groupAll.vue
+++ b/src/page/group/children/groupAll.vue
@@ -6,6 +6,7 @@
                 <v-icon type='group-add' @click.native='createdGroup'></v-icon>
             </div>
         </head-top>
+        <div></div>
         <div class="group-all-category" :class='{"open": switchStatus}'>
             <div class="group-all-category-list">
                 <div :class="['group-all-category-list-item', { active: cur_cate === 0}]" id='group-categorys-0' @click='setlectCurCate(0)'>全部</div>
diff --git a/src/page/group/children/groupDetail.less b/src/page/group/children/groupDetail.less
index b9a302f7..e69db69f 100644
--- a/src/page/group/children/groupDetail.less
+++ b/src/page/group/children/groupDetail.less
@@ -1,302 +1,306 @@
 @group-detail-prefix: group-detail;
 .@{group-detail-prefix} {
-    &-info {
-        padding-top: 0;
+  height: 100vh;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  &-info {
+    padding-top: 0 !important;
+  }
+  &-bgcover {
+    overflow: hidden;
+    height: 320px;
+    position: relative;
+    .bg-blur {
+      width: 100%;
+      height: 100%;
+      background-repeat: no-repeat;
+      background-position: top center;
+      background-size: cover;
+      filter: blur(15px);
+      transform: scale(1.1);
     }
-    &-bgcover {
-        overflow: hidden;
-        height: 320px;
-        position: relative;
-        .bg-blur {
-            width: 100%;
-            height: 100%;
-            background-repeat: no-repeat;
-            background-position: top center;
-            background-size: cover;
-            filter: blur(15px);
-            transform: scale(1.1);
-        }
+  }
+  &-base {
+    padding: 30px 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 24px;
+    color: #f4f5f5;
+    position: absolute;
+    bottom: 0;
+  }
+  &-avatar {
+    flex: none;
+    width: 134px;
+    height: 134px;
+    border: 2px solid #fff;
+    /*no*/
+    background-color: #ccc;
+    img {
+      overflow: hidden;
+      width: 100%;
+      object-fit: cover;
     }
-    &-base {
-        padding: 30px 20px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        font-size: 24px;
-        color: #f4f5f5;
-        position: absolute;
-        bottom: 0;
-    }
-    &-avatar {
-        flex: none;
-        width: 134px;
-        height: 134px;
-        border: 2px solid #fff;
-        /*no*/
-        background-color: #ccc;
-        img {
-            overflow: hidden;
-            width: 100%;
-            object-fit: cover;
-        }
+  }
+  &-txt {
+    flex: 1 1 auto;
+    margin: 0 20px;
+    text-align: left;
+    h3 {
+      font-size: 32px;
+      margin: 0 0 30px;
     }
-    &-txt {
-        flex: 1 1 auto;
-        margin: 0 20px;
-        text-align: left;
-        h3 {
-            font-size: 32px;
-            margin: 0 0 30px;
-        }
-        p {
-            display: flex;
-            flex-wrap: nowrap;
-            max-width: 390px;
-            span {
-                &:first-child {
-                    flex: none;
-                    margin-left: 0;
-                }
-                max-width: 100%;
-                margin-left: 15px;
-            }
+    p {
+      display: flex;
+      flex-wrap: nowrap;
+      max-width: 390px;
+      span {
+        &:first-child {
+          flex: none;
+          margin-left: 0;
         }
+        max-width: 100%;
+        margin-left: 15px;
+      }
     }
-    &-action {
-        flex: none;
-        &-btn {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            white-space: nowrap;
-            font-size: 26px;
-            width: 126px;
-            height: 50px;
-            line-height: 46px;
-            border: 1px solid #fff;
-            /*no*/
-            border-radius: 8px;
-            color: #fff;
-            .v-icon {
-                width: 20px;
-                height: 20px;
-                margin-right: 5px;
-            }
-        }
+  }
+  &-action {
+    flex: none;
+    &-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      white-space: nowrap;
+      font-size: 26px;
+      width: 126px;
+      height: 50px;
+      line-height: 46px;
+      border: 1px solid #fff;
+      /*no*/
+      border-radius: 8px;
+      color: #fff;
+      .v-icon {
+        width: 20px;
+        height: 20px;
+        margin-right: 5px;
+      }
     }
+  }
 
-    &-other {
-        padding: 30px 0 30px 20px;
-        width: 100%;
-        background-color: #fff;
-        font-size: 28px;
-        color: #333;
-        &-row {
-            display: flex;
-            align-items: center;
-            &+& {
-                margin-top: 30px;
-            }
-
-            &.flex-start {
-                align-items: flex-start;
-            }
-        }
+  &-other {
+    padding: 30px 0 30px 20px;
+    width: 100%;
+    background-color: #fff;
+    font-size: 28px;
+    color: #333;
+    &-row {
+      display: flex;
+      align-items: center;
+      &+& {
+        margin-top: 30px;
+      }
 
-        &-label {
-            flex: none;
-            color: #999;
-        }
-        &-content {
-            flex: 1 1 auto;
-            padding-right: 20px;
-            height: 100%;
-            min-height: 80px;
-            line-height: 80px;
-            margin-left: 25px;
-            border-bottom: 1px solid #ededed;
-            /*no*/
-            &.noborder {
-                border: none;
-            }
-            .contactFounder {
-                display: block;
-                float: right;
-                width: 90px;
-                height: 40px;
-                line-height: 40px;
-                text-align: center;
-                margin-top: 20px;
-                border-radius: 20px;
-                font-size: 24px;
-                color: #fff;
-                background-color: #fca308;
-            }
-        }
-        .summary {
-            line-height: normal;
-            display: flex;
-            align-items: center;
-            a {
-                color: #59b6d7;
-            }
-        }
+      &.flex-start {
+        align-items: flex-start;
+      }
     }
 
-    &-feeds {
-        &-label {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 0 20px;
-            height: 70px;
-            background-color: #f4f5f5;
-            font-size: 26px;
-            color: #999;
-        }
-
-        &-filter {
-            &-wrap {
-                height: 100%;
-                position: relative;
-                line-height: 70px;
-            }
-            &-select {
-                position: absolute;
-                bottom: 0;
-                right: 0;
-                background-color: #fff;
-                transform: translateY(100%);
-                border-radius: 8px;
-                box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
-            }
-            &-option {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                padding: 0 20px;
-                width: 200px;
-                height: 150/2px;
-                &+& {
-                    border-top: 1px solid #ededed;
-                }
-                .v-icon {
-                    visibility: hidden;
-                    width: 20px;
-                    height: 20px;
-                }
-                &.active {
-                    color: #666;
-                    .v-icon {
-                        visibility: visible;
-                    }
-                }
-            }
-            display: flex;
-            align-items: center;
-            .v-icon {
-                margin-left: 15px;
-                width: 36px;
-                height: 30px;
-            }
-        }
+    &-label {
+      flex: none;
+      color: #999;
     }
-
-    &-post-btn {
-        display: flex;
-        position: fixed;
-        bottom: 50px;
-        left: 50%;
-        align-items: center;
-        justify-content: center;
-        width: 81px;
-        height: 81px;
-        border-radius: 50%;
-        background-color: #59b6d7;
-        border: 2px solid #fff;
-        /*no*/
-        transform: translateX(-50%);
+    &-content {
+      flex: 1 1 auto;
+      padding-right: 20px;
+      height: 100%;
+      min-height: 80px;
+      line-height: 80px;
+      margin-left: 25px;
+      border-bottom: 1px solid #ededed;
+      /*no*/
+      &.noborder {
+        border: none;
+      }
+      .contactFounder {
+        display: block;
+        float: right;
+        width: 90px;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        margin-top: 20px;
+        border-radius: 20px;
+        font-size: 24px;
         color: #fff;
-        box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
+        background-color: #fca308;
+      }
     }
+    .summary {
+      line-height: normal;
+      display: flex;
+      align-items: center;
+      a {
+        color: #59b6d7;
+      }
+    }
+  }
 
-    .main {
-        transition: transform .3s;
+  &-feeds {
+    &-label {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 20px;
+      height: 70px;
+      background-color: #f4f5f5;
+      font-size: 26px;
+      color: #999;
     }
 
-    .menu {
-        padding: 50px 40px 40px;
+    &-filter {
+      &-wrap {
         height: 100%;
         position: relative;
-        &-item {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            font-size: 30px;
-            color: #4a4d5e;
-            border-bottom: 1px solid #4a4d5e;
-            /*no*/
-            height: 110px;
-            &-prepend {
-                width: 30px;
-                height: 30px;
-            }
-
-            &-append {
-                width: 24px;
-                height: 24px;
-            }
-
-            &-title {
-                color: #ccc;
-                flex: 1 1 auto;
-                margin: 0 15px;
-            }
-
-            &-tips {
-                margin: 0 15px;
-                color: #ccc;
-                flex: 1 1 auto;
-                font-size: 28px;
-                text-align: right;
-                .v-badge-dot {
-                    transform: scale(.7);
-                }
-            }
+        z-index: 10;
+        line-height: 70px;
+      }
+      &-select {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        background-color: #fff;
+        transform: translateY(100%);
+        border-radius: 8px;
+        box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
+      }
+      &-option {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 20px;
+        width: 200px;
+        height: 150/2px;
+        &+& {
+          border-top: 1px solid #ededed;
         }
-        &-main {
-            float: right;
-            width: 450px;
-            height: 100%;
-            background-color: #363845;
+        .v-icon {
+          visibility: hidden;
+          width: 20px;
+          height: 20px;
         }
-        &-wrap {
-            transition: transform .18s;
-            transform: translate3d(100%, 0, 0);
-            position: fixed;
-            top: 0;
-            left: 0;
-            bottom: 0;
-            right: 0;
-            &.menuOpen {
-                transform: translate3d(0, 0, 0);
-            }
+        &.active {
+          color: #666;
+          .v-icon {
+            visibility: visible;
+          }
         }
+      }
+      display: flex;
+      align-items: center;
+      .v-icon {
+        margin-left: 15px;
+        width: 36px;
+        height: 30px;
+      }
+    }
+  }
+
+  &-post-btn {
+    display: flex;
+    position: fixed;
+    bottom: 50px;
+    left: 50%;
+    align-items: center;
+    justify-content: center;
+    width: 81px;
+    height: 81px;
+    border-radius: 50%;
+    background-color: #59b6d7;
+    border: 2px solid #fff;
+    /*no*/
+    transform: translateX(-50%);
+    color: #fff;
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
+  }
+
+  .main {
+    transition: transform .3s;
+  }
+
+  .menu {
+    padding: 50px 40px 40px;
+    height: 100%;
+    position: relative;
+    &-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 30px;
+      color: #4a4d5e;
+      border-bottom: 1px solid #4a4d5e;
+      /*no*/
+      height: 110px;
+      &-prepend {
+        width: 30px;
+        height: 30px;
+      }
+
+      &-append {
+        width: 24px;
+        height: 24px;
+      }
+
+      &-title {
+        color: #ccc;
+        flex: 1 1 auto;
+        margin: 0 15px;
+      }
 
-        &-exit-group{
-            position: absolute;
-            bottom: 40px;
-            left: 50%;
-            margin-left: -320/2px;
-            font-size: 30px;
-            color: #ccc;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 320px;
-            height: 60px;
-            border-radius: 8px;
-            border: 1px solid rgb(74, 77,94);
+      &-tips {
+        margin: 0 15px;
+        color: #ccc;
+        flex: 1 1 auto;
+        font-size: 28px;
+        text-align: right;
+        .v-badge-dot {
+          transform: scale(.7);
         }
+      }
+    }
+    &-main {
+      float: right;
+      width: 450px;
+      height: 100%;
+      background-color: #363845;
+    }
+    &-wrap {
+      transition: transform .18s;
+      transform: translate3d(100%, 0, 0);
+      position: fixed;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      &.menuOpen {
+        transform: translate3d(0, 0, 0);
+      }
+    }
+
+    &-exit-group {
+      position: absolute;
+      bottom: 40px;
+      left: 50%;
+      margin-left: -320/2px;
+      font-size: 30px;
+      color: #ccc;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 320px;
+      height: 60px;
+      border-radius: 8px;
+      border: 1px solid rgb(74, 77, 94);
     }
-}
\ No newline at end of file
+  }
+}
diff --git a/src/page/group/children/groupDetail.vue b/src/page/group/children/groupDetail.vue
index 145f6cd8..0a54ae88 100644
--- a/src/page/group/children/groupDetail.vue
+++ b/src/page/group/children/groupDetail.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="group-detail">
     <div class="main" :style="translate3d">
-      <head-top :go-back='goBack' :append='true' :transparent='top_tranparent'>
+      <head-top :go-back='goBack' :append='true' :transparent='topTranparent'>
         <div slot='append'>
           <v-icon type='base-search' @click.native='to(`/group/search`)'></v-icon>
           <v-icon type='base-share'></v-icon>
@@ -137,7 +137,7 @@ export default {
       group: {},
       feeds: [],
       filterTypes,
-      redirect: '',
+      scrollTop: 0,
       menuOpen: false,
       filterShow: false,
       showAllSummary: false,
@@ -159,8 +159,8 @@ export default {
     groupID() {
       return this.$route.params.groupID
     },
-    top_tranparent() {
-      return true
+    topTranparent() {
+      return !(this.scrollTop > 110)
     },
     translate3d() {
       return this.menuOpen ? {
@@ -187,7 +187,7 @@ export default {
       }
     },
     goBack() {
-      this.to(this.redirect)
+      this.$router.go(-1)
     },
     openMenu() {
       this.menuOpen = true
@@ -214,8 +214,8 @@ export default {
         params: {
           type: this.filterType.type
         }
-      }).then(({ data = [] }) => {
-        this.feeds = data
+      }).then(({ data: { posts = [], pinneds = [] } = {} }) => {
+        this.feeds = posts
       })
     },
     joinGroup() {
@@ -259,9 +259,18 @@ export default {
           cancelText: `知道了`
         })
       }
-      // if (true) {
-      //   this.to(`/group/post`)
-      // }
+
+      this.$router.push({
+        name: 'postGroupFeed',
+        params: {
+          groupID: this.group.id
+        }
+      })
+    },
+
+    init() {
+      this.getGroupDetail()
+      this.getGroupFeeds()
     }
   },
   /**
@@ -272,19 +281,21 @@ export default {
     if (this.groupID === this.oldID) {
 
     } else {
-      this.getGroupDetail()
+      this.init()
     }
   },
   beforeRouteEnter(to, from, next) {
     next(vm => {
-      const path = from.fullPath
       vm.oldID = to.params.groupID
-      vm.redirect = path && path !== '/' ? path : '/group'
     })
   },
-  created() {
-    this.getGroupDetail()
+  mounted() {
+    this.init()
+    this.$el.addEventListener('scroll', (e) => {
+      this.scrollTop = this.$el.scrollTop
+    })
   }
 }
+
 </script>
-<style lang='less' src='./groupDetail.less'></style>
\ No newline at end of file
+<style lang='less' src='./groupDetail.less'></style>
diff --git a/src/page/group/children/groupPostFeed.vue b/src/page/group/children/groupPostFeed.vue
deleted file mode 100644
index b5c351fe..00000000
--- a/src/page/group/children/groupPostFeed.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-    <div>
-        groupPostFeed page
-    </div>
-</template>
-
-<script>
-    export default {
-      name: 'groupPostFeed'
-    }
-</script>
-
-<style lang='less'>
-
-</style>
\ No newline at end of file
diff --git a/src/plugins/modal/ModalInstance.js b/src/plugins/modal/ModalInstance.js
index 0296a39d..6165a184 100644
--- a/src/plugins/modal/ModalInstance.js
+++ b/src/plugins/modal/ModalInstance.js
@@ -201,7 +201,6 @@ Modal.newInstance = properties => {
     },
     remove () {
       modal.visible = false
-      modal.$parent.buttonLoading = false
       modal.$parent.remove()
     },
     component: modal
diff --git a/src/routers/index.js b/src/routers/index.js
index 6234b503..3acd317e 100755
--- a/src/routers/index.js
+++ b/src/routers/index.js
@@ -12,11 +12,12 @@ const router = new VueRouter({
   mode: 'history',
   base: '/h5',
   // strict: process.env.NODE_ENV !== 'production',
-  scrollBehavior (to, from, savedPosition) {
+  scrollBehavior(to, from, savedPosition) {
     if (savedPosition) {
       return savedPosition
     } else {
-      if (from.meta.keepAlive) {
+      const { meta: { keepAlive = false, toTop = false } } = from
+      if (keepAlive && !toTop) {
         from.meta.savedPosition = document.body.scrollTop || document.documentElement.scrollTop
       }
       return { x: 0, y: to.meta.savedPosition || 0 }
@@ -39,7 +40,16 @@ router.beforeEach((to, from, next) => {
   const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
   const forGuest = to.matched.some(record => record.meta.forGuest)
   const redirect = from.query.redirect
-  const upgrade = ['/question', '/news', '/rank']
+  const upgrade = [
+    '/question',
+    '/news',
+    '/rank',
+    '/post/wenzi',
+    '/post/pic',
+    '/post/release',
+    '/post/checkin',
+    '/post/question'
+  ]
   if (oneOf(to.path, upgrade)) {
     next({ path: '/upgrade' })
   }
diff --git a/src/routers/routes.js b/src/routers/routes.js
index 8dc43a79..b39b7b6b 100755
--- a/src/routers/routes.js
+++ b/src/routers/routes.js
@@ -44,8 +44,7 @@ const
   import(/* webpackChunkName: 'group' */ '../page/group/children/groupAll'),
   groupDetail = () =>
   import(/* webpackChunkName: 'group' */ '../page/group/children/groupDetail'),
-  groupPostFeed = () =>
-  import(/* webpackChunkName: 'group' */ '../page/group/children/groupPostFeed'),
+
 
   question = () =>
   import(/* webpackChunkName: 'question' */ '../page/question/question'),
@@ -73,7 +72,11 @@ const
   import(/* webpackChunkName: 'common' */ '../page/common/chooseLocation'),
   // 搜索用户
   searchUser = () =>
-  import(/* webpackChunkName: 'common' */ '../page/common/searchUser')
+  import(/* webpackChunkName: 'common' */ '../page/common/searchUser'),
+  postGroupFeed = () =>
+  import(/* webpackChunkName: 'common' */ '../page/common/postGroupFeed/'),
+  postWenzi = () =>
+  import(/* webpackChunkName: 'common' */ '../page/common/postWenzi')
 
 const router = [{
   path: '/',
@@ -147,10 +150,6 @@ const router = [{
       path: '/group/all',
       component: groupAll,
       meta: { title: '全部圈子', keepAlive: true, requiresAuth: true }
-    }, {
-      path: '/group/post',
-      component: groupPostFeed,
-      meta: { title: '发布帖子', keepAlive: true, requiresAuth: true }
     }, {
       path: 'profile/group',
       component: profileGroup,
@@ -198,6 +197,25 @@ const router = [{
     { path: '/tags', component: chooseTags, meta: { title: '选择标签' } }, /* 选择标签 */
     { path: '/location', component: chooseLocation, meta: { title: '选择位置' } }, /* 定位 */
 
+    {
+      path: '/post/wenzi',
+      component: postWenzi,
+      meta: {
+        keepAlive: true,
+        title: '发布文字',
+        requiresAuth: true
+      }
+    }, {
+      path: '/post/fatie',
+      name: 'postGroupFeed',
+      component: postGroupFeed,
+      meta: {
+        keepAlive: true,
+        title: '发布帖子',
+        requiresAuth: true
+      }
+    },
+
     { path: '/upgrade', component: upgrade }, /* 网站升级中 */
 
     { path: '*', component: NotFound } /* 404 页面 */
diff --git a/src/style/animate.less b/src/style/animate.less
index 388b8da2..a7ce90e5 100644
--- a/src/style/animate.less
+++ b/src/style/animate.less
@@ -1,38 +1,66 @@
 @keyframes fadeInRight {
-    from {
-        opacity: 0;
-        transform: translate3d(100%, 0, 0);
-    }
+  from {
+    opacity: 0;
+    transform: translate3d(100%, 0, 0);
+  }
 
-    to {
-        opacity: 1;
-        transform: none;
-    }
+  to {
+    opacity: 1;
+    transform: none;
+  }
 }
 
 .fadeInRight {
-    animation-name: fadeInRight;
+  animation-name: fadeInRight;
 }
 
-.router-fadeInTop-enter-active, .router-fadeInTop-leave-active,
-.router-fadeInLeft-enter-active, .router-fadeInLeft-leave-active,
-.router-fadeInRight-enter-active, .router-fadeInRight-leave-active,
-.router-fadeInBottom-enter-active, .router-fadeInBottom-leave-active {
-    transition: transform .3s;
+.router-fadeInTop-enter-active,
+.router-fadeInTop-leave-active,
+.router-fadeInLeft-enter-active,
+.router-fadeInLeft-leave-active,
+.router-fadeInRight-enter-active,
+.router-fadeInRight-leave-active,
+.router-fadeInBottom-enter-active,
+.router-fadeInBottom-leave-active {
+  transition: transform .3s;
 }
 
-.router-fadeInRight-enter, .router-fadeInRight-leave-active {
-    transform: translate3d(100%, 0, 0);
+.router-fadeInRight-enter,
+.router-fadeInRight-leave-active {
+  transform: translate3d(100%, 0, 0);
 }
 
-.router-fadeInLeft-enter, .router-fadeInLeft-leave-active {
-    transform: translate3d(-100%, 0, 0);
+.router-fadeInLeft-enter,
+.router-fadeInLeft-leave-active {
+  transform: translate3d(-100%, 0, 0);
 }
 
-.router-fadeInTop-enter-active, .router-fadeInTop-leave-active {
-    transform: translate3d(0, 100%, 0);
+.router-fadeInTop-enter-active,
+.router-fadeInTop-leave-active {
+  transform: translate3d(0, 100%, 0);
+}
+
+.router-fadeInBottom-enter-active,
+.router-fadeInBottom-leave-active {
+  transform: translate3d(0, -100%, 0);
+}
+// animate.css
+.animated {
+  animation-duration: 1s;
 }
 
-.router-fadeInBottom-enter-active, .router-fadeInBottom-leave-active {
-    transform: translate3d(0, -100%, 0);
-}
\ No newline at end of file
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translate3d(0, -100%, 1);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.fadeInUp {
+  animation-name: fadeInUp;
+}
diff --git a/src/style/common.less b/src/style/common.less
index 8c6eac9c..be74035a 100644
--- a/src/style/common.less
+++ b/src/style/common.less
@@ -156,7 +156,7 @@ li {
 }
 
 .btn-loading {
-    animation: rotate360 2s infinite linear;
+    animation: rotate360 2s infinite ease;
 }
 
 @keyframes rotate360 {
@@ -164,7 +164,7 @@ li {
         transform: rotate(0deg);
     }
     to {
-        transform: rotate(360deg);
+        transform: rotate(-360deg);
     }
 }