setting.scss 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565
  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. .border {
  230. border-bottom: #{1rpx} solid #e2e2e2;
  231. }
  232. .item-view {
  233. width: #{566rpx};
  234. height: #{100rpx};
  235. .app-text {
  236. height: #{100rpx};
  237. line-height: #{100rpx};
  238. }
  239. .right {
  240. >image {
  241. width: #{12rpx};
  242. height: #{22rpx};
  243. margin-left: #{16rpx};
  244. }
  245. >view {
  246. color: #999999;
  247. font-size: #{26rpx};
  248. }
  249. }
  250. }
  251. }
  252. }
  253. .integral {
  254. width: #{702rpx};
  255. height: #{200rpx};
  256. padding: 0 #{24rpx};
  257. box-sizing: border-box;
  258. background-color: white;
  259. border-radius: #{8rpx};
  260. margin: #{20rpx} #{24rpx};
  261. .integral-item {
  262. width: #{702-48rpx};
  263. height: #{100rpx};
  264. >image {
  265. width: #{40rpx};
  266. height: #{40rpx};
  267. margin-right: #{32rpx};
  268. }
  269. .border {
  270. border-bottom: #{1rpx} solid #e2e2e2;
  271. }
  272. .text-content {
  273. width: #{566rpx};
  274. height: #{100rpx};
  275. .app-text {
  276. height: #{100rpx};
  277. line-height: #{100rpx};
  278. }
  279. .right {
  280. font-size: #{26rpx};
  281. color: #999999;
  282. >image {
  283. width: #{12rpx};
  284. height: #{22rpx};
  285. margin-left: #{16rpx};
  286. }
  287. }
  288. }
  289. }
  290. }
  291. }
  292. .model {
  293. position: fixed;
  294. top: 0;
  295. left: 0;
  296. width: 100%;
  297. height: 100%;
  298. background-color: rgba(0,0,0,0.3);
  299. z-index: 1600;
  300. .content {
  301. width: #{620rpx};
  302. position: absolute;
  303. top: 50%;
  304. left: 50%;
  305. background-color: white;
  306. transform: translate(-50%, -50%);
  307. border-radius: #{16rpx};
  308. .title {
  309. margin: #{40rpx} 0;
  310. font-size: #{32rpx};
  311. color: #353535;
  312. text-align: center;
  313. }
  314. .content-text {
  315. .name {
  316. height: #{80rpx};
  317. line-height: #{80rpx};
  318. background-color: #f7f7f7;
  319. border-radius: #{16rpx};
  320. box-sizing: border-box;
  321. padding: #{0 28rpx};
  322. margin: #{0 28rpx};
  323. text-align: left;
  324. margin-bottom: #{24rpx};
  325. }
  326. .intergral-change {
  327. line-height: #{80rpx};
  328. height: #{80rpx};
  329. font-size: #{28rpx};
  330. color: #353535;
  331. margin-bottom: #{24rpx};
  332. >view {
  333. margin-left: #{16rpx};
  334. }
  335. .intergral-input {
  336. height:#{80rpx};
  337. line-height: #{80rpx};
  338. background-color: #f7f7f7;
  339. border-radius: #{8rpx};
  340. width: #{288rpx};
  341. padding: #{0 28rpx};
  342. box-sizing: border-box;
  343. text-align: left;
  344. input {
  345. width: 100%;
  346. height: 100%;
  347. }
  348. }
  349. }
  350. .pay-change {
  351. margin: 0 #{32rpx};
  352. width: #{556rpx};
  353. height: #{100+100+100+24+24+24+6rpx};
  354. .app-active {
  355. border: #{1rpx} solid #446dfd !important;
  356. background-color: rgba(236, 240, 255, 0.3);
  357. }
  358. .pay-view {
  359. box-sizing: border-box;
  360. width: #{556rpx};
  361. height: #{100rpx};
  362. border-radius: #{50rpx};
  363. border: #{1rpx} solid #e2e2e2;
  364. padding: 0 #{50rpx};
  365. margin-bottom: #{24rpx};
  366. position: relative;
  367. .left {
  368. >view {
  369. >image {
  370. width: #{60rpx};
  371. height: #{60rpx};
  372. margin-right: #{20rpx};
  373. }
  374. >view {
  375. height: #{100rpx};
  376. line-height: #{100rpx};
  377. font-size: #{28rpx};
  378. color: #353535;
  379. }
  380. }
  381. .active {
  382. width: #{32rpx};
  383. height: #{32rpx};
  384. }
  385. }
  386. }
  387. }
  388. .choose-time {
  389. position: relative;
  390. .time-title {
  391. margin-left: #{32rpx};
  392. color: #666;
  393. font-size: #{28rpx};
  394. margin-bottom: #{20rpx};
  395. }
  396. .year-1 {
  397. position: absolute;
  398. left: #{192rpx};
  399. top: #{146rpx};
  400. }
  401. .month-1 {
  402. position: absolute;
  403. left: #{380rpx};
  404. top: #{146rpx};
  405. }
  406. .day-1 {
  407. position: absolute;
  408. right: #{32rpx};
  409. top: #{146rpx};
  410. }
  411. .year-2 {
  412. position: absolute;
  413. left: #{192rpx};
  414. bottom: #{88rpx};
  415. }
  416. .month-2 {
  417. position: absolute;
  418. left: #{380rpx};
  419. bottom: #{88rpx};
  420. }
  421. .day-2 {
  422. position: absolute;
  423. right: #{32rpx};
  424. bottom: #{88rpx};
  425. }
  426. .picker-view {
  427. width: #{556rpx};
  428. height: #{216rpx};
  429. margin: 0 auto #{20rpx};
  430. text-align: center;
  431. view {
  432. line-height: #{68rpx};
  433. }
  434. }
  435. }
  436. .time-area {
  437. margin-bottom: #{24rpx};
  438. padding: 0 #{32rpx};
  439. &.date-area {
  440. .dialog-choose-item {
  441. margin: #{12rpx} 0;
  442. }
  443. }
  444. .dialog-choose-item {
  445. margin: 0 12rpx;
  446. width: #{170rpx};
  447. height: #{68rpx};
  448. line-height: #{68rpx};
  449. text-align: center;
  450. border-radius: #{34rpx};
  451. border: #{2rpx} solid;
  452. font-size: #{28rpx};
  453. margin-bottom: #{16rpx};
  454. &.time-area-item {
  455. border-color: #ddd;
  456. color: #666;
  457. }
  458. }
  459. }
  460. .i-modal-body {
  461. padding: #{17rpx 32rpx 32rpx};
  462. box-sizing: border-box;
  463. max-height: #{1000rpx};
  464. .intergral-change {
  465. line-height: #{80rpx};
  466. height: #{80rpx};
  467. font-size: #{28rpx};
  468. color: #353535;
  469. >view {
  470. padding-left: #{16rpx};
  471. box-sizing: border-box;
  472. }
  473. .intergral-input {
  474. height: #{80rpx};
  475. line-height: #{80rpx};
  476. background-color: #f7f7f7;
  477. border-radius: #{16rpx};
  478. width: #{288rpx};
  479. padding: #{0 28rpx};
  480. box-sizing: border-box;
  481. text-align: left;
  482. }
  483. }
  484. }
  485. .textarea-area {
  486. height:#{252rpx};
  487. width: #{556rpx};
  488. margin: #{24rpx} auto;
  489. border: #{1rpx} solid #e2e2e2;
  490. border-radius: #{16rpx};
  491. .textarea {
  492. height: 100%;
  493. width: #{556rpx};
  494. padding: #{24rpx 32rpx};
  495. box-sizing: border-box;
  496. font-size: #{28rpx};
  497. text-align: left;
  498. }
  499. }
  500. }
  501. .buttons {
  502. width: #{620rpx};
  503. height: #{88rpx};
  504. border-top: #{1rpx} solid #e2e2e2;
  505. .line {
  506. width: #{2rpx};
  507. height: #{32rpx};
  508. background-color: #e2e2e2;
  509. }
  510. .but {
  511. width: #{309rpx};
  512. height: #{88rpx};
  513. line-height: #{88rpx};
  514. text-align: center;
  515. font-size: #{32rpx};
  516. }
  517. .cancel {
  518. color: #{32rpx};
  519. }
  520. .confirm {
  521. color: #446dfd;
  522. }
  523. }
  524. }
  525. }
  526. .bottom-tab {
  527. width: 100%;
  528. height: #{96rpx};
  529. font-size: #{20rpx};
  530. color: #9096ad;
  531. padding-top: #{14rpx};
  532. box-sizing: border-box;
  533. }
  534. .u-bottom-fixed {
  535. position: fixed;
  536. bottom: 0;
  537. left: 0;
  538. right: 0;
  539. z-index: 999;
  540. background-color: #fff;
  541. }
  542. .tab-item {
  543. text-align: center;
  544. }
  545. .tab-icon {
  546. height: #{48rpx};
  547. width: #{48rpx};
  548. display: inline-block;
  549. }
  550. .tab-item.active {
  551. color: #446dfd;
  552. }
  553. .tab-item view {
  554. margin-top: #{-5rpx};
  555. }
  556. .bottom-place {
  557. height: #{116rpx};
  558. }
  559. .u-bottom-height {
  560. height: 116upx;
  561. }