feat ui设计稿

src/views/contract/sign.vue

@@ -35,44 +35,76 @@ onMounted(load)
 
 <template>
   <div class="contract-sign">
-    <nav class="contract-sign__breadcrumb text-secondary">
-      <RouterLink to="/contract" class="link">
-        合同中心
-      </RouterLink>
-      <span> &gt; </span>
-      <RouterLink :to="`/contract/${contractId}`" class="link">
-        合同详情
-      </RouterLink>
-      <span> &gt; </span>
-      <span>签署合同</span>
-    </nav>
+    <div class="container">
+      <nav class="contract-sign__breadcrumb text-secondary">
+        <RouterLink to="/contract" class="link">
+          合同中心
+        </RouterLink>
+        <span> &gt; </span>
+        <RouterLink :to="`/contract/${contractId}`" class="link">
+          合同详情
+        </RouterLink>
+        <span> &gt; </span>
+        <span>签署合同</span>
+      </nav>
 
-    <ContractSignPanel
-      :expires-in="signExpires"
-      @refresh="onRefresh"
-    />
+      <ContractSignPanel
+        :expires-in="signExpires"
+        @refresh="onRefresh"
+      />
 
-    <div class="contract-sign__footer">
-      <AppButton @click="onBack">
-        返回
-      </AppButton>
+      <div class="contract-sign__footer">
+        <AppButton @click="onBack">
+          返回
+        </AppButton>
+      </div>
     </div>
   </div>
 </template>
 
 <style lang="less" scoped>
 .contract-sign {
-  .flex(column, flex-start);
-  gap: @spacing-base;
   padding-top: @spacing-lg;
   padding-bottom: @spacing-xxl;
 
+  // 内容列（面包屑 → 签署卡 → 返回）：面包屑 → 卡片 12（设计 16 × 0.77）
+  .container {
+    .flex(column, flex-start, stretch);
+    gap: 12px;
+  }
+
+  // 面包屑（设计 39：12 设计px → 可读下限 11、#9CA3AF，当前项 #4B5563 加粗）
   &__breadcrumb {
-    font-size: @font-size-base;
+    font-size: 11px;
+    color: @text-color-disabled;
+
+    > span:last-child {
+      color: @text-color;
+      font-weight: 500;
+    }
   }
 
   &__footer {
-    .flex(row, flex-start);
+    .flex(row, flex-end);
+    width: 100%;
+    margin-top: 19px;           // 卡片底 → 按钮：设计 40 × 0.77（另计容器 12）
+
+    // 「返回」按钮（设计 39：#024FFF 实底、白字、小圆角）
+    :deep(.app-button) {
+      height: 30px;
+      padding: 0 24px;          // 按钮宽约 98 设计 × 0.77
+      border: none;
+      border-radius: @radius-sm;
+      background: @primary-strong;
+      color: @white;
+      font-size: 11px;          // 设计 13 → 可读下限
+    }
+
+    :deep(.app-button:hover) {
+      border-color: transparent;
+      background: @primary-color;
+      color: @white;
+    }
   }
 }
 </style>