diff --git a/src/layout/components/AboutDialog.vue b/src/layout/components/AboutDialog.vue index c5da819..8db00ed 100644 --- a/src/layout/components/AboutDialog.vue +++ b/src/layout/components/AboutDialog.vue @@ -1,53 +1,138 @@ @@ -89,12 +317,11 @@ export default { } .logo-section { - margin-bottom: 20px; + margin-bottom: 16px; .logo-circle { width: 80px; height: 80px; - // border-radius: 50%; background: linear-gradient(135deg, #00c4b6, #00897b); display: flex; align-items: center; @@ -110,6 +337,41 @@ export default { } } +.version-info { + background: #f8f9fa; + border-radius: 8px; + padding: 16px; + margin-bottom: 16px; + text-align: left; + + .info-row { + display: flex; + justify-content: space-between; + align-items: center; + padding: 8px 0; + border-bottom: 1px dashed #e9ecef; + + &:last-child { + border-bottom: none; + } + + .label { + color: #666; + font-size: 14px; + } + + .value { + color: #333; + font-weight: 500; + font-size: 14px; + + &.new-version { + color: #67c23a; + } + } + } +} + .copyright { color: #666; font-size: 14px; @@ -137,4 +399,110 @@ export default { margin: 0 4px; } } + +// 升级确认弹窗样式 +.upgrade-confirm-content { + padding: 20px; + text-align: center; + + .icon-wrapper { + width: 60px; + height: 60px; + border-radius: 50%; + background: linear-gradient(135deg, #67c23a, #85ce61); + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 16px; + color: #fff; + font-size: 28px; + } + + h3 { + color: #333; + margin-bottom: 8px; + } + + .current-version { + color: #999; + font-size: 14px; + margin-bottom: 16px; + } + + .release-notes { + background: #f8f9fa; + border-radius: 8px; + padding: 16px; + margin-bottom: 16px; + text-align: left; + + h4 { + color: #333; + font-size: 14px; + margin-bottom: 12px; + } + + ul { + margin: 0; + padding-left: 20px; + + li { + color: #666; + font-size: 13px; + line-height: 1.8; + } + } + } + + .upgrade-tips { + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + color: #f5a623; + font-size: 13px; + margin-bottom: 20px; + + i { + font-size: 14px; + } + } + + .confirm-buttons { + display: flex; + justify-content: center; + gap: 12px; + } +} + +// 升级进度弹窗样式 +.upgrade-progress-content { + padding: 30px 20px; + text-align: center; + + .progress-icon { + width: 50px; + height: 50px; + border-radius: 50%; + background: linear-gradient(135deg, #409eff, #67c23a); + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 20px; + color: #fff; + font-size: 24px; + } + + .progress-text { + color: #333; + font-size: 15px; + margin-bottom: 20px; + } + + .progress-detail { + color: #999; + font-size: 13px; + margin-top: 16px; + } +}