feat: ui update

miniprogram/pages/horoscope/horoscope.ts

@@ -2,6 +2,7 @@ import { request, redirectToLogin } from '../../utils/request'
 import * as auth from '../../utils/auth'
 import { HoroscopeData } from '../../types/models'
 import { setTabBarSelected } from '../../utils/tabbar'
+import { navScroll } from '../../utils/nav'
 import { logger } from '../../utils/logger'
 import { STORAGE_KEYS } from '../../utils/config'
 
@@ -32,13 +33,19 @@ Page({
   data: {
     horoscope: null as HoroscopeData | null,
     statDate: '',
-    luckyColorHex: '#007AFF',
+    // 幸运色是唯一允许出现彩色的业务数据；取不到色值时退回中性灰
+    luckyColorHex: '#AEAEB2',
     loading: true,
     noBirth: false,
     error: false,
     errorText: '',
+    // 滚动收缩：由 utils/nav.ts 的共享 handler 驱动
+    navScrolled: false,
   },
 
+  // scroll-view 滚动 → 导航收缩为玻璃小标题
+  onNavScroll: navScroll,
+
   onShow() {
     this.syncTabBar()
     // 未登录直接回登录页（幂等跳转），不再发出必然 401 的请求
@@ -72,7 +79,7 @@ Page({
         this.setData({
           horoscope: res,
           statDate: this.formatStatDate(res.stat_date),
-          luckyColorHex: COLOR_MAP[res.lucky_color] || '#007AFF',
+          luckyColorHex: COLOR_MAP[res.lucky_color] || '#AEAEB2',
           loading: false,
           noBirth: false,
           error: false,

miniprogram/pages/horoscope/horoscope.wxml

@@ -1,14 +1,23 @@
 <view class="page page-flex">
-  <navigation-bar title="每日运势" back="{{false}}">
+  <navigation-bar title="每日运势" back="{{false}}" scrolled="{{navScrolled}}">
     <view slot="right" class="nav-action" bindtap="onGoProfile">去设置生日</view>
   </navigation-bar>
 
-  <scroll-view scroll-y class="scroll-body">
+  <scroll-view scroll-y class="scroll-body pb-tab" bindscroll="onNavScroll">
+    <!-- 大标题页头 -->
+    <view class="head">
+      <view class="eyebrow">Daily Fortune</view>
+      <view class="display">每日运势</view>
+    </view>
+
     <!-- 骨架屏 -->
-    <view wx:if="{{loading}}" class="sk-wrap">
-      <view class="skeleton sk-big"></view>
-      <view class="skeleton sk-mid"></view>
-      <view class="skeleton sk-mid"></view>
+    <view wx:if="{{loading}}" class="hs-skel">
+      <view class="sk sk-ln" style="width: 38%; height: 28rpx;"></view>
+      <view class="sk hs-skel-num"></view>
+      <view class="sk sk-ln" style="width: 100%;"></view>
+      <view class="sk sk-ln" style="width: 100%;"></view>
+      <view class="sk sk-ln" style="width: 92%;"></view>
+      <view class="sk sk-ln" style="width: 84%;"></view>
     </view>
 
     <!-- 未设置生日 -->
@@ -31,72 +40,104 @@
       bind:action="onRetry"
     />
 
-    <!-- 运势内容 -->
-    <view wx:elif="{{horoscope}}" class="content">
-      <!-- 星座大卡 -->
-      <view class="card horo-card">
-        <view class="horo-top">
-          <view class="zodiac">
-            <view class="icon icon-sparkles zodiac-icon"></view>
-            <text class="zodiac-name">{{horoscope.zodiac}}</text>
-          </view>
-          <view class="horo-date">
-            <text>{{statDate}}</text>
-            <text class="nav-action" bindtap="onGoProfile">去设置生日</text>
-          </view>
+    <!-- 运势内容：杂志内页排版 -->
+    <block wx:elif="{{horoscope}}">
+      <view class="hs-hero">
+        <view class="hs-zodiac">
+          <view class="icon icon-sparkles"></view>
+          <text class="t-xl">{{horoscope.zodiac}}</text>
         </view>
+        <text class="hs-date num">{{statDate}}</text>
+      </view>
 
-        <view class="overall">
-          <text class="overall-label">综合运势</text>
-          <view class="overall-score">
-            <text class="score-num">{{horoscope.overall_score}}.0</text>
-            <view class="stars">
-              <view
-                class="icon star {{index < horoscope.overall_score ? 'icon-star-fill on' : 'icon-star'}}"
-                wx:for="{{[1, 2, 3, 4, 5]}}"
-                wx:key="*this"
-              ></view>
+      <view class="hs-score">
+        <view class="hs-score-main">
+          <view class="eyebrow">综合运势</view>
+          <view class="hs-num num">{{horoscope.overall_score}}.0</view>
+        </view>
+        <view class="hs-stars">
+          <view
+            wx:for="{{[1, 2, 3, 4, 5]}}"
+            wx:key="*this"
+            class="icon {{index < horoscope.overall_score ? 'icon-star-fill' : 'icon-star'}}"
+          ></view>
+        </view>
+      </view>
+
+      <!-- 三项评分：横向发丝线刻度尺 -->
+      <view class="hs-scales">
+        <view class="hs-scale">
+          <view class="hs-st">
+            <text class="k">爱情运势</text>
+            <text class="v num">{{horoscope.love_score}}/5</text>
+          </view>
+          <view class="scale">
+            <view class="scale-ticks">
+              <view class="tk" wx:for="{{[1, 2, 3, 4]}}" wx:key="*this"></view>
             </view>
+            <view class="scale-line"></view>
+            <view class="scale-fill" style="width: {{horoscope.love_score * 20}}%;"></view>
+            <view class="scale-pip" style="left: {{horoscope.love_score * 20}}%;"></view>
           </view>
         </view>
 
-        <!-- 三项评分 -->
-        <view class="scores">
-          <view class="score-row">
-            <text class="score-label">爱情运势</text>
-            <view class="score-bar"><view class="score-fill" style="width: {{horoscope.love_score * 20}}%"></view></view>
-            <text class="score-value">{{horoscope.love_score}}/5</text>
+        <view class="hs-scale">
+          <view class="hs-st">
+            <text class="k">工作运势</text>
+            <text class="v num">{{horoscope.career_score}}/5</text>
           </view>
-          <view class="score-row">
-            <text class="score-label">工作运势</text>
-            <view class="score-bar"><view class="score-fill" style="width: {{horoscope.career_score * 20}}%"></view></view>
-            <text class="score-value">{{horoscope.career_score}}/5</text>
-          </view>
-          <view class="score-row">
-            <text class="score-label">财富运势</text>
-            <view class="score-bar"><view class="score-fill" style="width: {{horoscope.wealth_score * 20}}%"></view></view>
-            <text class="score-value">{{horoscope.wealth_score}}/5</text>
+          <view class="scale">
+            <view class="scale-ticks">
+              <view class="tk" wx:for="{{[1, 2, 3, 4]}}" wx:key="*this"></view>
+            </view>
+            <view class="scale-line"></view>
+            <view class="scale-fill" style="width: {{horoscope.career_score * 20}}%;"></view>
+            <view class="scale-pip" style="left: {{horoscope.career_score * 20}}%;"></view>
           </view>
         </view>
 
-        <view class="daily-text">
-          <text class="daily-label">今日运势</text>
-          <text class="daily-content">{{horoscope.daily_text}}</text>
-        </view>
-
-        <view class="lucky-row">
-          <view class="lucky-card">
-            <view class="lucky-dot" style="background: {{luckyColorHex}}"></view>
-            <text class="lucky-label">幸运色 · {{horoscope.lucky_color}}</text>
+        <view class="hs-scale">
+          <view class="hs-st">
+            <text class="k">财富运势</text>
+            <text class="v num">{{horoscope.wealth_score}}/5</text>
           </view>
-          <view class="lucky-card">
-            <text class="lucky-number">{{horoscope.lucky_number}}</text>
-            <text class="lucky-label">幸运数字</text>
+          <view class="scale">
+            <view class="scale-ticks">
+              <view class="tk" wx:for="{{[1, 2, 3, 4]}}" wx:key="*this"></view>
+            </view>
+            <view class="scale-line"></view>
+            <view class="scale-fill" style="width: {{horoscope.wealth_score * 20}}%;"></view>
+            <view class="scale-pip" style="left: {{horoscope.wealth_score * 20}}%;"></view>
           </view>
         </view>
       </view>
 
-      <view class="gen-btn btn btn-outline" bindtap="onGenerate">生成今日推荐穿搭</view>
-    </view>
+      <!-- 今日运势：衬线引文排版 -->
+      <view class="hs-quote">
+        <view class="eyebrow">Today</view>
+        <view class="t-quote">{{horoscope.daily_text}}</view>
+      </view>
+
+      <!-- 幸运色 / 幸运数字：两栏发丝线小格 -->
+      <view class="hs-lucky">
+        <view class="hs-lucky-cell">
+          <view class="lk">幸运色</view>
+          <view class="lv">
+            <view class="dot" style="background: {{luckyColorHex}};"></view>
+            <text>{{horoscope.lucky_color}}</text>
+          </view>
+        </view>
+        <view class="hs-lucky-cell">
+          <view class="lk">幸运数字</view>
+          <view class="lv num">{{horoscope.lucky_number}}</view>
+        </view>
+      </view>
+
+      <view class="hs-foot">
+        <view class="btn btn--ghost btn--block" bindtap="onGenerate">生成今日推荐穿搭</view>
+      </view>
+    </block>
+
+    <view class="gap-64"></view>
   </scroll-view>
 </view>

miniprogram/pages/horoscope/horoscope.wxss

@@ -1,3 +1,4 @@
+/** 运势：杂志内页 —— 巨大衬线星座名 / 超大数字 / 发丝线刻度尺 / 衬线引文 **/
 .page-flex {
   height: 100vh;
   display: flex;
@@ -10,203 +11,165 @@
   height: 0;
 }
 
-.nav-action {
-  font-size: 26rpx;
-  color: #007AFF;
-  padding: 0 8rpx;
-}
-
-.sk-wrap {
-  padding: 24rpx;
-}
-
-.sk-big {
-  height: 560rpx;
-  border-radius: 32rpx;
-  margin-bottom: 24rpx;
-}
-
-.sk-mid {
-  height: 200rpx;
-  border-radius: 32rpx;
-  margin-bottom: 24rpx;
-}
-
-.content {
-  padding: 24rpx;
-}
-
-.horo-card {
-  background: #E8F2FF;
-}
-
-.horo-top {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.zodiac {
-  display: flex;
-  align-items: center;
-}
-
-.zodiac-icon {
-  width: 56rpx;
-  height: 56rpx;
-  color: #007AFF;
-  margin-right: 16rpx;
-}
-
-.zodiac-name {
-  font-size: 40rpx;
-  font-weight: 700;
-  color: #000;
-}
-
-.horo-date {
+.hs-skel {
+  padding: 60rpx var(--pad) 0;
   display: flex;
   flex-direction: column;
-  align-items: flex-end;
-  font-size: 24rpx;
-  color: #8E8E93;
+  gap: 44rpx;
 }
 
-.overall {
-  margin-top: 40rpx;
+.hs-skel-num {
+  width: 56%;
+  height: 128rpx;
+  border-radius: 12rpx;
 }
 
-.overall-label {
-  font-size: 26rpx;
-  color: #8E8E93;
+.hs-hero {
+  padding: 44rpx var(--pad) 0;
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 24rpx;
 }
 
-.overall-score {
+.hs-zodiac {
   display: flex;
   align-items: center;
-  margin-top: 12rpx;
+  gap: 18rpx;
 }
 
-.score-num {
-  font-size: 120rpx;
-  font-weight: 700;
-  color: #000;
-  line-height: 1;
-  margin-right: 32rpx;
-}
-
-.stars {
-  display: flex;
-  gap: 8rpx;
-}
-
-.star {
+.hs-zodiac .icon {
   width: 40rpx;
   height: 40rpx;
-  color: #C7C7CC;
+  color: var(--ink-2);
+  flex-shrink: 0;
 }
 
-.star.on {
-  color: #007AFF;
+.hs-date {
+  font-size: 22rpx;
+  color: var(--ink-3);
+  letter-spacing: .08em;
 }
 
-.scores {
-  margin-top: 32rpx;
-  background: #fff;
-  border-radius: 24rpx;
-  padding: 24rpx;
-}
-
-.score-row {
+.hs-score {
+  padding: 56rpx var(--pad) 0;
   display: flex;
-  align-items: center;
-  padding: 16rpx 0;
+  align-items: flex-end;
+  gap: 40rpx;
 }
 
-.score-label {
-  width: 160rpx;
-  font-size: 26rpx;
-  color: #000;
+.hs-score-main {
+  min-width: 0;
 }
 
-.score-bar {
-  flex: 1;
-  height: 12rpx;
-  background: #F2F2F7;
-  border-radius: 6rpx;
-  overflow: hidden;
-}
-
-.score-fill {
-  height: 100%;
-  background: #007AFF;
-  border-radius: 6rpx;
-}
-
-.score-value {
-  width: 80rpx;
-  text-align: right;
-  font-size: 26rpx;
-  color: #8E8E93;
-}
-
-.daily-text {
-  margin-top: 24rpx;
-  background: #fff;
-  border-radius: 24rpx;
-  padding: 24rpx;
-}
-
-.daily-label {
+/* 单项评分块（行内纵向排布，由 .hs-scales 的 gap 控制间距） */
+.hs-scale {
   display: block;
+}
+
+.hs-num {
+  margin-top: 24rpx;
+  font-family: var(--serif);
+  font-size: 152rpx;
+  font-weight: 500;
+  line-height: .84;
+  letter-spacing: -.035em;
+}
+
+.hs-stars {
+  display: flex;
+  gap: 8rpx;
+  padding-bottom: 18rpx;
+}
+
+.hs-stars .icon {
+  width: 30rpx;
+  height: 30rpx;
+  color: var(--ink);
+}
+
+.hs-scales {
+  padding: 64rpx var(--pad) 0;
+  display: flex;
+  flex-direction: column;
+  gap: 38rpx;
+}
+
+.hs-st {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  margin-bottom: 14rpx;
+}
+
+.hs-st .k {
   font-size: 26rpx;
+  color: var(--ink-2);
+}
+
+.hs-st .v {
+  font-size: 23rpx;
+  color: var(--ink-3);
+  letter-spacing: .04em;
+}
+
+.hs-quote {
+  padding: 64rpx var(--pad) 0;
+}
+
+.hs-quote .t-quote {
+  margin-top: 26rpx;
+}
+
+.hs-lucky {
+  display: flex;
+  margin: 64rpx var(--pad) 0;
+  border-top: 1rpx solid var(--hairline);
+  border-bottom: 1rpx solid var(--hairline);
+}
+
+.hs-lucky-cell {
+  flex: 1;
+  padding: 32rpx 0 34rpx;
+  text-align: center;
+  position: relative;
+}
+
+.hs-lucky-cell + .hs-lucky-cell::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 32rpx;
+  bottom: 34rpx;
+  width: 1rpx;
+  background: var(--hairline);
+}
+
+.hs-lucky .lk {
+  font-size: 19rpx;
   font-weight: 600;
-  color: #000;
+  letter-spacing: .14em;
+  text-transform: uppercase;
+  color: var(--ink-3);
 }
 
-.daily-content {
-  display: block;
-  font-size: 26rpx;
-  color: #3C3C43;
-  margin-top: 12rpx;
-  line-height: 1.6;
-}
-
-.lucky-row {
-  display: flex;
-  gap: 20rpx;
-  margin-top: 24rpx;
-}
-
-.lucky-card {
-  flex: 1;
-  background: #fff;
-  border-radius: 24rpx;
-  padding: 24rpx;
+.hs-lucky .lv {
+  margin-top: 20rpx;
+  font-family: var(--serif);
+  font-size: 38rpx;
   display: flex;
   align-items: center;
+  justify-content: center;
+  gap: 14rpx;
 }
 
-.lucky-dot {
-  width: 24rpx;
-  height: 24rpx;
+.hs-lucky .lv .dot {
+  width: 22rpx;
+  height: 22rpx;
   border-radius: 50%;
-  margin-right: 16rpx;
+  box-shadow: inset 0 0 0 1rpx rgba(0, 0, 0, .14);
 }
 
-.lucky-number {
-  font-size: 44rpx;
-  font-weight: 700;
-  color: #000;
-  margin-right: 16rpx;
-}
-
-.lucky-label {
-  font-size: 24rpx;
-  color: #8E8E93;
-}
-
-.gen-btn {
-  margin-top: 24rpx;
-  width: 100%;
+.hs-foot {
+  padding: 56rpx var(--pad) 0;
 }