diff --git a/src/components/SoftwareCard.vue b/src/components/SoftwareCard.vue
index 1adcf45..4ceccaf 100644
--- a/src/components/SoftwareCard.vue
+++ b/src/components/SoftwareCard.vue
@@ -27,7 +27,7 @@
@@ -35,7 +35,7 @@
@@ -206,31 +206,33 @@ const placeholderColor = computed(() => {
justify-content: flex-end;
}
-.install-btn {
- padding: 8px 24px;
- background-color: var(--bg-light);
+.action-btn {
+ width: 90px; /* 固定宽度,确保对齐 */
+ height: 34px; /* 固定高度 */
+ display: flex;
+ align-items: center;
+ justify-content: center;
border: none;
- border-radius: 20px;
- color: var(--primary-color);
+ border-radius: 17px;
font-weight: 600;
- font-size: 14px;
+ font-size: 13px;
cursor: pointer;
transition: all 0.2s ease;
}
+.install-btn {
+ background-color: rgba(0, 122, 255, 0.05);
+ color: var(--primary-color);
+}
+
.install-btn:hover {
background-color: var(--primary-color);
color: white;
}
.installed-btn {
- padding: 8px 24px;
- background-color: #E5E5E7;
- border: none;
- border-radius: 20px;
- color: #86868B;
- font-weight: 600;
- font-size: 14px;
+ background-color: #F2F2F7; /* 更浅的灰色 */
+ color: #AEAEB2; /* 更淡的文字颜色 */
cursor: not-allowed;
}
@@ -238,11 +240,13 @@ const placeholderColor = computed(() => {
display: flex;
align-items: center;
gap: 10px;
+ width: 90px;
+ justify-content: center;
}
.progress-ring {
- width: 20px;
- height: 20px;
+ width: 18px;
+ height: 18px;
}
.progress-ring svg {
@@ -260,20 +264,24 @@ const placeholderColor = computed(() => {
}
.status-text {
- font-size: 13px;
+ font-size: 12px;
font-weight: 500;
color: var(--primary-color);
+ display: none; /* 在固定宽度下隐藏文字,保持简洁 */
+}
+
+.status-success, .status-error {
+ width: 90px;
+ text-align: center;
+ font-weight: 600;
+ font-size: 13px;
}
.status-success {
color: #34C759;
- font-weight: 600;
- font-size: 14px;
}
.status-error {
color: #FF3B30;
- font-weight: 600;
- font-size: 14px;
}