|
@@ -109,7 +109,7 @@ import {
|
|
|
*
|
|
*
|
|
|
* mp-weixin WXML 不支持模板内联 <svg>,故用 data:image/svg+xml 作为 <image> src
|
|
* mp-weixin WXML 不支持模板内联 <svg>,故用 data:image/svg+xml 作为 <image> src
|
|
|
* (仓库既有模式:pages/shop/order-list/order-list.vue)。SVG 文档是独立渲染上下文,
|
|
* (仓库既有模式:pages/shop/order-list/order-list.vue)。SVG 文档是独立渲染上下文,
|
|
|
- * currentColor 无法继承宿主 CSS,故 stroke 颜色在此处按 $dim-data-* / $brand-primary-deep
|
|
|
|
|
|
|
+ * currentColor 无法继承宿主 CSS,故 stroke 颜色在此处按原始五行亮色(身=$brown-warm 心=$mind-accent 智=$accent-gold 富=$mat-blue-400 行=$mat-green)硬编码
|
|
|
* 词表取色(与 uni.scss 令牌一一对应,注释映射;Canvas/JS 侧无法使用 SCSS 变量)。
|
|
* 词表取色(与 uni.scss 令牌一一对应,注释映射;Canvas/JS 侧无法使用 SCSS 变量)。
|
|
|
*
|
|
*
|
|
|
* 五行语义由形状承载:心=火焰 身=山 智=闪电 富=水滴 行=叶。
|
|
* 五行语义由形状承载:心=火焰 身=山 智=闪电 富=水滴 行=叶。
|
|
@@ -166,13 +166,13 @@ var ICON_PATHS = {
|
|
|
]
|
|
]
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-// 数据笔触深档(与 uni.scss $dim-data-* 一致)—— 图标颜色 = 数据笔触色,保证对填充 #FCE7CE ≥3:1
|
|
|
|
|
|
|
+// 数据笔触(还原原始五行亮色:身=暖棕 心=橙红 智=金 富=蓝 行=绿)—— 图标为描边,深色容器上亮色高对比可见
|
|
|
var DIM_ICON_URIS = {
|
|
var DIM_ICON_URIS = {
|
|
|
- mind: svgUri(ICON_PATHS.flame, '#9D174D'), // $dim-data-mind #9D174D
|
|
|
|
|
- body: svgUri(ICON_PATHS.mountain, '#9C4A1A'), // $dim-data-body #9C4A1A
|
|
|
|
|
- wisdom: svgUri(ICON_PATHS.lightning,'#4338CA'), // $dim-data-wisdom #4338CA
|
|
|
|
|
- wealth: svgUri(ICON_PATHS.droplet, '#92400E'), // $dim-data-wealth #92400E
|
|
|
|
|
- action: svgUri(ICON_PATHS.leaf, '#047857') // $dim-data-action #047857
|
|
|
|
|
|
|
+ mind: svgUri(ICON_PATHS.flame, '#FF6B35'), // 心·火 $mind-accent
|
|
|
|
|
+ body: svgUri(ICON_PATHS.mountain, '#8D6E63'), // 身·土 $brown-warm
|
|
|
|
|
+ wisdom: svgUri(ICON_PATHS.lightning,'#FFD700'), // 智·金 $accent-gold
|
|
|
|
|
+ wealth: svgUri(ICON_PATHS.droplet, '#42A5F5'), // 富·水 $mat-blue-400
|
|
|
|
|
+ action: svgUri(ICON_PATHS.leaf, '#4CAF50') // 行·木 $mat-green
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// UI 图标(品牌深橙,对白底 / 品牌浅底均 ≥3:1;$brand-primary-deep #C2410C)
|
|
// UI 图标(品牌深橙,对白底 / 品牌浅底均 ≥3:1;$brand-primary-deep #C2410C)
|
|
@@ -789,15 +789,15 @@ export default {
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|
|
|
/* ============================================================
|
|
/* ============================================================
|
|
|
-容器:浅色暖调卡片(与 B1 .dim-band 视觉语言一致)
|
|
|
|
|
|
|
+容器:深色海军蓝卡片(还原原始配色)
|
|
|
============================================================ */
|
|
============================================================ */
|
|
|
.wuxing-sandbox {
|
|
.wuxing-sandbox {
|
|
|
margin: 20rpx $uni-space-lg;
|
|
margin: 20rpx $uni-space-lg;
|
|
|
padding: 20rpx 24rpx 24rpx;
|
|
padding: 20rpx 24rpx 24rpx;
|
|
|
- background: $app-surface;
|
|
|
|
|
- border: 1rpx solid rgba($brand-primary, 0.12);
|
|
|
|
|
|
|
+ background: linear-gradient(135deg, $facade-ink-navy, $accent-navy, $app-ink-night-2);
|
|
|
|
|
+ border: 1rpx solid rgba(255, 255, 255, 0.12);
|
|
|
border-radius: $radius-lg;
|
|
border-radius: $radius-lg;
|
|
|
- box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
|
|
|
|
|
|
|
+ box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.28);
|
|
|
position: relative;
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
}
|
|
}
|
|
@@ -811,7 +811,7 @@ export default {
|
|
|
position: relative;
|
|
position: relative;
|
|
|
z-index: 5;
|
|
z-index: 5;
|
|
|
}
|
|
}
|
|
|
-.sandbox-title { font-size: calc(26rpx * var(--font-scale, 1)); font-weight: bold; color: $app-text; margin-left: 8rpx; }
|
|
|
|
|
|
|
+.sandbox-title { font-size: calc(26rpx * var(--font-scale, 1)); font-weight: bold; color: #8FC5E8; margin-left: 8rpx; }
|
|
|
.sandbox-logo { width: 32rpx; height: 32rpx; flex-shrink: 0; }
|
|
.sandbox-logo { width: 32rpx; height: 32rpx; flex-shrink: 0; }
|
|
|
|
|
|
|
|
/* ---- 右上角切换(触控 ≥44px = 88rpx) ---- */
|
|
/* ---- 右上角切换(触控 ≥44px = 88rpx) ---- */
|
|
@@ -891,7 +891,7 @@ export default {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
- background: $dim-sandbox-fill;
|
|
|
|
|
|
|
+ background: transparent;
|
|
|
border-radius: $radius-md;
|
|
border-radius: $radius-md;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -911,7 +911,7 @@ export default {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* ============================================================
|
|
/* ============================================================
|
|
|
-顶点:图标 + 中文标签(图标形状承载五行语义,深档色承载数据)
|
|
|
|
|
|
|
+顶点:图标 + 中文标签(图标形状承载五行语义,亮色(原始五行色)承载数据)
|
|
|
============================================================ */
|
|
============================================================ */
|
|
|
.star-point {
|
|
.star-point {
|
|
|
position: absolute; transform: translate(-50%, -50%); z-index: 3;
|
|
position: absolute; transform: translate(-50%, -50%); z-index: 3;
|
|
@@ -935,24 +935,24 @@ export default {
|
|
|
flex-shrink: 0;
|
|
flex-shrink: 0;
|
|
|
border: 1rpx solid transparent;
|
|
border: 1rpx solid transparent;
|
|
|
}
|
|
}
|
|
|
-.point-dot--mind { background: $dim-mind-tint; border-color: rgba($dim-mind, 0.35); box-shadow: 0 0 12rpx rgba($dim-mind, 0.22); }
|
|
|
|
|
-.point-dot--body { background: $dim-body-tint; border-color: rgba($dim-body, 0.35); box-shadow: 0 0 12rpx rgba($dim-body, 0.22); }
|
|
|
|
|
-.point-dot--wisdom { background: $dim-wisdom-tint; border-color: rgba($dim-wisdom, 0.35); box-shadow: 0 0 12rpx rgba($dim-wisdom, 0.22); }
|
|
|
|
|
-.point-dot--wealth { background: $dim-wealth-tint; border-color: rgba($dim-wealth, 0.35); box-shadow: 0 0 12rpx rgba($dim-wealth, 0.22); }
|
|
|
|
|
-.point-dot--action { background: $dim-action-tint; border-color: rgba($dim-action, 0.35); box-shadow: 0 0 12rpx rgba($dim-action, 0.22); }
|
|
|
|
|
|
|
+.point-dot--mind { background: rgba(255, 107, 53, 0.18); border-color: rgba(255, 107, 53, 0.5); box-shadow: 0 0 12rpx rgba(255, 107, 53, 0.45); }
|
|
|
|
|
+.point-dot--body { background: rgba(141, 110, 99, 0.22); border-color: rgba(141, 110, 99, 0.55); box-shadow: 0 0 12rpx rgba(141, 110, 99, 0.45); }
|
|
|
|
|
+.point-dot--wisdom { background: rgba(255, 215, 0, 0.18); border-color: rgba(255, 215, 0, 0.5); box-shadow: 0 0 12rpx rgba(255, 215, 0, 0.4); }
|
|
|
|
|
+.point-dot--wealth { background: rgba(66, 165, 245, 0.18); border-color: rgba(66, 165, 245, 0.5); box-shadow: 0 0 12rpx rgba(66, 165, 245, 0.45); }
|
|
|
|
|
+.point-dot--action { background: rgba(76, 175, 80, 0.18); border-color: rgba(76, 175, 80, 0.5); box-shadow: 0 0 12rpx rgba(76, 175, 80, 0.45); }
|
|
|
|
|
|
|
|
.point-icon { width: 40rpx; height: 40rpx; } /* 20px 下可辨识 */
|
|
.point-icon { width: 40rpx; height: 40rpx; } /* 20px 下可辨识 */
|
|
|
-.point-label { font-size: calc(22rpx * var(--font-scale, 1)); font-weight: bold; color: $app-text; margin-top: 6rpx; letter-spacing: 2rpx; }
|
|
|
|
|
|
|
+.point-label { font-size: calc(22rpx * var(--font-scale, 1)); font-weight: bold; color: rgba(143, 197, 232, 0.85); margin-top: 6rpx; letter-spacing: 2rpx; }
|
|
|
.star-point--row .point-label,
|
|
.star-point--row .point-label,
|
|
|
.star-point--rev .point-label { margin-top: 0; }
|
|
.star-point--rev .point-label { margin-top: 0; }
|
|
|
.point-energy { font-size: calc(18rpx * var(--font-scale, 1)); font-weight: 600; padding: 1rpx 10rpx; border-radius: 16rpx; margin-top: 2rpx; }
|
|
.point-energy { font-size: calc(18rpx * var(--font-scale, 1)); font-weight: 600; padding: 1rpx 10rpx; border-radius: 16rpx; margin-top: 2rpx; }
|
|
|
.star-point--row .point-energy,
|
|
.star-point--row .point-energy,
|
|
|
.star-point--rev .point-energy { margin-top: 0; }
|
|
.star-point--rev .point-energy { margin-top: 0; }
|
|
|
-.point-energy--mind { color: $dim-data-mind; background: $dim-mind-tint; }
|
|
|
|
|
-.point-energy--body { color: $dim-data-body; background: $dim-body-tint; }
|
|
|
|
|
-.point-energy--wisdom { color: $dim-data-wisdom; background: $dim-wisdom-tint; }
|
|
|
|
|
-.point-energy--wealth { color: $dim-data-wealth; background: $dim-wealth-tint; }
|
|
|
|
|
-.point-energy--action { color: $dim-data-action; background: $dim-action-tint; }
|
|
|
|
|
|
|
+.point-energy--mind { color: #FF6B35; background: rgba(255, 107, 53, 0.16); }
|
|
|
|
|
+.point-energy--body { color: #B08968; background: rgba(141, 110, 99, 0.16); }
|
|
|
|
|
+.point-energy--wisdom { color: #FFD700; background: rgba(255, 215, 0, 0.16); }
|
|
|
|
|
+.point-energy--wealth { color: #42A5F5; background: rgba(66, 165, 245, 0.16); }
|
|
|
|
|
+.point-energy--action { color: #4CAF50; background: rgba(76, 175, 80, 0.16); }
|
|
|
|
|
|
|
|
.star-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 4; width: 180rpx; height: 180rpx; border-radius: 50%; }
|
|
.star-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 4; width: 180rpx; height: 180rpx; border-radius: 50%; }
|
|
|
|
|
|
|
@@ -992,11 +992,11 @@ preview 轻量引导条(标题 + 徽章 + 弱化五边形轮廓)
|
|
|
font-size: calc(20rpx * var(--font-scale, 1));
|
|
font-size: calc(20rpx * var(--font-scale, 1));
|
|
|
padding: 6rpx 12rpx; border-radius: 8rpx; white-space: nowrap;
|
|
padding: 6rpx 12rpx; border-radius: 8rpx; white-space: nowrap;
|
|
|
}
|
|
}
|
|
|
-.dim-item--body { color: $dim-data-body; background: $dim-body-tint; }
|
|
|
|
|
-.dim-item--wisdom { color: $dim-data-wisdom; background: $dim-wisdom-tint; }
|
|
|
|
|
-.dim-item--wealth { color: $dim-data-wealth; background: $dim-wealth-tint; }
|
|
|
|
|
-.dim-item--action { color: $dim-data-action; background: $dim-action-tint; }
|
|
|
|
|
-.dim-item--mind { color: $dim-data-mind; background: $dim-mind-tint; }
|
|
|
|
|
|
|
+.dim-item--body { color: #B08968; background: rgba(141, 110, 99, 0.16); }
|
|
|
|
|
+.dim-item--wisdom { color: #FFD700; background: rgba(255, 215, 0, 0.16); }
|
|
|
|
|
+.dim-item--wealth { color: #42A5F5; background: rgba(66, 165, 245, 0.16); }
|
|
|
|
|
+.dim-item--action { color: #4CAF50; background: rgba(76, 175, 80, 0.16); }
|
|
|
|
|
+.dim-item--mind { color: #FF6B35; background: rgba(255, 107, 53, 0.16); }
|
|
|
.dim-item-icon { width: 24rpx; height: 24rpx; margin-right: 4rpx; flex-shrink: 0; }
|
|
.dim-item-icon { width: 24rpx; height: 24rpx; margin-right: 4rpx; flex-shrink: 0; }
|
|
|
|
|
|
|
|
/* 降低动效偏好:CSS 侧关闭过渡 */
|
|
/* 降低动效偏好:CSS 侧关闭过渡 */
|