view.vue 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. <template>
  2. <view>
  3. <navbar :scroll="scrollNum" :iSimmersive="false" :placeholder="true" title="资讯详情"></navbar>
  4. <view v-if="!isEmpty" class="main clear">
  5. <view class="title">{{data.title}}</view>
  6. <view class="info">
  7. <text>{{data.cat_name}}</text>
  8. <text class="iconfont">&#xe623; {{data.create_time}}</text>
  9. <text class="iconfont">&#xe62a; {{data.hits}}</text>
  10. </view>
  11. <view class="content clear" v-html="data.content">
  12. {{ data.content }}
  13. </view>
  14. </view>
  15. </view>
  16. </template>
  17. <script>
  18. import navbar from "@/components/navbar/navbar";
  19. export default {
  20. components: {
  21. navbar
  22. },
  23. data() {
  24. return {
  25. scrollNum: 0,
  26. isEmpty: false,
  27. data:{}
  28. };
  29. },
  30. onLoad(options) {
  31. this.$http.getNewsDetail({
  32. id: options.id
  33. }).then(res=>{
  34. this.isEmpty = false;
  35. if(res.status){
  36. this.data = res.data;
  37. }else{
  38. this.isEmpty = true;
  39. }
  40. }).catch(err=>{
  41. this.isEmpty = true;
  42. });
  43. },
  44. onPageScroll(obj){
  45. this.scrollNum = obj.scrollTop;
  46. },
  47. methods: {
  48. },
  49. }
  50. </script>
  51. <style lang="scss" scoped>
  52. .main{
  53. background-color: #fff;
  54. width: 95%;
  55. margin: 0 auto;
  56. margin-top: 20rpx;
  57. .title{
  58. width: 100%;
  59. height: 80rpx;
  60. line-height: 50rpx;
  61. padding: 0 20rpx;
  62. padding-top: 20rpx;
  63. font-size: 32rpx;
  64. }
  65. .info{
  66. width: 100%;
  67. border-bottom: 2rpx solid #eee;
  68. padding-bottom: 5px;
  69. font-size: 26rpx;
  70. float: left;
  71. text{
  72. float: left;
  73. }
  74. text:nth-child(1){
  75. color: #ff3700;
  76. border: 1px solid #ff3700;
  77. font-size: 20rpx;
  78. padding: 2rpx 2rpx;
  79. position: relative;
  80. top: 8rpx;
  81. margin-left: 20rpx;
  82. padding: 0 5rpx;
  83. }
  84. text:nth-child(2){
  85. margin-left: 20rpx;
  86. }
  87. text:nth-child(3){
  88. margin-left: 20rpx;
  89. }
  90. }
  91. .content{
  92. padding: 20rpx;
  93. float: left;
  94. font-size: 28rpx;
  95. }
  96. }
  97. </style>