interview_retake.wxss 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. .interview-container {
  2. height: 100vh;
  3. display: flex;
  4. flex-direction: column;
  5. }
  6. .header {
  7. padding: 40rpx;
  8. text-align: center;
  9. }
  10. .title {
  11. font-size: 36rpx;
  12. font-weight: bold;
  13. }
  14. .subtitle {
  15. font-size: 28rpx;
  16. color: #666;
  17. margin-top: 20rpx;
  18. }
  19. .camera-container {
  20. position: fixed;
  21. top: 0;
  22. left: 0;
  23. width: 100%;
  24. height: 100%;
  25. background-color: #000;
  26. z-index: 999;
  27. }
  28. .camera {
  29. width: 100%;
  30. height: 100%;
  31. }
  32. .gesture-overlay {
  33. position: absolute;
  34. top: 0;
  35. left: 0;
  36. width: 100%;
  37. height: 100%;
  38. display: flex;
  39. flex-direction: column;
  40. justify-content: center;
  41. align-items: center;
  42. pointer-events: none;
  43. z-index: 10;
  44. }
  45. .gesture-image {
  46. position: absolute;
  47. top: 0;
  48. left: 0;
  49. width: 100%;
  50. height: 90%;
  51. opacity: 0.5;
  52. /* 设置图片混合模式,使绿色更突出 */
  53. mix-blend-mode: screen;
  54. }
  55. .camera-tip {
  56. position: absolute;
  57. top: 20rpx;
  58. display: flex;
  59. flex-direction: column;
  60. align-items: center;
  61. z-index: 11;
  62. }
  63. .guide-icon {
  64. width:160rpx;
  65. height: 200rpx;
  66. background-color: rgba(0, 0, 0, 0.3);
  67. border-radius: 20rpx;
  68. overflow: hidden;
  69. }
  70. .mp-video-player {
  71. width: 100%;
  72. height: 100%;
  73. object-fit: cover;
  74. }
  75. .tip-text {
  76. position: absolute;
  77. top:20rpx;
  78. left: 30%;
  79. color: #fff;
  80. font-size: 28rpx;
  81. margin-top: 16rpx;
  82. background-color: rgba(0, 0, 0, 0.3);
  83. padding: 8rpx 20rpx;
  84. border-radius: 30rpx;
  85. }
  86. .capture-btn {
  87. position: absolute;
  88. bottom: 100rpx;
  89. left: 50%;
  90. transform: translateX(-50%);
  91. width: 140rpx;
  92. height: 140rpx;
  93. border-radius: 50%;
  94. background: #fff;
  95. border: 10rpx solid #0039b3;
  96. z-index: 999;
  97. }
  98. .preview-container {
  99. flex: 1;
  100. display: flex;
  101. flex-direction: column;
  102. }
  103. .preview-container image {
  104. flex: 1;
  105. width: 100%;
  106. }
  107. .preview-buttons {
  108. display: flex;
  109. padding: 20rpx;
  110. justify-content: space-around;
  111. }
  112. .btn-retake, .btn-confirm {
  113. width: 45%;
  114. height: 80rpx;
  115. line-height: 80rpx;
  116. text-align: center;
  117. border-radius: 8rpx;
  118. }
  119. .btn-retake {
  120. background: #f5f5f5;
  121. color: #333;
  122. }
  123. .btn-confirm {
  124. background: #003399;
  125. color: #fff;
  126. }
  127. .progress-bar {
  128. display: flex;
  129. padding: 20rpx;
  130. background: #fff;
  131. }
  132. .step-item {
  133. flex: 1;
  134. text-align: center;
  135. font-size: 24rpx;
  136. color: #999;
  137. position: relative;
  138. padding: 20rpx 0;
  139. }
  140. .step-item.active {
  141. color: #003399;
  142. font-weight: bold;
  143. }
  144. .step-item.completed {
  145. color: #67c23a;
  146. }
  147. .video-loading, .video-error {
  148. position: absolute;
  149. top: 0;
  150. left: 0;
  151. width: 100%;
  152. height: 100%;
  153. display: flex;
  154. justify-content: center;
  155. align-items: center;
  156. background: rgba(0, 0, 0, 0.5);
  157. }
  158. .video-loading text, .video-error text {
  159. color: #fff;
  160. font-size: 24rpx;
  161. }
  162. .video-error text {
  163. color: #ff4d4f;
  164. }