diff --git a/src/project/fengdu/AppCircle/MyPostList.vue b/src/project/fengdu/AppCircle/MyPostList.vue
index e796bd8..92fe551 100644
--- a/src/project/fengdu/AppCircle/MyPostList.vue
+++ b/src/project/fengdu/AppCircle/MyPostList.vue
@@ -3,10 +3,10 @@
     <div class="userinfo">
       <div class="top">
         <div class="left">
-          <image :src="user.avatarUrl || 'https://cdn.cunwuyun.cn/wxmp/fengdu/avatar.png'" />
+          <image :src="user.avatarUrl || 'https://cdn.cunwuyun.cn/wxmp/fengdu/avatar.png'"/>
           <h2>{{ user.nickName }}</h2>
         </div>
-        <div class="add-btn" hover-class="text-hover" @click="$linkTo('./Add')">发贴</div>
+        <div class="add-btn" hover-class="text-hover" @click="handleAdd">发贴</div>
       </div>
       <div class="bottom">
         <div class="bottom-item" @click="changeTab(0)" :class="[currIndex === 0 ? 'active' : '']">
@@ -26,38 +26,38 @@
     <div class="body">
       <div class="body-list" v-if="currIndex === 0">
         <div class="item"
-          v-for="(item, index) in list"
-          :key="index"
-          hover-class="text-hover"
-          hover-stop-propagation
-          @click="$linkTo('./Detail?id=' + item.id + '&name=' + item.topicName + '&themeId=' + item.themeId)">
+             v-for="(item, index) in list"
+             :key="index"
+             hover-class="text-hover"
+             hover-stop-propagation
+             @click="$linkTo('./Detail?id=' + item.id + '&name=' + item.topicName + '&themeId=' + item.themeId)">
           <div class="item-top">
-            <image class="avatar" :src="item.createUserAvatar || 'https://cdn.cunwuyun.cn/wxmp/fengdu/avatar.png'" />
+            <image class="avatar" :src="item.createUserAvatar || 'https://cdn.cunwuyun.cn/wxmp/fengdu/avatar.png'"/>
             <div class="right">
               <h3>{{ item.createUserName }}</h3>
               <span v-if="item.publishDepartName">{{ item.publishDepartName }}</span>
             </div>
-            <image hover-stop-propagation @click.stop="remove(item.id)" class="remove" src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-delete.png" />
+            <image hover-stop-propagation @click.stop="remove(item.id)" class="remove" src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-delete.png"/>
           </div>
           <div class="item-content">
             <span v-if="item.themeId" @click.stop="$linkTo('./TopicDetail?themeId=' + item.themeId + '&name=' + item.topicName)">#【{{ item.topicName }}】</span>
             <text>{{ item.content }}</text>
           </div>
           <div class="item-imgs" v-if="item.files.length">
-            <image mode="aspectFill" hover-stop-propagation @click.stop="previewImage(e.url, item.files)" v-for="(e, i) in item.files" :key="i" :src="e.url" />
+            <image mode="aspectFill" hover-stop-propagation @click.stop="previewImage(e.url, item.files)" v-for="(e, i) in item.files" :key="i" :src="e.url"/>
           </div>
           <p>{{ item.createTime }}</p>
           <div class="item-bottom">
             <div>
-              <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-zhuanfa.png" />
+              <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-zhuanfa.png"/>
               <i>{{ item.sharedCount }}</i>
             </div>
             <div>
-              <image :src="item.appreciateStatus ? 'https://cdn.cunwuyun.cn/wxmp/fengdu/zan-active.png' : 'https://cdn.cunwuyun.cn/wxmp/fengdu/zan.png'" />
+              <image :src="item.appreciateStatus ? 'https://cdn.cunwuyun.cn/wxmp/fengdu/zan-active.png' : 'https://cdn.cunwuyun.cn/wxmp/fengdu/zan.png'"/>
               <i>{{ item.appreciateCount }}</i>
             </div>
             <div>
-              <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-pinglun.png" />
+              <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-pinglun.png"/>
               <i>{{ item.commentCount }}</i>
             </div>
           </div>
@@ -65,38 +65,38 @@
       </div>
       <div class="body-list" v-if="currIndex === 1">
         <div class="item"
-          v-for="(item, index) in list"
-          :key="index"
-          hover-class="text-hover"
-          hover-stop-propagation
-          @click="$linkTo('./Detail?id=' + item.id + '&name=' + item.topicName + '&themeId=' + item.themeId)">
+             v-for="(item, index) in list"
+             :key="index"
+             hover-class="text-hover"
+             hover-stop-propagation
+             @click="$linkTo('./Detail?id=' + item.id + '&name=' + item.topicName + '&themeId=' + item.themeId)">
           <div class="item-top">
-            <image class="avatar" :src="item.createUserAvatar || 'https://cdn.cunwuyun.cn/wxmp/fengdu/avatar.png'" />
+            <image class="avatar" :src="item.createUserAvatar || 'https://cdn.cunwuyun.cn/wxmp/fengdu/avatar.png'"/>
             <div class="right">
               <h3>{{ item.createUserName }}</h3>
               <span v-if="item.publishDepartName">{{ item.publishDepartName }}</span>
             </div>
-            <image hover-stop-propagation @click.stop="removeLike(item.id)" class="remove" src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-delete.png" />
+            <image hover-stop-propagation @click.stop="removeLike(item.id)" class="remove" src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-delete.png"/>
           </div>
           <div class="item-content">
             <span v-if="item.themeId" @click.stop="$linkTo('./TopicDetail?themeId=' + item.themeId + '&name=' + item.topicName)">#【{{ item.topicName }}】</span>
             <text>{{ item.content }}</text>
           </div>
           <div class="item-imgs" v-if="item.files.length">
-            <image mode="aspectFill" hover-stop-propagation @click.stop="previewImage(e.url, item.files)" v-for="(e, i) in item.files" :key="i" :src="e.url" />
+            <image mode="aspectFill" hover-stop-propagation @click.stop="previewImage(e.url, item.files)" v-for="(e, i) in item.files" :key="i" :src="e.url"/>
           </div>
           <p>{{ item.createTime }}</p>
           <div class="item-bottom">
             <div>
-              <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-zhuanfa.png" />
+              <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-zhuanfa.png"/>
               <i>{{ item.sharedCount }}</i>
             </div>
             <div>
-              <image :src="item.appreciateStatus ? 'https://cdn.cunwuyun.cn/wxmp/fengdu/zan-active.png' : 'https://cdn.cunwuyun.cn/wxmp/fengdu/zan.png'" />
+              <image :src="item.appreciateStatus ? 'https://cdn.cunwuyun.cn/wxmp/fengdu/zan-active.png' : 'https://cdn.cunwuyun.cn/wxmp/fengdu/zan.png'"/>
               <i>{{ item.appreciateCount }}</i>
             </div>
             <div>
-              <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-pinglun.png" />
+              <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-pinglun.png"/>
               <i>{{ item.commentCount }}</i>
             </div>
           </div>
@@ -106,15 +106,16 @@
         <div class="comment-item" v-for="(item, index) in list" :key="index">
           <div class="comment-top">
             <span>{{ item.myComment.createTime }}</span>
-            <image hover-stop-propagation  @click.stop="removeComment(item.myComment.id)" class="remove" src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-delete.png" />
+            <image hover-stop-propagation @click.stop="removeComment(item.myComment.id)" class="remove"
+                   src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-delete.png"/>
           </div>
           <p>{{ item.myComment.content }}</p>
           <div
-            class="bottom"
-            hover-class="text-hover"
-            @click="$linkTo('./Detail?id=' + item.id + '&name=' + item.topicName + '&themeId=' + item.themeId)">
+              class="bottom"
+              hover-class="text-hover"
+              @click="$linkTo('./Detail?id=' + item.id + '&name=' + item.topicName + '&themeId=' + item.themeId)">
             <div class="item-top">
-              <image class="avatar" :src="item.createUserAvatar || 'https://cdn.cunwuyun.cn/wxmp/fengdu/avatar.png'" />
+              <image class="avatar" :src="item.createUserAvatar || 'https://cdn.cunwuyun.cn/wxmp/fengdu/avatar.png'"/>
               <div class="right">
                 <h3>{{ item.createUserName }}</h3>
                 <span v-if="item.publishDepartName">{{ item.publishDepartName }}</span>
@@ -125,7 +126,7 @@
               <text>{{ item.content }}</text>
             </div>
             <div class="item-imgs" v-if="item.files.length">
-              <image mode="aspectFill" hover-stop-propagation @click.stop="previewImage(e.url, item.files)" v-for="(e, i) in item.files" :key="i" :src="e.url" />
+              <image mode="aspectFill" hover-stop-propagation @click.stop="previewImage(e.url, item.files)" v-for="(e, i) in item.files" :key="i" :src="e.url"/>
             </div>
           </div>
         </div>
@@ -135,590 +136,605 @@
   </div>
 </template>
 <script>
-  import {mapState} from "vuex";
+import {mapState} from "vuex";
 
-  export default {
-    name: 'MyPostList',
-    appName: '我的帖子',
-    navigationBarBackgroundColor: '#ffffff',
-    navigationBarTextStyle: 'black',
-    data () {
-      return {
-        currIndex: 0,
-        totalInfo: {},
-        list: [],
-        isMore: false,
-        current: 1
-      }
+export default {
+  name: 'MyPostList',
+  appName: '我的帖子',
+  navigationBarBackgroundColor: '#ffffff',
+  navigationBarTextStyle: 'black',
+  data() {
+    return {
+      currIndex: 0,
+      totalInfo: {},
+      list: [],
+      isMore: false,
+      current: 1
+    }
+  },
+
+  computed: {
+    ...mapState(['user', 'token']),
+    isAuth: v => !!v.user.areaId
+  },
+
+  onLoad() {
+    this.getTopicList()
+    this.getInfo()
+  },
+
+  methods: {
+    getTopicList() {
+      this.$instance.post(`/app/appneighborhoodassistancetheme/list`, null, {
+        withoutToken: true,
+        params: {
+          current: 1,
+          size: 1000
+        }
+      }).then(res => {
+        if (res.code === 0) {
+          this.topicList = res.data.records
+          this.getMyPublish()
+        }
+      })
     },
 
-    computed: {
-      ...mapState(['user', 'token']),
+    getInfo() {
+      this.$instance.post(`/app/appneighborhoodassistance/wechatInfo`).then(res => {
+        if (res.code === 0) {
+          this.totalInfo = res.data
+        }
+      })
     },
 
-    onLoad () {
-      this.getTopicList()
-      this.getInfo()
+    previewImage(url, files) {
+      uni.previewImage({
+        current: url,
+        urls: files.map(v => v.url)
+      })
     },
 
-    methods: {
-      getTopicList () {
-        this.$instance.post(`/app/appneighborhoodassistancetheme/list`, null, {
-          withoutToken: true,
-          params: {
-            current: 1,
-            size: 1000
-          }
-        }).then(res => {
+    remove(id) {
+      this.$dialog.confirm({
+        title: '温馨提示',
+        content: '您确定删除该帖子吗？'
+      }).then(() => {
+        this.$instance.post(`/app/appneighborhoodassistance/delete?id=${id}`).then(res => {
           if (res.code === 0) {
-            this.topicList = res.data.records
-            this.getMyPublish()
+            this.$toast('删除成功！')
+            this.getInfo()
+            uni.$emit('updateList')
+            this.changeTab(this.currIndex)
           }
         })
-      },
-
-      getInfo () {
-        this.$instance.post(`/app/appneighborhoodassistance/wechatInfo`).then(res => {
+      }).catch(() => {
+      })
+    },
+    removeLike(id) {
+      this.$dialog.confirm({
+        title: '温馨提示',
+        content: '您确定取消点赞吗？'
+      }).then(() => {
+        this.$instance.post(`/app/appneighborhoodassistance/appreciate?id=${id}`).then(res => {
           if (res.code === 0) {
-            this.totalInfo = res.data
+            this.$toast('删除成功！')
+            this.getInfo()
+            uni.$emit('updateList')
+            this.changeTab(this.currIndex)
           }
         })
-      },
-
-      previewImage (url, files) {
-        uni.previewImage({
-          current: url,
-          urls: files.map(v => v.url)
-        })
-      },
-
-      remove (id) {
-        this.$dialog.confirm({
-          title: '温馨提示',
-          content: '您确定删除该帖子吗？'
-        }).then(() => {
-          this.$instance.post(`/app/appneighborhoodassistance/delete?id=${id}`).then(res => {
-            if (res.code === 0) {
-              this.$toast('删除成功！')
-              this.getInfo()
-              uni.$emit('updateList')
-              this.changeTab(this.currIndex)
-            }
-          })
-        }).catch(() => {})
-      },
-      removeLike(id){
-        this.$dialog.confirm({
-          title: '温馨提示',
-          content: '您确定取消点赞吗？'
-        }).then(() => {
-          this.$instance.post(`/app/appneighborhoodassistance/appreciate?id=${id}`).then(res => {
-            if (res.code === 0) {
-              this.$toast('删除成功！')
-              this.getInfo()
-              uni.$emit('updateList')
-              this.changeTab(this.currIndex)
-            }
-          })
-        }).catch(() => 0)
-      },
-      removeComment (id) {
-        this.$dialog.confirm({
-          title: '温馨提示',
-          content: '您确定删除吗？'
-        }).then(() => {
-          this.$instance.post(`/app/appneighborhoodassistance/delComment?id=${id}`).then(res => {
-            if (res.code === 0) {
-              this.$toast('删除成功！')
-              this.getInfo()
-              uni.$emit('updateList')
-              this.changeTab(this.currIndex)
-            }
-          })
-        }).catch(() => {})
-      },
-      changeTab (index) {
-        this.currIndex = index
-        this.isMore = false
-        this.current = 1
-
-        this.$nextTick(() => {
-          if (this.currIndex === 0) {
-            this.getMyPublish()
-          } else if (this.currIndex === 1) {
-            this.myPraiseList()
-          } else {
-            this.getMyCommentList()
-          }
-        })
-      },
-
-      getMyPublish () {
-        if (this.isMore) return
-
-        this.$loading()
-        this.$instance.post(`/app/appneighborhoodassistance/list`, null, {
-          params: {
-            current: this.current,
-            size: 10,
-            listType: 0,
-            createUserId: this.user.id
-          }
-        }).then(res => {
+      }).catch(() => 0)
+    },
+    removeComment(id) {
+      this.$dialog.confirm({
+        title: '温馨提示',
+        content: '您确定删除吗？'
+      }).then(() => {
+        this.$instance.post(`/app/appneighborhoodassistance/delComment?id=${id}`).then(res => {
           if (res.code === 0) {
-            this.$hideLoading()
-            if (this.current > 1) {
-              this.list = [...this.list, ...res.data.records.map(e => {
-                return {
-                  ...e,
-                  topicName: this.topicList.filter(v => v.id === e.themeId).length ? this.topicList.filter(v => v.id === e.themeId)[0].title : ''
-                }
-              })]
-            } else {
-              this.list = res.data.records.map(e => {
-                return {
-                  ...e,
-                  topicName: this.topicList.filter(v => v.id === e.themeId).length ? this.topicList.filter(v => v.id === e.themeId)[0].title : ''
-                }
-              })
-            }
-            if (res.data.records.length < 10) {
-              this.isMore = true
-
-              return false
-            }
-            this.current = this.current + 1
-          } else {
-            this.isMore = true
+            this.$toast('删除成功！')
+            this.getInfo()
+            uni.$emit('updateList')
+            this.changeTab(this.currIndex)
           }
-        }).catch(() => {
+        })
+      }).catch(() => {
+      })
+    },
+    changeTab(index) {
+      this.currIndex = index
+      this.isMore = false
+      this.current = 1
+
+      this.$nextTick(() => {
+        if (this.currIndex === 0) {
+          this.getMyPublish()
+        } else if (this.currIndex === 1) {
+          this.myPraiseList()
+        } else {
+          this.getMyCommentList()
+        }
+      })
+    },
+
+    getMyPublish() {
+      if (this.isMore) return
+
+      this.$loading()
+      this.$instance.post(`/app/appneighborhoodassistance/list`, null, {
+        params: {
+          current: this.current,
+          size: 10,
+          listType: 0,
+          createUserId: this.user.id
+        }
+      }).then(res => {
+        if (res.code === 0) {
           this.$hideLoading()
-        })
-      },
-
-      getMyCommentList () {
-        if (this.isMore) return
-
-        this.$loading()
-        this.$instance.post(`/app/appneighborhoodassistance/list`, null, {
-          params: {
-            current: this.current,
-            size: 10,
-            listType: 2
-          }
-        }).then(res => {
-          if (res.code === 0) {
-            this.$hideLoading()
-            if (this.current > 1) {
-              this.list = [...this.list, ...res.data.records.map(e => {
-                return {
-                  ...e,
-                  topicName: this.topicList.filter(v => v.id === e.themeId).length ? this.topicList.filter(v => v.id === e.themeId)[0].title : ''
-                }
-              })]
-            } else {
-              this.list = res.data.records.map(e => {
-                return {
-                  ...e,
-                  topicName: this.topicList.filter(v => v.id === e.themeId).length ? this.topicList.filter(v => v.id === e.themeId)[0].title : ''
-                }
-              })
-            }
-
-            if (res.data.records.length < 10) {
-              this.isMore = true
-
-              return false
-            }
-
-            this.current = this.current + 1
+          if (this.current > 1) {
+            this.list = [...this.list, ...res.data.records.map(e => {
+              return {
+                ...e,
+                topicName: this.topicList.filter(v => v.id === e.themeId).length ? this.topicList.filter(v => v.id === e.themeId)[0].title : ''
+              }
+            })]
           } else {
+            this.list = res.data.records.map(e => {
+              return {
+                ...e,
+                topicName: this.topicList.filter(v => v.id === e.themeId).length ? this.topicList.filter(v => v.id === e.themeId)[0].title : ''
+              }
+            })
+          }
+          if (res.data.records.length < 10) {
             this.isMore = true
+
+            return false
           }
-        }).catch(() => {
-          this.$hideLoading()
-        })
-      },
-
-      myPraiseList () {
-        if (this.isMore) return
-
-        this.$loading()
-        this.$instance.post(`/app/appneighborhoodassistance/list`, null, {
-          params: {
-            current: this.current,
-            size: 10,
-            listType: 1
-          }
-        }).then(res => {
-          if (res.code === 0) {
-            this.$hideLoading()
-            if (this.current > 1) {
-              this.list = [...this.list, ...res.data.records.map(e => {
-                return {
-                  ...e,
-                  topicName: this.topicList.filter(v => v.id === e.themeId).length ? this.topicList.filter(v => v.id === e.themeId)[0].title : ''
-                }
-              })]
-            } else {
-              this.list = res.data.records.map(e => {
-                return {
-                  ...e,
-                  topicName: this.topicList.filter(v => v.id === e.themeId).length ? this.topicList.filter(v => v.id === e.themeId)[0].title : ''
-                }
-              })
-            }
-
-            if (res.data.records.length < 10) {
-              this.isMore = true
-
-              return false
-            }
-
-            this.current = this.current + 1
-          } else {
-            this.isMore = true
-          }
-        }).catch(() => {
-          this.$hideLoading()
-        })
-      }
+          this.current = this.current + 1
+        } else {
+          this.isMore = true
+        }
+      }).catch(() => {
+        this.$hideLoading()
+      })
     },
 
-    onReachBottom () {
-      if (this.currIndex === 0) {
-        this.getMyPublish()
-      } else if (this.currIndex === 1) {
-        this.myPraiseList()
+    getMyCommentList() {
+      if (this.isMore) return
+
+      this.$loading()
+      this.$instance.post(`/app/appneighborhoodassistance/list`, null, {
+        params: {
+          current: this.current,
+          size: 10,
+          listType: 2
+        }
+      }).then(res => {
+        if (res.code === 0) {
+          this.$hideLoading()
+          if (this.current > 1) {
+            this.list = [...this.list, ...res.data.records.map(e => {
+              return {
+                ...e,
+                topicName: this.topicList.filter(v => v.id === e.themeId).length ? this.topicList.filter(v => v.id === e.themeId)[0].title : ''
+              }
+            })]
+          } else {
+            this.list = res.data.records.map(e => {
+              return {
+                ...e,
+                topicName: this.topicList.filter(v => v.id === e.themeId).length ? this.topicList.filter(v => v.id === e.themeId)[0].title : ''
+              }
+            })
+          }
+
+          if (res.data.records.length < 10) {
+            this.isMore = true
+
+            return false
+          }
+
+          this.current = this.current + 1
+        } else {
+          this.isMore = true
+        }
+      }).catch(() => {
+        this.$hideLoading()
+      })
+    },
+
+    myPraiseList() {
+      if (this.isMore) return
+
+      this.$loading()
+      this.$instance.post(`/app/appneighborhoodassistance/list`, null, {
+        params: {
+          current: this.current,
+          size: 10,
+          listType: 1
+        }
+      }).then(res => {
+        if (res.code === 0) {
+          this.$hideLoading()
+          if (this.current > 1) {
+            this.list = [...this.list, ...res.data.records.map(e => {
+              return {
+                ...e,
+                topicName: this.topicList.filter(v => v.id === e.themeId).length ? this.topicList.filter(v => v.id === e.themeId)[0].title : ''
+              }
+            })]
+          } else {
+            this.list = res.data.records.map(e => {
+              return {
+                ...e,
+                topicName: this.topicList.filter(v => v.id === e.themeId).length ? this.topicList.filter(v => v.id === e.themeId)[0].title : ''
+              }
+            })
+          }
+
+          if (res.data.records.length < 10) {
+            this.isMore = true
+
+            return false
+          }
+
+          this.current = this.current + 1
+        } else {
+          this.isMore = true
+        }
+      }).catch(() => {
+        this.$hideLoading()
+      })
+    },
+    handleAdd() {
+      if (this.isAuth) {
+        this.$linkTo('./Add')
       } else {
-        this.getMyCommentList()
+        this.$dialog.confirm({
+          content: '您只有完成信息认证后，才可进行相关操作。',
+          confirmText: '去认证'
+        }).then(() => {
+          this.$linkTo('/pages/AppMine/userInfo')
+        }).catch(() => 0)
       }
     }
+  },
+
+  onReachBottom() {
+    if (this.currIndex === 0) {
+      this.getMyPublish()
+    } else if (this.currIndex === 1) {
+      this.myPraiseList()
+    } else {
+      this.getMyCommentList()
+    }
   }
+}
 </script>
 
 <style scoped lang="scss">
-  .MyPostList {
-    padding-bottom: 40px;
+.MyPostList {
+  padding-bottom: 40px;
+  box-sizing: border-box;
+
+  * {
     box-sizing: border-box;
+  }
 
-    * {
-      box-sizing: border-box;
-    }
+  .userinfo {
+    position: sticky;
+    top: 0px;
+    margin: 0 0 24px;
+    border-top: 24px solid #eee;
+    background: #fff;
 
-    .userinfo {
-      position: sticky;
-      top: 0px;
-      margin: 0 0 24px;
-      border-top: 24px solid #eee;
-      background: #fff;
+    .top {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 32px 56px;
+      border-bottom: 1px solid #eee;
 
-      .top {
+      .left {
         display: flex;
         align-items: center;
-        justify-content: space-between;
-        padding: 32px 56px;
-        border-bottom: 1px solid #eee;
 
-        .left {
-          display: flex;
-          align-items: center;
-
-          image {
-            width: 96px;
-            height: 96px;
-            margin-right: 16px;
-            border-radius: 50%;
-          }
-
-          h2 {
-            color: #333333;
-            font-size: 34px;
-            font-weight: 600;
-          }
+        image {
+          width: 96px;
+          height: 96px;
+          margin-right: 16px;
+          border-radius: 50%;
         }
 
-        .add-btn {
-          width: 132px;
-          height: 56px;
-          line-height: 56px;
-          text-align: center;
-          font-size: 30px;
-          color: #fff;
-          border-radius: 26px;
-          background: #2D7DFF;
-        }
-      }
-
-      .bottom {
-        display: flex;
-        height: 120px;
-        align-items: center;
-        box-sizing: border-box;
-
-        .bottom-item {
-          display: flex;
-          position: relative;
-          align-items: center;
-          justify-content: center;
-          flex-direction: column;
-          flex: 1;
-          text-align: center;
-          height: 100%;
-
-          &.active:after {
-            position: absolute;
-            bottom: 0;
-            left: 50%;
-            z-index: 1;
-            width: 40px;
-            height: 6px;
-            border-radius: 3px;
-            background: #2D7DFF;
-            transform: translateX(-50%);
-            content: ' ';
-          }
-
-          span {
-            font-size: 24px;
-            color: #999;
-          }
-
-          h2 {
-            line-height: 48px;
-            font-size: 34px;
-            color: #333;
-          }
-        }
-      }
-    }
-
-    .comment {
-      padding: 0 32px;
-
-      .comment-item {
-        margin-bottom: 24px;
-        padding: 28px 24px;
-        border-radius: 18px;
-        background: #fff;
-
-        .comment-top {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-
-          span {
-            font-size: 28px;
-            color: #333;
-          }
-
-          image {
-            width: 40px;
-            height: 40px;
-          }
-        }
-
-        & > p {
-          line-height: 1.3;
-          margin: 26px 0 20px;
-          font-size: 28px;
-          color: #666666;
-        }
-
-        .bottom {
-          padding: 24px;
-          background: #f6f6f6;
-        }
-
-        .item-top {
-          display: flex;
-          align-items: center;
-
-          .avatar {
-            width: 96px;
-            height: 96px;
-            margin-right: 16px;
-            border-radius: 50%;
-          }
-
-          .right {
-            flex: 1;
-          }
-
-          .remove {
-            width: 40px;
-            height: 40px;
-          }
-
-          h3 {
-            color: #333333;
-            text-align: left;
-            font-size: 34px;
-            font-weight: 500;
-          }
-
-          span {
-            margin-top: 12px;
-            color: #999999;
-            font-size: 28px;
-          }
-        }
-
-      .item-imgs {
-          display: flex;
-          align-items: center;
-          flex-wrap: wrap;
-
-          image {
-            height: 208px;
-            width: 33.33%;
-            padding-right: 12px;
-            margin-bottom: 12px;
-            box-sizing: border-box;
-
-            &:nth-of-type(3n) {
-              padding-right: 0;
-            }
-          }
-        }
-
-        .item-content {
-          margin: 16px 0;
-          line-height: 1.3;
-          text-align: justify;
-          word-break: break-all;
-          text-overflow: ellipsis;
-          overflow: hidden;
-          display: -webkit-box;
-          -webkit-box-orient: vertical;
-          -webkit-line-clamp: 2;
-
-          span {
-            font-size: 28px;
-            color: #4181FF;
-          }
-
-          text {
-            font-size: 28px;
-            color: #333333;
-          }
-        }
-      }
-    }
-
-    .body-list {
-      .item {
-        margin: 0 32px 24px;
-        padding: 24px 24px 0;
-        background: #ffffff;
-        border-radius: 16px;
-        box-shadow: inset 0 -1px 0 0 #eeeeee;
-
-        .item-top {
-          display: flex;
-          align-items: center;
-
-          .avatar {
-            width: 96px;
-            height: 96px;
-            margin-right: 16px;
-            border-radius: 50%;
-          }
-
-          .right {
-            flex: 1;
-          }
-
-          .remove {
-            width: 40px;
-            height: 40px;
-          }
-
-          h3 {
-            color: #333333;
-            text-align: left;
-            font-size: 34px;
-            font-weight: 500;
-          }
-
-          span {
-            margin-top: 12px;
-            color: #999999;
-            font-size: 28px;
-          }
-        }
-
-        .item-imgs {
-          display: flex;
-          align-items: center;
-          flex-wrap: wrap;
-
-          image {
-            height: 208px;
-            width: 33.33%;
-            padding-right: 12px;
-            margin-bottom: 12px;
-            box-sizing: border-box;
-
-            &:nth-of-type(3n) {
-              padding-right: 0;
-            }
-          }
-        }
-
-        & > p {
-          margin: 12px 0;
-          font-size: 28px;
+        h2 {
           color: #333333;
+          font-size: 34px;
+          font-weight: 600;
+        }
+      }
+
+      .add-btn {
+        width: 132px;
+        height: 56px;
+        line-height: 56px;
+        text-align: center;
+        font-size: 30px;
+        color: #fff;
+        border-radius: 26px;
+        background: #2D7DFF;
+      }
+    }
+
+    .bottom {
+      display: flex;
+      height: 120px;
+      align-items: center;
+      box-sizing: border-box;
+
+      .bottom-item {
+        display: flex;
+        position: relative;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        flex: 1;
+        text-align: center;
+        height: 100%;
+
+        &.active:after {
+          position: absolute;
+          bottom: 0;
+          left: 50%;
+          z-index: 1;
+          width: 40px;
+          height: 6px;
+          border-radius: 3px;
+          background: #2D7DFF;
+          transform: translateX(-50%);
+          content: ' ';
         }
 
-        .item-bottom {
-          display: flex;
-          align-items: center;
-          height: 88px;
-          border-top: 1px solid #eeeeee;
-
-          div {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex: 1;
-
-            image {
-              width: 40px;
-              height: 40px;
-              margin: 16px;
-            }
-
-            i {
-              color: #687DA6;
-              font-size: 28px;
-            }
-          }
+        span {
+          font-size: 24px;
+          color: #999;
         }
 
-        .item-content {
-          margin: 16px 0;
-          line-height: 1.3;
-          text-align: justify;
-          word-break: break-all;
-          text-overflow: ellipsis;
-          overflow: hidden;
-          display: -webkit-box;
-          -webkit-box-orient: vertical;
-          -webkit-line-clamp: 2;
-
-          span {
-            font-size: 28px;
-            color: #4181FF;
-          }
-
-          text {
-            font-size: 28px;
-            color: #333333;
-          }
+        h2 {
+          line-height: 48px;
+          font-size: 34px;
+          color: #333;
         }
       }
     }
   }
+
+  .comment {
+    padding: 0 32px;
+
+    .comment-item {
+      margin-bottom: 24px;
+      padding: 28px 24px;
+      border-radius: 18px;
+      background: #fff;
+
+      .comment-top {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        span {
+          font-size: 28px;
+          color: #333;
+        }
+
+        image {
+          width: 40px;
+          height: 40px;
+        }
+      }
+
+      & > p {
+        line-height: 1.3;
+        margin: 26px 0 20px;
+        font-size: 28px;
+        color: #666666;
+      }
+
+      .bottom {
+        padding: 24px;
+        background: #f6f6f6;
+      }
+
+      .item-top {
+        display: flex;
+        align-items: center;
+
+        .avatar {
+          width: 96px;
+          height: 96px;
+          margin-right: 16px;
+          border-radius: 50%;
+        }
+
+        .right {
+          flex: 1;
+        }
+
+        .remove {
+          width: 40px;
+          height: 40px;
+        }
+
+        h3 {
+          color: #333333;
+          text-align: left;
+          font-size: 34px;
+          font-weight: 500;
+        }
+
+        span {
+          margin-top: 12px;
+          color: #999999;
+          font-size: 28px;
+        }
+      }
+
+      .item-imgs {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+
+        image {
+          height: 208px;
+          width: 33.33%;
+          padding-right: 12px;
+          margin-bottom: 12px;
+          box-sizing: border-box;
+
+          &:nth-of-type(3n) {
+            padding-right: 0;
+          }
+        }
+      }
+
+      .item-content {
+        margin: 16px 0;
+        line-height: 1.3;
+        text-align: justify;
+        word-break: break-all;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+
+        span {
+          font-size: 28px;
+          color: #4181FF;
+        }
+
+        text {
+          font-size: 28px;
+          color: #333333;
+        }
+      }
+    }
+  }
+
+  .body-list {
+    .item {
+      margin: 0 32px 24px;
+      padding: 24px 24px 0;
+      background: #ffffff;
+      border-radius: 16px;
+      box-shadow: inset 0 -1px 0 0 #eeeeee;
+
+      .item-top {
+        display: flex;
+        align-items: center;
+
+        .avatar {
+          width: 96px;
+          height: 96px;
+          margin-right: 16px;
+          border-radius: 50%;
+        }
+
+        .right {
+          flex: 1;
+        }
+
+        .remove {
+          width: 40px;
+          height: 40px;
+        }
+
+        h3 {
+          color: #333333;
+          text-align: left;
+          font-size: 34px;
+          font-weight: 500;
+        }
+
+        span {
+          margin-top: 12px;
+          color: #999999;
+          font-size: 28px;
+        }
+      }
+
+      .item-imgs {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+
+        image {
+          height: 208px;
+          width: 33.33%;
+          padding-right: 12px;
+          margin-bottom: 12px;
+          box-sizing: border-box;
+
+          &:nth-of-type(3n) {
+            padding-right: 0;
+          }
+        }
+      }
+
+      & > p {
+        margin: 12px 0;
+        font-size: 28px;
+        color: #333333;
+      }
+
+      .item-bottom {
+        display: flex;
+        align-items: center;
+        height: 88px;
+        border-top: 1px solid #eeeeee;
+
+        div {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex: 1;
+
+          image {
+            width: 40px;
+            height: 40px;
+            margin: 16px;
+          }
+
+          i {
+            color: #687DA6;
+            font-size: 28px;
+          }
+        }
+      }
+
+      .item-content {
+        margin: 16px 0;
+        line-height: 1.3;
+        text-align: justify;
+        word-break: break-all;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+
+        span {
+          font-size: 28px;
+          color: #4181FF;
+        }
+
+        text {
+          font-size: 28px;
+          color: #333333;
+        }
+      }
+    }
+  }
+}
 </style>