tui-modal.wxss 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
  1. .tui-modal-box.data-v-6ccfff18 {
  2. position: fixed;
  3. left: 50%;
  4. top: 50%;
  5. margin: auto;
  6. background-color: #fff;
  7. z-index: 9999998;
  8. transition: all 0.3s ease-in-out;
  9. opacity: 0;
  10. box-sizing: border-box;
  11. visibility: hidden;
  12. }
  13. .tui-modal-scale.data-v-6ccfff18 {
  14. -webkit-transform: translate(-50%, -50%) scale(0);
  15. transform: translate(-50%, -50%) scale(0);
  16. }
  17. .tui-modal-normal.data-v-6ccfff18 {
  18. -webkit-transform: translate(-50%, -50%) scale(1);
  19. transform: translate(-50%, -50%) scale(1);
  20. }
  21. .tui-modal-show.data-v-6ccfff18 {
  22. opacity: 1;
  23. visibility: visible;
  24. }
  25. .tui-modal-mask.data-v-6ccfff18 {
  26. position: fixed;
  27. top: 0;
  28. left: 0;
  29. right: 0;
  30. bottom: 0;
  31. background-color: rgba(0, 0, 0, 0.6);
  32. z-index: 9999996;
  33. transition: all 0.3s ease-in-out;
  34. opacity: 0;
  35. visibility: hidden;
  36. }
  37. .tui-mask-show.data-v-6ccfff18 {
  38. visibility: visible;
  39. opacity: 1;
  40. }
  41. .tui-modal-title.data-v-6ccfff18 {
  42. text-align: center;
  43. font-size: 34rpx;
  44. color: #333;
  45. padding-top: 20rpx;
  46. font-weight: bold;
  47. }
  48. .tui-modal-content.data-v-6ccfff18 {
  49. text-align: center;
  50. color: #999;
  51. font-size: 28rpx;
  52. padding-top: 20rpx;
  53. padding-bottom: 60rpx;
  54. }
  55. .tui-mtop.data-v-6ccfff18 {
  56. margin-top: 30rpx;
  57. }
  58. .tui-mbtm.data-v-6ccfff18 {
  59. margin-bottom: 30rpx;
  60. }
  61. .tui-modalBtn-box.data-v-6ccfff18 {
  62. width: 100%;
  63. display: flex;
  64. align-items: center;
  65. justify-content: space-between
  66. }
  67. .tui-flex-column.data-v-6ccfff18 {
  68. flex-direction: column;
  69. }
  70. .tui-modal-btn.data-v-6ccfff18 {
  71. width: 46%;
  72. height: 68rpx;
  73. line-height: 68rpx;
  74. position: relative;
  75. border-radius: 10rpx;
  76. font-size: 26rpx;
  77. overflow: visible;
  78. margin-left: 0;
  79. margin-right: 0;
  80. }
  81. .tui-modal-btn.data-v-6ccfff18::after {
  82. content: " ";
  83. position: absolute;
  84. width: 200%;
  85. height: 200%;
  86. -webkit-transform-origin: 0 0;
  87. transform-origin: 0 0;
  88. -webkit-transform: scale(0.5, 0.5);
  89. transform: scale(0.5, 0.5);
  90. left: 0;
  91. top: 0;
  92. border-radius: 20rpx;
  93. }
  94. .tui-btn-width.data-v-6ccfff18 {
  95. width: 80% !important;
  96. }
  97. .tui-primary.data-v-6ccfff18 {
  98. background: #5677fc;
  99. color: #fff;
  100. }
  101. .tui-primary-hover.data-v-6ccfff18 {
  102. background: #4a67d6;
  103. color: #e5e5e5;
  104. }
  105. .tui-primary-outline.data-v-6ccfff18 {
  106. color: #5677fc;
  107. background: transparent;
  108. }
  109. .tui-primary-outline.data-v-6ccfff18::after {
  110. border: 1px solid #5677fc;
  111. }
  112. .tui-danger.data-v-6ccfff18 {
  113. background-image: linear-gradient(270deg, #f83c6c 0%, #fc32b4 100%);
  114. color: #fff;
  115. }
  116. .tui-danger-hover.data-v-6ccfff18 {
  117. background-image: linear-gradient(270deg, #f83c6c 0%, #fc32b4 100%);
  118. color: #e5e5e5;
  119. }
  120. .tui-danger-outline.data-v-6ccfff18 {
  121. background-image: linear-gradient(270deg, #f83c6c 0%, #fc32b4 100%);
  122. background: transparent;
  123. }
  124. .tui-danger-outline.data-v-6ccfff18::after {
  125. border: 1px solid #191919;
  126. }
  127. .tui-red.data-v-6ccfff18 {
  128. background: #e41f19;
  129. color: #fff;
  130. }
  131. .tui-red-hover.data-v-6ccfff18 {
  132. background: #c51a15;
  133. color: #e5e5e5;
  134. }
  135. .tui-red-outline.data-v-6ccfff18 {
  136. color: #e41f19;
  137. background: transparent;
  138. }
  139. .tui-red-outline.data-v-6ccfff18::after {
  140. border: 1px solid #e41f19;
  141. }
  142. .tui-warning.data-v-6ccfff18 {
  143. background: #ff7900;
  144. color: #fff;
  145. }
  146. .tui-warning-hover.data-v-6ccfff18 {
  147. background: #e56d00;
  148. color: #e5e5e5;
  149. }
  150. .tui-warning-outline.data-v-6ccfff18 {
  151. color: #ff7900;
  152. background: transparent;
  153. }
  154. .tui-warning-outline.data-v-6ccfff18::after {
  155. border: 1px solid #ff7900;
  156. }
  157. .tui-green.data-v-6ccfff18 {
  158. background: #19be6b;
  159. color: #fff;
  160. }
  161. .tui-green-hover.data-v-6ccfff18 {
  162. background: #16ab60;
  163. color: #e5e5e5;
  164. }
  165. .tui-green-outline.data-v-6ccfff18 {
  166. color: #19be6b;
  167. background: transparent;
  168. }
  169. .tui-green-outline.data-v-6ccfff18::after {
  170. border: 1px solid #19be6b;
  171. }
  172. .tui-white.data-v-6ccfff18 {
  173. background: #fff;
  174. color: #333;
  175. }
  176. .tui-white-hover.data-v-6ccfff18 {
  177. background: #f7f7f9;
  178. color: #666;
  179. }
  180. .tui-white-outline.data-v-6ccfff18 {
  181. color: #333;
  182. background: transparent;
  183. }
  184. .tui-white-outline.data-v-6ccfff18::after {
  185. border: 1px solid #333;
  186. }
  187. .tui-gray.data-v-6ccfff18 {
  188. background: #ededed;
  189. color: #999;
  190. }
  191. .tui-gray-hover.data-v-6ccfff18 {
  192. background: #d5d5d5;
  193. color: #898989;
  194. }
  195. .tui-gray-outline.data-v-6ccfff18 {
  196. color: #999;
  197. background: transparent;
  198. }
  199. .tui-gray-outline.data-v-6ccfff18::after {
  200. border: 1px solid #999;
  201. }
  202. .tui-outline-hover.data-v-6ccfff18 {
  203. opacity: 0.6;
  204. }
  205. .tui-circle-btn.data-v-6ccfff18 {
  206. border-radius: 40rpx !important;
  207. }
  208. .tui-circle-btn.data-v-6ccfff18::after {
  209. border-radius: 80rpx !important;
  210. }