diff --git a/docs/业务进度管理.md b/docs/业务进度管理.md
index fead67c7..1664473e 100644
--- a/docs/业务进度管理.md
+++ b/docs/业务进度管理.md
@@ -38,6 +38,7 @@
 - 新增开奖信息风险提示、更新时间刷新入口，以及包含彩种信息、开奖号码、下期开奖倒计时和详情/历史操作的最新开奖卡片。
 - 详情按钮跳转开奖详情页，历史开奖按钮跳转开奖记录列表页；开奖详情同时兼容旧 `id` 参数和新开奖表使用的 `code + issue` 参数，开奖结果与现有 API 数据保持兼容。
 - 根据验收反馈统一收紧页面字号，标题、导航、彩种、开奖卡片、倒计时、号码和 AI 弹窗文字均降低一档，保持信息层级和可读性。
+- 开奖详情页同步开奖记录列表的渐变导航、白色圆角卡片、状态标签和号码球视觉，补充彩种图标、期号日期信息及统一卡片间距。
 
 涉及模块：
 
diff --git a/uniapp/src/packages_lottery/pages/detail.vue b/uniapp/src/packages_lottery/pages/detail.vue
index ac022760..dfc6df14 100644
--- a/uniapp/src/packages_lottery/pages/detail.vue
+++ b/uniapp/src/packages_lottery/pages/detail.vue
@@ -18,17 +18,33 @@
         <view v-if="!loading && drawData" class="dd-body">
             <!-- 彩种+期号信息 -->
             <view class="dd-info">
-                <text class="dd-info__name">{{ drawData.category?.name || '' }}</text>
-                <text class="dd-info__period">第 {{ drawData.period }} 期</text>
-                <view class="dd-info__badge" :class="{ 'dd-info__badge--pending': drawData.status === 0 }">
-                    <text>{{ drawData.status === 1 ? '已开奖' : '待开奖' }}</text>
+                <view class="dd-info__identity">
+                    <view class="dd-info__logo">
+                        <image v-if="drawData.category?.icon" class="dd-info__logo-img" :src="drawData.category.icon"
+                            mode="aspectFit" />
+                        <text v-else class="dd-info__logo-text">{{ (drawData.category?.name || '彩种').substring(0, 1) }}</text>
+                    </view>
+                    <view class="dd-info__meta">
+                        <text class="dd-info__name">{{ drawData.category?.name || '' }}</text>
+                        <view class="dd-info__sub">
+                            <text class="dd-info__period">第 {{ drawData.period }} 期</text>
+                            <text class="dd-info__date">{{ drawData.draw_date || '开奖日期待定' }}</text>
+                        </view>
+                    </view>
+                </view>
+                <view class="dd-info__status">
+                    <view class="dd-info__badge" :class="{ 'dd-info__badge--pending': drawData.status === 0 }">
+                        <text>{{ drawData.status === 1 ? '已开奖' : '待开奖' }}</text>
+                    </view>
                 </view>
             </view>
-            <text class="dd-date">开奖日期：{{ drawData.draw_date }}</text>
 
             <!-- 开奖号码 -->
             <view v-if="drawData.status === 1" class="dd-result">
-                <text class="dd-result__label">开奖号码</text>
+                <view class="dd-result__header">
+                    <text class="dd-result__label">开奖号码</text>
+                    <text class="dd-result__hint">本期开奖结果</text>
+                </view>
                 <view class="dd-result__balls">
                     <view v-for="(num, i) in drawData.numbers" :key="i" class="ball-wrap">
                         <view class="ball" :class="'ball--' + getBallColor(i)">
@@ -268,7 +284,7 @@ onLoad((options: any) => {
 }
 
 .dd-nav {
-    background: var(--color-primary, #4a90d9);
+    background: linear-gradient(135deg, #185dff, #ff6b6b);
 
     &__content {
         height: 44px;
@@ -305,27 +321,92 @@ onLoad((options: any) => {
 }
 
 .dd-body {
-    padding: 24rpx;
+    padding: 20rpx 24rpx 40rpx;
 }
 
 .dd-info {
     display: flex;
     align-items: center;
+    justify-content: space-between;
     gap: 16rpx;
-    margin-bottom: 12rpx;
+    padding: 24rpx;
+    margin-bottom: 20rpx;
+    background: #fff;
+    border: 1rpx solid #f0f0f0;
+    border-radius: 16rpx;
+    box-shadow: 0 6rpx 20rpx rgba(24, 93, 255, 0.04);
+
+    &__identity {
+        min-width: 0;
+        display: flex;
+        align-items: center;
+        gap: 16rpx;
+    }
+
+    &__logo {
+        width: 72rpx;
+        height: 72rpx;
+        flex: 0 0 72rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        border-radius: 16rpx;
+        background: linear-gradient(135deg, #185dff, #ff6b6b);
+    }
+
+    &__logo-img {
+        width: 100%;
+        height: 100%;
+    }
+
+    &__logo-text {
+        color: #fff;
+        font-size: 30rpx;
+        font-weight: bold;
+    }
+
+    &__meta {
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+    }
 
     &__name {
-        font-size: 34rpx;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: 32rpx;
         font-weight: bold;
         color: #222;
     }
 
+    &__sub {
+        display: flex;
+        align-items: center;
+        gap: 12rpx;
+        margin-top: 8rpx;
+    }
+
     &__period {
-        font-size: 26rpx;
+        font-size: 24rpx;
         color: #185dff;
         background: #E5EDFF;
-        padding: 4rpx 16rpx;
-        border-radius: 20rpx;
+        padding: 4rpx 12rpx;
+        border-radius: 8rpx;
+        white-space: nowrap;
+    }
+
+    &__date {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: 22rpx;
+        color: #999;
+    }
+
+    &__status {
+        flex-shrink: 0;
     }
 
     &__badge {
@@ -342,46 +423,52 @@ onLoad((options: any) => {
     }
 }
 
-.dd-date {
-    font-size: 24rpx;
-    color: #999;
-    margin-bottom: 30rpx;
-}
-
 .dd-result {
     background: #fff;
     border-radius: 16rpx;
-    padding: 30rpx;
+    padding: 24rpx;
     margin-bottom: 20rpx;
+    border: 1rpx solid #f0f0f0;
+    box-shadow: 0 6rpx 20rpx rgba(24, 93, 255, 0.04);
+
+    &__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 20rpx;
+    }
 
     &__label {
         font-size: 28rpx;
         font-weight: bold;
         color: #333;
-        margin-bottom: 24rpx;
+    }
+
+    &__hint {
+        font-size: 22rpx;
+        color: #999;
     }
 
     &__balls {
         display: flex;
         align-items: center;
         justify-content: center;
-        gap: 12rpx;
+        gap: 10rpx;
         flex-wrap: wrap;
-        margin-bottom: 30rpx;
     }
 }
 
 /* 号码球 */
 .ball {
-    width: 80rpx;
-    height: 80rpx;
+    width: 72rpx;
+    height: 72rpx;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
 
     &--red {
-        background: linear-gradient(135deg, #ef4444, #f87171);
+        background: linear-gradient(135deg, #185dff, #ff6b6b);
     }
 
     &--blue {
@@ -393,17 +480,17 @@ onLoad((options: any) => {
     }
 
     &--special {
-        border: 4rpx solid #fbbf24;
+        border: 3rpx solid #fbbf24;
     }
 
     &__num {
         color: #fff;
-        font-size: 32rpx;
+        font-size: 28rpx;
         font-weight: bold;
     }
 
     &__plus {
-        font-size: 36rpx;
+        font-size: 28rpx;
         color: #999;
         font-weight: bold;
     }
@@ -414,11 +501,11 @@ onLoad((options: any) => {
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 6rpx;
+    gap: 4rpx;
 }
 
 .ball-zodiac {
-    font-size: 22rpx;
+    font-size: 20rpx;
     color: #666;
 
     &--special {
@@ -428,14 +515,14 @@ onLoad((options: any) => {
 }
 
 .dd-extra {
-    margin-top: 24rpx;
-    padding-top: 24rpx;
+    margin-top: 20rpx;
+    padding-top: 20rpx;
     border-top: 1rpx solid #f0f0f0;
 
     &__label {
         font-size: 26rpx;
         color: #666;
-        margin-bottom: 16rpx;
+        margin-bottom: 12rpx;
     }
 
     &__tags {
@@ -484,18 +571,20 @@ onLoad((options: any) => {
 .dd-pending {
     background: #fff;
     border-radius: 16rpx;
-    padding: 80rpx 30rpx;
+    padding: 48rpx 24rpx;
     text-align: center;
     margin-bottom: 20rpx;
+    border: 1rpx solid #f0f0f0;
+    box-shadow: 0 6rpx 20rpx rgba(24, 93, 255, 0.04);
 
     &__icon {
-        font-size: 80rpx;
+        font-size: 64rpx;
         display: block;
-        margin-bottom: 20rpx;
+        margin-bottom: 16rpx;
     }
 
     &__text {
-        font-size: 32rpx;
+        font-size: 30rpx;
         font-weight: bold;
         color: #333;
         display: block;
@@ -511,8 +600,10 @@ onLoad((options: any) => {
 .dd-rule {
     background: #fff;
     border-radius: 16rpx;
-    padding: 30rpx;
+    padding: 24rpx;
     margin-bottom: 20rpx;
+    border: 1rpx solid #f0f0f0;
+    box-shadow: 0 6rpx 20rpx rgba(24, 93, 255, 0.04);
 
     &__title {
         font-size: 28rpx;
@@ -547,8 +638,10 @@ onLoad((options: any) => {
 .ai-section {
     background: #fff;
     border-radius: 16rpx;
-    padding: 30rpx;
+    padding: 24rpx;
     margin-bottom: 20rpx;
+    border: 1rpx solid #f0f0f0;
+    box-shadow: 0 6rpx 20rpx rgba(24, 93, 255, 0.04);
 
     &__header {
         display: flex;