From 6390d9961d161633135e9f03b9920722354ba7e9 Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Fri, 7 Jan 2022 18:00:10 +0800
Subject: [PATCH] 26524

---
 src/apps/AppVillageDiscuss/Detail.vue | 1089 +++++++++++++------------
 1 file changed, 578 insertions(+), 511 deletions(-)

diff --git a/src/apps/AppVillageDiscuss/Detail.vue b/src/apps/AppVillageDiscuss/Detail.vue
index 25140614..2eec7374 100644
--- a/src/apps/AppVillageDiscuss/Detail.vue
+++ b/src/apps/AppVillageDiscuss/Detail.vue
@@ -1,565 +1,632 @@
 <template>
-  <div class="detail" v-if="pageShow">
-    <div class="detail-header">
-      <h2>{{ info.content || info.title }}</h2>
-      <div class="detail-info">
-        <h2>{{ info.createUserName }}</h2>
-        <span>{{ info.createTime }}</span>
+  <div class="Detail" v-if="pageShow" :class="[isAnnouncer && data.status === '0' && data.type === '0' ? 'detail-active' : '']">
+    <div class="detail-top">
+      <div flex class="w-100">
+        <div class="avatar" v-text="data.avatar" />
+        <div flex class="column start fill">
+          <b class="color-333" v-text="data.createUserName" />
+          <span class="color-999" v-text="data.createTime" />
+        </div>
+        <div class="statusTag" :class="{ over: data.status > 0 }" v-text="data.status == 0 ? (data.type == 0 ? '征集中' : '投票中') : $dict.getLabel('discussStatus', data.status)" />
       </div>
-      <div class="images">
-        <image v-for="(img, i) in info.images" :key="i" :src="img.url" @click="preview(img.url)" />
+
+      <div class="header-middle">
+        <div class="contsnts">
+          <u-parse :html="data.content || data.title"></u-parse>
+        </div>
+      </div>
+
+      <div class="img-list" v-if="data.images && data.images.length">
+        <img :src="item.url" alt="" v-for="(item, index) in data.images" :key="index" @click="previewImage(data.images, item.url)" />
       </div>
     </div>
-    <div class="detail-list">
-      <div class="detail-list__title">
-        <h2>{{ info.type === '0' ? '全部评论' : (info.voteType === '1' ? '投票清单（可多选）' : '投票清单') }}</h2>
-        <span v-if="!isTimeout && time">剩余 {{ time }}</span>
-        <span v-if="info.status !== '0'">已截止</span>
-      </div>
-      <div class="user-list" :style="{paddingBottom: !list.length ? '20px' : '0px'}" v-if="info.type === '0'">
-        <div class="user-item" v-for="(item, index) in list" :key="index">
-          <div class="user-item__top">
-            <image :src="item.avatar" />
-            <div class="user-item__top--right">
-              <div class="top">
-                <div class="left">
-                  <h2>{{ item.createUserName }}</h2>
-                  <span v-if="info.createUserId === item.createUserId">话事人</span>
-                </div>
-                <div class="right" @click="like(item.id)">
-                  <image :src="item.isSuport ? '/static/img/like-active.png' : '/static/img/like.png'" />
-                  <span>{{ item.suport }}</span>
-                </div>
-              </div>
-              <p>{{ item.createTime }}</p>
-            </div>
+    <div v-if="data.type == 0" class="comments">
+      <span class="totalCount">
+        <span class="total" v-text="`全部评论(${commentCount})`" />
+        <span class="rightCount">
+          <u-icon name="clock" v-if="data.status === '0'"></u-icon>
+          <u-count-down v-if="data.status === '0'" :timestamp="timestamp" separator="zh" show-days show-hours show-minutes show-seconds></u-count-down>
+          <span style="color: #999" v-else>已截止</span>
+        </span>
+      </span>
+      <div v-for="op in data.messages" :key="op.id">
+        <div flex class="header">
+          <u-avatar :src="op.avatar" size="48" />
+          <div flex class="fill">
+            <b v-text="op.createUserName" />
+            <span class="tags">{{ data.createUserId === op.createUserId ? '话事人' : '居民' }}</span>
           </div>
-          <p>{{ item.content }}</p>
+          <u-icon name="thumb-up" :label="op.suport" :color="op.isSuport ? 'red' : '#ccc'" @click="like(op.id)" />
         </div>
-        <AiEmpty v-if="!list.length"></AiEmpty>
+
+        <div class="content" v-text="op.content" @click="adddeleShow(op.id)" />
+
+        <div class="content color-999" v-text="op.createTime" />
       </div>
-      <div class="vote-list" v-if="info.type === '1'">
-        <div class="vote-item__wrapper">
-          <div
-            class="vote-item"
-            @click="choose(index)"
-            v-for="(item, index) in info.voteItems"
-            :key="index"
-            :class="[choosed.indexOf(index) > -1 ? 'active' : '']">
-            <span>{{ item.item }}：</span>
-            <p>{{ item.content }}</p>
-          </div>
-        </div>
-        <div class="vote-total">
+      <AiEmpty v-if="!data.messages.length"></AiEmpty>
+    </div>
+
+    <div v-else-if="data.type == 1" class="comments">
+      <span class="totalCount">
+        <span class="total">{{ data.voteType === '1' ? '投票清单（可多选）' : '投票清单' }}</span>
+        <span class="rightCount">
+          <u-icon name="clock" v-if="data.status === '0'"></u-icon>
+          <u-count-down v-if="data.status === '0'" :timestamp="timestamp" separator="zh" show-days show-hours show-minutes show-seconds></u-count-down>
+          <span style="color: #999" v-else>已截止</span>
+        </span>
+      </span>
+      <div class="comments-vote">
+        <div class="vote-item" v-for="(item, index) in data.voteList" :key="index">
           <div class="left">
-            <span>共</span>
-            <i>{{ info.votes.length }}</i>
-            <span>人投票</span>
+            <span>{{ item.item }}：</span>
+            <span>{{ item.content }}</span>
           </div>
-          <i @click="$linkTo('/village/villagerDiscussion/VoteList?id=' + id + '&anonymous=' + info.anonymous)">查看投票详情</i>
+          <i>{{ item.count }}</i>
+          <em :style="{ width: item.percentage }"></em>
         </div>
       </div>
     </div>
-    <div class="footer" v-if="info.type === '0' && info.status === '0' && !info.isTimeout">
-      <input v-model="content" placeholder="我来说两句…" />
-      <span @click="confirm">确定</span>
+
+    <div class="votePeople">
+      <div class="leftPeople">共23人参与投票</div>
+
+      <u-section sub-title="查看更多"></u-section>
     </div>
-    <div class="btn-wrapper" v-if="info.type === '1' && !info.isTimeout && info.status === '0'">
-      <div class="btn" :class="[info.myVote ? 'disabled' : '']" @click="signUp" hover-class="text-hover">{{ buttonText }}</div>
+
+    <div class="bottomInput" v-if="isAnnouncer && data.status === '0' && data.type === '0'">
+      <div class="leftInput" @click="showBottomInput = true">我来说两句...</div>
     </div>
+
+    <u-popup v-model="showBottomInput" height="auto" mode="bottom">
+      <div class="comments-wrapper">
+        <u-input v-model="content" placeholder="写下你的想法" type="textarea" auto-height height="180" maxlength="140"> </u-input>
+        <div class="words">字数{{ content.length }}/140</div>
+
+        <div class="bottombtn">
+          <div class="emptys" @click="content = ''">清空内容</div>
+
+          <div class="publishs" @click="publish">发表</div>
+        </div>
+      </div>
+    </u-popup>
+
+    <u-popup v-model="deleShow" mode="bottom" class="popupdele">
+      <div class="dele" @click="modalShow = true">删除</div>
+      <div @click="deleShow = false">取消</div>
+    </u-popup>
+
+    <u-modal v-model="modalShow" content="确定删除该留言" @confirm="confirmDelete"></u-modal>
+
+    <div class="end-btn" hover-class="text-hover" v-if="data.status === '1'" @click="handleComplete">结束公示</div>
   </div>
 </template>
 
 <script>
-  import { mapState } from 'vuex'
-  export default {
-    data () {
-      return {
-        content: '',
-        currIndex: 0,
-        pageShow: false,
-        info: {},
-        isTimeout: false,
-        time: '',
-        timer: null,
-        list: [],
-        pageShow: false,
-        current: 1,
-        choosed: [],
-        total: 0,
-        id: '',
-        isMore: false,
-        keys: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
-      }
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Detail',
+  props: {},
+  data() {
+    return {
+      data: {},
+      id: '',
+      timestamp: '',
+      showBottomInput: false,
+      content: '',
+      flag: false,
+      pageShow: false,
+      isAnnouncer: false,
+      deleShow: false,
+      modalShow: false,
+      deleId: '',
+      isAnnouncer: false,
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+
+    commentCount() {
+      return this.data.messages?.length || 0
+    },
+  },
+
+  onLoad(o) {
+    this.id = o.id
+    this.getDetail()
+    this.$dict.load('discussStatus')
+  },
+  onShow() {
+    document.title = '议事详情'
+  },
+  methods: {
+    getDetail() {
+      this.$loading()
+      this.$http
+        .post(`/app/appvillagediscuss/queryDetailById?id=${this.id}`)
+        .then((res) => {
+          if (res?.data) {
+            this.data = {
+              ...res.data,
+              avatar: res.data.createUserName?.substr(0, 2) || '游客',
+              messages: res.data.messages
+                ? res.data.messages.map((v) => {
+                    return {
+                      ...v,
+                      isSuport: v.suportUser ? v.suportUser.indexOf(this.user.id) > -1 : false,
+                    }
+                  })
+                : [],
+            }
+            this.data.images = res.data.images ? JSON.parse(res.data.images) : []
+            this.isAnnouncer = this.user.id === res.data.createUserId
+
+            var discussTime = (new Date(res.data.discussDeadline).getTime() * 1) / 1000
+            var nowTime = (new Date().getTime() * 1) / 1000
+            if (discussTime >= nowTime) {
+              this.timestamp = discussTime - nowTime
+            }
+
+            if (res.data.type === '1' && res.data.statistic) {
+              const total = Object.values(res.data.statistic).reduce((x, y) => {
+                return x + y
+              })
+              this.data.voteList = res.data.voteItems.map((v) => {
+                return {
+                  ...v,
+                  count: res.data.statistic[v.item],
+                  percentage: (res.data.statistic[v.item] / total) * 100 + '%',
+                }
+              })
+            }
+            this.pageShow = true
+
+            this.$hideLoading()
+          } else {
+            this.$hideLoading()
+            this.pageShow = true
+          }
+        })
+        .catch(() => {
+          this.$hideLoading()
+        })
     },
 
-    computed: {
-      ...mapState(['user']),
+    like(id) {
+      this.$loading()
+      this.$http.post(`/app/appvillagediscussmessage/suport?id=${id}&userId=${this.user.id}`).then((res) => {
+        this.$hideLoading()
+        if (res.code === 0) {
+          this.$u.toast('点赞成功')
 
-      buttonText () {
-        if (this.info.myVote) {
-          return '已投票'
+          this.$nextTick(() => {
+            this.getDetail()
+          })
+        } else {
+          this.$u.toast(res.msg)
         }
-
-        if (this.info.anonymous === '1') {
-          return '匿名投票'
-        }
-
-        return '实名投票'
-      }
-    },
-
-    onLoad (query) {
-      this.id = query.id
-
-      this.getInfo(query.id)
-      this.$nextTick(() => {
-        this.getList()
       })
     },
 
-    methods: {
-      choose (index) {
-        if (this.info.status !== '0') {
-          return false
-        }
-
-        if (this.info.myVote) {
-          return false
-        }
- 
-        if (this.info.voteType === '1') {
-          const i = this.choosed.indexOf(index)
-          if (i > -1) {
-            this.choosed.splice(i, 1)
-          } else {
-            this.choosed.push(index)
-          }
-        } else {
-          this.choosed = [index]
-        }
-      },
-
-      like (id) {
-        this.$loading()
-        this.$instance.post(`/app/appvillagediscussmessage/suport?id=${id}&userId=${this.user.id}`).then(res => {
-          if (res.code === 0) {
-            this.$toast('点赞成功')
-            this.current = 1
-            this.isMore = false
-
-            this.$nextTick(() => {
-              this.getList()
-            })
-          }
-
-          this.$hideLoading()
-        }).catch(() => {
-          this.$hideLoading()
-        })
-      }, 
-
-      getInfo (id) {
-        this.$loading()
-        this.$instance.post(`/app/appvillagediscuss/queryDetailById?id=${id}&userId=${this.user.id}`).then(res => {
-          if (res.code === 0) {
-            this.info = res.data
-            this.info.images = res.data.images ? JSON.parse(res.data.images): []
-
-            if (res.data.myVote && this.info.status === '0') {
-              const myVote = res.data.myVote.split(',')
-              myVote.forEach(v => {
-                this.choosed.push(this.keys.indexOf(v))
-              })
-            }
-
-            if (res.data.discussDeadline) {
-              this.countdown(res.data.discussDeadline)
-            }
-
-            this.$nextTick(() => {
-              this.pageShow = true
-            })
-          }
-
-          this.$hideLoading()
-        }).catch(() => {
-          this.$hideLoading()
-        })
-      },
-
-      signUp () {
-        if (this.info.myVote) {
-          return
-        }
-
-        if (!this.choosed.length) {
-          return this.$toast('请选择投票项')
-        }
-
-        this.$loading()
-        let item = []
-        this.choosed.forEach(v => {
-          item.push(this.info.voteItems[v].item)
-        })
-        this.$instance.post(`/app/appvillagediscussvote/addOrUpdate`, {
-          item: item.join(','),
-          discussId: this.id,
-          createUserId: this.user.realName || this.user.name,
-          createUserName: this.user.id,
-          avatar: this.user.avatarUrl
-        }).then(res => {
-
-          this.$hideLoading()
-          if (res.code === 0) {
-            this.$toast('投票成功')
-            this.getInfo(this.id)
-          }
-        }).catch(() => {
-          this.$hideLoading()
-        })
-      },
-
-      getList() {
-        if (this.isMore) return
-
-        this.$instance.post(`/app/appvillagediscussmessage/list`, null, {
-          params: {
-            current: this.current,
-            size: 15,
-            discussId: this.id,
-            status: this.currIndex,
-            areaId: uni.getStorageSync('areaId')
-          }
-        }).then(res => {
-          if (res.code == 0) {
-            this.total = res.data.total
-            if (this.current > 1) {
-              this.list = [...this.list, ...res.data.records].map(v => {
-                return {
-                  ...v,
-                  typeName: this.$dict.getLabel('discussType', v.type),
-                  images: v.images ? JSON.parse(v.images): [],
-                  isSuport: v.suportUser ? v.suportUser.indexOf(this.user.id) > -1 : false
-                }
-              })
-            } else {
-              this.list = res.data.records.map(v => {
-                return {
-                  ...v,
-                  typeName: this.$dict.getLabel('discussType', v.type),
-                  images: v.images ? JSON.parse(v.images): [],
-                  isSuport: v.suportUser ? v.suportUser.indexOf(this.user.id) > -1 : false
-                }
-              })
-            }
-            uni.hideLoading()
-            this.pageShow = true
-            if (res.data.records.length < 10) {
-              this.isMore = true
-
-              return false
-            }
-
-            this.current = this.current + 1
-          } else {
-            uni.hideLoading()
-          }
-        }).catch(() => {
-          uni.hideLoading()
-        })
-      },
-
-      confirm () {
-        if (!this.content) {
-          return this.$toast('留言不能为空')
-        }
-
-        this.$loading()
-        this.$instance.post(`/app/appvillagediscussmessage/addOrUpdate`, {
-          content: this.content,
-          discussId: this.id,
-          createUserId: this.user.realName || this.user.name,
-          createUserName: this.user.id,
-          avatar: this.user.avatarUrl
-        }).then(res => {
-          if (res.code === 0) {
-            this.content = '' 
-            this.$toast('发布成功')
-            this.isMore = false
-            this.current = 1
-
-            this.getList()
-          }
-
-          this.$hideLoading()
-        }).catch(() => {
-          this.$hideLoading()
-        })
-      },
-
-      countdown (time) {
-        this.timer = setInterval(() => {
-          if (new Date(time).getTime() < new Date().getTime()) {
-            this.isTimeout = true
-            clearInterval(this.timer)
-          } else {
-            var durationObj = this.$dayjs.duration(new Date(time).getTime() - new Date().getTime())
-            var hours = durationObj.hours() > 9 ? durationObj.hours() : '0' + durationObj.hours()
-            var min = durationObj.minutes() > 9 ? durationObj.minutes() : '0' + durationObj.minutes()
-            var seconds = durationObj.seconds() > 9 ? durationObj.seconds() : '0' + durationObj.seconds()
-            this.time = `${hours}小时${min}分钟${seconds}秒`
-            this.isTimeout = false
-          }
-        }, 1000)
-      },
-
-      preview (url) {
-        uni.previewImage({
-          urls: this.info.images.map(v => v.url),
-          current: url
-        })
+    adddeleShow(id) {
+      if (this.user.id == this.data.createUserId) {
+        this.deleId = id
+        this.deleShow = true
       }
     },
 
-    onReachBottom() {
-      this.getList()
-    }
-  }
+    confirmDelete() {
+      this.$http
+        .post(`/app/appvillagediscussmessage/delete?ids=${this.deleId}`)
+        .then((res) => {
+          if (res?.data) {
+            this.deleShow = false
+            this.modalShow = false
+            this.deleId = ''
+            this.getDetail()
+          }
+        })
+        .catch((e) => {
+          this.$hideLoading()
+          this.$u.toast(e)
+        })
+    },
+
+    publish() {
+      if (this.flag) return
+      if (!this.content) {
+        return this.$u.toast('请输入你的想法')
+      }
+
+      this.$http
+        .post(`/app/appvillagediscussmessage/addOrUpdate`, {
+          content: this.content,
+          avatar: this.user.avatar,
+          createUserId: this.user.id,
+          createUserName: this.user.name,
+          discussId: this.id,
+        })
+        .then((res) => {
+          if (res?.code == 0) {
+            this.$u.toast('留言成功')
+            this.flag = false
+            this.content = ''
+            this.showBottomInput = false
+            this.getDetail()
+          }
+        })
+    },
+
+    praise() {
+      console.log('点赞')
+      this.$http.post(`/app/appvillagediscussmessage/suport?id=${this.id}&userId=${this.user.id}`).then((res) => {
+        if (res?.code == 0) {
+          this.$u.toast('点赞成功!')
+          this.getDetail()
+        }
+      })
+    },
+
+    previewImage(images, img) {
+      uni.previewImage({
+        urls: images.map((v) => v.url),
+        current: img,
+      })
+    },
+
+    handleSubmitComment(content) {
+      if (!!content) {
+        let { id } = this
+        this.$http
+          .post('/app/appvillagediscussmessage/addOrUpdate', {
+            id,
+            content,
+          })
+          .then((res) => {
+            if (res?.code == 0) {
+              this.$u.toast('提交成功!')
+              this.getDetail()
+            }
+          })
+      } else {
+        this.$u.toast('不能提交空评论!')
+      }
+    },
+    handleComplete() {
+      this.$confirm('是否要结束公示')
+        .then(() => {
+          this.$http
+            .post('/app/appvillagediscuss/finishPublic', {
+              status: '2',
+              id: this.id,
+            })
+            .then((res) => {
+              if (res?.code == 0) {
+                this.$u.toast('结束公示成功!')
+                this.getDetail()
+              }
+            })
+        })
+        .catch(() => 0)
+    },
+  },
+}
 </script>
 
-<style lang="scss" scoped>
-  .detail {
-    padding-bottom: 140px;
+<style scoped lang="scss">
+.Detail {
+  padding-bottom: 40px;
 
-    .vote-list {
-      .vote-item {
-        display: flex;
-        line-height: 1.3;
-        margin-top: 24px;
-        padding: 34px 32px;
-        color: #333333;
-        font-size: 32px;
-        background: #FFFFFF;
-        border-radius: 16px;
-        border: 1px solid #CCCCCC;
-        box-sizing: border-box;
+  .end-btn {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    z-index: 11;
+    width: 100%;
+    height: 112px;
+    line-height: 112px;
+    text-align: center;
+    color: #fff;
+    font-size: 32px;
+    background: #1365dd;
+  }
 
-        p {
-          text-align: justify;
-        }
+  &.detail-active {
+    padding-bottom: 132px;
+  }
 
-        &.active {
-          border-color: #4181FF;
-          color: #fff;
-          background: #4181FF;
-        }
-      }
+  .detail-top {
+    padding: 30px;
+    background: #fff;
+    border-bottom: 16px solid #f6f7f9;
 
-      .vote-total {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        height: 100px;
-
-        .left {
-          display: flex;
-          align-items: center;
-        }
-
-        span {
-          color: #999999;
-          font-size: 28px;
-        }
-
-        i {
-          color: #4181FF;
-          font-size: 28px;
-          font-style: normal;
-        }
-      }
+    .avatar {
+      height: 64px;
+      width: 64px;
+      color: #fff;
+      background: $uni-color-primary;
+      border-radius: 50%;
+      font-size: 24px;
+      text-align: center;
+      line-height: 64px;
+      margin-right: 16px;
     }
 
-    .footer {
-      display: flex;
-      position: fixed;
-      align-items: center;
-      justify-content: center;
-      bottom: 0;
-      left: 0;
-      z-index: 11;
+    .color-999 {
+      color: #999999;
+    }
+
+    .color-333 {
+      color: #333;
+    }
+
+    .w-100 {
       width: 100%;
-      height: 120px;
-      padding: 0 30px;
-      box-sizing: border-box;
-      background-color: #fff;
-      border-top: 1px solid #DDDDDD;
+    }
 
-      input {
-        flex: 1;
-        height: 88px;
-        margin-right: 20px;
-        padding: 0 32px;
-        font-size: 32px;
-        border-radius: 44px;
-        box-sizing: border-box;
-        background-color: #F0F0F0;
+    .statusTag {
+      padding: 0 12px;
+      line-height: 30px;
+      border: 1px solid #2573ff;
+      color: #2573ff;
+      font-size: 22px;
+
+      &.over {
+        border-color: #666;
+        color: #666;
       }
     }
 
-    .detail-header {
-      margin-bottom: 40px;
-      padding: 32px;
-      background-color: #fff;
+    .header-middle {
+      padding: 32px 0 48px 0;
 
-      .images {
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
+      .contsnts {
+        font-size: 26px;
+        line-height: 1.5;
+        word-break: break-all;
+      }
+
+      img {
         margin-top: 30px;
-
-        image {
-          width: 226px;
-          height: 226px;
-          margin-bottom: 6px;
-          margin-right: 6px;
-
-          &:nth-of-type(3n) {
-            margin-right: 0;
-          }
-        }
-      }
-
-      & > h2 {
-        margin-bottom: 16px;
-        color: #333333;
-        font-size: 48px;
-        font-weight: 600;
-      }
-
-      .detail-info {
-        display: flex;
-        align-items: center;
-        margin-bottom: 30px;
-
-        span {
-          color: #999999;
-          font-size: 30px;
-        }
-
-        h2 {
-          margin-right: 32px;
-          font-size: 26px;
-          color: #333333;
-          font-weight: normal;
-        }
+        width: 686px;
+        height: 486px;
       }
     }
 
-    .detail-list {
-      padding: 0 32px;
-      background-color: #fff;
+    .img-list {
+      img {
+        width: calc(33vw - 6px - 24px);
+        height: calc(33vw - 6px - 24px);
+        margin: 0 12px 12px 0;
 
-      .detail-list__title {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        height: 116px;
-
-        h2 {
-          color: #333333;
-          font-weight: 600;
-          font-size: 38px;
-        }
-
-        span {
-          color: #999999;
-          font-size: 28px;
+        &:nth-of-type(3n) {
+          margin-right: 0;
         }
       }
 
-      .user-item {
-        padding: 32px 0;
-        border-bottom: 1px solid #DDDDDD;
-
-        &:last-child {
-          border-bottom: none;
-        }
-
-        & > p {
-          line-height: 1.3;
-          margin-top: 12px;
-          padding-left: 114px;
-          color: #333333;
-          font-size: 28px;
-        }
-
-        .user-item__top {
-          display: flex;
-          align-items: center;
-
-          .user-item__top--right {
-            flex: 1;
-
-            .top {
-              display: flex;
-              align-items: center;
-              justify-content: space-between;
-
-              & > div {
-                display: flex;
-                align-items: center;
-              }
-
-              .right {
-                image {
-                  width: 32px;
-                  height: 32px;
-                  margin-right: 8px;
-                }
-
-                span {
-                  color: #999999;
-                  font-size: 28px;
-                }
-              }
-
-              .left {
-                h2 {
-                  margin-right: 24px;
-                  color: #333333;
-                  font-size: 34px;
-                  font-weight: normal;
-                }
-
-                span {
-                  width: 96px;
-                  height: 44px;
-                  line-height: 44px;
-                  text-align: center;
-                  color: #fff;
-                  font-size: 26px;
-                  background: #1AAAFF;
-                  border-radius: 8px;
-                }
-              }
-            }
-
-            & > p {
-              margin-top: 8px;
-              color: #999999;
-              font-size: 26px;
-            }
-          }
-
-          & > image {
-            width: 96px;
-            height: 96px;
-            margin-right: 18px;
-            border-radius: 50%;
-          }
-        }
+      .title {
+        width: 100%;
+        line-height: 112px;
+        background: #fff;
+        font-size: 32px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        color: #999;
       }
     }
   }
+
+  .tags {
+    width: 80px;
+    height: 34px;
+    line-height: 34px;
+    margin-left: 16px;
+    text-align: center;
+    color: #fff;
+    font-size: 24px;
+    background: #1aaaff;
+    border-radius: 8px;
+  }
+
+  ::v-deep uni-video {
+    width: 100%;
+  }
+
+  .comments {
+    padding: 0 32px 20px;
+    font-size: 28px;
+    background: #fff;
+
+    .vote-item {
+      display: flex;
+      position: relative;
+      align-items: center;
+      justify-content: space-between;
+      padding: 24px 32px;
+      margin-bottom: 16px;
+      background: #ffffff;
+      border-radius: 8px;
+      overflow: hidden;
+      border: 1px solid #95cbff;
+
+      .left {
+        display: flex;
+        flex: 1;
+        line-height: 1.2;
+        margin-right: 20px;
+
+        span {
+          word-break: break-word;
+
+          &:first-child {
+            flex-shrink: 1;
+          }
+
+          &:last-child {
+            flex: 1;
+          }
+        }
+      }
+
+      em {
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: 0;
+        height: 100%;
+        background: #dce8f4;
+      }
+
+      span {
+        flex-shrink: 1;
+        position: relative;
+        z-index: 1;
+        color: #5b84b3;
+        font-size: 28px;
+      }
+
+      i {
+        position: relative;
+        z-index: 1;
+        font-style: normal;
+        color: #5b84b3;
+        font-size: 28px;
+      }
+    }
+
+    .totalCount {
+      display: flex;
+      justify-content: space-between;
+
+      .total {
+        display: block;
+        font-size: 30px;
+        height: 120px;
+        box-sizing: border-box;
+        padding-top: 44px;
+      }
+      .rightCount {
+        padding-top: 44px;
+      }
+    }
+
+    .u-avatar {
+      margin-right: 24px;
+    }
+
+    .content {
+      color: #333;
+      margin-left: 72px;
+      margin-top: 10px;
+
+      &.color-999 {
+        color: #999999;
+        font-size: 24px;
+        margin-bottom: 48px;
+      }
+    }
+  }
+
+  .votePeople {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 8px;
+    padding: 36px 32px 36px 20px;
+    .leftPeople {
+      font-size: 28px;
+    }
+  }
+
+  .bottomInput {
+    position: fixed;
+    bottom: 0;
+    z-index: 11;
+    width: 100%;
+    background: #fff;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 24px 30px;
+    box-sizing: border-box;
+    border-top: 1px solid #eee;
+    .leftInput {
+      flex: 1;
+      height: 58px;
+      line-height: 58px;
+      text-align: center;
+      background: #f0f0f0;
+      border-radius: 30px;
+    }
+    // .righticon {
+    //   .icontext {
+    //     margin-left: 10px;
+    //   }
+    // }
+  }
+
+  .comments-wrapper {
+    padding: 20px 0;
+    .u-input {
+      background: #f7f7f7;
+      border-radius: 8px 8px 0 0;
+      padding: 10px !important;
+      margin: 0 30px 0 30px;
+      .uni-textarea-placeholder {
+        padding: 16px 0 0 16px;
+      }
+      .uni-textarea-textarea {
+        padding: 16px 0 0 16px;
+      }
+    }
+    .words {
+      background: #f7f7f7;
+      border-radius: 0 0 8px 8px;
+      margin: 0 30px;
+      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;
+      }
+    }
+  }
+
+  .popupdele {
+    ::v-deep .u-drawer-content {
+      text-align: center;
+      div {
+        padding: 5px 0;
+        color: #666;
+      }
+    }
+  }
+
+  // ::v-deep .u-drawer {
+  //   .u-drawer-content {
+  //     .u-drawer__scroll-view {
+  //       .uni-scroll-view {
+  //         // overflow: hidden;
+  //         overflow: inherit !important;
+  //       }
+  //     }
+  //   }
+  // }
+}
 </style>