@charset "UTF-8"; /** * 这里是uni-app内置的常用样式变量 * * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量 * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App * */ /** * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能 * * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件 */ /* 颜色变量 */ /* 行为相关颜色 */ /* 文字基本颜色 */ /* 背景颜色 */ /* 边框颜色 */ /* 尺寸变量 */ /* 文字尺寸 */ /* 图片尺寸 */ /* Border Radius */ /* 水平间距 */ /* 垂直间距 */ /* 透明度 */ /* 文章场景相关 */ /* App.vue 或 uni.scss */ .u-picker__view__column__item { font-size: 32rpx !important; } .u-toolbar { height: 60rpx !important; } .u-toolbar__wrapper__cancel { font-size: 45rpx !important; padding: 0 15rpx !important; } .u-toolbar__wrapper__confirm { font-size: 45rpx !important; padding: 0 15rpx !important; } .u-safe-bottom { height: 500rpx; width: 500rpx; } /* 商品克隆工具样式 */ .clone-tool-container { display: flex; flex-direction: column; height: 100vh; width: 100vw; max-width: 100vw; overflow-x: hidden; background-color: #f5f5f5; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; position: fixed; top: 0; left: 0; right: 0; bottom: 0; } /* 上方日志区域 */ .log-section { height: calc(100vh - 200rpx); background: white; margin: 20rpx 20rpx 10rpx 20rpx; border-radius: 16rpx; box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; overflow: hidden; } .log-header { display: flex; justify-content: space-between; align-items: center; padding: 30rpx; border-bottom: 1rpx solid #eee; background: #fafafa; border-radius: 16rpx 16rpx 0 0; } .log-title { font-size: 32rpx; font-weight: 600; color: #333; } .log-actions { display: flex; gap: 20rpx; } .btn-small { padding: 12rpx 24rpx; font-size: 24rpx; border: 1rpx solid #ddd; border-radius: 8rpx; background: white; color: #666; cursor: pointer; } .btn-small:hover { background: #f5f5f5; border-color: #ccc; } .log-content { flex: 1; padding: 20rpx 30rpx; overflow-y: auto; } .log-item { padding: 16rpx 0; border-bottom: 1rpx solid #f0f0f0; font-size: 26rpx; line-height: 1.5; color: #555; } .log-item:last-child { border-bottom: none; } .empty-log { text-align: center; color: #999; font-size: 28rpx; padding: 80rpx 0; } /* 下方控制区域 */ .control-section { height: 160rpx; padding: 0 20rpx 20rpx; display: flex; flex-direction: column; } .status-bar { background: white; padding: 15rpx 30rpx; border-radius: 12rpx; margin-bottom: 10rpx; box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); display: flex; justify-content: center; align-items: center; } .status-text { font-size: 26rpx; color: #333; font-weight: 500; } .main-buttons { display: flex; gap: 15rpx; justify-content: space-between; } .function-btn { background: white; border: none; border-radius: 12rpx; padding: 20rpx 15rpx; box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.08); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; flex: 1; height: 80rpx; } .function-btn:hover { -webkit-transform: translateY(-2rpx); transform: translateY(-2rpx); box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.12); } .function-btn .btn-label { font-size: 24rpx; font-weight: 500; color: white; } .account-btn { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .account-btn .btn-label { color: white; } .fetch-btn { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); } .fetch-btn .btn-label { color: white; } .price-btn { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); } .price-btn .btn-label { color: white; } .process-btn { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); } .process-btn .btn-label { color: white; } .pdd-btn { background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%); } .pdd-btn .btn-label { color: white; } .main-content { display: flex; flex-direction: column; flex: 1; overflow-y: auto; padding-bottom: 20rpx; min-height: 0; /* 确保flex子项可以收缩 */ } .control-panel { width: 100%; margin-bottom: 20rpx; } .log-panel { width: 100%; border-top: 1rpx solid #eee; padding-top: 20rpx; display: flex; flex-direction: column; height: 400rpx; flex-shrink: 0; } /* 快捷操作样式 */ .quick-actions { display: flex; gap: 20rpx; margin-top: 20rpx; } .btn-primary { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30rpx 20rpx; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 16rpx; color: white; font-size: 28rpx; font-weight: 600; box-shadow: 0 8rpx 25rpx rgba(102, 126, 234, 0.3); transition: all 0.3s ease; position: relative; overflow: hidden; } .btn-primary:hover { -webkit-transform: translateY(-4rpx); transform: translateY(-4rpx); box-shadow: 0 12rpx 35rpx rgba(102, 126, 234, 0.4); } .btn-primary:active { -webkit-transform: translateY(-2rpx); transform: translateY(-2rpx); } .btn-primary:disabled { opacity: 0.6; -webkit-transform: none; transform: none; box-shadow: 0 4rpx 15rpx rgba(102, 126, 234, 0.2); } .btn-icon { font-size: 48rpx; margin-bottom: 8rpx; display: block; } .btn-text { font-size: 28rpx; font-weight: 600; } .btn-secondary { padding: 20rpx 40rpx; background-color: #f8f9fa; border: 2rpx solid #dee2e6; border-radius: 12rpx; color: #6c757d; font-size: 28rpx; font-weight: 500; transition: all 0.2s ease; } .btn-secondary:hover { background-color: #e9ecef; border-color: #adb5bd; color: #495057; } /* 模态框样式 */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; -webkit-backdrop-filter: blur(4rpx); backdrop-filter: blur(4rpx); } .modal-content { background-color: white; border-radius: 20rpx; width: 90%; max-width: 600rpx; max-height: 80vh; overflow: hidden; box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3); -webkit-animation: modalSlideIn 0.3s ease-out; animation: modalSlideIn 0.3s ease-out; } @-webkit-keyframes modalSlideIn { from { opacity: 0; -webkit-transform: translateY(-50rpx) scale(0.9); transform: translateY(-50rpx) scale(0.9); } to { opacity: 1; -webkit-transform: translateY(0) scale(1); transform: translateY(0) scale(1); } } @keyframes modalSlideIn { from { opacity: 0; -webkit-transform: translateY(-50rpx) scale(0.9); transform: translateY(-50rpx) scale(0.9); } to { opacity: 1; -webkit-transform: translateY(0) scale(1); transform: translateY(0) scale(1); } } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 30rpx; border-bottom: 2rpx solid #f1f3f4; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); } .modal-title { font-size: 32rpx; font-weight: 700; color: #212529; } .modal-close { font-size: 48rpx; color: #6c757d; cursor: pointer; width: 60rpx; height: 60rpx; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.2s ease; } .modal-close:hover { background-color: #f8f9fa; color: #495057; } .modal-body { padding: 30rpx; max-height: 60vh; overflow-y: auto; } .modal-footer { display: flex; justify-content: flex-end; gap: 20rpx; padding: 30rpx; border-top: 2rpx solid #f1f3f4; background-color: #f8f9fa; } /* 处理控制模态框特殊样式 */ .process-controls { display: flex; flex-direction: column; gap: 20rpx; margin-bottom: 30rpx; } .control-btn { display: flex; align-items: center; gap: 20rpx; padding: 24rpx 30rpx; border: none; border-radius: 12rpx; font-size: 28rpx; cursor: pointer; transition: all 0.2s ease; } .start-btn { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); color: white; } .pause-btn { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; } .stop-btn { background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%); color: white; } .control-btn:disabled { opacity: 0.5; cursor: not-allowed; } .control-btn .btn-icon { font-size: 32rpx; } .control-btn .btn-text { font-weight: 500; } .process-info { background: #f8f9fa; padding: 20rpx; border-radius: 8rpx; border-left: 4rpx solid #667eea; } .info-text { display: block; font-size: 26rpx; color: #555; margin-bottom: 8rpx; } .info-text:last-child { margin-bottom: 0; } /* 表单样式 */ .form-item { margin-bottom: 30rpx; display: flex; flex-direction: column; gap: 12rpx; } .label { font-size: 28rpx; color: #555; font-weight: 500; } .input { padding: 20rpx; border: 2rpx solid #e0e0e0; border-radius: 12rpx; font-size: 28rpx; background: #fafafa; transition: all 0.2s ease; } .input:focus { border-color: #667eea; background: white; box-shadow: 0 0 0 6rpx rgba(102, 126, 234, 0.1); } /* 价格范围和日期范围样式 */ .price-range, .date-range { display: flex; align-items: center; gap: 20rpx; } .price-range .input, .date-range .input { flex: 1; } .range-separator { font-size: 28rpx; color: #666; font-weight: 500; } /* 价格范围容器样式 */ .price-range-container { display: flex; align-items: center; gap: 20rpx; } .price-range-input { flex: 1; padding: 20rpx; border: 2rpx solid #e0e0e0; border-radius: 12rpx; font-size: 28rpx; background: #fafafa; transition: all 0.2s ease; } .price-range-input:focus { border-color: #667eea; background: white; box-shadow: 0 0 0 6rpx rgba(102, 126, 234, 0.1); } .price-separator { font-size: 28rpx; color: #666; font-weight: 500; min-width: 20rpx; text-align: center; } /* 日期选择器样式 */ .date-picker { width: 100%; } .picker-text { padding: 20rpx; border: 2rpx solid #e0e0e0; border-radius: 12rpx; font-size: 28rpx; background: #fafafa; transition: all 0.2s ease; color: #333; min-height: 28rpx; display: flex; align-items: center; } .picker-text:active { border-color: #667eea; background: white; box-shadow: 0 0 0 6rpx rgba(102, 126, 234, 0.1); } /* 价格输入容器样式 */ .price-input-container { display: flex; align-items: center; gap: 20rpx; } .sign-picker { width: 120rpx; flex-shrink: 0; } .sign-text { padding: 20rpx; border: 2rpx solid #e0e0e0; border-radius: 12rpx; font-size: 28rpx; background: #fafafa; text-align: center; color: #333; font-weight: 600; } .sign-text:active { border-color: #667eea; background: white; box-shadow: 0 0 0 6rpx rgba(102, 126, 234, 0.1); } .price-input { flex: 1; } .price-hint-text { color: #ff4757; font-size: 24rpx; margin-top: 10rpx; line-height: 1.4; } /* 日期输入容器样式 */ .date-input-container { display: flex; align-items: center; gap: 20rpx; } .date-input-container .date-picker { flex: 1; } .clear-btn { width: 60rpx; height: 60rpx; border: 2rpx solid #e0e0e0; border-radius: 50%; background: #f5f5f5; color: #666; font-size: 32rpx; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; flex-shrink: 0; transition: all 0.2s ease; } .clear-btn:active { background: #e0e0e0; color: #333; -webkit-transform: scale(0.95); transform: scale(0.95); } /* 选择器样式 */ .picker { padding: 20rpx; border: 2rpx solid #e0e0e0; border-radius: 12rpx; background: #fafafa; font-size: 28rpx; } .picker-text { color: #333; } /* 响应式设计 */ @media screen and (max-width: 750px) { .clone-tool-container { font-size: 28rpx; } .log-section { margin: 10rpx 10rpx 5rpx 10rpx; height: calc(100vh - 180rpx); } .control-section { height: 150rpx; padding: 0 10rpx 10rpx; } .main-buttons { gap: 10rpx; } .function-btn { padding: 15rpx 10rpx; height: 70rpx; } .function-btn .btn-label { font-size: 22rpx; } .modal-content { width: 95%; margin: 20rpx; } .modal-header, .modal-body, .modal-footer { padding: 20rpx; } .status-bar { padding: 12rpx 20rpx; margin-bottom: 8rpx; } .status-text { font-size: 24rpx; } } /* 超小屏幕适配 */ @media screen and (max-width: 480px) { .log-section { height: calc(100vh - 160rpx); } .control-section { height: 140rpx; } .function-btn { padding: 12rpx 8rpx; height: 60rpx; } .function-btn .btn-label { font-size: 20rpx; } }