|
|
@@ -4,7 +4,7 @@
|
|
|
<login-sheet ref="loginSheet" @success="onSheetLoginSuccess" @open="onLoginSheetOpen" @close="onLoginSheetClose" />
|
|
|
<block v-if="!isLoggedIn">
|
|
|
<view class="gh-page">
|
|
|
- <!-- 页面头 -->
|
|
|
+ <!-- 页面头 / 品牌锚点 -->
|
|
|
<view class="gh-head">
|
|
|
<text class="gh-eyebrow">浠艾福 · 家庭主动健康</text>
|
|
|
<text class="gh-title">科学管理全家健康数据</text>
|
|
|
@@ -24,17 +24,24 @@
|
|
|
<text class="gh-cta-title">15 题五维健康自检</text>
|
|
|
<text class="gh-cta-sub">约 20 秒，了解家人的健康概况</text>
|
|
|
</view>
|
|
|
- <text class="gh-chev">›</text>
|
|
|
+ <view class="gh-chev"></view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 本期待填调研（按周期计算，服务端返回 pending 列表） -->
|
|
|
- <view v-for="(item, si) in pendingSurveys" :key="si" class="gh-pending" @click="goSurveyFill(item)">
|
|
|
- <view class="gh-pending-ic"><text class="gh-pending-glyph">研</text></view>
|
|
|
- <view class="gh-pending-info">
|
|
|
- <text class="gh-pending-title">{{ item.title }}</text>
|
|
|
- <text class="gh-pending-sub">{{ cycleLabel(item.cycleType) }} · {{ item.periodStart }} 至 {{ item.periodEnd }}</text>
|
|
|
+ <view class="gh-section">
|
|
|
+ <view class="gh-section-tag">
|
|
|
+ <view class="gh-section-dot"></view>
|
|
|
+ <text class="gh-section-title">本期待填调研</text>
|
|
|
+ <text class="gh-section-note">按周期推送</text>
|
|
|
+ </view>
|
|
|
+ <view v-for="(item, si) in pendingSurveys" :key="si" class="gh-pending" @click="goSurveyFill(item)">
|
|
|
+ <view class="gh-pending-ic"></view>
|
|
|
+ <view class="gh-pending-info">
|
|
|
+ <text class="gh-pending-title">{{ item.title }}</text>
|
|
|
+ <text class="gh-pending-sub">{{ cycleLabel(item.cycleType) }} · {{ item.periodStart }} 至 {{ item.periodEnd }}</text>
|
|
|
+ </view>
|
|
|
+ <text class="gh-pending-tag">待填写</text>
|
|
|
</view>
|
|
|
- <text class="gh-pending-tag">待填写</text>
|
|
|
</view>
|
|
|
|
|
|
<!-- 演示雷达（登录浮层打开时隐藏：原生 canvas 会盖在浮层之上） -->
|
|
|
@@ -60,7 +67,7 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <!-- 五维健康体系 -->
|
|
|
+ <!-- 五维健康体系（完整版：全站唯一保留相生相克的一页） -->
|
|
|
<view class="gh-wuxing">
|
|
|
<text class="gh-wuxing-title">身 · 智 · 富 · 行 · 心，看得见的健康闭环</text>
|
|
|
<text class="gh-wuxing-sub">五行相生相克，从报告和测评里，真正读懂家人的身体。</text>
|
|
|
@@ -69,15 +76,15 @@
|
|
|
<text class="gh-rel-title">相生 · 前进</text>
|
|
|
<view class="gh-chain">
|
|
|
<text class="gh-node gh-node-body">身</text>
|
|
|
- <text class="gh-arrow">→</text>
|
|
|
+ <view class="gh-arrow"></view>
|
|
|
<text class="gh-node gh-node-wisdom">智</text>
|
|
|
- <text class="gh-arrow">→</text>
|
|
|
+ <view class="gh-arrow"></view>
|
|
|
<text class="gh-node gh-node-wealth">富</text>
|
|
|
- <text class="gh-arrow">→</text>
|
|
|
+ <view class="gh-arrow"></view>
|
|
|
<text class="gh-node gh-node-action">行</text>
|
|
|
- <text class="gh-arrow">→</text>
|
|
|
+ <view class="gh-arrow"></view>
|
|
|
<text class="gh-node gh-node-mind">心</text>
|
|
|
- <text class="gh-arrow">→</text>
|
|
|
+ <view class="gh-arrow"></view>
|
|
|
<text class="gh-node gh-node-body">身</text>
|
|
|
</view>
|
|
|
<text class="gh-rel-hint">健康孕育智慧，智慧创造价值，价值滋养关系，关系反哺心灵，心灵守护健康。</text>
|
|
|
@@ -86,69 +93,59 @@
|
|
|
<view class="gh-rel">
|
|
|
<text class="gh-rel-title">相克 · 平衡</text>
|
|
|
<view class="gh-chain">
|
|
|
- <text class="gh-node gh-node-body">身</text>
|
|
|
- <text class="gh-op">克</text>
|
|
|
- <text class="gh-node gh-node-wealth">富</text>
|
|
|
+ <text class="gh-node gh-node-body">身克富</text>
|
|
|
<text class="gh-sep">·</text>
|
|
|
- <text class="gh-node gh-node-wisdom">智</text>
|
|
|
- <text class="gh-op">克</text>
|
|
|
- <text class="gh-node gh-node-action">行</text>
|
|
|
+ <text class="gh-node gh-node-wisdom">智克行</text>
|
|
|
<text class="gh-sep">·</text>
|
|
|
- <text class="gh-node gh-node-wealth">富</text>
|
|
|
- <text class="gh-op">克</text>
|
|
|
- <text class="gh-node gh-node-mind">心</text>
|
|
|
+ <text class="gh-node gh-node-wealth">富克心</text>
|
|
|
<text class="gh-sep">·</text>
|
|
|
- <text class="gh-node gh-node-action">行</text>
|
|
|
- <text class="gh-op">克</text>
|
|
|
- <text class="gh-node gh-node-body">身</text>
|
|
|
+ <text class="gh-node gh-node-action">行克身</text>
|
|
|
<text class="gh-sep">·</text>
|
|
|
- <text class="gh-node gh-node-mind">心</text>
|
|
|
- <text class="gh-op">克</text>
|
|
|
- <text class="gh-node gh-node-wisdom">智</text>
|
|
|
+ <text class="gh-node gh-node-mind">心克智</text>
|
|
|
</view>
|
|
|
<text class="gh-rel-hint">莫以健康换金钱，真诚胜过算计，财富服务家庭，关爱有度、大爱留白。</text>
|
|
|
</view>
|
|
|
|
|
|
<view class="gh-rows">
|
|
|
- <view class="gh-row" @click="goPage('/pages/body-detail/index')">
|
|
|
- <view class="gh-ic gh-ic-body"><text class="gh-glyph">身</text></view>
|
|
|
+ <view class="gh-row gh-row--featured" @click="goPage('/pages/body-detail/index')">
|
|
|
+ <view class="gh-ic gh-ic-body"></view>
|
|
|
<view class="gh-row-info">
|
|
|
- <text class="gh-row-name">身 · 主动健康</text>
|
|
|
+ <text class="gh-row-name"><text class="gh-dim gh-dim-body">身</text> · 主动健康</text>
|
|
|
<text class="gh-row-sub">读懂每一份报告，看见全家体质的变化</text>
|
|
|
</view>
|
|
|
- <text class="gh-row-chev">›</text>
|
|
|
+ <view class="gh-row-chev"></view>
|
|
|
</view>
|
|
|
<view class="gh-row" @click="goPage('/pages/wisdom-detail/index')">
|
|
|
- <view class="gh-ic gh-ic-wisdom"><text class="gh-glyph">智</text></view>
|
|
|
+ <view class="gh-ic gh-ic-wisdom"></view>
|
|
|
<view class="gh-row-info">
|
|
|
- <text class="gh-row-name">智 · 面向未来</text>
|
|
|
- <text class="gh-row-sub">一次测评，看见成员真实的专注与潜能</text>
|
|
|
+ <text class="gh-row-name"><text class="gh-dim gh-dim-wisdom">智</text> · 面向未来</text>
|
|
|
+ <text class="gh-row-sub">一次测评，看见家人真实的专注与潜能</text>
|
|
|
</view>
|
|
|
- <text class="gh-row-chev">›</text>
|
|
|
+ <view class="gh-row-chev"></view>
|
|
|
</view>
|
|
|
<view class="gh-row" @click="goPage('/pages/wealth/index')">
|
|
|
- <view class="gh-ic gh-ic-wealth"><text class="gh-glyph">富</text></view>
|
|
|
+ <view class="gh-ic gh-ic-wealth"></view>
|
|
|
<view class="gh-row-info">
|
|
|
- <text class="gh-row-name">富 · 利他创富</text>
|
|
|
+ <text class="gh-row-name"><text class="gh-dim gh-dim-wealth">富</text> · 利他创富</text>
|
|
|
<text class="gh-row-sub">看懂健康与财富的关系，明白身体是最大的本钱</text>
|
|
|
</view>
|
|
|
- <text class="gh-row-chev">›</text>
|
|
|
+ <view class="gh-row-chev"></view>
|
|
|
</view>
|
|
|
<view class="gh-row" @click="goPage('/pages/action-detail/member-action-detail')">
|
|
|
- <view class="gh-ic gh-ic-action"><text class="gh-glyph">行</text></view>
|
|
|
+ <view class="gh-ic gh-ic-action"></view>
|
|
|
<view class="gh-row-info">
|
|
|
- <text class="gh-row-name">行 · 人际和谐</text>
|
|
|
+ <text class="gh-row-name"><text class="gh-dim gh-dim-action">行</text> · 人际和谐</text>
|
|
|
<text class="gh-row-sub">看懂关系里的情绪，看见家人真实的需求</text>
|
|
|
</view>
|
|
|
- <text class="gh-row-chev">›</text>
|
|
|
+ <view class="gh-row-chev"></view>
|
|
|
</view>
|
|
|
- <view class="gh-row" @click="goPage('/pages/mind-detail/index')">
|
|
|
- <view class="gh-ic gh-ic-mind"><text class="gh-glyph">心</text></view>
|
|
|
+ <view class="gh-row gh-row--featured" @click="goPage('/pages/mind-detail/index')">
|
|
|
+ <view class="gh-ic gh-ic-mind"></view>
|
|
|
<view class="gh-row-info">
|
|
|
- <text class="gh-row-name">心 · 大爱相随</text>
|
|
|
+ <text class="gh-row-name"><text class="gh-dim gh-dim-mind">心</text> · 大爱相随</text>
|
|
|
<text class="gh-row-sub">读懂情绪的信号，听懂家人没说出口的话</text>
|
|
|
</view>
|
|
|
- <text class="gh-row-chev">›</text>
|
|
|
+ <view class="gh-row-chev"></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -934,98 +931,185 @@ export default {
|
|
|
.plan-btn { background: linear-gradient(135deg, $brand-primary, $brand-primary-light); color: $app-surface; font-size: calc(24rpx * var(--font-scale, 1)); border: none; border-radius: 24rpx; padding: 10rpx 28rpx; height: 56rpx; line-height: 36rpx; margin: 0; }
|
|
|
.plan-goal { font-size: calc(24rpx * var(--font-scale, 1)); color: $facade-text-body; line-height: 1.5; display: block; margin-top: 12rpx; }
|
|
|
.plan-hint { font-size: calc(22rpx * var(--font-scale, 1)); color: $facade-text-muted; display: block; margin-top: 12rpx; }
|
|
|
-/* ===== 访客态（新暖调配色 · 令牌化） ===== */
|
|
|
-$gh-white: str-slice('#{$app-surface}', 2);
|
|
|
+/* ===== 访客态（设计稿 page-health 落地 · 令牌化） ===== */
|
|
|
+// 页面级局部色令牌：仅声明 uni.scss 未收录、本页专属的值；其余全部走共享令牌
|
|
|
+$gh-cta-from: #D1440B; // 深橙·亮端（白字 4.62:1）
|
|
|
+$gh-cta-to: $brand-primary; // 深橙·暗端（#C2410C 白字 5.18:1）
|
|
|
+$gh-cta-deep: #B23A0B; // 渐变第三档
|
|
|
+$gh-cta-hover-from: #B93D0B;
|
|
|
+$gh-cta-hover-to: #A9330A;
|
|
|
+$gh-cta-press-from: #A9330A;
|
|
|
+$gh-cta-press-to: #962D08;
|
|
|
+$gh-white-16: rgba($app-surface, 0.16); // 橙底图标盘
|
|
|
+$gh-tint-soft: $tint-warm-soft; // 暖白浅底 #FFF1E6
|
|
|
+$gh-wisdom-border: #E4E4F5; // 智维度徽章描边
|
|
|
+$gh-arrow-ink: $facade-text-slate; // 相生箭头
|
|
|
+$gh-guide-bg-from: #FFF8F2; // 引导卡顶（暖白偏橙）
|
|
|
+$gh-guide-bg-to: #FFFDFB; // 引导卡底
|
|
|
+
|
|
|
+// data-URI SVG icon 构造（mp-weixin 模板内禁写 <svg>，与 login-sheet 落地同款方案）
|
|
|
+// $color: stroke 色；$inner: 内部图形路径
|
|
|
+@function gh-icon($color, $inner) {
|
|
|
+ @return url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23#{$color}' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E#{$inner}%3C/svg%3E");
|
|
|
+}
|
|
|
+$gh-ic-body-bg: str-slice('#{$dim-body-deep}', 2);
|
|
|
+$gh-ic-wisdom-bg: str-slice('#{$dim-wisdom-deep}', 2);
|
|
|
+$gh-ic-wealth-bg: str-slice('#{$dim-wealth-deep}', 2);
|
|
|
+$gh-ic-action-bg: str-slice('#{$dim-action-deep}', 2);
|
|
|
+$gh-ic-mind-bg: str-slice('#{$dim-mind-deep}', 2);
|
|
|
+$gh-white-bg: str-slice('#{$app-surface}', 2);
|
|
|
+$gh-arrow-bg: str-slice('#{$gh-arrow-ink}', 2);
|
|
|
+$gh-chev-bg: str-slice('#{$facade-text-slate}', 2);
|
|
|
+$gh-file-bg: str-slice('#{$dim-body-deep}', 2);
|
|
|
|
|
|
.gh-page { background: $app-bg; min-height: 100vh; padding: 28rpx 0 40rpx; }
|
|
|
|
|
|
-/* 页面头 */
|
|
|
+/* 页面头 / 品牌锚点 */
|
|
|
.gh-head { margin: 0 32rpx 24rpx; display: flex; flex-direction: column; }
|
|
|
.gh-eyebrow { font-size: calc(22rpx * var(--font-scale, 1)); font-weight: 600; color: $brand-primary; letter-spacing: 2rpx; }
|
|
|
-.gh-title { font-size: calc(46rpx * var(--font-scale, 1)); font-weight: 700; color: $facade-text-strong; line-height: 1.32; margin-top: 12rpx; }
|
|
|
-.gh-sub { font-size: calc(24rpx * var(--font-scale, 1)); color: $facade-text-body; line-height: 1.65; margin-top: 10rpx; }
|
|
|
+.gh-title { font-size: calc(52rpx * var(--font-scale, 1)); font-weight: 800; color: $facade-text-strong; line-height: 1.24; letter-spacing: 1rpx; margin-top: 12rpx; }
|
|
|
+.gh-sub { font-size: calc(26rpx * var(--font-scale, 1)); color: $facade-text-body; line-height: 1.7; margin-top: 12rpx; }
|
|
|
|
|
|
/* 痛点条 */
|
|
|
-.gh-pain { margin: 0 32rpx 24rpx; display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; }
|
|
|
-.gh-pain-quote { font-size: calc(30rpx * var(--font-scale, 1)); font-weight: 700; color: $brand-primary; }
|
|
|
-.gh-pain-desc { font-size: calc(24rpx * var(--font-scale, 1)); color: $facade-text-body; }
|
|
|
+.gh-pain { margin: 0 32rpx 24rpx; display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; padding: 24rpx 28rpx; background: $app-surface; border: 1rpx solid $app-border-subtle; border-radius: $uni-radius-lg; }
|
|
|
+.gh-pain-quote { font-size: calc(28rpx * var(--font-scale, 1)); font-weight: 800; color: $brand-primary; margin-right: 16rpx; white-space: nowrap; }
|
|
|
+.gh-pain-desc { font-size: calc(24rpx * var(--font-scale, 1)); color: $facade-text-body; line-height: 1.6; }
|
|
|
|
|
|
/* 自检 hero CTA */
|
|
|
-.gh-cta { margin: 0 32rpx 24rpx; display: flex; flex-direction: row; align-items: center; padding: 28rpx; border-radius: 24rpx; background: linear-gradient(135deg, $brand-primary, $brand-primary-dark); box-shadow: 0 12rpx 32rpx rgba($brand-primary, 0.24); }
|
|
|
-.gh-cta:active { opacity: 0.9; }
|
|
|
+.gh-cta { margin: 0 32rpx 24rpx; display: flex; flex-direction: row; align-items: center; padding: 36rpx 32rpx; border-radius: $uni-radius-lg; background: linear-gradient(150deg, $gh-cta-from 0%, $gh-cta-to 78%, $gh-cta-deep 100%); }
|
|
|
+.gh-cta:active { opacity: 0.92; }
|
|
|
.gh-cta-ic {
|
|
|
- width: 88rpx; height: 88rpx; border-radius: 24rpx; flex-shrink: 0;
|
|
|
- background-color: rgba($app-surface, 0.18);
|
|
|
+ width: 88rpx; height: 88rpx; flex-shrink: 0;
|
|
|
+ border-radius: 24rpx;
|
|
|
+ background-color: $gh-white-16;
|
|
|
background-repeat: no-repeat;
|
|
|
background-position: center;
|
|
|
background-size: 48rpx 48rpx;
|
|
|
- background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23#{$gh-white}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h6l-1 8 9-12h-6l1-8z'/%3E%3C/svg%3E");
|
|
|
+ background-image: gh-icon($gh-white-bg, '%3Cpath d=%22M13 2 3 14h9l-1 8 10-12h-9l1-8z%22/%3E');
|
|
|
}
|
|
|
-.gh-cta-info { flex: 1; min-width: 0; margin-left: 20rpx; display: flex; flex-direction: column; }
|
|
|
-.gh-cta-title { font-size: calc(30rpx * var(--font-scale, 1)); font-weight: 700; color: $app-surface; }
|
|
|
-.gh-cta-sub { font-size: calc(22rpx * var(--font-scale, 1)); color: rgba($app-surface, 0.82); margin-top: 6rpx; }
|
|
|
-.gh-chev { font-size: calc(36rpx * var(--font-scale, 1)); color: rgba($app-surface, 0.72); margin-left: 12rpx; }
|
|
|
+.gh-cta-info { flex: 1; min-width: 0; margin-left: 24rpx; display: flex; flex-direction: column; }
|
|
|
+.gh-cta-title { font-size: calc(34rpx * var(--font-scale, 1)); font-weight: 800; color: $app-surface; letter-spacing: 1rpx; }
|
|
|
+.gh-cta-sub { font-size: calc(24rpx * var(--font-scale, 1)); color: rgba($app-surface, 0.86); margin-top: 6rpx; }
|
|
|
+.gh-chev {
|
|
|
+ width: 36rpx; height: 36rpx; flex-shrink: 0; margin-left: 16rpx;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center;
|
|
|
+ background-size: 36rpx 36rpx;
|
|
|
+ background-image: gh-icon($gh-white-bg, '%3Cpolyline points=%229 18 15 12 9 6%22/%3E');
|
|
|
+}
|
|
|
+
|
|
|
+/* 区块标签 */
|
|
|
+.gh-section { margin: 0 32rpx 24rpx; }
|
|
|
+.gh-section-tag { display: flex; flex-direction: row; align-items: center; margin: 0 0 20rpx 4rpx; }
|
|
|
+.gh-section-dot { width: 8rpx; height: 28rpx; border-radius: 4rpx; background: $brand-primary; }
|
|
|
+.gh-section-title { font-size: calc(30rpx * var(--font-scale, 1)); font-weight: 700; color: $facade-text-strong; margin-left: 12rpx; letter-spacing: 1rpx; }
|
|
|
+.gh-section-note { font-size: calc(22rpx * var(--font-scale, 1)); color: $facade-text-slate; margin-left: 4rpx; }
|
|
|
|
|
|
/* 待填调研 */
|
|
|
-.gh-pending { margin: 0 32rpx 20rpx; display: flex; flex-direction: row; align-items: center; padding: 24rpx; border-radius: 20rpx; background: $app-surface; border: 1rpx solid $app-border-subtle; }
|
|
|
+.gh-pending { display: flex; flex-direction: row; align-items: center; padding: 24rpx; border-radius: $uni-radius-lg; background: $app-surface; border: 1rpx solid $app-border-subtle; }
|
|
|
+.gh-pending + .gh-pending { margin-top: 16rpx; }
|
|
|
.gh-pending:active { opacity: 0.9; }
|
|
|
-.gh-pending-ic { width: 72rpx; height: 72rpx; border-radius: 20rpx; display: flex; flex-direction: row; align-items: center; justify-content: center; flex-shrink: 0; background: $dim-body-tint; }
|
|
|
-.gh-pending-glyph { font-size: calc(28rpx * var(--font-scale, 1)); font-weight: 700; color: $dim-body-deep; }
|
|
|
+.gh-pending-ic {
|
|
|
+ width: 72rpx; height: 72rpx; border-radius: 20rpx; flex-shrink: 0;
|
|
|
+ background-color: $dim-body-tint;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center;
|
|
|
+ background-size: 40rpx 40rpx;
|
|
|
+ background-image: gh-icon($gh-file-bg, '%3Cpath d=%22M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z%22/%3E%3Cpolyline points=%2214 2 14 8 20 8%22/%3E%3Cline x1=%2216%22 y1=%2213%22 x2=%228%22 y2=%2213%22/%3E%3Cline x1=%2216%22 y1=%2217%22 x2=%228%22 y2=%2217%22/%3E%3Cpolyline points=%2210 9 9 9 8 9%22/%3E');
|
|
|
+}
|
|
|
.gh-pending-info { flex: 1; min-width: 0; margin-left: 20rpx; display: flex; flex-direction: column; }
|
|
|
.gh-pending-title { font-size: calc(28rpx * var(--font-scale, 1)); font-weight: 600; color: $facade-text-strong; }
|
|
|
.gh-pending-sub { font-size: calc(22rpx * var(--font-scale, 1)); color: $facade-text-body; margin-top: 6rpx; }
|
|
|
-.gh-pending-tag { flex-shrink: 0; margin-left: 12rpx; font-size: calc(20rpx * var(--font-scale, 1)); font-weight: 600; color: $brand-primary; background: rgba($brand-primary, 0.1); border-radius: 999rpx; padding: 6rpx 16rpx; }
|
|
|
+.gh-pending-tag { flex-shrink: 0; font-size: calc(22rpx * var(--font-scale, 1)); font-weight: 700; color: $brand-primary; background: $gh-tint-soft; border-radius: 999rpx; padding: 6rpx 20rpx; }
|
|
|
|
|
|
-/* 演示雷达 */
|
|
|
-.gh-demo { margin: 0 32rpx 24rpx; background: $app-surface; border-radius: 24rpx; padding: 20rpx 12rpx 12rpx; border: 1rpx solid $app-border-subtle; }
|
|
|
-.gh-demo-block { margin-top: 12rpx; }
|
|
|
-.gh-demo-block:first-child { margin-top: 0; }
|
|
|
-.gh-demo-head { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 0 20rpx; margin: 12rpx 0 4rpx; }
|
|
|
-.gh-demo-name { font-size: calc(24rpx * var(--font-scale, 1)); font-weight: 600; color: $facade-text-strong; }
|
|
|
-.gh-demo-tag { font-size: calc(20rpx * var(--font-scale, 1)); color: $brand-primary; background: rgba($brand-primary, 0.1); border-radius: 8rpx; padding: 2rpx 12rpx; }
|
|
|
-.gh-demo-empty { padding: 72rpx 20rpx; display: flex; flex-direction: column; align-items: center; }
|
|
|
-.gh-demo-empty-text { font-size: calc(28rpx * var(--font-scale, 1)); color: $facade-text-strong; font-weight: 600; display: block; }
|
|
|
-.gh-demo-empty-sub { font-size: calc(22rpx * var(--font-scale, 1)); color: $facade-text-muted; display: block; margin-top: 10rpx; }
|
|
|
+/* 演示雷达（卡片化：每个雷达独立 surface card） */
|
|
|
+.gh-demo { margin: 0 32rpx 24rpx; display: flex; flex-direction: column; }
|
|
|
+.gh-demo-block { background: $app-surface; border: 1rpx solid $app-border-subtle; border-radius: $uni-radius-lg; padding: 28rpx 24rpx 16rpx; }
|
|
|
+.gh-demo-block + .gh-demo-block { margin-top: 20rpx; }
|
|
|
+.gh-demo-head { display: flex; flex-direction: row; align-items: center; }
|
|
|
+.gh-demo-name { font-size: calc(28rpx * var(--font-scale, 1)); font-weight: 700; color: $facade-text-strong; }
|
|
|
+.gh-demo-tag { font-size: calc(20rpx * var(--font-scale, 1)); color: $dim-body-deep; background: $dim-body-tint; border: 1rpx solid $app-border-subtle; border-radius: 999rpx; padding: 4rpx 16rpx; margin-left: 16rpx; font-weight: 600; }
|
|
|
+.gh-demo-block:nth-child(2) .gh-demo-tag { color: $dim-wisdom-deep; background: $dim-wisdom-tint; border-color: $gh-wisdom-border; }
|
|
|
+.gh-demo-empty { background: $app-surface; border: 1rpx solid $app-border-subtle; border-radius: $uni-radius-lg; padding: 96rpx 40rpx; display: flex; flex-direction: column; align-items: center; }
|
|
|
+.gh-demo-empty-text { font-size: calc(28rpx * var(--font-scale, 1)); color: $facade-text-strong; font-weight: 600; }
|
|
|
+.gh-demo-empty-sub { font-size: calc(24rpx * var(--font-scale, 1)); color: $facade-text-slate; margin-top: 16rpx; }
|
|
|
|
|
|
/* 五维健康体系 */
|
|
|
-.gh-wuxing { margin: 0 32rpx 24rpx; background: $app-surface; border-radius: 24rpx; padding: 28rpx 24rpx; border: 1rpx solid $app-border-subtle; }
|
|
|
-.gh-wuxing-title { display: block; text-align: center; font-size: calc(30rpx * var(--font-scale, 1)); font-weight: 700; color: $facade-text-strong; line-height: 1.45; }
|
|
|
-.gh-wuxing-sub { display: block; text-align: center; font-size: calc(22rpx * var(--font-scale, 1)); color: $facade-text-body; line-height: 1.65; margin-top: 10rpx; }
|
|
|
-.gh-rel { margin-top: 24rpx; padding: 20rpx; border-radius: 20rpx; background: $app-bg; }
|
|
|
-.gh-rel-title { display: block; font-size: calc(24rpx * var(--font-scale, 1)); font-weight: 700; color: $facade-text-strong; margin-bottom: 12rpx; }
|
|
|
-.gh-chain { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; }
|
|
|
-.gh-node { font-size: calc(22rpx * var(--font-scale, 1)); font-weight: 700; padding: 6rpx 14rpx; border-radius: 10rpx; }
|
|
|
-.gh-node-body { color: $dim-body-deep; background: $dim-body-tint; }
|
|
|
-.gh-node-wisdom { color: $dim-wisdom-deep; background: $dim-wisdom-tint; }
|
|
|
-.gh-node-wealth { color: $dim-wealth-deep; background: $dim-wealth-tint; }
|
|
|
-.gh-node-action { color: $dim-action-deep; background: $dim-action-tint; }
|
|
|
-.gh-node-mind { color: $dim-mind-deep; background: $dim-mind-tint; }
|
|
|
-.gh-arrow { font-size: calc(20rpx * var(--font-scale, 1)); color: $facade-text-ghost; margin: 0 6rpx; }
|
|
|
-.gh-op { font-size: calc(20rpx * var(--font-scale, 1)); color: $status-danger-deep; margin: 0 8rpx; }
|
|
|
-.gh-sep { font-size: calc(20rpx * var(--font-scale, 1)); color: $facade-text-ghost; margin: 0 8rpx; }
|
|
|
-.gh-rel-hint { display: block; font-size: calc(20rpx * var(--font-scale, 1)); color: $facade-text-body; line-height: 1.65; margin-top: 12rpx; }
|
|
|
+.gh-wuxing { margin: 0 32rpx 24rpx; background: $app-surface; border: 1rpx solid $app-border-subtle; border-radius: $uni-radius-lg; padding: 32rpx 28rpx; }
|
|
|
+.gh-wuxing-title { display: block; font-size: calc(32rpx * var(--font-scale, 1)); font-weight: 800; color: $facade-text-strong; line-height: 1.4; }
|
|
|
+.gh-wuxing-sub { display: block; font-size: calc(24rpx * var(--font-scale, 1)); color: $facade-text-body; line-height: 1.6; margin-top: 12rpx; }
|
|
|
|
|
|
-.gh-rows { margin-top: 24rpx; display: flex; flex-direction: column; }
|
|
|
-.gh-row { display: flex; flex-direction: row; align-items: center; padding: 20rpx 0; border-top: 1rpx solid $app-border-subtle; }
|
|
|
-.gh-row:first-child { border-top: none; padding-top: 4rpx; }
|
|
|
-.gh-row:active { opacity: 0.85; }
|
|
|
-.gh-ic { width: 76rpx; height: 76rpx; border-radius: 20rpx; display: flex; flex-direction: row; align-items: center; justify-content: center; flex-shrink: 0; }
|
|
|
-.gh-ic-body { background: $dim-body-tint; }
|
|
|
-.gh-ic-wisdom { background: $dim-wisdom-tint; }
|
|
|
-.gh-ic-wealth { background: $dim-wealth-tint; }
|
|
|
-.gh-ic-action { background: $dim-action-tint; }
|
|
|
-.gh-ic-mind { background: $dim-mind-tint; }
|
|
|
-.gh-glyph { font-size: calc(30rpx * var(--font-scale, 1)); font-weight: 700; }
|
|
|
-.gh-ic-body .gh-glyph { color: $dim-body-deep; }
|
|
|
-.gh-ic-wisdom .gh-glyph { color: $dim-wisdom-deep; }
|
|
|
-.gh-ic-wealth .gh-glyph { color: $dim-wealth-deep; }
|
|
|
-.gh-ic-action .gh-glyph { color: $dim-action-deep; }
|
|
|
-.gh-ic-mind .gh-glyph { color: $dim-mind-deep; }
|
|
|
+/* 相生 / 相克 */
|
|
|
+.gh-rel { margin-top: 24rpx; padding: 24rpx 24rpx 20rpx; border-radius: $uni-radius-lg; background: $app-bg; }
|
|
|
+.gh-rel-title { display: block; font-size: calc(24rpx * var(--font-scale, 1)); font-weight: 700; color: $facade-text-slate; letter-spacing: 1rpx; }
|
|
|
+.gh-chain { margin-top: 14rpx; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; }
|
|
|
+.gh-node { font-size: calc(24rpx * var(--font-scale, 1)); font-weight: 700; }
|
|
|
+.gh-node-body { color: $dim-body-deep; }
|
|
|
+.gh-node-wisdom { color: $dim-wisdom-deep; }
|
|
|
+.gh-node-wealth { color: $dim-wealth-deep; }
|
|
|
+.gh-node-action { color: $dim-action-deep; }
|
|
|
+.gh-node-mind { color: $dim-mind-deep; }
|
|
|
+.gh-arrow {
|
|
|
+ width: 24rpx; height: 24rpx; margin: 0 8rpx; flex-shrink: 0;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center;
|
|
|
+ background-size: 24rpx 24rpx;
|
|
|
+ background-image: gh-icon($gh-arrow-bg, '%3Cline x1=%225%22 y1=%2212%22 x2=%2219%22 y2=%2212%22/%3E%3Cpolyline points=%2212 5 19 12 12 19%22/%3E');
|
|
|
+}
|
|
|
+.gh-sep { font-size: calc(20rpx * var(--font-scale, 1)); color: $facade-text-slate; margin: 0 8rpx; }
|
|
|
+.gh-rel-hint { display: block; font-size: calc(22rpx * var(--font-scale, 1)); color: $facade-text-body; line-height: 1.65; margin-top: 14rpx; }
|
|
|
+
|
|
|
+/* 五行 rows（首尾身/心 featured 暖底高亮，破五卡等权） */
|
|
|
+.gh-rows { margin-top: 28rpx; display: flex; flex-direction: column; }
|
|
|
+.gh-row { display: flex; flex-direction: row; align-items: center; padding: 20rpx 12rpx; border: 1rpx solid $app-border-subtle; border-radius: $uni-radius-lg; background: $app-surface; }
|
|
|
+.gh-row + .gh-row { margin-top: 12rpx; }
|
|
|
+.gh-row:active { opacity: 0.88; }
|
|
|
+.gh-row--featured { padding: 24rpx 12rpx; background: $gh-tint-soft; border-color: rgba($brand-primary, 0.14); }
|
|
|
+.gh-ic { width: 68rpx; height: 68rpx; border-radius: 18rpx; flex-shrink: 0; display: flex; flex-direction: row; align-items: center; justify-content: center; }
|
|
|
+.gh-row--featured .gh-ic { width: 80rpx; height: 80rpx; border-radius: 22rpx; }
|
|
|
+.gh-ic-body {
|
|
|
+ background-color: $dim-body-tint;
|
|
|
+ background-repeat: no-repeat; background-position: center; background-size: 40rpx 40rpx;
|
|
|
+ background-image: gh-icon($gh-ic-body-bg, '%3Cpath d=%22M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2%22/%3E%3Ccircle cx=%2212%22 cy=%227%22 r=%224%22/%3E');
|
|
|
+}
|
|
|
+.gh-ic-wisdom {
|
|
|
+ background-color: $dim-wisdom-tint;
|
|
|
+ background-repeat: no-repeat; background-position: center; background-size: 36rpx 36rpx;
|
|
|
+ background-image: gh-icon($gh-ic-wisdom-bg, '%3Cpath d=%22M9 18h6%22/%3E%3Cpath d=%22M10 22h4%22/%3E%3Cpath d=%22M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5.76.76 1.23 1.52 1.41 2.5%22/%3E');
|
|
|
+}
|
|
|
+.gh-ic-wealth {
|
|
|
+ background-color: $dim-wealth-tint;
|
|
|
+ background-repeat: no-repeat; background-position: center; background-size: 36rpx 36rpx;
|
|
|
+ background-image: gh-icon($gh-ic-wealth-bg, '%3Cpolyline points=%2223 6 13.5 15.5 8.5 10.5 1 18%22/%3E%3Cpolyline points=%2217 6 23 6 23 12%22/%3E');
|
|
|
+}
|
|
|
+.gh-ic-action {
|
|
|
+ background-color: $dim-action-tint;
|
|
|
+ background-repeat: no-repeat; background-position: center; background-size: 36rpx 36rpx;
|
|
|
+ background-image: gh-icon($gh-ic-action-bg, '%3Cpolyline points=%2222 12 18 12 15 21 9 3 6 12 2 12%22/%3E');
|
|
|
+}
|
|
|
+.gh-ic-mind {
|
|
|
+ background-color: $dim-mind-tint;
|
|
|
+ background-repeat: no-repeat; background-position: center; background-size: 40rpx 40rpx;
|
|
|
+ background-image: gh-icon($gh-ic-mind-bg, '%3Cpath d=%22M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z%22/%3E');
|
|
|
+}
|
|
|
.gh-row-info { flex: 1; min-width: 0; margin-left: 20rpx; display: flex; flex-direction: column; }
|
|
|
-.gh-row-name { font-size: calc(28rpx * var(--font-scale, 1)); font-weight: 600; color: $facade-text-strong; }
|
|
|
-.gh-row-sub { font-size: calc(22rpx * var(--font-scale, 1)); color: $facade-text-body; line-height: 1.5; margin-top: 6rpx; }
|
|
|
-.gh-row-chev { font-size: calc(32rpx * var(--font-scale, 1)); color: $facade-text-ghost; margin-left: 12rpx; flex-shrink: 0; }
|
|
|
+.gh-row-name { font-size: calc(30rpx * var(--font-scale, 1)); font-weight: 700; color: $facade-text-strong; }
|
|
|
+.gh-row--featured .gh-row-name { font-size: calc(32rpx * var(--font-scale, 1)); }
|
|
|
+.gh-dim { font-weight: 800; }
|
|
|
+.gh-dim-body { color: $dim-body-deep; }
|
|
|
+.gh-dim-wisdom { color: $dim-wisdom-deep; }
|
|
|
+.gh-dim-wealth { color: $dim-wealth-deep; }
|
|
|
+.gh-dim-action { color: $dim-action-deep; }
|
|
|
+.gh-dim-mind { color: $dim-mind-deep; }
|
|
|
+.gh-row-sub { font-size: calc(24rpx * var(--font-scale, 1)); color: $facade-text-body; line-height: 1.5; margin-top: 6rpx; }
|
|
|
+.gh-row--featured .gh-row-sub { font-size: calc(26rpx * var(--font-scale, 1)); }
|
|
|
+.gh-row-chev {
|
|
|
+ width: 32rpx; height: 32rpx; flex-shrink: 0;
|
|
|
+ background-repeat: no-repeat; background-position: center; background-size: 32rpx 32rpx;
|
|
|
+ background-image: gh-icon($gh-chev-bg, '%3Cpolyline points=%229 18 15 12 9 6%22/%3E');
|
|
|
+}
|
|
|
|
|
|
+/* 登录引导 */
|
|
|
.gh-guide { margin: 0 32rpx 8rpx; }
|
|
|
|
|
|
</style>
|
Agnes Agent