feat ui设计稿

src/views/message/detail.vue

@@ -101,84 +101,113 @@ onMounted(load)
 
 <style lang="less" scoped>
 .message-detail {
-  padding-top: @spacing-lg;
-  padding-bottom: @spacing-xxl;
+  max-width: @container-width;
+  margin: 0 auto;
+  padding: @spacing-lg @spacing-base @spacing-xxl;
 
+  // 设计 42：面包屑 12 → 11，#9CA3AF；末段「消息详情」#4B5563 / 500
   &__breadcrumb {
-    margin-bottom: @spacing-base;
-    font-size: @font-size-base;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin-bottom: 12px; // 面包屑→卡片 15 × 0.77
+    font-size: 11px;
+    color: @text-color-disabled;
+
+    .link {
+      color: @text-color-disabled;
+    }
+
+    span:last-child {
+      color: @text-color;
+      font-weight: 500;
+    }
   }
 
+  // 设计 42：白卡直压页面灰底，无阴影
   &__card {
-    padding: @spacing-xl;
+    padding: 32px 36px 34px; // 卡内边距 42/48/44 × 0.77
     border-radius: @radius-lg;
     background: @white;
-    box-shadow: @shadow-base;
+    box-shadow: none;
   }
 
+  // 设计 42：主标题 20 → 15 / 700 / 居中 / #1F2937
   &__title {
-    font-size: @font-size-xl;
-    font-weight: 600;
+    font-size: 15px;
+    font-weight: 700;
     color: @heading-color;
+    text-align: center;
   }
 
+  // 设计 42：发布时间 12 → 11 / #9CA3AF / 居中
   &__time {
-    margin-top: @spacing-sm;
-    font-size: @font-size-sm;
+    margin-top: 11px; // 14 × 0.77
+    font-size: 11px;
+    color: @text-color-disabled;
+    text-align: center;
   }
 
+  // 设计 42：富文本 13 → 11 / #4B5563 / 居中 / 行高 24.7 × 0.77
   &__content {
-    margin-top: @spacing-lg;
-    padding: @spacing-base;
-    border-radius: @radius-base;
-    background: @bg-color-light;
+    margin-top: 24px; // 时间→正文 32 × 0.77
+    background: transparent;
     color: @text-color;
-    font-size: @font-size-base;
-    line-height: 1.8;
+    font-size: 11px;
+    line-height: 1.9;
+    text-align: center;
     white-space: pre-wrap;
     word-break: break-word;
   }
 
   &__attachments {
-    margin-top: @spacing-lg;
+    margin-top: 20px; // 正文→附件 26 × 0.77
 
     &-title {
-      margin-bottom: @spacing-sm;
-      font-size: @font-size-lg;
-      font-weight: 600;
-      color: @heading-color;
+      margin-bottom: 8px;
+      font-size: 11px;
+      font-weight: 400;
+      color: @text-color-disabled;
     }
   }
 
   &__file-list {
-    .flex(column, flex-start);
+    .flex(column, flex-start, stretch);
     gap: @spacing-sm;
   }
 
+  // 附件行：设计 42 实取底 #F7F8FA、圆角小卡、无描边
   &__file {
     .flex(row, space-between);
     gap: @spacing-base;
-    padding: @spacing-sm @spacing-base;
-    border: 1px solid @border-color;
-    border-radius: @radius-base;
-    background: @bg-color-light;
+    align-items: center;
+    width: fit-content;
+    max-width: 100%;
+    padding: 10px 14px; // 附件盒 13/15 × 0.77
+    border: none;
+    border-radius: 6px;
+    background: @finance-row-bg;
     list-style: none;
   }
 
   &__file-info {
-    .flex(column, flex-start);
-    gap: 2px;
+    .flex(column, flex-start, flex-start);
+    gap: 3px;
     min-width: 0;
   }
 
+  // 设计 42：文件名 12 → 11 / 700 / #1F2937
   &__file-name {
-    font-size: @font-size-base;
+    font-size: 11px;
+    font-weight: 700;
     color: @heading-color;
     .ellipsis();
   }
 
+  // 设计 42：大小 12 → 11 / #9CA3AF
   &__file-meta {
-    font-size: @font-size-sm;
+    font-size: 11px;
+    color: @text-color-disabled;
   }
 
   &__file-actions {
@@ -188,24 +217,40 @@ onMounted(load)
   }
 
   &__file-btn {
-    font-size: @font-size-sm;
-    color: @primary-color;
-    transition: opacity 0.2s;
+    font-size: 11px;
+    color: @text-color-secondary;
+    transition: color 0.2s;
 
     &:hover {
-      opacity: 0.75;
+      color: @primary-strong;
     }
   }
 
+  // 返回：设计 42 右下角 #024FFF 小按钮
   &__actions {
-    .flex(row, flex-start);
-    margin-top: @spacing-lg;
+    .flex(row, flex-end);
+    margin-top: 32px; // 附件→返回 43 × 0.77
+
+    .app-button {
+      height: 24px; // 31 × 0.77
+      padding: 0 16px;
+      border-radius: 6px;
+      background: @primary-strong;
+      color: @white;
+      font-size: 11px; // 13 → 可读下限 11
+      font-weight: 500;
+
+      &:hover {
+        background: @primary-strong;
+        color: @white;
+      }
+    }
   }
 
   &__empty {
     padding: @spacing-xxl 0;
     text-align: center;
-    font-size: @font-size-base;
+    font-size: 11px;
   }
 }
 </style>