后台使用的图文混排插件如:editor、Markman等,得到的页面,前端使用v-html显示的不美观,所以有时候需要前端自己出一个,后端替换文字和图片部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta
name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"
/>
<title>图文混排模板</title>
</head>
<body>
<div style="padding: 4vw">
<div
style="
line-height: 6vw;
text-align: justify;
text-align-last: left;
font-size: 5vw;
font-weight: bold;
color: #333;
"
>
我还得撒发货单到时候看发货时快递费,卡后方可辣三丁,卡三大话费卡打算,哈萨克分段函数
</div>
<div style="margin: 3vw 0; font-size: 4vw; color: #999">
2012-10-24 11:30
</div>
<div
style="background-color: #ddd; height: 1Px; margin-bottom: 6vw"
></div>
<div
style="
line-height: 5.6vw;
text-align: justify;
text-align-last: left;
font-size: 4.4vw;
text-indent: 2em;
color: #666;
"
>
家住车站路社区的刘女士,丈夫因病去世,靠打零工独自抚养女儿,又不幸遭遇火灾,造成直接损失2万多元。街道救助站接到社区情况反映后,第一时间赶到火灾现场,进行受灾情况评估取证。因其本身为单亲家庭,而且经济方面较为困难,救助站根据社区提供的信息和实地了解的情况,对其开通救济绿色通道,在当天下午先期送去了2000元救济金,解决灾户的燃眉之急。等灾户安置好后,再通过社区进行救助申报。
</div>
<img
style="
display: block;
width: 100%;
height: auto;
margin: 5vw auto;
max-width: 100%;
max-height: 100%;
"
src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1615474386,3710175212&fm=26&gp=0.jpg"
alt=""
/>
<div
style="
line-height: 5.6vw;
text-align: justify;
text-align-last: left;
font-size: 4.4vw;
text-indent: 2em;
color: #666;
"
>
“对于火灾等突发性事件,我们会视情况开通应急救济绿色通道,由社区和街道落实救助金在24小时内送达,确保灾户顺利度过最艰难的一段时间。”相关负责人表示。(张
亮 通讯员张静君)
</div>
</div>
</body>
</html>