86 lines
2.0 KiB
Vue
86 lines
2.0 KiB
Vue
|
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<view class="container">
|
||
|
|
<!-- <web-view :src="richTextHtml"></web-view>-->
|
||
|
|
<VNavigationBar titleColor="rgba(0,0,0,0.9)" backgroundColor="#fff" 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>
|