face-photo.wxss 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  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: 40rpx;
  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. .photo-preview {
  30. position: relative;
  31. width: 100%;
  32. height: 800rpx;
  33. background-color: #000;
  34. border-radius: 20rpx;
  35. overflow: hidden;
  36. margin-bottom: 40rpx;
  37. display: flex;
  38. justify-content: center;
  39. align-items: center;
  40. }
  41. .preview-image {
  42. width: 100%;
  43. height: 100%;
  44. object-fit: cover;
  45. }
  46. .face-outline {
  47. position: absolute;
  48. top: 50%;
  49. left: 50%;
  50. transform: translate(-50%, -50%);
  51. width: 400rpx;
  52. height: 500rpx;
  53. border: 4rpx dashed #fff;
  54. border-radius: 200rpx;
  55. pointer-events: none;
  56. }
  57. .camera {
  58. width: 100%;
  59. height: 100%;
  60. }
  61. .capture-btn {
  62. width: 100%;
  63. height: 90rpx;
  64. line-height: 90rpx;
  65. background-color: #6c5ce7;
  66. color: #fff;
  67. border-radius: 45rpx;
  68. font-size: 32rpx;
  69. margin-top: 60rpx;
  70. }
  71. .btn-group {
  72. display: flex;
  73. justify-content: space-between;
  74. width: 100%;
  75. margin-top: 60rpx;
  76. }
  77. .retry-btn {
  78. width: 45%;
  79. height: 90rpx;
  80. line-height: 90rpx;
  81. background-color: #fff;
  82. color: #6c5ce7;
  83. border: 1px solid #6c5ce7;
  84. border-radius: 45rpx;
  85. font-size: 32rpx;
  86. }
  87. .start-btn {
  88. width: 45%;
  89. height: 90rpx;
  90. line-height: 90rpx;
  91. background-color: #6c5ce7;
  92. color: #fff;
  93. border-radius: 45rpx;
  94. font-size: 32rpx;
  95. }