1
This commit is contained in:
@@ -11,10 +11,10 @@ import {deviceApi, type DeviceItem, type DeviceQuota} from './api/device'
|
||||
const LoginDialog = defineAsyncComponent(() => import('./components/auth/LoginDialog.vue'))
|
||||
const RegisterDialog = defineAsyncComponent(() => import('./components/auth/RegisterDialog.vue'))
|
||||
const NavigationBar = defineAsyncComponent(() => import('./components/layout/NavigationBar.vue'))
|
||||
// const UpdateDialog = defineAsyncComponent(() => import('./components/common/UpdateDialog.vue'))
|
||||
const RakutenDashboard = defineAsyncComponent(() => import('./components/rakuten/RakutenDashboard.vue'))
|
||||
const AmazonDashboard = defineAsyncComponent(() => import('./components/amazon/AmazonDashboard.vue'))
|
||||
const ZebraDashboard = defineAsyncComponent(() => import('./components/zebra/ZebraDashboard.vue'))
|
||||
const UpdateDialog = defineAsyncComponent(() => import('./components/common/UpdateDialog.vue'))
|
||||
|
||||
const dashboardsMap: Record<string, Component> = {
|
||||
rakuten: RakutenDashboard,
|
||||
@@ -48,9 +48,8 @@ const devices = ref<DeviceItem[]>([])
|
||||
const deviceQuota = ref<DeviceQuota>({limit: 0, used: 0})
|
||||
const userPermissions = ref<string>('')
|
||||
|
||||
// 更新状态
|
||||
const updateStatus = ref<any>(null)
|
||||
const showUpdateNotification = ref(false)
|
||||
// 更新对话框状态
|
||||
const showUpdateDialog = ref(false)
|
||||
|
||||
// 菜单配置 - 复刻ERP客户端格式
|
||||
const menuConfig = [
|
||||
@@ -417,127 +416,20 @@ async function confirmRemoveDevice(row: DeviceItem & { isCurrent?: boolean }) {
|
||||
}
|
||||
}
|
||||
|
||||
// 更新相关功能
|
||||
function setupUpdateHandler() {
|
||||
if (!(window as any).electronAPI) return
|
||||
|
||||
(window as any).electronAPI.onUpdateStatus((status: any) => {
|
||||
updateStatus.value = status
|
||||
handleUpdateStatus(status)
|
||||
})
|
||||
}
|
||||
|
||||
function handleUpdateStatus(status: any) {
|
||||
switch (status.type) {
|
||||
case 'checking':
|
||||
console.log('正在检查更新...')
|
||||
break
|
||||
case 'available':
|
||||
showUpdateAvailableNotification(status)
|
||||
break
|
||||
case 'not-available':
|
||||
console.log('当前已是最新版本')
|
||||
break
|
||||
case 'error':
|
||||
ElMessage({
|
||||
message: `更新检查失败: ${status.error}`,
|
||||
type: 'error'
|
||||
})
|
||||
break
|
||||
case 'download-progress':
|
||||
// 可以在这里显示下载进度
|
||||
console.log(`下载进度: ${status.progress}%`)
|
||||
break
|
||||
case 'downloaded':
|
||||
showUpdateReadyNotification()
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
function showUpdateAvailableNotification(status: any) {
|
||||
ElMessage({
|
||||
message: `发现新版本 ${status.version}，是否立即下载？`,
|
||||
type: 'info'
|
||||
})
|
||||
// 可以在这里添加确认对话框
|
||||
ElMessageBox.confirm(`新版本 ${status.version} 已发布，是否立即下载？`, '发现新版本', {
|
||||
confirmButtonText: '立即下载',
|
||||
cancelButtonText: '稍后提醒',
|
||||
type: 'info'
|
||||
}).then(() => {
|
||||
downloadUpdate()
|
||||
}).catch(() => {
|
||||
// 用户取消
|
||||
})
|
||||
}
|
||||
|
||||
function showUpdateReadyNotification() {
|
||||
ElMessageBox.confirm('更新已下载完成，是否重启应用以安装更新？', '更新准备就绪', {
|
||||
confirmButtonText: '立即重启',
|
||||
cancelButtonText: '稍后重启',
|
||||
type: 'success'
|
||||
}).then(() => {
|
||||
installUpdate()
|
||||
}).catch(() => {
|
||||
// 用户取消
|
||||
})
|
||||
}
|
||||
|
||||
// 启动时检查更新
|
||||
async function checkForUpdates() {
|
||||
if (!(window as any).electronAPI) return
|
||||
|
||||
try {
|
||||
const result = await (window as any).electronAPI.checkForUpdates()
|
||||
if (!result.success) {
|
||||
console.log('更新检查:', result.message || result.error)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('检查更新失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
async function downloadUpdate() {
|
||||
if (!(window as any).electronAPI) return
|
||||
|
||||
try {
|
||||
ElMessage({
|
||||
message: '开始下载更新...',
|
||||
type: 'info'
|
||||
})
|
||||
const result = await (window as any).electronAPI.downloadUpdate()
|
||||
if (!result.success) {
|
||||
ElMessage({
|
||||
message: `下载失败: ${result.error}`,
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage({
|
||||
message: '下载更新失败',
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function installUpdate() {
|
||||
if (!(window as any).electronAPI) return
|
||||
|
||||
try {
|
||||
(window as any).electronAPI.installUpdate()
|
||||
} catch (error) {
|
||||
ElMessage({
|
||||
message: '安装更新失败',
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
// 延迟3秒后自动检查更新
|
||||
setTimeout(() => {
|
||||
showUpdateDialog.value = true
|
||||
}, 3000)
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
showContent()
|
||||
await checkAuth()
|
||||
|
||||
// 设置更新处理器
|
||||
setupUpdateHandler()
|
||||
// 启动时检查更新
|
||||
await checkForUpdates()
|
||||
|
||||
// 监听页面关闭，断开SSE连接（会自动设置离线）
|
||||
window.addEventListener('beforeunload', () => {
|
||||
@@ -545,11 +437,6 @@ onMounted(async () => {
|
||||
})
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if ((window as any).electronAPI) {
|
||||
(window as any).electronAPI.removeUpdateStatusListener()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -621,6 +508,9 @@ onUnmounted(() => {
|
||||
@register-success="handleRegisterSuccess"
|
||||
@back-to-login="backToLogin"/>
|
||||
|
||||
<!-- 更新对话框 -->
|
||||
<UpdateDialog v-model="showUpdateDialog" />
|
||||
|
||||
<!-- 设备管理弹框 -->
|
||||
<el-dialog
|
||||
v-model="showDeviceDialog"
|
||||
|
||||
@@ -0,0 +1,532 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="version-info" @click="autoCheck">v{{ version || '-' }}</div>
|
||||
|
||||
<el-dialog v-model="show" width="522px" :close-on-click-modal="false" align-center class="update-dialog" title="软件更新"
|
||||
:show-close="true"
|
||||
custom-class="update-dialog">
|
||||
|
||||
<!-- 状态：检查更新 -->
|
||||
<div v-if="stage === 'check'" class="update-content">
|
||||
<div class="update-layout">
|
||||
<div class="left-pane">
|
||||
<img src="/icon/icon.png" class="app-icon app-icon-large" alt="App Icon" />
|
||||
</div>
|
||||
<div class="right-pane">
|
||||
<p class="announce">新版本的"{{ appName || 'App Name' }}"已经发布</p>
|
||||
<p class="desc">{{ (appName || 'App Name') }} {{ info.latestVersion || '-' }} 可供下载，您现在的版本是 {{ version || '-' }}，要现在下载吗?</p>
|
||||
|
||||
<div class="update-details form">
|
||||
<h4>更新信息</h4>
|
||||
<el-input
|
||||
v-model="info.updateNotes"
|
||||
type="textarea"
|
||||
class="notes-box"
|
||||
:rows="6"
|
||||
readonly
|
||||
resize="none"
|
||||
placeholder="• 优化了用户界面体验 • 修复了已知问题 • 提升了系统稳定性 • 增加了新的功能模块 • 优化了数据处理性能" />
|
||||
</div>
|
||||
|
||||
<div class="update-actions row">
|
||||
<div class="auto-update-section">
|
||||
<el-checkbox v-model="autoUpdateSelected">以后自动下载并安装更新</el-checkbox>
|
||||
</div>
|
||||
<div class="update-buttons">
|
||||
<div class="left-actions">
|
||||
<el-button size="small" @click="show=false">跳过这个版本</el-button>
|
||||
</div>
|
||||
<div class="right-actions">
|
||||
<el-button size="small" @click="show=false">稍后提醒</el-button>
|
||||
<el-button size="small" type="primary" @click="start">安装更新</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 状态：正在下载 -->
|
||||
<div v-else-if="stage === 'downloading'" class="update-content">
|
||||
<div class="update-header text-center">
|
||||
<img src="/icon/icon.png" class="app-icon" alt="App Icon" />
|
||||
<h3>正在更新 {{ appName || 'erp' }}</h3>
|
||||
<p>正在下载新版...</p>
|
||||
</div>
|
||||
|
||||
<div class="download-progress">
|
||||
<div class="progress-info">
|
||||
<span>{{ prog.current }} / {{ prog.total }}</span>
|
||||
</div>
|
||||
<el-progress
|
||||
:percentage="prog.percentage"
|
||||
:show-text="false"
|
||||
:stroke-width="6"
|
||||
color="#409EFF" />
|
||||
<div class="progress-details">
|
||||
<span>{{ prog.percentage }}%</span>
|
||||
<span v-if="prog.speed">{{ prog.speed }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 状态：下载完成 -->
|
||||
<div v-else-if="stage === 'completed'" class="update-content">
|
||||
<div class="update-header text-center">
|
||||
<img src="/icon/icon.png" class="app-icon" alt="App Icon" />
|
||||
<h3>正在更新 {{ appName || '我了个电商' }}</h3>
|
||||
<p>可以开始安装了</p>
|
||||
</div>
|
||||
|
||||
<div class="download-progress">
|
||||
<div class="progress-info">
|
||||
<span>{{ prog.current }} /{{ prog.total }}</span>
|
||||
</div>
|
||||
<el-progress
|
||||
:percentage="100"
|
||||
:show-text="false"
|
||||
:stroke-width="6"
|
||||
color="#67C23A" />
|
||||
</div>
|
||||
|
||||
<div class="update-buttons">
|
||||
<el-button @click="cancelDownload">稍后更新</el-button>
|
||||
<el-button type="primary" @click="installUpdate">安装并重新启动</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onMounted } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: boolean]
|
||||
}>()
|
||||
|
||||
const show = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (value) => emit('update:modelValue', value)
|
||||
})
|
||||
|
||||
type Stage = 'check' | 'downloading' | 'completed'
|
||||
const stage = ref<Stage>('check')
|
||||
const appName = ref('ERP客户端')
|
||||
const autoUpdateSelected = ref(false)
|
||||
const prog = ref({ percentage: 0, current: '0 MB', total: '0 MB', speed: '' })
|
||||
const version = ref('2.0.0') // 当前版本号
|
||||
const downloadedFilePath = ref('') // 下载文件路径
|
||||
const info = ref({
|
||||
latestVersion: '2.4.8',
|
||||
downloadUrl: 'https://qiniu.pxdj.tashowz.com/2025/09/f492725041ba43fb8ded9344ec08d646.exe',
|
||||
updateNotes: '• 优化了用户界面体验\n• 修复了已知问题\n• 提升了系统稳定性\n• 增加了新的功能模块\n• 优化了数据处理性能'
|
||||
})
|
||||
|
||||
// 自动检查更新
|
||||
async function autoCheck() {
|
||||
try {
|
||||
ElMessage.info('正在检查更新...')
|
||||
console.log('手动检查更新...')
|
||||
|
||||
if (window.electronAPI?.checkForUpdates) {
|
||||
await window.electronAPI.checkForUpdates()
|
||||
} else {
|
||||
// 如果没有 API，直接显示更新对话框
|
||||
setTimeout(() => {
|
||||
show.value = true
|
||||
stage.value = 'check'
|
||||
}, 500)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('检查更新失败:', error)
|
||||
ElMessage.error('检查更新失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 开始安装更新
|
||||
async function start() {
|
||||
stage.value = 'downloading'
|
||||
prog.value = { percentage: 0, current: '0 MB', total: '0 MB', speed: '' }
|
||||
|
||||
try {
|
||||
if (info.value.downloadUrl && window.electronAPI?.downloadUpdate) {
|
||||
console.log('开始下载:', info.value.downloadUrl)
|
||||
|
||||
// 直接打开浏览器下载，不模拟进度
|
||||
const result = await window.electronAPI.downloadUpdate(info.value.downloadUrl)
|
||||
if (result.success) {
|
||||
ElMessage.success('下载链接已在浏览器中打开，请等待下载完成后手动安装')
|
||||
show.value = false
|
||||
} else {
|
||||
throw new Error(result.error)
|
||||
}
|
||||
} else {
|
||||
ElMessage.error('下载链接不可用')
|
||||
show.value = false
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('下载失败:', error)
|
||||
ElMessage.error('下载失败: ' + error)
|
||||
show.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 取消下载
|
||||
function cancelDownload() {
|
||||
show.value = false
|
||||
stage.value = 'check'
|
||||
}
|
||||
|
||||
// 安装更新
|
||||
async function installUpdate() {
|
||||
try {
|
||||
ElMessage.success('正在安装更新，程序将自动重启...')
|
||||
console.log('准备安装更新')
|
||||
|
||||
// 通过 IPC 重启应用
|
||||
if (window.electronAPI?.restartApp) {
|
||||
setTimeout(async () => {
|
||||
await window.electronAPI.restartApp()
|
||||
}, 1000) // 延迟1秒重启
|
||||
} else {
|
||||
// 如果没有重启API，手动关闭窗口
|
||||
setTimeout(() => {
|
||||
window.close()
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
show.value = false
|
||||
} catch (error) {
|
||||
console.error('重启失败:', error)
|
||||
ElMessage.error('重启失败，请手动重启应用')
|
||||
}
|
||||
}
|
||||
|
||||
// 监听对话框显示
|
||||
watch(show, async (visible) => {
|
||||
if (visible) {
|
||||
await fetchUpdateInfo()
|
||||
stage.value = 'check'
|
||||
}
|
||||
})
|
||||
|
||||
async function fetchUpdateInfo() {
|
||||
try {
|
||||
// 获取当前版本
|
||||
if (window.electronAPI?.getVersion) {
|
||||
const currentVersion = await window.electronAPI.getVersion()
|
||||
version.value = currentVersion
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取更新信息失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 监听主进程的更新通知
|
||||
onMounted(() => {
|
||||
if (window.electronAPI?.onShowUpdateDialog) {
|
||||
window.electronAPI.onShowUpdateDialog((updateData) => {
|
||||
console.log('收到更新通知:', updateData)
|
||||
|
||||
// 更新信息
|
||||
if (updateData.currentVersion) {
|
||||
version.value = updateData.currentVersion
|
||||
}
|
||||
if (updateData.latestVersion) {
|
||||
info.value.latestVersion = updateData.latestVersion
|
||||
}
|
||||
if (updateData.downloadUrl) {
|
||||
info.value.downloadUrl = updateData.downloadUrl
|
||||
}
|
||||
if (updateData.updateNotes) {
|
||||
info.value.updateNotes = updateData.updateNotes
|
||||
}
|
||||
|
||||
// 显示对话框
|
||||
show.value = true
|
||||
stage.value = 'check'
|
||||
})
|
||||
}
|
||||
|
||||
// 初始化获取版本信息
|
||||
fetchUpdateInfo()
|
||||
})
|
||||
|
||||
// 暴露方法供父组件调用
|
||||
defineExpose({
|
||||
showUpdate: (updateData: any) => {
|
||||
if (updateData.currentVersion) version.value = updateData.currentVersion
|
||||
if (updateData.latestVersion) info.value.latestVersion = updateData.latestVersion
|
||||
if (updateData.updateNotes) info.value.updateNotes = updateData.updateNotes
|
||||
if (updateData.downloadUrl) info.value.downloadUrl = updateData.downloadUrl
|
||||
show.value = true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.version-info {
|
||||
position: fixed;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
background: rgba(255,255,255,0.9);
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
z-index: 1000;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* 更新对话框整体样式 */
|
||||
:deep(.update-dialog .el-dialog) {
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
:deep(.update-dialog .el-dialog__header) {
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
:deep(.update-dialog .el-dialog__headerbtn) {
|
||||
top: 12px;
|
||||
right: 20px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 18px;
|
||||
border-radius: 50%;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
:deep(.update-dialog .el-dialog__headerbtn:hover) {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
:deep(.update-dialog .el-dialog__close) {
|
||||
color: #909399;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
:deep(.update-dialog .el-dialog__close:hover) {
|
||||
color: #409EFF;
|
||||
}
|
||||
|
||||
: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-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.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-details p {
|
||||
font-size: 13px;
|
||||
color: #6b7280;
|
||||
line-height: 1.6;
|
||||
margin: 0 0 16px 0;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.update-details p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.auto-update-section {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:deep(.auto-update-section .el-checkbox) {
|
||||
color: #374151;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
.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; }
|
||||
|
||||
|
||||
.update-buttons.text-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
:deep(.update-buttons .el-button) {
|
||||
flex: 1;
|
||||
height: 32px;
|
||||
font-size: 13px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
:deep(.update-buttons.text-center .el-button) {
|
||||
flex: none;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
/* 下载进度区域 */
|
||||
.download-progress {
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
.progress-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.progress-details {
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* 进度条自定义样式 */
|
||||
: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;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 480px) {
|
||||
.update-content {
|
||||
padding: 24px 16px;
|
||||
}
|
||||
|
||||
.update-buttons {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
:deep(.update-buttons .el-button) {
|
||||
flex: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user