setting.scss 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559
  1. .setting {
  2. width: #{750rpx};
  3. .app-text {
  4. font-size: #{28rpx};
  5. color: #353535;
  6. &.admin {
  7. color: #446dfd;
  8. }
  9. }
  10. .set-image {
  11. width: #{750rpx};
  12. height: #{260rpx};
  13. position: absolute;
  14. top: 0;
  15. left: 0;
  16. }
  17. .head {
  18. margin: #{114rpx 24rpx 20rpx};
  19. position: relative;
  20. height: #{200rpx};
  21. width: #{702rpx};
  22. border-radius: #{8rpx};
  23. background-color: #fff;
  24. text-align: center;
  25. z-index: 2;
  26. box-sizing: border-box;
  27. padding-top: #{1rpx};
  28. .logo {
  29. width: #{140rpx};
  30. height: #{140rpx};
  31. border-radius: 50%;
  32. background-color: white;
  33. border: #{4rpx} solid white;
  34. position: absolute;
  35. top: -40%;
  36. left: 50%;
  37. transform: translateX(-50%);
  38. }
  39. .name {
  40. height: #{55rpx};
  41. line-height: #{55rpx};
  42. margin-top: #{109rpx};
  43. .name-text>image {
  44. width: #{28rpx};
  45. height: #{28rpx};
  46. margin-left: #{12rpx};
  47. }
  48. .name-text {
  49. font-size: #{40rpx};
  50. color: #353535;
  51. >view {
  52. max-width: #{650rpx};
  53. word-break: break-all;
  54. text-overflow: ellipsis;
  55. display: -webkit-box;
  56. -webkit-box-orient: vertical;
  57. -webkit-line-clamp: 1;
  58. overflow: hidden;
  59. }
  60. }
  61. }
  62. }
  63. .switch {
  64. width: #{702rpx};
  65. border-radius: #{8rpx};
  66. margin: #{20rpx} #{24rpx};
  67. background-color: white;
  68. &.switch-open {
  69. .switch-open-item {
  70. margin-left: 100rpx;
  71. margin-right: 32rpx;
  72. border-top: 2rpx solid #e2e2e2;
  73. height: #{100rpx};
  74. &.no-border {
  75. border-top: 0;
  76. }
  77. .switch-open-text {
  78. width: 314rpx;
  79. text-align: right;
  80. }
  81. .app-icon-text {
  82. font-size: #{26rpx};
  83. color: #999999;
  84. .app-icon {
  85. width: #{12rpx};
  86. height: #{22rpx};
  87. margin-left: #{14rpx};
  88. }
  89. }
  90. }
  91. }
  92. >view.switch-item {
  93. height: #{100rpx};
  94. width: #{638rpx};
  95. margin: 0 #{32rpx};
  96. &.no-margin {
  97. margin: 0;
  98. }
  99. .radio-text {
  100. width: 460rpx;
  101. }
  102. .border {
  103. border-bottom: #{1rpx} solid #e2e2e2;
  104. }
  105. >view {
  106. width: #{564rpx};
  107. height: #{100rpx};
  108. >view {
  109. height: #{100rpx};
  110. line-height: #{100rpx};
  111. .app-switch-view {
  112. background-color: #14d675 !important;
  113. }
  114. .switch-view {
  115. width: #{88rpx};
  116. height: #{48rpx};
  117. border-radius: #{24rpx};
  118. background-color: #dddddd;
  119. .click {
  120. border-radius: 50%;
  121. background-color: white;
  122. width: #{38rpx};
  123. height: #{38rpx};
  124. margin: #{5rpx} #{6rpx};
  125. }
  126. .app-switch {
  127. transform: translateX(#{40rpx});
  128. }
  129. }
  130. }
  131. }
  132. >image {
  133. width: #{40rpx};
  134. height: #{40rpx};
  135. margin-right: #{32rpx};
  136. }
  137. }
  138. }
  139. .switch-time {
  140. width: #{702rpx};
  141. height: #{300rpx};
  142. background-color: white;
  143. margin: 0 #{24rpx};
  144. border-radius: #{8rpx};
  145. .switch-time-item {
  146. width: #{702rpx};
  147. height: #{100rpx};
  148. padding: 0 #{32rpx};
  149. box-sizing: border-box;
  150. >image {
  151. width: #{40rpx};
  152. height: #{40rpx};
  153. margin-right: #{32rpx};
  154. }
  155. .switch-time-content {
  156. width: #{566rpx};
  157. height: #{100rpx};
  158. .app-text-switch {
  159. height: #{100rpx};
  160. line-height: #{100rpx} ;
  161. }
  162. .app-icon-text {
  163. font-size: #{26rpx};
  164. color: #999999;
  165. .app-icon {
  166. width: #{12rpx};
  167. height: #{22rpx};
  168. margin-left: #{14rpx};
  169. }
  170. }
  171. }
  172. }
  173. .border {
  174. border-bottom: #{1rpx} solid #e2e2e2;
  175. }
  176. }
  177. .online-payment {
  178. width: #{702rpx};
  179. height: #{142rpx};
  180. padding: 0 #{24rpx};
  181. box-sizing: border-box;
  182. margin: #{20rpx} #{24rpx};
  183. background-color: white;
  184. border-radius: #{8rpx};
  185. .online-payment-content {
  186. width: #{702rpx};
  187. height: #{142rpx};
  188. .app-image {
  189. width: #{40rpx};
  190. height: #{40rpx};
  191. margin-right: #{32rpx};
  192. }
  193. .app-icon {
  194. width: #{12rpx};
  195. height: #{22rpx};
  196. }
  197. >view {
  198. height: #{142rpx};
  199. width: #{552rpx};
  200. .payment-text {
  201. font-size: #{28rpx};
  202. color: #353535;
  203. margin-top: #{38rpx};
  204. }
  205. .payment-method-text {
  206. font-size: #{26rpx};
  207. color: #999999;
  208. margin-top: #{18rpx};
  209. }
  210. }
  211. }
  212. }
  213. .shipping-return {
  214. width: #{702rpx};
  215. height: #{200rpx};
  216. padding: 0 #{24rpx};
  217. box-sizing: border-box;
  218. background-color: white;
  219. border-radius: #{8rpx};
  220. margin: 0 #{24rpx};
  221. .shipping-return-item {
  222. width: #{702rpx};
  223. height: #{100rpx};
  224. .item-image {
  225. width: #{40rpx};
  226. height: #{40rpx};
  227. margin-right: #{32rpx};
  228. }
  229. .item-view {
  230. width: #{566rpx};
  231. height: #{100rpx};
  232. .app-text {
  233. height: #{100rpx};
  234. line-height: #{100rpx};
  235. }
  236. .right {
  237. >image {
  238. width: #{12rpx};
  239. height: #{22rpx};
  240. margin-left: #{16rpx};
  241. }
  242. >view {
  243. color: #999999;
  244. font-size: #{26rpx};
  245. }
  246. }
  247. }
  248. }
  249. }
  250. .integral {
  251. width: #{702rpx};
  252. height: #{200rpx};
  253. padding: 0 #{24rpx};
  254. box-sizing: border-box;
  255. background-color: white;
  256. border-radius: #{8rpx};
  257. margin: #{20rpx} #{24rpx};
  258. .integral-item {
  259. width: #{702-48rpx};
  260. height: #{100rpx};
  261. >image {
  262. width: #{40rpx};
  263. height: #{40rpx};
  264. margin-right: #{32rpx};
  265. }
  266. .text-content {
  267. width: #{566rpx};
  268. height: #{100rpx};
  269. .app-text {
  270. height: #{100rpx};
  271. line-height: #{100rpx};
  272. }
  273. .right {
  274. font-size: #{26rpx};
  275. color: #999999;
  276. >image {
  277. width: #{12rpx};
  278. height: #{22rpx};
  279. margin-left: #{16rpx};
  280. }
  281. }
  282. }
  283. }
  284. }
  285. }
  286. .model {
  287. position: fixed;
  288. top: 0;
  289. left: 0;
  290. width: 100%;
  291. height: 100%;
  292. background-color: rgba(0,0,0,0.3);
  293. z-index: 1600;
  294. .content {
  295. width: #{620rpx};
  296. position: absolute;
  297. top: 50%;
  298. left: 50%;
  299. background-color: white;
  300. transform: translate(-50%, -50%);
  301. border-radius: #{16rpx};
  302. .title {
  303. margin: #{40rpx} 0;
  304. font-size: #{32rpx};
  305. color: #353535;
  306. text-align: center;
  307. }
  308. .content-text {
  309. .name {
  310. height: #{80rpx};
  311. line-height: #{80rpx};
  312. background-color: #f7f7f7;
  313. border-radius: #{16rpx};
  314. box-sizing: border-box;
  315. padding: #{0 28rpx};
  316. margin: #{0 28rpx};
  317. text-align: left;
  318. margin-bottom: #{24rpx};
  319. }
  320. .intergral-change {
  321. line-height: #{80rpx};
  322. height: #{80rpx};
  323. font-size: #{28rpx};
  324. color: #353535;
  325. margin-bottom: #{24rpx};
  326. >view {
  327. margin-left: #{16rpx};
  328. }
  329. .intergral-input {
  330. height:#{80rpx};
  331. line-height: #{80rpx};
  332. background-color: #f7f7f7;
  333. border-radius: #{8rpx};
  334. width: #{288rpx};
  335. padding: #{0 28rpx};
  336. box-sizing: border-box;
  337. text-align: left;
  338. input {
  339. width: 100%;
  340. height: 100%;
  341. }
  342. }
  343. }
  344. .pay-change {
  345. margin: 0 #{32rpx};
  346. width: #{556rpx};
  347. height: #{100+100+100+24+24+24+6rpx};
  348. .app-active {
  349. border: #{1rpx} solid #446dfd !important;
  350. background-color: rgba(236, 240, 255, 0.3);
  351. }
  352. .pay-view {
  353. box-sizing: border-box;
  354. width: #{556rpx};
  355. height: #{100rpx};
  356. border-radius: #{50rpx};
  357. border: #{1rpx} solid #e2e2e2;
  358. padding: 0 #{50rpx};
  359. margin-bottom: #{24rpx};
  360. position: relative;
  361. .left {
  362. >view {
  363. >image {
  364. width: #{60rpx};
  365. height: #{60rpx};
  366. margin-right: #{20rpx};
  367. }
  368. >view {
  369. height: #{100rpx};
  370. line-height: #{100rpx};
  371. font-size: #{28rpx};
  372. color: #353535;
  373. }
  374. }
  375. .active {
  376. width: #{32rpx};
  377. height: #{32rpx};
  378. }
  379. }
  380. }
  381. }
  382. .choose-time {
  383. position: relative;
  384. .time-title {
  385. margin-left: #{32rpx};
  386. color: #666;
  387. font-size: #{28rpx};
  388. margin-bottom: #{20rpx};
  389. }
  390. .year-1 {
  391. position: absolute;
  392. left: #{192rpx};
  393. top: #{146rpx};
  394. }
  395. .month-1 {
  396. position: absolute;
  397. left: #{380rpx};
  398. top: #{146rpx};
  399. }
  400. .day-1 {
  401. position: absolute;
  402. right: #{32rpx};
  403. top: #{146rpx};
  404. }
  405. .year-2 {
  406. position: absolute;
  407. left: #{192rpx};
  408. bottom: #{88rpx};
  409. }
  410. .month-2 {
  411. position: absolute;
  412. left: #{380rpx};
  413. bottom: #{88rpx};
  414. }
  415. .day-2 {
  416. position: absolute;
  417. right: #{32rpx};
  418. bottom: #{88rpx};
  419. }
  420. .picker-view {
  421. width: #{556rpx};
  422. height: #{216rpx};
  423. margin: 0 auto #{20rpx};
  424. text-align: center;
  425. view {
  426. line-height: #{68rpx};
  427. }
  428. }
  429. }
  430. .time-area {
  431. margin-bottom: #{24rpx};
  432. padding: 0 #{32rpx};
  433. &.date-area {
  434. .dialog-choose-item {
  435. margin: #{12rpx} 0;
  436. }
  437. }
  438. .dialog-choose-item {
  439. margin: 0 12rpx;
  440. width: #{170rpx};
  441. height: #{68rpx};
  442. line-height: #{68rpx};
  443. text-align: center;
  444. border-radius: #{34rpx};
  445. border: #{2rpx} solid;
  446. font-size: #{28rpx};
  447. margin-bottom: #{16rpx};
  448. &.time-area-item {
  449. border-color: #ddd;
  450. color: #666;
  451. }
  452. }
  453. }
  454. .i-modal-body {
  455. padding: #{17rpx 32rpx 32rpx};
  456. box-sizing: border-box;
  457. max-height: #{1000rpx};
  458. .intergral-change {
  459. line-height: #{80rpx};
  460. height: #{80rpx};
  461. font-size: #{28rpx};
  462. color: #353535;
  463. >view {
  464. padding-left: #{16rpx};
  465. box-sizing: border-box;
  466. }
  467. .intergral-input {
  468. height: #{80rpx};
  469. line-height: #{80rpx};
  470. background-color: #f7f7f7;
  471. border-radius: #{16rpx};
  472. width: #{288rpx};
  473. padding: #{0 28rpx};
  474. box-sizing: border-box;
  475. text-align: left;
  476. }
  477. }
  478. }
  479. .textarea-area {
  480. height:#{252rpx};
  481. width: #{556rpx};
  482. margin: #{24rpx} auto;
  483. border: #{1rpx} solid #e2e2e2;
  484. border-radius: #{16rpx};
  485. .textarea {
  486. height: 100%;
  487. width: #{556rpx};
  488. padding: #{24rpx 32rpx};
  489. box-sizing: border-box;
  490. font-size: #{28rpx};
  491. text-align: left;
  492. }
  493. }
  494. }
  495. .buttons {
  496. width: #{620rpx};
  497. height: #{88rpx};
  498. border-top: #{1rpx} solid #e2e2e2;
  499. .line {
  500. width: #{2rpx};
  501. height: #{32rpx};
  502. background-color: #e2e2e2;
  503. }
  504. .but {
  505. width: #{309rpx};
  506. height: #{88rpx};
  507. line-height: #{88rpx};
  508. text-align: center;
  509. font-size: #{32rpx};
  510. }
  511. .cancel {
  512. color: #{32rpx};
  513. }
  514. .confirm {
  515. color: #446dfd;
  516. }
  517. }
  518. }
  519. }
  520. .bottom-tab {
  521. width: 100%;
  522. height: #{96rpx};
  523. font-size: #{20rpx};
  524. color: #9096ad;
  525. padding-top: #{14rpx};
  526. box-sizing: border-box;
  527. }
  528. .u-bottom-fixed {
  529. position: fixed;
  530. bottom: 0;
  531. left: 0;
  532. right: 0;
  533. z-index: 999;
  534. background-color: #fff;
  535. }
  536. .tab-item {
  537. text-align: center;
  538. }
  539. .tab-icon {
  540. height: #{48rpx};
  541. width: #{48rpx};
  542. display: inline-block;
  543. }
  544. .tab-item.active {
  545. color: #446dfd;
  546. }
  547. .tab-item view {
  548. margin-top: #{-5rpx};
  549. }
  550. .bottom-place {
  551. height: #{116rpx};
  552. }
  553. .u-bottom-height {
  554. height: 116upx;
  555. }