.container[data-v-cd5869b7] { padding: 0.625rem; background-color: #f5f5f5; min-height: 100vh; } .status-card[data-v-cd5869b7], .config-card[data-v-cd5869b7], .control-card[data-v-cd5869b7], .send-card[data-v-cd5869b7], .log-card[data-v-cd5869b7] { background-color: #fff; border-radius: 0.5rem; padding: 0.9375rem; margin-bottom: 0.625rem; box-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.05); } .status-label[data-v-cd5869b7] { font-size: 0.875rem; color: #666; margin-bottom: 0.5rem; } .status-value[data-v-cd5869b7] { display: inline-block; padding: 0.375rem 1rem; border-radius: 0.25rem; font-size: 0.875rem; font-weight: 500; } .status-connected[data-v-cd5869b7] { background-color: #e6f7e6; color: #52c41a; } .status-connecting[data-v-cd5869b7] { background-color: #fff7e6; color: #faad14; } .status-disconnected[data-v-cd5869b7] { background-color: #f5f5f5; color: #999; } .status-error[data-v-cd5869b7] { background-color: #fff1f0; color: #ff4d4f; } .status-info[data-v-cd5869b7] { margin-top: 0.5rem; } .reconnect-info[data-v-cd5869b7] { font-size: 0.75rem; color: #faad14; } .section-title[data-v-cd5869b7] { font-size: 1rem; font-weight: 600; color: #333; margin-bottom: 0.75rem; display: block; } .input-group[data-v-cd5869b7] { margin-bottom: 0.75rem; } .input-label[data-v-cd5869b7] { font-size: 0.875rem; color: #666; margin-bottom: 0.375rem; display: block; } .input-field[data-v-cd5869b7] { border: 0.0625rem solid #e8e8e8; border-radius: 0.25rem; padding: 0.625rem; font-size: 0.875rem; background-color: #fafafa; } .control-card[data-v-cd5869b7] { display: flex; gap: 0.625rem; } .btn[data-v-cd5869b7] { flex: 1; height: 2.75rem; line-height: 2.75rem; border-radius: 0.375rem; font-size: 1rem; text-align: center; border: none; } .btn-primary[data-v-cd5869b7] { background-color: #1890ff; color: #fff; } .btn-danger[data-v-cd5869b7] { background-color: #ff4d4f; color: #fff; } .btn-secondary[data-v-cd5869b7] { background-color: #f0f0f0; color: #666; } .btn-outline[data-v-cd5869b7] { background-color: transparent; color: #1890ff; border: 0.0625rem solid #1890ff; } .btn-small[data-v-cd5869b7] { height: 2rem; line-height: 2rem; font-size: 0.8125rem; padding: 0 0.75rem; } .btn[disabled][data-v-cd5869b7] { opacity: 0.5; } .send-input-wrapper[data-v-cd5869b7] { display: flex; flex-direction: column; gap: 0.625rem; } .send-input[data-v-cd5869b7] { border: 0.0625rem solid #e8e8e8; border-radius: 0.25rem; padding: 0.625rem; font-size: 0.875rem; min-height: 5rem; background-color: #fafafa; box-sizing: border-box; } .send-buttons[data-v-cd5869b7] { display: flex; gap: 0.625rem; } .quick-messages[data-v-cd5869b7] { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 0.0625rem solid #f0f0f0; } .quick-label[data-v-cd5869b7] { font-size: 0.8125rem; color: #999; margin-bottom: 0.5rem; display: block; } .quick-btns[data-v-cd5869b7] { display: flex; flex-wrap: wrap; gap: 0.5rem; } .quick-btn[data-v-cd5869b7] { padding: 0.375rem 0.75rem; background-color: #f0f5ff; color: #1890ff; border-radius: 0.25rem; font-size: 0.8125rem; border: none; } .quick-btn[disabled][data-v-cd5869b7] { opacity: 0.5; } .log-header[data-v-cd5869b7] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; } .log-title-wrapper[data-v-cd5869b7] { display: flex; align-items: center; gap: 0.375rem; } .log-title-wrapper .section-title[data-v-cd5869b7] { margin-bottom: 0; } .log-count[data-v-cd5869b7] { font-size: 0.75rem; color: #999; } .log-actions[data-v-cd5869b7] { display: flex; gap: 0.375rem; } .log-list[data-v-cd5869b7] { max-height: 15.625rem; background-color: #1e1e1e; border-radius: 0.25rem; padding: 0.625rem; } .log-item[data-v-cd5869b7] { display: flex; margin-bottom: 0.375rem; font-family: 'Courier New', monospace; font-size: 0.75rem; line-height: 1.6; } .log-time[data-v-cd5869b7] { color: #888; margin-right: 0.5rem; flex-shrink: 0; } .log-content[data-v-cd5869b7] { word-break: break-all; flex: 1; color: #fff; } .log-info .log-content[data-v-cd5869b7] { color: #fff; } .log-success .log-content[data-v-cd5869b7] { color: #52c41a; } .log-error .log-content[data-v-cd5869b7] { color: #ff4d4f; } .log-warn .log-content[data-v-cd5869b7] { color: #faad14; } .log-send .log-content[data-v-cd5869b7] { color: #1890ff; } .log-receive .log-content[data-v-cd5869b7] { color: #52c41a; }