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.

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