detail.wxss 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399
  1. @charset "UTF-8";
  2. /**
  3. * 这里是uni-app内置的常用样式变量
  4. *
  5. * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
  6. * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
  7. *
  8. */
  9. /**
  10. * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
  11. *
  12. * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
  13. */
  14. /* 颜色变量 */
  15. /* 行为相关颜色 */
  16. /* 文字基本颜色 */
  17. /* 背景颜色 */
  18. /* 边框颜色 */
  19. /* 尺寸变量 */
  20. /* 文字尺寸 */
  21. /* 图片尺寸 */
  22. /* Border Radius */
  23. /* 水平间距 */
  24. /* 垂直间距 */
  25. /* 透明度 */
  26. /* 文章场景相关 */
  27. .container.data-v-3e159eb4 {
  28. display: flex;
  29. flex-direction: column;
  30. position: relative;
  31. min-height: 100vh;
  32. background-color: #ebeced;
  33. }
  34. .container .banner.data-v-3e159eb4 {
  35. position: relative;
  36. margin-top: 20rpx;
  37. width: 750rpx;
  38. height: 422rpx;
  39. }
  40. .container .banner .img.data-v-3e159eb4 {
  41. width: 100%;
  42. height: 100%;
  43. }
  44. .container .banner .slogan.data-v-3e159eb4 {
  45. position: absolute;
  46. top: 0;
  47. left: 0;
  48. display: flex;
  49. justify-content: center;
  50. align-items: center;
  51. width: 163rpx;
  52. height: 60rpx;
  53. background-color: rgba(255, 255, 255, 0.4);
  54. }
  55. .container .banner .slogan ._img.data-v-3e159eb4 {
  56. width: 125rpx;
  57. height: 44rpx;
  58. }
  59. .container .detail.data-v-3e159eb4 {
  60. position: absolute;
  61. top: 265rpx;
  62. left: 20rpx;
  63. box-sizing: border-box;
  64. padding: 0 30rpx;
  65. width: 710rpx;
  66. height: 254rpx;
  67. border-radius: 10rpx;
  68. background-color: #fff;
  69. }
  70. .container .detail .detail_name.data-v-3e159eb4 {
  71. margin-top: 25rpx;
  72. font-size: 34rpx;
  73. font-weight: bold;
  74. }
  75. .container .detail .detail_info.data-v-3e159eb4 {
  76. display: flex;
  77. justify-content: space-between;
  78. margin-top: 10rpx;
  79. }
  80. .container .detail .detail_info .info_left.data-v-3e159eb4 {
  81. color: #999999;
  82. font-size: 20rpx;
  83. }
  84. .container .detail .detail_info .info_right.data-v-3e159eb4 {
  85. display: flex;
  86. align-items: center;
  87. color: #096562;
  88. font-size: 24rpx;
  89. }
  90. .container .detail .detail_info .info_right ._img.data-v-3e159eb4 {
  91. margin-left: 6rpx;
  92. width: 10rpx;
  93. height: 20rpx;
  94. }
  95. .container .detail .detail_group.data-v-3e159eb4 {
  96. display: flex;
  97. flex-wrap: wrap;
  98. margin-top: 5rpx;
  99. }
  100. .container .detail .detail_group .group_item.data-v-3e159eb4 {
  101. display: flex;
  102. align-items: center;
  103. margin-right: 10rpx;
  104. color: #999999;
  105. font-size: 20rpx;
  106. }
  107. .container .detail .detail_group .group_item ._img.data-v-3e159eb4 {
  108. margin-right: 5rpx;
  109. width: 22rpx;
  110. height: 22rpx;
  111. }
  112. .container .detail .address.data-v-3e159eb4 {
  113. display: flex;
  114. justify-content: space-between;
  115. margin-top: 8rpx;
  116. font-size: 28rpx;
  117. font-weight: bold;
  118. }
  119. .container .detail .address .address_left.data-v-3e159eb4 {
  120. width: 480rpx;
  121. overflow: hidden;
  122. text-overflow: ellipsis;
  123. white-space: nowrap;
  124. }
  125. .container .detail .address .address_right.data-v-3e159eb4 {
  126. display: flex;
  127. }
  128. .container .detail .address .address_right .right_box.data-v-3e159eb4 {
  129. margin-left: 28rpx;
  130. width: 50rpx;
  131. height: 78rpx;
  132. }
  133. .container .detail .address .address_right .right_box ._img.data-v-3e159eb4 {
  134. width: 100%;
  135. height: 100%;
  136. }
  137. .container .detail .distance.data-v-3e159eb4 {
  138. margin-top: -35rpx;
  139. color: #999999;
  140. font-size: 24rpx;
  141. }
  142. .container .body.data-v-3e159eb4 {
  143. position: absolute;
  144. top: 539rpx;
  145. left: 20rpx;
  146. padding-bottom: 30rpx;
  147. width: 710rpx;
  148. border-radius: 10rpx;
  149. background-color: #fff;
  150. }
  151. .container .body .body_header.data-v-3e159eb4 {
  152. display: flex;
  153. justify-content: space-around;
  154. box-sizing: border-box;
  155. padding: 0 30rpx;
  156. height: 150rpx;
  157. }
  158. .container .body .body_header .header_start.data-v-3e159eb4 {
  159. display: flex;
  160. flex-direction: column;
  161. justify-content: center;
  162. align-items: center;
  163. width: 213rpx;
  164. height: 150rpx;
  165. }
  166. .container .body .body_header .header_start .header_top.data-v-3e159eb4 {
  167. margin-bottom: 10rpx;
  168. color: #999999;
  169. font-size: 24rpx;
  170. }
  171. .container .body .body_header .header_start .header_bottom.data-v-3e159eb4 {
  172. font-size: 34rpx;
  173. font-weight: bold;
  174. }
  175. .container .body .body_header .header_night.data-v-3e159eb4 {
  176. display: flex;
  177. justify-content: center;
  178. align-items: center;
  179. }
  180. .container .body .body_header .header_night .night_line.data-v-3e159eb4 {
  181. width: 17rpx;
  182. height: 1rpx;
  183. background-color: #296de3;
  184. }
  185. .container .body .body_header .header_night .night_box.data-v-3e159eb4 {
  186. display: flex;
  187. align-items: center;
  188. justify-content: center;
  189. width: 81rpx;
  190. height: 46rpx;
  191. font-size: 24rpx;
  192. border-radius: 66rpx;
  193. border: 1rpx solid #296de3;
  194. }
  195. .container .body .body_header .header_end.data-v-3e159eb4 {
  196. display: flex;
  197. flex-direction: column;
  198. justify-content: center;
  199. align-items: center;
  200. width: 213rpx;
  201. height: 150rpx;
  202. }
  203. .container .body .body_header .header_end .header_top.data-v-3e159eb4 {
  204. margin-bottom: 10rpx;
  205. color: #999999;
  206. font-size: 24rpx;
  207. }
  208. .container .body .body_header .header_end .header_bottom.data-v-3e159eb4 {
  209. font-size: 34rpx;
  210. font-weight: bold;
  211. }
  212. .container .body .body_content .body_box.data-v-3e159eb4 {
  213. box-sizing: border-box;
  214. padding: 0 30rpx;
  215. margin-bottom: 30rpx;
  216. display: flex;
  217. height: 193rpx;
  218. border-bottom: 1rpx solid #cccccc;
  219. }
  220. .container .body .body_content .body_box .box_left.data-v-3e159eb4 {
  221. width: 213rpx;
  222. height: 161rpx;
  223. border-radius: 5rpx;
  224. }
  225. .container .body .body_content .body_box .box_left ._img.data-v-3e159eb4 {
  226. width: 100%;
  227. height: 100%;
  228. }
  229. .container .body .body_content .body_box .box_center.data-v-3e159eb4 {
  230. margin-left: 16rpx;
  231. }
  232. .container .body .body_content .body_box .box_center .center_top.data-v-3e159eb4 {
  233. font-size: 34rpx;
  234. font-weight: bold;
  235. }
  236. .container .body .body_content .body_box .box_center .center_center.data-v-3e159eb4 {
  237. display: flex;
  238. flex-wrap: wrap;
  239. margin-top: 10rpx;
  240. color: #999999;
  241. font-size: 24rpx;
  242. }
  243. .container .body .body_content .body_box .box_center .center_center .center_item.data-v-3e159eb4 {
  244. margin-right: 15rpx;
  245. }
  246. .container .body .body_content .body_box .box_center .center_bottom.data-v-3e159eb4 {
  247. margin-top: 25rpx;
  248. }
  249. .container .body .body_content .body_box .box_center .center_bottom .img.data-v-3e159eb4 {
  250. margin-right: 15rpx;
  251. width: 30rpx;
  252. height: 30rpx;
  253. }
  254. .container .body .body_content .body_box .box_right.data-v-3e159eb4 {
  255. display: flex;
  256. flex-direction: column;
  257. align-items: flex-end;
  258. margin-left: auto;
  259. margin-top: 20rpx;
  260. }
  261. .container .body .body_content .body_box .box_right .right_price.data-v-3e159eb4 {
  262. color: #ff5733;
  263. font-size: 42rpx;
  264. }
  265. .container .body .body_content .body_box .box_right .right_price text.data-v-3e159eb4 {
  266. font-size: 24rpx;
  267. }
  268. .container .body .body_content .body_box .box_right .right_btn.data-v-3e159eb4 {
  269. display: flex;
  270. justify-content: center;
  271. align-items: center;
  272. margin-top: 10rpx;
  273. width: 100rpx;
  274. height: 66rpx;
  275. color: #fff;
  276. font-size: 36rpx;
  277. border-radius: 11rpx;
  278. background-color: #096562;
  279. }
  280. .container .body .body_content .body_box .box_right .inactive.data-v-3e159eb4 {
  281. background-color: #cccccc;
  282. }
  283. .container .body .body_content .body_pop.data-v-3e159eb4 {
  284. position: relative;
  285. height: 955rpx;
  286. border-radius: 22rpx 22rpx 0 0;
  287. background-color: #fff;
  288. overflow-y: auto;
  289. }
  290. .container .body .body_content .body_pop .pop_swiper.data-v-3e159eb4 {
  291. height: 422rpx;
  292. border-radius: 22rpx 22rpx 0 0;
  293. }
  294. .container .body .body_content .body_pop .pop_swiper .pop_swiper_item.data-v-3e159eb4 {
  295. width: 100%;
  296. height: 100%;
  297. }
  298. .container .body .body_content .body_pop .pop_swiper .pop_swiper_item .img.data-v-3e159eb4 {
  299. width: 100%;
  300. height: 100%;
  301. border-radius: 22rpx 22rpx 0 0;
  302. }
  303. .container .body .body_content .body_pop .pop_icon.data-v-3e159eb4 {
  304. position: absolute;
  305. top: 20rpx;
  306. right: 30rpx;
  307. width: 58rpx;
  308. height: 58rpx;
  309. }
  310. .container .body .body_content .body_pop .pop_body.data-v-3e159eb4 {
  311. box-sizing: border-box;
  312. padding: 0 20rpx 30rpx;
  313. }
  314. .container .body .body_content .body_pop .pop_body .body_title.data-v-3e159eb4 {
  315. margin-top: 30rpx;
  316. font-size: 32rpx;
  317. font-weight: bold;
  318. }
  319. .container .body .body_content .body_pop .pop_body .body_tags.data-v-3e159eb4 {
  320. display: flex;
  321. flex-wrap: wrap;
  322. margin-top: 20rpx;
  323. }
  324. .container .body .body_content .body_pop .pop_body .body_tags .tags_item.data-v-3e159eb4 {
  325. display: flex;
  326. align-items: center;
  327. margin-right: 76rpx;
  328. margin-bottom: 20rpx;
  329. color: #383838;
  330. font-size: 24rpx;
  331. }
  332. .container .body .body_content .body_pop .pop_body .body_tags .tags_item .img.data-v-3e159eb4 {
  333. margin-right: 5rpx;
  334. width: 28rpx;
  335. height: 28rpx;
  336. }
  337. .container .body .body_content .body_pop .pop_body .body_title2.data-v-3e159eb4 {
  338. margin-top: 20rpx;
  339. font-size: 28rpx;
  340. }
  341. .container .body .body_content .body_pop .pop_body .body_detail.data-v-3e159eb4 {
  342. display: flex;
  343. flex-direction: column;
  344. justify-content: space-between;
  345. align-items: flex-end;
  346. box-sizing: border-box;
  347. padding: 20rpx 30rpx;
  348. margin-top: 18rpx;
  349. width: 710rpx;
  350. height: 215rpx;
  351. font-size: 28rpx;
  352. border-radius: 7rpx;
  353. background-color: #f2f2f2;
  354. }
  355. .container .body .body_content .body_pop .pop_body .body_detail text.data-v-3e159eb4 {
  356. color: #ff5733;
  357. }
  358. .container .body .body_content .body_pop .pop_body .body_bottom.data-v-3e159eb4 {
  359. display: flex;
  360. justify-content: space-between;
  361. align-items: center;
  362. margin-top: 250rpx;
  363. height: 80rpx;
  364. }
  365. .container .body .body_content .body_pop .pop_body .body_bottom .bottom_left.data-v-3e159eb4 {
  366. display: flex;
  367. align-items: center;
  368. color: #333333;
  369. font-size: 24rpx;
  370. }
  371. .container .body .body_content .body_pop .pop_body .body_bottom .bottom_left .img.data-v-3e159eb4 {
  372. margin-right: 10rpx;
  373. width: 48rpx;
  374. height: 48rpx;
  375. }
  376. .container .body .body_content .body_pop .pop_body .body_bottom .bottom_right.data-v-3e159eb4 {
  377. display: flex;
  378. align-items: center;
  379. color: #ff5733;
  380. font-size: 40rpx;
  381. font-weight: bold;
  382. }
  383. .container .body .body_content .body_pop .pop_body .body_bottom .bottom_right text.data-v-3e159eb4 {
  384. font-size: 24rpx;
  385. }
  386. .container .body .body_content .body_pop .pop_body .body_bottom .bottom_right .btn.data-v-3e159eb4 {
  387. display: flex;
  388. justify-content: center;
  389. align-items: center;
  390. margin-left: 30rpx;
  391. width: 238rpx;
  392. height: 80rpx;
  393. color: #fff;
  394. font-size: 32rpx;
  395. font-weight: 400;
  396. border-radius: 64rpx;
  397. background-color: #096562;
  398. }