<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>