face-photo.wxss 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. .photo-container {
  2. display: flex;
  3. flex-direction: column;
  4. min-height: 100vh;
  5. background-color: #f5f7fa;
  6. padding: 30rpx;
  7. }
  8. .photo-header {
  9. display: flex;
  10. flex-direction: column;
  11. align-items: center;
  12. margin-bottom: 40rpx;
  13. }
  14. .photo-title {
  15. font-size: 36rpx;
  16. font-weight: bold;
  17. color: #333;
  18. margin-bottom: 10rpx;
  19. }
  20. .photo-subtitle {
  21. font-size: 28rpx;
  22. color: #666;
  23. }
  24. .photo-preview {
  25. position: relative;
  26. width: 100%;
  27. height: 800rpx;
  28. background-color: #000;
  29. border-radius: 20rpx;
  30. overflow: hidden;
  31. margin-bottom: 40rpx;
  32. display: flex;
  33. justify-content: center;
  34. align-items: center;
  35. }
  36. .preview-image {
  37. width: 100%;
  38. height: 100%;
  39. object-fit: cover;
  40. }
  41. .face-outline {
  42. position: absolute;
  43. top: 50%;
  44. left: 50%;
  45. transform: translate(-50%, -50%);
  46. width: 400rpx;
  47. height: 500rpx;
  48. border: 4rpx dashed #fff;
  49. border-radius: 200rpx;
  50. pointer-events: none;
  51. }
  52. .camera {
  53. width: 100%;
  54. height: 100%;
  55. }
  56. .capture-btn {
  57. width: 100%;
  58. height: 90rpx;
  59. line-height: 90rpx;
  60. background-color: #6c5ce7;
  61. color: #fff;
  62. border-radius: 45rpx;
  63. font-size: 32rpx;
  64. margin-top: 60rpx;
  65. }
  66. .btn-group {
  67. display: flex;
  68. justify-content: space-between;
  69. width: 100%;
  70. margin-top: 60rpx;
  71. }
  72. .retry-btn {
  73. width: 45%;
  74. height: 90rpx;
  75. line-height: 90rpx;
  76. background-color: #fff;
  77. color: #6c5ce7;
  78. border: 1px solid #6c5ce7;
  79. border-radius: 45rpx;
  80. font-size: 32rpx;
  81. }
  82. .start-btn {
  83. width: 45%;
  84. height: 90rpx;
  85. line-height: 90rpx;
  86. background-color: #6c5ce7;
  87. color: #fff;
  88. border-radius: 45rpx;
  89. font-size: 32rpx;
  90. }