From fca601c0e58fb649af1bc48261c1b1fbafa5da4c Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Fri, 7 Jan 2022 17:56:09 +0800
Subject: [PATCH] bug

---
 src/apps/AppVillageDiscuss/Detail.vue | 1067 ++++++++++++-------------
 1 file changed, 500 insertions(+), 567 deletions(-)

diff --git a/src/apps/AppVillageDiscuss/Detail.vue b/src/apps/AppVillageDiscuss/Detail.vue
index 594222e6..25140614 100644
--- a/src/apps/AppVillageDiscuss/Detail.vue
+++ b/src/apps/AppVillageDiscuss/Detail.vue
@@ -1,632 +1,565 @@
 <template>
-  <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 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>
-
-      <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 class="images">
+        <image v-for="(img, i) in info.images" :key="i" :src="img.url" @click="preview(img.url)" />
       </div>
     </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 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>
-          <u-icon name="thumb-up" :label="op.suport" :color="op.isSuport ? 'red' : '#ccc'" @click="like(op.id)" />
+          <p>{{ item.content }}</p>
         </div>
-
-        <div class="content" v-text="op.content" @click="adddeleShow(op.id)" />
-
-        <div class="content color-999" v-text="op.createTime" />
+        <AiEmpty v-if="!list.length"></AiEmpty>
       </div>
-      <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">
+      <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>
-            <span>{{ item.content }}</span>
+            <p>{{ item.content }}</p>
           </div>
-          <i>{{ item.count }}</i>
-          <em :style="{ width: item.percentage }"></em>
+        </div>
+        <div class="vote-total">
+          <div class="left">
+            <span>共</span>
+            <i>{{ info.votes.length }}</i>
+            <span>人投票</span>
+          </div>
+          <i @click="$linkTo('/village/villagerDiscussion/VoteList?id=' + id + '&anonymous=' + info.anonymous)">查看投票详情</i>
         </div>
       </div>
     </div>
-
-    <div class="votePeople">
-      <div class="leftPeople">共23人参与投票</div>
-
-      <u-section sub-title="查看更多"></u-section>
+    <div class="footer" v-if="info.type === '0' && info.status === '0' && !info.isTimeout">
+      <input v-model="content" placeholder="我来说两句…" />
+      <span @click="confirm">确定</span>
     </div>
-
-    <div class="bottomInput" v-if="isAnnouncer && data.status === '0' && data.type === '0'">
-      <div class="leftInput" @click="showBottomInput = true">我来说两句...</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>
-
-    <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 {
-  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
+  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']
+      }
     },
-  },
 
-  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 = JSON.parse(res.data.images)
-            this.isAnnouncer = this.user.id === res.data.createUserId
+    computed: {
+      ...mapState(['user']),
 
-            var discussTime = (new Date(res.data.discussDeadline).getTime() * 1) / 1000
-            var nowTime = (new Date().getTime() * 1) / 1000
-            if (discussTime >= nowTime) {
-              this.timestamp = discussTime - nowTime
-            }
+      buttonText () {
+        if (this.info.myVote) {
+          return '已投票'
+        }
 
-            if (res.data.type === '1' && res.data.statistic) {
-              const total = Object.values(res.data.statistic).reduce((x, y) => {
-                return x + y
+        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))
               })
-              this.data.voteList = res.data.voteItems.map((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,
-                  count: res.data.statistic[v.item],
-                  percentage: (res.data.statistic[v.item] / total) * 100 + '%',
+                  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
 
-            this.$hideLoading()
-          } else {
-            this.$hideLoading()
-            this.pageShow = true
-          }
-        })
-        .catch(() => {
-          this.$hideLoading()
-        })
-    },
-
-    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('点赞成功')
-
-          this.$nextTick(() => {
-            this.getDetail()
-          })
-        } else {
-          this.$u.toast(res.msg)
-        }
-      })
-    },
-
-    adddeleShow(id) {
-      if (this.user.id == this.data.createUserId) {
-        this.deleId = id
-        this.deleShow = true
-      }
-    },
-
-    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()
+              return false
             }
-          })
-      } else {
-        this.$u.toast('不能提交空评论!')
+
+            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
+        })
       }
     },
-    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)
-    },
-  },
-}
+
+    onReachBottom() {
+      this.getList()
+    }
+  }
 </script>
 
-<style scoped lang="scss">
-.Detail {
-  padding-bottom: 40px;
+<style lang="scss" scoped>
+  .detail {
+    padding-bottom: 140px;
 
-  .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;
-  }
+    .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;
 
-  &.detail-active {
-    padding-bottom: 132px;
-  }
+        p {
+          text-align: justify;
+        }
 
-  .detail-top {
-    padding: 30px;
-    background: #fff;
-    border-bottom: 16px solid #f6f7f9;
-
-    .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;
-    }
-
-    .color-999 {
-      color: #999999;
-    }
-
-    .color-333 {
-      color: #333;
-    }
-
-    .w-100 {
-      width: 100%;
-    }
-
-    .statusTag {
-      padding: 0 12px;
-      line-height: 30px;
-      border: 1px solid #2573ff;
-      color: #2573ff;
-      font-size: 22px;
-
-      &.over {
-        border-color: #666;
-        color: #666;
-      }
-    }
-
-    .header-middle {
-      padding: 32px 0 48px 0;
-
-      .contsnts {
-        font-size: 26px;
-        line-height: 1.5;
-        word-break: break-all;
-      }
-
-      img {
-        margin-top: 30px;
-        width: 686px;
-        height: 486px;
-      }
-    }
-
-    .img-list {
-      img {
-        width: calc(33vw - 6px - 24px);
-        height: calc(33vw - 6px - 24px);
-        margin: 0 12px 12px 0;
-
-        &:nth-of-type(3n) {
-          margin-right: 0;
+        &.active {
+          border-color: #4181FF;
+          color: #fff;
+          background: #4181FF;
         }
       }
 
-      .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 {
+      .vote-total {
         display: flex;
-        flex: 1;
-        line-height: 1.2;
-        margin-right: 20px;
+        align-items: center;
+        justify-content: space-between;
+        height: 100px;
+
+        .left {
+          display: flex;
+          align-items: center;
+        }
 
         span {
-          word-break: break-word;
+          color: #999999;
+          font-size: 28px;
+        }
 
-          &:first-child {
-            flex-shrink: 1;
-          }
+        i {
+          color: #4181FF;
+          font-size: 28px;
+          font-style: normal;
+        }
+      }
+    }
 
-          &:last-child {
-            flex: 1;
+    .footer {
+      display: flex;
+      position: fixed;
+      align-items: center;
+      justify-content: center;
+      bottom: 0;
+      left: 0;
+      z-index: 11;
+      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;
+      }
+    }
+
+    .detail-header {
+      margin-bottom: 40px;
+      padding: 32px;
+      background-color: #fff;
+
+      .images {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        margin-top: 30px;
+
+        image {
+          width: 226px;
+          height: 226px;
+          margin-bottom: 6px;
+          margin-right: 6px;
+
+          &:nth-of-type(3n) {
+            margin-right: 0;
           }
         }
       }
 
-      em {
-        position: absolute;
-        left: 0;
-        top: 0;
-        z-index: 0;
-        height: 100%;
-        background: #dce8f4;
+      & > h2 {
+        margin-bottom: 16px;
+        color: #333333;
+        font-size: 48px;
+        font-weight: 600;
       }
 
-      span {
-        flex-shrink: 1;
-        position: relative;
-        z-index: 1;
-        color: #5b84b3;
-        font-size: 28px;
-      }
+      .detail-info {
+        display: flex;
+        align-items: center;
+        margin-bottom: 30px;
 
-      i {
-        position: relative;
-        z-index: 1;
-        font-style: normal;
-        color: #5b84b3;
-        font-size: 28px;
+        span {
+          color: #999999;
+          font-size: 30px;
+        }
+
+        h2 {
+          margin-right: 32px;
+          font-size: 26px;
+          color: #333333;
+          font-weight: normal;
+        }
       }
     }
 
-    .totalCount {
-      display: flex;
-      justify-content: space-between;
+    .detail-list {
+      padding: 0 32px;
+      background-color: #fff;
 
-      .total {
-        display: block;
-        font-size: 30px;
-        height: 120px;
-        box-sizing: border-box;
-        padding-top: 44px;
+      .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;
+        }
       }
-      .rightCount {
-        padding-top: 44px;
-      }
-    }
 
-    .u-avatar {
-      margin-right: 24px;
-    }
+      .user-item {
+        padding: 32px 0;
+        border-bottom: 1px solid #DDDDDD;
 
-    .content {
-      color: #333;
-      margin-left: 72px;
-      margin-top: 10px;
+        &:last-child {
+          border-bottom: none;
+        }
 
-      &.color-999 {
-        color: #999999;
-        font-size: 24px;
-        margin-bottom: 48px;
+        & > 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%;
+          }
+        }
       }
     }
   }
-
-  .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>