C端小程序
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

384 行
6.5 KiB

  1. page{
  2. width: 100%;
  3. height: 100%;
  4. position: fixed;
  5. top: 0;
  6. left: 0;
  7. background: rgba(0, 0, 0, 0.5);
  8. overflow: hidden;
  9. /* z-index: 10000; */
  10. color: #fff;
  11. }
  12. .cancleH{
  13. width: 60rpx;
  14. height: 120rpx;
  15. position: absolute;
  16. right: 92rpx;
  17. top: 60rpx;
  18. }
  19. .cancleH image{
  20. width: 60rpx;
  21. height: 60rpx;
  22. /* margin-top: 20rpx; */
  23. }
  24. .line{
  25. height: 50rpx;
  26. width: 4rpx;
  27. background:#ccc;
  28. margin: 0 auto;
  29. }
  30. .bargainDetail {
  31. padding: 0 33rpx 0;
  32. }
  33. .progress .fl {
  34. /* width: 150rpx; */
  35. height: 60rpx;
  36. border-radius:16rpx;
  37. color: #FFF;
  38. }
  39. .listitem .icon {
  40. width: 140rpx;
  41. height: 116rpx;
  42. position: absolute;
  43. top: 12rpx;
  44. right: 0;
  45. }
  46. .title{
  47. display: block;
  48. font-size: 30rpx;
  49. color: #fff;
  50. height: 40rpx;
  51. line-height: 40rpx;
  52. padding-top: 40rpx;
  53. }
  54. .help{
  55. display: block;
  56. text-align: center;
  57. font-size: 28rpx;
  58. height: 40rpx;
  59. line-height: 40rpx;
  60. margin-top: 47rpx;
  61. }
  62. .help text{
  63. color: red;
  64. }
  65. .listitem .ri {
  66. margin-left: 26rpx;
  67. width: 305rpx;
  68. }
  69. .ri text {
  70. display: block;
  71. text-align: left;
  72. }
  73. .ri .txt01 {
  74. width: 100%;
  75. color: #FFF;
  76. line-height: 32rpx;
  77. white-space: nowrap;
  78. text-overflow: ellipsis;
  79. overflow: hidden;
  80. margin-top: 12rpx;
  81. }
  82. .ri .txt02 {
  83. width: 100%;
  84. white-space: nowrap;
  85. text-overflow: ellipsis;
  86. overflow: hidden;
  87. font-size: 24rpx;
  88. color: rgba(140, 140, 140, 1);
  89. }
  90. .ri .txt03 {
  91. width: 100%;
  92. font-size: 24rpx;
  93. text-decoration: line-through;
  94. color: rgba(140, 140, 140, 1);
  95. }
  96. .ri .txt04 {
  97. width: 100%;
  98. font-size: 24rpx;
  99. color: #FFF;
  100. line-height: 44rpx;
  101. margin-top: 16rpx;
  102. }
  103. .money {
  104. display: inline-block !important;
  105. font-size: 50rpx;
  106. font-weight: 500;
  107. color: #FFF;
  108. }
  109. .listitem {
  110. width: 538rpx;
  111. /* height: 624rpx; */
  112. position: relative;
  113. padding: 60rpx 40rpx;
  114. border-radius: 15rpx;
  115. background: linear-gradient(160deg,rgba(252,177,74,1) 0%,rgba(254,70,20,1) 100%);
  116. margin: 170rpx auto 30rpx;
  117. display: flex;
  118. flex-direction:column;
  119. }
  120. .top{
  121. width:548rpx;
  122. height: 140rpx;
  123. margin: 0 auto 20rpx;
  124. padding: 0 20rpx;
  125. }
  126. .top image{
  127. width:120rpx;
  128. height:120rpx;
  129. border-radius:16rpx;
  130. float: left;
  131. }
  132. .top tit{
  133. margin-left:26rpx;
  134. width:305rpx;
  135. }
  136. .progress {
  137. width: 519rpx;
  138. height: 170rpx;
  139. margin: 0 auto;
  140. }
  141. .progesstext>text {
  142. font-size: 24rpx;
  143. color: #FFF;
  144. }
  145. .progesstext text text {
  146. color: #FFF;
  147. }
  148. .time {
  149. margin-top: 20rpx;
  150. font-size: 24rpx;
  151. color: #FFF;
  152. text-align:center;
  153. }
  154. .time text {
  155. font-size: 30rpx;
  156. color: #FD832D;
  157. display: inline-block;
  158. width: 40rpx;
  159. text-align: center;
  160. height: 40rpx;
  161. line-height: 40rpx;
  162. background: #FFF;
  163. border-radius: 10rpx;
  164. margin: 0 4px;
  165. }
  166. .head{
  167. width:52rpx;
  168. height: 52rpx;
  169. position: relative;
  170. float: left
  171. }
  172. .head image{
  173. width: 52rpx;
  174. height: 52rpx;
  175. border-radius:26rpx;
  176. }
  177. .head text{
  178. width: 70rpx;
  179. position: absolute;
  180. bottom: 0;
  181. left: 0;
  182. right: 0;
  183. font-size: 20rpx;
  184. background: #ED3F2E;
  185. color: #fff;
  186. text-align: center;
  187. border-radius: 20rpx;
  188. }
  189. .text{
  190. width: 85%;
  191. padding-left: 3%;
  192. display: inline-block;
  193. height: 52rpx;
  194. line-height: 52rpx;
  195. font-size: 26rpx;
  196. }
  197. .text01{
  198. width: 70rpx;
  199. margin-right: 6rpx;
  200. }
  201. .text01 text{
  202. width: 100rpx;
  203. float: left;
  204. height: 52rpx;
  205. line-height: 52rpx;
  206. white-space: nowrap;
  207. text-overflow: ellipsis;
  208. overflow: hidden;
  209. }
  210. .text02{
  211. display: inline-block;
  212. }
  213. .text02 .fl{
  214. color: #FFF!important;
  215. }
  216. .text03{
  217. /* width: 180rpx; */
  218. text-align: right;
  219. font-size:24rpx;
  220. height: 52rpx;
  221. line-height: 52rpx;
  222. white-space: nowrap;
  223. text-overflow: ellipsis;
  224. overflow: hidden;
  225. }
  226. .person{
  227. /* border-bottom: 1px solid #F0CDB3; */
  228. padding-bottom: 15rpx;
  229. padding-top: 15rpx;
  230. color: #fff;
  231. }
  232. .text02 text:nth-of-type(2){
  233. color: #FF3535;
  234. text-align: left;
  235. }
  236. .people{
  237. border-radius:16rpx;
  238. padding:0 20rpx;
  239. }
  240. .kjr{
  241. height: 300rpx;
  242. overflow: auto;
  243. }
  244. .btns{
  245. padding:33rpx;
  246. position: fixed;
  247. left: 0;
  248. right: 0;
  249. bottom: 0;
  250. z-index: 100;
  251. /* background: #fff; */
  252. }
  253. .btns button{
  254. width: 500rpx!important;
  255. height: 92rpx;
  256. border-radius:32rpx;
  257. text-align: center;
  258. margin: 0 auto;
  259. font-size: 32rpx;
  260. color: #fff;
  261. line-height: 92rpx;
  262. background:linear-gradient(127deg,rgba(252,177,74,1) 0%,rgba(254,70,20,1) 100%);
  263. /* box-shadow:0px 8px 8px 1px rgba(204,26,13,0.32); */
  264. }
  265. .goback{
  266. position: fixed;
  267. right: 50rpx;
  268. top: 60rpx;
  269. width:100rpx!important;
  270. height:100rpx;
  271. z-index: 100;
  272. background:rgba(255,255,255,1);
  273. line-height: 95rpx;
  274. border:1rpx solid rgba(227,227,227,1);
  275. border-radius:50%;
  276. }
  277. .goback image{
  278. position: absolute;
  279. width: 60rpx;
  280. left: 0;
  281. right: 0;
  282. top: 0;
  283. bottom: 0;
  284. margin: auto;
  285. }
  286. .helpDiscount{
  287. display: block;
  288. width: 200rpx;
  289. height: 200rpx;
  290. border-radius:50%;
  291. font-size: 26rpx;
  292. text-align: center;
  293. line-height: 200rpx;
  294. margin: 30rpx auto 0;
  295. color: #fff!important;
  296. }
  297. .helpDiscount image{
  298. display: block;
  299. width: 200rpx;
  300. height: 200rpx;
  301. }
  302. .helpDiscount::after{ border: none; }
  303. .success{
  304. margin-top: 15rpx;
  305. }
  306. .success image{
  307. display: block;
  308. width: 74rpx;
  309. height: 74rpx;
  310. margin: 0 auto;
  311. }
  312. .success text{
  313. display: block;
  314. text-align: center;
  315. font-size:24rpx;
  316. line-height: 24rpx;
  317. color:#FFFFFF;
  318. }
  319. .btns01{
  320. position: fixed;
  321. left: 0;
  322. right: 0;
  323. bottom: 0;
  324. padding: 30rpx 0;
  325. }
  326. .btns01 button{
  327. color:rgba(254,254,254,1);
  328. width:538rpx;
  329. height:85rpx;
  330. line-height: 85rpx;
  331. background:linear-gradient(127deg,rgba(252,177,74,1) 0%,rgba(254,70,20,1) 100%);
  332. box-shadow:0px 8px 8px 1px rgba(246,93,51,0.32);
  333. border-radius:43rpx;
  334. }
  335. .fail{
  336. height:166rpx;
  337. background:rgba(226,226,226,1);
  338. border-radius:10rpx;
  339. font-size:30rpx;
  340. text-align: center;
  341. line-height: 166rpx;
  342. color:rgba(51,51,51,1);
  343. margin: 20rpx auto 0;
  344. }
  345. .status{
  346. width: 520rpx;
  347. margin: 40rpx auto 0;
  348. }
  349. .status button{
  350. display: block;
  351. width: 520rpx;
  352. height: 95rpx;
  353. line-height: 95rpx;
  354. text-align: center;
  355. border: none;
  356. }
  357. button::after{ border: none; }
  358. .status button:nth-of-type(1){
  359. background:linear-gradient(90deg,rgba(236,59,45,1) 0%,rgba(248,98,52,1) 100%);
  360. border:1px solid rgba(236,59,45,1);
  361. border-radius:48rpx;
  362. margin-bottom: 38rpx;
  363. color: #fff;
  364. }
  365. .status button:nth-of-type(2){
  366. background:#fff;
  367. border:1px solid rgba(190,190,190,1);
  368. border-radius:48rpx;
  369. color: #333;
  370. }