diff --git a/frontend/src/views/Settings.vue b/frontend/src/views/Settings.vue
index bf786c1..e7638a0 100644
--- a/frontend/src/views/Settings.vue
+++ b/frontend/src/views/Settings.vue
@@ -1061,51 +1061,73 @@
                 </a-divider>
                 
                 <div class="config-grid">
-                  <div class="config-item" style="grid-column: span 1;">
-                    <div class="config-item-header">
-                      <Icon name="minus" size="md" color="#ff4d4f" />
-                      <span class="config-item-title">每小时扣分</span>
+                  <!-- 每小时扣分 -->
+                  <div class="config-item delay-config-card">
+                    <div class="config-info">
+                      <div class="config-header">
+                        <div class="icon-box red">
+                          <Icon name="clock" size="md" />
+                        </div>
+                        <span class="title">每小时扣分</span>
+                      </div>
+                      <div class="desc">任务延误完结时每延误1小时扣除的分数，支持小数。</div>
+                    </div>
+                    <div class="config-action">
+                      <a-input-number 
+                        v-model:value="delayPenaltyConfig.perHour"
+                        :min="0"
+                        :max="100"
+                        :step="0.1"
+                        :precision="2"
+                        size="large"
+                        style="width: 160px;"
+                      >
+                        <template #addonAfter>分/小时</template>
+                      </a-input-number>
                     </div>
-                    <div class="config-item-desc">任务延误完结时每延误1小时扣除的分数</div>
-                    <a-input-number 
-                      v-model:value="delayPenaltyConfig.perHour"
-                      :min="0"
-                      :max="10"
-                      :step="0.1"
-                      :precision="2"
-                      style="width: 120px;"
-                    >
-                      <template #addonAfter>分/小时</template>
-                    </a-input-number>
                   </div>
                   
-                  <div class="config-item" style="grid-column: span 1;">
-                    <div class="config-item-header">
-                      <Icon name="calendar" size="md" color="#31f08b" />
-                      <span class="config-item-title">月度积分清零</span>
+                  <!-- 月度积分清零 -->
+                  <div class="config-item delay-config-card">
+                    <div class="config-info">
+                      <div class="config-header">
+                        <div class="icon-box green">
+                          <Icon name="calendar" size="md" />
+                        </div>
+                        <span class="title">月度积分清零</span>
+                      </div>
+                      <div class="desc">启用后，接单部门的积分统计将在每月1号自动归零重新开始。</div>
+                    </div>
+                    <div class="config-action">
+                      <a-switch 
+                        v-model:checked="delayPenaltyConfig.monthlyReset"
+                        checked-children="已启用" 
+                        un-checked-children="已关闭"
+                      />
                     </div>
-                    <div class="config-item-desc">接单部门积分是否按月清零重新统计</div>
-                    <a-switch 
-                      v-model:checked="delayPenaltyConfig.monthlyReset"
-                      checked-children="启用" 
-                      un-checked-children="关闭"
-                    />
                   </div>
                 </div>
 
                 <a-alert 
-                  message="延误扣分说明" 
-                  description="任务延误时间 = 实际完成时间 - 预计完成时间（接单时间 + 累计时效）。延误扣分 = 延误小时数 × 每小时扣分数。扣分从任务积分中扣除，最多扣至0分。"
-                  type="warning" 
+                  message="延误扣分计算公式" 
+                  type="info" 
                   show-icon 
-                  style="margin-top: 16px; margin-bottom: 16px;"
-                />
+                  style="margin-top: 24px; margin-bottom: 24px;"
+                >
+                  <template #description>
+                    <div class="formula-desc">
+                      <p><strong>延误时间</strong> = 实际完成时间 - 预计完成时间（接单时间 + 累计时效）</p>
+                      <p><strong>延误扣分</strong> = 延误小时数 × 每小时扣分数</p>
+                      <p class="note">* 扣分将从该任务原本应得的积分中扣除，最多扣至0分（不会出现负分）。</p>
+                    </div>
+                  </template>
+                </a-alert>
 
-                <a-form-item style="margin-top: 32px;">
+                <a-form-item>
                   <a-space>
-                    <a-button type="primary" @click="handleSaveDelayPenaltyConfig" :loading="savingDelayPenaltyConfig">
+                    <a-button type="primary" size="large" @click="handleSaveDelayPenaltyConfig" :loading="savingDelayPenaltyConfig">
                       <template #icon><Icon name="check" size="sm" /></template>
-                      保存配置
+                      保存延误配置
                     </a-button>
                   </a-space>
                 </a-form-item>
@@ -5014,6 +5036,93 @@ watch(activeTab, (value) => {
   }
 }
 
+// 延误配置卡片样式
+.delay-config-card {
+  display: flex !important;
+  flex-direction: row !important;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 100px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  transition: all 0.3s ease;
+  
+  &:hover {
+    background: rgba(255, 255, 255, 0.05);
+    border-color: rgba(255, 255, 255, 0.15);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  }
+  
+  .config-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding-right: 20px;
+    
+    .config-header {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      
+      .icon-box {
+        width: 36px;
+        height: 36px;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        
+        &.red {
+          background: rgba(255, 77, 79, 0.1);
+          color: #ff4d4f;
+        }
+        
+        &.green {
+          background: rgba(49, 240, 139, 0.1);
+          color: #31f08b;
+        }
+      }
+      
+      .title {
+        font-size: 16px;
+        font-weight: 600;
+        color: $text-primary;
+      }
+    }
+    
+    .desc {
+      font-size: 13px;
+      color: $text-tertiary;
+      padding-left: 48px;
+      line-height: 1.5;
+    }
+  }
+  
+  .config-action {
+    display: flex;
+    align-items: center;
+    padding-left: 20px;
+    border-left: 1px solid rgba(255, 255, 255, 0.08);
+  }
+}
+
+.formula-desc {
+  p {
+    margin-bottom: 4px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+    
+    &.note {
+      color: #ff4d4f;
+      margin-top: 8px;
+      font-size: 12px;
+    }
+  }
+}
+
 // 测试消息提示
 .test-message-hint {
   margin-left: $space-md;