customer-modal.wxss 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. @import "../../app";
  2. .modal {
  3. position: fixed;
  4. top: 0;
  5. left: 0;
  6. right: 0;
  7. bottom: 0;
  8. background: rgba(142, 142, 147, 0.3);
  9. z-index: 100;
  10. display: flex;
  11. justify-content: center;
  12. align-items: center;
  13. opacity: 0;
  14. visibility: hidden;
  15. transition: all 0.15s ease;
  16. }
  17. .modal.fadeIn {
  18. opacity: 1;
  19. visibility: visible;
  20. }
  21. .modal .inner {
  22. width: 540rpx;
  23. background: #fff;
  24. border-radius: 20rpx;
  25. transform: scale(0) translateY(-100rpx);
  26. transition: transform 0.15s ease;
  27. }
  28. .modal .inner.fadeIn {
  29. transform: scale(1) translateY(-100rpx);
  30. }
  31. .modal .title {
  32. padding: 40rpx 0;
  33. line-height: 42rpx;
  34. font-size: 32rpx;
  35. font-weight: 420;
  36. text-align: center;
  37. }
  38. .modal .content {
  39. padding: 0 30rpx 30rpx;
  40. box-sizing: border-box;
  41. }
  42. .modal .input {
  43. padding: 0 30rpx;
  44. width: 100%;
  45. height: 74rpx;
  46. font-size: 30rpx;
  47. border: solid #e8e8e8 1rpx;
  48. box-sizing: border-box;
  49. }
  50. .modal .btnGroup {
  51. display: flex;
  52. align-items: center;
  53. border-top: solid #e8e8e8 1rpx;
  54. }
  55. .modal .btn {
  56. display: block;
  57. flex: 1;
  58. margin: 0;
  59. padding: 0;
  60. min-height: 0;
  61. height: 100rpx;
  62. line-height: 100rpx;
  63. font-size: 32rpx;
  64. text-align: center;
  65. background: #fff;
  66. }
  67. .modal .cancel {
  68. color: #999;
  69. }
  70. .button-hover {
  71. transform: scale(1);
  72. }