face-photo.wxss 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. .photo-container {
  2. display: flex;
  3. flex-direction: column;
  4. min-height: 100vh;
  5. background-color: #f5f7fa;
  6. padding: 30rpx;
  7. opacity: 0; /* 初始设置为不可见 */
  8. transition: opacity 0.3s ease; /* 添加过渡效果 */
  9. }
  10. .photo-container.loaded {
  11. opacity: 1; /* 加载完成后显示 */
  12. }
  13. .photo-header {
  14. display: flex;
  15. flex-direction: column;
  16. align-items: center;
  17. margin-bottom: 80rpx;
  18. }
  19. .photo-title {
  20. font-size: 36rpx;
  21. font-weight: bold;
  22. color: #333;
  23. margin-bottom: 10rpx;
  24. }
  25. .photo-subtitle {
  26. font-size: 28rpx;
  27. color: #666;
  28. }
  29. /* 模式选择器样式 */
  30. .mode-selector {
  31. display: flex;
  32. justify-content: center;
  33. margin-bottom: 30rpx;
  34. background-color: #eaeaea;
  35. border-radius: 40rpx;
  36. padding: 6rpx;
  37. width: 80%;
  38. align-self: center;
  39. }
  40. .mode-option {
  41. flex: 1;
  42. text-align: center;
  43. padding: 16rpx 0;
  44. font-size: 28rpx;
  45. color: #666;
  46. border-radius: 36rpx;
  47. transition: all 0.3s;
  48. }
  49. .mode-option.active {
  50. background-color: #0039b3;
  51. color: #fff;
  52. }
  53. .photo-preview {
  54. position: relative;
  55. width: 100%;
  56. height: 900rpx;
  57. background-color: #000;
  58. border-radius: 20rpx;
  59. overflow: hidden;
  60. margin-bottom: 40rpx;
  61. display: flex;
  62. justify-content: center;
  63. align-items: center;
  64. }
  65. .preview-image, .preview-video {
  66. width: 100%;
  67. height: 100%;
  68. object-fit: cover;
  69. }
  70. .face-outline {
  71. position: absolute;
  72. top: 50%;
  73. left: 50%;
  74. transform: translate(-50%, -50%);
  75. width: 500rpx;
  76. height: 600rpx;
  77. border: 4rpx dashed #fff;
  78. border-radius: 200rpx;
  79. pointer-events: none;
  80. }
  81. .camera {
  82. width: 100%;
  83. height: 100%;
  84. }
  85. /* 录制指示器 */
  86. .recording-indicator {
  87. position: absolute;
  88. top: 30rpx;
  89. right: 30rpx;
  90. display: flex;
  91. align-items: center;
  92. background-color: rgba(0, 0, 0, 0.5);
  93. padding: 10rpx 20rpx;
  94. border-radius: 30rpx;
  95. }
  96. .recording-dot {
  97. width: 20rpx;
  98. height: 20rpx;
  99. background-color: #ff0000;
  100. border-radius: 50%;
  101. margin-right: 10rpx;
  102. animation: blink 1s infinite;
  103. }
  104. .recording-time {
  105. color: #fff;
  106. font-size: 28rpx;
  107. }
  108. @keyframes blink {
  109. 0% { opacity: 1;
  110. }
  111. 50% { opacity: 0.3;
  112. }
  113. 100% { opacity: 1;
  114. }
  115. }
  116. .capture-btn-container {
  117. width: 100%;
  118. display: flex;
  119. justify-content: center;
  120. margin-top: 60rpx;
  121. }
  122. .capture-btn {
  123. width: 100%;
  124. height: 90rpx;
  125. line-height: 90rpx;
  126. background-color: #0039b3;
  127. color: #fff;
  128. border-radius: 45rpx;
  129. font-size: 32rpx;
  130. }
  131. .stop-btn {
  132. width: 100%;
  133. height: 90rpx;
  134. line-height: 90rpx;
  135. background-color: #e74c3c;
  136. color: #fff;
  137. border-radius: 45rpx;
  138. font-size: 32rpx;
  139. }
  140. .btn-group {
  141. display: flex;
  142. justify-content: space-between;
  143. width: 100%;
  144. margin-top: 60rpx;
  145. }
  146. .retry-btn {
  147. width: 45%;
  148. height: 90rpx;
  149. line-height: 90rpx;
  150. background-color: #fff;
  151. color: #0039b3;
  152. border: 1px solid #0039b3;
  153. border-radius: 45rpx;
  154. font-size: 32rpx;
  155. }
  156. .start-btn {
  157. width: 45%;
  158. height: 90rpx;
  159. line-height: 90rpx;
  160. background-color: #0039b3;
  161. color: #fff;
  162. border-radius: 45rpx;
  163. font-size: 32rpx;
  164. }
  165. /* 添加手部轮廓样式 */
  166. .face-outline.hand-outline {
  167. width: 500rpx;
  168. height: 300rpx;
  169. border-radius: 30rpx;
  170. }