qualifications.css 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. /* 页面背景 */
  2. page {
  3. background-color: #F8F8F8;
  4. padding-bottom: 200rpx;
  5. /* 底部留白 */
  6. font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
  7. }
  8. .qual-container {
  9. padding: 20rpx;
  10. }
  11. /* 顶部提示 */
  12. .top-tip {
  13. font-size: 24rpx;
  14. color: #666;
  15. margin-bottom: 20rpx;
  16. padding: 0 10rpx;
  17. line-height: 1.5;
  18. }
  19. /* 空状态 */
  20. .empty-state {
  21. display: flex;
  22. flex-direction: column;
  23. align-items: center;
  24. padding-top: 100rpx;
  25. padding-bottom: 60rpx;
  26. }
  27. .empty-tip {
  28. font-size: 30rpx;
  29. color: #999;
  30. margin-bottom: 40rpx;
  31. }
  32. .back-btn {
  33. width: 300rpx;
  34. height: 80rpx;
  35. line-height: 80rpx;
  36. border: 2rpx solid #FF5722;
  37. color: #FF5722;
  38. background-color: #fff;
  39. border-radius: 40rpx;
  40. font-size: 30rpx;
  41. }
  42. /* 资质卡片 */
  43. .qual-card {
  44. background-color: #fff;
  45. border-radius: 20rpx;
  46. padding: 30rpx;
  47. margin-bottom: 20rpx;
  48. }
  49. .card-title {
  50. font-size: 28rpx;
  51. /* 14号字体 */
  52. font-weight: bold;
  53. color: #333;
  54. margin-bottom: 30rpx;
  55. }
  56. /* 上传容器 */
  57. .upload-wrapper {
  58. display: flex;
  59. flex-wrap: wrap;
  60. }
  61. .img-item {
  62. width: 200rpx;
  63. height: 200rpx;
  64. position: relative;
  65. margin-right: 20rpx;
  66. margin-bottom: 20rpx;
  67. }
  68. .upload-box {
  69. width: 200rpx;
  70. height: 200rpx;
  71. background-color: #F8F8F8;
  72. /* 虚线框背景 */
  73. border: 2rpx dashed #eee;
  74. border-radius: 12rpx;
  75. display: flex;
  76. flex-direction: column;
  77. align-items: center;
  78. justify-content: center;
  79. margin-bottom: 20rpx;
  80. }
  81. .plus-icon {
  82. font-size: 60rpx;
  83. color: #ccc;
  84. font-weight: 300;
  85. margin-bottom: 10rpx;
  86. }
  87. .upload-text {
  88. font-size: 24rpx;
  89. color: #999;
  90. }
  91. /* 图片预览 */
  92. .preview-img {
  93. width: 100%;
  94. height: 100%;
  95. border-radius: 12rpx;
  96. }
  97. /* 删除按钮 */
  98. .delete-btn {
  99. position: absolute;
  100. top: -10rpx;
  101. right: -10rpx;
  102. width: 36rpx;
  103. height: 36rpx;
  104. background-color: #FF5722;
  105. border-radius: 50%;
  106. color: #fff;
  107. font-size: 24rpx;
  108. display: flex;
  109. align-items: center;
  110. justify-content: center;
  111. z-index: 10;
  112. border: 2rpx solid #fff;
  113. }
  114. /* 底部操作区 */
  115. .footer-actions {
  116. margin-top: 60rpx;
  117. padding: 0 20rpx;
  118. }
  119. .submit-btn {
  120. background: linear-gradient(90deg, #FF6F00 0%, #FF5722 100%);
  121. color: #fff;
  122. font-size: 28rpx;
  123. /* 14号字体 */
  124. font-weight: bold;
  125. height: 90rpx;
  126. line-height: 90rpx;
  127. border-radius: 45rpx;
  128. box-shadow: 0 10rpx 20rpx rgba(255, 87, 34, 0.2);
  129. }
  130. .submit-btn::after {
  131. border: none;
  132. }