敏感词聊天记录

src/project/pidu/AppConversation/conversationRecord.vue

@@ -2,9 +2,10 @@
   <div class="conversationRecord">
     <AiTopFixed>
       <div class="top-search">
-        <div class="left">
+        <div class="left" @click="isShowDate=true">
-          <!-- <div class="color-999">开始时间-结束时间</div> -->
+          <div class="color-999" v-if="!dateList.length">开始时间-结束时间</div>
-          <div>2023-03-01至2023-03-10</div>
+          <div v-else>{{dateList[0]}}至{{dateList[1]}}</div>
+          <img src="./img/del-icon.png" alt="" v-if="dateList.length" @click.stop="clearDate()">
         </div>
         <div class="right">
           <u-search v-model="keyword" :clearabled="true" placeholder="请输入关键词" :show-action="false" bg-color="#F5F5F5"
@@ -13,73 +14,365 @@
         </div>
       </div>
     </AiTopFixed>
-    <div class="conversation-list">
+    <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scroll="scroll" v-if="list.length" :style="{height: scrollHeight+'px'}">
-      <div v-for="(item, index) in list" :key="index">
+      <div class="conversation-list">
-        <div class="item item-left" v-if="item.type">
+        <div v-for="(item, index) in list" :key="index">
-          <img src="./img/user-img.png" alt="" class="user-img">
+          <div class="item" :class="item.userId == user.wxUserId ? 'item-right' : 'item-left'">
-          <div class="content">
+
-            <span></span>
+            <img src="./img/fail-icon.png" alt="" class="fail-img" v-if="item.userId == user.wxUserId && item.isKeyword == 1">
-            <p>{{item.content}}</p>
+
+            <img :src="item.userAvatar" alt="" class="user-img" v-if="item.userId != user.wxUserId && item.userAvatar">
+            <img src="./img/user-img.png" alt="" class="user-img" v-if="item.userId != user.wxUserId && !item.userAvatar">
+
+            <p class="user-name">{{item.userName}}<span>{{item.msgSendTime}}</span></p>
+
+            <div class="content">
+              <span class="cir" v-if="item.msgType == 'text'"></span>
+              <p class="content-text" v-if="item.msgType == 'text'" >{{item.content}}</p>
+
+              <div class="img-list" v-if="item.msgType == 'image'">
+                <img :src="item.sdkFileUrl" alt="" @click="previewImage(item.sdkFileUrl)">
+              </div>
+
+              <audio :src="item.sdkFileUrl" controls  style="display: block;" v-if="item.msgType == 'voice'"></audio>
+
+              <video :src="item.sdkFileUrl" v-if="item.msgType == 'video'" />
+
+              <div class="file" @click="prevFile(item)" v-if="item.msgType == 'file'">
+                <u-row justify="between">
+                  <label class="left">
+                    <img :src="$cdn + 'common/appendix.png'" alt="">
+                    <span>{{ item.sdkFileName }}</span>
+                  </label>
+                  <span>{{ item.fileSizeStr }}</span>
+                </u-row>
+              </div>
+
+              <div class="revoke-text" v-if="item.msgType == 'revoke'">{{item.userName}}{{item.msgSendTime.substring(0, 16)}}撤回了一条消息</div>
+
+              <div class="revoke-text" v-if="item.msgType == 'disagree'">对方不同意会话存档内容，你将无法继续提供服务</div>
+
+              <div class="revoke-text" v-if="item.msgType == 'agree'">对方同意会话存档内容，你可以继续提供服务</div>
+
+              <div class="card-info" v-if="item.msgType == 'card'">
+                <div class="top">
+                  <div class="card-left">
+                    <h3>{{item.cardCorpName}}</h3>
+                    <p>{{item.cardUserName}}</p>
+                    <!-- <div>{{item.cardUserId}}</div> -->
+                  </div>
+                  <div class="card-right">
+                    <img :src="item.cardUserAvatar" alt="" v-if="item.cardUserAvatar">
+                    <img src="./img/user-img.png" alt="" v-else>
+                  </div>
+                </div>
+                <div class="bottom">个人名片</div>
+              </div>
+
+              <img :src="item.sdkFileUrl" alt="" v-if="item.msgType == 'emotion'" :style="[{width: item.width/2+'px'}, {height: item.height/2+'px'}]">
+              
+              <div class="map-info" v-if="item.msgType == 'location'">
+                <map style="width: 100%; height: 100%;" :latitude="item.lat" :longitude="item.lng" :scale="item.zoom"></map>
+                <div class="address-text">
+                  <p>{{item.title}}</p>
+                  <p>{{item.address}}</p>
+                </div>
+              </div>
+
+              <div class="card-info" v-if="item.msgType == 'weapp'" @click="openApp(item)">
+                <div class="top">
+                  <div class="card-left">
+                    <h3>{{item.description}}</h3>
+                    <p>{{item.title}}</p>
+                    <div>{{item.username}}{{item.displayname}}</div>
+                  </div>
+                </div>
+                <div class="bottom">小程序</div>
+              </div>
+
+              <div class="card-info" v-if="item.msgType == 'link'" @click="openLink(item)">
+                <div class="top">
+                  <div class="card-left">
+                    <p>{{item.title}}</p>
+                    <div>{{item.username}}</div>
+                  </div>
+                  <div class="card-right" v-if="item.imageUrl">
+                    <img :src="item.imageUrl" alt="" >
+                  </div>
+                </div>
+                <div class="bottom">分享链接</div>
+              </div>
+
+            </div>
+            <img :src="item.userAvatar" alt="" class="user-img" v-if="item.userId == user.wxUserId">
+
+            <img src="./img/fail-icon.png" alt="" class="fail-img" v-if="item.userId != user.wxUserId  && item.isKeyword == 1">
           </div>
-          <img src="./img/fail-icon.png" alt="" class="fail-img">
         </div>
-        <div class="item item-right" v-else>
-        <div class="content">
-          <span></span>
-          <p>{{item.content}}</p>
-        </div>
-        <img src="./img/user-img.png" alt="" class="user-img">
       </div>
-      </div>
+    </scroll-view>
-    </div>
+    <AiEmpty v-else/>
+    <u-calendar v-model="isShowDate" @change="onDateChange" mode="range"></u-calendar>
   </div>
 </template>
 
 <script>
+import {mapState, mapActions} from "vuex";
 export default {
   name: "conversationRecord",
   data() {
     return {
-      tabList: [
-        {name: '全部'},
-        {name: '图片/视频'},
-        {name: '语音'},
-        {name: '文件'}
-      ],
-      currentTabs: 0,
-      barStyle: {
-        'width': '24px',
-        'height': '2px',
-        'border-radius': '0',
-        'bottom': '5px'
-      },
-      activeStyle: {
-        'font-weight' : '400',
-        'color': '#000000'
-      },
       keyword: '',
-      list: [
+      list: [],
-        {type: 0, content: '123全部全部全部全部全部全部全部全部全部全部全部全部'},
+      params: {},
-        {type: 1, content: '123'},
+      id: '',
-        {type: 0, content: '456'},
+      isShowDate: false,
-        {type: 0, content: '123'},
+      dateList: [],
-        {type: 1, content: '123'},
+      current: null,
-      ]
+      preCurrent: null,
+      pages: 2,
+      scrollTop: 0,
+      scrollHeight: '',
+      preveHeight: ''
     };
   },
+  computed: {
+    ...mapState(['user']),
+  },
+  onLoad(option) {
+    console.log(option)
+                //   userId: 'ChenChen',
+      //   toUserId: 'LiuYe',
+      //   toName: '刘烨',
+      //   type: '0',
+      //   seq: '12481'
+
+    // this.params = {...option}
+    this.params = {
+      userId: 'ChenChen',
+      toUserId: 'LiuYe',
+      toName: '刘烨',
+      type: '0',
+      seq: '12481'
+    }
+    this.id = this.params.userId
+    this.scrollHeight = uni.getSystemInfoSync().windowHeight - 56
+    this.getKeywordList()
+  },
   onShow() {
     document.title = '会话详情'
   },
   methods: {
-    change(index) {
+    scroll(e) {
-      this.keyword = ''
+      if(e.detail.scrollTop == 0) {
-      this.currentTabs = index
+        if(this.current > this.pages) {
+          return this.$u.toast('已加载完成，没有更多数据')
+        }else {
+          this.current ++
+          this.getList()
+        }
+      }
+    },
+    onDateChange (e) {
+      this.dateList = [e.startDate, e.endDate]
       this.getListInit()
     },
-    getListInit() {
+    clearDate() {
-
+      this.dateList = []
+      this.getListInit()
     },
+    getKeywordList() {
+      this.$http.post(`/app/appsessionarchiveinfo/listByKeywordRecord`, null, {
+        params: {
+          userId: this.id,
+          size: 10,
+          // msgType: this.msgTypeList[this.msgType].value,
+          toUserId: this.params.type == 1 ? '' : this.params.toUserId,
+          roomId: this.params.type == 1 ? this.params.roomId : '',
+          type: this.params.type,
+          content: this.keyword,
+          startTime: this.time ? this.time[0] : '',
+          endTime: this.time ? this.time[1] : '',
+          seq: this.params.seq,
+        }
+      }).then(res => {
+        if (res.code === 0) {
+          this.current = res.data.current
+          this.preCurrent = res.data.current
+          res.data.records.map((item) => {
+            // if(item.msgType == 'text') {
+            //   item.text = this.changeKeyRed(item.content, item.wordName)
+            // }
+            if(item.msgType == 'location') {
+              item.covers = [{
+                latitude: item.lat,
+                longitude: item.lng,
+                label: {
+                  content: item.address
+                },
+                callout: {
+                  content: item.title
+                }
+              }]
+            }
+          })
+          this.list = res.data.records
+          this.pages = res.data.pages
+
+          this.$nextTick(() => {
+            uni.createSelectorQuery().select(".conversation-list").boundingClientRect((res) => {
+              this.scrollTop = res.height - this.scrollHeight
+            }).exec();
+          })
+        }
+        this.isLoading = false
+      }).catch(() => {
+        this.isLoading = false
+      })
+    },
+    getListInit() {
+      this.current = 1
+      this.pages = 2
+      this.list = []
+      this.getList()
+    },
+    getList() {
+      if(this.current > 1) {
+        uni.createSelectorQuery().select(".conversation-list").boundingClientRect((res) => {
+          this.preveHeight = res.height  
+        }).exec();
+      }
+      this.$http.post(`/app/appsessionarchiveinfo/list`, null, {
+        params: {
+          userId: this.id,
+          current: this.current,
+          size: 10,
+          // msgType: this.tabList[this.currentTabs].value,
+          // msgType: 'file',
+          toUserId: this.params.toUserId,
+          roomId: this.params.roomId,
+          type: this.params.type,
+          content: this.keyword,
+          startTime: this.dateList.length ? this.dateList[0] : '',
+          endTime: this.dateList.length ? this.dateList[1] : ''
+        }
+      }).then(res=> {
+        if(res?.data) {
+          res.data.records.map((item) => {
+            if(item.msgType == 'location') {
+              item.covers = [{
+                latitude: item.lat,
+                longitude: item.lng,
+                label: {
+                  content: item.address
+                },
+                callout: {
+                  content: item.title
+                }
+              }]
+            }
+          })
+          this.list = this.current > 1 ? [ ...res.data.records, ...this.list]: res.data.records
+
+          this.$nextTick(() => {
+            uni.createSelectorQuery().select(".conversation-list").boundingClientRect((res) => {
+              if(this.current == 1) {
+                this.scrollTop = res.height - this.scrollHeight
+              }else {
+                this.scrollTop = res.height - this.preveHeight
+              }
+            }).exec();
+          })
+        }
+      })
+    },
+    getListPre() {
+      if(this.current > 1) {
+        uni.createSelectorQuery().select(".conversation-list").boundingClientRect((res) => {
+          this.preveHeight = res.height  
+        }).exec();
+      }
+      this.$http.post(`/app/appsessionarchiveinfo/list`, null, {
+        params: {
+          userId: this.id,
+          current: this.preCurrent,
+          size: 10,
+          // msgType: this.tabList[this.currentTabs].value,
+          toUserId: this.params.toUserId,
+          roomId: this.params.roomId,
+          type: this.params.type,
+          content: this.keyword,
+          startTime: this.dateList.length ? this.dateList[0] : '',
+          endTime: this.dateList.length ? this.dateList[1] : ''
+        }
+      }).then(res=> {
+        if(res?.data) {
+          res.data.records.map((item) => {
+            if(item.msgType == 'location') {
+              item.covers = [{
+                latitude: item.lat,
+                longitude: item.lng,
+                label: {
+                  content: item.address
+                },
+                callout: {
+                  content: item.title
+                }
+              }]
+            }
+          })
+          this.list = [...this.list, ...res.data.records]
+
+          this.$nextTick(() => {
+            uni.createSelectorQuery().select(".conversation-list").boundingClientRect((res) => {
+              if(this.current == 1) {
+                this.scrollTop = res.height - this.scrollHeight
+              }else {
+                this.scrollTop = res.height - this.preveHeight
+              }
+            }).exec();
+          })
+        }
+      })
+    },
+    changeKeyRed (str, keyWord) {
+      if (str != null && keyWord != null) {
+        var substr = "/" + keyWord + "/g";
+        var replaceStr = str.replace(eval(substr), "<span style='color:#e6736e'>" + keyWord + "</span>")
+        return replaceStr;
+      } else {
+        return str;
+      }
+    },
+    previewImage(img) {
+      uni.previewImage({
+        urls: [img],
+        current: img
+      })
+    },
+    ...mapActions(['previewFile']),
+    prevFile(file) {
+      this.$loading()
+      this.previewFile({ ...file }).then(()=>{
+        this.$hideLoading()
+      })
+    },
+    openLink(row) {
+      window.open(row.linkUrl); 
+    },
+    openApp(row) {
+      uni.navigateToMiniProgram({
+        // appId: row.goodsJdAppid,
+        // path: row.goodsJdUrl
+      })
+    }
   },
+  onReachBottom() {
+    if(this.preCurrent > 1) {
+      this.preCurrent --
+      this.getListPre()
+    }
+  }
 };
 </script>
 
@@ -118,29 +411,50 @@ export default {
     .item {
       margin-bottom: 48px;
       display: flex;
+      position: relative;
+      .user-name {
+        position: absolute;
+        top: 0;
+        left: 24px;
+        font-family: PingFangSC-Regular;
+        font-size: 22px;
+        color: #666;
+        padding:0 0 0 64px;
+        span {
+          display: inline-block;
+          margin: 0 12px;
+          font-family: PingFangSC-Regular;
+          font-size: 20px;
+          color: #999;
+        }
+      }
       .user-img {
         width: 72px;
         height: 72px;
         margin-right: 20px;
+        border-radius: 50%;
       }
       .content {
         max-width: calc(100% - 144px);
         position: relative;
-        span {
+        margin-top: 44px;
+        .cir {
           width: 0px;
           height: 0px;
           border: 10px solid transparent;
           position: absolute;
           top: 20px;
         }
-        p {
+        .content-text {
           display: inline-block;
           padding: 14px 54px 14px 32px;
+          width: 100%;
           background-color: #fff;
           font-family: PingFangSC-Regular;
           font-size: 32px;
           color: #333;
           word-break: break-all;
+          box-sizing: border-box;
         }
       }
       .fail-img {
@@ -148,10 +462,144 @@ export default {
         height: 32px;
         margin: auto 0 auto 24px;
       }
+      .img-list {
+        img {
+          max-width: 400px;
+          margin: 0 16px 16px 0;
+        }
+      }
+      ::v-deep .uni-audio-default {
+        height: 72px;
+        width: 280px!important;
+        min-width: 0!important;
+      }
+      ::v-deep .uni-audio-left {
+        height: 72px;
+        width: 72px;
+        .uni-audio-button {
+          margin: 14px;
+        }
+      }
+      ::v-deep .uni-audio-right {
+        height: 72px;
+        margin-left: 72px;
+        padding: 10px 32px 10px 0;
+      }
+      .revoke-text {
+        line-height: 54px;
+        padding: 0 24px;
+        border-radius: 8px;
+        background-color: #EEE;
+        color: #999;
+        margin-top: 16px;
+      }
+      .file {
+        height: 128px;
+        background: #FFFFFF;
+        border-radius: 8px;
+        border: 1px solid #CCCCCC;
+        box-sizing: border-box;
+        padding: 0 16px;
+        margin-bottom: 32px;
+
+        & > .u-row {
+          height: 100%;
+
+          .left {
+            width: 522px;
+            display: flex;
+            align-items: center;
+
+            & > img {
+              width: 96px;
+              height: 96px;
+            }
+
+            & > span {
+              font-size: 32px;
+              color: #333333;
+              display: inline-block;
+              line-height: 44px;
+              text-overflow: ellipsis;
+              overflow-x: hidden;
+              white-space: nowrap;
+            }
+          }
+
+          & > span {
+            font-size: 28px;
+            color: #999;
+            margin: -8px 0 0 16px;
+          }
+        }
+      }
+      .card-info {
+        width: 450px;
+        background: #FFF;
+        .top {
+          padding: 16px 32px;
+          display: flex;
+          .card-left {
+            width: calc(100% - 120px);
+            h3 {
+              font-family: PingFangSC-Regular;
+              font-size: 32px;
+              color: #333;
+              line-height: 44px;
+              height: 74px;
+            }
+            p {
+              font-family: PingFangSC-SNaNpxibold;
+              font-size: 32px;
+              color: #333;
+              line-height: 44px;
+            }
+            div {
+              font-family: PingFangSC-Regular;
+              font-size: 24px;
+              color: #999;
+              line-height: 34px;
+            }
+          }
+          .card-right {
+            img {
+              width: 84px;
+              height: 84px;
+            }
+            
+          }
+        }
+        .bottom {
+          padding-left: 32px;
+          line-height: 48px;
+          font-family: PingFangSC-Regular;
+          font-size: 22px;
+          color: #999;
+          border-top: 1px solid #eee;
+        }
+      }
+      .map-info {
+        width: 560px;
+        height: 400px;
+        .address-text {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 560px;
+          background-color: rgba(0, 0, 0, .7);
+          p {
+            color: #fff;
+            line-height: 44px;
+            font-size: 24px;
+            padding-left: 32px;
+            word-break: break-all;
+          }
+        }
+      }
     }
     .item-left {
       .content {
-        span {
+        .cir {
           left: -18px;
           border-right-color: #fff;
         }
@@ -160,18 +608,32 @@ export default {
     .item-right {
       width: 100%;
       justify-content: right;
+      .user-name {
+        left: 0;
+        right: 82px;
+        text-align: right;
+      }
       .user-img {
         margin: 0 0 0 20px;
       }
       .content {
-        span {
+        .cir {
           border-left-color: #C7E7FE;
           right: -18px;
         }
-        p {
+        .content-text {
           background-color: #C7E7FE;
           padding: 14px 32px 14px 54px;
         }
+        .img-list {
+            img {
+              max-width: 400px;
+              margin: 0 0 16px 16px;
+            }
+          }
+        }
+      .fail-img {
+        margin: auto 24px auto 0;
       }
     }
   }

src/project/pidu/AppConversation/triggerRecord.vue

@@ -1,57 +1,32 @@
 <template>
   <div class="triggerRecord">
     <AiTopFixed>
-      <div class="top-select">
-        <div class="item">
-          <AiAreaPicker v-model="areaId" :areaId="areaId" @select="areaSelect" :name.sync="areaName" style="color: #666" selectRoot>
-            <span style="margin-left: 4px" v-if="areaName">{{ areaName }}</span>
-            <span v-else style="color:#999;">行政区划</span>
-            <u-icon name="arrow-down" color="#666" size="28" style="margin-left: 4px" />
-          </AiAreaPicker>
-        </div>
-        <div class="item">
-          <span style="color:#999;">部门名称</span>
-          <!-- <span v-else>{{ $dict.getLabel('EP_handleType', handleType) }}</span> -->
-          <u-icon name="arrow-down" color="#666" size="28" style="margin-left: 4px" />
-        </div>
-      </div>
       <div class="top-search">
         <div class="left">
-          <u-search v-model="keyword" :clearabled="true" placeholder="请输入昵称" :show-action="false" bg-color="#F5F5F5"
+          <AiPagePicker type="dept" :selected.sync="deptUserList" nodeKey="id" single @select="deptSelect">
+            <span class="label" v-if="deptUserList.length">{{deptUserList[0].name}}</span>
+            <span v-else style="color:#999;">部门名称</span>
+            <u-icon name="arrow-down" color="#999" size="24" style="margin-left:8px;"/>
+          </AiPagePicker>
+        </div>
+        <div class="right">
+          <u-search v-model="keyword" :clearabled="true" placeholder="触发敏感词" :show-action="false" bg-color="#F5F5F5"
             search-icon-color="#999" color="#999" height="58" @search="getListInit" @clear="getListInit">
           </u-search>
         </div>
       </div>
     </AiTopFixed>
     <div class="user-list">
-      <div class="item">
+      <div class="item" v-for="(item, index) in list" :key="index" @click="toConversationRecord(item)">
-        <img src="./img/user-img.png" alt="">
+        <img src="./img/group-img.png" alt="" v-if="item.type == 1">
+        <img :src="item.userAvatar" alt="" v-if="item.type != 1 && item.userAvatar">
+        <img src="./img/user-img.png" alt="" v-if="item.type != 1 && !item.userAvatar">
         <div class="item-right">
-          <div class="user">
+          <div class="name-flex">
-            <p>李毅</p>
+            <p>{{item.userName}}</p>
-            <div>你是<span>哪位</span></div>
+            <div class="time">{{item.createTime.substring(0, 16)}}</div>
           </div>
-          <div class="time">2023-02-23 17:55</div>
+          <div v-html="item.text" class="item-content"></div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./img/user-img.png" alt="">
-        <div class="item-right">
-          <div class="user">
-            <p>李毅</p>
-            <div>你是<span>哪位</span></div>
-          </div>
-          <div class="time">2023-02-23 17:55</div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./img/user-img.png" alt="">
-        <div class="item-right">
-          <div class="user">
-            <p>李毅</p>
-            <div>你是<span>哪位</span></div>
-          </div>
-          <div class="time">2023-02-23 17:55</div>
         </div>
       </div>
     </div>
@@ -61,24 +36,63 @@
 <script>
 export default {
   name: "triggerRecord",
+  appName: "触发记录",
   data() {
     return {
       keyword: '',
-      areaId: '',
+      current: 1,
-      areaName: '',
+      pages: 2,
+      list: [],
+      deptUserList: []
     };
   },
+  onLoad() {
+    this.getListInit()
+  },
   onShow() {
     document.title = '触发记录'
   },
   methods: {
     getListInit() {
-
+      this.current = 1
+      this.pages = 2
+      this.list = []
+      this.getList()
     },
-    areaSelect(e) {
+    getList() {
-      this.areaId = e
+      if(this.current > this.pages)  return
+      this.$http.post(`/app/appsessionarchivekeywordrecord/list`, null, {
+        params: {
+          current: this.current,
+          size: 10,
+          content: this.keyword,
+          departmentId: this.deptUserList.length ? this.deptUserList[0].id : ''
+        }
+      }).then(res=> {
+        if(res?.data) {
+          res.data.records.map((item) => {
+            item.text = this.changeKeyRed(item.content, item.wordName)
+          })
+          this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records
+          this.pages = res.data.pages
+        }
+      })
+    },
+    toConversationRecord(row) {
+      uni.navigateTo({url: `./conversationRecord?userId=${row.userId}&toUserId=${row.toUserId}&toName=${row.toName}&type=${row.type}&seq=${row.seq}`})
+    },
+    deptSelect(e) {
+      this.deptUserList = e
       this.getListInit()
-      this.getTotal()
+    },
+    changeKeyRed (str, keyWord) {
+      if (str != null && keyWord != null) {
+        var substr = "/" + keyWord + "/g";
+        var replaceStr = str.replace(eval(substr), "<span style='color:#e6736e'>" + keyWord + "</span>")
+        return replaceStr;
+      } else {
+        return str;
+      }
     },
   },
 };
@@ -104,7 +118,11 @@ export default {
     padding: 20px 32px;
     display: flex;
     .left {
-      width: 100%;
+      width: 350px;
+      line-height: 64px;
+    }
+    .right {
+      width: calc(100% - 350px);
     }
   }
   .top-select {
@@ -131,44 +149,80 @@ export default {
     .item {
       padding: 24px 0 0 32px;
       display: flex;
+      box-sizing: border-box;
       img {
         width: 80px;
         height: 80px;
         margin-right: 32px;
+        border-radius: 50%;
       }
       .item-right {
         width: calc(100% - 112px);
-        display: flex;
-        justify-content: space-between;
         border-bottom: 1px solid #eee;
-        padding-right: 32px;
+        padding: 0 32px 20px 0;
         box-sizing: border-box;
-        .user {
+        // display: flex;
-          width: calc(100% - 240px);
+        // justify-content: space-between;
+        // border-bottom: 1px solid #eee;
+        // padding-right: 32px;
+        // box-sizing: border-box;
+        // .user {
+        //   width: calc(100% - 240px);
+        //   p {
+        //     line-height: 44px;
+        //     font-family: PingFangSC-Medium;
+        //     font-weight: 500;
+        //     font-size: 32px;
+        //     color: #333;
+        //     letter-spacing: 0.3px;
+        //     margin-bottom: 8px;
+        //   }
+        //   div {
+        //     color: #666;
+        //     font-size: 28px;
+        //     font-family: PingFangSC;
+        //     line-height: 40px;
+        //     padding-bottom: 20px;
+        //     span {
+        //       color: #e6736e;
+        //     }
+        //   }
+        // }
+        // .time {
+        //   font-family: PingFangSC-Regular;
+        //   font-size: 26px;
+        //   color: #999;
+        // }
+
+        .name-flex {
+          display: flex;
+          justify-content: space-between;
+          width: 100%;
           p {
+            width: calc(100% - 240px);
             line-height: 44px;
             font-family: PingFangSC-Medium;
             font-weight: 500;
             font-size: 32px;
             color: #333;
-            letter-spacing: 0.3px;
             margin-bottom: 8px;
           }
-          div {
+          .time {
-            color: #666;
+            font-family: PingFangSC-Regular;
-            font-size: 28px;
+            font-size: 26px;
-            font-family: PingFangSC;
+            color: #999;
-            line-height: 40px;
-            padding-bottom: 20px;
-            span {
-              color: #e6736e;
-            }
           }
         }
-        .time {
+        .content {
-          font-family: PingFangSC-Regular;
+          color: #666;
-          font-size: 26px;
+          font-size: 28px;
-          color: #999;
+          font-family: PingFangSC;
+          line-height: 40px;
+          padding-bottom: 20px;
+          word-break: break-all;
+          span {
+            color: #e6736e;
+          }
         }
       }
     }