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:
@@ -23,7 +23,6 @@ function openAppIfNotOpened() {
|
||||
!appOpened && setTimeout(openAppIfNotOpened, 50);
|
||||
return;
|
||||
}
|
||||
|
||||
appOpened = true;
|
||||
isDev
|
||||
? mainWindow.loadURL(`http://localhost:${process.argv[2] || 8083}`)
|
||||
@@ -473,14 +472,14 @@ app.whenReady().then(() => {
|
||||
}
|
||||
|
||||
// 已手动启动后端
|
||||
setTimeout(() => {
|
||||
startSpringBoot();
|
||||
}, 200);
|
||||
|
||||
// setTimeout(() => {
|
||||
// openAppIfNotOpened();
|
||||
// startSpringBoot();
|
||||
// }, 200);
|
||||
|
||||
setTimeout(() => {
|
||||
openAppIfNotOpened();
|
||||
}, 200);
|
||||
|
||||
app.on('activate', () => {
|
||||
if (mainWindow && !mainWindow.isDestroyed()) {
|
||||
mainWindow.show();
|
||||
|
||||
@@ -425,7 +425,7 @@ const SSEManager = {
|
||||
|
||||
const src = new EventSource(`${CONFIG.SSE_URL}?clientId=${clientId}&token=${token}`)
|
||||
this.connection = src
|
||||
src.onopen = () => console.log('SSE连接已建立')
|
||||
src.onopen = () => {}
|
||||
src.onmessage = (e) => this.handleMessage(e)
|
||||
src.onerror = () => this.handleError()
|
||||
} catch (e: any) {
|
||||
@@ -438,11 +438,9 @@ const SSEManager = {
|
||||
try {
|
||||
if (e.type === 'ping') return
|
||||
|
||||
console.log('SSE消息:', e.data)
|
||||
const payload = JSON.parse(e.data)
|
||||
switch (payload.type) {
|
||||
case 'ready':
|
||||
console.log('SSE连接已就绪')
|
||||
break
|
||||
case 'DEVICE_REMOVED':
|
||||
await clearLocalAuth()
|
||||
@@ -825,468 +823,80 @@ onUnmounted(() => {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.root {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
opacity: 0;
|
||||
transition: opacity 0.1s ease;
|
||||
}
|
||||
|
||||
.loading-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: #f5f5f5;
|
||||
z-index: 9999;
|
||||
transition: opacity 0.1s ease;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 5px solid #e6e6e6;
|
||||
border-top: 5px solid #409EFF;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.erp-container {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 220px;
|
||||
min-width: 220px;
|
||||
flex-shrink: 0;
|
||||
background: #F0F0F0;
|
||||
border-right: 1px solid #e8eaec;
|
||||
padding: 16px 12px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.platform-icons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.picon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
object-fit: contain;
|
||||
.root {position: fixed; inset: 0; width: 100vw; height: 100vh; background-color: #f5f5f5; opacity: 0; transition: opacity 0.1s ease;}
|
||||
.loading-container {display: flex; justify-content: center; align-items: center; height: 100vh; width: 100%; position: fixed; top: 0; left: 0; background-color: #f5f5f5; z-index: 9999; transition: opacity 0.1s ease;}
|
||||
.loading-spinner {width: 50px; height: 50px; border: 5px solid #e6e6e6; border-top: 5px solid #409EFF; border-radius: 50%; animation: spin 1s linear infinite;}
|
||||
@keyframes spin {0% {
|
||||
transform: rotate(0deg);}
|
||||
100% {transform: rotate(360deg);}
|
||||
}
|
||||
|
||||
.erp-container {display: flex; height: 100vh;}
|
||||
.sidebar {width: 220px; min-width: 220px; flex-shrink: 0; background: #F0F0F0; border-right: 1px solid #e8eaec; padding: 16px 12px; box-sizing: border-box; display: flex; flex-direction: column;}
|
||||
.platform-icons {display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px;}
|
||||
.picon {width: 28px; height: 28px; object-fit: contain;}
|
||||
/* 主Logo */
|
||||
.main-logo {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8px 0;
|
||||
margin: 0 0 16px 0;
|
||||
}
|
||||
|
||||
.main-logo img {
|
||||
width: 120px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.main-logo {align-items: center; justify-content: center; padding: 8px 0; margin: 0 0 16px 0;}
|
||||
.main-logo img {width: 120px; object-fit: contain;}
|
||||
/* 用户头像区域 */
|
||||
.user-avatar-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 8px 10px;
|
||||
margin: 0 0 16px 0;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.avatar-wrapper {
|
||||
flex-shrink: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.user-avatar-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.user-name-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
white-space: nowrap;
|
||||
line-height: 1.2;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.vip-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0px 3px;
|
||||
height: 14px;
|
||||
background: #BAE0FF;
|
||||
border: 1px solid rgba(22, 119, 255, 0.05);
|
||||
border-radius: 8px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 29, 102, 1);
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
line-height: 100%;
|
||||
text-align: center;
|
||||
letter-spacing: 0%;
|
||||
}
|
||||
|
||||
.user-action {
|
||||
font-size: 11px;
|
||||
color: #909399;
|
||||
line-height: 1.3;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.menu-group-title {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
margin: 8px 6px 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.user-avatar-section {display: flex; align-items: center; gap: 7px; padding: 8px 10px; margin: 0 0 16px 0; border-radius: 8px; cursor: pointer; transition: all 0.2s ease;}
|
||||
.avatar-wrapper {flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);}
|
||||
.user-avatar-img {width: 100%; height: 100%; object-fit: cover;}
|
||||
.user-info {flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; text-align: left;}
|
||||
.user-name-wrapper {display: flex; align-items: center; gap: 4px; min-width: 0;}
|
||||
.user-name {font-size: 14px; font-weight: 600; color: #303133; white-space: nowrap; line-height: 1.2; min-width: 0; overflow: hidden; text-overflow: ellipsis;}
|
||||
.vip-badge {display: inline-flex; align-items: center; justify-content: center; padding: 0px 3px; height: 14px; background: #BAE0FF; border: 1px solid rgba(22, 119, 255, 0.05); border-radius: 8px; font-size: 10px; font-weight: 600; color: rgba(0, 29, 102, 1); white-space: nowrap; flex-shrink: 0; line-height: 100%; text-align: center; letter-spacing: 0%;}
|
||||
.user-action {font-size: 11px; color: #909399; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
|
||||
.menu-group-title {font-size: 12px; color: #909399; margin: 8px 6px 10px; text-align: left;}
|
||||
/* 品牌logo区域 */
|
||||
.brand-logo-section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
margin-bottom: 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.brand-logo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.menu {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
color: #333333;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.menu-item.active {
|
||||
background: rgba(0, 0, 0, 0.1) !important;
|
||||
/* color: #409EFF !important; */
|
||||
}
|
||||
|
||||
.menu-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.menu-text {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
display: inline-flex;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 4px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.menu-icon-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.menu-icon[data-k="shopee"] {
|
||||
background: #EE4D2D;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
||||
.content-body {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
background: #fff;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dashboard-home {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #ffffff;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.main-icon {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
border-radius: 20px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.placeholder-card {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e8eaec;
|
||||
border-radius: 12px;
|
||||
padding: 24px 28px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.placeholder-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.placeholder-desc {
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.device-dialog-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 12px 0 4px 0;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.device-dialog :deep(.el-dialog__header) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.device-dialog :deep(.el-dialog__body) {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.device-illustration {
|
||||
width: 180px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.device-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.device-count {
|
||||
color: #909399;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.device-subtitle {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.brand-logo-section {display: flex; justify-content: center; align-items: center; width: 100%; height: 60px; margin-bottom: 16px; box-sizing: border-box;}
|
||||
.brand-logo {width: 100%; height: 100%; object-fit: cover; border-radius: 12px;}
|
||||
.menu {list-style: none; padding: 0; margin: 0;}
|
||||
.menu-item {display: flex; align-items: center; padding: 12px 16px; border-radius: 8px; cursor: pointer; color: #333333; margin-bottom: 4px;}
|
||||
.menu-item:hover {background: #f5f7fa;}
|
||||
.menu-item.active {background: rgba(0, 0, 0, 0.1) !important; /* color: #409EFF !important; */;}
|
||||
.menu-text {font-size: 14px;}
|
||||
.menu-text {display: inline-flex; align-items: center; gap: 6px;}
|
||||
.menu-icon {display: inline-flex; width: 18px; height: 18px; border-radius: 4px; align-items: center; justify-content: center; font-size: 12px; color: #fff;}
|
||||
.menu-icon-img {width: 100%; height: 100%; object-fit: contain;}
|
||||
.menu-icon[data-k="shopee"] {background: #EE4D2D;}
|
||||
.main-content {flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column;}
|
||||
.content-body {position: relative; flex: 1; background: #fff; min-height: 0; overflow: hidden;}
|
||||
.dashboard-home {position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #ffffff; z-index: 100;}
|
||||
.icon-container {display: flex; justify-content: center;}
|
||||
.main-icon {width: 400px; height: 400px; border-radius: 20px; object-fit: contain;}
|
||||
.placeholder {position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #fff;}
|
||||
.placeholder-card {background: #ffffff; border: 1px solid #e8eaec; border-radius: 12px; padding: 24px 28px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); color: #2c3e50;}
|
||||
.placeholder-title {font-size: 18px; font-weight: 600; margin-bottom: 8px;}
|
||||
.placeholder-desc {font-size: 13px; color: #606266;}
|
||||
.device-dialog-header {display: flex; flex-direction: column; align-items: center; padding: 12px 0 4px 0; margin-left: 40px;}
|
||||
.device-dialog :deep(.el-dialog__header) {text-align: center;}
|
||||
.device-dialog :deep(.el-dialog__body) {padding-top: 0;}
|
||||
.device-illustration {width: 180px; height: auto; object-fit: contain; margin-bottom: 8px;}
|
||||
.device-title {font-size: 18px; font-weight: 600; color: #303133; margin-bottom: 6px;}
|
||||
.device-count {color: #909399; font-weight: 500;}
|
||||
.device-subtitle {font-size: 12px; color: #909399;}
|
||||
/* 浮动版本信息 */
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;}
|
||||
/* VIP状态卡片样式 */
|
||||
.vip-status-card {
|
||||
margin-top: auto;
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 12px;
|
||||
box-sizing: border-box;
|
||||
background: #BAE0FF;
|
||||
box-shadow: 0 2px 8px rgba(255, 215, 0, 0.15);
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.vip-status-card:hover {
|
||||
box-shadow: 0 3px 10px rgba(255, 215, 0, 0.25);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.vip-status-card:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.vip-status-card {margin-top: auto; width: 100%; border-radius: 8px; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; box-sizing: border-box; background: #BAE0FF; box-shadow: 0 2px 8px rgba(255, 215, 0, 0.15); transition: all 0.3s ease; position: relative; cursor: pointer; user-select: none;}
|
||||
.vip-status-card:hover {box-shadow: 0 3px 10px rgba(255, 215, 0, 0.25); transform: translateY(-1px);}
|
||||
.vip-status-card:active {transform: translateY(0);}
|
||||
/* 正常状态和警告状态 - 统一温暖金色渐变 */
|
||||
.vip-status-card.vip-active,
|
||||
.vip-status-card.vip-normal,
|
||||
.vip-status-card.vip-warning {
|
||||
background: #BAE0FF;
|
||||
box-shadow: 0 2px 8px rgba(255, 215, 0, 0.15);
|
||||
}
|
||||
|
||||
.vip-status-card.vip-warning {background: #BAE0FF; box-shadow: 0 2px 8px rgba(255, 215, 0, 0.15);}
|
||||
/* 过期状态 - 灰色，保持水平布局 */
|
||||
.vip-status-card.vip-expired {
|
||||
background: linear-gradient(135deg, #FAFAFA 0%, #E8E8E8 100%);
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.vip-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
min-width: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.vip-status-text {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #001D66;
|
||||
text-align: left;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.vip-expire-date {
|
||||
font-size: 10px;
|
||||
color: #001D66;
|
||||
line-height: 1.3;
|
||||
|
||||
text-align: left;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.vip-status-card.vip-expired .vip-info {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.vip-status-card.vip-expired .vip-status-text {
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.vip-status-card.vip-expired .vip-expire-date {
|
||||
color: #B0B0B0;
|
||||
}
|
||||
.vip-status-card.vip-expired {background: linear-gradient(135deg, #FAFAFA 0%, #E8E8E8 100%); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);}
|
||||
.vip-info {flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; text-align: left;}
|
||||
.vip-status-text {font-size: 13px; font-weight: 600; color: #001D66; text-align: left; letter-spacing: 0.3px;}
|
||||
.vip-expire-date {font-size: 10px; color: #001D66; line-height: 1.3; text-align: left; opacity: 0.9;}
|
||||
.vip-status-card.vip-expired .vip-info {align-items: flex-start;}
|
||||
.vip-status-card.vip-expired .vip-status-text {color: #909399;}
|
||||
.vip-status-card.vip-expired .vip-expire-date {color: #B0B0B0;}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
/* 全局样式：限制图片预览器大小 */
|
||||
.el-image-viewer__img {
|
||||
max-width: 50vw !important;
|
||||
max-height: 50vh !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
}
|
||||
.el-image-viewer__img {max-width: 50vw !important; max-height: 50vh !important; width: auto !important; height: auto !important;}
|
||||
</style>
|
||||
@@ -1,17 +1,10 @@
|
||||
export type HttpMethod = 'GET' | 'POST' | 'DELETE';
|
||||
const RUOYI_BASE = 'http://8.138.23.49:8085';
|
||||
//const RUOYI_BASE = 'http://192.168.1.89:8085';
|
||||
export const CONFIG = {
|
||||
CLIENT_BASE: 'http://localhost:8081',
|
||||
RUOYI_BASE,
|
||||
SSE_URL: `${RUOYI_BASE}/monitor/account/events`
|
||||
} as const;
|
||||
import { AppConfig, isRuoyiPath } from '../config'
|
||||
|
||||
export type HttpMethod = 'GET' | 'POST' | 'DELETE'
|
||||
export const CONFIG = AppConfig
|
||||
|
||||
function resolveBase(path: string): string {
|
||||
// 路由到 ruoyi-admin (8085)：仅系统管理和监控相关
|
||||
if (path.startsWith('/monitor/') || path.startsWith('/system/') || path.startsWith('/tool/banma') || path.startsWith('/tool/genmai')) {
|
||||
return CONFIG.RUOYI_BASE;
|
||||
}
|
||||
return CONFIG.CLIENT_BASE;
|
||||
return isRuoyiPath(path) ? CONFIG.RUOYI_BASE : CONFIG.CLIENT_BASE
|
||||
}
|
||||
|
||||
function buildQuery(params?: Record<string, unknown>): string {
|
||||
|
||||
@@ -535,710 +535,240 @@ function handleExportData() {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.amazon-root {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
.main-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 12px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.amazon-root {position: absolute; inset: 0; background: #fff; box-sizing: border-box; overflow: hidden;}
|
||||
.main-container {height: 100%; display: flex; flex-direction: column; padding: 12px; box-sizing: border-box; overflow: hidden; min-height: 0;}
|
||||
/* 顶部标签栏 */
|
||||
.top-tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.tab-item {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0px 12px;
|
||||
gap: 8px;
|
||||
height: 40px;
|
||||
min-height: 40px;
|
||||
max-height: 40px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
flex: none;
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
color: #303133;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.tab-item:hover {
|
||||
background: #f0f9ff;
|
||||
border-color: #1677FF;
|
||||
color: #303133;
|
||||
}
|
||||
.tab-item.active {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #1677FF;
|
||||
color: #303133;
|
||||
cursor: default;
|
||||
}
|
||||
.tab-icon { width: 20px; height: 20px; flex-shrink: 0; object-fit: contain; }
|
||||
.tab-text {
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.top-tabs {display: flex; gap: 8px; margin-bottom: 12px; flex-shrink: 0;}
|
||||
.tab-item {box-sizing: border-box; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 0px 12px; gap: 8px; height: 40px; min-height: 40px; max-height: 40px; background: #FFFFFF; border: 1px solid #e5e7eb; border-radius: 8px; flex: none; flex-shrink: 0; cursor: pointer; transition: all 0.2s ease; color: #303133; font-size: 14px; font-weight: 400;}
|
||||
.tab-item:hover {background: #f0f9ff; border-color: #1677FF; color: #303133;}
|
||||
.tab-item.active {background: #FFFFFF; border: 1px solid #1677FF; color: #303133; cursor: default;}
|
||||
.tab-icon {width: 20px; height: 20px; flex-shrink: 0; object-fit: contain;}
|
||||
.tab-text {line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;}
|
||||
/* 账号列表样式（和斑马一致） */
|
||||
.account-list { height: auto; }
|
||||
.scroll-limit { max-height: 140px; }
|
||||
.placeholder-box { display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100px; background: #fff; border: 1px solid #ebeef5; border-radius: 4px; margin-bottom: 8px; }
|
||||
.placeholder-img { width: 80px; opacity: 0.9; }
|
||||
.placeholder-tip { margin-top: 6px; font-size: 12px; color: #a8abb2; }
|
||||
.avatar { width: 18px; height: 18px; border-radius: 50%; }
|
||||
.acct-row { display: grid; grid-template-columns: 6px 18px 1fr auto; align-items: center; gap: 6px; width: 100%; }
|
||||
.acct-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-size: 12px; }
|
||||
.status-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
|
||||
.status-dot.on { background: #22c55e; }
|
||||
.status-dot.off { background: #f87171; }
|
||||
.acct-item { padding: 6px 8px; border-radius: 6px; cursor: pointer; margin-bottom: 4px; }
|
||||
.acct-item.selected { background: #eef5ff; box-shadow: inset 0 0 0 1px #d6e4ff; }
|
||||
.acct-check { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: transparent; color: #111; font-size: 12px; }
|
||||
.account-list::-webkit-scrollbar { width: 0; height: 0; }
|
||||
|
||||
.body-layout {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
.steps-sidebar {
|
||||
background: #fff;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
height: 100%;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.steps-sidebar.narrow {
|
||||
width: 240px;
|
||||
}
|
||||
.steps-sidebar.wide {
|
||||
width: 280px;
|
||||
}
|
||||
.steps-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
text-align: left;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.steps-flow { position: relative; }
|
||||
.steps-flow:before { content: ''; position: absolute; left: 13px; top: 26px; bottom: 0; width: 2px; background: rgba(229, 231, 235, 0.6); }
|
||||
.flow-item { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 10px 0; }
|
||||
.flow-item .step-index { position: static; width: 28px; height: 28px; line-height: 28px; text-align: center; border-radius: 50%; background: #1677FF; color: #fff; font-size: 14px; font-weight: 600; margin-top: 2px; }
|
||||
.flow-item:after { display: none; }
|
||||
.step-card { border: none; border-radius: 0; padding: 0; background: transparent; }
|
||||
.step-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
|
||||
.title { font-size: 14px; font-weight: 600; color: #303133; text-align: left; }
|
||||
.desc { font-size: 12px; color: #909399; margin-bottom: 10px; text-align: left; line-height: 1.5; }
|
||||
.mini-hint { font-size: 12px; color: #909399; margin-top: 6px; }
|
||||
.links { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
|
||||
.link { color: #409EFF; cursor: pointer; font-size: 12px; }
|
||||
.sep { color: #dcdfe6; }
|
||||
.content-panel {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.left-controls { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
|
||||
.dropzone { border: 1px dashed #c0c4cc; border-radius: 6px; padding: 16px; text-align: center; cursor: pointer; background: #fafafa; }
|
||||
.dropzone:hover { background: #f6fbff; border-color: #409EFF; }
|
||||
.dz-icon { font-size: 20px; margin-bottom: 6px; }
|
||||
.dz-text { color: #303133; font-size: 13px; }
|
||||
.dz-sub { color: #909399; font-size: 12px; }
|
||||
.file-chip { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: #f5f7fa; border-radius: 4px; font-size: 12px; color: #606266; margin-top: 6px; }
|
||||
.file-chip .dot { width: 6px; height: 6px; background: #409EFF; border-radius: 50%; display: inline-block; }
|
||||
.file-chip .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.single-input.left { display: flex; gap: 8px; }
|
||||
.action-buttons.column { display: flex; flex-direction: column; gap: 8px; }
|
||||
.step-actions { margin-top: 8px; display: flex; gap: 8px; }
|
||||
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
|
||||
.w50 { width: 100%; }
|
||||
.form-row { margin-bottom: 10px; }
|
||||
.label { display: block; font-size: 12px; color: #606266; margin-bottom: 6px; }
|
||||
|
||||
.account-list {height: auto;}
|
||||
.scroll-limit {max-height: 140px;}
|
||||
.placeholder-box {display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100px; background: #fff; border: 1px solid #ebeef5; border-radius: 4px; margin-bottom: 8px;}
|
||||
.placeholder-img {width: 80px; opacity: 0.9;}
|
||||
.placeholder-tip {margin-top: 6px; font-size: 12px; color: #a8abb2;}
|
||||
.avatar {width: 18px; height: 18px; border-radius: 50%;}
|
||||
.acct-row {display: grid; grid-template-columns: 6px 18px 1fr auto; align-items: center; gap: 6px; width: 100%;}
|
||||
.acct-text {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-size: 12px;}
|
||||
.status-dot {width: 6px; height: 6px; border-radius: 50%; display: inline-block;}
|
||||
.status-dot.on {background: #22c55e;}
|
||||
.status-dot.off {background: #f87171;}
|
||||
.acct-item {padding: 6px 8px; border-radius: 6px; cursor: pointer; margin-bottom: 4px;}
|
||||
.acct-item.selected {background: #eef5ff; box-shadow: inset 0 0 0 1px #d6e4ff;}
|
||||
.acct-check {display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: transparent; color: #111; font-size: 12px;}
|
||||
.account-list::-webkit-scrollbar {width: 0; height: 0;}
|
||||
.body-layout {display: flex; gap: 12px; flex: 1; overflow: hidden; min-height: 0;}
|
||||
.steps-sidebar {background: #fff; border: 1px solid #ebeef5; border-radius: 6px; padding: 12px; height: 100%; flex-shrink: 0; display: flex; flex-direction: column; box-sizing: border-box;}
|
||||
.steps-sidebar.narrow {width: 240px;}
|
||||
.steps-sidebar.wide {width: 280px;}
|
||||
.steps-title {font-size: 14px; font-weight: 600; color: #303133; text-align: left; flex-shrink: 0; margin-bottom: 8px;}
|
||||
.steps-flow {position: relative;}
|
||||
.steps-flow:before {content: ''; position: absolute; left: 13px; top: 26px; bottom: 0; width: 2px; background: rgba(229, 231, 235, 0.6);}
|
||||
.flow-item {position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 10px 0;}
|
||||
.flow-item .step-index {position: static; width: 28px; height: 28px; line-height: 28px; text-align: center; border-radius: 50%; background: #1677FF; color: #fff; font-size: 14px; font-weight: 600; margin-top: 2px;}
|
||||
.flow-item:after {display: none;}
|
||||
.step-card {border: none; border-radius: 0; padding: 0; background: transparent;}
|
||||
.step-header {display: flex; align-items: center; gap: 8px; margin-bottom: 8px;}
|
||||
.title {font-size: 14px; font-weight: 600; color: #303133; text-align: left;}
|
||||
.desc {font-size: 12px; color: #909399; margin-bottom: 10px; text-align: left; line-height: 1.5;}
|
||||
.mini-hint {font-size: 12px; color: #909399; margin-top: 6px;}
|
||||
.links {display: flex; align-items: center; gap: 6px; margin-bottom: 8px;}
|
||||
.link {color: #409EFF; cursor: pointer; font-size: 12px;}
|
||||
.sep {color: #dcdfe6;}
|
||||
.content-panel {flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden;}
|
||||
.left-controls {margin-top: 10px; display: flex; flex-direction: column; gap: 10px;}
|
||||
.dropzone {border: 1px dashed #c0c4cc; border-radius: 6px; padding: 16px; text-align: center; cursor: pointer; background: #fafafa;}
|
||||
.dropzone:hover {background: #f6fbff; border-color: #409EFF;}
|
||||
.dz-icon {font-size: 20px; margin-bottom: 6px;}
|
||||
.dz-text {color: #303133; font-size: 13px;}
|
||||
.dz-sub {color: #909399; font-size: 12px;}
|
||||
.file-chip {display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: #f5f7fa; border-radius: 4px; font-size: 12px; color: #606266; margin-top: 6px;}
|
||||
.file-chip .dot {width: 6px; height: 6px; background: #409EFF; border-radius: 50%; display: inline-block;}
|
||||
.file-chip .name {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
|
||||
.single-input.left {display: flex; gap: 8px;}
|
||||
.action-buttons.column {display: flex; flex-direction: column; gap: 8px;}
|
||||
.step-actions {margin-top: 8px; display: flex; gap: 8px;}
|
||||
.btn-row {display: grid; grid-template-columns: 1fr 1fr; gap: 8px;}
|
||||
.w50 {width: 100%;}
|
||||
.form-row {margin-bottom: 10px;}
|
||||
.label {display: block; font-size: 12px; color: #606266; margin-bottom: 6px;}
|
||||
/* 统一左侧控件宽度与主色 */
|
||||
.steps-sidebar :deep(.el-date-editor),
|
||||
.steps-sidebar :deep(.el-range-editor.el-input__wrapper),
|
||||
.steps-sidebar :deep(.el-input),
|
||||
.steps-sidebar :deep(.el-input__wrapper),
|
||||
.steps-sidebar :deep(.el-select) { width: 100%; box-sizing: border-box; }
|
||||
.btn-blue { background: #1677FF; border-color: #1677FF; color: #fff; }
|
||||
.btn-blue:disabled { background: #a6c8ff; border-color: #a6c8ff; color: #fff; }
|
||||
.w100 { width: 100%; }
|
||||
.steps-sidebar :deep(.el-button + .el-button) { margin-left: 0; }
|
||||
.import-section { margin-bottom: 10px; flex-shrink: 0; }
|
||||
.import-controls { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 8px; }
|
||||
.single-input { display: flex; align-items: center; gap: 8px; }
|
||||
.text { width: 180px; height: 32px; padding: 0 10px; border: 1px solid #dcdfe6; border-radius: 4px; font-size: 14px; outline: none; transition: border-color 0.2s ease; }
|
||||
.text:focus { border-color: #409EFF; }
|
||||
.text:disabled { background: #f5f7fa; color: #c0c4cc; }
|
||||
.action-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
|
||||
.current-status { font-size: 12px; color: #606266; padding-left: 2px; }
|
||||
.table-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
.steps-sidebar :deep(.el-select) {width: 100%; box-sizing: border-box;}
|
||||
.btn-blue {background: #1677FF; border-color: #1677FF; color: #fff;}
|
||||
.btn-blue:disabled {background: #a6c8ff; border-color: #a6c8ff; color: #fff;}
|
||||
.w100 {width: 100%;}
|
||||
.steps-sidebar :deep(.el-button + .el-button) {margin-left: 0;}
|
||||
.import-section {margin-bottom: 10px; flex-shrink: 0;}
|
||||
.import-controls {display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 8px;}
|
||||
.single-input {display: flex; align-items: center; gap: 8px;}
|
||||
.text {width: 180px; height: 32px; padding: 0 10px; border: 1px solid #dcdfe6; border-radius: 4px; font-size: 14px; outline: none; transition: border-color 0.2s ease;}
|
||||
.text:focus {border-color: #409EFF;}
|
||||
.text:disabled {background: #f5f7fa; color: #c0c4cc;}
|
||||
.action-buttons {display: flex; gap: 10px; flex-wrap: wrap;}
|
||||
.current-status {font-size: 12px; color: #606266; padding-left: 2px;}
|
||||
.table-container {display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden;}
|
||||
.table-section {flex: 1; overflow: hidden; position: relative; background: #fff; border: 1px solid #ebeef5; border-radius: 4px; display: flex; flex-direction: column; min-height: 0;}
|
||||
.table-wrapper {flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: #c0c4cc transparent;}
|
||||
.table-wrapper::-webkit-scrollbar {width: 6px; height: 6px;}
|
||||
.table-wrapper::-webkit-scrollbar-track {background: transparent;}
|
||||
.table-wrapper::-webkit-scrollbar-thumb {background: #c0c4cc; border-radius: 3px;}
|
||||
.table-wrapper:hover::-webkit-scrollbar-thumb {background: #a8abb2;}
|
||||
.table {width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed;}
|
||||
.table th {background: #f5f7fa; color: #909399; font-weight: 600; padding: 12px 8px; border-bottom: 2px solid #ebeef5; text-align: center;}
|
||||
.table td {padding: 10px 8px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; text-align: center;}
|
||||
.table tbody tr:hover {background: #f9f9f9;}
|
||||
.table th:nth-child(1), .table td:nth-child(1) {width: 33.33%;}
|
||||
.table th:nth-child(2), .table td:nth-child(2) {width: 33.33%;}
|
||||
.table th:nth-child(3), .table td:nth-child(3) {width: 33.33%;}
|
||||
.asin-out {color: #f56c6c; font-weight: 600;}
|
||||
.seller-info {display: flex; align-items: center; gap: 4px; justify-content: center;}
|
||||
.seller {color: #303133; font-weight: 500;}
|
||||
.shipper {color: #909399; font-size: 12px;}
|
||||
.price {color: #e6a23c; font-weight: 600;}
|
||||
.table-loading {position: absolute; inset: 0; background: rgba(255, 255, 255, 0.95); display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 14px; color: #606266;}
|
||||
.spinner {font-size: 24px; animation: spin 1s linear infinite; margin-bottom: 8px;}
|
||||
.inline-spinner {display: inline-block; animation: spin 1s linear infinite;}
|
||||
@keyframes spin {0% { transform: rotate(0deg);}
|
||||
100% {transform: rotate(360deg);}
|
||||
}
|
||||
.table-section {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
.table-wrapper {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #c0c4cc transparent;
|
||||
}
|
||||
.table-wrapper::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||
.table-wrapper::-webkit-scrollbar-track { background: transparent; }
|
||||
.table-wrapper::-webkit-scrollbar-thumb { background: #c0c4cc; border-radius: 3px; }
|
||||
.table-wrapper:hover::-webkit-scrollbar-thumb { background: #a8abb2; }
|
||||
.table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
|
||||
.table th { background: #f5f7fa; color: #909399; font-weight: 600; padding: 12px 8px; border-bottom: 2px solid #ebeef5; text-align: center; }
|
||||
.table td { padding: 10px 8px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; text-align: center; }
|
||||
.table tbody tr:hover { background: #f9f9f9; }
|
||||
.table th:nth-child(1), .table td:nth-child(1) { width: 33.33%; }
|
||||
.table th:nth-child(2), .table td:nth-child(2) { width: 33.33%; }
|
||||
.table th:nth-child(3), .table td:nth-child(3) { width: 33.33%; }
|
||||
.asin-out { color: #f56c6c; font-weight: 600; }
|
||||
.seller-info { display: flex; align-items: center; gap: 4px; justify-content: center; }
|
||||
.seller { color: #303133; font-weight: 500; }
|
||||
.shipper { color: #909399; font-size: 12px; }
|
||||
.price { color: #e6a23c; font-weight: 600; }
|
||||
.table-loading { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.95); display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 14px; color: #606266; }
|
||||
.spinner { font-size: 24px; animation: spin 1s linear infinite; margin-bottom: 8px; }
|
||||
.inline-spinner { display: inline-block; animation: spin 1s linear infinite; }
|
||||
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
|
||||
.pagination-fixed { flex-shrink: 0; padding: 8px 12px 0 12px; background: #fff; display: flex; justify-content: flex-end; }
|
||||
.pagination-fixed :deep(.el-pager li.is-active) { border: 1px solid #1677FF; border-radius: 4px; color: #1677FF; background: #fff; }
|
||||
.empty-tip { text-align: center; color: #909399; padding: 16px 0; }
|
||||
.import-section[draggable], .import-section.drag-active { border: 1px dashed #409EFF; border-radius: 6px; }
|
||||
.empty-container { text-align: center; }
|
||||
.empty-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.6; }
|
||||
.empty-image { max-width: 200px; width: 100%; height: auto; margin-bottom: 16px; opacity: 0.8; }
|
||||
.empty-text { font-size: 14px; color: #909399; }
|
||||
.empty-abs { position: absolute; left: 0; right: 0; top: 48px; bottom: 0; display: flex; align-items: center; justify-content: center; }
|
||||
|
||||
.pagination-fixed {flex-shrink: 0; padding: 8px 12px 0 12px; background: #fff; display: flex; justify-content: flex-end;}
|
||||
.pagination-fixed :deep(.el-pager li.is-active) {border: 1px solid #1677FF; border-radius: 4px; color: #1677FF; background: #fff;}
|
||||
.empty-tip {text-align: center; color: #909399; padding: 16px 0;}
|
||||
.import-section[draggable], .import-section.drag-active {border: 1px dashed #409EFF; border-radius: 6px;}
|
||||
.empty-container {text-align: center;}
|
||||
.empty-icon {font-size: 48px; margin-bottom: 12px; opacity: 0.6;}
|
||||
.empty-image {max-width: 200px; width: 100%; height: auto; margin-bottom: 16px; opacity: 0.8;}
|
||||
.empty-text {font-size: 14px; color: #909399;}
|
||||
.empty-abs {position: absolute; left: 0; right: 0; top: 48px; bottom: 0; display: flex; align-items: center; justify-content: center;}
|
||||
/* 状态图标样式 */
|
||||
.status-image {
|
||||
max-width: 160px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-bottom: 20px;
|
||||
opacity: 0.9;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
pointer-events: none;
|
||||
.status-image {max-width: 160px; width: 100%; height: auto; margin-bottom: 20px; opacity: 0.9; user-select: none; -webkit-user-drag: none; pointer-events: none;}
|
||||
.status-loading {animation: pulse 2s ease-in-out infinite;}
|
||||
@keyframes pulse {0%, 100% { opacity: 0.6;}
|
||||
50% {opacity: 0.9;}
|
||||
}
|
||||
.status-loading {
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 0.6; }
|
||||
50% { opacity: 0.9; }
|
||||
}
|
||||
.empty-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.empty-desc {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.empty-title {font-size: 16px; font-weight: 600; color: #303133; margin-bottom: 8px;}
|
||||
.empty-desc {font-size: 14px; color: #909399; line-height: 1.5;}
|
||||
/* 商标筛查相关样式 */
|
||||
.table-trademark th:nth-child(1), .table-trademark td:nth-child(1) { width: 15%; }
|
||||
.table-trademark th:nth-child(2), .table-trademark td:nth-child(2) { width: 12%; }
|
||||
.table-trademark th:nth-child(3), .table-trademark td:nth-child(3) { width: 18%; }
|
||||
.table-trademark th:nth-child(4), .table-trademark td:nth-child(4) { width: 25%; }
|
||||
.table-trademark th:nth-child(5), .table-trademark td:nth-child(5) { width: 15%; }
|
||||
.table-trademark th:nth-child(6), .table-trademark td:nth-child(6) { width: 15%; }
|
||||
|
||||
.trademark-name { font-weight: 600; color: #303133; }
|
||||
.truncate-cell { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
.status-registered { color: #67c23a; font-weight: 500; }
|
||||
.status-risk { color: #f56c6c; font-weight: 500; }
|
||||
.status-available { color: #409EFF; font-weight: 500; }
|
||||
|
||||
.similarity-high { color: #f56c6c; font-weight: 600; }
|
||||
|
||||
.dz-el-icon { font-size: 18px; margin-bottom: 4px; color: #909399; }
|
||||
|
||||
.table-trademark th:nth-child(1), .table-trademark td:nth-child(1) {width: 15%;}
|
||||
.table-trademark th:nth-child(2), .table-trademark td:nth-child(2) {width: 12%;}
|
||||
.table-trademark th:nth-child(3), .table-trademark td:nth-child(3) {width: 18%;}
|
||||
.table-trademark th:nth-child(4), .table-trademark td:nth-child(4) {width: 25%;}
|
||||
.table-trademark th:nth-child(5), .table-trademark td:nth-child(5) {width: 15%;}
|
||||
.table-trademark th:nth-child(6), .table-trademark td:nth-child(6) {width: 15%;}
|
||||
.trademark-name {font-weight: 600; color: #303133;}
|
||||
.truncate-cell {max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
|
||||
.status-registered {color: #67c23a; font-weight: 500;}
|
||||
.status-risk {color: #f56c6c; font-weight: 500;}
|
||||
.status-available {color: #409EFF; font-weight: 500;}
|
||||
.similarity-high {color: #f56c6c; font-weight: 600;}
|
||||
.dz-el-icon {font-size: 18px; margin-bottom: 4px; color: #909399;}
|
||||
/* 跟卖精灵内容样式 */
|
||||
.genmai-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.genmai-content {display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 100%;}
|
||||
/* 商标筛查空状态样式 */
|
||||
.trademark-empty-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.trademark-empty-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.trademark-info-boxes {
|
||||
display: flex;
|
||||
text-align: left;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
padding: 8px 0;
|
||||
gap: 10px;
|
||||
width: 90%;
|
||||
max-width: 872px;
|
||||
margin: 16px auto;
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
border-radius: 8px;
|
||||
}
|
||||
.genmai-image-wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
.genmai-image {
|
||||
max-width: 100%;
|
||||
max-height: 370px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
.genmai-info-boxes {
|
||||
margin-bottom: 16px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
text-align: left;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
padding: 8px 0px;
|
||||
gap: 10px;
|
||||
width: 90%;
|
||||
max-width: 872px;
|
||||
height: 200rpx;
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
border-radius: 8px;
|
||||
flex: none;
|
||||
order: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
.info-box {
|
||||
flex: 1;
|
||||
border: none;
|
||||
background: transparent;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 0px 15px;
|
||||
}
|
||||
.info-box:not(:last-child) {
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
.info-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.info-text {
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.info-link {
|
||||
color: #1677FF;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
.info-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.trademark-empty-wrapper {width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between;}
|
||||
.trademark-empty-content {flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;}
|
||||
.trademark-info-boxes {display: flex; text-align: left; flex-direction: row; align-items: flex-start; padding: 8px 0; gap: 10px; width: 90%; max-width: 872px; margin: 16px auto; background: rgba(0, 0, 0, 0.02); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 8px;}
|
||||
.genmai-image-wrapper {flex: 1; display: flex; align-items: center; justify-content: center; width: 100%;}
|
||||
.genmai-image {max-width: 100%; max-height: 370px; width: auto; height: auto; object-fit: contain; user-select: none; -webkit-user-drag: none; pointer-events: none;}
|
||||
.genmai-info-boxes {margin-bottom: 16px; box-sizing: border-box; display: flex; text-align: left; flex-direction: row; align-items: flex-start; padding: 8px 0px; gap: 10px; width: 90%; max-width: 872px; height: 200rpx; background: rgba(0, 0, 0, 0.02); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 8px; flex: none; order: 0; flex-grow: 0;}
|
||||
.info-box {flex: 1; border: none; background: transparent; display: flex; flex-direction: column; gap: 8px; padding: 0px 15px;}
|
||||
.info-box:not(:last-child) {border-right: 1px solid rgba(0, 0, 0, 0.06);}
|
||||
.info-title {font-size: 14px; font-weight: 600; color: #303133; line-height: 1.4;}
|
||||
.info-text {font-size: 13px; color: #606266; line-height: 1.6;}
|
||||
.info-link {color: #1677FF; text-decoration: none; position: relative; z-index: 10;}
|
||||
.info-link:hover {text-decoration: underline;}
|
||||
/* 商标筛查进度样式 */
|
||||
.trademark-progress-container {
|
||||
padding: 24px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.trademark-progress-container {padding: 24px; width: 100%; height: 100%; box-sizing: border-box; overflow-y: auto; display: flex; flex-direction: column; align-items: center;}
|
||||
/* 状态横幅 */
|
||||
.status-banner {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
gap: 16px;
|
||||
width: 70%;
|
||||
max-width: 900px;
|
||||
min-height: 90px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 16px;
|
||||
flex: none;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.status-banner {box-sizing: border-box; display: flex; flex-direction: row; align-items: center; padding: 16px; gap: 16px; width: 70%; max-width: 900px; min-height: 90px; background: #FFFFFF; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 16px; flex: none; margin-bottom: 16px;}
|
||||
.status-banner.progress-banner,
|
||||
.status-banner.done-banner,
|
||||
.status-banner.error-banner,
|
||||
.status-banner.cancel-banner {
|
||||
box-shadow: 0px 8px 20px rgba(22, 119, 255, 0.2);
|
||||
}
|
||||
.banner-icon {
|
||||
flex-shrink: 0;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.banner-icon svg {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.done-banner .banner-icon {
|
||||
background: transparent;
|
||||
}
|
||||
.banner-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
text-align: left;
|
||||
}
|
||||
.banner-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.banner-desc {
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.banner-actions {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
.banner-actions .el-button {
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.status-banner.cancel-banner {box-shadow: 0px 8px 20px rgba(22, 119, 255, 0.2);}
|
||||
.banner-icon {flex-shrink: 0; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: transparent; border-radius: 50%;}
|
||||
.banner-icon svg {width: 48px; height: 48px;}
|
||||
.done-banner .banner-icon {background: transparent;}
|
||||
.banner-content {flex: 1; min-width: 0; text-align: left;}
|
||||
.banner-title {font-size: 16px; font-weight: 600; color: #303133; margin-bottom: 4px;}
|
||||
.banner-desc {font-size: 13px; color: #606266; line-height: 1.5;}
|
||||
.banner-actions {flex-shrink: 0; display: flex; gap: 12px;}
|
||||
.banner-actions .el-button {min-width: 100px;}
|
||||
/* 统一任务卡片容器 */
|
||||
.unified-task-card {
|
||||
width: 70%;
|
||||
max-width: 900px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.unified-task-card {width: 70%; max-width: 900px; overflow: hidden;}
|
||||
/* 任务区块 */
|
||||
.task-section {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 20px;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.task-section {display: flex; flex-direction: row; padding: 20px; gap: 20px;}
|
||||
/* 左侧状态列 */
|
||||
.status-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
flex-shrink: 0;
|
||||
.status-column {display: flex; flex-direction: column; align-items: center; gap: 0; flex-shrink: 0;}
|
||||
.status-item {display: flex; align-items: flex-start; justify-content: center; width: 24px; height: 24px; flex-shrink: 0;}
|
||||
.status-indicator-icon {width: 24px; height: 24px; object-fit: contain;}
|
||||
.status-indicator-icon.spinning {animation: spin 1.5s linear infinite;}
|
||||
@keyframes spin {from { transform: rotate(0deg);}
|
||||
to {transform: rotate(360deg);}
|
||||
}
|
||||
.status-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.status-indicator-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
object-fit: contain;
|
||||
}
|
||||
.status-indicator-icon.spinning {
|
||||
animation: spin 1.5s linear infinite;
|
||||
}
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
.status-connector {
|
||||
width: 1px;
|
||||
height: 114px;
|
||||
background: #e5e7eb;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.status-connector {width: 1px; height: 114px; background: #e5e7eb; margin: 8px 0;}
|
||||
/* 任务内容列 */
|
||||
.tasks-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
min-width: 0;
|
||||
}
|
||||
.task-item {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
min-height: 76px;
|
||||
}
|
||||
.task-item:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
.task-item:last-child {
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.tasks-content {flex: 1; display: flex; flex-direction: column; gap: 16px; min-width: 0;}
|
||||
.task-item {width: 100%; padding: 0; padding-bottom: 16px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); min-height: 76px;}
|
||||
.task-item:first-child {padding-top: 0;}
|
||||
.task-item:last-child {padding-bottom: 0; border-bottom: none;}
|
||||
/* 竖线分隔（换行后不需要） */
|
||||
.vertical-divider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vertical-divider {display: none;}
|
||||
/* 任务标题行 */
|
||||
.task-title-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.task-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
text-align: left;
|
||||
}
|
||||
.task-name {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 2px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.task-name-disabled {
|
||||
color: #909399;
|
||||
}
|
||||
.task-desc {
|
||||
font-size: 11px;
|
||||
color: #909399;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.task-title-row {display: flex; align-items: flex-start; margin-bottom: 12px;}
|
||||
.task-info {flex: 1; min-width: 0; text-align: left;}
|
||||
.task-name {font-size: 13px; font-weight: 600; color: #303133; margin-bottom: 2px; line-height: 1.4;}
|
||||
.task-name-disabled {color: #909399;}
|
||||
.task-desc {font-size: 11px; color: #909399; line-height: 1.4;}
|
||||
/* 进度条 */
|
||||
.task-progress-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.task-progress-bar {
|
||||
flex: 1;
|
||||
height: 4px;
|
||||
background: rgba(22, 119, 255, 0.1);
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.task-progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #1677FF 0%, #4096FF 100%);
|
||||
border-radius: 999px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
.task-percentage {
|
||||
flex-shrink: 0;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #1677FF;
|
||||
min-width: 40px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.task-progress-wrapper {display: flex; align-items: center; gap: 10px; margin-bottom: 10px;}
|
||||
.task-progress-bar {flex: 1; height: 4px; background: rgba(22, 119, 255, 0.1); border-radius: 999px; overflow: hidden;}
|
||||
.task-progress-fill {height: 100%; background: linear-gradient(90deg, #1677FF 0%, #4096FF 100%); border-radius: 999px; transition: width 0.3s ease;}
|
||||
.task-percentage {flex-shrink: 0; font-size: 13px; font-weight: 600; color: #1677FF; min-width: 40px; text-align: right;}
|
||||
/* 统计数据 */
|
||||
.task-stats {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
text-align: left;
|
||||
}
|
||||
.task-stat {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
.task-stat.highlight {
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.06);
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.06);
|
||||
padding: 0 8px;
|
||||
}
|
||||
.stat-label {
|
||||
font-size: 10px;
|
||||
color: #909399;
|
||||
}
|
||||
.stat-value {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
.task-stat.highlight .stat-label {
|
||||
color: #67c23a;
|
||||
}
|
||||
.task-stat.highlight .stat-value {
|
||||
color: #67c23a;
|
||||
}
|
||||
|
||||
.task-stats {display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left;}
|
||||
.task-stat {flex: 1; display: flex; flex-direction: column; gap: 2px;}
|
||||
.task-stat.highlight {border-left: 1px solid rgba(0, 0, 0, 0.06); border-right: 1px solid rgba(0, 0, 0, 0.06); padding: 0 8px;}
|
||||
.stat-label {font-size: 10px; color: #909399;}
|
||||
.stat-value {font-size: 16px; font-weight: 600; color: #303133;}
|
||||
.task-stat.highlight .stat-label {color: #67c23a;}
|
||||
.task-stat.highlight .stat-value {color: #67c23a;}
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 1200px) {
|
||||
.steps-sidebar.narrow {
|
||||
width: 220px;
|
||||
}
|
||||
/* wide保持280px不变 */
|
||||
.tab-item {
|
||||
padding: 0px 15px;
|
||||
}
|
||||
@media (max-width: 1200px) {.steps-sidebar.narrow {
|
||||
width: 220px;}
|
||||
/* wide保持280px不变 */
|
||||
.tab-item {padding: 0px 15px;}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.steps-sidebar.narrow {
|
||||
width: 200px;
|
||||
}
|
||||
.steps-sidebar.wide {
|
||||
width: 260px;
|
||||
}
|
||||
.genmai-info-boxes {
|
||||
width: 95%;
|
||||
}
|
||||
.status-banner,
|
||||
.unified-task-card {
|
||||
width: 85%;
|
||||
}
|
||||
@media (max-width: 1024px) {.steps-sidebar.narrow {
|
||||
width: 200px;}
|
||||
.steps-sidebar.wide {width: 260px;}
|
||||
.genmai-info-boxes {width: 95%;}
|
||||
.status-banner,
|
||||
.unified-task-card {width: 85%;}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.body-layout {
|
||||
flex-direction: column;
|
||||
}
|
||||
.steps-sidebar.narrow,
|
||||
.steps-sidebar.wide {
|
||||
width: 100%;
|
||||
max-height: 300px;
|
||||
}
|
||||
.tab-item {
|
||||
font-size: 12px;
|
||||
padding: 0px 6px;
|
||||
gap: 6px;
|
||||
}
|
||||
.tab-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.status-banner,
|
||||
.unified-task-card {
|
||||
width: 95%;
|
||||
}
|
||||
.status-banner {
|
||||
min-height: auto;
|
||||
padding: 14px;
|
||||
}
|
||||
.banner-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.banner-icon svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
.banner-title {
|
||||
font-size: 14px;
|
||||
}
|
||||
.banner-desc {
|
||||
font-size: 12px;
|
||||
}
|
||||
.banner-actions {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
.banner-actions .el-button {
|
||||
width: 100%;
|
||||
}
|
||||
@media (max-width: 768px) {.body-layout {
|
||||
flex-direction: column;}
|
||||
.steps-sidebar.narrow,
|
||||
.steps-sidebar.wide {width: 100%; max-height: 300px;}
|
||||
.tab-item {font-size: 12px; padding: 0px 6px; gap: 6px;}
|
||||
.tab-icon {width: 16px; height: 16px;}
|
||||
.status-banner,
|
||||
.unified-task-card {width: 95%;}
|
||||
.status-banner {min-height: auto; padding: 14px;}
|
||||
.banner-icon {width: 40px; height: 40px;}
|
||||
.banner-icon svg {width: 32px; height: 32px;}
|
||||
.banner-title {font-size: 14px;}
|
||||
.banner-desc {font-size: 12px;}
|
||||
.banner-actions {flex-direction: column; width: 100%;}
|
||||
.banner-actions .el-button {width: 100%;}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -341,46 +341,32 @@ defineExpose({
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.asin-panel {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.steps-flow {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.asin-panel .steps-flow::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.steps-flow:before { content: ''; position: absolute; left: 13px; top: 26px; bottom: 0; width: 2px; background: rgba(229, 231, 235, 0.6); }
|
||||
.flow-item { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 10px 0; }
|
||||
.flow-item .step-index { position: static; width: 28px; height: 28px; line-height: 28px; text-align: center; border-radius: 50%; background: #1677FF; color: #fff; font-size: 14px; font-weight: 600; margin-top: 2px; }
|
||||
.step-card { border: none; border-radius: 0; padding: 0; background: transparent; min-width: 0; }
|
||||
.step-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
|
||||
.title { font-size: 14px; font-weight: 600; color: #303133; text-align: left; }
|
||||
.desc { font-size: 12px; color: #909399; margin-bottom: 10px; text-align: left; line-height: 1.5; }
|
||||
.links { display: flex; align-items: center; gap: 2px; margin-bottom: 8px; }
|
||||
.link { color: #409EFF; cursor: pointer; font-size: 12px; }
|
||||
.sep { color: #dcdfe6; }
|
||||
.dropzone { border: 1px dashed #c0c4cc; border-radius: 6px; padding: 16px; text-align: center; cursor: pointer; background: #fafafa; }
|
||||
.dropzone:hover { background: #f6fbff; border-color: #409EFF; }
|
||||
.dz-el-icon { font-size: 18px; margin-bottom: 4px; color: #909399; }
|
||||
.dz-text { color: #303133; font-size: 13px; }
|
||||
.dz-sub { color: #909399; font-size: 12px; }
|
||||
.file-chip { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: #f5f7fa; border-radius: 4px; font-size: 12px; color: #606266; margin-top: 6px; width: 100%; box-sizing: border-box; }
|
||||
.file-chip .dot { width: 6px; height: 6px; background: #409EFF; border-radius: 50%; flex-shrink: 0; }
|
||||
.file-chip .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.file-chip .delete-btn { cursor: pointer; opacity: 0.6; flex-shrink: 0; }
|
||||
.file-chip .delete-btn:hover { opacity: 1; }
|
||||
.action-buttons.column { display: flex; flex-direction: column; gap: 8px; }
|
||||
.btn-blue { background: #1677FF; border-color: #1677FF; color: #fff; }
|
||||
.btn-blue:disabled { background: #a6c8ff; border-color: #a6c8ff; color: #fff; }
|
||||
.w100 { width: 100%; }
|
||||
.asin-panel {flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;}
|
||||
.steps-flow {position: relative; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none;}
|
||||
.asin-panel .steps-flow::-webkit-scrollbar {display: none;}
|
||||
.steps-flow:before {content: ''; position: absolute; left: 13px; top: 26px; bottom: 0; width: 2px; background: rgba(229, 231, 235, 0.6);}
|
||||
.flow-item {position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 10px 0;}
|
||||
.flow-item .step-index {position: static; width: 28px; height: 28px; line-height: 28px; text-align: center; border-radius: 50%; background: #1677FF; color: #fff; font-size: 14px; font-weight: 600; margin-top: 2px;}
|
||||
.step-card {border: none; border-radius: 0; padding: 0; background: transparent; min-width: 0;}
|
||||
.step-header {display: flex; align-items: center; gap: 8px; margin-bottom: 8px;}
|
||||
.title {font-size: 14px; font-weight: 600; color: #303133; text-align: left;}
|
||||
.desc {font-size: 12px; color: #909399; margin-bottom: 10px; text-align: left; line-height: 1.5;}
|
||||
.links {display: flex; align-items: center; gap: 2px; margin-bottom: 8px;}
|
||||
.link {color: #409EFF; cursor: pointer; font-size: 12px;}
|
||||
.sep {color: #dcdfe6;}
|
||||
.dropzone {border: 1px dashed #c0c4cc; border-radius: 6px; padding: 16px; text-align: center; cursor: pointer; background: #fafafa;}
|
||||
.dropzone:hover {background: #f6fbff; border-color: #409EFF;}
|
||||
.dz-el-icon {font-size: 18px; margin-bottom: 4px; color: #909399;}
|
||||
.dz-text {color: #303133; font-size: 13px;}
|
||||
.dz-sub {color: #909399; font-size: 12px;}
|
||||
.file-chip {display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: #f5f7fa; border-radius: 4px; font-size: 12px; color: #606266; margin-top: 6px; width: 100%; box-sizing: border-box;}
|
||||
.file-chip .dot {width: 6px; height: 6px; background: #409EFF; border-radius: 50%; flex-shrink: 0;}
|
||||
.file-chip .name {flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
|
||||
.file-chip .delete-btn {cursor: pointer; opacity: 0.6; flex-shrink: 0;}
|
||||
.file-chip .delete-btn:hover {opacity: 1;}
|
||||
.action-buttons.column {display: flex; flex-direction: column; gap: 8px;}
|
||||
.btn-blue {background: #1677FF; border-color: #1677FF; color: #fff;}
|
||||
.btn-blue:disabled {background: #a6c8ff; border-color: #a6c8ff; color: #fff;}
|
||||
.w100 {width: 100%;}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -119,55 +119,41 @@ onMounted(async () => {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.genmai-panel {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
.genmai-panel {flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;}
|
||||
.steps-flow {position: relative; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none;}
|
||||
.genmai-panel .steps-flow::-webkit-scrollbar {display: none;}
|
||||
.steps-flow:before {content: ''; position: absolute; left: 13px; top: 26px; bottom: 0; width: 2px; background: rgba(229, 231, 235, 0.6);}
|
||||
.flow-item {position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 10px 0;}
|
||||
.flow-item .step-index {position: static; width: 28px; height: 28px; line-height: 28px; text-align: center; border-radius: 50%; background: #1677FF; color: #fff; font-size: 14px; font-weight: 600; margin-top: 2px;}
|
||||
.step-card {border: none; border-radius: 0; padding: 0; background: transparent;}
|
||||
.step-header {display: flex; align-items: center; gap: 8px; margin-bottom: 8px;}
|
||||
.title {font-size: 14px; font-weight: 600; color: #303133; text-align: left;}
|
||||
.desc {font-size: 12px; color: #909399; margin-bottom: 10px; text-align: left; line-height: 1.5;}
|
||||
.account-list {height: auto;}
|
||||
.scroll-limit {max-height: 140px;}
|
||||
.placeholder-box {display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100px; background: #fff; border: 1px solid #ebeef5; border-radius: 4px; margin-bottom: 8px;}
|
||||
.placeholder-img {width: 80px; opacity: 0.9;}
|
||||
.placeholder-tip {margin-top: 6px; font-size: 12px; color: #a8abb2;}
|
||||
.avatar {width: 18px; height: 18px; border-radius: 50%;}
|
||||
.acct-row {display: grid; grid-template-columns: 6px 18px 1fr auto; align-items: center; gap: 6px; width: 100%;}
|
||||
.acct-text {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-size: 12px;}
|
||||
.status-dot {width: 6px; height: 6px; border-radius: 50%; display: inline-block;}
|
||||
.status-dot.on {background: #22c55e;}
|
||||
.status-dot.off {background: #f87171;}
|
||||
.acct-item {padding: 6px 8px; border-radius: 6px; cursor: pointer; margin-bottom: 4px;}
|
||||
.acct-item.selected {background: #eef5ff; box-shadow: inset 0 0 0 1px #d6e4ff;}
|
||||
.acct-check {display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: transparent; color: #111; font-size: 12px;}
|
||||
.account-list::-webkit-scrollbar {width: 0; height: 0;}
|
||||
.step-actions {margin-top: 8px; display: flex; gap: 8px;}
|
||||
.btn-row {display: grid; grid-template-columns: 1fr 1fr; gap: 8px;}
|
||||
.w50 {width: 100%;}
|
||||
.action-buttons.column {display: flex; flex-direction: column; gap: 8px;}
|
||||
.btn-blue {background: #1677FF; border-color: #1677FF; color: #fff;}
|
||||
.btn-blue:disabled {background: #a6c8ff; border-color: #a6c8ff; color: #fff;}
|
||||
.w100 {width: 100%;}
|
||||
.inline-spinner {display: inline-block; animation: spin 1s linear infinite;}
|
||||
@keyframes spin {0% { transform: rotate(0deg);}
|
||||
100% {transform: rotate(360deg);}
|
||||
}
|
||||
.steps-flow {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.genmai-panel .steps-flow::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.steps-flow:before { content: ''; position: absolute; left: 13px; top: 26px; bottom: 0; width: 2px; background: rgba(229, 231, 235, 0.6); }
|
||||
.flow-item { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 10px 0; }
|
||||
.flow-item .step-index { position: static; width: 28px; height: 28px; line-height: 28px; text-align: center; border-radius: 50%; background: #1677FF; color: #fff; font-size: 14px; font-weight: 600; margin-top: 2px; }
|
||||
.step-card { border: none; border-radius: 0; padding: 0; background: transparent; }
|
||||
.step-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
|
||||
.title { font-size: 14px; font-weight: 600; color: #303133; text-align: left; }
|
||||
.desc { font-size: 12px; color: #909399; margin-bottom: 10px; text-align: left; line-height: 1.5; }
|
||||
|
||||
.account-list { height: auto; }
|
||||
.scroll-limit { max-height: 140px; }
|
||||
.placeholder-box { display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100px; background: #fff; border: 1px solid #ebeef5; border-radius: 4px; margin-bottom: 8px; }
|
||||
.placeholder-img { width: 80px; opacity: 0.9; }
|
||||
.placeholder-tip { margin-top: 6px; font-size: 12px; color: #a8abb2; }
|
||||
.avatar { width: 18px; height: 18px; border-radius: 50%; }
|
||||
.acct-row { display: grid; grid-template-columns: 6px 18px 1fr auto; align-items: center; gap: 6px; width: 100%; }
|
||||
.acct-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-size: 12px; }
|
||||
.status-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
|
||||
.status-dot.on { background: #22c55e; }
|
||||
.status-dot.off { background: #f87171; }
|
||||
.acct-item { padding: 6px 8px; border-radius: 6px; cursor: pointer; margin-bottom: 4px; }
|
||||
.acct-item.selected { background: #eef5ff; box-shadow: inset 0 0 0 1px #d6e4ff; }
|
||||
.acct-check { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: transparent; color: #111; font-size: 12px; }
|
||||
.account-list::-webkit-scrollbar { width: 0; height: 0; }
|
||||
|
||||
.step-actions { margin-top: 8px; display: flex; gap: 8px; }
|
||||
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
|
||||
.w50 { width: 100%; }
|
||||
.action-buttons.column { display: flex; flex-direction: column; gap: 8px; }
|
||||
.btn-blue { background: #1677FF; border-color: #1677FF; color: #fff; }
|
||||
.btn-blue:disabled { background: #a6c8ff; border-color: #a6c8ff; color: #fff; }
|
||||
.w100 { width: 100%; }
|
||||
.inline-spinner { display: inline-block; animation: spin 1s linear infinite; }
|
||||
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1079,491 +1079,83 @@ defineExpose({
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.trademark-panel {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.steps-flow {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.steps-flow::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.steps-flow:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 13px;
|
||||
top: 26px;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
background: rgba(229, 231, 235, 0.6);
|
||||
}
|
||||
|
||||
.flow-item {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: 28px 1fr;
|
||||
gap: 12px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.flow-item .step-index {
|
||||
position: static;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
background: #1677FF;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.step-card {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.step-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
margin-bottom: 10px;
|
||||
text-align: left;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.example-link {
|
||||
color: #1677FF;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.example-link:hover {
|
||||
color: #0958d9;
|
||||
}
|
||||
|
||||
.trademark-panel {flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;}
|
||||
.steps-flow {position: relative; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none;}
|
||||
.steps-flow::-webkit-scrollbar {display: none;}
|
||||
.steps-flow:before {content: ''; position: absolute; left: 13px; top: 26px; bottom: 0; width: 2px; background: rgba(229, 231, 235, 0.6);}
|
||||
.flow-item {position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 10px 0;}
|
||||
.flow-item .step-index {position: static; width: 28px; height: 28px; line-height: 28px; text-align: center; border-radius: 50%; background: #1677FF; color: #fff; font-size: 14px; font-weight: 600; margin-top: 2px;}
|
||||
.step-card {border: none; border-radius: 0; padding: 0; background: transparent; min-width: 0;}
|
||||
.step-header {display: flex; align-items: center; gap: 8px; margin-bottom: 8px;}
|
||||
.title {font-size: 14px; font-weight: 600; color: #303133; text-align: left;}
|
||||
.desc {font-size: 12px; color: #909399; margin-bottom: 10px; text-align: left; line-height: 1.5;}
|
||||
.example-link {color: #1677FF; cursor: pointer; text-decoration: underline; margin-left: 4px;}
|
||||
.example-link:hover {color: #0958d9;}
|
||||
/* 弹框标题左对齐 */
|
||||
:deep(.excel-dialog .el-dialog__header) {
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: #909399;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.file-chip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 8px;
|
||||
background: #f5f7fa;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
color: #606266;
|
||||
margin-top: 6px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.file-chip .dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #409EFF;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.file-chip .name {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.file-chip .delete-btn {
|
||||
cursor: pointer;
|
||||
opacity: 0.6;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.file-chip .delete-btn:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.dropzone {
|
||||
border: 1px dashed #c0c4cc;
|
||||
border-radius: 8px;
|
||||
padding: 20px 16px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
background: #fafafa;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.dropzone:hover {
|
||||
background: #f6fbff;
|
||||
border-color: #409EFF;
|
||||
}
|
||||
|
||||
.dropzone.uploading {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.dropzone.uploading:hover {
|
||||
background: #fafafa;
|
||||
border-color: #c0c4cc;
|
||||
}
|
||||
|
||||
.dropzone.drag-active {
|
||||
background: #e6f4ff;
|
||||
border-color: #1677FF;
|
||||
}
|
||||
|
||||
.dz-icon {
|
||||
font-size: 20px;
|
||||
margin-bottom: 6px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.dz-text {
|
||||
color: #303133;
|
||||
font-size: 13px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.dz-sub {
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.query-options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.query-card {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
min-height: 46px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #e5e7eb;
|
||||
background: #ffffff;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.query-card:hover {
|
||||
border-color: #1677FF;
|
||||
background: #f7fbff;
|
||||
}
|
||||
|
||||
.query-card.active {
|
||||
border-color: #1677FF;
|
||||
background: #f0f9ff;
|
||||
}
|
||||
|
||||
.query-card.query-disabled {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.query-check {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
border: 1.5px solid #d9d9d9;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
background: transparent;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.query-card.active .query-check {
|
||||
border-color: #1677FF;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.check-icon {
|
||||
color: #1677FF;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.query-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
align-items: flex-start;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.query-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
line-height: 1.3;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.query-title-disabled {
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.query-desc {
|
||||
font-size: 11px;
|
||||
color: #909399;
|
||||
line-height: 1.3;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.step-actions {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.btn-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.w50 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bottom-action {
|
||||
flex-shrink: 0;
|
||||
|
||||
}
|
||||
|
||||
.action-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.step-indicator {
|
||||
font-size: 15px;
|
||||
color: #303133;
|
||||
font-weight: 600;
|
||||
min-width: 36px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.start-btn {
|
||||
flex: 1;
|
||||
height: 32px;
|
||||
padding: 0px 16px;
|
||||
background: #1677FF;
|
||||
border-color: #1677FF;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.start-btn:disabled {
|
||||
background: #d9d9d9;
|
||||
border-color: #d9d9d9;
|
||||
color: #ffffff;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.stop-btn {
|
||||
background: #f56c6c;
|
||||
border-color: #f56c6c;
|
||||
}
|
||||
|
||||
.stop-btn:hover {
|
||||
background: #f78989;
|
||||
border-color: #f78989;
|
||||
}
|
||||
|
||||
.btn-blue {
|
||||
background: #1677FF;
|
||||
border-color: #1677FF;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-blue:disabled {
|
||||
background: #a6c8ff;
|
||||
border-color: #a6c8ff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.account-list {
|
||||
height: auto;
|
||||
background: #fff;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 8px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.scroll-limit {
|
||||
max-height: 140px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.acct-row {
|
||||
display: grid;
|
||||
grid-template-columns: 6px 18px 1fr auto;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.acct-text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
min-width: 0;
|
||||
font-size: 12px;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.status-dot.on {
|
||||
background: #22c55e;
|
||||
}
|
||||
|
||||
.status-dot.off {
|
||||
background: #f87171;
|
||||
}
|
||||
|
||||
.acct-item {
|
||||
padding: 6px 8px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.acct-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.acct-item.selected {
|
||||
background: #eef5ff;
|
||||
box-shadow: inset 0 0 0 1px #d6e4ff;
|
||||
}
|
||||
|
||||
.acct-item.disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.acct-check {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
color: #111;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.account-list :deep(.el-scrollbar__view) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.account-list::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
:deep(.excel-dialog .el-dialog__header) {text-align: left; font-weight: bold; margin-bottom: 0; padding-bottom: 0;}
|
||||
.links {display: flex; align-items: center; gap: 6px; margin-bottom: 8px;}
|
||||
.link {color: #909399; cursor: pointer; font-size: 12px;}
|
||||
.file-chip {display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: #f5f7fa; border-radius: 4px; font-size: 12px; color: #606266; margin-top: 6px; width: 100%; box-sizing: border-box;}
|
||||
.file-chip .dot {width: 6px; height: 6px; background: #409EFF; border-radius: 50%; flex-shrink: 0;}
|
||||
.file-chip .name {flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
|
||||
.file-chip .delete-btn {cursor: pointer; opacity: 0.6; flex-shrink: 0;}
|
||||
.file-chip .delete-btn:hover {opacity: 1;}
|
||||
.dropzone {border: 1px dashed #c0c4cc; border-radius: 8px; padding: 20px 16px; text-align: center; cursor: pointer; background: #fafafa; transition: all 0.2s ease;}
|
||||
.dropzone:hover {background: #f6fbff; border-color: #409EFF;}
|
||||
.dropzone.uploading {cursor: not-allowed; opacity: 0.7;}
|
||||
.dropzone.uploading:hover {background: #fafafa; border-color: #c0c4cc;}
|
||||
.dropzone.drag-active {background: #e6f4ff; border-color: #1677FF;}
|
||||
.dz-icon {font-size: 20px; margin-bottom: 6px; color: #909399;}
|
||||
.dz-text {color: #303133; font-size: 13px; margin-bottom: 2px;}
|
||||
.dz-sub {color: #909399; font-size: 12px;}
|
||||
.spinner {animation: spin 1s linear infinite;}
|
||||
@keyframes spin {from {
|
||||
transform: rotate(0deg);}
|
||||
to {transform: rotate(360deg);}
|
||||
}
|
||||
|
||||
.query-options {display: flex; flex-direction: column; gap: 8px;}
|
||||
.query-card {display: flex; flex-direction: row; align-items: center; padding: 8px 12px; gap: 10px; width: 100%; min-height: 46px; border-radius: 6px; border: 1px solid #e5e7eb; background: #ffffff; cursor: pointer; transition: all 0.2s ease; box-sizing: border-box;}
|
||||
.query-card:hover {border-color: #1677FF; background: #f7fbff;}
|
||||
.query-card.active {border-color: #1677FF; background: #f0f9ff;}
|
||||
.query-card.query-disabled {cursor: not-allowed; pointer-events: none;}
|
||||
.query-check {width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #d9d9d9; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: transparent; transition: all 0.2s ease;}
|
||||
.query-card.active .query-check {border-color: #1677FF; background: transparent;}
|
||||
.check-icon {color: #1677FF; font-size: 10px; font-weight: bold; line-height: 1;}
|
||||
.query-content {flex: 1; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; min-width: 0;}
|
||||
.query-title {font-size: 13px; font-weight: 600; color: #303133; line-height: 1.3; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;}
|
||||
.query-title-disabled {color: #909399;}
|
||||
.query-desc {font-size: 11px; color: #909399; line-height: 1.3; text-align: left; width: 100%;}
|
||||
.step-actions {margin-top: 8px;}
|
||||
.btn-row {display: grid; grid-template-columns: 1fr 1fr; gap: 8px;}
|
||||
.w50 {width: 100%;}
|
||||
.bottom-action {flex-shrink: 0;}
|
||||
.action-header {display: flex; align-items: center; gap: 10px;}
|
||||
.step-indicator {font-size: 15px; color: #303133; font-weight: 600; min-width: 36px; text-align: left;}
|
||||
.start-btn {flex: 1; height: 32px; padding: 0px 16px; background: #1677FF; border-color: #1677FF; font-size: 14px; font-weight: 500; border-radius: 6px;}
|
||||
.start-btn:disabled {background: #d9d9d9; border-color: #d9d9d9; color: #ffffff; cursor: not-allowed;}
|
||||
.stop-btn {background: #f56c6c; border-color: #f56c6c;}
|
||||
.stop-btn:hover {background: #f78989; border-color: #f78989;}
|
||||
.btn-blue {background: #1677FF; border-color: #1677FF; color: #fff;}
|
||||
.btn-blue:disabled {background: #a6c8ff; border-color: #a6c8ff; color: #fff;}
|
||||
.account-list {height: auto; background: #fff; border: 1px solid #ebeef5; border-radius: 4px; margin-bottom: 8px; padding: 4px;}
|
||||
.scroll-limit {max-height: 140px;}
|
||||
.avatar {width: 18px; height: 18px; border-radius: 50%;}
|
||||
.acct-row {display: grid; grid-template-columns: 6px 18px 1fr auto; align-items: center; gap: 6px; width: 100%;}
|
||||
.acct-text {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-size: 12px; color: #303133;}
|
||||
.status-dot {width: 6px; height: 6px; border-radius: 50%; display: inline-block;}
|
||||
.status-dot.on {background: #22c55e;}
|
||||
.status-dot.off {background: #f87171;}
|
||||
.acct-item {padding: 6px 8px; border-radius: 6px; margin-bottom: 4px;}
|
||||
.acct-item:last-child {margin-bottom: 0;}
|
||||
.acct-item.selected {background: #eef5ff; box-shadow: inset 0 0 0 1px #d6e4ff;}
|
||||
.acct-item.disabled {cursor: not-allowed; opacity: 0.6;}
|
||||
.acct-check {display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: transparent; color: #111; font-size: 12px;}
|
||||
.account-list :deep(.el-scrollbar__view) {padding: 0;}
|
||||
.account-list::-webkit-scrollbar {width: 0; height: 0;}
|
||||
.trademark-panel :deep(.el-select),
|
||||
.trademark-panel :deep(.el-input__wrapper) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.trademark-panel :deep(.el-select .el-input__wrapper) {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.trademark-panel :deep(.el-button) {
|
||||
border-radius: 6px;
|
||||
}
|
||||
.trademark-panel :deep(.el-input__wrapper) {width: 100%;}
|
||||
.trademark-panel :deep(.el-select .el-input__wrapper) {border-radius: 6px;}
|
||||
.trademark-panel :deep(.el-button) {border-radius: 6px;}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -166,36 +166,10 @@ async function saveBrandLogoInBackground(username: string) {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.auth-logo {
|
||||
width: 160px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.auth-dialog {
|
||||
--el-color-primary: #1677FF;
|
||||
}
|
||||
|
||||
.auth-dialog :deep(.el-button--primary) {
|
||||
background-color: #1677FF;
|
||||
border-color: #1677FF;
|
||||
}
|
||||
|
||||
.auth-title-wrap {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.auth-title {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #1f1f1f;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.auth-subtitle {
|
||||
margin: 6px 0 0;
|
||||
font-size: 12px;
|
||||
color: #8c8c8c;
|
||||
text-align: left;
|
||||
}
|
||||
.auth-logo {width: 160px; height: auto;}
|
||||
.auth-dialog {--el-color-primary: #1677FF;}
|
||||
.auth-dialog :deep(.el-button--primary) {background-color: #1677FF; border-color: #1677FF;}
|
||||
.auth-title-wrap {margin-bottom: 12px;}
|
||||
.auth-title {margin: 0; font-size: 18px; font-weight: 700; color: #1f1f1f; text-align: left;}
|
||||
.auth-subtitle {margin: 6px 0 0; font-size: 12px; color: #8c8c8c; text-align: left;}
|
||||
</style>
|
||||
@@ -185,36 +185,10 @@ function backToLogin() {
|
||||
</el-dialog>
|
||||
</template>
|
||||
<style scoped>
|
||||
.auth-logo {
|
||||
width: 160px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.auth-dialog {
|
||||
--el-color-primary: #1677FF;
|
||||
}
|
||||
|
||||
.auth-dialog :deep(.el-button--primary) {
|
||||
background-color: #1677FF;
|
||||
border-color: #1677FF;
|
||||
}
|
||||
|
||||
.auth-title-wrap {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.auth-title {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #1f1f1f;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.auth-subtitle {
|
||||
margin: 6px 0 0;
|
||||
font-size: 12px;
|
||||
color: #8c8c8c;
|
||||
text-align: left;
|
||||
}
|
||||
.auth-logo {width: 160px; height: auto;}
|
||||
.auth-dialog {--el-color-primary: #1677FF;}
|
||||
.auth-dialog :deep(.el-button--primary) {background-color: #1677FF; border-color: #1677FF;}
|
||||
.auth-title-wrap {margin-bottom: 12px;}
|
||||
.auth-title {margin: 0; font-size: 18px; font-weight: 700; color: #1f1f1f; text-align: left;}
|
||||
.auth-subtitle {margin: 6px 0 0; font-size: 12px; color: #8c8c8c; text-align: left;}
|
||||
</style>
|
||||
@@ -174,46 +174,45 @@ export default defineComponent({ name: 'AccountManager' })
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.acc-manager :deep(.el-dialog__header) { text-align:center; }
|
||||
.layout { display:grid; grid-template-columns: 160px 1fr; gap: 12px; min-height: 340px; }
|
||||
.sider { border-right: 1px solid #ebeef5; padding-right: 10px; }
|
||||
.sider-title { color:#303133; font-size:13px; font-weight: 600; margin-bottom: 10px; text-align: left; }
|
||||
.nav { display:flex; flex-direction: column; gap: 4px; }
|
||||
.nav-item { padding: 6px 8px; border-radius: 4px; cursor: pointer; color:#606266; font-size: 12px; transition: all 0.2s; text-align: left; }
|
||||
.nav-item:hover { background:#f0f2f5; }
|
||||
.nav-item.active { background:#e6f4ff; color:#409EFF; font-weight: 600; }
|
||||
.platform-bar { font-weight: 600; color:#303133; margin: 0 0 12px 0; text-align: left; font-size: 14px; padding-bottom: 8px; border-bottom: 1px solid #ebeef5; }
|
||||
.content { display:flex; flex-direction: column; min-width: 0; }
|
||||
.top { display:flex; flex-direction: column; align-items:center; gap: 6px; margin-bottom: 12px; }
|
||||
.hero { width: 160px; height: auto; }
|
||||
.head-main { text-align:center; }
|
||||
.main-title { font-size: 16px; font-weight: 600; color:#303133; margin-bottom: 4px; }
|
||||
.main-sub { color:#909399; font-size: 11px; line-height: 1.4; }
|
||||
.upgrade { color:#409EFF; cursor: pointer; font-weight: 600; transition: all 0.2s ease; }
|
||||
.upgrade:hover { color:#0d5ed6; text-decoration: underline; }
|
||||
.list { border:1px solid #ebeef5; border-radius: 6px; background: #fff; flex: 0 0 auto; width: 100%; max-height: 160px; overflow-y: auto; }
|
||||
.list.compact { max-height: 48px; }
|
||||
|
||||
.acc-manager :deep(.el-dialog__header) {text-align:center;}
|
||||
.layout {display:grid; grid-template-columns: 160px 1fr; gap: 12px; min-height: 340px;}
|
||||
.sider {border-right: 1px solid #ebeef5; padding-right: 10px;}
|
||||
.sider-title {color:#303133; font-size:13px; font-weight: 600; margin-bottom: 10px; text-align: left;}
|
||||
.nav {display:flex; flex-direction: column; gap: 4px;}
|
||||
.nav-item {padding: 6px 8px; border-radius: 4px; cursor: pointer; color:#606266; font-size: 12px; transition: all 0.2s; text-align: left;}
|
||||
.nav-item:hover {background:#f0f2f5;}
|
||||
.nav-item.active {background:#e6f4ff; color:#409EFF; font-weight: 600;}
|
||||
.platform-bar {font-weight: 600; color:#303133; margin: 0 0 12px 0; text-align: left; font-size: 14px; padding-bottom: 8px; border-bottom: 1px solid #ebeef5;}
|
||||
.content {display:flex; flex-direction: column; min-width: 0;}
|
||||
.top {display:flex; flex-direction: column; align-items:center; gap: 6px; margin-bottom: 12px;}
|
||||
.hero {width: 160px; height: auto;}
|
||||
.head-main {text-align:center;}
|
||||
.main-title {font-size: 16px; font-weight: 600; color:#303133; margin-bottom: 4px;}
|
||||
.main-sub {color:#909399; font-size: 11px; line-height: 1.4;}
|
||||
.upgrade {color:#409EFF; cursor: pointer; font-weight: 600; transition: all 0.2s ease;}
|
||||
.upgrade:hover {color:#0d5ed6; text-decoration: underline;}
|
||||
.list {border:1px solid #ebeef5; border-radius: 6px; background: #fff; flex: 0 0 auto; width: 100%; max-height: 160px; overflow-y: auto;}
|
||||
.list.compact {max-height: 48px;}
|
||||
/* 添加账号对话框样式 */
|
||||
.add-account-dialog .aad-header { display:flex; flex-direction: column; align-items:center; gap:8px; padding-top: 8px; width: 100%; }
|
||||
.add-account-dialog .aad-icon { width: 120px; height: auto; }
|
||||
.add-account-dialog .aad-title { font-weight: 600; font-size: 18px; text-align: center; }
|
||||
.add-account-dialog .aad-row { margin-top: 12px; }
|
||||
:deep(.add-account-dialog .el-dialog__header) { text-align: center; padding-right: 0; display: block; }
|
||||
.btn-blue { background: #1677FF; border-color: #1677FF; color: #fff; }
|
||||
.btn-blue:hover { background: #0d5ed6; border-color: #0d5ed6; }
|
||||
.row { display:grid; grid-template-columns: 8px 1fr 120px 60px; gap: 8px; align-items:center; padding: 4px 8px; border-bottom: 1px solid #f5f5f5; height: 28px; }
|
||||
.row:last-child { border-bottom:none; }
|
||||
.row:hover { background:#fafafa; }
|
||||
.dot { width:6px; height:6px; border-radius:50%; justify-self: center; }
|
||||
.dot.on { background:#52c41a; }
|
||||
.dot.off { background:#ff4d4f; }
|
||||
.user-info { display: flex; align-items: center; gap: 8px; min-width: 0; }
|
||||
.avatar { width:22px; height:22px; border-radius:50%; object-fit: cover; }
|
||||
.name { font-weight:500; font-size: 13px; color:#303133; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.date { color:#999; font-size:11px; text-align: center; }
|
||||
.footer { display:flex; justify-content:center; padding-top: 10px; }
|
||||
.btn { width: 180px; height: 32px; font-size: 13px; }
|
||||
.add-account-dialog .aad-header {display:flex; flex-direction: column; align-items:center; gap:8px; padding-top: 8px; width: 100%;}
|
||||
.add-account-dialog .aad-icon {width: 120px; height: auto;}
|
||||
.add-account-dialog .aad-title {font-weight: 600; font-size: 18px; text-align: center;}
|
||||
.add-account-dialog .aad-row {margin-top: 12px;}
|
||||
:deep(.add-account-dialog .el-dialog__header) {text-align: center; padding-right: 0; display: block;}
|
||||
.btn-blue {background: #1677FF; border-color: #1677FF; color: #fff;}
|
||||
.btn-blue:hover {background: #0d5ed6; border-color: #0d5ed6;}
|
||||
.row {display:grid; grid-template-columns: 8px 1fr 120px 60px; gap: 8px; align-items:center; padding: 4px 8px; border-bottom: 1px solid #f5f5f5; height: 28px;}
|
||||
.row:last-child {border-bottom:none;}
|
||||
.row:hover {background:#fafafa;}
|
||||
.dot {width:6px; height:6px; border-radius:50%; justify-self: center;}
|
||||
.dot.on {background:#52c41a;}
|
||||
.dot.off {background:#ff4d4f;}
|
||||
.user-info {display: flex; align-items: center; gap: 8px; min-width: 0;}
|
||||
.avatar {width:22px; height:22px; border-radius:50%; object-fit: cover;}
|
||||
.name {font-weight:500; font-size: 13px; color:#303133; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
|
||||
.date {color:#999; font-size:11px; text-align: center;}
|
||||
.footer {display:flex; justify-content:center; padding-top: 10px;}
|
||||
.btn {width: 180px; height: 32px; font-size: 13px;}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
@@ -890,694 +890,135 @@ onMounted(() => {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* 对话框遮罩 */
|
||||
.dialog-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2000;
|
||||
}
|
||||
|
||||
/* 对话框遮罩 */
|
||||
.dialog-mask {position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 2000;}
|
||||
/* 对话框容器 */
|
||||
.dialog-container {
|
||||
width: 540px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 80vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dialog-container {width: 540px; background: #FFFFFF; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); display: flex; flex-direction: column; max-height: 80vh; overflow: hidden;}
|
||||
/* 对话框动画 */
|
||||
.dialog-fade-enter-active,
|
||||
.dialog-fade-leave-active {
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.dialog-fade-leave-active {transition: opacity 0.2s ease;}
|
||||
.dialog-fade-enter-active .dialog-container,
|
||||
.dialog-fade-leave-active .dialog-container {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.dialog-fade-leave-active .dialog-container {transition: transform 0.2s ease;}
|
||||
.dialog-fade-enter-from,
|
||||
.dialog-fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.dialog-fade-leave-to {opacity: 0;}
|
||||
.dialog-fade-enter-from .dialog-container,
|
||||
.dialog-fade-leave-to .dialog-container {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.settings-layout {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dialog-fade-leave-to .dialog-container {transform: scale(0.95);}
|
||||
.settings-layout {display: flex; height: 100%; flex: 1; overflow: hidden;}
|
||||
/* 左侧导航 */
|
||||
.settings-sidebar {
|
||||
width: 130px;
|
||||
flex-shrink: 0;
|
||||
background: #FFFFFF;
|
||||
border-right: 1px solid #E5E6EB;
|
||||
padding: 0;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 12px 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1F2937;
|
||||
border-bottom: 1px solid #E5E6EB;
|
||||
text-align: left;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.settings-sidebar::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.settings-sidebar::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.settings-sidebar::-webkit-scrollbar-thumb {
|
||||
background: #C9CDD4;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.settings-sidebar::-webkit-scrollbar-thumb:hover {
|
||||
background: #86909C;
|
||||
}
|
||||
|
||||
.sidebar-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 12px;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
color: #6B7280;
|
||||
font-size: 13px;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sidebar-item:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.sidebar-item:hover {
|
||||
background: #F3F6FF;
|
||||
color: #165DFF;
|
||||
}
|
||||
|
||||
.sidebar-item.active {
|
||||
background: #F3F6FF;
|
||||
color: #165DFF;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.sidebar-item.active::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 3px;
|
||||
height: 100%;
|
||||
background: #165DFF;
|
||||
}
|
||||
|
||||
.sidebar-icon {
|
||||
font-size: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sidebar-text {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.settings-sidebar {width: 130px; flex-shrink: 0; background: #FFFFFF; border-right: 1px solid #E5E6EB; padding: 0; overflow-y: auto; display: flex; flex-direction: column;}
|
||||
.sidebar-header {padding: 12px 12px; font-size: 14px; font-weight: 600; color: #1F2937; border-bottom: 1px solid #E5E6EB; text-align: left; flex-shrink: 0;}
|
||||
.settings-sidebar::-webkit-scrollbar {width: 6px;}
|
||||
.settings-sidebar::-webkit-scrollbar-track {background: transparent;}
|
||||
.settings-sidebar::-webkit-scrollbar-thumb {background: #C9CDD4; border-radius: 3px;}
|
||||
.settings-sidebar::-webkit-scrollbar-thumb:hover {background: #86909C;}
|
||||
.sidebar-item {display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin: 0; cursor: pointer; transition: all 0.2s ease; color: #6B7280; font-size: 13px; user-select: none; position: relative;}
|
||||
.sidebar-item:first-of-type {margin-top: 0;}
|
||||
.sidebar-item:hover {background: #F3F6FF; color: #165DFF;}
|
||||
.sidebar-item.active {background: #F3F6FF; color: #165DFF; font-weight: 500;}
|
||||
.sidebar-item.active::before {content: ''; position: absolute; left: 0; top: 0; width: 3px; height: 100%; background: #165DFF;}
|
||||
.sidebar-icon {font-size: 16px; flex-shrink: 0;}
|
||||
.sidebar-text {font-size: 13px;}
|
||||
/* 右侧内容区域 */
|
||||
.settings-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.settings-content {flex: 1; display: flex; flex-direction: column; overflow: hidden;}
|
||||
/* 滚动内容区 */
|
||||
.settings-main {
|
||||
flex: 1;
|
||||
padding: 12px;
|
||||
overflow-y: auto;
|
||||
background: #F9FAFB;
|
||||
}
|
||||
|
||||
.settings-main::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.settings-main::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.settings-main::-webkit-scrollbar-thumb {
|
||||
background: #C9CDD4;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.settings-main::-webkit-scrollbar-thumb:hover {
|
||||
background: #86909C;
|
||||
}
|
||||
|
||||
.setting-section {
|
||||
background: #FFFFFF;
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
margin-bottom: 10px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
border: 1px solid #E5E6EB;
|
||||
}
|
||||
|
||||
.export-section {
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1F2937;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.section-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.vip-exclusive-logo {
|
||||
width: 60px;
|
||||
height: auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.section-header .section-title {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 11px;
|
||||
color: #86909C;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.section-subtitle-text {
|
||||
font-size: 12px;
|
||||
color: #86909C;
|
||||
margin-bottom: 8px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.cache-desc {
|
||||
font-size: 13px;
|
||||
color: #86909C;
|
||||
}
|
||||
|
||||
.setting-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.setting-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.setting-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.setting-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.setting-label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #1F2937;
|
||||
margin-bottom: 6px;
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.setting-desc {
|
||||
font-size: 12px;
|
||||
color: #86909C;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 8px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.input-button-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.path-input {
|
||||
flex: 1;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.path-input :deep(.el-input__wrapper) {
|
||||
border-color: #E5E6EB;
|
||||
box-shadow: none;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.path-input :deep(.el-input__inner) {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.path-input :deep(.el-input__wrapper:hover) {
|
||||
border-color: #165DFF;
|
||||
}
|
||||
|
||||
.path-input :deep(.el-input__wrapper.is-focus) {
|
||||
border-color: #165DFF;
|
||||
box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.1);
|
||||
}
|
||||
|
||||
.input-button-row :deep(.el-button) {
|
||||
padding: 6px 16px;
|
||||
font-size: 13px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.info-content {
|
||||
background: #F8F9FA;
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.info-content p {
|
||||
margin: 0 0 6px 0;
|
||||
}
|
||||
|
||||
.info-content p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
padding: 5px 14px;
|
||||
border-top: 1px solid #E5E6EB;
|
||||
background: #FFFFFF;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.dialog-footer :deep(.el-button) {
|
||||
padding: 5px 14px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.dialog-footer :deep(.el-button--primary) {
|
||||
background: #165DFF;
|
||||
border-color: #165DFF;
|
||||
}
|
||||
|
||||
.dialog-footer :deep(.el-button--primary:hover) {
|
||||
background: #4080FF;
|
||||
border-color: #4080FF;
|
||||
}
|
||||
|
||||
.dialog-footer :deep(.el-button--default) {
|
||||
border-color: #E5E6EB;
|
||||
color: #6B7280;
|
||||
}
|
||||
|
||||
.dialog-footer :deep(.el-button--default:hover) {
|
||||
border-color: #165DFF;
|
||||
color: #165DFF;
|
||||
background: #F3F6FF;
|
||||
}
|
||||
|
||||
.feedback-form {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.feedback-form .setting-item + .setting-item {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.settings-main {flex: 1; padding: 12px; overflow-y: auto; background: #F9FAFB;}
|
||||
.settings-main::-webkit-scrollbar {width: 6px;}
|
||||
.settings-main::-webkit-scrollbar-track {background: transparent;}
|
||||
.settings-main::-webkit-scrollbar-thumb {background: #C9CDD4; border-radius: 3px;}
|
||||
.settings-main::-webkit-scrollbar-thumb:hover {background: #86909C;}
|
||||
.setting-section {background: #FFFFFF; border-radius: 6px; padding: 12px; margin-bottom: 10px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); border: 1px solid #E5E6EB;}
|
||||
.export-section {padding: 10px 12px;}
|
||||
.section-header {display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px;}
|
||||
.section-title {font-size: 14px; font-weight: 600; color: #1F2937; text-align: left;}
|
||||
.section-title-row {display: flex; align-items: center; gap: 8px; margin-bottom: 8px;}
|
||||
.vip-exclusive-logo {width: 60px; height: auto; vertical-align: middle;}
|
||||
.section-header .section-title {margin-bottom: 0;}
|
||||
.section-subtitle {font-size: 11px; color: #86909C; font-weight: normal;}
|
||||
.section-subtitle-text {font-size: 12px; color: #86909C; margin-bottom: 8px; text-align: left;}
|
||||
.cache-desc {font-size: 13px; color: #86909C;}
|
||||
.setting-item {margin-bottom: 0;}
|
||||
.setting-item:last-child {margin-bottom: 0;}
|
||||
.setting-row {display: flex; align-items: center; justify-content: space-between;}
|
||||
.setting-info {flex: 1;}
|
||||
.setting-label {font-size: 13px; font-weight: 500; color: #1F2937; margin-bottom: 6px; display: block; text-align: left;}
|
||||
.setting-desc {font-size: 12px; color: #86909C; line-height: 1.5; margin-bottom: 8px; text-align: left;}
|
||||
.input-button-row {display: flex; align-items: center;}
|
||||
.path-input {flex: 1; margin-right: 8px;}
|
||||
.path-input :deep(.el-input__wrapper) {border-color: #E5E6EB; box-shadow: none; transition: all 0.2s;}
|
||||
.path-input :deep(.el-input__inner) {font-size: 13px;}
|
||||
.path-input :deep(.el-input__wrapper:hover) {border-color: #165DFF;}
|
||||
.path-input :deep(.el-input__wrapper.is-focus) {border-color: #165DFF; box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.1);}
|
||||
.input-button-row :deep(.el-button) {padding: 6px 16px; font-size: 13px; flex-shrink: 0;}
|
||||
.info-content {background: #F8F9FA; border-radius: 6px; padding: 12px; font-size: 13px; color: #606266; line-height: 1.5;}
|
||||
.info-content p {margin: 0 0 6px 0;}
|
||||
.info-content p:last-child {margin-bottom: 0;}
|
||||
.dialog-footer {display: flex; justify-content: flex-end; gap: 10px; padding: 5px 14px; border-top: 1px solid #E5E6EB; background: #FFFFFF; flex-shrink: 0;}
|
||||
.dialog-footer :deep(.el-button) {padding: 5px 14px; border-radius: 6px; font-size: 12px;}
|
||||
.dialog-footer :deep(.el-button--primary) {background: #165DFF; border-color: #165DFF;}
|
||||
.dialog-footer :deep(.el-button--primary:hover) {background: #4080FF; border-color: #4080FF;}
|
||||
.dialog-footer :deep(.el-button--default) {border-color: #E5E6EB; color: #6B7280;}
|
||||
.dialog-footer :deep(.el-button--default:hover) {border-color: #165DFF; color: #165DFF; background: #F3F6FF;}
|
||||
.feedback-form {padding-top: 0;}
|
||||
.feedback-form .setting-item + .setting-item {margin-top: 8px;}
|
||||
/* 图片预览容器 */
|
||||
.image-preview-wrapper {
|
||||
position: relative;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.preview-image {
|
||||
width: 100%;
|
||||
display: block;
|
||||
object-fit: contain;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.image-preview-wrapper {position: relative; width: 75%;}
|
||||
.preview-image {width: 100%; display: block; object-fit: contain; border-radius: 8px;}
|
||||
/* 占位符 */
|
||||
.splash-placeholder {
|
||||
width: 75% !important;
|
||||
height: auto !important;
|
||||
border: 2px dashed #d9d9d9 !important;
|
||||
border-radius: 8px !important;
|
||||
background: #fafafa !important;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.splash-placeholder:hover {
|
||||
border-color: #1677ff !important;
|
||||
background: #f0f7ff !important;
|
||||
}
|
||||
|
||||
.placeholder-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 30px 20px;
|
||||
}
|
||||
|
||||
.placeholder-icon {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.placeholder-text {
|
||||
font-size: 13px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
.image-buttons {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.image-preview-wrapper:hover .image-buttons {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.img-btn {
|
||||
padding: 6px 14px;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.img-btn:hover:not(:disabled) {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.img-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.feedback-form :deep(.el-textarea__inner) {
|
||||
border-color: #E5E6EB;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.feedback-form :deep(.el-textarea__inner:hover) {
|
||||
border-color: #165DFF;
|
||||
}
|
||||
|
||||
.feedback-form :deep(.el-textarea__inner:focus) {
|
||||
border-color: #165DFF;
|
||||
box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.1);
|
||||
}
|
||||
|
||||
.feedback-form :deep(.el-select) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.feedback-form :deep(.el-select .el-input__inner) {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.feedback-form :deep(.el-select .el-input__wrapper) {
|
||||
border-color: #E5E6EB;
|
||||
}
|
||||
|
||||
.feedback-form :deep(.el-select .el-input__wrapper:hover) {
|
||||
border-color: #165DFF;
|
||||
}
|
||||
|
||||
.feedback-form :deep(.el-select .el-input__wrapper.is-focus) {
|
||||
border-color: #165DFF;
|
||||
box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.1);
|
||||
}
|
||||
|
||||
.feedback-form .input-button-row :deep(.el-button) {
|
||||
height: 32px;
|
||||
padding: 0 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.feedback-form .input-button-row :deep(.el-button--primary) {
|
||||
background: #165DFF;
|
||||
border-color: #165DFF;
|
||||
}
|
||||
|
||||
.feedback-form .input-button-row :deep(.el-button--primary:hover) {
|
||||
background: #4080FF;
|
||||
border-color: #4080FF;
|
||||
}
|
||||
|
||||
.splash-placeholder {width: 75% !important; height: auto !important; border: 2px dashed #d9d9d9 !important; border-radius: 8px !important; background: #fafafa !important; cursor: pointer; transition: all 0.3s;}
|
||||
.splash-placeholder:hover {border-color: #1677ff !important; background: #f0f7ff !important;}
|
||||
.placeholder-content {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 30px 20px;}
|
||||
.placeholder-icon {font-size: 28px;}
|
||||
.placeholder-text {font-size: 13px; color: rgba(0, 0, 0, 0.45);}
|
||||
.image-buttons {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; gap: 8px; opacity: 0; transition: opacity 0.2s ease;}
|
||||
.image-preview-wrapper:hover .image-buttons {opacity: 1;}
|
||||
.img-btn {padding: 6px 14px; background: rgba(0, 0, 0, 0.6); border: none; border-radius: 4px; color: #fff; font-size: 12px; cursor: pointer; transition: background 0.2s ease;}
|
||||
.img-btn:hover:not(:disabled) {background: rgba(0, 0, 0, 0.8);}
|
||||
.img-btn:disabled {opacity: 0.5; cursor: not-allowed;}
|
||||
.feedback-form :deep(.el-textarea__inner) {border-color: #E5E6EB; border-radius: 6px; font-size: 13px; padding: 8px 12px;}
|
||||
.feedback-form :deep(.el-textarea__inner:hover) {border-color: #165DFF;}
|
||||
.feedback-form :deep(.el-textarea__inner:focus) {border-color: #165DFF; box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.1);}
|
||||
.feedback-form :deep(.el-select) {width: 100%;}
|
||||
.feedback-form :deep(.el-select .el-input__inner) {font-size: 13px;}
|
||||
.feedback-form :deep(.el-select .el-input__wrapper) {border-color: #E5E6EB;}
|
||||
.feedback-form :deep(.el-select .el-input__wrapper:hover) {border-color: #165DFF;}
|
||||
.feedback-form :deep(.el-select .el-input__wrapper.is-focus) {border-color: #165DFF; box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.1);}
|
||||
.feedback-form .input-button-row :deep(.el-button) {height: 32px; padding: 0 16px; font-size: 13px;}
|
||||
.feedback-form .input-button-row :deep(.el-button--primary) {background: #165DFF; border-color: #165DFF;}
|
||||
.feedback-form .input-button-row :deep(.el-button--primary:hover) {background: #4080FF; border-color: #4080FF;}
|
||||
/* 单选框组 */
|
||||
.compact-radio-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.compact-radio-group :deep(.el-radio) {
|
||||
margin-right: 0;
|
||||
height: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.compact-radio-group :deep(.el-radio__label) {
|
||||
font-size: 13px;
|
||||
color: #1F2937;
|
||||
padding-left: 8px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.compact-radio-group :deep(.el-radio__inner) {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.compact-radio-group :deep(.el-radio__input) {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.compact-radio-group :deep(.el-radio__input.is-checked .el-radio__inner) {
|
||||
background: #165DFF;
|
||||
border-color: #165DFF;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.compact-radio-group :deep(.el-radio__inner::after) {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.compact-radio-group :deep(.el-radio__input.is-checked + .el-radio__label) {
|
||||
color: #165DFF;
|
||||
}
|
||||
|
||||
.compact-radio-group {display: flex; flex-direction: column; gap: 10px; align-items: flex-start;}
|
||||
.compact-radio-group :deep(.el-radio) {margin-right: 0; height: auto; display: flex; align-items: center;}
|
||||
.compact-radio-group :deep(.el-radio__label) {font-size: 13px; color: #1F2937; padding-left: 8px; line-height: 1.4;}
|
||||
.compact-radio-group :deep(.el-radio__inner) {width: 16px; height: 16px; border-width: 1px;}
|
||||
.compact-radio-group :deep(.el-radio__input) {flex-shrink: 0;}
|
||||
.compact-radio-group :deep(.el-radio__input.is-checked .el-radio__inner) {background: #165DFF; border-color: #165DFF; border-width: 1px;}
|
||||
.compact-radio-group :deep(.el-radio__inner::after) {width: 6px; height: 6px;}
|
||||
.compact-radio-group :deep(.el-radio__input.is-checked + .el-radio__label) {color: #165DFF;}
|
||||
/* 更新相关样式 */
|
||||
.update-info-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.version-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.version-label {
|
||||
font-size: 13px;
|
||||
color: #6B7280;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.version-value {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #165DFF;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.version-display :deep(.el-button) {
|
||||
padding: 6px 16px;
|
||||
font-size: 13px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.checkbox-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.checkbox-row :deep(.el-checkbox) {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.checkbox-row :deep(.el-checkbox__label) {
|
||||
font-size: 13px;
|
||||
color: #1F2937;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.checkbox-row :deep(.el-checkbox__inner) {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.checkbox-row :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
|
||||
background: #165DFF;
|
||||
border-color: #165DFF;
|
||||
}
|
||||
|
||||
.update-notes-section {
|
||||
background: #F8F9FA;
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.notes-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
margin: 0 0 6px 0;
|
||||
}
|
||||
|
||||
.notes-content {
|
||||
font-size: 12px;
|
||||
color: #6B7280;
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.update-info-row {display: flex; flex-direction: column; gap: 8px;}
|
||||
.version-display {display: flex; align-items: center; gap: 10px;}
|
||||
.version-label {font-size: 13px; color: #6B7280; flex-shrink: 0;}
|
||||
.version-value {font-size: 13px; font-weight: 600; color: #165DFF; flex: 1;}
|
||||
.version-display :deep(.el-button) {padding: 6px 16px; font-size: 13px; flex-shrink: 0;}
|
||||
.checkbox-row {display: flex; align-items: center;}
|
||||
.checkbox-row :deep(.el-checkbox) {height: auto;}
|
||||
.checkbox-row :deep(.el-checkbox__label) {font-size: 13px; color: #1F2937; padding-left: 8px;}
|
||||
.checkbox-row :deep(.el-checkbox__inner) {width: 16px; height: 16px;}
|
||||
.checkbox-row :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {background: #165DFF; border-color: #165DFF;}
|
||||
.update-notes-section {background: #F8F9FA; border-radius: 6px; padding: 10px;}
|
||||
.notes-title {font-size: 13px; font-weight: 600; color: #374151; margin: 0 0 6px 0;}
|
||||
.notes-content {font-size: 12px; color: #6B7280; line-height: 1.6; white-space: pre-wrap;}
|
||||
/* 平台项样式 */
|
||||
.platform-item {
|
||||
margin-bottom: 8px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid #E5E6EB;
|
||||
}
|
||||
|
||||
.platform-item:last-child {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.platform-item:first-child {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.platform-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.platform-icon {
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.platform-name {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #1F2937;
|
||||
}
|
||||
|
||||
.platform-item {margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #E5E6EB;}
|
||||
.platform-item:last-child {margin-bottom: 0; padding-bottom: 0; border-bottom: none;}
|
||||
.platform-item:first-child {margin-top: 2px;}
|
||||
.platform-header {display: flex; align-items: center; gap: 6px; margin-bottom: 6px;}
|
||||
.platform-icon {font-size: 16px; line-height: 1;}
|
||||
.platform-name {font-size: 13px; font-weight: 600; color: #1F2937;}
|
||||
/* 占位符 */
|
||||
.splash-placeholder {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
border-radius: 6px;
|
||||
border: 2px dashed #E5E6EB;
|
||||
background: #F8F9FA;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.placeholder-icon {
|
||||
font-size: 32px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.placeholder-text {
|
||||
font-size: 13px;
|
||||
color: #86909C;
|
||||
}
|
||||
.splash-placeholder {width: 100%; height: 180px; border-radius: 6px; border: 2px dashed #E5E6EB; background: #F8F9FA; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;}
|
||||
.placeholder-icon {font-size: 32px; opacity: 0.5;}
|
||||
.placeholder-text {font-size: 13px; color: #86909C;}
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
@@ -93,116 +93,23 @@ function copyWechat() {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.trial-expired-dialog :deep(.el-dialog) {
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.trial-expired-dialog :deep(.el-dialog__header) {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.trial-expired-dialog :deep(.el-dialog__body) {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.expired-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.expired-logo {
|
||||
width: 160px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.expired-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #1f1f1f;
|
||||
margin: 0 0 8px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.expired-subtitle {
|
||||
font-size: 12px;
|
||||
color: #8c8c8c;
|
||||
margin: 0 0 20px 0;
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.wechat-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 16px;
|
||||
background: #f5f5f5;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 20px;
|
||||
width: 90%;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wechat-card:hover {
|
||||
background: #e8f5e9;
|
||||
box-shadow: 0 2px 8px rgba(9, 187, 7, 0.15);
|
||||
}
|
||||
|
||||
.wechat-icon {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.wechat-icon svg {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.wechat-info {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.wechat-label {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.wechat-id {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #1f1f1f;
|
||||
}
|
||||
|
||||
.copy-icon {
|
||||
margin-left: auto;
|
||||
font-size: 16px;
|
||||
opacity: 0.5;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.wechat-card:hover .copy-icon {
|
||||
opacity: 1;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
background: #1677FF;
|
||||
border-color: #1677FF;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.confirm-btn:hover {
|
||||
background: #4096ff;
|
||||
border-color: #4096ff;
|
||||
}
|
||||
.trial-expired-dialog :deep(.el-dialog) {border-radius: 16px;}
|
||||
.trial-expired-dialog :deep(.el-dialog__header) {padding: 0; margin: 0;}
|
||||
.trial-expired-dialog :deep(.el-dialog__body) {padding: 20px;}
|
||||
.expired-content {display: flex; flex-direction: column; align-items: center; padding: 10px 0;}
|
||||
.expired-logo {width: 160px; height: auto;}
|
||||
.expired-title {font-size: 18px; font-weight: 700; color: #1f1f1f; margin: 0 0 8px 0; text-align: center;}
|
||||
.expired-subtitle {font-size: 12px; color: #8c8c8c; margin: 0 0 20px 0; text-align: center; line-height: 1.5;}
|
||||
.wechat-card {display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #f5f5f5; border-radius: 6px; margin-bottom: 20px; width: 90%; cursor: pointer; transition: all 0.3s; position: relative;}
|
||||
.wechat-card:hover {background: #e8f5e9; box-shadow: 0 2px 8px rgba(9, 187, 7, 0.15);}
|
||||
.wechat-icon {flex-shrink: 0;}
|
||||
.wechat-icon svg {width: 36px; height: 36px;}
|
||||
.wechat-info {flex: 1; text-align: left;}
|
||||
.wechat-label {font-size: 12px; color: #666; margin-bottom: 2px;}
|
||||
.wechat-id {font-size: 15px; font-weight: 500; color: #1f1f1f;}
|
||||
.copy-icon {margin-left: auto; font-size: 16px; opacity: 0.5; transition: all 0.3s;}
|
||||
.wechat-card:hover .copy-icon {opacity: 1; transform: scale(1.1);}
|
||||
.confirm-btn {height: 40px; font-size: 14px; font-weight: 500; background: #1677FF; border-color: #1677FF; border-radius: 6px;}
|
||||
.confirm-btn:hover {background: #4096ff; border-color: #4096ff;}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -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>
|
||||
@@ -140,227 +140,44 @@ onMounted(async () => {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.top-navbar {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 16px;
|
||||
background: #ffffff;
|
||||
border-bottom: 1px solid #e8eaec;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.03);
|
||||
-webkit-app-region: drag;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.navbar-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex: 0 0 auto;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.navbar-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.navbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex: 0 0 auto;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.nav-controls {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
color: #606266;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
outline: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.arrow-icon path {
|
||||
stroke: currentColor;
|
||||
}
|
||||
|
||||
.nav-btn:hover:not(:disabled) {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
color: #409EFF;
|
||||
}
|
||||
|
||||
.nav-btn:hover:not(:disabled) .arrow-icon path {
|
||||
stroke: #409EFF;
|
||||
}
|
||||
|
||||
.top-navbar {height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; background: #ffffff; border-bottom: 1px solid #e8eaec; box-shadow: 0 1px 3px rgba(0,0,0,0.03); -webkit-app-region: drag; user-select: none;}
|
||||
.navbar-left {display: flex; align-items: center; gap: 8px; flex: 0 0 auto; -webkit-app-region: no-drag;}
|
||||
.navbar-center {display: flex; justify-content: center; flex: 1;}
|
||||
.navbar-right {display: flex; align-items: center; gap: 8px; flex: 0 0 auto; -webkit-app-region: no-drag;}
|
||||
.nav-controls {display: flex; gap: 4px;}
|
||||
.nav-btn {width: 28px; height: 28px; border: none; background: transparent; cursor: pointer; font-size: 16px; color: #606266; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; outline: none; border-radius: 4px;}
|
||||
.arrow-icon {width: 18px; height: 18px; flex-shrink: 0;}
|
||||
.arrow-icon path {stroke: currentColor;}
|
||||
.nav-btn:hover:not(:disabled) {background: rgba(0, 0, 0, 0.05); color: #409EFF;}
|
||||
.nav-btn:hover:not(:disabled) .arrow-icon path {stroke: #409EFF;}
|
||||
.nav-btn:focus,
|
||||
.nav-btn:active {
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.nav-btn:disabled {
|
||||
cursor: not-allowed;
|
||||
background: transparent;
|
||||
color: #d0d0d0;
|
||||
}
|
||||
|
||||
.nav-btn:disabled .arrow-icon path {
|
||||
stroke: #d0d0d0;
|
||||
}
|
||||
|
||||
.nav-btn-round {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
color: #606266;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.nav-btn-round:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
color: #409EFF;
|
||||
}
|
||||
|
||||
.nav-btn:active {outline: none; border: none;}
|
||||
.nav-btn:disabled {cursor: not-allowed; background: transparent; color: #d0d0d0;}
|
||||
.nav-btn:disabled .arrow-icon path {stroke: #d0d0d0;}
|
||||
.nav-btn-round {width: 28px; height: 28px; border: none; border-radius: 4px; background: transparent; cursor: pointer; font-size: 16px; color: #606266; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; outline: none;}
|
||||
.nav-btn-round:hover {background: rgba(0, 0, 0, 0.05); color: #409EFF;}
|
||||
.nav-btn-round:focus,
|
||||
.nav-btn-round:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.breadcrumbs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.separator {
|
||||
margin: 0 6px;
|
||||
color: #c0c4cc;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.nav-btn-round:active {outline: none;}
|
||||
.breadcrumbs {display: flex; align-items: center; color: #606266; font-size: 14px;}
|
||||
.separator {margin: 0 6px; color: #c0c4cc; font-size: 14px;}
|
||||
/* 窗口控制按钮 */
|
||||
.window-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.window-btn {
|
||||
width: 32px;
|
||||
height: 28px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
transition: all 0.2s ease;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.window-btn:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.window-btn:active {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.window-btn-close:hover {
|
||||
background: #e81123;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.window-btn-close:active {
|
||||
background: #f1707a;
|
||||
}
|
||||
|
||||
.maximize-icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.window-controls {display: flex; align-items: center; gap: 4px; margin-left: 8px;}
|
||||
.window-btn {width: 32px; height: 28px; border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #606266; transition: all 0.2s ease; outline: none; padding: 0; margin: 0; border-radius: 4px;}
|
||||
.window-btn:hover {background: rgba(0, 0, 0, 0.05);}
|
||||
.window-btn:active {background: rgba(0, 0, 0, 0.1);}
|
||||
.window-btn-close:hover {background: #e81123; color: #ffffff;}
|
||||
.window-btn-close:active {background: #f1707a;}
|
||||
.maximize-icon {width: 12px; height: 12px;}
|
||||
/* 登录/注册按钮 */
|
||||
</style>
|
||||
|
||||
<style>
|
||||
/* 设置下拉菜单样式 */
|
||||
.settings-dropdown {
|
||||
min-width: 180px !important;
|
||||
padding: 4px 0 !important;
|
||||
border-radius: 12px !important;
|
||||
margin-top: 4px !important;
|
||||
}
|
||||
|
||||
.settings-dropdown .username-item {
|
||||
font-weight: 600 !important;
|
||||
color: #000000 !important;
|
||||
cursor: default !important;
|
||||
padding: 8px 16px !important;
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
.settings-dropdown .menu-item {
|
||||
padding: 8px 16px !important;
|
||||
font-size: 13px !important;
|
||||
color: #000000 !important;
|
||||
transition: all 0.2s ease !important;
|
||||
}
|
||||
|
||||
.settings-dropdown .menu-item:hover {
|
||||
background: #f5f7fa !important;
|
||||
color: #409EFF !important;
|
||||
}
|
||||
|
||||
.settings-dropdown .logout-item {
|
||||
color: #000000 !important;
|
||||
}
|
||||
|
||||
.settings-dropdown .logout-item:hover {
|
||||
background: #f5f7fa !important;
|
||||
color: #409EFF !important;
|
||||
}
|
||||
|
||||
.settings-dropdown .el-dropdown-menu__item.is-disabled {
|
||||
cursor: default !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
.settings-dropdown {min-width: 180px !important; padding: 4px 0 !important; border-radius: 12px !important; margin-top: 4px !important;}
|
||||
.settings-dropdown .username-item {font-weight: 600 !important; color: #000000 !important; cursor: default !important; padding: 8px 16px !important; font-size: 14px !important;}
|
||||
.settings-dropdown .menu-item {padding: 8px 16px !important; font-size: 13px !important; color: #000000 !important; transition: all 0.2s ease !important;}
|
||||
.settings-dropdown .menu-item:hover {background: #f5f7fa !important; color: #409EFF !important;}
|
||||
.settings-dropdown .logout-item {color: #000000 !important;}
|
||||
.settings-dropdown .logout-item:hover {background: #f5f7fa !important; color: #409EFF !important;}
|
||||
.settings-dropdown .el-dropdown-menu__item.is-disabled {cursor: default !important; opacity: 1 !important;}
|
||||
</style>
|
||||
@@ -649,229 +649,101 @@ onMounted(loadLatest)
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.rakuten-root {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.body-layout { display: flex; gap: 12px; height: 100%; }
|
||||
.steps-sidebar { width: 220px; background: #fff; border: 1px solid #ebeef5; border-radius: 6px; padding: 10px; height: 100%; flex-shrink: 0; }
|
||||
.steps-title { font-size: 14px; font-weight: 600; color: #303133; text-align: left; }
|
||||
|
||||
.rakuten-root {position: absolute; inset: 0; background: #fff; box-sizing: border-box;}
|
||||
.main-container {height: 100%; display: flex; flex-direction: column; padding: 12px; box-sizing: border-box;}
|
||||
.body-layout {display: flex; gap: 12px; height: 100%;}
|
||||
.steps-sidebar {width: 220px; background: #fff; border: 1px solid #ebeef5; border-radius: 6px; padding: 10px; height: 100%; flex-shrink: 0;}
|
||||
.steps-title {font-size: 14px; font-weight: 600; color: #303133; text-align: left;}
|
||||
/* 卡片式步骤，与示例一致 */
|
||||
.steps-flow { position: relative; }
|
||||
.steps-flow:before { content: ''; position: absolute; left: 11px; top: 20px; bottom: 0; width: 1px; background: rgba(229, 231, 235, 0.6); }
|
||||
.flow-item { position: relative; display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 8px 0; }
|
||||
.flow-item .step-index { position: static; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 50%; background: #1677FF; color: #fff; font-size: 12px; font-weight: 600; margin-top: 2px; }
|
||||
.flow-item:after { display: none; }
|
||||
.step-card { border: none; border-radius: 0; padding: 0; background: transparent; min-width: 0; }
|
||||
.step-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
|
||||
.title { font-size: 13px; font-weight: 600; color: #303133; text-align: left; }
|
||||
.desc { font-size: 12px; color: #909399; margin-bottom: 8px; text-align: left; }
|
||||
.mini-hint { font-size: 12px; color: #909399; margin-top: 8px; text-align: left; }
|
||||
.links { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
|
||||
.link { color: #409EFF; cursor: pointer; font-size: 12px; }
|
||||
.sep { color: #dcdfe6; }
|
||||
|
||||
.content-panel { flex: 1; display: flex; flex-direction: column; min-width: 0; }
|
||||
|
||||
.left-controls { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
|
||||
.dropzone { border: 1px dashed #c0c4cc; border-radius: 6px; padding: 12px; text-align: center; cursor: pointer; background: #fafafa; }
|
||||
.dropzone:hover { background: #f6fbff; border-color: #409EFF; }
|
||||
.dropzone.disabled { opacity: .6; cursor: not-allowed; }
|
||||
.dz-el-icon { font-size: 18px; margin-bottom: 4px; color: #909399; }
|
||||
.dz-text { color: #303133; font-size: 13px; }
|
||||
.dz-sub { color: #909399; font-size: 12px; }
|
||||
.single-input.left { display: flex; gap: 8px; }
|
||||
.action-buttons.column { display: flex; flex-direction: column; gap: 8px; }
|
||||
|
||||
.file-chip { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: #f5f7fa; border-radius: 4px; font-size: 12px; color: #606266; margin-top: 6px; width: 100%; box-sizing: border-box; }
|
||||
.file-chip .dot { width: 6px; height: 6px; background: #409EFF; border-radius: 50%; flex-shrink: 0; }
|
||||
.file-chip .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.file-chip .delete-btn { cursor: pointer; opacity: 0.6; flex-shrink: 0; }
|
||||
.file-chip .delete-btn:hover { opacity: 1; }
|
||||
|
||||
.progress-section.left { margin-top: 10px; }
|
||||
.full { width: 100%; }
|
||||
.form-row { margin-bottom: 10px; }
|
||||
.label { display: block; font-size: 12px; color: #606266; margin-bottom: 6px; }
|
||||
|
||||
.steps-flow {position: relative;}
|
||||
.steps-flow:before {content: ''; position: absolute; left: 11px; top: 20px; bottom: 0; width: 1px; background: rgba(229, 231, 235, 0.6);}
|
||||
.flow-item {position: relative; display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 8px 0;}
|
||||
.flow-item .step-index {position: static; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 50%; background: #1677FF; color: #fff; font-size: 12px; font-weight: 600; margin-top: 2px;}
|
||||
.flow-item:after {display: none;}
|
||||
.step-card {border: none; border-radius: 0; padding: 0; background: transparent; min-width: 0;}
|
||||
.step-header {display: flex; align-items: center; gap: 8px; margin-bottom: 6px;}
|
||||
.title {font-size: 13px; font-weight: 600; color: #303133; text-align: left;}
|
||||
.desc {font-size: 12px; color: #909399; margin-bottom: 8px; text-align: left;}
|
||||
.mini-hint {font-size: 12px; color: #909399; margin-top: 8px; text-align: left;}
|
||||
.links {display: flex; align-items: center; gap: 6px; margin-bottom: 8px;}
|
||||
.link {color: #409EFF; cursor: pointer; font-size: 12px;}
|
||||
.sep {color: #dcdfe6;}
|
||||
.content-panel {flex: 1; display: flex; flex-direction: column; min-width: 0;}
|
||||
.left-controls {margin-top: 10px; display: flex; flex-direction: column; gap: 10px;}
|
||||
.dropzone {border: 1px dashed #c0c4cc; border-radius: 6px; padding: 12px; text-align: center; cursor: pointer; background: #fafafa;}
|
||||
.dropzone:hover {background: #f6fbff; border-color: #409EFF;}
|
||||
.dropzone.disabled {opacity: .6; cursor: not-allowed;}
|
||||
.dz-el-icon {font-size: 18px; margin-bottom: 4px; color: #909399;}
|
||||
.dz-text {color: #303133; font-size: 13px;}
|
||||
.dz-sub {color: #909399; font-size: 12px;}
|
||||
.single-input.left {display: flex; gap: 8px;}
|
||||
.action-buttons.column {display: flex; flex-direction: column; gap: 8px;}
|
||||
.file-chip {display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: #f5f7fa; border-radius: 4px; font-size: 12px; color: #606266; margin-top: 6px; width: 100%; box-sizing: border-box;}
|
||||
.file-chip .dot {width: 6px; height: 6px; background: #409EFF; border-radius: 50%; flex-shrink: 0;}
|
||||
.file-chip .name {flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
|
||||
.file-chip .delete-btn {cursor: pointer; opacity: 0.6; flex-shrink: 0;}
|
||||
.file-chip .delete-btn:hover {opacity: 1;}
|
||||
.progress-section.left {margin-top: 10px;}
|
||||
.full {width: 100%;}
|
||||
.form-row {margin-bottom: 10px;}
|
||||
.label {display: block; font-size: 12px; color: #606266; margin-bottom: 6px;}
|
||||
/* 统一左侧控件宽度与主色 */
|
||||
.steps-sidebar :deep(.el-date-editor),
|
||||
.steps-sidebar :deep(.el-range-editor.el-input__wrapper),
|
||||
.steps-sidebar :deep(.el-input),
|
||||
.steps-sidebar :deep(.el-input__wrapper),
|
||||
.steps-sidebar :deep(.el-select) { width: 100%; box-sizing: border-box; }
|
||||
.btn-blue { background: #1677FF; border-color: #1677FF; color: #fff; }
|
||||
.btn-blue:disabled { background: #a6c8ff; border-color: #a6c8ff; color: #fff; }
|
||||
.w100 { width: 100%; }
|
||||
.steps-sidebar :deep(.el-button + .el-button) { margin-left: 0; }
|
||||
.progress-section { margin: 0px 12px 0px 12px; }
|
||||
.progress-box { padding: 4px 0; }
|
||||
.progress-container { display: flex; align-items: center; gap: 8px; }
|
||||
.progress-bar { flex: 1; height: 6px; background: #e3eeff; border-radius: 999px; overflow: hidden; }
|
||||
.progress-fill { height: 100%; background: #1677FF; border-radius: 999px; transition: width 0.3s ease; }
|
||||
.progress-text { font-size: 13px; color: #1677FF; font-weight: 500; min-width: 44px; text-align: right; }
|
||||
|
||||
.current-status {
|
||||
font-size: 12px;
|
||||
color: #606266;
|
||||
padding-left: 2px;
|
||||
}
|
||||
.export-progress { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 0 4px; }
|
||||
.export-progress-bar { flex: 1; height: 4px; background: #e3eeff; border-radius: 2px; overflow: hidden; }
|
||||
.export-progress-fill { height: 100%; background: #1677FF; border-radius: 2px; transition: width 0.3s ease; }
|
||||
.export-progress-text { font-size: 11px; color: #1677FF; font-weight: 500; min-width: 32px; text-align: right; }
|
||||
|
||||
.table-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
min-height: 400px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.empty-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.empty-container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 16px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.table-section { flex: 1; overflow: hidden; position: relative; background: #fff; border: 1px solid #ebeef5; border-radius: 4px; display: flex; flex-direction: column; }
|
||||
.table-wrapper { flex: 1; overflow: auto; }
|
||||
.table-wrapper { scrollbar-width: thin; scrollbar-color: #c0c4cc transparent; }
|
||||
.table-wrapper::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||
.table-wrapper::-webkit-scrollbar-track { background: transparent; }
|
||||
.table-wrapper::-webkit-scrollbar-thumb { background: #c0c4cc; border-radius: 3px; }
|
||||
.table-wrapper:hover::-webkit-scrollbar-thumb { background: #a8abb2; }
|
||||
.table { width: max-content; min-width: 100%; border-collapse: collapse; font-size: 13px; }
|
||||
|
||||
.table th {
|
||||
background: #f5f7fa;
|
||||
color: #909399;
|
||||
font-weight: 600;
|
||||
padding: 8px 6px;
|
||||
border-bottom: 2px solid #ebeef5;
|
||||
text-align: left;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.table td {
|
||||
padding: 10px 8px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.table tbody tr:hover {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
.truncate {
|
||||
max-width: 260px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.shop-col { max-width: 160px; }
|
||||
.url-col { max-width: 220px; }
|
||||
.empty-tip { text-align: center; color: #909399; padding: 16px 0; }
|
||||
.empty-container { text-align: center; }
|
||||
.empty-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.6; }
|
||||
.empty-text { font-size: 14px; color: #909399; }
|
||||
.import-section.drag-active { border: 1px dashed #409EFF; border-radius: 6px; }
|
||||
.empty-abs { position: absolute; left: 0; right: 0; top: 48px; bottom: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
|
||||
|
||||
.image-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 0 auto;
|
||||
background: #f8f9fa;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.thumb {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
object-fit: contain;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.table-loading {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
font-size: 24px;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-fixed {
|
||||
flex-shrink: 0;
|
||||
padding: 8px 12px 0 12px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.pagination-fixed :deep(.el-pager li.is-active) {
|
||||
border: 1px solid #1677FF;
|
||||
border-radius: 4px;
|
||||
color: #1677FF;
|
||||
background: #fff;
|
||||
.steps-sidebar :deep(.el-select) {width: 100%; box-sizing: border-box;}
|
||||
.btn-blue {background: #1677FF; border-color: #1677FF; color: #fff;}
|
||||
.btn-blue:disabled {background: #a6c8ff; border-color: #a6c8ff; color: #fff;}
|
||||
.w100 {width: 100%;}
|
||||
.steps-sidebar :deep(.el-button + .el-button) {margin-left: 0;}
|
||||
.progress-section {margin: 0px 12px 0px 12px;}
|
||||
.progress-box {padding: 4px 0;}
|
||||
.progress-container {display: flex; align-items: center; gap: 8px;}
|
||||
.progress-bar {flex: 1; height: 6px; background: #e3eeff; border-radius: 999px; overflow: hidden;}
|
||||
.progress-fill {height: 100%; background: #1677FF; border-radius: 999px; transition: width 0.3s ease;}
|
||||
.progress-text {font-size: 13px; color: #1677FF; font-weight: 500; min-width: 44px; text-align: right;}
|
||||
.current-status {font-size: 12px; color: #606266; padding-left: 2px;}
|
||||
.export-progress {display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 0 4px;}
|
||||
.export-progress-bar {flex: 1; height: 4px; background: #e3eeff; border-radius: 2px; overflow: hidden;}
|
||||
.export-progress-fill {height: 100%; background: #1677FF; border-radius: 2px; transition: width 0.3s ease;}
|
||||
.export-progress-text {font-size: 11px; color: #1677FF; font-weight: 500; min-width: 32px; text-align: right;}
|
||||
.table-container {display: flex; flex-direction: column; flex: 1; min-height: 400px; overflow: hidden;}
|
||||
.empty-section {flex: 1; display: flex; justify-content: center; align-items: center; background: #fff; border: 1px solid #ebeef5; border-radius: 6px;}
|
||||
.empty-container {text-align: center;}
|
||||
.empty-icon {font-size: 48px; margin-bottom: 16px; opacity: 0.6;}
|
||||
.empty-text {font-size: 14px; color: #909399;}
|
||||
.table-section {flex: 1; overflow: hidden; position: relative; background: #fff; border: 1px solid #ebeef5; border-radius: 4px; display: flex; flex-direction: column;}
|
||||
.table-wrapper {flex: 1; overflow: auto;}
|
||||
.table-wrapper {scrollbar-width: thin; scrollbar-color: #c0c4cc transparent;}
|
||||
.table-wrapper::-webkit-scrollbar {width: 6px; height: 6px;}
|
||||
.table-wrapper::-webkit-scrollbar-track {background: transparent;}
|
||||
.table-wrapper::-webkit-scrollbar-thumb {background: #c0c4cc; border-radius: 3px;}
|
||||
.table-wrapper:hover::-webkit-scrollbar-thumb {background: #a8abb2;}
|
||||
.table {width: max-content; min-width: 100%; border-collapse: collapse; font-size: 13px;}
|
||||
.table th {background: #f5f7fa; color: #909399; font-weight: 600; padding: 8px 6px; border-bottom: 2px solid #ebeef5; text-align: left; font-size: 12px; white-space: nowrap;}
|
||||
.table td {padding: 10px 8px; border-bottom: 1px solid #f0f0f0; vertical-align: middle;}
|
||||
.table tbody tr:hover {background: #f9f9f9;}
|
||||
.truncate {max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
|
||||
.shop-col {max-width: 160px;}
|
||||
.url-col {max-width: 220px;}
|
||||
.empty-tip {text-align: center; color: #909399; padding: 16px 0;}
|
||||
.empty-container {text-align: center;}
|
||||
.empty-icon {font-size: 48px; margin-bottom: 12px; opacity: 0.6;}
|
||||
.empty-text {font-size: 14px; color: #909399;}
|
||||
.import-section.drag-active {border: 1px dashed #409EFF; border-radius: 6px;}
|
||||
.empty-abs {position: absolute; left: 0; right: 0; top: 48px; bottom: 0; display: flex; align-items: center; justify-content: center; pointer-events: none;}
|
||||
.image-container {display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; margin: 0 auto; background: #f8f9fa; border-radius: 2px;}
|
||||
.thumb {width: 32px; height: 32px; object-fit: contain; border-radius: 2px;}
|
||||
.table-loading {position: absolute; inset: 0; background: rgba(255, 255, 255, 0.95); display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 14px; color: #606266; pointer-events: none;}
|
||||
.spinner {font-size: 24px; animation: spin 1s linear infinite; margin-bottom: 8px;}
|
||||
@keyframes spin {0% {
|
||||
transform: rotate(0deg);}
|
||||
100% {transform: rotate(360deg);}
|
||||
}
|
||||
|
||||
.pagination-fixed {flex-shrink: 0; padding: 8px 12px 0 12px; background: #fff; display: flex; justify-content: flex-end;}
|
||||
.pagination-fixed :deep(.el-pager li.is-active) {border: 1px solid #1677FF; border-radius: 4px; color: #1677FF; background: #fff;}
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
@@ -575,93 +575,94 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.zebra-root { position: absolute; inset: 0; background: #fff; box-sizing: border-box; }
|
||||
.layout { height: 100%; display: grid; grid-template-columns: 220px 1fr; gap: 12px; padding: 12px; box-sizing: border-box; }
|
||||
.aside { border: 1px solid #ebeef5; border-radius: 4px; padding: 10px; display: flex; flex-direction: column; transition: width 0.2s ease; }
|
||||
.aside.collapsed { width: 56px; overflow: hidden; }
|
||||
.aside-header { display: flex; justify-content: flex-start; align-items: center; font-weight: 600; color: #606266; margin-bottom: 8px; }
|
||||
.aside-steps { position: relative; }
|
||||
.step { display: grid; grid-template-columns: 22px 1fr; gap: 10px; position: relative; padding: 8px 0; }
|
||||
.step-index { width: 22px; height: 22px; background: #1677FF; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; margin-top: 2px; }
|
||||
.step-body { min-width: 0; text-align: left; }
|
||||
.step-title { font-size: 13px; color: #606266; margin-bottom: 6px; font-weight: 600; text-align: left; }
|
||||
.aside-steps:before { content: ''; position: absolute; left: 11px; top: 20px; bottom: 0; width: 1px; background: rgba(229, 231, 235, 0.6); }
|
||||
.account-list {height: auto; }
|
||||
.step-actions { margin-top: 8px; display: flex; gap: 8px; }
|
||||
.step-accounts { position: relative; }
|
||||
.sticky-actions { position: sticky; bottom: 0; background: #fafafa; padding-top: 8px; }
|
||||
.scroll-limit { max-height: 160px; }
|
||||
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
|
||||
.btn-col { display: flex; flex-direction: column; gap: 6px; }
|
||||
.w50 { width: 48%; }
|
||||
.w100 { width: 100%; }
|
||||
.placeholder-box { display:flex; align-items:center; justify-content:center; flex-direction:column; height: 140px; background: #fff; border: 1px solid #ebeef5; border-radius: 4px; }
|
||||
.placeholder-img { width: 120px; opacity: 0.9; }
|
||||
.placeholder-tip { margin-top: 6px; font-size: 12px; color: #a8abb2; }
|
||||
.aside :deep(.el-date-editor) { width: 100%; }
|
||||
.aside :deep(.el-range-editor.el-input__wrapper) { width: 100%; box-sizing: border-box; }
|
||||
.zebra-root {position: absolute; inset: 0; background: #fff; box-sizing: border-box;}
|
||||
.layout {height: 100%; display: grid; grid-template-columns: 220px 1fr; gap: 12px; padding: 12px; box-sizing: border-box;}
|
||||
.aside {border: 1px solid #ebeef5; border-radius: 4px; padding: 10px; display: flex; flex-direction: column; transition: width 0.2s ease;}
|
||||
.aside.collapsed {width: 56px; overflow: hidden;}
|
||||
.aside-header {display: flex; justify-content: flex-start; align-items: center; font-weight: 600; color: #606266; margin-bottom: 8px;}
|
||||
.aside-steps {position: relative;}
|
||||
.step {display: grid; grid-template-columns: 22px 1fr; gap: 10px; position: relative; padding: 8px 0;}
|
||||
.step-index {width: 22px; height: 22px; background: #1677FF; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; margin-top: 2px;}
|
||||
.step-body {min-width: 0; text-align: left;}
|
||||
.step-title {font-size: 13px; color: #606266; margin-bottom: 6px; font-weight: 600; text-align: left;}
|
||||
.aside-steps:before {content: ''; position: absolute; left: 11px; top: 20px; bottom: 0; width: 1px; background: rgba(229, 231, 235, 0.6);}
|
||||
.account-list {height: auto;}
|
||||
.step-actions {margin-top: 8px; display: flex; gap: 8px;}
|
||||
.step-accounts {position: relative;}
|
||||
.sticky-actions {position: sticky; bottom: 0; background: #fafafa; padding-top: 8px;}
|
||||
.scroll-limit {max-height: 160px;}
|
||||
.btn-row {display: grid; grid-template-columns: 1fr 1fr; gap: 8px;}
|
||||
.btn-col {display: flex; flex-direction: column; gap: 6px;}
|
||||
.w50 {width: 48%;}
|
||||
.w100 {width: 100%;}
|
||||
.placeholder-box {display:flex; align-items:center; justify-content:center; flex-direction:column; height: 140px; background: #fff; border: 1px solid #ebeef5; border-radius: 4px;}
|
||||
.placeholder-img {width: 120px; opacity: 0.9;}
|
||||
.placeholder-tip {margin-top: 6px; font-size: 12px; color: #a8abb2;}
|
||||
.aside :deep(.el-date-editor) {width: 100%;}
|
||||
.aside :deep(.el-range-editor.el-input__wrapper) {width: 100%; box-sizing: border-box;}
|
||||
.aside :deep(.el-input),
|
||||
.aside :deep(.el-input__wrapper),
|
||||
.aside :deep(.el-select) { width: 100%; box-sizing: border-box; }
|
||||
.aside :deep(.el-button + .el-button) { margin-left: 0 !important; }
|
||||
.btn-row :deep(.el-button) { width: 100%; }
|
||||
.btn-col :deep(.el-button) { width: 100%; }
|
||||
.btn-blue { background: #1677FF; border-color: #1677FF; color: #fff; }
|
||||
.btn-blue:disabled { background: #a6c8ff; border-color: #a6c8ff; color: #fff; }
|
||||
.tip { color: #909399; font-size: 12px; margin-bottom: 8px; text-align: left; }
|
||||
.avatar { width: 22px; height: 22px; border-radius: 50%; margin-right: 6px; vertical-align: -2px; }
|
||||
.acct-text { vertical-align: middle; }
|
||||
.acct-row { display: grid; grid-template-columns: 8px 18px 1fr auto; align-items: center; gap: 6px; width: 100%; }
|
||||
.acct-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-size: 12px; }
|
||||
.status-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
|
||||
.status-dot.on { background: #22c55e; }
|
||||
.status-dot.off { background: #f87171; }
|
||||
.acct-item { padding: 6px 8px; border-radius: 8px; cursor: pointer; }
|
||||
.acct-item.selected { background: #eef5ff; box-shadow: inset 0 0 0 1px #d6e4ff; }
|
||||
.acct-check { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: transparent; color: #111; font-size: 14px; }
|
||||
.account-list::-webkit-scrollbar { width: 0; height: 0; }
|
||||
.add-account-dialog .aad-header { display:flex; flex-direction: column; align-items:center; gap:8px; padding-top: 8px; width: 100%; }
|
||||
.add-account-dialog .aad-icon { width: 120px; height: auto; }
|
||||
.add-account-dialog .aad-title { font-weight: 600; font-size: 18px; text-align: center; }
|
||||
.add-account-dialog .aad-row { margin-top: 12px; }
|
||||
.add-account-dialog .aad-opts { display:flex; align-items:center; }
|
||||
|
||||
.aside :deep(.el-select) {width: 100%; box-sizing: border-box;}
|
||||
.aside :deep(.el-button + .el-button) {margin-left: 0 !important;}
|
||||
.btn-row :deep(.el-button) {width: 100%;}
|
||||
.btn-col :deep(.el-button) {width: 100%;}
|
||||
.btn-blue {background: #1677FF; border-color: #1677FF; color: #fff;}
|
||||
.btn-blue:disabled {background: #a6c8ff; border-color: #a6c8ff; color: #fff;}
|
||||
.tip {color: #909399; font-size: 12px; margin-bottom: 8px; text-align: left;}
|
||||
.avatar {width: 22px; height: 22px; border-radius: 50%; margin-right: 6px; vertical-align: -2px;}
|
||||
.acct-text {vertical-align: middle;}
|
||||
.acct-row {display: grid; grid-template-columns: 8px 18px 1fr auto; align-items: center; gap: 6px; width: 100%;}
|
||||
.acct-text {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-size: 12px;}
|
||||
.status-dot {width: 6px; height: 6px; border-radius: 50%; display: inline-block;}
|
||||
.status-dot.on {background: #22c55e;}
|
||||
.status-dot.off {background: #f87171;}
|
||||
.acct-item {padding: 6px 8px; border-radius: 8px; cursor: pointer;}
|
||||
.acct-item.selected {background: #eef5ff; box-shadow: inset 0 0 0 1px #d6e4ff;}
|
||||
.acct-check {display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: transparent; color: #111; font-size: 14px;}
|
||||
.account-list::-webkit-scrollbar {width: 0; height: 0;}
|
||||
.add-account-dialog .aad-header {display:flex; flex-direction: column; align-items:center; gap:8px; padding-top: 8px; width: 100%;}
|
||||
.add-account-dialog .aad-icon {width: 120px; height: auto;}
|
||||
.add-account-dialog .aad-title {font-weight: 600; font-size: 18px; text-align: center;}
|
||||
.add-account-dialog .aad-row {margin-top: 12px;}
|
||||
.add-account-dialog .aad-opts {display:flex; align-items:center;}
|
||||
/* 居中 header，避免右上角关闭按钮影响视觉中心 */
|
||||
:deep(.add-account-dialog .el-dialog__header) { text-align: center; padding-right: 0; display: block; }
|
||||
.content { display: grid; grid-template-rows: 1fr auto; min-height: 0; }
|
||||
.table-section { min-height: 0; overflow: hidden; position: relative; background: #fff; border: 1px solid #ebeef5; border-radius: 4px; display: flex; flex-direction: column; }
|
||||
.table-wrapper { flex: 1; overflow: auto; overflow-x: auto; }
|
||||
.table-wrapper { scrollbar-width: thin; scrollbar-color: #c0c4cc transparent; }
|
||||
.table-wrapper::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||
.table-wrapper::-webkit-scrollbar-track { background: transparent; }
|
||||
.table-wrapper::-webkit-scrollbar-thumb { background: #c0c4cc; border-radius: 3px; }
|
||||
.table-wrapper:hover::-webkit-scrollbar-thumb { background: #a8abb2; }
|
||||
.table { width: max-content; min-width: 100%; border-collapse: collapse; font-size: 13px; }
|
||||
.table th { background: #f5f7fa; color: #909399; font-weight: 600; padding: 12px 8px; border-bottom: 2px solid #ebeef5; text-align: left; white-space: nowrap; }
|
||||
.table td { padding: 10px 8px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
|
||||
.table tbody tr:hover { background: #f9f9f9; }
|
||||
.truncate { max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.image-container { display: flex; justify-content: center; align-items: center; width: 28px; height: 24px; margin: 0 auto; background: #f8f9fa; border-radius: 2px; }
|
||||
.thumb { width: 22px; height: 22px; object-fit: contain; border-radius: 2px; }
|
||||
.price-tag { color: #e6a23c; font-weight: bold; }
|
||||
.fee-tag { color: #909399; font-weight: 500; }
|
||||
.table-loading { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.95); display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 14px; color: #606266; }
|
||||
.spinner { font-size: 24px; animation: spin 1s linear infinite; margin-bottom: 8px; }
|
||||
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
|
||||
.pagination-fixed { position: sticky; bottom: 0; z-index: 2; padding: 8px 12px 0 12px; background: #fff; display: flex; justify-content: flex-end; }
|
||||
.pagination-fixed :deep(.el-pager li.is-active) { border: 1px solid #1677FF; border-radius: 4px; color: #1677FF; background: #fff; }
|
||||
.tag { display: inline-block; padding: 0 6px; margin-left: 6px; font-size: 12px; background: #ecf5ff; color: #409EFF; border-radius: 3px; }
|
||||
.empty-abs { position: absolute; left: 0; right: 0; top: 48px; bottom: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
|
||||
.progress-section { margin: 0px 12px 0px 12px; }
|
||||
.progress-box { padding: 4px 0; }
|
||||
.progress-container { display: flex; align-items: center; gap: 8px; }
|
||||
.progress-bar { flex: 1; height: 6px; background: #e3eeff; border-radius: 999px; overflow: hidden; }
|
||||
.progress-fill { height: 100%; background: #1677FF; border-radius: 999px; transition: width 0.3s ease; }
|
||||
.progress-text { font-size: 13px; color: #1677FF; font-weight: 500; min-width: 44px; text-align: right; }
|
||||
.export-progress { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 0 4px; }
|
||||
.export-progress-bar { flex: 1; height: 4px; background: #e3eeff; border-radius: 2px; overflow: hidden; }
|
||||
.export-progress-fill { height: 100%; background: #67c23a; border-radius: 2px; transition: width 0.3s ease; }
|
||||
.export-progress-text { font-size: 11px; color: #67c23a; font-weight: 500; min-width: 32px; text-align: right; }
|
||||
:deep(.add-account-dialog .el-dialog__header) {text-align: center; padding-right: 0; display: block;}
|
||||
.content {display: grid; grid-template-rows: 1fr auto; min-height: 0;}
|
||||
.table-section {min-height: 0; overflow: hidden; position: relative; background: #fff; border: 1px solid #ebeef5; border-radius: 4px; display: flex; flex-direction: column;}
|
||||
.table-wrapper {flex: 1; overflow: auto; overflow-x: auto;}
|
||||
.table-wrapper {scrollbar-width: thin; scrollbar-color: #c0c4cc transparent;}
|
||||
.table-wrapper::-webkit-scrollbar {width: 6px; height: 6px;}
|
||||
.table-wrapper::-webkit-scrollbar-track {background: transparent;}
|
||||
.table-wrapper::-webkit-scrollbar-thumb {background: #c0c4cc; border-radius: 3px;}
|
||||
.table-wrapper:hover::-webkit-scrollbar-thumb {background: #a8abb2;}
|
||||
.table {width: max-content; min-width: 100%; border-collapse: collapse; font-size: 13px;}
|
||||
.table th {background: #f5f7fa; color: #909399; font-weight: 600; padding: 12px 8px; border-bottom: 2px solid #ebeef5; text-align: left; white-space: nowrap;}
|
||||
.table td {padding: 10px 8px; border-bottom: 1px solid #f0f0f0; vertical-align: middle;}
|
||||
.table tbody tr:hover {background: #f9f9f9;}
|
||||
.truncate {max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
|
||||
.image-container {display: flex; justify-content: center; align-items: center; width: 28px; height: 24px; margin: 0 auto; background: #f8f9fa; border-radius: 2px;}
|
||||
.thumb {width: 22px; height: 22px; object-fit: contain; border-radius: 2px;}
|
||||
.price-tag {color: #e6a23c; font-weight: bold;}
|
||||
.fee-tag {color: #909399; font-weight: 500;}
|
||||
.table-loading {position: absolute; inset: 0; background: rgba(255, 255, 255, 0.95); display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 14px; color: #606266;}
|
||||
.spinner {font-size: 24px; animation: spin 1s linear infinite; margin-bottom: 8px;}
|
||||
@keyframes spin {0% { transform: rotate(0deg);}
|
||||
100% {transform: rotate(360deg);}
|
||||
}
|
||||
.pagination-fixed {position: sticky; bottom: 0; z-index: 2; padding: 8px 12px 0 12px; background: #fff; display: flex; justify-content: flex-end;}
|
||||
.pagination-fixed :deep(.el-pager li.is-active) {border: 1px solid #1677FF; border-radius: 4px; color: #1677FF; background: #fff;}
|
||||
.tag {display: inline-block; padding: 0 6px; margin-left: 6px; font-size: 12px; background: #ecf5ff; color: #409EFF; border-radius: 3px;}
|
||||
.empty-abs {position: absolute; left: 0; right: 0; top: 48px; bottom: 0; display: flex; align-items: center; justify-content: center; pointer-events: none;}
|
||||
.progress-section {margin: 0px 12px 0px 12px;}
|
||||
.progress-box {padding: 4px 0;}
|
||||
.progress-container {display: flex; align-items: center; gap: 8px;}
|
||||
.progress-bar {flex: 1; height: 6px; background: #e3eeff; border-radius: 999px; overflow: hidden;}
|
||||
.progress-fill {height: 100%; background: #1677FF; border-radius: 999px; transition: width 0.3s ease;}
|
||||
.progress-text {font-size: 13px; color: #1677FF; font-weight: 500; min-width: 44px; text-align: right;}
|
||||
.export-progress {display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 0 4px;}
|
||||
.export-progress-bar {flex: 1; height: 4px; background: #e3eeff; border-radius: 2px; overflow: hidden;}
|
||||
.export-progress-fill {height: 100%; background: #67c23a; border-radius: 2px; transition: width 0.3s ease;}
|
||||
.export-progress-text {font-size: 11px; color: #67c23a; font-weight: 500; min-width: 32px; text-align: right;}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
20
electron-vue-template/src/renderer/config/index.ts
Normal file
20
electron-vue-template/src/renderer/config/index.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
/**
|
||||
* 应用配置
|
||||
*/
|
||||
export const AppConfig = {
|
||||
CLIENT_BASE: 'http://localhost:8081',
|
||||
RUOYI_BASE: 'http://192.168.1.89:8085',
|
||||
get SSE_URL() {
|
||||
return `${this.RUOYI_BASE}/monitor/account/events`
|
||||
}
|
||||
} as const
|
||||
|
||||
/**
|
||||
* 判断路径是否路由到ruoyi-admin服务
|
||||
*/
|
||||
export function isRuoyiPath(path: string): boolean {
|
||||
return path.startsWith('/monitor/') ||
|
||||
path.startsWith('/system/') ||
|
||||
path.startsWith('/tool/banma') ||
|
||||
path.startsWith('/tool/genmai')
|
||||
}
|
||||
Reference in New Issue
Block a user