style(components): format CSS styles in Vue components
- Remove extra spaces in CSS property declarations - Consolidate multi-line CSS rules into single lines - Maintain consistent formatting across component styles - Improve readability by removing unnecessary line breaks - Ensure uniform styling structure in scoped CSS blocks
This commit is contained in:
@@ -298,292 +298,58 @@ onUnmounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
:deep(.update-dialog .el-dialog) {
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
:deep(.update-dialog .el-dialog) {border-radius: 16px; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15);}
|
||||
/* 通用标题样式 */
|
||||
:deep(.update-dialog .el-dialog__title) {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
:deep(.update-dialog .el-dialog__title) {font-size: 14px; font-weight: 500; margin-left: 8px;}
|
||||
/* 默认标题样式（第一阶段 - 检查阶段） */
|
||||
:deep(.update-dialog.stage-check .el-dialog__header) {
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
:deep(.update-dialog.stage-check .el-dialog__header) {display: block; text-align: left;}
|
||||
/* 第二阶段 - 下载中，标题居中 */
|
||||
:deep(.update-dialog.stage-downloading .el-dialog__header) {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:deep(.update-dialog.stage-downloading .el-dialog__title) {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
:deep(.update-dialog.stage-downloading .el-dialog__header) {display: block; text-align: center;}
|
||||
:deep(.update-dialog.stage-downloading .el-dialog__title) {margin-left: 20px;}
|
||||
/* 第三阶段 - 下载完成，标题居中 */
|
||||
:deep(.update-dialog.stage-completed .el-dialog__header) {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:deep(.update-dialog.stage-completed .el-dialog__title) {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
:deep(.update-dialog .el-dialog__body) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.update-content {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.update-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 88px 1fr;
|
||||
align-items: start;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.left-pane {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.app-icon-large {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 12px;
|
||||
margin: 4px 0 0 0;
|
||||
}
|
||||
|
||||
.right-pane {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.right-pane .announce {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
margin: 4px 0 6px;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.right-pane .desc {
|
||||
font-size: 13px;
|
||||
color: #6b7280;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.update-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.update-header.text-center {
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.app-icon {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 12px;
|
||||
margin-right: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.update-header.text-center .app-icon {
|
||||
margin-right: 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.update-header h3 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
margin: 16px 0 8px 0;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.update-header p {
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.update-details {
|
||||
border-radius: 8px;
|
||||
padding: 0;
|
||||
margin: 12px 0 8px 0;
|
||||
}
|
||||
|
||||
.update-details.form {
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.notes-box :deep(textarea.el-textarea__inner) {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.update-details h4 {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.update-actions.row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.update-buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.update-actions.row .update-buttons {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
:deep(.update-actions.row .update-buttons .el-button) {
|
||||
flex: none;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.left-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.right-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
:deep(.update-buttons .el-button) {
|
||||
flex: 1;
|
||||
height: 32px;
|
||||
font-size: 13px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
||||
.download-header h3 {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.download-main {
|
||||
display: grid;
|
||||
grid-template-columns: 80px 1fr;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.download-icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.download-icon .app-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.download-content {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.download-info {
|
||||
margin-bottom: 12px;
|
||||
|
||||
}
|
||||
|
||||
.download-info p {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #6b7280;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.download-progress {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.progress-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.progress-details {
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.progress-details span {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
:deep(.el-progress-bar__outer) {
|
||||
border-radius: 4px;
|
||||
background-color: #e5e7eb;
|
||||
}
|
||||
|
||||
:deep(.el-progress-bar__inner) {
|
||||
border-radius: 4px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
:deep(.update-buttons .el-button--primary) {
|
||||
background-color: #2563eb;
|
||||
border-color: #2563eb;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
:deep(.update-buttons .el-button--primary:hover) {
|
||||
background-color: #1d4ed8;
|
||||
border-color: #1d4ed8;
|
||||
}
|
||||
|
||||
:deep(.update-buttons .el-button:not(.el-button--primary)) {
|
||||
background-color: #f3f4f6;
|
||||
border-color: #d1d5db;
|
||||
color: #374151;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
:deep(.update-buttons .el-button:not(.el-button--primary):hover) {
|
||||
background-color: #e5e7eb;
|
||||
border-color: #9ca3af;
|
||||
}
|
||||
:deep(.update-dialog.stage-completed .el-dialog__header) {display: block; text-align: center;}
|
||||
:deep(.update-dialog.stage-completed .el-dialog__title) {margin-left: 20px;}
|
||||
:deep(.update-dialog .el-dialog__body) {padding: 0;}
|
||||
.update-content {text-align: left;}
|
||||
.update-layout {display: grid; grid-template-columns: 88px 1fr; align-items: start; margin-bottom: 5px;}
|
||||
.left-pane {display: flex; flex-direction: column; align-items: flex-start;}
|
||||
.app-icon-large {width: 70px; height: 70px; border-radius: 12px; margin: 4px 0 0 0;}
|
||||
.right-pane {min-width: 0;}
|
||||
.right-pane .announce {font-size: 16px; font-weight: 600; color: #1f2937; margin: 4px 0 6px; word-break: break-word;}
|
||||
.right-pane .desc {font-size: 13px; color: #6b7280; line-height: 1.6; margin: 0; word-break: break-word;}
|
||||
.update-header {display: flex; align-items: flex-start; margin-bottom: 24px;}
|
||||
.update-header.text-center {text-align: center; flex-direction: column; align-items: center;}
|
||||
.app-icon {width: 70px; height: 70px; border-radius: 12px; margin-right: 16px; flex-shrink: 0;}
|
||||
.update-header.text-center .app-icon {margin-right: 0; margin-bottom: 16px;}
|
||||
.update-header h3 {font-size: 20px; font-weight: 600; margin: 16px 0 8px 0; color: #1f2937;}
|
||||
.update-header p {font-size: 14px; color: #6b7280; margin: 0; line-height: 1.5;}
|
||||
.update-details {border-radius: 8px; padding: 0; margin: 12px 0 8px 0;}
|
||||
.update-details.form {max-height: none;}
|
||||
.notes-box :deep(textarea.el-textarea__inner) {white-space: pre-wrap;}
|
||||
.update-details h4 {font-size: 14px; font-weight: 600; color: #374151; margin: 0 0 8px 0;}
|
||||
.update-actions.row {display: flex; flex-direction: column; align-items: stretch; gap: 12px;}
|
||||
.update-buttons {display: flex; justify-content: space-between; gap: 12px;}
|
||||
.update-actions.row .update-buttons {justify-content: space-between;}
|
||||
:deep(.update-actions.row .update-buttons .el-button) {flex: none; min-width: 100px;}
|
||||
.left-actions {display: flex; gap: 12px;}
|
||||
.right-actions {display: flex; gap: 8px;}
|
||||
:deep(.update-buttons .el-button) {flex: 1; height: 32px; font-size: 13px; border-radius: 8px;}
|
||||
.download-header h3 {font-size: 14px; font-weight: 500; margin: 0; color: #1f2937;}
|
||||
.download-main {display: grid; grid-template-columns: 80px 1fr; align-items: start;}
|
||||
.download-icon {display: flex; justify-content: center;}
|
||||
.download-icon .app-icon {width: 64px; height: 64px; border-radius: 12px;}
|
||||
.download-content {min-width: 0;}
|
||||
.download-info {margin-bottom: 12px;}
|
||||
.download-info p {font-size: 14px; font-weight: 600; color: #6b7280; margin: 0;}
|
||||
.download-progress {margin: 0;}
|
||||
.progress-info {display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 14px; color: #6b7280;}
|
||||
.progress-details {margin-top: 12px; display: flex; justify-content: space-between; align-items: center;}
|
||||
.progress-details span {font-size: 12px; color: #909399;}
|
||||
.action-buttons {display: flex; gap: 8px;}
|
||||
:deep(.el-progress-bar__outer) {border-radius: 4px; background-color: #e5e7eb;}
|
||||
:deep(.el-progress-bar__inner) {border-radius: 4px; transition: width 0.3s ease;}
|
||||
:deep(.update-buttons .el-button--primary) {background-color: #2563eb; border-color: #2563eb; font-weight: 500;}
|
||||
:deep(.update-buttons .el-button--primary:hover) {background-color: #1d4ed8; border-color: #1d4ed8;}
|
||||
:deep(.update-buttons .el-button:not(.el-button--primary)) {background-color: #f3f4f6; border-color: #d1d5db; color: #374151; font-weight: 500;}
|
||||
:deep(.update-buttons .el-button:not(.el-button--primary):hover) {background-color: #e5e7eb; border-color: #9ca3af;}
|
||||
</style>
|
||||
Reference in New Issue
Block a user