diff --git a/pages/rating/detail.vue b/pages/rating/detail.vue
index 880b377..52edf19 100644
--- a/pages/rating/detail.vue
+++ b/pages/rating/detail.vue
@@ -102,8 +102,16 @@
             <button class="comment-state-btn" @tap="retryLoadComments">重新加载</button>
           </view>
           <view v-else-if="!comments.length" class="comment-state">
+            <view class="comment-empty-visual">
+              <view class="comment-empty-orbit orbit-1"></view>
+              <view class="comment-empty-orbit orbit-2"></view>
+              <view class="comment-empty-core">
+                <text class="comment-empty-emoji">💬</text>
+              </view>
+            </view>
             <text class="comment-state-title">还没有评论</text>
             <text class="comment-state-desc">来发第一条锐评，带动一下讨论气氛</text>
+            <text class="comment-state-tip">你的观点，可能就是这条榜单最有意思的开始</text>
           </view>
           <CommentItem 
             v-for="(comment, index) in comments" 
@@ -296,15 +304,15 @@ const switchTab = (tab) => {
 
 const resolveCommentHasMore = (res, list) => {
   const data = res?.data || res || {};
-  const hasNext = data?.hasNext ?? res?.hasNext;
+  const hasNext = data?.hasNext || res?.hasNext;
   if (typeof hasNext === 'boolean') return hasNext;
 
-  const pages = Number(data?.pages ?? res?.pages ?? 0);
+  const pages = Number(data?.pages || res?.pages || 0);
   if (pages > 0) return currentPage.value < pages;
 
-  const total = Number(data?.total ?? res?.total ?? 0);
+  const total = Number(data?.total || res?.total || 0);
   if (total > 0) {
-    const size = Number(data?.size ?? data?.pageSize ?? res?.size ?? res?.pageSize ?? list.length || 1);
+    const size = Number(data?.size || data?.pageSize || res?.size || res?.pageSize || list.length || 1);
     return currentPage.value * size < total;
   }
 
@@ -828,20 +836,73 @@ onReachBottom(() => {
   justify-content: center;
   text-align: center;
   color: #999;
-  padding: 40rpx 32rpx;
+  padding: 56rpx 40rpx;
   box-sizing: border-box;
+  background: linear-gradient(180deg, rgba(247, 248, 255, 0.92) 0%, rgba(255, 255, 255, 0.98) 100%);
+  border-radius: 28rpx;
+  border: 2rpx solid #f1f2fb;
+}
+
+.comment-empty-visual {
+  position: relative;
+  width: 180rpx;
+  height: 180rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 28rpx;
+}
+
+.comment-empty-orbit {
+  position: absolute;
+  border-radius: 50%;
+  border: 2rpx solid rgba(123, 70, 241, 0.12);
+}
+
+.orbit-1 {
+  width: 180rpx;
+  height: 180rpx;
+}
+
+.orbit-2 {
+  width: 132rpx;
+  height: 132rpx;
+  border-color: rgba(77, 68, 241, 0.18);
+}
+
+.comment-empty-core {
+  width: 96rpx;
+  height: 96rpx;
+  border-radius: 32rpx;
+  background: linear-gradient(135deg, #7668ff, #4d44f1);
+  box-shadow: 0 18rpx 36rpx rgba(94, 83, 255, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.comment-empty-emoji {
+  font-size: 44rpx;
 }
 
 .comment-state-title {
-  font-size: 30rpx;
-  color: #222;
+  font-size: 32rpx;
+  color: #1f2430;
   font-weight: 700;
-  margin-bottom: 12rpx;
+  margin-bottom: 14rpx;
+  letter-spacing: 0.5rpx;
 }
 
 .comment-state-desc {
-  font-size: 24rpx;
-  color: #9aa0ae;
+  font-size: 25rpx;
+  color: #70778a;
+  line-height: 1.7;
+}
+
+.comment-state-tip {
+  margin-top: 14rpx;
+  font-size: 22rpx;
+  color: #a7adbc;
   line-height: 1.6;
 }