huodongXq.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286
  1. <template>
  2. <view class="body2">
  3. <u-navbar :autoBack="true" title="详情介绍" bgColor="rgba(255,255,255,0)" :placeholder="true" titleStyle="font-weight:bold;color:#121212"></u-navbar>
  4. <view class="group_1">
  5. <view class="group_3">
  6. <text lines="1" class="text_2">快来!2023答嘴鼓夏令营火热报名中~</text>
  7. <view class="block_1">
  8. <text lines="1" decode="true" class="text_3">2023.09.01&nbsp;12:00:10</text>
  9. <!-- <view class="image-text_1">
  10. <uni-icons type="redo" size="20"></uni-icons>
  11. <text lines="1" class="text-group_1">分享</text>
  12. </view> -->
  13. </view>
  14. </view>
  15. <view class="group_4">
  16. <image src="https://huli-app.wenlvti.net/app_static/minnanhun/image/hd_1.png" class="image_4"></image>
  17. <text lines="1" decode="true" class="paragraph_1">
  18. 在这个时代,社会的发展日新月异,人们的 心也不由跟着浮躁起来。而非物质文化遗产和闽 南文化这些当地的优秀传统文化则给了我们一个
  19. 心灵休憩的港湾。这些文化需要一代代传承下去 ,方能让传统得以延续,让中华独有的历史悠久 的文明始终浸润我们的灵魂。于是,有这么一些
  20. 人、一些单位,在传承的领域孜孜不倦,默默耕 耘,让我们看到一幕幕传习的风采,分享那一份 份成果的喜悦!今天,我们一起来了解下2023年 的讲古答嘴鼓夏令营吧!
  21. </text>
  22. </view>
  23. <view class="group_4">
  24. <image src="https://huli-app.wenlvti.net/app_static/minnanhun/image/hd_2.png" class="image_5"></image>
  25. <text lines="1" decode="true" class="paragraph_1">
  26. 为提高讲古、答嘴鼓的 艺术理论认识和表演技艺 促进讲古、答嘴鼓艺术的传承和发展 7月18日上午 由厦门市思明区文化馆主办 厦门市鹏翔答嘴鼓讲古艺术传习中心承办
  27. 鹭江街道大同社区居委会协办的 2023年讲古答嘴鼓夏令营 开营仪式 在鹭江老剧场文化公园内 大同社区书苑顺利举行
  28. </text>
  29. </view>
  30. <view class="group_5">
  31. <view class="text-wrapper_1">
  32. <text lines="1" class="text_4">往期风华</text>
  33. <text lines="1" class="text_5">查看更多》</text>
  34. </view>
  35. <view class="list_1">
  36. <view class="list-items_1-0">
  37. <view class="block_2-0"></view>
  38. <image
  39. src="https://lanhu.oss-cn-beijing.aliyuncs.com/pstq21xea43w86ko6rqj72ywe9b5ipb9vmmq4rsktdg6i5292739e875-27ed-4fd4-b53e-ef4df53398bf"
  40. class="label_3-0"
  41. ></image>
  42. <view class="text-wrapper_2-0">
  43. <text lines="1" class="text_6-0">“答嘴鼓”夏令营第三期活动</text>
  44. <text lines="1" decode="true" class="text_7-0">2023-01-12&nbsp;&nbsp;&nbsp;&nbsp;08:30</text>
  45. </view>
  46. </view>
  47. </view>
  48. </view>
  49. </view>
  50. <view @click="applicationBtn" class="baoming">我要报名</view>
  51. </view>
  52. </template>
  53. <script>
  54. export default {
  55. data() {
  56. return {};
  57. },
  58. methods: {
  59. applicationBtn() {
  60. uni.navigateTo({
  61. url: '/xueyuan_fenbao/kcXiangQing/baoMing'
  62. });
  63. }
  64. }
  65. };
  66. </script>
  67. <style>
  68. .body2 {
  69. background-size: 100% 100%;
  70. background-attachment: fixed;
  71. background-repeat: repeat-y;
  72. background-color: #efefef;
  73. padding-bottom: 30rpx;
  74. }
  75. .baoming {
  76. width: 686rpx;
  77. height: 80rpx;
  78. background: #ca5642;
  79. text-align: center;
  80. line-height: 80rpx;
  81. font-size: 32rpx;
  82. border-radius: 40rpx;
  83. color: #ffffff;
  84. margin: 0 32rpx 0 32rpx;
  85. }
  86. .group_1 {
  87. background-color: #efefef;
  88. width: 750rpx;
  89. display: flex;
  90. flex-direction: column;
  91. }
  92. .group_3 {
  93. width: 750rpx;
  94. height: 245rpx;
  95. display: flex;
  96. flex-direction: column;
  97. }
  98. .text_2 {
  99. width: 682rpx;
  100. height: 118rpx;
  101. overflow-wrap: break-word;
  102. color: rgba(49, 37, 32, 1);
  103. font-size: 48rpx;
  104. font-family: SourceHanSansCN-Bold;
  105. font-weight: 700;
  106. text-align: justifyLeft;
  107. line-height: 72rpx;
  108. margin: 34rpx 0 0 35rpx;
  109. }
  110. .block_1 {
  111. width: 682rpx;
  112. height: 32rpx;
  113. flex-direction: row;
  114. display: flex;
  115. justify-content: space-between;
  116. margin: 18rpx 0 43rpx 34rpx;
  117. }
  118. .text_3 {
  119. width: 214rpx;
  120. height: 18rpx;
  121. overflow-wrap: break-word;
  122. color: rgba(153, 153, 153, 1);
  123. font-size: 24rpx;
  124. font-family: SourceHanSansCN-Regular;
  125. font-weight: normal;
  126. text-align: left;
  127. white-space: nowrap;
  128. line-height: 72rpx;
  129. margin-top: 8rpx;
  130. }
  131. .image-text_1 {
  132. width: 87rpx;
  133. height: 32rpx;
  134. flex-direction: row;
  135. display: flex;
  136. justify-content: space-between;
  137. }
  138. .text-group_1 {
  139. width: 46rpx;
  140. height: 23rpx;
  141. overflow-wrap: break-word;
  142. color: rgba(49, 37, 32, 1);
  143. font-size: 24rpx;
  144. font-family: SourceHanSansCN-Regular;
  145. font-weight: normal;
  146. text-align: left;
  147. white-space: nowrap;
  148. line-height: 24rpx;
  149. margin-top: 6rpx;
  150. }
  151. .group_4 {
  152. background-color: rgba(255, 255, 255, 1);
  153. display: flex;
  154. margin: 0 32rpx 0 32rpx;
  155. flex-direction: column;
  156. justify-content: flex-center;
  157. }
  158. .image_4 {
  159. width: 647rpx;
  160. height: 672rpx;
  161. margin: 20rpx 0 0 20rpx;
  162. }
  163. .image_5 {
  164. width: 643rpx;
  165. height: 413rpx;
  166. margin: 20rpx 0 0 20rpx;
  167. }
  168. .paragraph_1 {
  169. height: 320rpx;
  170. text-indent: 2em;
  171. font-size: 30rpx;
  172. line-height: 48rpx;
  173. margin: 35rpx 32rpx 37rpx 40rpx;
  174. overflow: scroll;
  175. }
  176. .group_5 {
  177. width: 750rpx;
  178. display: flex;
  179. flex-direction: column;
  180. }
  181. .text-wrapper_1 {
  182. width: 664rpx;
  183. height: 26rpx;
  184. flex-direction: row;
  185. display: flex;
  186. justify-content: space-between;
  187. margin: 44rpx 0 0 51rpx;
  188. }
  189. .text_4 {
  190. width: 109rpx;
  191. height: 26rpx;
  192. overflow-wrap: break-word;
  193. color: rgba(49, 37, 32, 1);
  194. font-size: 28rpx;
  195. font-family: Adobe Heiti Std R;
  196. font-weight: normal;
  197. text-align: left;
  198. white-space: nowrap;
  199. line-height: 28rpx;
  200. }
  201. .text_5 {
  202. width: 89rpx;
  203. height: 20rpx;
  204. overflow-wrap: break-word;
  205. color: rgba(18, 18, 18, 1);
  206. font-size: 22rpx;
  207. font-family: SourceHanSansCN-Regular;
  208. font-weight: normal;
  209. text-align: left;
  210. white-space: nowrap;
  211. line-height: 20rpx;
  212. margin-top: 3rpx;
  213. }
  214. .list_1 {
  215. width: 686rpx;
  216. display: flex;
  217. flex-direction: column;
  218. justify-content: space-between;
  219. margin: 33rpx 0 0 32rpx;
  220. }
  221. .list-items_1-0 {
  222. background-color: rgba(255, 255, 255, 1);
  223. border-radius: 20rpx;
  224. width: 686rpx;
  225. height: 149rpx;
  226. margin-bottom: 32rpx;
  227. flex-direction: row;
  228. display: flex;
  229. }
  230. .block_2-0 {
  231. background-color: rgba(202, 86, 66, 1);
  232. width: 8rpx;
  233. height: 80rpx;
  234. margin-top: 35rpx;
  235. display: flex;
  236. flex-direction: column;
  237. }
  238. .label_3-0 {
  239. width: 38rpx;
  240. height: 40rpx;
  241. margin: 55rpx 0 0 27rpx;
  242. }
  243. .text-wrapper_2-0 {
  244. width: 389rpx;
  245. height: 73rpx;
  246. display: flex;
  247. flex-direction: column;
  248. justify-content: space-between;
  249. margin: 36rpx 197rpx 0 27rpx;
  250. }
  251. .text_6-0 {
  252. width: 371rpx;
  253. height: 30rpx;
  254. overflow-wrap: break-word;
  255. color: rgba(49, 37, 32, 1);
  256. font-size: 30rpx;
  257. font-family: SourceHanSansCN-Bold;
  258. font-weight: 700;
  259. text-align: left;
  260. white-space: nowrap;
  261. line-height: 30rpx;
  262. margin-left: 18rpx;
  263. }
  264. .text_7-0 {
  265. width: 198rpx;
  266. height: 18rpx;
  267. overflow-wrap: break-word;
  268. color: rgba(153, 153, 153, 1);
  269. font-size: 24rpx;
  270. font-family: SourceHanSansCN-Regular;
  271. font-weight: normal;
  272. text-align: left;
  273. white-space: nowrap;
  274. line-height: 24rpx;
  275. margin-top: 25rpx;
  276. }
  277. </style>