feat ui设计稿

src/views/finance/bill-detail.vue

@@ -79,7 +79,14 @@ onMounted(() => {
           </div>
           <div class="bill-detail__field">
             <span class="bill-detail__label text-secondary">订单金额</span>
-            <span class="bill-detail__value bill-detail__value--amount">¥{{ formatMoney(currentBill.amount) }}</span>
+            <!-- 设计 31：金额随状态取色——已支付红 / 待支付橙 / 未到期深灰 -->
+            <span
+              class="bill-detail__value bill-detail__value--amount"
+              :class="{
+                'is-pending': currentBill.status === '待支付',
+                'is-idle': currentBill.status === '未到期' || currentBill.status === '已取消',
+              }"
+            >¥{{ formatMoney(currentBill.amount) }}</span>
           </div>
         </div>
 
@@ -143,17 +150,28 @@ onMounted(() => {
 
 <style lang="less" scoped>
 .bill-detail {
-  padding-top: @spacing-lg;
-  padding-bottom: @spacing-xxl;
+  width: 100%;
+  max-width: @container-width;
+  margin: 0 auto;
+  padding: @spacing-lg @spacing-base @spacing-xxl;
 
+  // 设计 31：面包屑 13 设计px → 11px，前缀灰、当前页深灰
   &__breadcrumb {
     margin-bottom: @spacing-base;
-    font-size: @font-size-base;
+    font-size: 11px;
+    color: @text-color-disabled;
+
+    > span:last-child {
+      color: @text-color;
+    }
   }
 
+  // 设计 31：白卡居中（对应设计三张窄卡的中轴布局），圆角 8、柔阴影
   &__card {
-    padding: @spacing-lg;
-    border-radius: @radius-lg;
+    max-width: 440px;
+    margin: 0 auto;
+    padding: @spacing-base 20px 20px;
+    border-radius: @radius-base;
     background: @white;
     box-shadow: @shadow-base;
   }
@@ -164,69 +182,114 @@ onMounted(() => {
   }
 
   &__card-title {
-    font-size: @font-size-lg;
-    font-weight: 600;
+    font-size: 12px;
+    font-weight: 700;
     color: @heading-color;
   }
 
+  // 状态徽标压成设计稿的深色粗体状态词
+  :deep(.status-tag) {
+    padding: 0;
+    background: transparent;
+    color: @heading-color;
+    font-size: 12px;
+    font-weight: 700;
+  }
+
+  // 字段行：标签左（灰 11px）、值右（深色粗体）——设计 31 左右分栏
   &__fields {
-    .flex(column, flex-start);
-    gap: @spacing-sm;
+    .flex(column, flex-start, stretch);
+    gap: 12px;
   }
 
   &__field {
-    .flex(row, flex-start, center);
+    .flex(row, space-between, center);
     gap: @spacing-base;
-    font-size: @font-size-base;
+    font-size: 11px;
   }
 
   &__label {
-    width: 80px;
     flex-shrink: 0;
+    font-size: 11px;
   }
 
   &__value {
     color: @heading-color;
+    font-weight: 600;
+    text-align: right;
+    word-break: break-all;
 
+    // 设计 31：付款金额 已支付 #EF4444 / 待支付 #F59E0B / 未到期深灰，18 设计px → 14px 粗体
     &--amount {
-      font-weight: 600;
+      font-size: 14px;
+      font-weight: 700;
       color: @danger-color;
     }
+
+    &.is-pending {
+      color: @finance-pending;
+    }
+
+    &.is-idle {
+      color: @heading-color;
+    }
   }
 
   &__pay {
-    margin-top: @spacing-lg;
+    margin-top: @spacing-base;
   }
 
   &__pay-info {
-    margin-top: @spacing-lg;
+    margin-top: @spacing-base;
     padding-top: @spacing-base;
-    border-top: 1px solid @border-color;
+    border-top: 1px solid @project-divider;
   }
 
   &__sub-title {
-    margin-bottom: @spacing-sm;
-    font-size: @font-size-base;
-    font-weight: 600;
+    margin-bottom: 12px;
+    font-size: 11px;
+    font-weight: 700;
     color: @heading-color;
   }
 
   &__tip {
-    margin-top: @spacing-lg;
-    padding: @spacing-base;
-    border-radius: @radius-base;
+    margin-top: @spacing-base;
+    padding: 12px;
+    border-radius: @radius-sm;
     background: @bg-color;
-    font-size: @font-size-base;
+    font-size: 11px;
   }
 
   &__empty {
     padding: @spacing-xl 0;
     text-align: center;
-    font-size: @font-size-base;
+    font-size: 11px;
   }
 
   &__back {
-    margin-top: @spacing-lg;
+    max-width: 440px;
+    margin: @spacing-base auto 0;
+  }
+
+  // 设计 31/32：按钮蓝底 #024FFF（返回/立即支付同色）
+  :deep(.app-button--primary) {
+    background: @primary-strong;
+
+    &:hover {
+      background: @primary-color;
+    }
+  }
+
+  &__back :deep(.app-button--default) {
+    border-color: @primary-strong;
+    background: @primary-strong;
+    color: @white;
+
+    &:hover {
+      border-color: @primary-color;
+      background: @primary-color;
+      color: @white;
+    }
   }
 }
 </style>