modal.wxss 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
  1. /* ==================
  2. 模态窗口
  3. ==================== */
  4. .modal {
  5. position: fixed;
  6. top: 0;
  7. right: 0;
  8. bottom: 0;
  9. left: 0;
  10. z-index: 1110;
  11. opacity: 0;
  12. outline: 0;
  13. text-align: center;
  14. -ms-transform: scale(1.185);
  15. transform: scale(1.185);
  16. backface-visibility: hidden;
  17. perspective: 2000rpx;
  18. background: rgba(0, 0, 0, 0.6);
  19. transition: all 0.3s ease-in-out 0s;
  20. pointer-events: none;
  21. }
  22. .modal::before {
  23. content: "\200B";
  24. display: inline-block;
  25. height: 100%;
  26. vertical-align: middle;
  27. }
  28. .modal.show {
  29. opacity: 1;
  30. transition-duration: 0.3s;
  31. -ms-transform: scale(1);
  32. transform: scale(1);
  33. overflow-x: hidden;
  34. overflow-y: auto;
  35. pointer-events: auto;
  36. }
  37. .modal .dialog {
  38. position: relative;
  39. display: inline-block;
  40. vertical-align: middle;
  41. margin-left: auto;
  42. margin-right: auto;
  43. width: 680rpx;
  44. max-width: 100%;
  45. background-color: #f8f8f8;
  46. border-radius: 10rpx;
  47. overflow: hidden;
  48. }
  49. .modal.bottom-modal::before {
  50. vertical-align: bottom;
  51. }
  52. .modal.bottom-modal .dialog {
  53. width: 100%;
  54. border-radius: 20rpx 20rpx 0 0;
  55. background-color: #fff;
  56. }
  57. .modal.bottom-modal {
  58. margin-bottom: -1000rpx;
  59. }
  60. .modal.bottom-modal.show {
  61. margin-bottom: 0;
  62. }
  63. .modal.drawer-modal {
  64. transform: scale(1);
  65. display: flex;
  66. }
  67. .modal.drawer-modal .dialog {
  68. height: 100%;
  69. min-width: 200rpx;
  70. border-radius: 0;
  71. margin: initial;
  72. transition-duration: 0.3s;
  73. }
  74. .modal.drawer-modal.justify-start .dialog {
  75. transform: translateX(-100%);
  76. }
  77. .modal.drawer-modal.justify-end .dialog {
  78. transform: translateX(100%);
  79. }
  80. .modal.drawer-modal.show .dialog {
  81. transform: translateX(0%);
  82. }
  83. .modal .dialog>.bar:first-child .action{
  84. min-width: 100rpx;
  85. /*margin-right: 0;*/
  86. min-height: 100rpx;
  87. }
  88. .dialog-list+.dialog-list {
  89. margin-top: 30rpx
  90. }
  91. .dialog-list>.dialog-list-item {
  92. transition: all .6s ease-in-out 0s;
  93. transform: translateX(0rpx)
  94. }
  95. .dialog-list.menu>.dialog-list-item {
  96. position: relative;
  97. display: flex;
  98. padding: 0 30rpx;
  99. min-height: 100rpx;
  100. background-color: var(--white);
  101. justify-content: space-between;
  102. align-items: center
  103. }
  104. .dialog-list.menu>.dialog-list-item:last-child:after {
  105. border: none
  106. }
  107. .dialog-list.menu>.dialog-list-item:after {
  108. position: absolute;
  109. top: 0;
  110. left: 0;
  111. box-sizing: border-box;
  112. width: 200%;
  113. height: 200%;
  114. border-bottom: 1rpx solid #ddd;
  115. border-radius: inherit;
  116. content: " ";
  117. transform: scale(.5);
  118. transform-origin: 0 0;
  119. pointer-events: none
  120. }
  121. .dialog-list.menu>.dialog-list-item.grayscale {
  122. background-color: #f5f5f5
  123. }
  124. .dialog-list.menu>.dialog-list-item.cur {
  125. background-color: #fcf7e9
  126. }
  127. .dialog-list.menu>.dialog-list-item.arrow {
  128. padding-right: 90rpx
  129. }
  130. .dialog-list.menu>.dialog-list-item.arrow:before {
  131. position: absolute;
  132. top: 0;
  133. right: 30rpx;
  134. bottom: 0;
  135. display: block;
  136. margin: auto;
  137. width: 30rpx;
  138. height: 30rpx;
  139. color: var(--grey);
  140. content: "\e6a3";
  141. text-align: center;
  142. font-size: 34rpx;
  143. font-family: "icon";
  144. line-height: 30rpx
  145. }
  146. .dialog-list.menu>.dialog-list-item button.content {
  147. padding: 0;
  148. background-color: transparent;
  149. justify-content: flex-start
  150. }
  151. .dialog-list.menu>.dialog-list-item button.content:after {
  152. display: none
  153. }
  154. .dialog-list.menu>.dialog-list-item .content>view:first-child {
  155. display: flex;
  156. align-items: center
  157. }
  158. .dialog-list.menu>.dialog-list-item .content>text[class*=icon] {
  159. display: inline-block;
  160. margin-right: 10rpx;
  161. width: 1.6em;
  162. text-align: center
  163. }
  164. .dialog-list.menu>.dialog-list-item .content>image {
  165. display: inline-block;
  166. margin-right: 10rpx;
  167. width: 1.6em;
  168. height: 1.6em;
  169. vertical-align: middle
  170. }
  171. .dialog-list.menu>.dialog-list-item .content {
  172. font-size: 30rpx;
  173. line-height: 1.6em;
  174. flex: 1
  175. }