notifiesPageDetails.vue 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <template>
  2. <view class="bg">
  3. <view class="Articletitle">
  4. {{ info.title }}
  5. </view>
  6. <view class="vHtml">
  7. <u-parse class="vHtml" :content="info.content"></u-parse>
  8. </view>
  9. </view>
  10. </template>
  11. <script>
  12. import {
  13. notifiesDetails
  14. } from '@/http/api/common.js'
  15. export default {
  16. data() {
  17. return {
  18. info:null
  19. }
  20. },
  21. onLoad(e) {
  22. if (e.id) {
  23. this.getnotifiesDetails(e.id)
  24. }
  25. },
  26. methods: {
  27. async getnotifiesDetails(id){
  28. let res = await notifiesDetails(id)
  29. if (res.data.code == 200) {
  30. this.info = res.data.data
  31. }
  32. },
  33. }
  34. }
  35. </script>
  36. <style lang="scss">
  37. .bg{
  38. width: 750rpx;
  39. margin: 0 auto;
  40. display: flex;
  41. flex-direction: column;
  42. align-items: flex-start;
  43. padding-left: 20rpx;
  44. }
  45. .Articletitle{
  46. width: 710rpx;
  47. height: 112rpx;
  48. font-size: 40rpx;
  49. font-family: PingFang SC, PingFang SC;
  50. font-weight: bold;
  51. color: #333333;
  52. line-height: 56rpx;
  53. display: -webkit-box;
  54. word-break: break-all;
  55. text-overflow: ellipsis;
  56. overflow: hidden;
  57. -webkit-box-orient: vertical;
  58. -webkit-line-clamp:2;
  59. }
  60. .vHtml{
  61. width: 710rpx;
  62. }
  63. .vHtml img {
  64. vertical-align: middle;
  65. border-style: none;
  66. width: 100%;
  67. height: auto;
  68. }
  69. .vHtml p {
  70. margin-top: 30rpx;
  71. margin-bottom: 30rpx;
  72. }
  73. </style>