<template>
  <view class="container">
    <VNavigationBar style="position: relative;z-index: 99;" backgroundColor="#fff" title-color="#000" title="通知公告详情"></VNavigationBar>
    <div class="body">
      <rich-text style="width: 100%" :nodes="richTextHtml | formatRichText" />
    </div>
  </view>
</template>

<script>
import request from "../../utils/request";
import config from '@/config'
import parser from 'rich-text-parser'
import VNavigationBar from "../../components/VNavigationBar.vue";
import {getJSONData} from "@/utils/auth";

export default {
  name: "content",
  components: {VNavigationBar},
  filters: {
    formatRichText(html) { // 控制小程序中图片大小
      // console.log(html)
      const nodes = parser.getRichTextJson(html)
      return nodes.children
    }
  },
  data() {
    return {
      richTextHtml: '',
      toUrl:null,
    };
  },
  onLoad(data) {
    let notice = getJSONData("notice")
    this.richTextHtml = notice.content
  },
  methods:{
  }
}
</script>

<style scoped lang="scss">
img{
  width: 100%;
  height: auto;
}
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  .body{
    padding: 15rpx;
    flex: 1;
    height: 0;
    overflow: auto;
  }
}
.fixed-button {
  position: fixed;
  bottom: 3rem; /* 距离底部的距离 */
  right: 2rem; /* 距离右边的距离 */
  z-index: 1000; /* 确保按钮在其他元素之上 */
  width: 80px; /* 按钮直径 */
  height: 80px; /* 按钮直径 */
  background-color: #f00; /* 按钮背景颜色 */
  color: #fff; /* 文字颜色 */
  border-radius: 50%; /* 圆形 */
  display: flex; /* 使用弹性盒子布局 */
  justify-content: center; /* 水平居中文本 */
  align-items: center; /* 垂直居中文本 */
  font-size: 18px; /* 字体大小 */
  text-align: center; /* 文字水平居中 */
  line-height: normal; /* 使用默认行高 */
  font-family: 'Arial', sans-serif; /* 选择字体 */
}

/* 为了确保文本垂直居中并且分行 */
.fixed-button br {
  content: '';
  display: block;
}
</style>
