From eb903e592f0b3b5eda3fdac1f6aa4983ea0780af Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Wed, 13 Jul 2022 10:19:33 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9D=91=E6=B0=91=E5=9C=88=E5=85=A5=E5=BA=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../shandong10086/AppVillager/AppVillager.vue | 883 ++++++++++++++++++
 src/project/shandong10086/AppVillager/add.vue | 332 +++++++
 .../shandong10086/AppVillager/detail.vue      | 623 ++++++++++++
 3 files changed, 1838 insertions(+)
 create mode 100644 src/project/shandong10086/AppVillager/AppVillager.vue
 create mode 100644 src/project/shandong10086/AppVillager/add.vue
 create mode 100644 src/project/shandong10086/AppVillager/detail.vue

diff --git a/src/project/shandong10086/AppVillager/AppVillager.vue b/src/project/shandong10086/AppVillager/AppVillager.vue
new file mode 100644
index 0000000..d2fc1fa
--- /dev/null
+++ b/src/project/shandong10086/AppVillager/AppVillager.vue
@@ -0,0 +1,883 @@
+<template>
+  <div class="AppVillager" v-if="isAuthed">
+    <!-- <u-tabs class="u-tabs1" :list="tabs" :is-scroll="false" :current="tabIndex0" @change="changeChange" bg-color="#197df0" style="width: 50%" active-color="#FFF;" inactive-color="#FFF"></u-tabs> -->
+    <div class="topUtabs">
+      <div class="utabs" :class="tabIndex0 == index ? 'active0' : ''" v-for="(itemTab, index) in tabs" :key="index"
+           @click="changeChange(index)">
+        <span class="itemTabs"> {{ itemTab.name }}</span>
+        <span class="lineBot"></span>
+      </div>
+    </div>
+
+    <div class="top">
+      <div class="tabIndex012" v-if="tabIndex0 != 3">
+        <div class="scrolls">
+          <span class="tags" :class="tabIndex00 == indexs ? 'active' : 'noactive'"
+                v-for="(e, indexs) in $dict.getDict('villagerCircleTopic')" :key="indexs"
+                @click="changeTabIndex00(indexs)">{{ e.dictName }}</span>
+        </div>
+      </div>
+
+      <u-tabs class="u-tabs2" :list="tabList" :is-scroll="false" :current="tabCurrent1" @change="changetabIndex"
+              bg-color="#fff" active-color="#333;" inactive-color="#999" v-if="tabIndex0 == 3"></u-tabs>
+
+      <div class="indexTab22" v-if="tabIndex0 == 3">
+        <div class="tags" v-for="(e, i) in itemLists" :key="i" :class="indexTab2 == i ? 'active' : 'noactive'"
+             @click="hander(i)">{{ e.dictName }}
+        </div>
+      </div>
+    </div>
+
+    <div class="middle">
+      <div class="datas" v-if="data.length">
+        <div class="card" v-for="(item, index) in data" :key="index" @click="toDetail(item)">
+          <div class="cardTop">
+            <span v-if="tabIndex0 != 3">
+              <img :src="item.avatarUrl" alt="" v-if="item.avatarUrl" class="img"/>
+              <img src="../../static/img/avatar.png" alt="" class="img" v-else/>
+            </span>
+
+            <span v-if="tabIndex0 == 3">
+              <img :src="item.avatarUrl || user.avatarUrl" alt="" v-if="item.avatarUrl || user.avatarUrl" class="img"/>
+            </span>
+
+            <div class="rightTop">
+              <div class="leftStaus">
+                <span class="names">{{ item.createUserName || user.realName }}</span>
+
+                <span class="titless">
+                  <span v-if="item.topic" class="topics"> {{
+                      $dict.getLabel('villagerCircleTopic', item.topic)
+                    }} |</span>
+                  <span> {{ item.createTime }}</span>
+                </span>
+              </div>
+
+              <div class="statusDele">
+                <div class="status" :class="item.status == 0 ? 'status2' : item.status == 1 ? 'status0' : 'status1'"
+                     v-if="tabIndex0 == 3">
+                  <span>{{ item.status == 0 ? '审核中' : item.status == 1 ? '已通过' : '未通过' }}</span>
+                </div>
+
+                <img src="https://cdn.cunwuyun.cn/dvcp/AppVillager/4.png" alt="" @click.stop="toShowMask(item, $event)"
+                     class="dels" :class="tabIndex0 == 3 && item.status != 0 ? '' : 'opacityYes'"/>
+              </div>
+            </div>
+          </div>
+
+          <!--内容 图片 地区 分享 留言 点赞 -->
+          <div class="tabCurrent0" v-if="tabCurrent1 != 1">
+            <div class="cardConts">{{ item.content }}</div>
+
+            <div class="cardImg" v-if="item.pictures">
+              <img :src="items.url" alt="" v-for="(items, i) in item.pictures" :key="i" v-if="i < 3"/>
+            </div>
+
+            <!-- 地区 -->
+            <div class="cardBot">
+              <div class="icons">
+                <u-icon name="map-fill"></u-icon>
+                <span>{{ item.gpsDesc }}</span>
+              </div>
+
+              <!-- 分享 留言 点赞 -->
+              <div class="icones" v-if="tabIndex0 != 3">
+                <div class="img1"></div>
+
+                <div class="rightFlex">
+                  <img src="https://cdn.cunwuyun.cn/dvcp/AppVillager/2.png" alt="" class="img2"
+                       @click.stop=";(poupShow = true), (ReplyId = item.id)"/>
+
+                  <img src="https://cdn.cunwuyun.cn/dvcp/AppVillager/3.png" alt="" class="img3" @click.stop="like(item)"
+                       v-if="item.upFlag == 0"/>
+                  <img src="https://cdn.cunwuyun.cn/dvcp/AppVillager/33.png" alt="" class="img3"
+                       @click.stop="like(item)" v-if="item.upFlag == 1"/>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 回复的主题 -->
+          <div class="tabCurrent11" v-if="tabIndex0 == 3 && tabCurrent1 == 1">
+            <div class="cardsConts">{{ item.content }}</div>
+
+            <div class="reply">
+              <span class="toReply">回复的话题 ：</span>
+              <span class="contens">{{ item.villagerCircleInfo.content }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <AiEmpty description="暂无数据" class="emptyWrap" v-else></AiEmpty>
+    </div>
+
+    <movable-area class="eareas">
+      <movable-view direction="all" class="max" x="270" y="430">
+        <img class="addBtns" src="https://cdn.cunwuyun.cn/dvcp/AppVillager/icon111.png" alt="" v-if="tabIndex0 != 3"
+             @click.native="toAdd()"/>
+      </movable-view>
+    </movable-area>
+
+    <u-modal v-model="delShow" content="确定删除该数据" :mask-close-able="true" :show-cancel-button="true"
+             @confirm="confirmDel"></u-modal>
+
+    <u-mask :show="delAndEdit" @click="closeMask">
+      <div class="warp" :style="{ top: tops + 'px', left: rights + 'px' }">
+        <div class="rect" @tap.stop="toMask()">删除</div>
+      </div>
+    </u-mask>
+
+    <u-popup v-model="poupShow" height="auto" mode="bottom">
+      <div class="comments-wrapper" :style="{ paddingBottom: heights + 'px' }">
+        <div class="form-item form-item__textarea">
+          <div class="form-item__wrapper">
+            <div class="form-item__right">
+              <textarea v-model="ReplyCont" class="textareas" :maxlength="140" placeholder="请输入内容..."
+                        @keyboardheightchange="keyboard"></textarea>
+            </div>
+          </div>
+        </div>
+
+        <div class="words">{{ ReplyCont.length }}/140</div>
+
+        <div class="bottombtn">
+          <div class="emptys" @click="ReplyCont = ''">清空内容</div>
+
+          <div class="publishs" @click="send">发送</div>
+        </div>
+      </div>
+    </u-popup>
+  </div>
+
+  <AiEmpty :description="`请往'我的-个人身份认证'<br/>进行身份认证`" v-else/>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+
+export default {
+  name: 'AppVillager',
+  appName: '村民圈',
+  components: {},
+  props: {},
+  data() {
+    return {
+      tabs: [
+        {
+          name: '本村',
+        },
+        {
+          name: '本镇',
+        },
+        {
+          name: '本县',
+        },
+        {
+          name: '我参与的',
+        },
+      ],
+      tabIndex0: 0,
+      tabList: [
+        {
+          name: '我的话题',
+        },
+        {
+          name: '我的评论',
+        },
+      ],
+      tabCurrent1: 0,
+      data: [],
+      itemLists: [
+        {dictName: '全部', dictValue: '', dictColor: null},
+        {dictName: '已通过', dictValue: '1', dictColor: null},
+        {dictName: '未通过', dictValue: '2', dictColor: null},
+        {dictName: '审核中', dictValue: '0', dictColor: null},
+      ],
+      indexTab2: 0,
+      delShow: false,
+      current: 1,
+      TopicValue: '0',
+      TopicName: '美丽庭院',
+      flag: false,
+      delAndEdit: false,
+      editId: '',
+      statDisabled: '',
+      tabIndex00: '0',
+      poupShow: false,
+      Replyflag: false,
+      ReplyId: '',
+      ReplyCont: '',
+      tops: '',
+      rights: '',
+      heights: '',
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+    isAuthed() {
+      return this.user.status == 2
+    },
+  },
+  watch: {},
+  onLoad() {
+    this.$dict.load('villagerCircleTopic', 'auditStatus').then(() => {
+      this.init()
+    })
+  },
+  onShow() {
+    uni.$on('updateList', () => {
+      this.inits()
+    })
+  },
+  methods: {
+    getList() {
+      this.$instance
+      .post(this.tabIndex0 == 3 ? '/app/appvillagercircleinfo/list-xcxme' : '/app/appvillagercircleinfo/list-xcx', null, {
+        params: {
+          size: 6,
+          current: this.current,
+          topic: this.tabIndex0 != 3 ? this.tabIndex00 : '',
+          status: this.tabIndex0 == 3 && this.indexTab2 == 0 ? '' : this.tabIndex0 == 3 && this.indexTab2 == 1 ? 1 : this.tabIndex0 == 3 && this.indexTab2 == 2 ? 2 : this.tabIndex0 == 3 && this.indexTab2 == 3 ? 0 : '',
+          areaId: this.tabIndex0 != 3 ? this.user.areaId : '',
+          listType: this.tabIndex0 == 3 && this.tabCurrent1 == 0 ? '0' : this.tabIndex0 == 3 && this.tabCurrent1 == 1 ? '1' : this.tabIndex0 == 0 ? '0' : this.tabIndex0 == 1 ? '1' : this.tabIndex0 == 2 ? '2' : '',
+        },
+      })
+      .then((res) => {
+        if (res.code == 0) {
+          this.data = this.current > 1 ? [...this.data, ...res.data.records] : res.data.records
+        }
+      })
+    },
+
+    init() {
+      this.data = []
+      this.current = 1
+      this.getList()
+    },
+
+    inits() {
+      this.tabIndex0 = 0
+      this.tabCurrent1 = 0
+      this.indexTab2 = 0
+      this.data = []
+      this.current = 1
+      this.getList()
+    },
+
+    changeChange(index) {
+      if (index != 3) {
+        this.tabCurrent1 = 0
+        this.$nextTick(() => {
+          this.tabIndex0 = index
+          this.init()
+        })
+      }
+      if (index == 3) {
+        this.tabIndex0 = index
+        this.init()
+      }
+    },
+
+    changetabIndex(e) {
+      this.tabCurrent1 = e
+      this.$nextTick(() => {
+        this.indexTab2 = 0
+        this.init()
+      })
+    },
+
+    hander(i) {
+      this.indexTab2 = i
+      this.$nextTick(() => {
+        this.init()
+      })
+    },
+
+    toDetail(item) {
+      this.$linkTo(`./detail?id=${item.id}&avatarUrl=${item.avatarUrl ? item.avatarUrl : ''}&tabCurrent1=${this.tabCurrent1}&tabIndex0=${this.tabIndex0}&gpsDesc=${item.villagerCircleInfo ? item.villagerCircleInfo.gpsDesc : ''}&titleType=${this.tabIndex0 != 3 ? 0 : this.tabIndex0 == 3 && this.tabCurrent1 == 0 ? 1 : this.tabIndex0 == 3 && this.tabCurrent1 == 1 ? 2 : ''}`)
+    },
+
+    toAdd() {
+      this.delAndEdit = false
+      this.$linkTo(`./add`)
+    },
+
+    confirmDel() {
+      this.$instance
+      .post(this.tabIndex0 == 3 && this.tabCurrent1 == 1 ? '/app/appvillagercirclecomment/delete' : '/app/appvillagercircleinfo/delete', null, {
+        params: {
+          ids: this.deleId,
+        },
+      })
+      .then((res) => {
+        if (res.code == 0) {
+          this.deleShow = false
+          this.modalShow = false
+          this.deleId = ''
+          this.statDisabled = ''
+          this.$u.toast('删除成功')
+          this.init()
+        }
+      })
+      .catch((e) => {
+        this.$u.toast(e)
+      })
+    },
+
+    conTopic(e) {
+      this.TopicValue = e[0].value
+      this.TopicName = e[0].label
+      this.$nextTick(() => {
+        this.init()
+      })
+    },
+
+    toShowMask(item, data) {
+      this.delAndEdit = true
+      this.$nextTick(() => {
+        if (data.touches[0].clientY * 1 < 100) {
+          this.tops = data.touches[0].clientY * 1 + 10
+        } else {
+          this.tops = data.touches[0].clientY * 1 - 80
+        }
+        this.rights = (data.detail.x * 1) / 2 - 50
+      })
+      this.editId = item.id
+      this.deleId = item.id
+      this.statDisabled = item.status
+    },
+
+    closeMask() {
+      this.delAndEdit = false
+      this.statDisabled = ''
+      setTimeout(() => {
+        this.tops = ''
+        this.rights = ''
+      }, 301)
+    },
+
+    keyboard(e) {
+      const info = wx.getSystemInfoSync()
+      if (info.platform === 'android') {
+        this.heights = e.detail.height - 20
+      } else {
+        this.heights = e.detail.height - 80
+      }
+    },
+
+    toMask() {
+      this.delAndEdit = false
+      this.delShow = true
+    },
+
+    changeTabIndex00(e) {
+      this.tabIndex00 = e
+      this.$nextTick(() => {
+        this.init()
+      })
+    },
+
+    like(item) {
+      if (this.flag) return
+
+      this.flag = true
+      this.$instance
+      .post(`/app/appvillagercircleinfo/up?id=${item.id}`)
+      .then((res) => {
+        if (res.code === 0) {
+          this.$u.toast(item.upFlag == 0 ? '点赞成功' : '取消点赞成功')
+          this.getList()
+          setTimeout(() => {
+            this.flag = false
+          }, 600)
+        }
+      })
+      .catch((err) => {
+        this.$u.toast(err)
+        this.flag = false
+      })
+    },
+
+    send() {
+      if (this.Replyflag) return
+
+      if (!this.ReplyCont) {
+        return this.$u.toast('请输入内容')
+      }
+
+      this.Replyflag = true
+      this.$instance
+      .post(`/app/appvillagercirclecomment/addOrUpdate`, {
+        content: this.ReplyCont,
+        replyUserResidentId: this.user.id,
+        replyUserName: this.user.realName,
+        areaId: this.user.areaId,
+        vcId: this.ReplyId,
+      })
+      .then((res) => {
+        if (res.code == 0) {
+          this.$u.toast('发送成功')
+          this.ReplyId = ''
+          this.ReplyCont = ''
+          this.poupShow = false
+          this.Replyflag = false
+        }
+      })
+      .catch(() => {
+        this.Replyflag = false
+        this.$u.toast('发送失败')
+      })
+    },
+  },
+  onReachBottom() {
+    this.current = this.current + 1
+    this.getList()
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.AppVillager {
+  background-color: #fff;
+  height: 100%;
+  width: 100vw;
+  height: 100vh;
+  overflow-x: hidden;
+
+  .active {
+    color: #4181ff !important;
+    border: 1px solid #4181ff !important;
+  }
+
+  .noactive {
+    color: #666;
+    border: 1px solid #ddd;
+  }
+
+  .topUtabs {
+    display: flex;
+    background: #4181ff;
+    padding: 52px 0 74px 0;
+
+    .utabs {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      font-size: 40px;
+      font-weight: 500;
+      color: #ffffff;
+      transition-duration: 0.5s;
+      margin-left: 32px;
+
+      .itemTabs {
+        padding-bottom: 10px;
+      }
+    }
+
+    .active0 {
+      transition-duration: 0.5s;
+
+      .itemTabs {
+        font-size: 44px;
+      }
+
+      .lineBot {
+        transition-duration: 0.5s;
+        display: inline-block;
+        text-align: center;
+        width: 48px;
+        height: 6px;
+        background: #fff;
+        border-radius: 4px;
+      }
+    }
+  }
+
+  ::v-deep .u-tabs1 {
+    .u-tabs {
+      padding: 32px 0 60px 0;
+      width: 100%;
+      background: #197df0;
+      box-sizing: border-box;
+    }
+  }
+
+  .top {
+    padding: 0 16px 32px 16px;
+    background: #fff;
+    border-radius: 32px 32px 0 0;
+    margin-top: -30px;
+    overflow: hidden;
+
+    .tabIndex012 {
+      padding-top: 32px;
+
+      .scrolls {
+        display: flex;
+        white-space: nowrap;
+        overflow-x: scroll;
+        width: 100%;
+
+        .tags {
+          padding: 8px 32px;
+          background: #ffffff;
+          border-radius: 32px;
+          margin-left: 16px;
+          border: 1px solid #ddd;
+          color: #666;
+        }
+
+        .tags:first-child {
+          margin-left: 0;
+        }
+      }
+    }
+
+    .indexTab22 {
+      padding-top: 32px;
+      display: flex;
+
+      .tags {
+        padding: 8px 32px;
+        background: #ffffff;
+        border-radius: 32px;
+        margin-left: 16px;
+        border: 1px solid #ddd;
+      }
+    }
+
+    ::v-deep .u-tabs2 {
+      .u-tabs {
+        padding: 0 !important;
+      }
+    }
+  }
+
+  .middle {
+    padding: 0 32px;
+    background: #fff;
+
+    .datas {
+      .card {
+        padding: 32px 0 48px 0;
+        box-shadow: inset 0px -1px 0px 0px #dddddd;
+
+        .cardTop {
+          display: flex;
+
+          .img {
+            width: 96px;
+            height: 96px;
+            border-radius: 50%;
+          }
+
+          .rightTop {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            width: calc(100% - 96px);
+
+            .leftStaus {
+              display: flex;
+              flex-direction: column;
+              margin-left: 16px;
+
+              .names {
+                font-size: 32px;
+                font-weight: 500;
+              }
+
+              .titless {
+                font-size: 26px;
+                color: #6e727a;
+                margin-top: 6px;
+
+                .topics {
+                  margin-right: 8px;
+                }
+              }
+            }
+
+            .statusDele {
+              display: flex;
+              align-items: center;
+
+              .status {
+                font-size: 28px;
+              }
+
+              .status0 {
+                color: #42d784;
+              }
+
+              .status1 {
+                color: #ff4466;
+              }
+
+              .status2 {
+                color: #ff883c;
+              }
+
+              .dels {
+                position: relative;
+                margin-left: 20px;
+                width: 50px;
+                height: 50px;
+              }
+
+              .opacityYes {
+                visibility: hidden;
+              }
+            }
+          }
+        }
+
+        .tabCurrent0 {
+          .cardConts {
+            margin-top: 24px;
+            font-size: 32px;
+            line-height: 48px;
+          }
+
+          .cardImg {
+            margin-top: 24px;
+
+            img {
+              width: 226px;
+              height: 226px;
+              margin-right: 4px;
+            }
+
+            img:nth-child(3n + 0) {
+              margin-right: 0;
+            }
+          }
+
+          .cardBot {
+            margin-top: 24px;
+
+            .icons {
+              display: inline-block;
+              padding: 8px 32px 8px 16px;
+              background: #eff1f3;
+              border-radius: 28px;
+            }
+
+            .icones {
+              display: flex;
+              justify-content: space-between;
+              margin-top: 24px;
+
+              .rightFlex {
+                display: flex;
+
+                .img2,
+                .img3 {
+                  width: 48px;
+                  height: 48px;
+                }
+
+                .img3 {
+                  margin-left: 48px;
+                }
+              }
+            }
+          }
+        }
+
+        .tabCurrent11 {
+          .cardsConts {
+            margin-top: 24px;
+            font-size: 32px;
+          }
+
+          .reply {
+            display: flex;
+            padding: 24px;
+            background: #f3f6f9;
+            border-radius: 16px;
+            margin-top: 24px;
+
+            .toReply {
+              display: inline-block;
+              width: 170px;
+              font-size: 26px;
+              color: #999999;
+            }
+
+            .contens {
+              display: inline-block;
+              width: calc(100% - 170px);
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              color: #333;
+              word-break: break-all;
+              line-height: 1.5;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  ::v-deep .u-mask {
+    .warp {
+      position: absolute;
+      // top: 47%;
+      // right: 50%;
+      transform: translateX(150px);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 300px;
+      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+      border-radius: 5%;
+
+      .rect {
+        width: 100%;
+        text-align: center;
+        line-height: 4;
+        background: #fff;
+      }
+    }
+  }
+
+  .comments-wrapper {
+    padding: 16px 0;
+    background: #f7f7f7;
+
+    .form-item {
+      background: #fff;
+      margin: 0 16px;
+      border-radius: 16px 16px 0 0;
+      padding: 10px !important;
+
+      .form-item__wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 128px;
+        padding-right: 28px;
+
+        input {
+          flex: 1;
+          height: 100%;
+          text-align: right;
+          padding-right: 10px;
+        }
+
+        .form-item__right {
+          display: flex;
+          align-items: center;
+          font-size: 32px;
+
+          span {
+            max-width: 400px;
+            margin-right: 8px;
+            color: #333333;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
+
+          i {
+            margin-right: 8px;
+            color: #999999;
+          }
+        }
+      }
+
+      &:last-child {
+        .form-item__wrapper {
+          border-bottom: none;
+        }
+      }
+
+      &.form-item__imgs,
+      &.form-item__textarea {
+        .form-item__wrapper {
+          display: block;
+          height: auto;
+          padding-bottom: 32px;
+        }
+
+        textarea {
+          width: 100%;
+          height: 160px;
+        }
+
+        .form-item__right {
+          padding-left: 18px;
+
+          .textareas {
+            color: #303133;
+          }
+        }
+      }
+    }
+
+    .words {
+      background: #fff;
+      border-radius: 0 0 16px 16px;
+      margin: 0 16px;
+      padding: 10px;
+      text-align: right;
+      font-size: 26px;
+      color: #999999;
+    }
+
+    .bottombtn {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin: 0 30px;
+      padding: 20px 0 0;
+
+      .emptys {
+        font-size: 26px;
+        color: #666666;
+      }
+
+      .publishs {
+        width: 144px;
+        height: 64px;
+        line-height: 64px;
+        text-align: center;
+        background: #1365dd;
+        border-radius: 32px;
+        color: #fff;
+      }
+    }
+  }
+
+  .eareas {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    pointer-events: none;
+    z-index: 999;
+
+    .max {
+      pointer-events: auto;
+      width: auto;
+      height: auto;
+
+      .texts {
+        width: 200px;
+        height: 200px;
+        background: red;
+      }
+
+      .addBtns {
+        width: 168px;
+        height: 168px;
+        border-radius: 50%;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/project/shandong10086/AppVillager/add.vue b/src/project/shandong10086/AppVillager/add.vue
new file mode 100644
index 0000000..241610d
--- /dev/null
+++ b/src/project/shandong10086/AppVillager/add.vue
@@ -0,0 +1,332 @@
+<template>
+  <div class="add">
+    <div class="u-forms">
+      <u-form class="u-form" :model="forms" ref="uForm" label-width="auto" :border-bottom="false">
+        <u-form-item label="话题类型" prop="topicValue" required :border-bottom="false" right-icon="arrow-right">
+          <u-input v-model="forms.topicValue" disabled placeholder="请选择话题类型" @click="showStstus = true" />
+
+          <u-select v-model="showStstus" :list="$dict.getDict('villagerCircleTopic')" value-name="dictValue" label-name="dictName" @confirm="selectStatus"></u-select>
+        </u-form-item>
+
+        <div class="line"></div>
+
+        <div class="form-item form-item__textarea">
+          <div class="form-item__wrapper">
+            <div class="form-item__title">
+              <i>*</i>
+              <h2>事件描述</h2>
+            </div>
+            <div class="form-item__right">
+              <textarea v-model="forms.content" class="textareas" :maxlength="500" placeholder="分享你的动态"></textarea>
+            </div>
+          </div>
+        </div>
+
+        <div class="line"></div>
+
+        <u-form-item label="图片上传 (最多9张)" prop="pictures" :border-bottom="false" class="avatars" label-position="top">
+          <AiUploader :def.sync="forms.pictures" multiple placeholder="上传图片" :limit="9" action="/admin/file/add2"></AiUploader>
+        </u-form-item>
+
+        <div class="line"></div>
+
+        <u-form-item label="所在位置" class="gpsDescs" prop="gpsDesc" required :border-bottom="false" right-icon="arrow-right">
+          <u-input v-model="forms.gpsDesc" disabled placeholder="点击定位" @click="chooseAddress" />
+        </u-form-item>
+      </u-form>
+    </div>
+
+    <div class="btn" @click="submit">提交</div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'add',
+  components: {},
+  props: {},
+  data() {
+    return {
+      forms: {
+        topic: '',
+        topicValue: '',
+        content: '',
+        pictures: [],
+        gpsDesc: '',
+        lat: '',
+        lng: '',
+      },
+      showStstus: false,
+      flag: false,
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  onLoad() {
+    this.$dict.load('villagerCircleTopic').then(() => {
+      // var value = wx.getStorageSync('lat_lng')
+      // this.forms.lat = value.latitude
+      // this.forms.lng = value.longitude
+      // this.forms.gpsDesc = value.name
+    })
+  },
+  onShow() {
+    uni.setNavigationBarTitle({
+      title: '发布话题',
+    })
+  },
+  methods: {
+    submit() {
+      if (this.flag) return
+
+      this.$refs.uForm.validate((valid) => {
+        if (valid) {
+          if (!this.forms.topicValue) {
+            return this.$u.toast('请选择话题类型')
+          }
+          if (!this.forms.content) {
+            return this.$u.toast('请输入内容')
+          }
+          if (!this.forms.gpsDesc) {
+            return this.$u.toast('请选择所在位置')
+          }
+          if (!this.forms.lat && !this.forms.lng) {
+            return this.$u.toast('请选择所在位置')
+          }
+
+          const imgs = []
+          if (this.forms.pictures) {
+            this.forms.pictures.map((e) => {
+              imgs.push({ url: e.url, id: e.id })
+            })
+          }
+
+          this.$instance
+            .post(`/app/appvillagercircleinfo/addOrUpdate`, {
+              topic: this.forms.topic,
+              content: this.forms.content,
+              pictures: imgs || [],
+              createUserResidentId: this.user.id,
+              areaId: this.user.areaId,
+              gpsDesc: this.forms.gpsDesc,
+              lat: this.forms.lat,
+              lng: this.forms.lng,
+              id: this.id,
+            })
+            .then((res) => {
+              if (res.code == 0) {
+                this.$u.toast('提交成功')
+                // uni.clearStorageSync()
+                uni.$emit('updateList')
+                this.flag = true
+                setTimeout(() => {
+                  uni.navigateBack()
+                }, 600)
+              }
+            })
+            .catch(() => {
+              this.flag = false
+              this.$u.toast('提交失败')
+            })
+        }
+      })
+    },
+
+    selectStatus(e) {
+      this.forms.topic = e[0].value
+      this.forms.topicValue = e[0].label
+    },
+
+    chooseAddress() {
+      uni.authorize({
+        scope: 'scope.userLocation',
+        success: () => {
+          uni.chooseLocation({
+            success: (res) => {
+              this.forms.gpsDesc = res.name
+              this.forms.lat = res.latitude
+              this.forms.lng = res.longitude
+              // uni.setStorageSync('lat_lng', res)
+            },
+          })
+        },
+        fail: () => {
+          this.$dialog
+            .confirm({
+              content: '您未授权定位权限，无法选择位置',
+            })
+            .then(() => {
+              wx.openSetting({
+                success: (res) => {
+                  if (!res.authSetting['scope.userLocation']) {
+                    this.$dialog
+                      .alert({
+                        content: '您未授权定位权限，无法选择位置',
+                      })
+                      .then(() => {})
+                  } else {
+                    console.log('设置定位权限')
+                  }
+                },
+              })
+            })
+        },
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.add {
+  .u-forms {
+    padding-bottom: 112px;
+    ::v-deep .u-form {
+      background: #fff;
+      .u-form-item {
+        padding: 0 32px !important;
+        .u-form-item__body {
+          padding: 30px 0 !important;
+          .u-form-item--right__content__slot {
+            padding-bottom: 0;
+            .u-input {
+              text-align: right !important;
+            }
+          }
+        }
+      }
+
+      .form-item {
+        padding-left: 28px;
+
+        .form-item__wrapper {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          height: 128px;
+          padding-right: 28px;
+
+          input {
+            flex: 1;
+            height: 100%;
+            text-align: right;
+            padding-right: 10px;
+          }
+
+          .form-item__right {
+            display: flex;
+            align-items: center;
+            font-size: 32px;
+
+            span {
+              max-width: 400px;
+              margin-right: 8px;
+              color: #333333;
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+            }
+
+            i {
+              margin-right: 8px;
+              color: #999999;
+            }
+          }
+        }
+
+        &:last-child {
+          .form-item__wrapper {
+            border-bottom: none;
+          }
+        }
+
+        .form-item__title {
+          display: flex;
+          align-items: center;
+
+          i {
+            font-size: 32px;
+            color: #fa3534;
+            opacity: 0.65;
+            font-weight: 800;
+          }
+
+          span {
+            font-size: 28px;
+            color: #999999;
+          }
+
+          h2 {
+            padding: 0 4px;
+            font-size: 28px;
+            color: #303133;
+          }
+        }
+
+        &.form-item__imgs,
+        &.form-item__textarea {
+          .form-item__wrapper {
+            display: block;
+            height: auto;
+            padding-bottom: 32px;
+          }
+
+          textarea {
+            width: 100%;
+            height: 160px;
+          }
+
+          .form-item__title {
+            padding: 32px 0;
+          }
+
+          .form-item__right {
+            padding-left: 18px;
+            .textareas {
+              color: #303133;
+            }
+          }
+        }
+      }
+
+      .avatars {
+        .ai-uploader {
+          .AiImage {
+            .u-image {
+              // margin-right: 4px;
+            }
+          }
+        }
+      }
+
+      .gpsDescs {
+        .u-form-item {
+          margin-bottom: 120px;
+        }
+      }
+
+      .line {
+        height: 24px;
+        background: #f3f6f9;
+      }
+    }
+  }
+
+  .btn {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    height: 112px;
+    line-height: 112px;
+    background: #1365dd;
+    text-align: center;
+    font-size: 32px;
+    font-weight: 500;
+    color: #ffffff;
+    z-index: 999;
+  }
+}
+</style>
diff --git a/src/project/shandong10086/AppVillager/detail.vue b/src/project/shandong10086/AppVillager/detail.vue
new file mode 100644
index 0000000..ae11e4f
--- /dev/null
+++ b/src/project/shandong10086/AppVillager/detail.vue
@@ -0,0 +1,623 @@
+<template>
+  <div class="Page" v-if="isAuthed">
+    <div class="top" v-if="detail.status == 2 && showPage">
+      <div class="tops">{{ detail.auditOpinion }}</div>
+    </div>
+
+    <div class="middle" v-if="showPage">
+      <div class="cardTop">
+        <span v-if="tabIndex0 != 3">
+          <img :src="avatarUrl" alt="" v-if="avatarUrl" class="img" />
+          <img src="../../static/img/avatar.png" alt="" class="img" v-else />
+        </span>
+
+        <span v-if="tabIndex0 == 3">
+          <img :src="user.avatarUrl" alt="" v-if="user.avatarUrl" class="img" />
+        </span>
+
+        <div class="rightTop">
+          <div class="leftStaus">
+            <span class="names">{{ detail.createUserName || detail.replyUserName }}</span>
+
+            <span class="titless">
+              <span class="topics" v-if="detail.topic"> {{ $dict.getLabel('villagerCircleTopic', detail.topic) }} |</span>
+              <span> {{ detail.createTime }}</span>
+            </span>
+          </div>
+
+          <div class="statusDele">
+            <div class="status" :class="detail.status == 0 ? 'status2' : detail.status == 1 ? 'status0' : 'status1'" v-if="tabIndex0 == 3">
+              <span>{{ detail.status == 0 ? '审核中' : detail.status == 1 ? '已通过' : '未通过' }}</span>
+              <!-- {{ $dict.getLabel('auditStatus', detail.status) }} -->
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="cardConts">{{ tabCurrent1 == 0 ? detail.content : detail.villagerCircleInfo.content }}</div>
+
+      <!-- 图片 -->
+      <div class="cardImg" v-if="tabCurrent1 == 0">
+        <img :src="items.url" alt="" v-for="(items, i) in detail.pictures" :key="i" @click.stop="previewImage(detail.pictures, items.url)" />
+      </div>
+
+      <div class="cardImg" v-if="tabCurrent1 == 1">
+        <img :src="items.url" alt="" v-for="(items, i) in detail.villagerCircleInfo.pictures" :key="i" @click.stop="previewImage(detail.villagerCircleInfo.pictures, items.url)" />
+      </div>
+
+      <!-- 分享 留言 点赞 -->
+      <div class="cardBot">
+        <div class="icons">
+          <u-icon name="map-fill"></u-icon>
+          <span>{{ detail.gpsDesc || gpsDesc }}</span>
+        </div>
+
+        <div class="icones" v-if="tabIndex0 != 3">
+          <div class="img1">
+            <button class="buttons" open-type="share" :data-id="item.id">
+              <img src="https://cdn.cunwuyun.cn/dvcp/AppVillager/1.png" alt="" class="img11" />
+            </button>
+          </div>
+
+          <div class="rightFlex">
+            <img src="https://cdn.cunwuyun.cn/dvcp/AppVillager/2.png" alt="" class="img2" @click="poupShow = true" />
+            <img src="https://cdn.cunwuyun.cn/dvcp/AppVillager/3.png" alt="" class="img3" @click="like" v-if="detail.upFlag == 0" />
+            <img src="https://cdn.cunwuyun.cn/dvcp/AppVillager/33.png" alt="" class="img3" @click="like" v-if="detail.upFlag == 1" />
+          </div>
+        </div>
+      </div>
+
+      <!-- 评论 -->
+      <div class="reply" v-if="tabCurrent1 == 0 && (detail.upCount != 0 || commentsList.length)">
+        <div class="replyTop" v-if="detail.upCount != 0">
+          <img src="https://cdn.cunwuyun.cn/dvcp/AppVillager/3.png" alt="" />
+          <span class="people" v-if="detail.upCount != 0 && detail.upUserNames">
+            <span v-if="detail.upUserNames"> {{ detail.upUserNames }}</span>
+            <span v-if="detail.upUserNames && detail.upCount * 1 > 3">等</span>
+            <span> {{ detail.upCount > 1 ? detail.upCount : '' }}</span>
+            <span v-if="detail.upUserNames && detail.upCount > 1">人</span>
+          </span>
+        </div>
+
+        <div class="replyCont" @click="deleShowBtn(item)" v-for="(item, i) in commentsList" :key="i">
+          <span class="nameLeft">{{ item.replyUserName }} : </span>
+          <span class="contRight"> {{ item.content }}</span>
+        </div>
+      </div>
+
+      <div class="reply" v-if="tabCurrent1 == 1 && (detail.villagerCircleInfo.upCount != 0 || commentsInfoList.length)">
+        <div class="replyTop">
+          <img src="https://cdn.cunwuyun.cn/dvcp/AppVillager/3.png" alt="" />
+          <span class="people" v-if="detail.villagerCircleInfo.upCount != 0 && upUserNamesList">
+            <span v-if="upUserNamesList"> {{ upUserNamesList }}</span>
+            <span v-if="upUserNamesList && detail.villagerCircleInfo.upCount * 1 > 3">等</span>
+            <span> {{ detail.villagerCircleInfo.upCount > 1 ? detail.villagerCircleInfo.upCount : '' }}</span>
+            <span v-if="upUserNamesList && detail.villagerCircleInfo.upCount > 1">人</span>
+          </span>
+        </div>
+
+        <div class="replyCont" @click="deleShowBtn(item)" v-for="(item, i) in commentsInfoList" :key="i">
+          <span class="nameLeft">{{ item.replyUserName }} : </span>
+          <span class="contRight"> {{ item.content }}</span>
+        </div>
+      </div>
+    </div>
+
+    <u-popup v-model="poupShow" height="auto" mode="bottom">
+      <div class="comments-wrapper" :style="{ paddingBottom: heights + 'px' }">
+        <div class="form-item form-item__textarea">
+          <div class="form-item__wrapper">
+            <div class="form-item__right">
+              <textarea v-model="content" class="textareas" :maxlength="140" placeholder="请输入内容..." @keyboardheightchange="keyboard"></textarea>
+            </div>
+          </div>
+        </div>
+
+        <div class="words">{{ content.length }}/140</div>
+
+        <div class="bottombtn">
+          <div class="emptys" @click="content = ''">清空内容</div>
+
+          <div class="publishs" @click="send">发送</div>
+        </div>
+      </div>
+    </u-popup>
+  </div>
+
+  <AiEmpty :description="`请往'我的-个人身份认证'<br/>进行身份认证`" v-else />
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'detail',
+  components: {},
+  props: {},
+  data() {
+    return {
+      showPage: false,
+      id: '',
+      avatarUrl: '',
+      detail: {},
+      poupShow: false,
+      content: '',
+      flag: false,
+      pageShow: false,
+      flagLike: false,
+      tabCurrent1: '',
+      commentsList: [],
+      commentsInfoList: [],
+      nameList: [],
+      nameLists: [],
+      tabIndex0: '',
+      gpsDesc: '',
+      upUserNamesList: '',
+      titleType: '',
+      heights: '',
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+
+    isAuthed() {
+      return this.user.status == 2
+    },
+  },
+  onLoad(o) {
+    this.id = o.id
+    this.avatarUrl = o.avatarUrl
+    this.tabCurrent1 = o.tabCurrent1 || 0
+    this.tabIndex0 = o.tabIndex0
+    this.gpsDesc = o.gpsDesc
+    this.titleType = o.titleType
+    this.$dict.load('villagerCircleTopic')
+  },
+  onShow() {
+    uni.setNavigationBarTitle({
+      title: this.titleType == 0 ? '话题详情' : this.titleType == 1 ? '话题详情' : this.titleType == 2 ? '评论详情' : '',
+    })
+    this.getDetail()
+  },
+  methods: {
+    getDetail() {
+      this.$instance
+        .post(`/app/${this.tabCurrent1 != 0 ? 'appvillagercirclecomment' : 'appvillagercircleinfo'}/queryDetailById`, null, {
+          params: {
+            id: this.id,
+          },
+        })
+        .then((res) => {
+          if (res?.data) {
+            this.detail = res.data
+            // 我的话题通过的 不重复的评论
+            if (this.detail.comments && this.detail.comments) {
+              let lists = []
+              this.detail.comments.map((e) => {
+                if (e.status == 1) {
+                  lists.push(e)
+                }
+              })
+              this.commentsList = lists
+
+              if (this.commentsList.length) {
+                var arr = this.commentsList
+                var obj = {}
+                this.nameList = arr.reduce(function (item, next) {
+                  obj[next.replyUserName] ? '' : (obj[next.replyUserName] = true && item.push(next))
+                  return item
+                }, [])
+              }
+            }
+            // 我的话题点赞人数
+            if (this.detail.upUserNames) {
+              this.detail.upUserNames = this.detail && this.detail.upUserNames.match(/[^\u3001]+(?:\u3001[^\u3001]+){2,2}/) == null ? this.detail.upUserNames : this.detail && this.detail.upUserNames.match(/[^\u3001]+(?:\u3001[^\u3001]+){2,2}/)[0]
+            }
+            // 我的评论 通过不重复的的评论
+            if (this.detail.villagerCircleInfo && this.detail.villagerCircleInfo.comments) {
+              let listss = []
+              this.detail.villagerCircleInfo &&
+                this.detail.villagerCircleInfo.comments.map((item) => {
+                  if (item.status == 1) {
+                    listss.push(item)
+                  }
+                })
+              this.commentsInfoList = listss
+
+              if (this.commentsInfoList.length) {
+                arr = this.commentsInfoList
+                obj = {}
+                this.nameLists = arr.reduce(function (item, next) {
+                  obj[next.replyUserName] ? '' : (obj[next.replyUserName] = true && item.push(next))
+                  return item
+                }, [])
+              }
+            }
+            // 我的评论 点赞人数
+            if (this.detail.villagerCircleInfo) {
+              const upUserName = this.detail.villagerCircleInfo.upUserNames
+              this.upUserNamesList = upUserName.match(/[^\u3001]+(?:\u3001[^\u3001]+){2,2}/) == null ? upUserName : upUserName.match(/[^\u3001]+(?:\u3001[^\u3001]+){2,2}/)[0]
+            }
+          }
+        })
+        .finally(() => {
+          this.showPage = true
+        })
+    },
+
+    send() {
+      if (this.flag) return
+      if (!this.content) {
+        return this.$u.toast('请输入内容')
+      }
+      this.flag = true
+      this.$instance
+        .post(`/app/appvillagercirclecomment/addOrUpdate`, {
+          content: this.content,
+          replyUserResidentId: this.user.id,
+          replyUserName: this.user.realName,
+          areaId: this.user.areaId,
+          vcId: this.detail.id,
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            this.$u.toast('发送成功')
+            this.content = ''
+            this.poupShow = false
+            this.getDetail()
+            this.flag = false
+          }
+        })
+        .catch(() => {
+          this.flag = false
+          this.$u.toast('发送失败')
+        })
+    },
+
+    like() {
+      if (this.flagLike) return
+
+      this.flagLike = true
+      this.$instance
+        .post(`/app/appvillagercircleinfo/up?id=${this.detail.id}&userId=${this.user.id}`)
+        .then((res) => {
+          this.$hideLoading()
+          if (res.code === 0) {
+            this.$u.toast(this.detail.upFlag == 0 ? '点赞成功' : '取消点赞成功')
+            this.getDetail()
+            setTimeout(() => {
+              this.flagLike = false
+            }, 600)
+          }
+        })
+        .catch((err) => {
+          this.$u.toast(err)
+          this.flagLike = false
+        })
+    },
+
+    previewImage(images, img) {
+      uni.previewImage({
+        urls: images.map((v) => v.url),
+        current: img,
+      })
+    },
+
+    keyboard(e) {
+      const info = wx.getSystemInfoSync()
+      if (info.platform === 'android') {
+        this.heights = e.detail.height + 10
+      } else {
+        this.heights = e.detail.height - 250
+      }
+    },
+  },
+  onShareAppMessage() {
+    let {
+      detail: { id },
+      tabCurrent1,
+    } = this
+    return {
+      title: this.detail.content,
+      path: this.$qs.stringifyUrl({
+        url: '/pages/AppVillager/detail',
+        query: { id, tabCurrent1 },
+      }),
+    }
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.Page {
+  background-color: #fff;
+  height: 100%;
+  height: 100vh;
+
+  .top {
+    padding-top: 32px;
+
+    .tops {
+      padding: 24px;
+      font-size: 26px;
+      color: #ff4466;
+      background: #fff5f7;
+      border-radius: 16px;
+    }
+  }
+
+  .middle {
+    padding: 32px 32px 48px 32px;
+    background: #fff;
+
+    .cardTop {
+      display: flex;
+
+      .img {
+        width: 96px;
+        height: 96px;
+        border-radius: 50%;
+      }
+
+      .rightTop {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: calc(100% - 96px);
+
+        .leftStaus {
+          display: flex;
+          flex-direction: column;
+          margin-left: 16px;
+
+          .names {
+            font-size: 32px;
+            font-weight: 500;
+          }
+
+          .titless {
+            font-size: 26px;
+            color: #6e727a;
+            margin-top: 6px;
+
+            .topics {
+              margin-right: 8px;
+            }
+          }
+        }
+
+        .statusDele {
+          display: flex;
+          align-items: center;
+
+          .status {
+            font-size: 28px;
+          }
+
+          .status0 {
+            color: #42d784;
+          }
+
+          .status1 {
+            color: #ff4466;
+          }
+
+          .status2 {
+            color: #ff883c;
+          }
+        }
+      }
+    }
+
+    .cardConts {
+      margin-top: 24px;
+      font-size: 32px;
+      line-height: 48px;
+    }
+
+    .cardImg {
+      margin-top: 24px;
+
+      img {
+        width: 226px;
+        height: 226px;
+        margin-right: 4px;
+      }
+
+      img:nth-child(3n + 0) {
+        margin-right: 0;
+      }
+    }
+
+    .cardBot {
+      margin-top: 24px;
+
+      .icons {
+        display: inline-block;
+        padding: 8px 32px 8px 16px;
+        background: #eff1f3;
+        border-radius: 28px;
+      }
+
+      .icones {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 24px;
+
+        .img1 {
+          .buttons {
+            justify-content: flex-start !important;
+
+            .img11 {
+              width: 48px;
+              height: 48px;
+            }
+          }
+        }
+
+        .rightFlex {
+          display: flex;
+
+          .img2,
+          .img3 {
+            width: 48px;
+            height: 48px;
+          }
+
+          .img3 {
+            margin-left: 48px;
+          }
+        }
+      }
+    }
+
+    .reply {
+      margin-top: 32px;
+      padding: 0 24px 24px 24px;
+      background: #f7f8f9;
+      border-radius: 16px;
+
+      .replyTop {
+        padding: 20px 0;
+        box-shadow: inset 0px -1px 0px 0px #eee;
+
+        img {
+          width: 40px;
+          height: 40px;
+          vertical-align: bottom;
+        }
+
+        .people {
+          font-size: 28px;
+          font-weight: 500;
+          color: #485d87;
+          margin-left: 8px;
+        }
+      }
+
+      .replyCont {
+        padding-top: 24px;
+        font-size: 28px;
+        font-weight: 500;
+
+        .nameLeft {
+          color: #485d87;
+          margin-right: 12px;
+        }
+
+        .contRight {
+          color: #333;
+        }
+      }
+    }
+  }
+
+  .comments-wrapper {
+    padding: 16px 0;
+    background: #f7f7f7;
+
+    .form-item {
+      background: #fff;
+      margin: 0 16px;
+      border-radius: 16px 16px 0 0;
+      padding: 10px !important;
+
+      .form-item__wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 128px;
+        padding-right: 28px;
+
+        input {
+          flex: 1;
+          height: 100%;
+          text-align: right;
+          padding-right: 10px;
+        }
+
+        .form-item__right {
+          display: flex;
+          align-items: center;
+          font-size: 32px;
+
+          span {
+            max-width: 400px;
+            margin-right: 8px;
+            color: #333333;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
+
+          i {
+            margin-right: 8px;
+            color: #999999;
+          }
+        }
+      }
+
+      &:last-child {
+        .form-item__wrapper {
+          border-bottom: none;
+        }
+      }
+
+      &.form-item__imgs,
+      &.form-item__textarea {
+        .form-item__wrapper {
+          display: block;
+          height: auto;
+          padding-bottom: 32px;
+        }
+
+        textarea {
+          width: 100%;
+          height: 160px;
+        }
+
+        .form-item__right {
+          padding-left: 18px;
+
+          .textareas {
+            color: #303133;
+          }
+        }
+      }
+    }
+
+    .words {
+      background: #fff;
+      border-radius: 0 0 16px 16px;
+      margin: 0 16px;
+      padding: 10px;
+      text-align: right;
+      font-size: 26px;
+      color: #999999;
+    }
+
+    .bottombtn {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin: 0 30px;
+      padding: 20px 0 0;
+
+      .emptys {
+        font-size: 26px;
+        color: #666666;
+      }
+
+      .publishs {
+        width: 144px;
+        height: 64px;
+        line-height: 64px;
+        text-align: center;
+        background: #1365dd;
+        border-radius: 32px;
+        color: #fff;
+      }
+    }
+  }
+}
+</style>