C端小程序
Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.

356 рядки
6.5 KiB

  1. /* pages/spellDetail/index.wxss */
  2. page {
  3. height: auto;
  4. overflow: auto;
  5. background: #f89132;
  6. background-image: url('https://s3.cn-northwest-1.amazonaws.com.cn/iformall-net/cimg/spelldetail-bg.png');
  7. background-size: cover;
  8. background-repeat: no-repeat;
  9. }
  10. .status{
  11. width: 690rpx;
  12. padding:0 28rpx;
  13. margin: 0 auto;
  14. box-sizing: border-box;
  15. background:rgba(255,255,255,1);
  16. border-radius:15rpx;
  17. }
  18. .status-top{
  19. width: 100%;
  20. height: 75rpx;
  21. box-sizing: border-box;
  22. border-bottom: 1rpx solid #F9F9F9;
  23. /* overflow: hidden; */
  24. }
  25. .p-status{
  26. float: left;
  27. width: 260rpx;
  28. font-size:32rpx;
  29. font-family:PingFang-SC-Bold;
  30. font-weight:bold;
  31. color:rgba(243,69,58,1);
  32. line-height: 75rpx;
  33. }
  34. .p-time{
  35. float: right;
  36. font-size:26rpx;
  37. font-family:PingFang-SC-Medium;
  38. font-weight:500;
  39. color:rgba(243,69,58,1);
  40. width: 38rpx;
  41. height: 30rpx;
  42. margin-top: 22rpx;
  43. background:rgba(252,220,221,1);
  44. border-radius:10rpx;
  45. line-height: 30rpx;
  46. text-align: center;
  47. margin: 22rpx 6rpx;
  48. }
  49. .p-mao{
  50. float: right;
  51. font-size:26rpx;
  52. font-family:PingFang-SC-Medium;
  53. font-weight:500;
  54. color:rgba(243,69,58,1);
  55. line-height: 75rpx;
  56. }
  57. .p-text{
  58. float: right;
  59. font-size:26rpx;
  60. font-family:PingFang-SC-Regular;
  61. font-weight:400;
  62. color:rgba(51,51,51,1);
  63. line-height:75rpx;
  64. }
  65. .status-center{
  66. width: 100%;
  67. overflow: hidden;
  68. padding: 20rpx 0;
  69. text-align: center;
  70. border-bottom: 1rpx solid #F9F9F9;
  71. }
  72. .tuanzhang{
  73. display: inline-block;
  74. width: 80rpx;
  75. height: 80rpx;
  76. position: relative;
  77. }
  78. .touxiangitems{
  79. margin: 20rpx;
  80. }
  81. .touxiang{
  82. width: 80rpx;
  83. height: 80rpx;
  84. border-radius: 40rpx;
  85. overflow: hidden;
  86. }
  87. .no-touxiang{
  88. width: 80rpx;
  89. height: 80rpx;
  90. overflow: hidden;
  91. background:rgba(252,220,221,1);
  92. border:1rpx solid rgba(243,69,58,1);
  93. border-radius:50%;
  94. box-sizing: border-box;
  95. line-height: 78rpx;
  96. text-align: center;
  97. font-size:32rpx;
  98. font-family:PingFang-SC-Regular;
  99. font-weight:400;
  100. color:rgba(243,69,58,1);
  101. }
  102. .touxiang image{
  103. width: 80rpx;
  104. height: 80rpx;
  105. }
  106. .tuan-icon{
  107. position: absolute;
  108. bottom: 0rpx;
  109. left: 8rpx;
  110. width: 64rpx;
  111. height: 27rpx;
  112. }
  113. .tuan-icon image{
  114. display: block;
  115. width: 64rpx;
  116. height: 27rpx;
  117. }
  118. .status-bottom{
  119. width: 100%;
  120. height: auto;
  121. overflow: hidden;
  122. }
  123. .position-icon{
  124. width: 38rpx;
  125. float: left;
  126. }
  127. .position-icon image{
  128. width: 27rpx;
  129. height: 37rpx;
  130. margin-top: 17rpx;
  131. }
  132. .position{
  133. font-size:28rpx;
  134. font-family:PingFang-SC-Medium;
  135. font-weight:500;
  136. color:rgba(51,51,51,1);
  137. line-height: 72rpx;
  138. }
  139. .detail{
  140. position: relative;
  141. width: 690rpx;
  142. padding:0 28rpx;
  143. margin: 30rpx auto 0;
  144. box-sizing: border-box;
  145. background:rgba(255,255,255,1);
  146. border-radius:15rpx;
  147. }
  148. .return-index{
  149. position: absolute;
  150. right: 30rpx;
  151. top: 30rpx;
  152. width: 50rpx;
  153. height: 50rpx;
  154. }
  155. .return-index image{
  156. display: block;
  157. width: 50rpx;
  158. height: 50rpx;
  159. }
  160. .detail-top{
  161. width: 100%;
  162. height: auto;
  163. overflow: hidden;
  164. padding-bottom: 12rpx;
  165. }
  166. .detail-top01{
  167. float: left;
  168. width: 180rpx;
  169. }
  170. .detail-top01 image{
  171. width: 180rpx;
  172. height: 180rpx;
  173. margin-top: 33rpx;
  174. }
  175. .detail-top02{
  176. width: 208rpx;
  177. float: left;
  178. margin-left: 16rpx;
  179. }
  180. .title{
  181. font-size:30rpx;
  182. font-family:PingFang-SC-Bold;
  183. font-weight:bold;
  184. color:rgba(51,51,51,1);
  185. line-height:44rpx;
  186. margin-top: 30rpx;
  187. }
  188. .des{
  189. font-size:26rpx;
  190. font-family:PingFang-SC-Medium;
  191. font-weight:500;
  192. color:rgba(134,134,134,1);
  193. line-height:40rpx;
  194. }
  195. .detail-top03{
  196. float: left;
  197. padding-top: 180rpx;
  198. width: 230rpx;
  199. }
  200. .detail-p-name{
  201. float: right;
  202. font-size:26rpx;
  203. font-family:PingFang-SC-Medium;
  204. font-weight:500;
  205. color:rgba(134,134,134,1);
  206. line-height:44rpx;
  207. }
  208. .detail-p-price{
  209. float: right;
  210. font-size:26rpx;
  211. font-family:PingFang-SC-Medium;
  212. font-weight:500;
  213. color:rgba(51,51,51,1);
  214. }
  215. .detail-bottom{
  216. border-top: 1rpx solid #F9F9F9;
  217. width: 100%;
  218. overflow: hidden;
  219. height: 86rpx;
  220. }
  221. .b-unit{
  222. float: right;
  223. font-size:24rpx;
  224. font-family:PingFang-SC-Medium;
  225. font-weight:500;
  226. color:rgba(237,63,46,1);
  227. margin-top: 36rpx;
  228. }
  229. .b-price{
  230. float: right;
  231. font-size:40rpx;
  232. font-family:PingFang-SC-Medium;
  233. font-weight:500;
  234. color:rgba(237,63,46,1);
  235. margin-top: 18rpx;
  236. }
  237. .b-name{
  238. float: right;
  239. font-size:26rpx;
  240. font-family:PingFang-SC-Medium;
  241. font-weight:500;
  242. color:rgba(51,51,51,1);
  243. margin-right: 6rpx;
  244. margin-top: 34rpx;
  245. }
  246. .order{
  247. width: 690rpx;
  248. padding:10rpx 28rpx;
  249. margin: 30rpx auto 0;
  250. box-sizing: border-box;
  251. background:rgba(255,255,255,1);
  252. border-radius:15rpx;
  253. }
  254. .order-list{
  255. height: 55rpx;
  256. }
  257. .order-title{
  258. line-height: 55rpx;
  259. float: left;
  260. font-size:26rpx;
  261. font-family:PingFang-SC-Medium;
  262. font-weight:500;
  263. color:rgba(51,51,51,1);
  264. }
  265. .order-text{
  266. float: right;
  267. text-align: right;
  268. line-height: 55rpx;
  269. font-size:26rpx;
  270. font-family:PingFang-SC-Medium;
  271. font-weight:500;
  272. color:rgba(134,134,134,1);
  273. }
  274. .user-motto {
  275. border: 0;
  276. width:650rpx;
  277. height:85rpx;
  278. background:linear-gradient(90deg,rgba(248,85,45,1) 0%,rgba(241,60,66,1) 0%,rgba(248,86,46,1) 100%);
  279. box-shadow:0px 8rpx 8rpx 1rpx rgba(242,61,65,0.32);
  280. border-radius:43rpx;
  281. font-size:36rpx;
  282. font-family:PingFang-SC-Medium;
  283. font-weight:500;
  284. color:rgba(254,254,254,1);
  285. line-height: 85rpx;
  286. margin-top: 200rpx;
  287. }
  288. .user-motto::after {
  289. border: none;
  290. }
  291. .button button:nth-of-type(1){
  292. width:520rpx;
  293. height:95rpx;
  294. margin: 30rpx auto 38rpx;
  295. background:linear-gradient(90deg,rgba(248,85,45,1) 0%,rgba(241,60,66,1) 0%,rgba(248,86,46,1) 100%);
  296. border-radius:47rpx;
  297. color: #fff;
  298. }
  299. .button button:nth-of-type(2){
  300. width:520rpx;
  301. height:95rpx;
  302. background:rgba(255,255,255,1);
  303. border:1rpx solid rgba(190,190,190,1);
  304. border-radius:47rpx;
  305. color:#333333;
  306. margin-bottom: 50rpx;
  307. }
  308. .alert-bg{
  309. width: 100%;
  310. height: 100vh;
  311. position: fixed;
  312. opacity: 0.7;
  313. background: #000;
  314. top: 0;
  315. left: 0;
  316. z-index: 200;
  317. }
  318. .alert-box{
  319. width: 600rpx;
  320. height: 332rpx;
  321. position: fixed;
  322. z-index: 300;
  323. background: #fff;
  324. top: 50vh;
  325. margin-top: -162rpx;
  326. left: 85rpx;
  327. border-radius:15rpx;
  328. }
  329. .alert-close{
  330. position: absolute;
  331. width: 47rpx;
  332. height: 98rpx;
  333. top: -98rpx;
  334. right: 0;
  335. }
  336. .alert-close image{
  337. width: 47rpx;
  338. height: 98rpx;
  339. }
  340. .alert-title{
  341. text-align: center;
  342. font-size:30rpx;
  343. line-height: 30rpx;
  344. margin-top: 79rpx;
  345. font-family:PingFang-SC-Medium;
  346. font-weight:500;
  347. color:rgba(51,51,51,1);
  348. }
  349. .alert-button .share{
  350. width:500rpx;
  351. height:95rpx;
  352. background:linear-gradient(90deg,rgba(248,85,45,1) 0%,rgba(241,60,66,1) 0%,rgba(248,86,46,1) 100%);
  353. border-radius:47rpx;
  354. margin-top: 79rpx;
  355. }