about.vue 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <template>
  2. <view class="center">
  3. <view class="content" v-html="content">
  4. {{ content }}
  5. </view>
  6. </view>
  7. </template>
  8. <script>
  9. import { details } from '@/api/index.js';
  10. export default {
  11. data() {
  12. return {
  13. title:'',
  14. content:'',
  15. id:'',
  16. image:'',
  17. }
  18. },
  19. onLoad(option){
  20. this.loadData();
  21. },
  22. methods:{
  23. async loadData(){
  24. const obj = this;
  25. details({},1).then(({data}) => {
  26. obj.time = data.add_time;
  27. obj.content = data.content;
  28. obj.image = data.image_input[0];
  29. })
  30. }
  31. }
  32. }
  33. </script>
  34. <style lang="scss">
  35. .center{
  36. height: 100%;
  37. }
  38. .bg{
  39. width: 100%;
  40. height: 474rpx;
  41. image{
  42. height: 100%;
  43. width: 100%;
  44. }
  45. }
  46. .title {
  47. width: 90%;
  48. margin: 0 auto;
  49. font-size: 40rpx;
  50. font-weight: 500;
  51. color: #171313;
  52. text-overflow: -o-ellipsis-lastline;
  53. overflow: hidden;
  54. text-overflow: ellipsis;
  55. display: -webkit-box;
  56. -webkit-line-clamp: 2;
  57. -webkit-box-orient: vertical;
  58. }
  59. .time {
  60. width: 90%;
  61. margin: 0 auto;
  62. margin-top: 16rpx;
  63. font-size: 24rpx;
  64. font-weight: 500;
  65. color: #656B6C;
  66. }
  67. .content {
  68. width: 90%;
  69. margin: 0 auto;
  70. margin-top: 20rpx;
  71. font-size: 32rpx;
  72. font-weight: 500;
  73. color: #777777;
  74. }
  75. .content {
  76. /deep/ image,img,table {
  77. width: 100% !important;
  78. margin: 10rpx auto !important;
  79. }
  80. }
  81. </style>