diff --git a/src/views/system/jdorder/components/TencentDocPushMonitor.vue b/src/views/system/jdorder/components/TencentDocPushMonitor.vue index c9cb76a..a51d682 100644 --- a/src/views/system/jdorder/components/TencentDocPushMonitor.vue +++ b/src/views/system/jdorder/components/TencentDocPushMonitor.vue @@ -2,10 +2,12 @@
@@ -57,6 +59,7 @@ type="primary" icon="el-icon-upload2" :loading="pushing" + :size="isMobile ? 'small' : 'default'" @click="handleTriggerPushNow" > 立即推送 @@ -65,12 +68,14 @@ type="warning" icon="el-icon-close" :disabled="!pushStatus.isScheduled" + :size="isMobile ? 'small' : 'default'" @click="handleCancelPush" > 取消推送 刷新状态 @@ -232,6 +237,17 @@ export default { refreshTimer: null } }, + computed: { + isMobile() { + if (this.$store?.getters?.device === 'mobile') { + return true + } + if (typeof window !== 'undefined' && window.innerWidth < 768) { + return true + } + return false + } + }, watch: { value(val) { this.visible = val @@ -809,5 +825,141 @@ export default { .no-logs i { font-size: 18px; } + +/* 移动端适配 */ +@media (max-width: 768px) { + .push-monitor { + gap: 12px; + } + + .countdown-header { + flex-direction: column; + align-items: flex-start; + gap: 10px; + padding: 12px; + } + + .countdown-header .header-left { + font-size: 16px; + } + + .countdown-header .header-left i { + font-size: 20px; + } + + .countdown-content { + padding: 20px 12px 12px; + gap: 15px; + } + + .countdown-display { + font-size: 32px; + gap: 10px; + } + + .time-box { + min-width: 60px; + padding: 8px 12px; + } + + .time-value { + font-size: 32px; + } + + .time-separator { + font-size: 24px; + } + + .countdown-info { + gap: 8px; + } + + .info-item { + font-size: 12px; + padding: 6px 12px; + flex-wrap: wrap; + } + + .countdown-actions { + flex-direction: column; + width: 100%; + gap: 8px; + } + + .countdown-actions .el-button { + width: 100%; + margin: 0; + } + + .records-header { + flex-direction: column; + align-items: flex-start; + gap: 8px; + } + + .records-header .header-left { + font-size: 14px; + } + + .record-summary { + flex-direction: column; + align-items: flex-start; + gap: 8px; + } + + .summary-left, + .summary-right { + width: 100%; + flex-wrap: wrap; + gap: 8px; + } + + .record-stats { + font-size: 12px; + } + + .trigger-source, + .record-range, + .record-duration { + font-size: 12px; + } +} + +/* 移动端全屏弹窗样式 */ +::v-deep .mobile-push-monitor-dialog { + margin: 0 !important; + width: 100% !important; + height: 100% !important; + max-width: 100% !important; + max-height: 100% !important; +} + +::v-deep .mobile-push-monitor-dialog .el-dialog { + margin: 0 !important; + width: 100% !important; + height: 100% !important; + max-width: 100% !important; + max-height: 100% !important; + border-radius: 0 !important; + display: flex; + flex-direction: column; +} + +::v-deep .mobile-push-monitor-dialog .el-dialog__body { + flex: 1; + overflow-y: auto; + padding: 12px; + -webkit-overflow-scrolling: touch; +} + +::v-deep .mobile-push-monitor-dialog .el-dialog__header { + padding: 12px 16px; + border-bottom: 1px solid #e4e7ed; + flex-shrink: 0; +} + +::v-deep .mobile-push-monitor-dialog .el-dialog__title { + font-size: 16px; +} diff --git a/src/views/system/jdorder/orderList.vue b/src/views/system/jdorder/orderList.vue index 5254e65..d607216 100644 --- a/src/views/system/jdorder/orderList.vue +++ b/src/views/system/jdorder/orderList.vue @@ -104,7 +104,191 @@