rtc-modal.wxss 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. .plv-mp-rtc {
  2. display: inline-block;
  3. width: 54px;
  4. height: 60px;
  5. position: absolute;
  6. box-sizing: border-box;
  7. z-index: 10;
  8. right: 0;
  9. bottom: 18%;
  10. }
  11. .plv-mp-rtc-icon {
  12. width: 100%;
  13. height: 100%;
  14. }
  15. .plv-mp-rtc-modal {
  16. position: fixed;
  17. top: 0;
  18. left: 0;
  19. width: 100%;
  20. height: 100%;
  21. background: rgba(0, 0, 0, 0.8);
  22. display: flex;
  23. justify-content: center;
  24. align-items: center;
  25. z-index: 9999;
  26. }
  27. .plv-mp-rtc-modal__window {
  28. position: absolute;
  29. width: 275px;
  30. height: 250px;
  31. border-radius: 12px;
  32. color: white;
  33. }
  34. .plv-mp-rtc-modal__window > image {
  35. width: 100%;
  36. height: 100%;
  37. }
  38. .plv-mp-rtc-modal__text {
  39. display: inline-block;
  40. position: absolute;
  41. width: 100%;
  42. text-align: center;
  43. color: #18252C;
  44. letter-spacing: 0;
  45. box-sizing: border-box;
  46. padding: 0 16px;
  47. }
  48. .plv-mp-rtc-modal__title {
  49. top: 36px;
  50. left: 0;
  51. font-size: 22px;
  52. }
  53. .plv-mp-rtc-modal__content {
  54. top: 82px;
  55. left: 0;
  56. font-size: 16px;
  57. }
  58. .plv-mp-rtc-button {
  59. color: white;
  60. height: 44px;
  61. line-height: 44px;
  62. border-radius: 8px;
  63. font-size: 16px;
  64. }
  65. .plv-mp-rtc-modal__btns {
  66. display: flex;
  67. position: absolute;
  68. top: 170px;
  69. width: 100%;
  70. }
  71. .plv-mp-rtc-modal__btns--confirm {
  72. margin-right: 16px;
  73. width: 96px;
  74. background-image: linear-gradient(56deg, #FF5C20 0%, #FFAC1A 100%);
  75. }
  76. .plv-mp-rtc-modal__btns--cancel {
  77. width: 135px;
  78. background-image: linear-gradient(90deg, #FF102B 0%, #FF3183 100%);
  79. }