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.

350 lines
6.4 KiB

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