uni-im-group-notification.vue

<template>
  <view class="system-msg-box">
    <view class="system-msg group-notification">
      <view class="title-box">
        <uni-icons size="26" type="sound-filled" color="#0cc8fa"></uni-icons>
        <text class="title">群公告</text>
      </view>
      <text :selectable="true" :user-select="true" space="nbsp" :decode="true" class="content">{{notification.content}}</text>
      <text class="create_time">公告时间：{{friendlyTime}}</text>
    </view>
  </view>
</template>

<script>
  import uniIm from '@/uni_modules/uni-im/sdk/index.js';
  export default {
    data() {
      return {
        notification:{
          content:"",
          create_time:0
        }
      }
    },
    props: {
      content:{
        type: String,
        default:""
      },
      create_time:{
        type: Number,
        default:0
      }
    },
    mounted() {
      this.notification.content = this.content
      this.notification.create_time = this.create_time
    },
    computed: {
      friendlyTime() {
        return uniIm.utils.toFriendlyTime(this.notification.create_time || Date.now())
      }
    }
  }
</script>

<style lang="scss">
  .system-msg-box{
    margin: 0 150rpx;
  }
  .hidden {
    height: 0;
  }
  .system-msg {
    background-color: #f2f2f2;
    color: #9d9e9d;
    font-size: 14px;
    line-height: 30px;
    padding: 0 15rpx;
    border-radius: 8px;
  }
  .group-notification {
    padding:14px 16px;
    background-color: #FFFFFF;
    width: 600rpx;
    margin-top: 10px;
  }
  .group-notification .title-box{
    flex-direction: row;
  }
  .group-notification .title-box .title{
    padding-left: 5px;
    color: #888;
    font-size: 18px;
  }
  .group-notification .content{
    color: #555;
    padding: 6px 0;
    /* #ifndef APP-NVUE */
    word-break: break-all;
    /* #endif */
    font-size: 16px;
  }
</style>