detail.wxss 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383
  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 .line {
  140. position: absolute;
  141. width: 6rpx;
  142. height: 41rpx;
  143. background: #ffdd36;
  144. border-radius: 3rpx;
  145. top: 0;
  146. left: 0;
  147. opacity: 0.5;
  148. }
  149. .hua-item {
  150. border-bottom: 1px solid #e6e6e6;
  151. padding-bottom: 23rpx;
  152. margin-top: 20rpx;
  153. }
  154. .hua-item .name-box {
  155. display: flex;
  156. align-items: center;
  157. }
  158. .hua-item .name-box .name {
  159. font-size: 28rpx;
  160. font-family: PingFang SC, PingFang SC-Regular;
  161. font-weight: 400;
  162. color: #333333;
  163. margin-left: 15rpx;
  164. }
  165. .hua-item .name-box .dot {
  166. width: 10rpx;
  167. height: 10rpx;
  168. background: #333333;
  169. border-radius: 50%;
  170. }
  171. .con {
  172. font-size: 24rpx;
  173. font-family: PingFang SC, PingFang SC-Regular;
  174. font-weight: 400;
  175. color: #999999;
  176. margin-top: 10rpx;
  177. line-height: 36rpx;
  178. }
  179. .price {
  180. display: flex;
  181. flex-direction: row;
  182. margin-top: 15rpx;
  183. }
  184. .price .p2 {
  185. font-size: 36rpx;
  186. font-family: FZZhunYuan-M02S;
  187. font-weight: bold;
  188. color: #ec2e26;
  189. line-height: 45rpx;
  190. }
  191. .price .p1 {
  192. font-size: 22rpx;
  193. color: #ec2e26;
  194. line-height: 52rpx;
  195. }
  196. .desc-box {
  197. width: 690rpx;
  198. background: #ffffff;
  199. border-radius: 20rpx;
  200. margin: 0 auto;
  201. margin-top: 20rpx;
  202. padding: 30rpx;
  203. box-sizing: border-box;
  204. }
  205. .desc-box .content {
  206. font-size: 24rpx;
  207. font-family: PingFang SC, PingFang SC-Regular;
  208. font-weight: 400;
  209. color: #999999;
  210. margin-top: 15rpx;
  211. }
  212. .share-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. .share-item-msg {
  222. margin-bottom: 20rpx;
  223. border-bottom: 1px solid #e6e6e6;
  224. padding-bottom: 20rpx;
  225. }
  226. .share-item-msg:last-child {
  227. margin-bottom: 0;
  228. padding-bottom: 0;
  229. border: none;
  230. }
  231. .share-box .info-time {
  232. display: flex;
  233. justify-content: space-between;
  234. align-items: center;
  235. margin-top: 15rpx;
  236. }
  237. .comment-box {
  238. display: flex;
  239. align-items: center;
  240. }
  241. .share-box .info-time .comment-box .img {
  242. width: 83rpx;
  243. height: 83rpx;
  244. border-radius: 50%;
  245. }
  246. .comment-box .name {
  247. font-size: 30rpx;
  248. font-family: PingFang SC, PingFang SC-Regular;
  249. font-weight: 400;
  250. color: #1a1a1a;
  251. margin-left: 18rpx;
  252. }
  253. .comment-time {
  254. font-size: 24rpx;
  255. font-family: PingFang SC, PingFang SC-Regular;
  256. font-weight: 400;
  257. color: #999999;
  258. }
  259. .msg {
  260. font-size: 24rpx;
  261. font-family: PingFang SC, PingFang SC-Regular;
  262. font-weight: 400;
  263. color: #666666;
  264. margin-top: 20rpx;
  265. }
  266. .share-box .label-box {
  267. display: flex;
  268. flex-wrap: wrap;
  269. }
  270. .share-box .label-box .label {
  271. margin-top: 10rpx;
  272. font-size: 24rpx;
  273. font-family: PingFang SC, PingFang SC-Regular;
  274. font-weight: 400;
  275. color: #999999;
  276. margin-right: 15rpx;
  277. }
  278. .bot-box {
  279. position: fixed;
  280. /* width: 690rpx; */
  281. width: 100%;
  282. padding: 0 30rpx;
  283. box-sizing: border-box;
  284. display: flex;
  285. justify-content: space-between;
  286. height: 85rpx;
  287. }
  288. .share-btn {
  289. position: absolute;
  290. top: 0;
  291. left: 0;
  292. width: 43rpx;
  293. height: 85rpx;
  294. opacity: 0;
  295. }
  296. .share-box2 {
  297. display: flex;
  298. flex-direction: column;
  299. justify-content: space-between;
  300. }
  301. .share-img {
  302. width: 43rpx;
  303. height: 40rpx;
  304. }
  305. .share-word {
  306. font-size: 28rpx;
  307. font-family: PingFang SC, PingFang SC-Regular;
  308. font-weight: 400;
  309. color: #1a1a1a;
  310. }
  311. .btn {
  312. width: 582rpx;
  313. height: 85rpx;
  314. background: #ffdc2f;
  315. border-radius: 43rpx;
  316. text-align: center;
  317. line-height: 85rpx;
  318. font-size: 30rpx;
  319. font-family: PingFang SC, PingFang SC-Regular;
  320. font-weight: 400;
  321. color: #000;
  322. }
  323. .no-btn {
  324. background-color: #e6e6e6;
  325. }
  326. .selt-btn {
  327. display: flex;
  328. justify-content: center;
  329. padding-bottom: 65rpx;
  330. }
  331. .i-know {
  332. width: 500rpx;
  333. height: 80rpx;
  334. background: #ffdc2f;
  335. border-radius: 40rpx;
  336. text-align: center;
  337. line-height: 80rpx;
  338. color: #ffffff;
  339. font-size: 32rpx;
  340. }
  341. .time-item {
  342. border-bottom: 1px solid #e6e6e6;
  343. height: 75rpx;
  344. display: flex;
  345. align-items: center;
  346. }
  347. .week-word {
  348. font-size: 28rpx;
  349. font-family: PingFang SC, PingFang SC-Regular;
  350. font-weight: 400;
  351. color: #808080;
  352. }
  353. .time-box {
  354. display: flex;
  355. align-items: center;
  356. justify-content: space-between;
  357. margin-left: 84rpx;
  358. flex: 1;
  359. font-size: 28rpx;
  360. font-family: PingFang SC, PingFang SC-Regular;
  361. font-weight: 400;
  362. color: #808080;
  363. }
  364. .start-box {
  365. font-size: 28rpx;
  366. font-family: PingFang SC, PingFang SC-Regular;
  367. font-weight: 400;
  368. color: #808080;
  369. }
  370. .icon-time {
  371. font-size: 30rpx;
  372. }
  373. .zhi {
  374. font-size: 28rpx;
  375. font-family: PingFang SC, PingFang SC-Regular;
  376. font-weight: 400;
  377. color: #808080;
  378. }