confirm-dialog.scss 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. .confirm-dialog {
  2. position: fixed;
  3. inset: 0;
  4. z-index: 1000;
  5. display: flex;
  6. align-items: center;
  7. justify-content: center;
  8. padding: 48rpx;
  9. box-sizing: border-box;
  10. }
  11. .confirm-dialog__mask {
  12. position: absolute;
  13. inset: 0;
  14. background: rgba(15, 30, 24, 0.32);
  15. }
  16. .confirm-dialog__panel {
  17. position: relative;
  18. z-index: 1;
  19. width: 100%;
  20. max-width: 560rpx;
  21. background: #fff;
  22. border-radius: 28rpx;
  23. overflow: hidden;
  24. box-shadow: 0 20rpx 56rpx rgba(0, 0, 0, 0.14);
  25. }
  26. .confirm-dialog__body {
  27. padding: 44rpx 36rpx 32rpx;
  28. text-align: center;
  29. }
  30. .confirm-dialog__title {
  31. margin: 0 0 16rpx;
  32. font-size: 34rpx;
  33. font-weight: 650;
  34. color: var(--text-primary, #0f291e);
  35. line-height: 1.35;
  36. }
  37. .confirm-dialog__content {
  38. margin: 0;
  39. font-size: 26rpx;
  40. color: #555;
  41. line-height: 1.5;
  42. }
  43. .confirm-dialog__link {
  44. color: var(--brand-green, #22c55e);
  45. font-weight: 500;
  46. }
  47. .confirm-dialog__actions {
  48. display: flex;
  49. border-top: 1px solid #e8e8e8;
  50. }
  51. .confirm-dialog__btn {
  52. flex: 1;
  53. height: 96rpx;
  54. line-height: 96rpx;
  55. text-align: center;
  56. font-size: 32rpx;
  57. background: transparent;
  58. }
  59. .confirm-dialog__btn--cancel {
  60. color: #666;
  61. border-right: 1px solid #e8e8e8;
  62. }
  63. .confirm-dialog__btn--confirm {
  64. color: var(--brand-green, #22c55e);
  65. font-weight: 600;
  66. }
  67. /* 原生 button 重置,外观与 view 按钮一致 */
  68. button.confirm-dialog__btn--native {
  69. margin: 0;
  70. padding: 0;
  71. border: none;
  72. border-radius: 0;
  73. line-height: 96rpx;
  74. font-size: 32rpx;
  75. background: transparent;
  76. }
  77. button.confirm-dialog__btn--native::after {
  78. border: none;
  79. }