C端小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

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