trainingRegistration.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
  1. <template>
  2. <view>
  3. <u-navbar :back-text="info.title" back-icon-size="28" back-icon-color="#ffffff"
  4. :background="{backgroundColor: '#2795FD',}" :back-text-style="{color: '#ffffff'}"></u-navbar>
  5. <!-- 内容 -->
  6. <view class="main">
  7. <view class="headline">
  8. {{info.title}}
  9. </view>
  10. <view class="title">
  11. 培训详情
  12. </view>
  13. <!-- <view class="picture">
  14. <img src="@/assets/img/traniningPicture.png" alt="">
  15. </view> -->
  16. <!-- 详细信息 -->
  17. <view class="details" v-html="info.content">
  18. </view>
  19. </view>
  20. <!-- 资料 -->
  21. <!-- <view class="data">
  22. <view class="title">
  23. 培训资料
  24. </view>
  25. <u-line color="#e6e6e6" />
  26. <view class="class">
  27. <view class="text">
  28. 育婴师资格证(高级)培训课程表
  29. </view>
  30. <view class="download">
  31. <view class="icon">
  32. <img src="@/assets/img/md-file_download@1x.png" alt="">
  33. </view>
  34. <view class="download-text">
  35. 下载
  36. </view>
  37. </view>
  38. </view>
  39. </view> -->
  40. <!-- 报名按钮 -->
  41. <view class="bottom">
  42. <button class="sign-up">我要报名</button>
  43. </view>
  44. </view>
  45. </template>
  46. <script>
  47. import * as API from '@/apis/pagejs/packages.js'
  48. export default {
  49. data() {
  50. return {
  51. id: "",
  52. info: {
  53. },
  54. }
  55. },
  56. onLoad(op) {
  57. this.id = op.id
  58. this.getInfo()
  59. },
  60. methods: {
  61. getInfo(bl) {
  62. uni.showLoading({
  63. title: "加载中",
  64. mask: true,
  65. })
  66. API.trainingDetail({
  67. id: this.id,
  68. }).then((res) => {
  69. uni.hideLoading();
  70. this.info=res.data.trainingInfo;
  71. }).catch(error => {
  72. uni.showToast({
  73. title: error,
  74. icon: "none"
  75. })
  76. })
  77. }
  78. }
  79. }
  80. </script>
  81. <style>
  82. page {
  83. background: #F0F0F2;
  84. padding-bottom: 120px;
  85. }
  86. </style>
  87. <style lang="scss" scoped>
  88. .background {
  89. width: 100%;
  90. height: 376rpx;
  91. img {
  92. width: 100%;
  93. height: 100%;
  94. }
  95. }
  96. // 内容
  97. .main {
  98. padding: 40rpx 32rpx;
  99. background-color: #fff;
  100. // 标题
  101. .headline {
  102. color: rgba(16, 16, 16, 1);
  103. font-size: 40rpx;
  104. font-family: 'PingFangSC-medium';
  105. }
  106. .title {
  107. color: rgba(51, 51, 51, 1);
  108. font-size: 32rpx;
  109. font-family: 'PingFangSC-medium';
  110. margin-top: 40rpx
  111. }
  112. // 图片
  113. .picture {
  114. border-radius: 4px;
  115. width: 100%;
  116. height: 256rpx;
  117. margin-top: 50rpx;
  118. img {
  119. width: 100%;
  120. height: 100%;
  121. }
  122. }
  123. // 详细信息
  124. .details {
  125. margin-top: 40rpx;
  126. line-height: 48rpx;
  127. color: rgba(51, 51, 51, 1);
  128. }
  129. }
  130. // 资料
  131. .data {
  132. background-color: #fff;
  133. margin-top: 24rpx;
  134. padding: 24rpx 32rpx;
  135. .title {
  136. color: rgba(16, 16, 16, 1);
  137. font-size: 16px;
  138. font-weight: bold;
  139. margin-bottom: 24rpx;
  140. }
  141. .class {
  142. margin-top: 40rpx;
  143. border-radius: 5px;
  144. background-color: rgba(245, 245, 245, 1);
  145. padding: 28rpx 24rpx;
  146. color: #101010;
  147. display: flex;
  148. justify-content: space-between;
  149. align-items: center;
  150. .download {
  151. display: flex;
  152. align-items: center;
  153. color: rgba(22, 119, 255, 1);
  154. img {
  155. vertical-align: middle;
  156. width: 40rpx;
  157. height: 40rpx;
  158. }
  159. }
  160. }
  161. }
  162. // 报名按钮
  163. .bottom {
  164. background-color: #fff;
  165. padding: 24rpx 32rpx;
  166. position: fixed;
  167. bottom: 0;
  168. left: 0;
  169. right: 0;
  170. .sign-up {
  171. height: 96rpx;
  172. line-height: 96rpx;
  173. border-radius: 8px;
  174. background-color: rgba(39, 149, 253, 1);
  175. color: rgba(255, 255, 255, 1);
  176. font-size: 36rpx;
  177. text-align: center;
  178. }
  179. }
  180. </style>