popup.wxss 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. /* component/popup.wxss */
  2. .wx-popup {
  3. position: fixed;
  4. left: 0;
  5. top: 0;
  6. width: 100%;
  7. height: 100vh;
  8. background: rgba(0, 0, 0, 0.5);
  9. z-index: 100000;
  10. display: flex;
  11. align-items: center;
  12. justify-content: center;
  13. /* margin-top: 50%;
  14. transform: translateY(-30%); */
  15. }
  16. .popup-wap {
  17. width: 163%;
  18. max-width: 600rpx;
  19. /* margin-top: 50%;
  20. margin-left: 50%;
  21. transform: translateX(-50%); */
  22. display: flex;
  23. flex-direction: column;
  24. align-items: flex-end;
  25. }
  26. .popup-container {
  27. /* position: absolute;
  28. left: 50%;
  29. top: 50%; */
  30. width: 163%;
  31. max-width: 600rpx;
  32. border: 2rpx solid #ccc;
  33. border-radius: 20rpx;
  34. box-sizing: bordre-box;
  35. /* transform: translate(-50%, -50%); */
  36. overflow: hidden;
  37. background: #fff;
  38. margin-top: 50rpx;
  39. }
  40. .wx-popup-title {
  41. background: #e6e6e6;
  42. border-radius: 20rpx 20rpx 0px 0px;
  43. height: 91rpx;
  44. font-size: 34rpx;
  45. font-weight: 700;
  46. text-align: center;
  47. color: #1a1a1a;
  48. line-height: 91rpx;
  49. }
  50. .wx-popup-con {
  51. text-align: center;
  52. font-size: 27rpx;
  53. width: 80%;
  54. margin: auto auto 40rpx auto;
  55. }
  56. .wx-popup-conone {
  57. display: flex;
  58. flex-flow: column-reverse;
  59. justify-content: center;
  60. align-items: center;
  61. font-size: 32rpx;
  62. font-weight: 400;
  63. text-align: center;
  64. color: #3f454e;
  65. }
  66. .wx-popup-btn {
  67. display: flex;
  68. justify-content: space-around;
  69. align-items: center;
  70. height: 155rpx;
  71. border-top: 1px solid #e6e6e6;
  72. }
  73. .wx-popup-center-btn {
  74. display: flex;
  75. justify-content: center;
  76. align-items: center;
  77. height: 155rpx;
  78. border-top: 1px solid #e6e6e6;
  79. }
  80. .wx-popup-center-btn text {
  81. width: 200rpx;
  82. height: 72rpx;
  83. background-color: #ffdc2f;
  84. line-height: 72rpx;
  85. border-radius: 35rpx;
  86. text-align: center;
  87. font-size: 32rpx;
  88. font-weight: 400;
  89. color: #333333;
  90. }
  91. .wx-popup-btn text:first-child {
  92. width: 185rpx;
  93. height: 72rpx;
  94. line-height: 72rpx;
  95. background-color: #ffdc2f;
  96. border-radius: 35rpx;
  97. text-align: center;
  98. font-size: 32rpx;
  99. font-weight: 400;
  100. color: #333333;
  101. }
  102. .wx-popup-btn text:last-child {
  103. width: 200rpx;
  104. height: 72rpx;
  105. line-height: 72rpx;
  106. border: 1px solid #ffa836;
  107. border-radius: 37rpx;
  108. text-align: center;
  109. font-size: 32rpx;
  110. font-weight: 400;
  111. background: #fffae1;
  112. color: #ffa836;
  113. }
  114. .img {
  115. width: 150rpx;
  116. height: 120rpx;
  117. }
  118. .popup-close {
  119. width: 54rpx;
  120. height: 54rpx;
  121. }