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

483 行
7.5 KiB

  1. @import "../../app.wxss";
  2. page{
  3. background: #F4F5F9;
  4. }
  5. .index-position {
  6. background: rgba(0, 0, 0, 0.5);
  7. height: 88rpx;
  8. position: absolute;
  9. top: 0;
  10. width: 100%;
  11. font-family: PingFangSC-Semibold;
  12. font-size: 30rpx;
  13. color: #fff;
  14. letter-spacing: 0.75rpx;
  15. z-index: 9;
  16. line-height: 88rpx;
  17. overflow: hidden;
  18. }
  19. .red{
  20. position:absolute;
  21. width:13rpx;
  22. height:13rpx;
  23. border-radius:50%;
  24. background:red;
  25. right:-50rpx;
  26. top:19rpx;
  27. left:0;
  28. margin:auto;
  29. display: none;
  30. }
  31. page {
  32. width: 100%;
  33. height: auto !important;
  34. overflow-x: hidden;
  35. }
  36. .txt {
  37. margin-left: 20rpx;
  38. }
  39. .game-entry {
  40. position: fixed;
  41. right: 27rpx;
  42. bottom:323rpx;
  43. width: 120rpx;
  44. margin: 37rpx auto 0;
  45. z-index: 10;
  46. }
  47. .gameimg {
  48. display: block;
  49. width: 100%;
  50. }
  51. .userinfo{
  52. width:690rpx;
  53. height: 96rpx;
  54. border-radius:16rpx;
  55. display: flex;
  56. justify-content: space-between;
  57. margin: 0 auto 30rpx;
  58. }
  59. .infoLeft{
  60. height: 100%;
  61. border-radius:12rpx;
  62. background: #FFF;
  63. }
  64. .section {
  65. padding: 0 20rpx;
  66. justify-content: space-around;
  67. text-align: center;
  68. margin-top: 25rpx;
  69. margin-bottom: 30rpx;
  70. }
  71. .sellsection{
  72. margin-bottom: 37rpx;
  73. padding: 0 38rpx;
  74. }
  75. .section >view,.sellsection>view{
  76. width: 25%;
  77. display: inline-block;
  78. position: relative;
  79. }
  80. .section >view image,.sellsection>view image{
  81. display: block;
  82. margin: 0 auto;
  83. }
  84. .section >view image {
  85. width: 55rpx;
  86. height: 55rpx;
  87. margin-top: 20rpx;
  88. margin-bottom: 14rpx;
  89. }
  90. .sellsection>view image{
  91. width: 159rpx;
  92. height: 134rpx;
  93. }
  94. .section text {
  95. font-size: 24rpx;
  96. color: rgba(51, 51, 51, 1);
  97. display: block;
  98. margin-top: 0rpx;
  99. }
  100. .showQrcode {
  101. position: fixed;
  102. top: 0;
  103. left: 0;
  104. right: 0;
  105. bottom: 0;
  106. z-index: 1000;
  107. background: rgba(0, 0, 0, 0.6);
  108. }
  109. .qrcode image {
  110. /* position: absolute;
  111. top: 0;
  112. bottom: 0; */
  113. margin: 15rpx 20rpx 15rpx;
  114. z-index:100;
  115. }
  116. .showQrcode {
  117. position: fixed;
  118. top: 0;
  119. left: 0;
  120. right: 0;
  121. bottom: 0;
  122. z-index: 1000;
  123. background: rgba(0, 0, 0, 0.6);
  124. }
  125. .canvas-box {
  126. position: fixed;
  127. width: 500rpx;
  128. overflow: hidden;
  129. left: 0;
  130. top: 200rpx;
  131. right: 0;
  132. margin: auto;
  133. background: #fff;
  134. border-radius: 16rpx;
  135. z-index:100;
  136. padding-bottom: 30rpx;
  137. }
  138. .showQrcode text {
  139. display: none;
  140. text-align: center;
  141. font-size: 28rpx;
  142. }
  143. .button {
  144. width: 414rpx;
  145. text-align: center;
  146. margin: 0 auto;
  147. height: 80rpx;
  148. line-height: 80rpx;
  149. background: rgba(255, 255, 255, 1);
  150. border-radius: 10rpx;
  151. font-size: 32rpx;
  152. color: rgba(2, 192, 255, 1);
  153. overflow: hidden;
  154. }
  155. .memberIds{
  156. padding-top: 30rpx;
  157. font-size: 30rpx;
  158. }
  159. .search{
  160. background:rgba(2, 192, 255, 1);
  161. height: 50rpx;
  162. }
  163. .searchbar{
  164. position: relative;
  165. width: 685rpx;
  166. height: 76rpx;
  167. margin: 0 auto;
  168. text-align: center;
  169. }
  170. .searchbar image{
  171. width: 40rpx;
  172. }
  173. .searchbar text{
  174. font-size: 28rpx;
  175. line-height: 50rpx;
  176. color: #fff;
  177. display: inline-block;
  178. }
  179. .user-avatar {
  180. width: 80rpx;
  181. height: 80rpx;
  182. border-radius: 50%;
  183. overflow: hidden;
  184. float: left;
  185. margin: 10rpx 10rpx;
  186. }
  187. .user-avatar open-data {
  188. display:block;
  189. width:100%;
  190. height:100%;
  191. }
  192. .user-data {
  193. letter-spacing: 0.64rpx;
  194. line-height: 46rpx;
  195. font-size: 30rpx;
  196. color: #333;
  197. background: #FFF;
  198. margin-top: 10rpx;
  199. margin-bottom: 26rpx;
  200. float: right;
  201. display: flex;
  202. flex-direction: column;
  203. }
  204. .nameBox open-data{
  205. float: left;
  206. }
  207. .chengzhangBox{
  208. height:32rpx;
  209. line-height: 26rpx;
  210. border-radius:9px 9px 9px 0px;
  211. font-family:PingFangSC-Regular;
  212. font-weight:400;
  213. color:rgba(255,255,255,1);
  214. float: left;
  215. margin-top: 8rpx;
  216. }
  217. .chengzhang {
  218. font-size: 22rpx;
  219. font-weight: 400;
  220. color: #FFFFFF;
  221. height:22rpx;
  222. line-height: 22rpx;
  223. padding: 0 8rpx;
  224. }
  225. .integral{
  226. margin-left: 70rpx;
  227. }
  228. .jifen{
  229. display: inline-block;
  230. height: 34rpx;
  231. color: #999999;
  232. font-size:24rpx;
  233. line-height: 34rpx;
  234. }
  235. .jifenNumber{
  236. color:#D18B4C;
  237. font-size: 34rpx;
  238. line-height: 34rpx;
  239. margin-left: 10rpx;
  240. font-weight: bold;
  241. }
  242. .view {
  243. display: flex;
  244. font-size: 24rpx;
  245. color: #999999;
  246. }
  247. .view>.score{
  248. margin-left:9rpx;
  249. color:#333333;
  250. font-size:30rpx;
  251. margin-right:23rpx;
  252. font-family:PingFang-SC-Bold;
  253. }
  254. .qrcode{
  255. width: 106rpx;
  256. height: 96rpx;
  257. background: #FFF;
  258. border-radius:12rpx;
  259. }
  260. .qrcodeimg{
  261. width: 68rpx!important;
  262. height: 68rpx!important;
  263. }
  264. .leftimg{
  265. position: absolute;
  266. right: 40rpx;
  267. top: 60rpx;
  268. margin-top: -7rpx;
  269. width: 14rpx;
  270. height: 26rpx;
  271. }
  272. .duihuanimg{
  273. display: block;
  274. width: 48rpx;
  275. margin-top: 6rpx;
  276. }
  277. .product{
  278. width: 710rpx;
  279. margin: 30rpx auto 10rpx;
  280. border-radius: 16rpx;
  281. overflow: hidden;
  282. }
  283. .product image{
  284. display: block;
  285. width: 100%;
  286. }
  287. .textBox{
  288. /* display: block; */
  289. width: 400rpx;
  290. height: 100%;
  291. float: left;
  292. margin-left: 10rpx;
  293. }
  294. .textBox .name{
  295. width: 400rpx;
  296. font-size: 28rpx;
  297. color: #3C3C3C;
  298. margin-top: 20rpx;
  299. }
  300. .textBox .title{
  301. width: 400rpx;
  302. font-size: 20rpx;
  303. color: #A6A6A6;
  304. margin-top: 10rpx;
  305. }
  306. .product .gift{
  307. width:88rpx;
  308. height:88rpx;
  309. float: left;
  310. margin-top: 30rpx;
  311. margin-left: 15rpx;
  312. }
  313. .next image{
  314. width: 26rpx;
  315. height: 40rpx;
  316. }
  317. .gift image{
  318. width:88rpx;
  319. height:76rpx;
  320. }
  321. .product .next{
  322. width:32rpx;
  323. height:60rpx;
  324. float: right;
  325. margin-top: 40rpx;
  326. margin-right: 26rpx;
  327. }
  328. #rushtobyCard{
  329. margin-top: 30rpx;
  330. }
  331. .signin{
  332. width: 542rpx;
  333. height: 94rpx;
  334. position: fixed;
  335. top: 0;
  336. left: 0;
  337. right: 0;
  338. z-index: 100;
  339. margin: auto;
  340. }
  341. .signin open-data {
  342. position: absolute;
  343. width:90rpx;
  344. left: 0;
  345. top: 0;
  346. bottom: 0;
  347. height:94rpx;
  348. margin: auto;
  349. border-radius: 50%;
  350. overflow: hidden;
  351. }
  352. .signin text{
  353. display: block;
  354. background: rgba(0, 0, 0, 0.5);
  355. font-size: 28rpx;
  356. height: 80rpx;
  357. width: 100%;
  358. line-height: 80rpx;
  359. color: #D6D5D5;
  360. text-indent: 4em;
  361. border-radius:60rpx;
  362. margin-top: 7rpx;
  363. }
  364. .remainchengzhangzhi{
  365. display: block;
  366. color: #A6A6A6;
  367. font-size: 22rpx;
  368. margin-top: 5rpx;
  369. height: 30rpx;
  370. line-height: 30rpx;
  371. float: left;
  372. margin-left:10rpx;
  373. width: 255rpx;
  374. overflow: hidden;
  375. text-overflow:ellipsis;
  376. white-space: nowrap;
  377. }
  378. progress{
  379. width:200rpx;
  380. border-radius:60rpx;
  381. overflow:hidden;
  382. float: left;
  383. margin-top: 10rpx;
  384. }
  385. .channelBox{
  386. width:688rpx;
  387. height: 220rpx;
  388. margin:0 auto;
  389. display: flex;
  390. justify-content: space-between;
  391. background: #F4F5F9;
  392. }
  393. .kjBox{
  394. width: 104rpx;
  395. height: 148rpx;
  396. font-size: 24rpx;
  397. color: #A6A6A6;
  398. margin-top: 46rpx;
  399. text-align: center;
  400. }
  401. .kjBox image{
  402. width: 104rpx;
  403. height: 104rpx;
  404. }
  405. .toutiao{
  406. width:710rpx;
  407. height: 82rpx;
  408. line-height: 82rpx;
  409. margin:0 auto;
  410. background: #FFF;
  411. box-shadow:0px 6rpx 16rpx 0px rgba(236,238,243,1);
  412. border-radius:12rpx;
  413. margin-top: 18rpx;
  414. margin-bottom:18rpx;
  415. position: relative;
  416. }
  417. .toutiao view:nth-child(2){
  418. font-size:26rpx;
  419. font-family:PingFangSC-Regular;
  420. font-weight:400;
  421. color:rgba(60,60,60,1);
  422. float: left;
  423. width: 500rpx;
  424. overflow: hidden;
  425. text-overflow:ellipsis;
  426. white-space: nowrap;
  427. }
  428. .toutiao view:nth-child(2) text:nth-child(1){
  429. color: red;
  430. }
  431. .toutiao view:nth-child(2) text:nth-child(2){
  432. text-decoration: line-through;
  433. color: red;
  434. }
  435. .toutiao .imgBox{
  436. width: 64rpx;
  437. height: 64rpx;
  438. float: left;
  439. margin:5rpx 0 5rpx 20rpx;
  440. }
  441. .toutiao image{
  442. width: 48rpx;
  443. height: 38rpx;
  444. margin: auto;
  445. }
  446. .toutiao .qg{
  447. width: 80rpx;
  448. height: 44rpx;
  449. line-height: 44rpx;
  450. border-radius:18rpx;
  451. border:2rpx solid;
  452. position: absolute;
  453. top: 0;
  454. bottom: 0;
  455. right: 20rpx;
  456. margin: auto;
  457. font-size:24rpx;
  458. font-family:PingFangSC-Medium;
  459. font-weight:500;
  460. color:#FD782D;
  461. text-align: center;
  462. }
  463. i-tabs i-tabs-scroll{
  464. background: #F4F5F9!important;
  465. }