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

359 рядки
6.4 KiB

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