style(Workflow): 重构工作流页面样式

src/pages/Personal/Workflow.vue

@@ -144,154 +144,404 @@ onMounted(() => {
 
 </script>
 <style scoped lang="scss">
+/* ══════════════════════════════════════
+   UI 重构计划 - 设计规范变量
+   ══════════════════════════════════════ */
+
+:root {
+  --aurora-indigo: #4F46E5;
+  --aurora-violet: #7C3AED;
+  --aurora-purple: #A855F7;
+  --aurora-pink: #EC4899;
+  --aurora-cyan: #06B6D4;
+
+  --glass-bg: rgba(255, 255, 255, 0.72);
+  --glass-border: rgba(255, 255, 255, 0.5);
+  --glass-shadow: 0 8px 32px rgba(79, 70, 229, 0.08), 0 2px 8px rgba(124, 58, 237, 0.04);
+
+  --text-primary: #1F2937;
+  --text-secondary: #6B7280;
+  --text-muted: #9CA3AF;
+
+  --radius-sm: 10px;
+  --radius-md: 16px;
+  --radius-lg: 20px;
+}
+
 ul,
 li {
   margin: 0;
   padding: 0;
 }
 
+/* ══════════════════════════════════════
+   主容器 - 白色背景
+   ══════════════════════════════════════ */
 .workflow {
-  padding: 16px 0 20px;
+  padding: 24px 0 32px;
+  min-height: calc(100vh - 120px);
+  background: #FFFFFF;
+  position: relative;
+
+  > * {
+    position: relative;
+    z-index: 1;
+  }
 
+  /* ══════════════════════════════════════
+     发布按钮 - 纯靛蓝色背景
+  ══════════════════════════════════════ */
   .workflow-btn {
-    height: 50px;
+    height: 56px;
     color: #FFFFFF;
     cursor: pointer;
-    border-radius: 10px;
-    font-size: 18px;
+    border-radius: var(--radius-md);
+    font-size: 17px;
+    font-weight: 700;
+    letter-spacing: 0.02em;
+    background: linear-gradient(90deg, #4f46e5 0%, #a855f7 100%);
+    box-shadow:
+      0 4px 16px rgba(99, 102, 241, 0.35),
+      0 2px 8px rgba(124, 58, 237, 0.2),
+      inset 0 1px 2px rgba(255, 255, 255, 0.25);
+    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+    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.25),
+        transparent
+      );
+      transition: left 0.6s ease;
+    }
 
     &:hover {
-      opacity: 0.9;
+      transform: translateY(-3px) scale(1.02);
+      box-shadow:
+        0 8px 28px rgba(99, 102, 241, 0.45),
+        0 4px 12px rgba(124, 58, 237, 0.3);
+
+      &::before {
+        left: 100%;
+      }
+    }
+
+    &:active {
+      transform: translateY(-1px) scale(0.98);
     }
 
     img {
-      width: 30px;
-      height: 30px;
-      margin-right: 4px;
+      width: 28px;
+      height: 28px;
+      margin-right: 8px;
+      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
+      transition: transform 0.3s ease;
+    }
+
+    &:hover img {
+      transform: rotate(90deg);
     }
   }
 
+  /* ══════════════════════════════════════
+     工作流列表容器
+  ══════════════════════════════════════ */
   .workflow-list {
-    gap: 16px;
+    gap: 24px;
     display: flex;
     flex-wrap: wrap;
-    margin-top: 16px;
+    margin-top: 24px;
 
+    /* ══════════════════════════════════════
+       卡片 - 玻璃拟态设计
+    ══════════════════════════════════════ */
     li {
-      width: 350px;
+      width: 360px;
       cursor: pointer;
       position: relative;
-      background: #F5F7FA;
-      border-radius: 16px;
+      background: var(--glass-bg);
+      backdrop-filter: blur(20px) saturate(180%);
+      -webkit-backdrop-filter: blur(20px) saturate(180%);
+      border-radius: var(--radius-lg);
       overflow: hidden;
-      border: 1px solid #FFFFFF;
+      border: 1.5px solid var(--glass-border);
+      box-shadow: var(--glass-shadow);
+      transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: linear-gradient(
+          135deg,
+          rgba(99, 102, 241, 0.03),
+          transparent 50%,
+          rgba(168, 85, 247, 0.03)
+        );
+        opacity: 0;
+        transition: opacity 0.45s ease;
+        pointer-events: none;
+        z-index: 1;
+      }
+
+      &:hover {
+        transform: translateY(-8px) scale(1.02);
+        border-color: rgba(168, 85, 247, 0.3);
+        box-shadow:
+          0 20px 48px rgba(99, 102, 241, 0.18),
+          0 8px 24px rgba(124, 58, 237, 0.12),
+          0 0 0 1px rgba(168, 85, 247, 0.15),
+          0 0 60px rgba(168, 85, 247, 0.08);
+
+        &::before {
+          opacity: 1;
+        }
+      }
 
+      /* 封面图片 */
       .image {
         width: 100%;
-        height: 204px;
+        height: 210px;
         display: block;
         object-fit: cover;
-        border-radius: 16px 16px 0 0;
+        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+        transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+        position: relative;
+        z-index: 0;
+      }
+
+      &:hover .image {
+        transform: scale(1.05);
+        filter: brightness(1.05);
       }
 
+      /* 占位空间 */
       .kong {
-        height: 166px;
+        height: 170px;
+        flex-shrink: 0;
       }
 
+      /* 内容区域 - 玻璃拟态 */
       .workflow-list-con {
-        height: 224px;
-        padding: 16px;
+        height: 230px;
+        padding: 20px;
         left: 0;
         right: 0;
         bottom: 0;
         position: absolute;
-        transform: translateY(58px);
-        transition: transform 0.3s ease;
-
-        background: #F5F7FA;
-        border-radius: 0px 0px 16px 16px;
+        transform: translateY(65px);
+        transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
+        background: rgba(255, 255, 255, 0.88);
+        backdrop-filter: blur(24px) saturate(200%);
+        -webkit-backdrop-filter: blur(24px) saturate(200%);
+        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+        border-top: 1.5px solid rgba(255, 255, 255, 0.6);
+        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.04);
 
         .top {
-          line-height: 1;
-          height: 120px;
+          line-height: 1.4;
+          height: 125px;
           display: flex;
           flex-direction: column;
+          position: relative;
+          z-index: 2;
         }
 
+        /* 时间标签 */
         .workflow-list-time {
-          font-size: 14px;
+          font-size: 13px;
+          color: var(--text-muted);
+          font-weight: 500;
+          display: flex;
+          align-items: center;
 
           img {
             width: 16px;
             height: 16px;
             margin-right: 8px;
+            opacity: 0.65;
           }
         }
 
+        /* 标题 */
         .title {
-          margin: 8px 0;
+          margin: 10px 0 6px 0;
           font-size: 18px;
-          font-weight: bold;
+          font-weight: 700;
+          color: var(--text-primary);
           display: -webkit-box;
           -webkit-box-orient: vertical;
           -webkit-line-clamp: 2;
           overflow: hidden;
           text-overflow: ellipsis;
-          line-height: 26px;
+          line-height: 1.5;
+          letter-spacing: -0.01em;
+          transition: color 0.3s ease;
         }
 
+        &:hover .title {
+          color: var(--aurora-indigo);
+        }
+
+        /* 描述 */
         .desc {
+          font-size: 13.5px;
+          color: var(--text-secondary);
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
+          font-weight: 500;
         }
 
+        /* 信息栏 */
         .info {
           font-size: 14px;
+          position: relative;
+          z-index: 2;
 
           .info-left {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+
             div {
-              margin-left: 8px;
+              font-weight: 600;
+              color: var(--text-primary);
+              font-size: 14px;
+            }
+
+            :deep(.el-avatar) {
+              border: 2px solid rgba(99, 102, 241, 0.15);
+              box-shadow: 0 2px 8px rgba(99, 102, 241, 0.12);
+              transition: all 0.3s ease;
+            }
+
+            &:hover :deep(.el-avatar) {
+              border-color: var(--aurora-indigo);
+              transform: scale(1.08);
             }
           }
 
           .info-right {
-            padding: 0 4px;
-            height: 22px;
-            background: #E9F3FF;
-            border-radius: 4px;
+            padding: 5px 12px;
+            height: auto;
+            min-height: 26px;
+            background: linear-gradient(135deg, #EEF2FF, #EDE9FE);
+            border-radius: 20px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            font-size: 12.5px;
+            font-weight: 600;
+            color: var(--aurora-indigo);
+            border: 1px solid rgba(99, 102, 241, 0.1);
+            transition: all 0.3s ease;
 
             img {
-              width: 16px;
-              height: 16px;
-              margin-right: 8px;
+              width: 15px;
+              height: 15px;
+              margin-right: 0;
+              opacity: 0.75;
+            }
+
+            &:hover {
+              background: linear-gradient(135deg, #E0E7FF, #DDD6FE);
+              border-color: rgba(99, 102, 241, 0.25);
+              box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15);
             }
           }
         }
 
+        /* 操作按钮 */
         .footer {
-          margin-top: 8px;
+          margin-top: 12px;
+          gap: 12px;
+          position: relative;
+          z-index: 2;
 
           .btn {
             width: 166px;
-            height: 40px;
+            height: 42px;
             font-size: 14px;
-            color: #2D71FF;
-            background: #FFFFFF;
-            border-radius: 10px;
+            font-weight: 600;
+            color: var(--aurora-indigo);
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: var(--radius-sm);
+            border: 1.5px solid rgba(99, 102, 241, 0.2);
+            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+            position: relative;
+            overflow: hidden;
+
+            &::before {
+              content: '';
+              position: absolute;
+              inset: 0;
+              background: linear-gradient(
+                135deg,
+                rgba(99, 102, 241, 0.05),
+                transparent
+              );
+              opacity: 0;
+              transition: opacity 0.3s ease;
+            }
 
             img {
               width: 16px;
               height: 16px;
-              margin-right: 4px;
+              margin-right: 6px;
+              transition: transform 0.3s ease;
             }
 
-            &:last-child {
-              color: #E43434;
+            &:hover {
+              transform: translateY(-2px);
+              border-color: var(--aurora-indigo);
+              box-shadow:
+                0 4px 16px rgba(99, 102, 241, 0.2),
+                0 2px 8px rgba(124, 58, 237, 0.1);
+
+              &::before {
+                opacity: 1;
+              }
+
+              img {
+                transform: scale(1.15) rotate(-5deg);
+              }
             }
 
-            &:hover {
-              opacity: 0.7;
+            &:active {
+              transform: translateY(0);
+            }
+
+            &:last-child {
+              color: #DC2626;
+              border-color: rgba(220, 38, 38, 0.2);
+
+              &::before {
+                background: linear-gradient(
+                  135deg,
+                  rgba(220, 38, 38, 0.05),
+                  transparent
+                );
+              }
+
+              &:hover {
+                border-color: #DC2626;
+                box-shadow:
+                  0 4px 16px rgba(220, 38, 38, 0.2),
+                  0 2px 8px rgba(220, 38, 38, 0.1);
+              }
             }
           }
         }
@@ -300,9 +550,217 @@ li {
       &:hover {
         .workflow-list-con {
           transform: translateY(0);
+          background: rgba(255, 255, 255, 0.94);
+          box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.06);
         }
       }
     }
   }
 }
+
+/* ══════════════════════════════════════
+   响应式布局适配
+   ══════════════════════════════════════ */
+
+/* 大屏幕 (≥1400px) */
+@media (min-width: 1400px) {
+  .workflow .workflow-list {
+    gap: 28px;
+
+    li {
+      width: 380px;
+    }
+  }
+}
+
+/* 中等屏幕 (1024px - 1399px) */
+@media (max-width: 1399px) and (min-width: 1024px) {
+  .workflow .workflow-list {
+    gap: 22px;
+
+    li {
+      width: 350px;
+    }
+  }
+}
+
+/* 平板设备 (768px - 1023px) */
+@media (max-width: 1023px) and (min-width: 768px) {
+  .workflow {
+    padding: 20px 0 28px;
+  }
+
+  .workflow .workflow-list {
+    justify-content: center;
+    gap: 20px;
+
+    li {
+      width: 340px;
+    }
+  }
+
+  .workflow .workflow-btn {
+    height: 52px;
+    font-size: 16px;
+  }
+}
+
+/* 手机竖屏 (<768px) */
+@media (max-width: 767px) {
+  :root {
+    --radius-sm: 8px;
+    --radius-md: 12px;
+    --radius-lg: 16px;
+  }
+
+  .workflow {
+    padding: 16px 0 24px;
+  }
+
+  .workflow .workflow-btn {
+    height: 50px;
+    font-size: 16px;
+    border-radius: var(--radius-md);
+
+    img {
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  .workflow .workflow-list {
+    gap: 16px;
+    margin-top: 20px;
+
+    li {
+      width: 100%;
+      max-width: 400px;
+      margin: 0 auto;
+
+      .image {
+        height: 190px;
+      }
+
+      .kong {
+        height: 155px;
+      }
+
+      .workflow-list-con {
+        height: 215px;
+        padding: 18px;
+        transform: translateY(55px);
+
+        .top {
+          height: 115px;
+        }
+
+        .title {
+          font-size: 17px;
+          margin: 8px 0 5px 0;
+        }
+
+        .desc {
+          font-size: 13px;
+        }
+
+        .info {
+          font-size: 13px;
+
+          .info-left div {
+            font-size: 13px;
+          }
+
+          .info-right {
+            font-size: 11.5px;
+            padding: 4px 10px;
+          }
+        }
+
+        .footer {
+          .btn {
+            height: 40px;
+            font-size: 13px;
+          }
+        }
+      }
+    }
+  }
+}
+
+/* 超小屏幕 (<480px) */
+@media (max-width: 479px) {
+  .workflow .workflow-list {
+    li {
+      .image {
+        height: 170px;
+      }
+
+      .kong {
+        height: 140px;
+      }
+
+      .workflow-list-con {
+        height: 200px;
+        padding: 16px;
+        transform: translateY(50px);
+
+        .top {
+          height: 105px;
+        }
+
+        .title {
+          font-size: 16px;
+          line-height: 1.4;
+        }
+
+        .info {
+          .info-left {
+            gap: 6px;
+
+            :deep(.el-avatar) {
+              width: 26px !important;
+              height: 26px !important;
+            }
+          }
+
+          .info-right {
+            font-size: 11px;
+            padding: 3px 8px;
+          }
+        }
+
+        .footer {
+          gap: 10px;
+          margin-top: 10px;
+
+          .btn {
+            width: calc(50% - 5px);
+            height: 38px;
+            font-size: 12.5px;
+
+            img {
+              width: 14px;
+              height: 14px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+/* 高分辨率屏幕优化 */
+@media (min-resolution: 2dppx) and (min-width: 1920px) {
+  .workflow .workflow-list li {
+    backdrop-filter: blur(30px) saturate(200%);
+    box-shadow:
+      0 10px 40px rgba(79, 70, 229, 0.08),
+      0 2px 12px rgba(124, 58, 237, 0.06),
+      0 0 1px rgba(168, 85, 247, 0.05);
+
+    .workflow-list-con {
+      backdrop-filter: blur(32px) saturate(220%);
+    }
+  }
+}
 </style>