about-us-detail.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271
  1. <template>
  2. <view class="article">
  3. <navbar :config="config"></navbar>
  4. <view class="title">
  5. {{ articleDetail.title }}
  6. </view>
  7. <view class="image-time">
  8. <view class="iconfont u-font24 linge">&#xe64a;</view>
  9. <view class="time">
  10. {{time}}
  11. </view>
  12. </view>
  13. <view class="text">
  14. <view class="item">
  15. <view class="top ql-editor-box" v-html="articleDetail.content"></view>
  16. <!-- <jyfparser :html="$mUtil.formatRichText(articleDetail.content)" ref="article"></jyfparser> -->
  17. </view>
  18. </view>
  19. </view>
  20. </template>
  21. <script>
  22. // import jyfparser from "../../../components/jyf-parser/jyf-parser.vue";
  23. export default {
  24. data() {
  25. return {
  26. config: {
  27. back: true, //false是tolbar页面 是则不写
  28. title: "关于松河生活平台",
  29. color: "#fff",
  30. switchnextstep: true, //切换底部样式
  31. //背景颜色;参数一:透明度(0-1);参数二:背景颜色(array则为线性渐变,string为单色背景)
  32. backgroundColor: [1, "#0B844A"],
  33. },
  34. articleDetail: {},
  35. time:"",
  36. };
  37. },
  38. onLoad(options) {
  39. this.getActicle(options.id);
  40. },
  41. methods: {
  42. getActicle(id) {
  43. this.$http.get("/about/us/info/" + id).then((res) => {
  44. if (res && res.code == 200) {
  45. this.articleDetail = res.data;
  46. this.articleDetail.content= res.data.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
  47. this.time = res.data.update_time.slice(0,10)
  48. }
  49. });
  50. }
  51. },
  52. };
  53. </script>
  54. <style lang="scss" scoped>
  55. .text {
  56. padding: 0 30rpx;
  57. overflow: hidden;
  58. }
  59. .show-bottom {
  60. background-color: #ffffff;
  61. border-radius: 50rpx 50rpx 0 0;
  62. padding: 37rpx 30rpx 22rpx 30rpx;
  63. .input {
  64. .texterea-item {
  65. background-color: #fafafa;
  66. padding: 22rpx 20rpx;
  67. border-radius: 21rpx;
  68. margin: 22rpx 29rpx 4rpx 30rpx;
  69. }
  70. }
  71. .top {
  72. display: flex;
  73. align-items: center;
  74. .line {
  75. width: 6rpx;
  76. height: 26rpx;
  77. background-color: #0B844A;
  78. border-radius: 3rpx;
  79. }
  80. .item {
  81. font-size: 36rpx;
  82. color: #1a1a1a;
  83. font-weight: 700;
  84. margin-left: 14rpx;
  85. flex: 1;
  86. }
  87. .deter-mine {
  88. font-size: 30rpx;
  89. font-weight: 500;
  90. color: #1a1a1a;
  91. }
  92. }
  93. }
  94. .selected {
  95. padding: 0 32rpx;
  96. .item {
  97. display: flex;
  98. margin-top: 30rpx;
  99. // align-items: center;
  100. .personal {
  101. margin-left: 18rpx;
  102. .top-title {
  103. font-size: 28rpx;
  104. font-weight: 400;
  105. color: #1a1a1a;
  106. }
  107. .time {
  108. font-size: 24rpx;
  109. color: #999999;
  110. margin-top: 8rpx;
  111. font-weight: 500;
  112. }
  113. .content {
  114. margin-top: 14rpx;
  115. font-size: 28rpx;
  116. font-weight: 500;
  117. color: #999999;
  118. }
  119. }
  120. image {
  121. width: 84rpx;
  122. height: 84rpx;
  123. }
  124. }
  125. .item:nth-child(odd) {
  126. .content {
  127. margin-top: 14rpx;
  128. font-size: 28rpx;
  129. font-weight: 500;
  130. color: #999999;
  131. }
  132. }
  133. .item:nth-child(even) {
  134. .content {
  135. margin-top: 14rpx;
  136. font-size: 28rpx;
  137. font-weight: 500;
  138. color: #1a1a1a;
  139. }
  140. }
  141. .stay-msg {
  142. margin-top: 28rpx;
  143. font-size: 36rpx;
  144. font-weight: 700;
  145. color: #1a1a1a;
  146. }
  147. }
  148. .option {
  149. display: flex;
  150. .link {
  151. display: flex;
  152. align-items: center;
  153. margin-left: 44rpx;
  154. image {
  155. width: 38rpx;
  156. height: 38rpx;
  157. }
  158. .num {
  159. margin-left: 10rpx;
  160. font-size: 24rpx;
  161. font-weight: 500;
  162. color: #999999;
  163. }
  164. }
  165. .message {
  166. display: flex;
  167. align-items: center;
  168. margin-left: 44rpx;
  169. image {
  170. width: 38rpx;
  171. height: 38rpx;
  172. }
  173. .num {
  174. margin-left: 10rpx;
  175. font-size: 24rpx;
  176. font-weight: 500;
  177. color: #999999;
  178. }
  179. }
  180. .good {
  181. display: flex;
  182. align-items: center;
  183. image {
  184. width: 38rpx;
  185. height: 38rpx;
  186. }
  187. .num {
  188. margin-left: 18rpx;
  189. font-size: 24rpx;
  190. font-weight: 500;
  191. color: #999999;
  192. }
  193. }
  194. }
  195. .text {
  196. padding: 18rpx 30rpx 40rpx 30rpx;
  197. color: #666666;
  198. font-weight: 500;
  199. line-height: 48rpx;
  200. .item {
  201. margin-bottom: 30rpx;
  202. }
  203. image {
  204. width: 690rpx;
  205. height: 390rpx;
  206. // margin-bottom: 30rpx;
  207. }
  208. }
  209. .image-time {
  210. display: flex;
  211. align-items: center;
  212. margin-left: 30rpx;
  213. image {
  214. width: 24rpx;
  215. height: 24rpx;
  216. }
  217. .time {
  218. margin-left: 10rpx;
  219. font-size: 24rpx;
  220. font-weight: 400;
  221. color: #999999;
  222. }
  223. }
  224. .title {
  225. padding: 48rpx 30rpx 16rpx 30rpx;
  226. font-size: 42rpx;
  227. font-weight: 700;
  228. color: #1a1a1a;
  229. }
  230. </style>