C端小程序
Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.

358 Zeilen
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. border-radius:50%;
  233. }
  234. .goback image{
  235. position: absolute;
  236. width: 60rpx;
  237. left: 0;
  238. right: 0;
  239. top: 0;
  240. bottom: 0;
  241. margin: auto;
  242. }
  243. .btns .fl text{
  244. display: block;
  245. font-size: 30rpx;
  246. line-height: 34rpx;
  247. }
  248. .btns .fl text:nth-of-type(1){
  249. margin-top: 12rpx;
  250. }
  251. .btns .fr{
  252. font-size: 30rpx;
  253. color: #fff;
  254. line-height: 95rpx;
  255. width: 256rpx;
  256. background:linear-gradient(90deg,rgba(229,54,40,1) 0%,rgba(243,75,30,1) 99%);
  257. box-shadow:0px 8px 8px 1px rgba(204,26,13,0.32);
  258. }
  259. .helpDiscount{
  260. display: block;
  261. width: 200rpx;
  262. height: 200rpx;
  263. border-radius:50%;
  264. font-size: 26rpx;
  265. text-align: center;
  266. line-height: 200rpx;
  267. margin: 30rpx auto 0;
  268. color: #fff!important;
  269. }
  270. .helpDiscount image{
  271. display: block;
  272. width: 200rpx;
  273. height: 200rpx;
  274. }
  275. .helpDiscount::after{ border: none; }
  276. .success{
  277. margin-top: 50rpx;
  278. }
  279. .success image{
  280. display: block;
  281. width: 74rpx;
  282. height: 74rpx;
  283. margin: 0 auto;
  284. }
  285. .success text{
  286. display: block;
  287. text-align: center;
  288. font-size:30rpx;
  289. line-height: 30rpx;
  290. color:rgba(51,51,51,1);
  291. }
  292. .btns01{
  293. position: fixed;
  294. left: 0;
  295. right: 0;
  296. bottom: 0;
  297. padding: 30rpx 0;
  298. }
  299. .btns01 button{
  300. color:rgba(254,254,254,1);
  301. width:650rpx;
  302. height:85rpx;
  303. line-height: 85rpx;
  304. background:linear-gradient(90deg,rgba(236,59,45,1) 0%,rgba(248,98,52,1) 100%);
  305. box-shadow:0px 8px 8px 1px rgba(246,93,51,0.32);
  306. border-radius:43rpx;
  307. }
  308. .fail{
  309. height:166rpx;
  310. background:rgba(226,226,226,1);
  311. border-radius:10rpx;
  312. font-size:30rpx;
  313. text-align: center;
  314. line-height: 166rpx;
  315. color:rgba(51,51,51,1);
  316. margin: 20rpx auto 0;
  317. }
  318. .status{
  319. width: 520rpx;
  320. margin: 40rpx auto 0;
  321. }
  322. .status button{
  323. display: block;
  324. width: 520rpx;
  325. height: 95rpx;
  326. line-height: 95rpx;
  327. text-align: center;
  328. border: none;
  329. }
  330. button::after{ border: none; }
  331. .status button:nth-of-type(1){
  332. background:linear-gradient(90deg,rgba(236,59,45,1) 0%,rgba(248,98,52,1) 100%);
  333. border:1px solid rgba(236,59,45,1);
  334. border-radius:48rpx;
  335. margin-bottom: 38rpx;
  336. color: #fff;
  337. }
  338. .status button:nth-of-type(2){
  339. background:#fff;
  340. border:1px solid rgba(190,190,190,1);
  341. border-radius:48rpx;
  342. color: #333;
  343. }