|
@@ -5,22 +5,16 @@
|
|
|
<view class="sandbox-header">
|
|
<view class="sandbox-header">
|
|
|
<image class="sandbox-logo" src="/static/logo.png" mode="aspectFit"></image>
|
|
<image class="sandbox-logo" src="/static/logo.png" mode="aspectFit"></image>
|
|
|
<text class="sandbox-title">浠艾福能量沙盘</text>
|
|
<text class="sandbox-title">浠艾福能量沙盘</text>
|
|
|
- <text class="sandbox-badge">{{ displayBadgeText }}</text>
|
|
|
|
|
|
|
+ <!-- 右上角:live 模式显示个人/全家切换,preview 模式显示徽章文案 -->
|
|
|
|
|
+ <view class="sandbox-switch" v-if="mode !== 'preview'" @click="onToggle(currentView === 'family' ? 'personal' : 'family')">
|
|
|
|
|
+ <text class="sandbox-switch-icon">{{ currentView === 'family' ? '👨👩👧👦' : '👤' }}</text>
|
|
|
|
|
+ <text class="sandbox-switch-label">{{ currentView === 'family' ? '全家' : (currentMember ? currentMember.name : '个人') }}</text>
|
|
|
|
|
+ <text class="sandbox-switch-arrow">⇄</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <text class="sandbox-badge" v-else>{{ displayBadgeText }}</text>
|
|
|
</view>
|
|
</view>
|
|
|
</slot>
|
|
</slot>
|
|
|
|
|
|
|
|
- <!-- 个人/全家切换开关(始终显示,成员 <2 时点全家会提示) -->
|
|
|
|
|
- <view class="sandbox-toggle" v-if="mode !== 'preview'">
|
|
|
|
|
- <view class="toggle-item" :class="activeClassName" @click="onToggle('personal')">
|
|
|
|
|
- <text class="toggle-icon">👤</text>
|
|
|
|
|
- <text class="toggle-text">个人</text>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="toggle-item toggle-item--family" :class="activeFamilyClassName" @click="onToggle('family')">
|
|
|
|
|
- <text class="toggle-icon">👨👩👧👦</text>
|
|
|
|
|
- <text class="toggle-text">全家</text>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
-
|
|
|
|
|
<view class="sandbox-star" :style="{height: starHeight}">
|
|
<view class="sandbox-star" :style="{height: starHeight}">
|
|
|
<view class="star-glow-bg"></view>
|
|
<view class="star-glow-bg"></view>
|
|
|
|
|
|
|
@@ -652,6 +646,24 @@ export default {
|
|
|
border-radius: 20rpx;
|
|
border-radius: 20rpx;
|
|
|
margin-left: auto;
|
|
margin-left: auto;
|
|
|
}
|
|
}
|
|
|
|
|
+.sandbox-switch {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ gap: 4rpx;
|
|
|
|
|
+ font-size: 20rpx;
|
|
|
|
|
+ color: rgba(143,197,232,0.85);
|
|
|
|
|
+ background: rgba(143,197,232,0.12);
|
|
|
|
|
+ padding: 6rpx 14rpx;
|
|
|
|
|
+ border-radius: 20rpx;
|
|
|
|
|
+ margin-left: auto;
|
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
+}
|
|
|
|
|
+.sandbox-switch:active {
|
|
|
|
|
+ background: rgba(143,197,232,0.22);
|
|
|
|
|
+}
|
|
|
|
|
+.sandbox-switch-icon { font-size: 22rpx; line-height: 1; }
|
|
|
|
|
+.sandbox-switch-label { font-size: 20rpx; font-weight: 600; max-width: 120rpx; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
|
|
|
|
|
+.sandbox-switch-arrow { font-size: 18rpx; opacity: 0.6; }
|
|
|
|
|
|
|
|
/* ---- 五角星区域 ---- */
|
|
/* ---- 五角星区域 ---- */
|
|
|
.sandbox-star {
|
|
.sandbox-star {
|