zhengchiliu/zt-closet-wxmini-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: ui update

Browse Source
This commit is contained in:
zhengchiliu
2026-09-15 16:01:59 +08:00
parent 1a11816839
commit 26c392d612
89 changed files with 10377 additions and 4861 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/pages/horoscope/horoscope.wxml
+99 -58
View File
@@ -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>