<template>
  <view class="info">
    <u-navbar
      title-color="#fff"
      :custom-back="customBack"
      :border-bottom="false"
      back-icon-color="#CCE8FF"
      :background="{ background: '#008CFF' }"
      title="消息详情"
    ></u-navbar>
    <view class="time">{{ details.createTime }}</view>
    <view class="box">
      <view class="title">{{ details.title }}</view>
      <view class="content">{{ details.content }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      details: {}
    };
  },
  onLoad(page) {
    const details = JSON.parse(page.details);
    if (details) {
      this.details = details;
    }
  },
  methods: {
    customBack() {
      this.$u.route({
        url: 'pages/message/message'
      });
    }
  }
};
</script>

<style>
/* #ifndef H5 */
page {
  height: 100%;
  background-color: #f6f6ff;
}

/* #endif */
</style>

<style lang="scss" scoped>
.info {
  padding: 40rpx 40rpx;
}

.box {
  margin-top: 20rpx;
  background-color: white;
  border-radius: 15rpx;

  .title {
    padding-top: 20rpx;
    text-align: center;
    font-size: 40rpx;
  }
}

.content {
  text-indent: 2em;
  padding: 20rpx 40rpx;
  line-height: 44rpx;
}
</style>