profile.wxss 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. .form-list.data-v-dd383ca2 {
  2. margin-top: 10rpx;
  3. }
  4. .form-item.data-v-dd383ca2 {
  5. margin-bottom: 30rpx;
  6. }
  7. .form-item .label.data-v-dd383ca2 {
  8. display: block;
  9. font-size: 28rpx;
  10. font-weight: 500;
  11. color: #333333;
  12. margin-bottom: 20rpx;
  13. }
  14. .form-item .input-box.data-v-dd383ca2 {
  15. border-bottom: 1rpx solid #E5E5E5;
  16. padding-bottom: 12rpx;
  17. transition: border-color 0.3s;
  18. }
  19. .form-item .input-box.data-v-dd383ca2:focus-within {
  20. border-bottom-color: #1F6CFF;
  21. }
  22. .form-item .input-box input.data-v-dd383ca2 {
  23. font-size: 32rpx;
  24. color: #1A1A1A;
  25. font-weight: 500;
  26. height: 44rpx;
  27. line-height: 44rpx;
  28. }
  29. .form-item .gender-switch.data-v-dd383ca2 {
  30. display: flex;
  31. position: relative;
  32. background-color: #F6F8FA;
  33. border-radius: 16rpx;
  34. padding: 6rpx;
  35. height: 76rpx;
  36. box-sizing: border-box;
  37. }
  38. .form-item .gender-switch .g-slider.data-v-dd383ca2 {
  39. position: absolute;
  40. top: 6rpx;
  41. bottom: 6rpx;
  42. width: calc(50% - 6rpx);
  43. background-color: #EBF3FF;
  44. border-radius: 12rpx;
  45. box-shadow: 0 4rpx 10rpx rgba(31, 108, 255, 0.1);
  46. border: 2rpx solid rgba(31, 108, 255, 0.15);
  47. box-sizing: border-box;
  48. transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  49. z-index: 1;
  50. }
  51. .form-item .gender-switch .g-slider.left.data-v-dd383ca2 {
  52. transform: translateX(0);
  53. }
  54. .form-item .gender-switch .g-slider.right.data-v-dd383ca2 {
  55. transform: translateX(100%);
  56. }
  57. .form-item .gender-switch .g-slider.none.data-v-dd383ca2 {
  58. opacity: 0;
  59. }
  60. .form-item .gender-switch .g-item.data-v-dd383ca2 {
  61. flex: 1;
  62. position: relative;
  63. z-index: 2;
  64. line-height: 64rpx;
  65. text-align: center;
  66. color: #888888;
  67. font-size: 28rpx;
  68. transition: all 0.3s;
  69. }
  70. .form-item .gender-switch .g-item.active.data-v-dd383ca2 {
  71. color: #1F6CFF;
  72. font-weight: 600;
  73. }
  74. .avatar-item.data-v-dd383ca2 {
  75. display: flex;
  76. justify-content: space-between;
  77. align-items: center;
  78. border-bottom: 1rpx solid #E5E5E5;
  79. padding-bottom: 30rpx;
  80. margin-bottom: 30rpx;
  81. }
  82. .avatar-item .label.data-v-dd383ca2 {
  83. margin-bottom: 0;
  84. font-size: 30rpx;
  85. font-weight: 600;
  86. color: #1A1A1A;
  87. }
  88. .avatar-item .right-content.data-v-dd383ca2 {
  89. display: flex;
  90. align-items: center;
  91. }
  92. .avatar-item .right-content .hint-text.data-v-dd383ca2 {
  93. font-size: 24rpx;
  94. color: #FFA500;
  95. margin-right: 20rpx;
  96. }
  97. .avatar-item .right-content .avatar-img.data-v-dd383ca2 {
  98. width: 88rpx;
  99. height: 88rpx;
  100. border-radius: 50%;
  101. background-color: #F8F9FA;
  102. border: 2rpx solid #F0F2F5;
  103. }
  104. .avatar-item .right-content .arrow.data-v-dd383ca2 {
  105. margin-left: 16rpx;
  106. width: 14rpx;
  107. height: 14rpx;
  108. border-right: 3rpx solid #CCCCCC;
  109. border-top: 3rpx solid #CCCCCC;
  110. transform: rotate(45deg);
  111. }
  112. .ph-style.data-v-dd383ca2 {
  113. color: #CCCCCC;
  114. font-size: 30rpx;
  115. font-weight: normal;
  116. }