style(样式): 调整车辆状态标签的样式和布局
统一车辆状态标签的圆角大小和字体尺寸 将渐变背景改为半透明边框样式 调整操作按钮的间距和布局
Showing
2 changed files
with
27 additions
and
15 deletions
| ... | @@ -54,24 +54,34 @@ | ... | @@ -54,24 +54,34 @@ |
| 54 | align-items: center; | 54 | align-items: center; |
| 55 | gap: 8rpx; | 55 | gap: 8rpx; |
| 56 | padding: 8rpx 16rpx; | 56 | padding: 8rpx 16rpx; |
| 57 | - border-radius: 24rpx; | 57 | + border-radius: 10rpx; |
| 58 | - font-size: 22rpx; | 58 | + font-size: 19rpx; |
| 59 | - color: white; | 59 | + background: white; |
| 60 | + border: 2rpx solid; | ||
| 60 | 61 | ||
| 61 | &.verified { | 62 | &.verified { |
| 62 | - background: linear-gradient(135deg, #10b981, #059669); | 63 | + color: #10b981; |
| 64 | + border-color: rgba(16, 185, 129, 0.5); | ||
| 63 | } | 65 | } |
| 64 | 66 | ||
| 65 | &.unverified { | 67 | &.unverified { |
| 66 | - background: linear-gradient(135deg, #6b7280, #4b5563); | 68 | + color: #6b7280; |
| 69 | + border-color: rgba(107, 114, 128, 0.5); | ||
| 67 | } | 70 | } |
| 68 | 71 | ||
| 69 | &.review { | 72 | &.review { |
| 70 | - background: linear-gradient(135deg, #f59e0b, #d97706); | 73 | + color: #f59e0b; |
| 74 | + border-color: rgba(245, 158, 11, 0.5); | ||
| 71 | } | 75 | } |
| 72 | 76 | ||
| 73 | &.failed { | 77 | &.failed { |
| 74 | - background: linear-gradient(135deg, #ef4444, #dc2626); | 78 | + color: #ef4444; |
| 79 | + border-color: rgba(239, 68, 68, 0.5); | ||
| 80 | + } | ||
| 81 | + | ||
| 82 | + &.offline { | ||
| 83 | + color: #ef4444; | ||
| 84 | + border-color: rgba(239, 68, 68, 0.5); | ||
| 75 | } | 85 | } |
| 76 | } | 86 | } |
| 77 | 87 | ||
| ... | @@ -94,5 +104,7 @@ | ... | @@ -94,5 +104,7 @@ |
| 94 | } | 104 | } |
| 95 | 105 | ||
| 96 | .action-buttons { | 106 | .action-buttons { |
| 97 | - gap: 30rpx; | 107 | + display: flex; |
| 108 | + gap: 24rpx; | ||
| 109 | + // justify-content: flex-end; | ||
| 98 | } | 110 | } | ... | ... |
| ... | @@ -72,34 +72,34 @@ | ... | @@ -72,34 +72,34 @@ |
| 72 | align-items: center; | 72 | align-items: center; |
| 73 | gap: 8rpx; | 73 | gap: 8rpx; |
| 74 | padding: 8rpx 16rpx; | 74 | padding: 8rpx 16rpx; |
| 75 | - border-radius: 24rpx; | 75 | + border-radius: 10rpx; |
| 76 | - font-size: 22rpx; | 76 | + font-size: 19rpx; |
| 77 | background: white; | 77 | background: white; |
| 78 | border: 2rpx solid; | 78 | border: 2rpx solid; |
| 79 | 79 | ||
| 80 | &.verified { | 80 | &.verified { |
| 81 | color: #10b981; | 81 | color: #10b981; |
| 82 | - border-color: #10b981; | 82 | + border-color: rgba(16, 185, 129, 0.5); |
| 83 | } | 83 | } |
| 84 | 84 | ||
| 85 | &.unverified { | 85 | &.unverified { |
| 86 | color: #6b7280; | 86 | color: #6b7280; |
| 87 | - border-color: #6b7280; | 87 | + border-color: rgba(107, 114, 128, 0.5); |
| 88 | } | 88 | } |
| 89 | 89 | ||
| 90 | &.review { | 90 | &.review { |
| 91 | color: #f59e0b; | 91 | color: #f59e0b; |
| 92 | - border-color: #f59e0b; | 92 | + border-color: rgba(245, 158, 11, 0.5); |
| 93 | } | 93 | } |
| 94 | 94 | ||
| 95 | &.failed { | 95 | &.failed { |
| 96 | color: #ef4444; | 96 | color: #ef4444; |
| 97 | - border-color: #ef4444; | 97 | + border-color: rgba(239, 68, 68, 0.5); |
| 98 | } | 98 | } |
| 99 | 99 | ||
| 100 | &.offline { | 100 | &.offline { |
| 101 | color: #ef4444; | 101 | color: #ef4444; |
| 102 | - border-color: #ef4444; | 102 | + border-color: rgba(239, 68, 68, 0.5); |
| 103 | } | 103 | } |
| 104 | } | 104 | } |
| 105 | 105 | ... | ... |
-
Please register or login to post a comment