voice-check-modal.wxss 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. .modal.data-v-ce199c44 {
  2. position: fixed;
  3. top: 0;
  4. left: 0;
  5. right: 0;
  6. bottom: 0;
  7. background: rgba(0, 0, 0, 0.6);
  8. display: flex;
  9. align-items: center;
  10. justify-content: center;
  11. z-index: 999;
  12. }
  13. .modal-content.data-v-ce199c44 {
  14. width: 80%;
  15. background: #fff;
  16. border-radius: 20rpx;
  17. padding: 40rpx;
  18. text-align: center;
  19. box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
  20. }
  21. .modal-title.data-v-ce199c44 {
  22. font-size: 36rpx;
  23. font-weight: bold;
  24. margin-bottom: 20rpx;
  25. color: #0039b3;
  26. }
  27. .modal-text.data-v-ce199c44 {
  28. font-size: 30rpx;
  29. color: #666;
  30. margin-bottom: 30rpx;
  31. }
  32. .wave-container.data-v-ce199c44 {
  33. height: 200rpx;
  34. display: flex;
  35. align-items: center;
  36. justify-content: center;
  37. gap: 4rpx; /* 减小波形条之间的间距 */
  38. margin: 30rpx 0;
  39. background: #f8f9fa;
  40. border-radius: 15rpx;
  41. position: relative;
  42. overflow: hidden;
  43. border: 1rpx solid #eee;
  44. }
  45. .wave-bar.data-v-ce199c44 {
  46. width: 6rpx; /* 减小波形条的宽度 */
  47. background: linear-gradient(to top, #1a73e8, #0039b3);
  48. border-radius: 3rpx;
  49. transition: height 0.1s ease-out; /* 加快过渡动画速度 */
  50. }
  51. .timer.data-v-ce199c44 {
  52. position: absolute;
  53. top: 15rpx;
  54. right: 15rpx;
  55. background: rgba(0, 57, 179, 0.1);
  56. color: #0039b3;
  57. padding: 5rpx 15rpx;
  58. border-radius: 20rpx;
  59. font-size: 26rpx;
  60. font-weight: 500;
  61. }
  62. .read-text.data-v-ce199c44 {
  63. background: #f8f9fa;
  64. padding: 30rpx;
  65. border-radius: 15rpx;
  66. font-size: 32rpx;
  67. margin: 30rpx 0;
  68. color: #333;
  69. line-height: 1.6;
  70. border: 1rpx solid #eee;
  71. }
  72. .confirm-btn.data-v-ce199c44 {
  73. width: 80%;
  74. height: 80rpx;
  75. line-height: 80rpx;
  76. background: linear-gradient(90deg, #0039b3, #1a73e8);
  77. color: #fff;
  78. border-radius: 40rpx;
  79. margin-top: 30rpx;
  80. font-size: 32rpx;
  81. font-weight: 500;
  82. box-shadow: 0 5rpx 15rpx rgba(0, 57, 179, 0.3);
  83. }
  84. .status-message.data-v-ce199c44 {
  85. font-size: 28rpx;
  86. color: #666;
  87. margin-top: 30rpx;
  88. height: 40rpx;
  89. display: flex;
  90. align-items: center;
  91. justify-content: center;
  92. }
  93. /* 添加状态消息的动画效果 */
  94. @keyframes blink-ce199c44 {
  95. 0% { opacity: 1;
  96. }
  97. 50% { opacity: 0.5;
  98. }
  99. 100% { opacity: 1;
  100. }
  101. }
  102. .status-message.warning.data-v-ce199c44 {
  103. color: #ff9800;
  104. animation: blink-ce199c44 1.5s infinite;
  105. }