|
|
@@ -1,2187 +1,562 @@
|
|
|
.stage-delivery-container {
|
|
|
- padding: 20px;
|
|
|
- background-color: #f5f7fa;
|
|
|
+ padding: 12px;
|
|
|
+ background-color: #eef0f4;
|
|
|
min-height: 100vh;
|
|
|
-
|
|
|
- // 🔥 企业微信端响应式：减小padding
|
|
|
- @media screen and (max-width: 768px) {
|
|
|
- padding: 12px !important;
|
|
|
- }
|
|
|
-
|
|
|
+
|
|
|
@media screen and (max-width: 480px) {
|
|
|
- padding: 8px !important;
|
|
|
+ padding: 8px;
|
|
|
}
|
|
|
-
|
|
|
- // 改图工单工具栏
|
|
|
+
|
|
|
+ // Revision Toolbar
|
|
|
.revision-toolbar {
|
|
|
display: flex;
|
|
|
- gap: 12px;
|
|
|
- margin-bottom: 20px;
|
|
|
-
|
|
|
- // 🔥 企业微信端响应式
|
|
|
- @media screen and (max-width: 768px) {
|
|
|
- gap: 8px !important;
|
|
|
- margin-bottom: 12px !important;
|
|
|
- }
|
|
|
-
|
|
|
+ gap: 8px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+
|
|
|
button {
|
|
|
- padding: 10px 16px;
|
|
|
+ padding: 8px 12px;
|
|
|
border: none;
|
|
|
- border-radius: 8px;
|
|
|
- font-size: 14px;
|
|
|
+ border-radius: 6px;
|
|
|
+ font-size: 13px;
|
|
|
font-weight: 500;
|
|
|
cursor: pointer;
|
|
|
- transition: all 0.2s;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- gap: 8px;
|
|
|
-
|
|
|
- // 🔥 企业微信端响应式
|
|
|
- @media screen and (max-width: 768px) {
|
|
|
- padding: 8px 12px !important;
|
|
|
- font-size: 13px !important;
|
|
|
-
|
|
|
- span {
|
|
|
- display: none !important; // 隐藏文字，只显示图标
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- svg {
|
|
|
- flex-shrink: 0;
|
|
|
-
|
|
|
- // 🔥 企业微信端响应式
|
|
|
- @media screen and (max-width: 768px) {
|
|
|
- width: 16px !important;
|
|
|
- height: 16px !important;
|
|
|
- }
|
|
|
- }
|
|
|
+ gap: 6px;
|
|
|
+ transition: all 0.2s;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.btn-create-revision {
|
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
color: white;
|
|
|
- box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
|
|
|
-
|
|
|
+ box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
|
|
|
+
|
|
|
&:hover {
|
|
|
transform: translateY(-1px);
|
|
|
- box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
|
|
- }
|
|
|
-
|
|
|
- &:active {
|
|
|
- transform: translateY(0);
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.btn-view-revisions {
|
|
|
background: white;
|
|
|
color: #4f46e5;
|
|
|
border: 1px solid #e5e7eb;
|
|
|
position: relative;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- background: #f9fafb;
|
|
|
- border-color: #4f46e5;
|
|
|
- }
|
|
|
-
|
|
|
+
|
|
|
.task-count-badge {
|
|
|
position: absolute;
|
|
|
top: -6px;
|
|
|
right: -6px;
|
|
|
- min-width: 20px;
|
|
|
- height: 20px;
|
|
|
- padding: 0 6px;
|
|
|
background: #ef4444;
|
|
|
color: white;
|
|
|
border-radius: 10px;
|
|
|
- font-size: 11px;
|
|
|
- font-weight: 600;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
|
|
|
+ padding: 2px 6px;
|
|
|
+ font-size: 10px;
|
|
|
+ font-weight: 700;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- // 加载状态
|
|
|
+ // Loading State
|
|
|
.loading-state {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- padding: 60px 20px;
|
|
|
+ padding: 40px 20px;
|
|
|
|
|
|
.spinner {
|
|
|
- width: 48px;
|
|
|
- height: 48px;
|
|
|
- border: 4px solid #e0e0e0;
|
|
|
+ width: 32px; height: 32px;
|
|
|
+ border: 3px solid #e2e8f0;
|
|
|
border-top-color: #667eea;
|
|
|
border-radius: 50%;
|
|
|
animation: spin 0.8s linear infinite;
|
|
|
}
|
|
|
|
|
|
- p {
|
|
|
- margin-top: 16px;
|
|
|
- color: #64748b;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
+ p { margin-top: 12px; font-size: 13px; color: #64748b; }
|
|
|
}
|
|
|
|
|
|
- @keyframes spin {
|
|
|
- to { transform: rotate(360deg); }
|
|
|
- }
|
|
|
+ @keyframes spin { to { transform: rotate(360deg); } }
|
|
|
|
|
|
- // ==================== 🆕 空间列表样式 ====================
|
|
|
+ // ==================== 🆕 Spaces List (Smart Grid) ====================
|
|
|
.spaces-list-section {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- gap: 24px;
|
|
|
+ gap: 12px;
|
|
|
|
|
|
- // 空间卡片
|
|
|
.space-card {
|
|
|
background: white;
|
|
|
- border-radius: 16px;
|
|
|
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
|
- overflow: hidden;
|
|
|
- transition: all 0.3s ease;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- box-shadow: 0 4px 16px rgba(102, 126, 234, 0.15);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 空间头部（显示空间名和四个阶段名称）
|
|
|
- .space-header {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 20px;
|
|
|
- padding: 20px 28px;
|
|
|
- background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
|
|
|
- border: 2px solid #e2e8f0;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
border-radius: 12px;
|
|
|
- position: relative;
|
|
|
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
|
overflow: hidden;
|
|
|
-
|
|
|
- // 🔥 企业微信端响应式：改为竖向布局
|
|
|
- @media screen and (max-width: 768px) {
|
|
|
- flex-direction: column !important;
|
|
|
- align-items: stretch !important;
|
|
|
- gap: 12px !important;
|
|
|
- padding: 12px 16px 48px 16px !important; // 底部留空间给展开图标
|
|
|
- }
|
|
|
-
|
|
|
- // 顶部装饰条
|
|
|
- &::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- height: 4px;
|
|
|
- background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #667eea 100%);
|
|
|
- background-size: 200% 100%;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
+ transition: box-shadow 0.2s;
|
|
|
|
|
|
&:hover {
|
|
|
- border-color: #667eea;
|
|
|
- box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15);
|
|
|
- transform: translateY(-2px);
|
|
|
-
|
|
|
- &::before {
|
|
|
- animation: shimmer 2s linear infinite;
|
|
|
- }
|
|
|
-
|
|
|
- .expand-icon {
|
|
|
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
- color: white;
|
|
|
- transform: scale(1.1);
|
|
|
- }
|
|
|
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
|
}
|
|
|
|
|
|
- // 空间名称区域
|
|
|
- .space-name-section {
|
|
|
+ // Header
|
|
|
+ .space-header {
|
|
|
display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
align-items: center;
|
|
|
- gap: 12px;
|
|
|
- flex-shrink: 0;
|
|
|
- min-width: 100px;
|
|
|
- font-size: 18px;
|
|
|
- font-weight: 700;
|
|
|
- color: #1e293b;
|
|
|
- padding-right: 20px;
|
|
|
- border-right: 2px solid #e2e8f0;
|
|
|
- letter-spacing: 0.3px;
|
|
|
-
|
|
|
- // 🔥 企业微信端响应式
|
|
|
- @media screen and (max-width: 768px) {
|
|
|
- flex-direction: row !important;
|
|
|
- justify-content: space-between !important;
|
|
|
- min-width: auto !important;
|
|
|
- font-size: 16px !important;
|
|
|
- padding-right: 0 !important;
|
|
|
- border-right: none !important;
|
|
|
- border-bottom: 1px solid #e2e8f0 !important;
|
|
|
- padding-bottom: 8px !important;
|
|
|
+ padding: 14px 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ background: white;
|
|
|
+ border-bottom: 1px solid transparent;
|
|
|
+ transition: all 0.2s;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: #f9fafb;
|
|
|
}
|
|
|
|
|
|
- .completion-badge {
|
|
|
- display: inline-flex;
|
|
|
+ .space-title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #1e293b;
|
|
|
+ display: flex;
|
|
|
align-items: center;
|
|
|
- justify-content: center;
|
|
|
- padding: 4px 10px;
|
|
|
- background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
|
|
|
- color: white;
|
|
|
- font-size: 13px;
|
|
|
- font-weight: 600;
|
|
|
- border-radius: 12px;
|
|
|
- box-shadow: 0 2px 6px rgba(82, 196, 26, 0.3);
|
|
|
- animation: pulse-badge 2s ease-in-out infinite;
|
|
|
-
|
|
|
- // 🔥 企业微信端响应式
|
|
|
- @media screen and (max-width: 768px) {
|
|
|
- padding: 3px 8px !important;
|
|
|
- font-size: 12px !important;
|
|
|
+ gap: 6px;
|
|
|
+
|
|
|
+ .space-badge {
|
|
|
+ font-size: 10px;
|
|
|
+ padding: 2px 6px;
|
|
|
+ background: #e0e7ff;
|
|
|
+ color: #6366f1;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-weight: 500;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- // 四个阶段名称横向排列
|
|
|
- .stage-names-row {
|
|
|
- flex: 1;
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(4, 1fr);
|
|
|
- gap: 12px;
|
|
|
- padding: 0 8px;
|
|
|
-
|
|
|
- // 🔥 企业微信端响应式：改为2列
|
|
|
- @media screen and (max-width: 768px) {
|
|
|
- grid-template-columns: repeat(2, 1fr) !important;
|
|
|
- gap: 8px;
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
|
|
|
- .stage-name-item {
|
|
|
+ .space-header-right {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- justify-content: center;
|
|
|
gap: 8px;
|
|
|
- padding: 12px 16px;
|
|
|
- background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
|
|
- border: 2px solid #e2e8f0;
|
|
|
- border-radius: 10px;
|
|
|
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- // 底部装饰条
|
|
|
- &::after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- height: 3px;
|
|
|
- background: linear-gradient(90deg, #cbd5e1 0%, #94a3b8 100%);
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
|
|
|
- .stage-label {
|
|
|
- font-size: 15px;
|
|
|
- font-weight: 600;
|
|
|
- color: #475569;
|
|
|
- letter-spacing: 0.3px;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .mini-badge {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- min-width: 24px;
|
|
|
- height: 24px;
|
|
|
- padding: 0 8px;
|
|
|
- background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
|
|
|
- color: white;
|
|
|
- border-radius: 12px;
|
|
|
+ .progress-text {
|
|
|
font-size: 12px;
|
|
|
- font-weight: 700;
|
|
|
- box-shadow: 0 2px 6px rgba(148, 163, 184, 0.3);
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- // 有文件的阶段样式
|
|
|
- &.has-files {
|
|
|
- background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
|
|
|
- border-color: #6ee7b7;
|
|
|
- box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
|
|
|
-
|
|
|
- &::after {
|
|
|
- background: linear-gradient(90deg, #10b981 0%, #059669 100%);
|
|
|
- }
|
|
|
-
|
|
|
- .stage-label {
|
|
|
- color: #047857;
|
|
|
- font-weight: 700;
|
|
|
- }
|
|
|
-
|
|
|
- .mini-badge {
|
|
|
- background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
|
|
- box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
|
|
|
- animation: pulse-badge 2s ease-in-out infinite;
|
|
|
- }
|
|
|
+ color: #64748b;
|
|
|
}
|
|
|
|
|
|
- // 悬停效果（仅在未展开时）
|
|
|
- &:hover {
|
|
|
- transform: translateY(-2px);
|
|
|
- box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
|
|
|
- border-color: #667eea;
|
|
|
-
|
|
|
- &::after {
|
|
|
- background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
|
|
|
- }
|
|
|
-
|
|
|
- .stage-label {
|
|
|
- color: #667eea;
|
|
|
+ .expand-icon {
|
|
|
+ color: #94a3b8;
|
|
|
+ transition: transform 0.3s;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ &.expanded {
|
|
|
+ transform: rotate(180deg);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- // 展开/收起图标
|
|
|
- .expand-icon {
|
|
|
- flex-shrink: 0;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 44px;
|
|
|
- height: 44px;
|
|
|
- background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
|
|
|
- border: 2px solid #cbd5e1;
|
|
|
- border-radius: 50%;
|
|
|
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
|
-
|
|
|
- // 🔥 企业微信端响应式：移到右下角
|
|
|
- @media screen and (max-width: 768px) {
|
|
|
- position: absolute !important;
|
|
|
- bottom: 12px !important;
|
|
|
- right: 50% !important;
|
|
|
- transform: translateX(50%) !important;
|
|
|
- width: 32px !important;
|
|
|
- height: 32px !important;
|
|
|
- }
|
|
|
-
|
|
|
- svg {
|
|
|
- transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
- color: #64748b;
|
|
|
- }
|
|
|
-
|
|
|
- &.expanded svg {
|
|
|
- transform: rotate(180deg);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 空间内容（展开时显示）
|
|
|
- .space-content {
|
|
|
- padding: 24px;
|
|
|
- animation: slideDown 0.3s ease-out;
|
|
|
- position: relative;
|
|
|
- transition: all 0.3s ease;
|
|
|
-
|
|
|
- // 🔥 企业微信端响应式
|
|
|
- @media screen and (max-width: 768px) {
|
|
|
- padding: 12px !important;
|
|
|
- }
|
|
|
-
|
|
|
- @media screen and (max-width: 480px) {
|
|
|
- padding: 8px !important;
|
|
|
- }
|
|
|
-
|
|
|
- // 🔥 空间拖拽状态
|
|
|
- &.space-drag-over {
|
|
|
- background: rgba(102, 126, 234, 0.05);
|
|
|
- border-radius: 16px;
|
|
|
- box-shadow: inset 0 0 0 3px rgba(102, 126, 234, 0.3);
|
|
|
- }
|
|
|
+ // Content
|
|
|
+ .space-content {
|
|
|
+ padding: 12px;
|
|
|
+ border-top: 1px solid #f1f5f9;
|
|
|
+ position: relative;
|
|
|
+ animation: slideDown 0.3s ease-out;
|
|
|
|
|
|
- // 🆕 四个阶段区域容器（横向排列）
|
|
|
- .stages-container {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(4, 1fr);
|
|
|
- gap: 16px;
|
|
|
- margin-bottom: 32px;
|
|
|
-
|
|
|
- // 🔥 企业微信端响应式：改为2列
|
|
|
- @media screen and (max-width: 768px) {
|
|
|
- grid-template-columns: repeat(2, 1fr) !important;
|
|
|
- gap: 12px !important;
|
|
|
- margin-bottom: 16px;
|
|
|
+ &.space-drag-over {
|
|
|
+ background: #f8fafc;
|
|
|
}
|
|
|
-
|
|
|
- // 🔥 极窄屏幕：改为单列
|
|
|
- @media screen and (max-width: 480px) {
|
|
|
- grid-template-columns: 1fr !important;
|
|
|
- gap: 10px !important;
|
|
|
- }
|
|
|
-
|
|
|
- // 单个阶段区域
|
|
|
- .stage-section {
|
|
|
- background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
|
|
|
- border: 2px solid #e2e8f0;
|
|
|
- border-radius: 16px;
|
|
|
- overflow: hidden;
|
|
|
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
|
|
- position: relative;
|
|
|
-
|
|
|
- // 顶部装饰条
|
|
|
- &::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- height: 4px;
|
|
|
- background: linear-gradient(90deg, #cbd5e1 0%, #94a3b8 100%);
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
|
|
|
- &:hover {
|
|
|
- border-color: #667eea;
|
|
|
- box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15);
|
|
|
- transform: translateY(-4px);
|
|
|
-
|
|
|
- &::before {
|
|
|
- background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 有文件的阶段
|
|
|
- &.has-files {
|
|
|
- background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
|
|
|
- border-color: #86efac;
|
|
|
-
|
|
|
- &::before {
|
|
|
- background: linear-gradient(90deg, #10b981 0%, #059669 100%);
|
|
|
- }
|
|
|
-
|
|
|
- .stage-header {
|
|
|
- background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
|
|
|
-
|
|
|
- .stage-name {
|
|
|
- color: #065f46;
|
|
|
- }
|
|
|
-
|
|
|
- .file-count-badge {
|
|
|
- background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
|
|
- box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
|
|
|
- }
|
|
|
+ // Drag Overlay
|
|
|
+ .space-drag-overlay {
|
|
|
+ position: absolute;
|
|
|
+ inset: 0;
|
|
|
+ background: rgba(255, 255, 255, 0.9);
|
|
|
+ z-index: 10;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .space-drag-hint {
|
|
|
+ text-align: center;
|
|
|
+ color: #6366f1;
|
|
|
+ .space-drag-icon {
|
|
|
+ margin: 0 auto 8px;
|
|
|
+ width: 48px; height: 48px;
|
|
|
+ background: #e0e7ff;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex; align-items: center; justify-content: center;
|
|
|
}
|
|
|
+ h3 { margin: 0; font-size: 16px; }
|
|
|
+ p { margin: 4px 0 0; font-size: 12px; color: #64748b; }
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- // 阶段头部
|
|
|
- .stage-header {
|
|
|
- background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
|
|
- padding: 12px 16px;
|
|
|
- border-bottom: 1px solid #e2e8f0;
|
|
|
- transition: all 0.3s ease;
|
|
|
-
|
|
|
- .stage-title {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- gap: 8px;
|
|
|
-
|
|
|
- .stage-name {
|
|
|
- font-size: 15px;
|
|
|
- font-weight: 700;
|
|
|
- color: #475569;
|
|
|
- letter-spacing: 0.3px;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .file-count-badge {
|
|
|
- display: inline-flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- min-width: 24px;
|
|
|
- height: 24px;
|
|
|
- padding: 0 8px;
|
|
|
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
- color: white;
|
|
|
- border-radius: 12px;
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 700;
|
|
|
- box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ // Grid Layout (2 Columns)
|
|
|
+ .stages-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(2, 1fr);
|
|
|
+ gap: 10px;
|
|
|
|
|
|
- // 阶段内容区域
|
|
|
- .stage-body {
|
|
|
- padding: 16px;
|
|
|
- min-height: 200px;
|
|
|
+ .stage-item {
|
|
|
+ background: #f9fafb;
|
|
|
+ border: 1px solid #e2e8f0;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 10px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
+ gap: 8px;
|
|
|
position: relative;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- background: rgba(102, 126, 234, 0.02);
|
|
|
+ transition: all 0.2s;
|
|
|
+ min-height: 80px;
|
|
|
+
|
|
|
+ // Pending State
|
|
|
+ &.pending {
|
|
|
+ border-style: dashed;
|
|
|
+ border-color: #cbd5e1;
|
|
|
+ &:hover {
|
|
|
+ background: #f5f7ff;
|
|
|
+ border-color: #6366f1;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- // 拖拽状态
|
|
|
- &.drag-over {
|
|
|
- background: rgba(102, 126, 234, 0.08);
|
|
|
- border: 2px dashed #667eea;
|
|
|
- border-radius: 12px;
|
|
|
+ // Completed State
|
|
|
+ &.completed {
|
|
|
+ background: white;
|
|
|
+ border-color: #86efac; // Greenish border
|
|
|
+ box-shadow: 0 2px 4px rgba(16, 185, 129, 0.05);
|
|
|
}
|
|
|
|
|
|
- // 拖拽提示覆盖层
|
|
|
- .drag-overlay {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- background: rgba(102, 126, 234, 0.12);
|
|
|
- backdrop-filter: blur(4px);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- z-index: 10;
|
|
|
- border-radius: 12px;
|
|
|
- animation: dragOverlay 0.3s ease-out;
|
|
|
-
|
|
|
- .drag-hint {
|
|
|
- text-align: center;
|
|
|
- color: #667eea;
|
|
|
-
|
|
|
- .drag-icon {
|
|
|
- margin-bottom: 8px;
|
|
|
- opacity: 0.9;
|
|
|
-
|
|
|
- svg {
|
|
|
- animation: bounce 1s ease-in-out infinite;
|
|
|
- color: #667eea;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- p {
|
|
|
- margin: 0;
|
|
|
- font-size: 13px;
|
|
|
- font-weight: 600;
|
|
|
- color: #667eea;
|
|
|
- }
|
|
|
- }
|
|
|
+ // Drag Over State
|
|
|
+ &.drag-over {
|
|
|
+ background: #e0e7ff;
|
|
|
+ border-color: #6366f1;
|
|
|
+ border-style: dashed;
|
|
|
+ box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
|
|
|
}
|
|
|
|
|
|
- // 紧凑型上传区域（无文件时显示）
|
|
|
- .upload-zone-compact {
|
|
|
+ .stage-label {
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #334155;
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
align-items: center;
|
|
|
- justify-content: center;
|
|
|
- gap: 12px;
|
|
|
- padding: 20px;
|
|
|
|
|
|
- .upload-btn-compact {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 8px;
|
|
|
- padding: 12px 24px;
|
|
|
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
+ .status-icon {
|
|
|
+ width: 16px; height: 16px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #10b981;
|
|
|
color: white;
|
|
|
- border: none;
|
|
|
- border-radius: 10px;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 600;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
- box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
|
|
-
|
|
|
- &:hover:not(:disabled) {
|
|
|
- transform: translateY(-2px);
|
|
|
- box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
|
|
|
- background: linear-gradient(135deg, #5568d3 0%, #6a3f8f 100%);
|
|
|
- }
|
|
|
-
|
|
|
- &:active:not(:disabled) {
|
|
|
- transform: translateY(0);
|
|
|
- }
|
|
|
-
|
|
|
- &:disabled {
|
|
|
- opacity: 0.5;
|
|
|
- cursor: not-allowed;
|
|
|
- }
|
|
|
-
|
|
|
- svg {
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- }
|
|
|
+ font-size: 10px;
|
|
|
+ display: flex; align-items: center; justify-content: center;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- // 文件预览（缩略图网格）
|
|
|
- .files-preview {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(2, 1fr);
|
|
|
- gap: 8px;
|
|
|
- width: 100%;
|
|
|
- padding: 8px;
|
|
|
+ // Previews
|
|
|
+ .preview-strip {
|
|
|
+ display: flex;
|
|
|
+ gap: 6px;
|
|
|
+ margin-top: auto;
|
|
|
|
|
|
- .file-thumbnail {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- aspect-ratio: 1;
|
|
|
- background: white;
|
|
|
- border: 2px solid #e2e8f0;
|
|
|
- border-radius: 8px;
|
|
|
+ .mini-thumb-wrapper {
|
|
|
+ width: 36px; height: 36px;
|
|
|
+ border-radius: 4px;
|
|
|
overflow: hidden;
|
|
|
+ border: 1px solid #e2e8f0;
|
|
|
+ background: white;
|
|
|
cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
|
|
|
-
|
|
|
- &:hover {
|
|
|
- border-color: #667eea;
|
|
|
- box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
|
|
|
- transform: scale(1.05);
|
|
|
-
|
|
|
- .delete-thumbnail-btn {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .thumbnail-img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- object-fit: cover;
|
|
|
- }
|
|
|
-
|
|
|
- .thumbnail-placeholder {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- color: #cbd5e1;
|
|
|
- background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
|
|
-
|
|
|
- svg {
|
|
|
- width: 28px;
|
|
|
- height: 28px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .delete-thumbnail-btn {
|
|
|
- position: absolute;
|
|
|
- top: 4px;
|
|
|
- right: 4px;
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- background: rgba(239, 68, 68, 0.95);
|
|
|
- color: white;
|
|
|
- border: none;
|
|
|
- border-radius: 6px;
|
|
|
- cursor: pointer;
|
|
|
- opacity: 0;
|
|
|
- transition: all 0.3s ease;
|
|
|
- box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
|
|
|
-
|
|
|
- &:hover {
|
|
|
- background: rgba(220, 38, 38, 1);
|
|
|
- transform: scale(1.1);
|
|
|
- }
|
|
|
-
|
|
|
- svg {
|
|
|
- width: 12px;
|
|
|
- height: 12px;
|
|
|
- }
|
|
|
- }
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
|
- .send-image-btn {
|
|
|
- position: absolute;
|
|
|
- bottom: 4px;
|
|
|
- right: 4px;
|
|
|
- width: 28px;
|
|
|
- height: 28px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
|
|
- color: white;
|
|
|
- border: none;
|
|
|
- border-radius: 6px;
|
|
|
- cursor: pointer;
|
|
|
- opacity: 0;
|
|
|
- transition: all 0.3s ease;
|
|
|
- box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
|
|
|
-
|
|
|
- &:hover {
|
|
|
- background: linear-gradient(135deg, #059669 0%, #047857 100%);
|
|
|
- transform: scale(1.1);
|
|
|
- box-shadow: 0 4px 12px rgba(16, 185, 129, 0.6);
|
|
|
- }
|
|
|
-
|
|
|
- svg {
|
|
|
- width: 14px;
|
|
|
- height: 14px;
|
|
|
- }
|
|
|
+ .mini-thumb {
|
|
|
+ width: 100%; height: 100%; object-fit: cover;
|
|
|
}
|
|
|
|
|
|
- &:hover {
|
|
|
- .send-image-btn {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
+ .file-icon {
|
|
|
+ display: flex; align-items: center; justify-content: center;
|
|
|
+ color: #94a3b8;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .more-files-indicator {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
|
|
|
- border: 2px dashed #cbd5e1;
|
|
|
- border-radius: 8px;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 700;
|
|
|
- color: #64748b;
|
|
|
+ .add-box {
|
|
|
+ width: 36px; height: 36px;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px dashed #cbd5e1;
|
|
|
+ display: flex; align-items: center; justify-content: center;
|
|
|
+ color: #94a3b8;
|
|
|
+ font-size: 16px;
|
|
|
cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
-
|
|
|
+ background: white;
|
|
|
+
|
|
|
&:hover {
|
|
|
- background: linear-gradient(135deg, #e0e7ff 0%, #ddd6fe 100%);
|
|
|
- border-color: #667eea;
|
|
|
- color: #667eea;
|
|
|
+ border-color: #6366f1;
|
|
|
+ color: #6366f1;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- // 添加更多文件按钮
|
|
|
- .add-more-files {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- gap: 8px;
|
|
|
- padding: 8px 0 0;
|
|
|
-
|
|
|
- .add-more-btn, .send-message-btn {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 6px;
|
|
|
- padding: 8px 16px;
|
|
|
- border: 2px solid #e2e8f0;
|
|
|
- border-radius: 8px;
|
|
|
- font-size: 13px;
|
|
|
- font-weight: 600;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
-
|
|
|
- &:disabled {
|
|
|
- opacity: 0.5;
|
|
|
- cursor: not-allowed;
|
|
|
- }
|
|
|
-
|
|
|
- svg {
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .add-more-btn {
|
|
|
- background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
|
|
- color: #475569;
|
|
|
-
|
|
|
- &:hover:not(:disabled) {
|
|
|
- background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
|
|
|
- border-color: #667eea;
|
|
|
- color: #667eea;
|
|
|
- transform: translateY(-1px);
|
|
|
- box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .send-message-btn {
|
|
|
- background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
|
|
- color: white;
|
|
|
- border-color: #10b981;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- background: linear-gradient(135deg, #059669 0%, #047857 100%);
|
|
|
- border-color: #047857;
|
|
|
- transform: translateY(-1px);
|
|
|
- box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
|
|
|
- }
|
|
|
- }
|
|
|
+ // Empty Actions
|
|
|
+ .upload-action {
|
|
|
+ margin-top: auto;
|
|
|
+ height: 36px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 4px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #6366f1;
|
|
|
+ background: white;
|
|
|
+ border: 1px solid #e0e7ff;
|
|
|
+ border-radius: 4px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: #6366f1;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
- // 空状态提示
|
|
|
- .empty-stage-hint {
|
|
|
+
|
|
|
+ .empty-action {
|
|
|
+ margin-top: auto;
|
|
|
+ height: 36px;
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- padding: 20px;
|
|
|
- color: #cbd5e1;
|
|
|
-
|
|
|
- svg {
|
|
|
- margin-bottom: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- p {
|
|
|
- margin: 0;
|
|
|
- font-size: 13px;
|
|
|
- font-weight: 500;
|
|
|
- color: #94a3b8;
|
|
|
- }
|
|
|
+ font-size: 12px;
|
|
|
+ color: #94a3b8;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- // 🆕 整体空间拖拽覆盖层
|
|
|
- .space-drag-overlay {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- background: rgba(102, 126, 234, 0.15);
|
|
|
- backdrop-filter: blur(8px);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- z-index: 50;
|
|
|
- border-radius: 16px;
|
|
|
- animation: spaceOverlayFadeIn 0.3s ease-out;
|
|
|
|
|
|
- .space-drag-hint {
|
|
|
- text-align: center;
|
|
|
- padding: 40px;
|
|
|
- background: rgba(255, 255, 255, 0.95);
|
|
|
- border-radius: 20px;
|
|
|
- box-shadow: 0 20px 60px rgba(102, 126, 234, 0.4);
|
|
|
- border: 3px solid rgba(102, 126, 234, 0.3);
|
|
|
- max-width: 400px;
|
|
|
- animation: spaceHintBounce 0.5s ease-out;
|
|
|
+ // Confirm Section
|
|
|
+ .space-confirm-section {
|
|
|
+ margin-top: 16px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ border-top: 1px solid #f1f5f9;
|
|
|
+ padding-top: 16px;
|
|
|
|
|
|
- .space-drag-icon {
|
|
|
- margin: 0 auto 20px;
|
|
|
- width: 80px;
|
|
|
- height: 80px;
|
|
|
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
- border-radius: 50%;
|
|
|
+ .confirm-space-btn {
|
|
|
+ width: 100%;
|
|
|
+ padding: 10px;
|
|
|
+ background: #10b981;
|
|
|
+ color: white;
|
|
|
+ border: none;
|
|
|
+ border-radius: 8px;
|
|
|
+ font-weight: 600;
|
|
|
+ cursor: pointer;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- animation: iconPulse 2s ease-in-out infinite;
|
|
|
- box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
|
|
|
-
|
|
|
- svg {
|
|
|
- color: white;
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
|
|
|
+ gap: 8px;
|
|
|
+
|
|
|
+ &:hover:not(:disabled) {
|
|
|
+ background: #059669;
|
|
|
+ }
|
|
|
+ &:disabled {
|
|
|
+ opacity: 0.5;
|
|
|
+ cursor: not-allowed;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- h3 {
|
|
|
- margin: 0 0 12px 0;
|
|
|
- font-size: 24px;
|
|
|
- font-weight: 700;
|
|
|
- color: #475569;
|
|
|
- letter-spacing: 0.5px;
|
|
|
- }
|
|
|
-
|
|
|
- p {
|
|
|
- margin: 0;
|
|
|
- font-size: 16px;
|
|
|
- color: #64748b;
|
|
|
- line-height: 1.6;
|
|
|
- font-weight: 500;
|
|
|
+ .confirmed-info {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 6px;
|
|
|
+ color: #059669;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 8px 16px;
|
|
|
+ background: #ecfdf5;
|
|
|
+ border-radius: 8px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- // 统一的空间确认按钮区域
|
|
|
- .space-confirm-section {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- padding: 32px 0 0;
|
|
|
- margin-top: 32px;
|
|
|
- border-top: 2px solid #e2e8f0;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- // 装饰性渐变背景
|
|
|
- &::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- top: -2px;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- width: 200px;
|
|
|
- height: 2px;
|
|
|
- background: linear-gradient(90deg, transparent 0%, #667eea 50%, transparent 100%);
|
|
|
- }
|
|
|
-
|
|
|
- .confirm-space-btn {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 12px;
|
|
|
- padding: 18px 56px;
|
|
|
- background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
|
|
- color: white;
|
|
|
- border: none;
|
|
|
- border-radius: 16px;
|
|
|
- font-size: 18px;
|
|
|
- font-weight: 700;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
- box-shadow: 0 8px 24px rgba(16, 185, 129, 0.35);
|
|
|
- letter-spacing: 0.5px;
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- // 按钮光泽效果
|
|
|
- &::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: -100%;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
|
|
- transition: left 0.5s ease;
|
|
|
- }
|
|
|
-
|
|
|
- &:hover:not(:disabled) {
|
|
|
- transform: translateY(-4px) scale(1.02);
|
|
|
- box-shadow: 0 12px 32px rgba(16, 185, 129, 0.45);
|
|
|
- background: linear-gradient(135deg, #059669 0%, #047857 100%);
|
|
|
-
|
|
|
- &::before {
|
|
|
- left: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &:active:not(:disabled) {
|
|
|
- transform: translateY(-2px) scale(1);
|
|
|
- }
|
|
|
-
|
|
|
- &:disabled {
|
|
|
- opacity: 0.5;
|
|
|
- cursor: not-allowed;
|
|
|
- background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
|
|
|
- }
|
|
|
-
|
|
|
- svg {
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
- filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .confirmed-info {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- gap: 12px;
|
|
|
- padding: 24px 48px;
|
|
|
- background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
|
|
|
- border: 3px solid #6ee7b7;
|
|
|
- border-radius: 16px;
|
|
|
- box-shadow: 0 6px 20px rgba(16, 185, 129, 0.25);
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- // 装饰性背景图案
|
|
|
- &::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- top: -50%;
|
|
|
- right: -50%;
|
|
|
- width: 200%;
|
|
|
- height: 200%;
|
|
|
- background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
|
|
|
- animation: rotate 20s linear infinite;
|
|
|
- }
|
|
|
-
|
|
|
- .confirmed-header {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 12px;
|
|
|
- position: relative;
|
|
|
- z-index: 1;
|
|
|
-
|
|
|
- svg {
|
|
|
- width: 32px;
|
|
|
- height: 32px;
|
|
|
- color: #059669;
|
|
|
- filter: drop-shadow(0 2px 4px rgba(5, 150, 105, 0.3));
|
|
|
- animation: pulse 2s ease-in-out infinite;
|
|
|
- }
|
|
|
-
|
|
|
- .confirmed-text {
|
|
|
- font-size: 22px;
|
|
|
- font-weight: 700;
|
|
|
- color: #059669;
|
|
|
- letter-spacing: 0.5px;
|
|
|
- text-shadow: 0 1px 2px rgba(5, 150, 105, 0.2);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .confirmed-details {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 500;
|
|
|
- color: #047857;
|
|
|
- text-align: center;
|
|
|
- line-height: 1.6;
|
|
|
- position: relative;
|
|
|
- z-index: 1;
|
|
|
- background: rgba(255, 255, 255, 0.5);
|
|
|
- padding: 8px 16px;
|
|
|
- border-radius: 8px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 没有场景时的提示
|
|
|
+ // Empty State
|
|
|
.no-products-state {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
- justify-content: center;
|
|
|
- padding: 80px 20px;
|
|
|
-
|
|
|
- .state-icon {
|
|
|
- color: #cbd5e1;
|
|
|
- margin-bottom: 20px;
|
|
|
-
|
|
|
- svg {
|
|
|
- width: 64px;
|
|
|
- height: 64px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- h3 {
|
|
|
- margin: 0 0 12px;
|
|
|
- font-size: 20px;
|
|
|
- font-weight: 600;
|
|
|
- color: #475569;
|
|
|
- }
|
|
|
-
|
|
|
- p {
|
|
|
- margin: 0;
|
|
|
- font-size: 15px;
|
|
|
- color: #94a3b8;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // ==================== 动画效果 ====================
|
|
|
-
|
|
|
- // 空间内容展开动画
|
|
|
- @keyframes slideDown {
|
|
|
- from {
|
|
|
- opacity: 0;
|
|
|
- transform: translateY(-10px);
|
|
|
- }
|
|
|
- to {
|
|
|
- opacity: 1;
|
|
|
- transform: translateY(0);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 拖拽覆盖层动画
|
|
|
- @keyframes dragOverlay {
|
|
|
- from {
|
|
|
- opacity: 0;
|
|
|
- transform: scale(0.95);
|
|
|
- }
|
|
|
- to {
|
|
|
- opacity: 1;
|
|
|
- transform: scale(1);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 拖拽提示动画
|
|
|
- @keyframes dragHint {
|
|
|
- from {
|
|
|
- opacity: 0;
|
|
|
- transform: translateY(10px) scale(0.9);
|
|
|
- }
|
|
|
- to {
|
|
|
- opacity: 1;
|
|
|
- transform: translateY(0) scale(1);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 弹跳动画
|
|
|
- @keyframes bounce {
|
|
|
- 0%, 20%, 50%, 80%, 100% {
|
|
|
- transform: translateY(0);
|
|
|
- }
|
|
|
- 40% {
|
|
|
- transform: translateY(-8px);
|
|
|
- }
|
|
|
- 60% {
|
|
|
- transform: translateY(-4px);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 脉冲动画（用于确认图标）
|
|
|
- @keyframes pulse {
|
|
|
- 0%, 100% {
|
|
|
- transform: scale(1);
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
- 50% {
|
|
|
- transform: scale(1.1);
|
|
|
- opacity: 0.8;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 旋转动画（用于装饰背景）
|
|
|
- @keyframes rotate {
|
|
|
- from {
|
|
|
- transform: rotate(0deg);
|
|
|
- }
|
|
|
- to {
|
|
|
- transform: rotate(360deg);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 渐入动画
|
|
|
- @keyframes fadeIn {
|
|
|
- from {
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
- to {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 从下方滑入动画
|
|
|
- @keyframes slideUp {
|
|
|
- from {
|
|
|
- opacity: 0;
|
|
|
- transform: translateY(20px);
|
|
|
- }
|
|
|
- to {
|
|
|
- opacity: 1;
|
|
|
- transform: translateY(0);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 缩放进入动画
|
|
|
- @keyframes scaleIn {
|
|
|
- from {
|
|
|
- opacity: 0;
|
|
|
- transform: scale(0.9);
|
|
|
- }
|
|
|
- to {
|
|
|
- opacity: 1;
|
|
|
- transform: scale(1);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 光泽扫过动画（用于空间头部）
|
|
|
- @keyframes shimmer {
|
|
|
- 0% {
|
|
|
- background-position: 200% 0;
|
|
|
- }
|
|
|
- 100% {
|
|
|
- background-position: -200% 0;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 徽章脉冲动画
|
|
|
- @keyframes pulse-badge {
|
|
|
- 0%, 100% {
|
|
|
- transform: scale(1);
|
|
|
- box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
|
|
|
- }
|
|
|
- 50% {
|
|
|
- transform: scale(1.05);
|
|
|
- box-shadow: 0 4px 12px rgba(16, 185, 129, 0.6);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 🆕 空间拖拽动画
|
|
|
- @keyframes spaceOverlayFadeIn {
|
|
|
- from {
|
|
|
- opacity: 0;
|
|
|
- backdrop-filter: blur(0px);
|
|
|
- }
|
|
|
- to {
|
|
|
- opacity: 1;
|
|
|
- backdrop-filter: blur(8px);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes spaceHintBounce {
|
|
|
- from {
|
|
|
- opacity: 0;
|
|
|
- transform: scale(0.8) translateY(20px);
|
|
|
- }
|
|
|
- to {
|
|
|
- opacity: 1;
|
|
|
- transform: scale(1) translateY(0);
|
|
|
- }
|
|
|
- }
|
|
|
+ padding: 60px 20px;
|
|
|
+ color: #94a3b8;
|
|
|
|
|
|
- @keyframes iconPulse {
|
|
|
- 0%, 100% {
|
|
|
- transform: scale(1);
|
|
|
- box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
|
|
|
- }
|
|
|
- 50% {
|
|
|
- transform: scale(1.1);
|
|
|
- box-shadow: 0 15px 40px rgba(102, 126, 234, 0.6);
|
|
|
+ .state-icon {
|
|
|
+ width: 64px; height: 64px;
|
|
|
+ background: #f1f5f9;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex; align-items: center; justify-content: center;
|
|
|
+ margin-bottom: 16px;
|
|
|
}
|
|
|
+ p { margin: 0; font-size: 14px; }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-// 阶段头部点击样式
|
|
|
-.stage-header {
|
|
|
- &.clickable {
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.2s ease;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- background: rgba(59, 130, 246, 0.05);
|
|
|
-
|
|
|
- .view-all-hint {
|
|
|
- opacity: 1;
|
|
|
- transform: translateY(0);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .view-all-hint {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 4px;
|
|
|
- font-size: 12px;
|
|
|
- color: #3b82f6;
|
|
|
- opacity: 0;
|
|
|
- transform: translateY(-4px);
|
|
|
- transition: all 0.2s ease;
|
|
|
-
|
|
|
- svg {
|
|
|
- flex-shrink: 0;
|
|
|
- }
|
|
|
- }
|
|
|
+@keyframes slideDown {
|
|
|
+ from { opacity: 0; transform: translateY(-8px); }
|
|
|
+ to { opacity: 1; transform: translateY(0); }
|
|
|
}
|
|
|
|
|
|
-// 阶段图片库模态框
|
|
|
-.stage-gallery-modal-overlay {
|
|
|
+// Modals (Simplified)
|
|
|
+.stage-gallery-modal-overlay, .message-modal-overlay {
|
|
|
position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- background: rgba(0, 0, 0, 0.6);
|
|
|
+ inset: 0;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ z-index: 100;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- z-index: 1000;
|
|
|
- backdrop-filter: blur(4px);
|
|
|
+ padding: 20px;
|
|
|
}
|
|
|
|
|
|
-.stage-gallery-modal {
|
|
|
+.stage-gallery-modal, .message-modal-box {
|
|
|
background: white;
|
|
|
- border-radius: 16px;
|
|
|
- width: 90vw;
|
|
|
- max-width: 1200px;
|
|
|
- height: 80vh;
|
|
|
- max-height: 800px;
|
|
|
+ border-radius: 12px;
|
|
|
+ width: 100%;
|
|
|
+ max-width: 400px;
|
|
|
+ max-height: 80vh;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
|
|
|
+ box-shadow: 0 10px 25px rgba(0,0,0,0.2);
|
|
|
overflow: hidden;
|
|
|
-}
|
|
|
|
|
|
-.gallery-header {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- padding: 24px 28px;
|
|
|
- border-bottom: 1px solid #e2e8f0;
|
|
|
- background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
|
|
-
|
|
|
- .gallery-title {
|
|
|
- h3 {
|
|
|
- margin: 0;
|
|
|
- font-size: 20px;
|
|
|
- font-weight: 600;
|
|
|
- color: #1e293b;
|
|
|
- }
|
|
|
-
|
|
|
- p {
|
|
|
- margin: 4px 0 0 0;
|
|
|
- font-size: 14px;
|
|
|
- color: #64748b;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .close-btn {
|
|
|
- background: none;
|
|
|
- border: none;
|
|
|
- cursor: pointer;
|
|
|
- padding: 8px;
|
|
|
- border-radius: 8px;
|
|
|
- color: #64748b;
|
|
|
- transition: all 0.2s ease;
|
|
|
+ .gallery-header, .modal-header {
|
|
|
+ padding: 16px;
|
|
|
+ border-bottom: 1px solid #e2e8f0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .gallery-title h3, h4 { margin: 0; font-size: 16px; font-weight: 700; }
|
|
|
+ p { margin: 4px 0 0; font-size: 12px; color: #64748b; }
|
|
|
|
|
|
- &:hover {
|
|
|
- background: rgba(248, 113, 113, 0.1);
|
|
|
- color: #ef4444;
|
|
|
+ .close-btn {
|
|
|
+ background: none; border: none; font-size: 24px; color: #94a3b8; cursor: pointer;
|
|
|
+ &:hover { color: #ef4444; }
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-.gallery-content {
|
|
|
- flex: 1;
|
|
|
- overflow-y: auto;
|
|
|
- padding: 24px 28px;
|
|
|
-}
|
|
|
+ .gallery-content, .modal-body {
|
|
|
+ flex: 1;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 16px;
|
|
|
|
|
|
-.images-grid {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
|
- gap: 20px;
|
|
|
-}
|
|
|
+ // Gallery Grid
|
|
|
+ .images-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(3, 1fr);
|
|
|
+ gap: 8px;
|
|
|
|
|
|
-.image-item {
|
|
|
- position: relative;
|
|
|
- background: #f8fafc;
|
|
|
- border-radius: 12px;
|
|
|
- overflow: hidden;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- border: 2px solid transparent;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- transform: translateY(-4px);
|
|
|
- box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
|
|
- border-color: #3b82f6;
|
|
|
-
|
|
|
- .delete-image-btn {
|
|
|
- opacity: 1;
|
|
|
+ .image-item {
|
|
|
+ position: relative;
|
|
|
+ aspect-ratio: 1;
|
|
|
+ border-radius: 6px;
|
|
|
+ overflow: hidden;
|
|
|
+ background: #f8fafc;
|
|
|
+ border: 1px solid #e2e8f0;
|
|
|
+
|
|
|
+ img { width: 100%; height: 100%; object-fit: cover; }
|
|
|
+ .file-placeholder {
|
|
|
+ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #cbd5e1;
|
|
|
+ }
|
|
|
+ .image-info {
|
|
|
+ position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.6); color: white; font-size: 10px; padding: 2px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ .delete-image-btn {
|
|
|
+ position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; background: rgba(239,68,68,0.9); color: white; border: none; border-radius: 50%; font-size: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .gallery-image {
|
|
|
- width: 100%;
|
|
|
- height: 150px;
|
|
|
- object-fit: cover;
|
|
|
- display: block;
|
|
|
- }
|
|
|
-
|
|
|
- .file-placeholder {
|
|
|
- width: 100%;
|
|
|
- height: 150px;
|
|
|
+
|
|
|
+ .gallery-footer, .modal-footer {
|
|
|
+ padding: 12px 16px;
|
|
|
+ border-top: 1px solid #e2e8f0;
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- background: #f1f5f9;
|
|
|
- color: #94a3b8;
|
|
|
- }
|
|
|
-
|
|
|
- .image-info {
|
|
|
- padding: 12px;
|
|
|
- background: white;
|
|
|
-
|
|
|
- .file-name {
|
|
|
- font-size: 13px;
|
|
|
- font-weight: 500;
|
|
|
- color: #1e293b;
|
|
|
- margin-bottom: 4px;
|
|
|
- white-space: nowrap;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
+ justify-content: flex-end;
|
|
|
+ gap: 8px;
|
|
|
+
|
|
|
+ .add-files-btn {
|
|
|
+ display: flex; align-items: center; gap: 6px;
|
|
|
+ background: #6366f1; color: white; border: none; padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 13px;
|
|
|
}
|
|
|
-
|
|
|
- .file-size {
|
|
|
- font-size: 12px;
|
|
|
- color: #64748b;
|
|
|
+ .close-gallery-btn, .btn-cancel {
|
|
|
+ background: white; border: 1px solid #e2e8f0; color: #64748b; padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 13px;
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .delete-image-btn {
|
|
|
- position: absolute;
|
|
|
- top: 8px;
|
|
|
- right: 8px;
|
|
|
- background: rgba(239, 68, 68, 0.9);
|
|
|
- color: white;
|
|
|
- border: none;
|
|
|
- border-radius: 6px;
|
|
|
- padding: 6px;
|
|
|
- cursor: pointer;
|
|
|
- opacity: 0;
|
|
|
- transition: all 0.2s ease;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- background: #dc2626;
|
|
|
- transform: scale(1.1);
|
|
|
+ .btn-send {
|
|
|
+ background: #10b981; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 13px;
|
|
|
+ &:disabled { opacity: 0.5; }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.empty-gallery {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- height: 300px;
|
|
|
- color: #94a3b8;
|
|
|
-
|
|
|
- p {
|
|
|
- margin-top: 16px;
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
+// Revision list
|
|
|
+.revision-list-fullscreen {
|
|
|
+ position: fixed;
|
|
|
+ inset: 0;
|
|
|
+ z-index: 200;
|
|
|
+ background: white;
|
|
|
}
|
|
|
|
|
|
-.gallery-footer {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- padding: 20px 28px;
|
|
|
- border-top: 1px solid #e2e8f0;
|
|
|
- background: #f8fafc;
|
|
|
-
|
|
|
- .gallery-actions {
|
|
|
- display: flex;
|
|
|
- gap: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .add-files-btn {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 8px;
|
|
|
- background: #3b82f6;
|
|
|
- color: white;
|
|
|
- border: none;
|
|
|
- border-radius: 8px;
|
|
|
- padding: 10px 16px;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 500;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.2s ease;
|
|
|
-
|
|
|
- &:hover:not(:disabled) {
|
|
|
- background: #2563eb;
|
|
|
- transform: translateY(-1px);
|
|
|
- }
|
|
|
-
|
|
|
- &:disabled {
|
|
|
- opacity: 0.5;
|
|
|
- cursor: not-allowed;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .close-gallery-btn {
|
|
|
- background: #6b7280;
|
|
|
- color: white;
|
|
|
- border: none;
|
|
|
- border-radius: 8px;
|
|
|
- padding: 10px 20px;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 500;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.2s ease;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- background: #4b5563;
|
|
|
- }
|
|
|
- }
|
|
|
+// ==================== 动画效果 ====================
|
|
|
+
|
|
|
+// 拖拽覆盖层动画
|
|
|
+@keyframes dragOverlay {
|
|
|
+ from { opacity: 0; transform: scale(0.95); }
|
|
|
+ to { opacity: 1; transform: scale(1); }
|
|
|
}
|
|
|
|
|
|
-// 响应式设计 - 阶段图片库
|
|
|
-@media (max-width: 768px) {
|
|
|
- .stage-gallery-modal {
|
|
|
- width: 95vw;
|
|
|
- height: 90vh;
|
|
|
- margin: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .gallery-header {
|
|
|
- padding: 16px 20px;
|
|
|
-
|
|
|
- .gallery-title h3 {
|
|
|
- font-size: 18px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .gallery-content {
|
|
|
- padding: 16px 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .images-grid {
|
|
|
- grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
|
|
- gap: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .image-item {
|
|
|
- .gallery-image,
|
|
|
- .file-placeholder {
|
|
|
- height: 120px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .gallery-footer {
|
|
|
- padding: 16px 20px;
|
|
|
- flex-direction: column;
|
|
|
- gap: 12px;
|
|
|
-
|
|
|
- .gallery-actions {
|
|
|
- width: 100%;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
- }
|
|
|
+// 拖拽提示动画
|
|
|
+@keyframes dragHint {
|
|
|
+ from { opacity: 0; transform: translateY(10px) scale(0.9); }
|
|
|
+ to { opacity: 1; transform: translateY(0) scale(1); }
|
|
|
}
|
|
|
|
|
|
-// 全屏工单列表
|
|
|
-.revision-list-fullscreen {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- background: rgba(0, 0, 0, 0.5);
|
|
|
- z-index: 2100;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- animation: fadeIn 0.2s ease;
|
|
|
- pointer-events: auto;
|
|
|
-
|
|
|
- app-revision-task-list {
|
|
|
- width: 90%;
|
|
|
- max-width: 1200px;
|
|
|
- height: 85vh;
|
|
|
- background: white;
|
|
|
- border-radius: 16px;
|
|
|
- box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
|
|
- overflow: hidden;
|
|
|
- animation: slideUp 0.3s ease;
|
|
|
- }
|
|
|
+// 弹跳动画
|
|
|
+@keyframes bounce {
|
|
|
+ 0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
|
|
|
+ 40% { transform: translateY(-8px); }
|
|
|
+ 60% { transform: translateY(-4px); }
|
|
|
+}
|
|
|
+
|
|
|
+// 脉冲动画（用于确认图标）
|
|
|
+@keyframes pulse {
|
|
|
+ 0%, 100% { transform: scale(1); opacity: 1; }
|
|
|
+ 50% { transform: scale(1.1); opacity: 0.8; }
|
|
|
}
|
|
|
|
|
|
+// 旋转动画（用于装饰背景）
|
|
|
+@keyframes rotate {
|
|
|
+ from { transform: rotate(0deg); }
|
|
|
+ to { transform: rotate(360deg); }
|
|
|
+}
|
|
|
+
|
|
|
+// 渐入动画
|
|
|
@keyframes fadeIn {
|
|
|
from { opacity: 0; }
|
|
|
to { opacity: 1; }
|
|
|
}
|
|
|
|
|
|
+// 从下方滑入动画
|
|
|
@keyframes slideUp {
|
|
|
- from {
|
|
|
- opacity: 0;
|
|
|
- transform: translateY(20px);
|
|
|
- }
|
|
|
- to {
|
|
|
- opacity: 1;
|
|
|
- transform: translateY(0);
|
|
|
- }
|
|
|
+ from { opacity: 0; transform: translateY(20px); }
|
|
|
+ to { opacity: 1; transform: translateY(0); }
|
|
|
}
|
|
|
|
|
|
-// 消息发送弹窗
|
|
|
-.message-modal-overlay {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- background: rgba(0, 0, 0, 0.5);
|
|
|
- z-index: 2300;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- animation: fadeIn 0.2s ease;
|
|
|
- pointer-events: auto;
|
|
|
+// 缩放进入动画
|
|
|
+@keyframes scaleIn {
|
|
|
+ from { opacity: 0; transform: scale(0.9); }
|
|
|
+ to { opacity: 1; transform: scale(1); }
|
|
|
}
|
|
|
|
|
|
-.message-modal-box {
|
|
|
- background: white;
|
|
|
- border-radius: 16px;
|
|
|
- width: 90%;
|
|
|
- max-width: 600px;
|
|
|
- max-height: 85vh;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
|
|
- animation: slideUp 0.3s ease;
|
|
|
-
|
|
|
- .modal-header {
|
|
|
- padding: 20px 24px;
|
|
|
- border-bottom: 1px solid #e5e7eb;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- h4 {
|
|
|
- margin: 0;
|
|
|
- font-size: 18px;
|
|
|
- font-weight: 600;
|
|
|
- color: #1f2937;
|
|
|
- }
|
|
|
-
|
|
|
- .close-btn {
|
|
|
- padding: 4px;
|
|
|
- background: transparent;
|
|
|
- border: none;
|
|
|
- cursor: pointer;
|
|
|
- color: #6b7280;
|
|
|
- font-size: 28px;
|
|
|
- line-height: 1;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- color: #1f2937;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .modal-body {
|
|
|
- flex: 1;
|
|
|
- overflow-y: auto;
|
|
|
- padding: 24px;
|
|
|
-
|
|
|
- .section-label {
|
|
|
- display: block;
|
|
|
- margin-bottom: 12px;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 600;
|
|
|
- color: #374151;
|
|
|
- }
|
|
|
-
|
|
|
- .stage-info-section {
|
|
|
- background: #f9fafb;
|
|
|
- border-radius: 12px;
|
|
|
- padding: 16px;
|
|
|
- margin-bottom: 20px;
|
|
|
-
|
|
|
- .info-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 8px;
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- margin-bottom: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .label {
|
|
|
- font-size: 13px;
|
|
|
- font-weight: 600;
|
|
|
- color: #6b7280;
|
|
|
- width: 60px;
|
|
|
- }
|
|
|
-
|
|
|
- .value {
|
|
|
- font-size: 14px;
|
|
|
- color: #1f2937;
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .template-section {
|
|
|
- margin-bottom: 20px;
|
|
|
-
|
|
|
- .template-options {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 8px;
|
|
|
-
|
|
|
- .template-option {
|
|
|
- padding: 12px 16px;
|
|
|
- background: white;
|
|
|
- border: 2px solid #e5e7eb;
|
|
|
- border-radius: 10px;
|
|
|
- text-align: left;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 1.6;
|
|
|
- color: #374151;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.2s;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- background: #f9fafb;
|
|
|
- border-color: #10b981;
|
|
|
- }
|
|
|
-
|
|
|
- &.active {
|
|
|
- background: #ecfdf5;
|
|
|
- border-color: #10b981;
|
|
|
- color: #065f46;
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .custom-message-section {
|
|
|
- margin-bottom: 20px;
|
|
|
-
|
|
|
- textarea {
|
|
|
- width: 100%;
|
|
|
- padding: 12px;
|
|
|
- border: 2px solid #e5e7eb;
|
|
|
- border-radius: 10px;
|
|
|
- font-size: 14px;
|
|
|
- font-family: inherit;
|
|
|
- line-height: 1.6;
|
|
|
- resize: vertical;
|
|
|
-
|
|
|
- &:focus {
|
|
|
- outline: none;
|
|
|
- border-color: #10b981;
|
|
|
- box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .char-count {
|
|
|
- margin-top: 4px;
|
|
|
- font-size: 12px;
|
|
|
- color: #9ca3af;
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .preview-images-section {
|
|
|
- margin-bottom: 20px;
|
|
|
-
|
|
|
- .preview-images-grid {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(3, 1fr);
|
|
|
- gap: 8px;
|
|
|
-
|
|
|
- .preview-img {
|
|
|
- width: 100%;
|
|
|
- aspect-ratio: 1;
|
|
|
- object-fit: cover;
|
|
|
- border-radius: 8px;
|
|
|
- border: 2px solid #e5e7eb;
|
|
|
- }
|
|
|
-
|
|
|
- .more-images {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- aspect-ratio: 1;
|
|
|
- background: #f9fafb;
|
|
|
- border: 2px dashed #d1d5db;
|
|
|
- border-radius: 8px;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 600;
|
|
|
- color: #6b7280;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .modal-footer {
|
|
|
- padding: 16px 24px;
|
|
|
- border-top: 1px solid #e5e7eb;
|
|
|
- display: flex;
|
|
|
- gap: 12px;
|
|
|
- justify-content: flex-end;
|
|
|
-
|
|
|
- button {
|
|
|
- padding: 10px 24px;
|
|
|
- border: none;
|
|
|
- border-radius: 10px;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 600;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.2s;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 8px;
|
|
|
-
|
|
|
- &:disabled {
|
|
|
- opacity: 0.5;
|
|
|
- cursor: not-allowed;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .btn-cancel {
|
|
|
- background: white;
|
|
|
- color: #6b7280;
|
|
|
- border: 2px solid #d1d5db;
|
|
|
-
|
|
|
- &:hover:not(:disabled) {
|
|
|
- background: #f9fafb;
|
|
|
- border-color: #9ca3af;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .btn-send {
|
|
|
- background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
|
|
- color: white;
|
|
|
-
|
|
|
- &:hover:not(:disabled) {
|
|
|
- background: linear-gradient(135deg, #059669 0%, #047857 100%);
|
|
|
- box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
|
|
|
- }
|
|
|
-
|
|
|
- .spinner-small {
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- border: 2px solid rgba(255, 255, 255, 0.3);
|
|
|
- border-top-color: white;
|
|
|
- border-radius: 50%;
|
|
|
- animation: spin 0.6s linear infinite;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+// 🆕 空间拖拽动画
|
|
|
+@keyframes spaceOverlayFadeIn {
|
|
|
+ from { opacity: 0; backdrop-filter: blur(0px); }
|
|
|
+ to { opacity: 1; backdrop-filter: blur(8px); }
|
|
|
+}
|
|
|
|
|
|
- // ==================== 🔥 企业微信端响应式适配 ====================
|
|
|
- @media screen and (max-width: 768px) {
|
|
|
- padding: 12px;
|
|
|
-
|
|
|
- // 工具栏优化
|
|
|
- .revision-toolbar {
|
|
|
- gap: 8px;
|
|
|
- margin-bottom: 12px;
|
|
|
-
|
|
|
- button {
|
|
|
- padding: 8px 12px;
|
|
|
- font-size: 13px;
|
|
|
-
|
|
|
- svg {
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- span {
|
|
|
- display: none; // 隐藏文字，只显示图标
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .btn-view-revisions {
|
|
|
- .task-count-badge {
|
|
|
- top: -4px;
|
|
|
- right: -4px;
|
|
|
- min-width: 18px;
|
|
|
- height: 18px;
|
|
|
- font-size: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 空间卡片优化
|
|
|
- .spaces-list-section {
|
|
|
- gap: 16px;
|
|
|
-
|
|
|
- .space-card {
|
|
|
- border-radius: 12px;
|
|
|
-
|
|
|
- .space-header {
|
|
|
- flex-direction: column;
|
|
|
- gap: 12px;
|
|
|
- padding: 12px 16px;
|
|
|
- align-items: stretch;
|
|
|
-
|
|
|
- &::before {
|
|
|
- height: 3px;
|
|
|
- }
|
|
|
-
|
|
|
- // 空间名称区域
|
|
|
- .space-name-section {
|
|
|
- flex-direction: row;
|
|
|
- justify-content: space-between;
|
|
|
- min-width: auto;
|
|
|
- font-size: 16px;
|
|
|
- padding-right: 0;
|
|
|
- border-right: none;
|
|
|
- border-bottom: 1px solid #e2e8f0;
|
|
|
- padding-bottom: 8px;
|
|
|
-
|
|
|
- .completion-badge {
|
|
|
- padding: 3px 8px;
|
|
|
- font-size: 12px;
|
|
|
- border-radius: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 四个阶段名称改为2x2网格
|
|
|
- .stage-names-row {
|
|
|
- grid-template-columns: repeat(2, 1fr);
|
|
|
- gap: 8px;
|
|
|
- padding: 0;
|
|
|
-
|
|
|
- .stage-name-item {
|
|
|
- padding: 8px 12px;
|
|
|
- border-radius: 8px;
|
|
|
-
|
|
|
- &::after {
|
|
|
- height: 2px;
|
|
|
- }
|
|
|
-
|
|
|
- .stage-label {
|
|
|
- font-size: 13px;
|
|
|
- }
|
|
|
-
|
|
|
- .mini-badge {
|
|
|
- min-width: 20px;
|
|
|
- height: 20px;
|
|
|
- padding: 0 6px;
|
|
|
- font-size: 11px;
|
|
|
- border-radius: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 展开图标
|
|
|
- .expand-icon {
|
|
|
- position: absolute;
|
|
|
- top: 12px;
|
|
|
- right: 16px;
|
|
|
- width: 32px;
|
|
|
- height: 32px;
|
|
|
-
|
|
|
- svg {
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 空间内容区域优化
|
|
|
- .space-content {
|
|
|
- padding: 12px;
|
|
|
-
|
|
|
- // 阶段容器改为2列布局
|
|
|
- .stages-container {
|
|
|
- grid-template-columns: repeat(2, 1fr);
|
|
|
- gap: 12px;
|
|
|
- margin-bottom: 16px;
|
|
|
-
|
|
|
- .stage-section {
|
|
|
- border-radius: 12px;
|
|
|
-
|
|
|
- &::before {
|
|
|
- height: 3px;
|
|
|
- }
|
|
|
-
|
|
|
- .stage-header {
|
|
|
- padding: 10px 12px;
|
|
|
-
|
|
|
- .stage-title {
|
|
|
- gap: 6px;
|
|
|
-
|
|
|
- .stage-name {
|
|
|
- font-size: 13px;
|
|
|
- }
|
|
|
-
|
|
|
- .file-count-badge {
|
|
|
- min-width: 20px;
|
|
|
- height: 20px;
|
|
|
- padding: 0 6px;
|
|
|
- font-size: 11px;
|
|
|
- border-radius: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .view-all-hint {
|
|
|
- font-size: 11px;
|
|
|
- gap: 4px;
|
|
|
-
|
|
|
- svg {
|
|
|
- width: 14px;
|
|
|
- height: 14px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .stage-body {
|
|
|
- padding: 12px;
|
|
|
- min-height: 150px;
|
|
|
-
|
|
|
- .upload-zone-compact {
|
|
|
- padding: 12px;
|
|
|
- gap: 8px;
|
|
|
-
|
|
|
- .upload-btn-compact {
|
|
|
- padding: 10px 16px;
|
|
|
- font-size: 12px;
|
|
|
- border-radius: 8px;
|
|
|
-
|
|
|
- svg {
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .upload-hint {
|
|
|
- font-size: 11px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 文件预览网格
|
|
|
- .files-preview-grid {
|
|
|
- grid-template-columns: repeat(2, 1fr);
|
|
|
- gap: 8px;
|
|
|
-
|
|
|
- .file-preview-item {
|
|
|
- .file-thumbnail {
|
|
|
- height: 80px;
|
|
|
- border-radius: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .file-name {
|
|
|
- font-size: 11px;
|
|
|
- padding: 4px 6px;
|
|
|
- }
|
|
|
-
|
|
|
- .btn-remove-file {
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
- top: 4px;
|
|
|
- right: 4px;
|
|
|
-
|
|
|
- svg {
|
|
|
- width: 14px;
|
|
|
- height: 14px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 加载状态
|
|
|
- .stage-uploading {
|
|
|
- padding: 12px;
|
|
|
-
|
|
|
- .uploading-spinner {
|
|
|
- width: 32px;
|
|
|
- height: 32px;
|
|
|
- border-width: 3px;
|
|
|
- }
|
|
|
-
|
|
|
- p {
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 空间拖拽提示
|
|
|
- .space-drag-overlay {
|
|
|
- .space-drag-hint {
|
|
|
- padding: 16px;
|
|
|
-
|
|
|
- .space-drag-icon svg {
|
|
|
- width: 36px;
|
|
|
- height: 36px;
|
|
|
- }
|
|
|
-
|
|
|
- h3 {
|
|
|
- font-size: 14px;
|
|
|
- margin: 8px 0 4px;
|
|
|
- }
|
|
|
-
|
|
|
- p {
|
|
|
- font-size: 11px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 确认状态卡片优化
|
|
|
- .confirmation-card {
|
|
|
- padding: 12px;
|
|
|
- border-radius: 12px;
|
|
|
-
|
|
|
- .confirmation-header {
|
|
|
- gap: 8px;
|
|
|
-
|
|
|
- .confirmation-icon svg {
|
|
|
- width: 32px;
|
|
|
- height: 32px;
|
|
|
- }
|
|
|
-
|
|
|
- .confirmation-text {
|
|
|
- h3 {
|
|
|
- font-size: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- p {
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 空状态优化
|
|
|
- .empty-state {
|
|
|
- padding: 24px 16px;
|
|
|
-
|
|
|
- .empty-icon svg {
|
|
|
- width: 48px;
|
|
|
- height: 48px;
|
|
|
- }
|
|
|
-
|
|
|
- h3 {
|
|
|
- font-size: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- p {
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // ==================== 🔥 极窄屏幕（<480px）单列布局 ====================
|
|
|
- @media screen and (max-width: 480px) {
|
|
|
- padding: 8px;
|
|
|
-
|
|
|
- .spaces-list-section {
|
|
|
- gap: 12px;
|
|
|
-
|
|
|
- .space-card {
|
|
|
- .space-content {
|
|
|
- padding: 8px;
|
|
|
-
|
|
|
- // 阶段容器改为单列布局
|
|
|
- .stages-container {
|
|
|
- grid-template-columns: 1fr;
|
|
|
- gap: 10px;
|
|
|
-
|
|
|
- .stage-section {
|
|
|
- .stage-body {
|
|
|
- min-height: 120px;
|
|
|
-
|
|
|
- .files-preview-grid {
|
|
|
- grid-template-columns: repeat(2, 1fr);
|
|
|
- gap: 6px;
|
|
|
-
|
|
|
- .file-preview-item {
|
|
|
- .file-thumbnail {
|
|
|
- height: 70px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+@keyframes spaceHintBounce {
|
|
|
+ from { opacity: 0; transform: scale(0.8) translateY(20px); }
|
|
|
+ to { opacity: 1; transform: scale(1) translateY(0); }
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes iconPulse {
|
|
|
+ 0%, 100% { transform: scale(1); box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4); }
|
|
|
+ 50% { transform: scale(1.1); box-shadow: 0 15px 40px rgba(102, 126, 234, 0.6); }
|
|
|
}
|
0235711