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.

470 line
8.3 KiB

  1. page{
  2. position: relative;
  3. height: auto!important;
  4. background:#f89132;
  5. background-image:url('https://s3.cn-northwest-1.amazonaws.com.cn/iformall-net/cimg/spell-bg.png');
  6. }
  7. .list{
  8. padding: 0 32rpx;
  9. }
  10. .listitem .fl {
  11. width: 180rpx;
  12. height: 180rpx!important;
  13. border-radius: 10rpx;
  14. overflow: hidden;
  15. margin-top:10rpx;
  16. }
  17. .listitem .icon{
  18. width: 140rpx;
  19. height: 116rpx;
  20. position: absolute;
  21. top: 0;
  22. right: 30rpx;
  23. }
  24. .listitem .ri {
  25. margin-left: 26rpx;
  26. width: 305rpx;
  27. }
  28. .ri text{
  29. display: block;
  30. text-align: left;
  31. }
  32. .ri .txt01 {
  33. width: 100%;
  34. font-size:30rpx;
  35. color: rgba(51, 51, 51, 1);
  36. line-height: 44rpx;
  37. white-space: nowrap;
  38. text-overflow: ellipsis;
  39. overflow: hidden;
  40. font-weight: bold;
  41. }
  42. .ri .txt02 {
  43. width: 100%;
  44. white-space: nowrap;
  45. text-overflow: ellipsis;
  46. overflow: hidden;
  47. font-size: 24rpx;
  48. color: rgba(140, 140, 140, 1);
  49. }
  50. .ri .txt03 {
  51. width: 100%;
  52. font-size:24rpx;
  53. text-decoration:line-through;
  54. color:rgba(140,140,140,1);
  55. }
  56. .ri .txt04 {
  57. width: 100%;
  58. font-size:24rpx;
  59. color:rgba(255,50,50,1);
  60. line-height:44rpx;
  61. }
  62. .money{
  63. display: inline-block!important;
  64. font-size:50rpx;
  65. font-weight:500;
  66. color:rgba(255,50,50,1);
  67. }
  68. .listitem{
  69. position: relative;
  70. padding: 21rpx;
  71. background: #fff;
  72. border-radius: 20rpx;
  73. margin-bottom: 20rpx;
  74. margin-top: 20rpx;
  75. }
  76. .botton{
  77. position: absolute;
  78. right: 18rpx;
  79. text-align: center;
  80. bottom: 40rpx;
  81. width:186rpx;
  82. height:48rpx;
  83. line-height:48rpx;
  84. background:linear-gradient(90deg,rgba(236,59,45,1) 0%,rgba(248,98,52,1) 100%);
  85. border-radius:24rpx;
  86. font-size:26rpx;
  87. color:rgba(255,255,255,1);
  88. }
  89. .botton1{
  90. position: absolute;
  91. right: 36rpx;
  92. text-align: center;
  93. bottom: 6rpx;
  94. width:186rpx;
  95. height:48rpx;
  96. line-height:48rpx;
  97. background:linear-gradient(90deg,rgba(236,59,45,1) 0%,rgba(248,98,52,1) 100%);
  98. border-radius:24rpx;
  99. font-size:26rpx;
  100. color:rgba(255,255,255,1);
  101. }
  102. .botton02{
  103. background: #ccc!important;
  104. }
  105. .botton2{
  106. position: absolute;
  107. right: 36rpx;
  108. text-align: center;
  109. bottom: 8rpx;
  110. border-radius:24rpx;
  111. font-size:26rpx;
  112. line-height:48rpx;
  113. color:rgba(255,255,255,1);
  114. width:134rpx;
  115. height:48rpx;
  116. background:linear-gradient(90deg,rgba(117,158,69,1) 0%,rgba(138,183,79,1) 100%);
  117. }
  118. .botton3{
  119. position: absolute;
  120. right: 36rpx;
  121. text-align: center;
  122. bottom: 8rpx;
  123. line-height:48rpx;
  124. border-radius:24rpx;
  125. font-size:26rpx;
  126. color:rgba(255,255,255,1);
  127. width:134rpx;
  128. height:48rpx;
  129. background:linear-gradient(90deg,rgba(255,145,2,1) 0%,rgba(255,176,22,1) 100%);
  130. }
  131. /* .buttonfix{
  132. position: fixed;
  133. height: 95rpx;
  134. line-height: 95rpx;
  135. bottom: 0;
  136. left: 0;
  137. right: 0;
  138. display: flex;
  139. flex: 2;
  140. background: #fff;
  141. border-top:1rpx solid #C6C6C6;
  142. justify-content: space-around;
  143. text-align: center;
  144. } */
  145. .buttonfix > view{
  146. text-align: center;
  147. font-size: 32rpx;
  148. flex: 1;
  149. }
  150. .active1{
  151. color: #02C0FF!important;
  152. }
  153. .line{
  154. border-left:1rpx solid #C6C6C6;
  155. box-sizing:border-box;
  156. -moz-box-sizing:border-box;
  157. -webkit-box-sizing:border-box;
  158. }
  159. .page{
  160. padding-bottom: 100rpx;
  161. }
  162. .mr{
  163. height: 40rpx;
  164. line-height: 40rpx;
  165. }
  166. .txt004{
  167. margin-top: 10rpx;
  168. }
  169. .market {
  170. width: 100%;
  171. height: 100%;
  172. /* background: #f5f5f5; */
  173. }
  174. .tabs {
  175. width: 100% !important;
  176. height: 88rpx;
  177. text-align: center;
  178. position: fixed;
  179. top: 0;
  180. left: 0;
  181. right: 0;
  182. z-index: 100000;
  183. }
  184. .i-tab {
  185. width: 25% !important;
  186. display: inline-block;
  187. }
  188. .section {
  189. position: relative;
  190. }
  191. .mms {
  192. position: relative;
  193. width: 690rpx;
  194. height: 197rpx !important;
  195. background: #fff;
  196. padding: 30rpx 0 0;
  197. margin: 0 auto 40rpx;
  198. border-radius: 16rpx;
  199. border-top: 8rpx solid #02b7ff;
  200. box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.10);
  201. }
  202. .detail_msg {
  203. display: flex;
  204. padding-bottom: 26rpx;
  205. }
  206. .expiretime {
  207. display: block;
  208. width: 100%;
  209. text-align: left;
  210. text-indent: 1em;
  211. height:54rpx;
  212. line-height:54rpx;
  213. font-size: 26rpx;
  214. color: #333;
  215. letter-spacing: 0;
  216. }
  217. .liness {
  218. display: block;
  219. width: 100%;
  220. }
  221. .logo {
  222. width: 60rpx;
  223. height: 60rpx;
  224. border: 1px solid #f8f8f8;
  225. border-radius: 50rpx;
  226. display: block;
  227. margin-left: 20rpx;
  228. }
  229. .logo image {
  230. width: 60rpx;
  231. height: 60rpx;
  232. border-radius: 50%;
  233. }
  234. .info view:nth-child(1) {
  235. display: flex;
  236. justify-content: space-between;
  237. padding: 0 2%;
  238. }
  239. .info {
  240. width: 100%;
  241. }
  242. .info view:nth-child(1) text {
  243. font-size: 32rpx;
  244. line-height: 32rpx;
  245. height: 32rpx;
  246. color: #333;
  247. letter-spacing: 0;
  248. width: 400rpx;
  249. display: inline-block;
  250. white-space: nowrap;
  251. text-overflow: ellipsis;
  252. overflow: hidden;
  253. }
  254. .info view:nth-child(2) {
  255. padding-left: 2%;
  256. font-size: 22rpx;
  257. color: #333;
  258. letter-spacing: 0;
  259. margin-top: 6rpx;
  260. display: inline-block;
  261. white-space: nowrap;
  262. text-overflow: ellipsis;
  263. overflow: hidden;
  264. width: 400rpx;
  265. }
  266. .info view:nth-child(3) {
  267. margin-left: 20rpx;
  268. }
  269. .btns {
  270. position: absolute;
  271. right: 30rpx;
  272. top: 38rpx;
  273. width: 120rpx;
  274. height: 48rpx;
  275. line-height: 48rpx;
  276. text-align: center;
  277. border: 2rpx solid #02c0ff;
  278. border-radius: 60rpx;
  279. color: #02c0ff;
  280. font-size: 28rpx;
  281. }
  282. .active {
  283. color: #fff;
  284. background: #02c0ff;
  285. }
  286. .txt1 {
  287. font-size: 26rpx;
  288. color: #333;
  289. letter-spacing: 0;
  290. }
  291. .nocoupon image {
  292. width: 300rpx;
  293. display: block;
  294. margin: 3% auto 0;
  295. }
  296. .txt001 {
  297. display: block;
  298. line-height: 48rpx;
  299. font-size: 34rpx;
  300. color: #333;
  301. letter-spacing: 0;
  302. text-align: center;
  303. }
  304. .txt002 {
  305. display: block;
  306. margin-top: 1%;
  307. font-size: 28rpx;
  308. color: #999;
  309. letter-spacing: 0;
  310. line-height: 40rpx;
  311. text-align: center;
  312. }
  313. .nocoupon button {
  314. background: #00c0ff;
  315. color: #fff;
  316. font-style: 30rpx;
  317. width: 100%;
  318. border-radius: 60rpx;
  319. }
  320. .loading {
  321. text-align: center;
  322. height: 80rpx;
  323. line-height: 80rpx;
  324. font-size: 26rpx;
  325. color: #999;
  326. }
  327. .loading image {
  328. width: 60rpx;
  329. height: 60rpx;
  330. vertical-align: middle;
  331. margin-right: 10rpx;
  332. }
  333. .active {
  334. opacity: 0.6;
  335. }
  336. .nav {
  337. position: absolute;
  338. bottom: 3.3%;
  339. left: 0;
  340. right: 0;
  341. margin: auto;
  342. width: 670rpx;
  343. border-radius: 60rpx;
  344. background: #02c0ff;
  345. font-size: 32px;
  346. color: #fff;
  347. text-align: center;
  348. line-height: 32px;
  349. }
  350. .sendImg{
  351. position: absolute;
  352. width: 100rpx;
  353. top:109rpx;
  354. right:72rpx;
  355. }
  356. .dingdan {
  357. margin-top: 33rpx;
  358. }
  359. .dingdan text:nth-of-type(1) {
  360. display: block;
  361. font-size: 34rpx;
  362. color: #333;
  363. letter-spacing: 0;
  364. text-align: center;
  365. }
  366. .dingdan text:nth-of-type(2) {
  367. display: block;
  368. font-size: 28rpx;
  369. color: #999;
  370. letter-spacing: 0;
  371. text-align: center;
  372. }
  373. .dingdan image {
  374. display: block;
  375. width: 300rpx;
  376. height: 300rpx;
  377. margin: 0 auto 16rpx;
  378. }
  379. .again{
  380. position: relative;
  381. width: 686rpx;
  382. height: 200rpx;
  383. }
  384. .banner{
  385. margin-bottom:20rpx;
  386. background:none!important;
  387. border-radius:16rpx;
  388. }
  389. .banner .bannerbg image{
  390. display: none!important;
  391. height: 0!important;
  392. overflow: hidden;
  393. }
  394. .top{
  395. position: absolute;
  396. top: 30rpx;
  397. width: 710rpx;
  398. height: 260rpx;
  399. background: #fff;
  400. left: 20rpx;
  401. border-radius: 16rpx;
  402. overflow: hidden;
  403. }
  404. .bottom{
  405. width: 690rpx;
  406. height: 85rpx;
  407. position: fixed;
  408. bottom: 26rpx;
  409. left: 30rpx;
  410. /* background:rgba(243,69,58,1); */
  411. border:1px solid rgba(255, 222, 67, 1);
  412. border-radius:40px;
  413. color: #fff;
  414. overflow: hidden;
  415. }
  416. .bottom-left{
  417. width: 50%;
  418. float: left;
  419. margin-left: -1rpx;
  420. text-align: center;
  421. line-height: 85rpx;
  422. font-size:30rpx;
  423. font-family:PingFang-SC-Medium;
  424. font-weight:500;
  425. color:rgba(255,253,245,1);
  426. border-right:1px solid rgba(255, 222, 67, 1);
  427. opacity: 1;
  428. }
  429. .bottom-right{
  430. width: 50%;
  431. float: left;
  432. text-align: center;
  433. line-height: 85rpx;
  434. font-size:30rpx;
  435. font-family:PingFang-SC-Medium;
  436. font-weight:500;
  437. color:rgba(255,253,245,1);
  438. opacity: 1;
  439. }