<template> <view class="detail-desc"> <view class="d-header"><text>图文详情</text></view> <rich-text class="detail-centent" :nodes="description"></rich-text> <!-- 底部高度撑开 --> </view> </template> <script> export default { props: { description: { default: '' }, }, data() { return { }; }, }; </script> <style lang="scss"> /* 详情 */ .detail-desc { margin-top: 14rpx; background: #fff; /deep/ img { max-width: 100% !important; display: inline !important; } /deep/ div { max-width: 100% !important; } .d-header { display: flex; justify-content: center; align-items: center; height: 80rpx; font-size: $font-base + 2rpx; color: $font-color-dark; position: relative; text { padding: 0 20rpx; background: #fff; position: relative; z-index: 1; } &:after { position: absolute; left: 50%; top: 50%; transform: translateX(-50%); width: 300rpx; height: 0; content: ''; border-bottom: 1px solid #ccc; } } } /* 商品详情中限制图片大小 */ /deep/ .rich-img { width: 100% !important; height: auto; } </style>