contentText.vue 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. <template>
  2. <view class="detail-desc">
  3. <view class="d-header"><text>商品详情</text></view>
  4. <rich-text class="detail-centent" :nodes="description"></rich-text>
  5. <!-- 底部高度撑开 -->
  6. </view>
  7. </template>
  8. <script>
  9. export default {
  10. props: {
  11. description: {
  12. default: ''
  13. },
  14. },
  15. data() {
  16. return {
  17. };
  18. },
  19. };
  20. </script>
  21. <style lang="scss">
  22. /* 详情 */
  23. .detail-desc {
  24. margin-top: 14rpx;
  25. background: #fff;
  26. /deep/ img {
  27. max-width: 100% !important;
  28. display: inline !important;
  29. }
  30. /deep/ div {
  31. max-width: 100% !important;
  32. }
  33. .d-header {
  34. display: flex;
  35. justify-content: center;
  36. align-items: center;
  37. height: 80rpx;
  38. font-size: $font-base + 2rpx;
  39. color: $font-color-dark;
  40. position: relative;
  41. text {
  42. padding: 0 20rpx;
  43. background: #fff;
  44. position: relative;
  45. z-index: 1;
  46. }
  47. &:after {
  48. position: absolute;
  49. left: 50%;
  50. top: 50%;
  51. transform: translateX(-50%);
  52. width: 300rpx;
  53. height: 0;
  54. content: '';
  55. border-bottom: 1px solid #ccc;
  56. }
  57. }
  58. }
  59. /* 商品详情中限制图片大小 */
  60. /deep/ .rich-img {
  61. width: 100% !important;
  62. height: auto;
  63. }
  64. </style>