detail.wxss 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403
  1. page {
  2. /* padding: 0 30rpx; */
  3. box-sizing: border-box;
  4. background-color: #fcfcfc;
  5. }
  6. .info-box {
  7. width: 690rpx;
  8. background: #ffffff;
  9. border-radius: 20rpx;
  10. position: relative;
  11. padding: 15rpx 30rpx 60rpx 30rpx;
  12. box-sizing: border-box;
  13. margin: 0 auto;
  14. margin-top: 80rpx;
  15. }
  16. .head-img {
  17. width: 150rpx;
  18. height: 150rpx;
  19. border: 4rpx solid #ffffff;
  20. border-radius: 50%;
  21. position: absolute;
  22. left: 30rpx;
  23. top: -47rpx;
  24. }
  25. .name-time {
  26. width: 443rpx;
  27. display: flex;
  28. justify-content: space-between;
  29. align-items: center;
  30. margin-left: 187rpx;
  31. }
  32. .name-box {
  33. font-size: 34rpx;
  34. font-family: PingFang SC, PingFang SC-Regular;
  35. font-weight: 400;
  36. color: #1a1a1a;
  37. display: flex;
  38. align-items: center;
  39. }
  40. .sex {
  41. width: 31rpx;
  42. height: 31rpx;
  43. margin-left: 10rpx;
  44. }
  45. .time {
  46. /* width: 153rpx; */
  47. height: 57rpx;
  48. background: #ffdc2f;
  49. border-radius: 29rpx;
  50. font-size: 28rpx;
  51. font-family: PingFang SC, PingFang SC-Regular;
  52. font-weight: 400;
  53. color: #000;
  54. text-align: center;
  55. line-height: 57rpx;
  56. padding: 0 22rpx;
  57. }
  58. .zhiwei {
  59. margin-top: 70rpx;
  60. font-size: 24rpx;
  61. font-family: PingFang SC, PingFang SC-Regular;
  62. font-weight: 400;
  63. color: #666666;
  64. }
  65. .address-box {
  66. display: flex;
  67. margin-top: 11rpx;
  68. }
  69. .address-box .word {
  70. font-size: 24rpx;
  71. font-family: PingFang SC, PingFang SC-Regular;
  72. font-weight: 400;
  73. color: #666666;
  74. }
  75. .info-box .item {
  76. font-size: 24rpx;
  77. font-family: PingFang SC, PingFang SC-Regular;
  78. font-weight: 400;
  79. color: #666666;
  80. margin-top: 14rpx;
  81. }
  82. .info-box .item .num {
  83. color: #ff9209;
  84. margin-left: 10rpx;
  85. }
  86. .label-box {
  87. display: flex;
  88. /* justify-content: space-between; */
  89. }
  90. .label-box .word {
  91. display: inline-block;
  92. font-size: 24rpx;
  93. font-family: PingFang SC, PingFang SC-Regular;
  94. font-weight: 400;
  95. padding: 0 16 0 0rpx;
  96. color: #666666;
  97. width: 118rpx;
  98. flex-shrink: 0;
  99. margin-top: 14rpx;
  100. line-height: 40rpx;
  101. }
  102. .label-box .right {
  103. display: flex;
  104. flex-wrap: wrap;
  105. }
  106. .label-box .right .label {
  107. height: 40rpx;
  108. background: #f2f2f2;
  109. border-radius: 10rpx 0px 10rpx 0px;
  110. padding: 0 16rpx;
  111. line-height: 40rpx;
  112. font-size: 24rpx;
  113. font-family: PingFang SC, PingFang SC-Regular;
  114. font-weight: 400;
  115. color: #666666;
  116. margin-top: 14rpx;
  117. margin-right: 15rpx;
  118. }
  119. .hua-box {
  120. width: 690rpx;
  121. background: #ffffff;
  122. border-radius: 20rpx;
  123. margin: 0 auto;
  124. margin-top: 20rpx;
  125. padding: 30rpx 30rpx 40rpx 30rpx;
  126. box-sizing: border-box;
  127. }
  128. .hot-title {
  129. display: flex;
  130. justify-content: space-between;
  131. align-items: center;
  132. height: 41rpx;
  133. font-size: 34rpx;
  134. font-family: "FZCuYuan-M03";
  135. font-weight: 400;
  136. color: #333333;
  137. position: relative;
  138. }
  139. .hot-title .title{
  140. position: relative;
  141. display: inline-block;
  142. }
  143. .hot-title .title::after {
  144. display: block;
  145. content: "";
  146. position: absolute;
  147. top: -3%;
  148. right: -3%;
  149. width: 30rpx;
  150. height: 30rpx;
  151. background-color: #005eff42;
  152. border-radius: 50%;
  153. z-index: 1;
  154. }
  155. .hot-title .line {
  156. position: absolute;
  157. width: 6rpx;
  158. height: 41rpx;
  159. background: #ffdd36;
  160. border-radius: 3rpx;
  161. top: 0;
  162. left: 0;
  163. opacity: 0.5;
  164. }
  165. .hua-item {
  166. border-bottom: 1px solid #e6e6e6;
  167. padding-bottom: 23rpx;
  168. margin-top: 20rpx;
  169. }
  170. .hua-item .name-box {
  171. display: flex;
  172. align-items: center;
  173. }
  174. .hua-item .name-box .name {
  175. font-size: 28rpx;
  176. font-family: PingFang SC, PingFang SC-Regular;
  177. font-weight: 400;
  178. color: #333333;
  179. margin-left: 15rpx;
  180. }
  181. .hua-item .name-box .dot {
  182. width: 10rpx;
  183. height: 10rpx;
  184. background: #333333;
  185. border-radius: 50%;
  186. }
  187. .con {
  188. font-size: 24rpx;
  189. font-family: PingFang SC, PingFang SC-Regular;
  190. font-weight: 400;
  191. color: #999999;
  192. margin-top: 10rpx;
  193. line-height: 36rpx;
  194. }
  195. .price {
  196. display: flex;
  197. flex-direction: row;
  198. margin-top: 15rpx;
  199. }
  200. .price .p2 {
  201. font-size: 36rpx;
  202. font-family: FZZhunYuan-M02S;
  203. font-weight: bold;
  204. color: #ec2e26;
  205. line-height: 45rpx;
  206. }
  207. .price .p1 {
  208. font-size: 22rpx;
  209. color: #ec2e26;
  210. line-height: 52rpx;
  211. }
  212. .desc-box {
  213. width: 690rpx;
  214. background: #ffffff;
  215. border-radius: 20rpx;
  216. margin: 0 auto;
  217. margin-top: 20rpx;
  218. padding: 30rpx;
  219. box-sizing: border-box;
  220. }
  221. .desc-box .content {
  222. font-size: 24rpx;
  223. font-family: PingFang SC, PingFang SC-Regular;
  224. font-weight: 400;
  225. color: #999999;
  226. margin-top: 15rpx;
  227. }
  228. .share-box {
  229. width: 690rpx;
  230. background: #ffffff;
  231. border-radius: 20rpx;
  232. margin: 0 auto;
  233. margin-top: 20rpx;
  234. padding: 30rpx;
  235. box-sizing: border-box;
  236. }
  237. .share-item-msg {
  238. margin-bottom: 20rpx;
  239. border-bottom: 1px solid #e6e6e6;
  240. padding-bottom: 20rpx;
  241. }
  242. .share-item-msg:last-child {
  243. margin-bottom: 0;
  244. padding-bottom: 0;
  245. border: none;
  246. }
  247. .share-box .info-time {
  248. display: flex;
  249. justify-content: space-between;
  250. align-items: center;
  251. margin-top: 15rpx;
  252. }
  253. .comment-box {
  254. display: flex;
  255. align-items: center;
  256. }
  257. .share-box .info-time .comment-box .img {
  258. width: 83rpx;
  259. height: 83rpx;
  260. border-radius: 50%;
  261. }
  262. .comment-box .name {
  263. font-size: 30rpx;
  264. font-family: PingFang SC, PingFang SC-Regular;
  265. font-weight: 400;
  266. color: #1a1a1a;
  267. margin-left: 18rpx;
  268. }
  269. .comment-time {
  270. font-size: 24rpx;
  271. font-family: PingFang SC, PingFang SC-Regular;
  272. font-weight: 400;
  273. color: #999999;
  274. }
  275. .msg {
  276. font-size: 24rpx;
  277. font-family: PingFang SC, PingFang SC-Regular;
  278. font-weight: 400;
  279. color: #666666;
  280. margin-top: 20rpx;
  281. }
  282. .share-box .label-box {
  283. display: flex;
  284. flex-wrap: wrap;
  285. }
  286. .share-box .label-box .label {
  287. margin-top: 10rpx;
  288. font-size: 24rpx;
  289. font-family: PingFang SC, PingFang SC-Regular;
  290. font-weight: 400;
  291. color: #999999;
  292. margin-right: 15rpx;
  293. }
  294. .bot-box {
  295. position: fixed;
  296. /* width: 690rpx; */
  297. width: 100%;
  298. padding: 0 30rpx;
  299. box-sizing: border-box;
  300. display: flex;
  301. justify-content: space-between;
  302. height: 85rpx;
  303. }
  304. .share-btn {
  305. position: absolute;
  306. top: 0;
  307. left: 0;
  308. width: 43rpx;
  309. height: 85rpx;
  310. opacity: 0;
  311. }
  312. .share-box2 {
  313. display: flex;
  314. flex-direction: column;
  315. justify-content: space-between;
  316. }
  317. .share-img {
  318. width: 43rpx;
  319. height: 40rpx;
  320. }
  321. .share-word {
  322. font-size: 28rpx;
  323. font-family: PingFang SC, PingFang SC-Regular;
  324. font-weight: 400;
  325. color: #1a1a1a;
  326. }
  327. .btn {
  328. width: 582rpx;
  329. height: 85rpx;
  330. background: #2b58a5;
  331. border-radius: 43rpx;
  332. text-align: center;
  333. line-height: 85rpx;
  334. font-size: 30rpx;
  335. font-family: PingFang SC, PingFang SC-Regular;
  336. font-weight: 400;
  337. color: #ffffff;
  338. }
  339. .no-btn {
  340. background-color: #e6e6e6;
  341. color: #000 !important;
  342. }
  343. .selt-btn {
  344. display: flex;
  345. justify-content: center;
  346. padding-bottom: 65rpx;
  347. }
  348. .i-know {
  349. width: 500rpx;
  350. height: 80rpx;
  351. background: #ffdc2f;
  352. border-radius: 40rpx;
  353. text-align: center;
  354. line-height: 80rpx;
  355. color: #ffffff;
  356. font-size: 32rpx;
  357. }
  358. .time-item {
  359. border-bottom: 1px solid #e6e6e6;
  360. height: 75rpx;
  361. display: flex;
  362. align-items: center;
  363. }
  364. .week-word {
  365. font-size: 28rpx;
  366. font-family: PingFang SC, PingFang SC-Regular;
  367. font-weight: 400;
  368. color: #808080;
  369. }
  370. .time-box {
  371. display: flex;
  372. align-items: center;
  373. justify-content: space-between;
  374. margin-left: 84rpx;
  375. flex: 1;
  376. font-size: 28rpx;
  377. font-family: PingFang SC, PingFang SC-Regular;
  378. font-weight: 400;
  379. color: #808080;
  380. }
  381. .start-box {
  382. font-size: 28rpx;
  383. font-family: PingFang SC, PingFang SC-Regular;
  384. font-weight: 400;
  385. color: #808080;
  386. }
  387. .icon-time {
  388. font-size: 30rpx;
  389. }
  390. .zhi {
  391. font-size: 28rpx;
  392. font-family: PingFang SC, PingFang SC-Regular;
  393. font-weight: 400;
  394. color: #808080;
  395. }