exchange.wxss 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382
  1. .exchange-top {
  2. position: relative;
  3. width: 750rpx;
  4. min-height: 100%;
  5. background: #f3f3f3;
  6. }
  7. .exchange-top-content {
  8. width: 100%;
  9. height: 200rpx;
  10. background: url('http://fohow.oss-cn-shenzhen.aliyuncs.com/xcx/icon/labibackgroud.png') no-repeat;
  11. background-size: cover;
  12. /* line-height: 160rpx; */
  13. /* padding: 0 18rpx; */
  14. box-sizing: border-box;
  15. position: relative;
  16. margin-bottom: 20rpx;
  17. }
  18. .exchange-top-radish {
  19. position: absolute;
  20. left: 52rpx;
  21. top: 40rpx;
  22. font-size: 30rpx;
  23. color: #ffffff;
  24. }
  25. .exchange-top-count {
  26. /* float: right; */
  27. position: absolute;
  28. top: 106rpx;
  29. left: 52rpx;
  30. font-size: 48rpx;
  31. color: #fff;
  32. font-weight: bold;
  33. }
  34. .exchange-top-btn{
  35. position: absolute;
  36. right: 46rpx;
  37. top: 74rpx;
  38. width: 160rpx;
  39. height: 54rpx;
  40. line-height: 54rpx;
  41. border: 2rpx solid #fff;
  42. border-radius:510rpx;
  43. font-size: 30rpx;
  44. text-align: center;
  45. color: #fff;
  46. }
  47. .exchange-tip {
  48. width: 100%;
  49. padding: 20rpx;
  50. font-size: 24rpx;
  51. color: #888888;
  52. box-sizing: border-box;
  53. }
  54. .exchange-tip-info {
  55. height: 90rpx;
  56. line-height: 90rpx;
  57. border-radius: 8rpx;
  58. text-align: center;
  59. background: #e3e6e9;
  60. }
  61. .exchange-title {
  62. width: 100%;
  63. font-size: 24rpx;
  64. color: #bbbbbb;
  65. padding: 0 50rpx;
  66. box-sizing: border-box;
  67. }
  68. .exchange-panel {
  69. width: 710rpx;
  70. margin: 20rpx auto 0;
  71. background: #ffffff;
  72. border-radius: 8rpx;
  73. padding: 20rpx 30rpx 40rpx;
  74. box-sizing: border-box;
  75. }
  76. .exchange-panel.bg {
  77. background: #fcfcfc;
  78. }
  79. .exchange-rule {
  80. width: 100%;
  81. height: 120rpx;
  82. border-bottom: 1rpx solid #eee;
  83. }
  84. .exchange-rule-company {
  85. float: left;
  86. width: 450rpx;
  87. font-size: 28rpx;
  88. color: #4c4c4c;
  89. line-height: 30rpx;
  90. }
  91. .exchange-rule-company image {
  92. float: left;
  93. width: 100rpx;
  94. height: 100rpx;
  95. vertical-align: middle;
  96. border-radius: 50%;
  97. border: 2rpx solid #e5e5e5;
  98. box-sizing: border-box;
  99. display: inline-block;
  100. margin-right: 22rpx;
  101. }
  102. .exchange-rule-per {
  103. float: right;
  104. height: 100rpx;
  105. font-size: 28rpx;
  106. color: #999;
  107. line-height: 100rpx;
  108. }
  109. .exchange-rule-per image {
  110. width: 25rpx;
  111. height: 25rpx;
  112. margin-left: 20rpx;
  113. transform:rotate(90deg);
  114. }
  115. .exchange-company-slogan {
  116. float: left;
  117. margin-top: 12rpx;
  118. line-height: 36rpx;
  119. }
  120. .exchange-integral {
  121. width: 100%;
  122. height: 60rpx;
  123. line-height: 60rpx;
  124. }
  125. .exchange-integral1 {
  126. width: 100%;
  127. height: 100rpx;
  128. line-height: 100rpx;
  129. }
  130. .exchange-integral-title {
  131. font-size: 24rpx;
  132. color: #999;
  133. }
  134. .exchange-integral-count {
  135. float: right;
  136. font-size: 28rpx;
  137. color: #4c4c4c;
  138. }
  139. .exchange-radish {
  140. position: relative;
  141. width: 100%;
  142. height: 100rpx;
  143. font-size: 28rpx;
  144. color: #7f93ae;
  145. margin-bottom: 30rpx;
  146. background-color: #f6f9fd;
  147. }
  148. .exchange-radish input {
  149. display: inline-block;
  150. width: 260rpx;
  151. height: 100rpx;
  152. font-size: 28rpx;
  153. color: #4c4c4c;
  154. margin-left: 30rpx;
  155. box-sizing: border-box;
  156. z-index: 88;
  157. }
  158. .exchange-radish .left {
  159. float: left;
  160. height: 100rpx;
  161. line-height: 100rpx;
  162. margin-left: 20rpx;
  163. }
  164. .exchange-radish .right {
  165. float: right;
  166. width: 124rpx;
  167. height: 44rpx;
  168. padding-top: 14rpx;
  169. padding-right: 20rpx;
  170. }
  171. .exchange-radish .right image {
  172. display: block;
  173. width: 32rpx;
  174. height: 32rpx;
  175. margin: 6rpx auto;
  176. }
  177. .exchange-radish .right .bg {
  178. width: 44rpx;
  179. height: 44rpx;
  180. background-color: #b8c6d9;
  181. border-radius: 8rpx;
  182. margin-top: 14rpx;
  183. }
  184. .exchange-btn1 {
  185. width: 47%;
  186. height: 100rpx;
  187. line-height: 100rpx;
  188. border-radius: 8rpx;
  189. text-align: center;
  190. font-size: 28rpx;
  191. color: #eab86a;
  192. margin-top: 30rpx;
  193. border: 1rpx solid #eab86a;
  194. }
  195. .exchange-btn2 {
  196. display: block;
  197. width: 47%;
  198. height: 100rpx;
  199. line-height: 100rpx;
  200. background: #eab86a;
  201. border-radius: 8rpx;
  202. text-align: center;
  203. margin-top: 30rpx;
  204. }
  205. .exchange-btn2__button {
  206. width: 100%;
  207. height: 100%;
  208. font-size: 28rpx;
  209. color: #fff;
  210. line-height: 100rpx;
  211. }
  212. .secondTitle {
  213. width: 320rpx;
  214. font-size: 24rpx;
  215. color: #999;
  216. }
  217. .redWord {
  218. color: #eab86a;
  219. }
  220. .pwdDialog {
  221. position: absolute;
  222. top: 0%;
  223. width: 100%;
  224. height: 100%;
  225. background: rgba(0, 0, 0, 0.5);
  226. z-index: 100;
  227. }
  228. .pwdDialog-panel {
  229. width: 650rpx;
  230. height: 584rpx;
  231. background-color: #fff;
  232. border-radius: 8rpx;
  233. margin: 260rpx auto;
  234. padding: 0 30rpx;
  235. }
  236. .pwdDialog-hearder {
  237. width: 100%;
  238. height: 100rpx;
  239. line-height: 100rpx;
  240. font-size: 28rpx;
  241. color: #999;
  242. border-bottom: 1rpx solid #eee;
  243. }
  244. .pwdDialog-hearder image {
  245. float: right;
  246. position: relative;
  247. top: 32rpx;
  248. width: 36rpx;
  249. height: 36rpx;
  250. }
  251. .pwdDialog-logo {
  252. width: 100rpx;
  253. height: 100rpx;
  254. margin: 20rpx auto;
  255. }
  256. .pwdDialog-logo image {
  257. width: 100rpx;
  258. height: 100rpx;
  259. border: 1rpx solid #eee;
  260. border-radius: 100rpx;
  261. box-sizing: border-box;
  262. }
  263. .pwdDialog-input {
  264. width: 100%;
  265. height: 100rpx;
  266. line-height: 100rpx;
  267. border: 1rpx solid #e5e5e5;
  268. background-color: #f6f9fd;
  269. font-size: 28rpx;
  270. color: #7f93ae;
  271. padding: 0 30rpx;
  272. box-sizing: border-box;
  273. }
  274. .pwdDialog-input input {
  275. float: right;
  276. width: 300rpx;
  277. height: 100rpx;
  278. text-align: right;
  279. }
  280. .pwdDialog-btn {
  281. width: 100%;
  282. height: 100rpx;
  283. line-height: 100rpx;
  284. border-radius: 8rpx;
  285. text-align: center;
  286. font-size: 28rpx;
  287. color: #fff;
  288. background-color: #eab86a;
  289. margin-top: 30rpx;
  290. }
  291. .pwdDialog-forgot {
  292. width: 100%;
  293. height: 28rpx;
  294. line-height: 28rpx;
  295. text-align: center;
  296. font-size: 28rpx;
  297. color: #3d7cbc;
  298. margin-top: 40rpx;
  299. }
  300. .ydDialog-panel {
  301. width: 650rpx;
  302. background-color: #fff;
  303. border-radius: 8rpx;
  304. margin: 260rpx auto;
  305. padding: 0 30rpx 30rpx;
  306. }
  307. .ydDialog-input {
  308. position: relative;
  309. width: 590rpx;
  310. height: 100rpx;
  311. margin: 0 auto;
  312. }
  313. .ydDialog-input input {
  314. display: block;
  315. width: 100%;
  316. height: 100rpx;
  317. background-color: #f6f9fd;
  318. border: solid 1rpx #e5e5e5;
  319. font-size: 28rpx;
  320. color: #b8c6d9;
  321. padding-left: 30rpx;
  322. box-sizing: border-box;
  323. }
  324. .ydDialog-btn {
  325. width: 590rpx;
  326. height: 100rpx;
  327. line-height: 100rpx;
  328. border-radius: 8rpx;
  329. text-align: center;
  330. font-size: 28rpx;
  331. color: #fff;
  332. background-color: #eab86a;
  333. margin: 30rpx auto 0;
  334. }
  335. .ydDialog-btnCode {
  336. position: absolute;
  337. top: 18rpx;
  338. right: 16rpx;
  339. width: 250rpx;
  340. height: 64rpx;
  341. line-height: 64rpx;
  342. font-size: 28rpx;
  343. color: #eab86a;
  344. text-align: center;
  345. background-color: #fff;
  346. border-radius: 32rpx;
  347. border: 1rpx solid #cccccc;
  348. box-sizing: border-box;
  349. z-index: 99;
  350. }
  351. .user-title{
  352. position: absolute;
  353. font-size: 26rpx;
  354. color: #ffc4af;
  355. top: 110rpx;
  356. left: 52rpx;
  357. }
  358. .bind {
  359. position: absolute;
  360. font-size: 26rpx;
  361. color: #fff;
  362. top: 110rpx;
  363. left: 228rpx;
  364. text-decoration:underline
  365. }
  366. .swiper{
  367. /* margin: 0 auto; */
  368. margin: 0 20rpx;
  369. border-radius: 10rpx;
  370. height: 172rpx;
  371. }
  372. .swiper image{
  373. width: 100%;
  374. height: 172rpx;
  375. /*height: 172rpx;*/
  376. }
  377. .exchange-integral-text{
  378. padding-top:4rpx;
  379. font-size: 24rpx;
  380. color: #999;
  381. float: right;
  382. }