cfc/cfc-frontend/components/wuxing-sandbox.vue

<template>
  <view class="wuxing-sandbox">
    <view class="sandbox-header">
      <text class="sandbox-title">🌟 五行能量沙盘</text>
      <text class="sandbox-badge">{{ badgeText }}</text>
    </view>

    <view class="sandbox-star">
      <!-- ===== 背景光晕 ===== -->
      <view class="star-glow-bg"></view>

      <!-- ===== 五角星轮廓（clip-path） ===== -->
      <view class="star-shape">
        <view class="star-shape__fill"></view>
        <view class="star-shape__outline"></view>
      </view>

      <!-- ===== 五角星连线（内五边形） ===== -->
      <view class="pentagram-lines">
        <view class="p-line p-line--1"></view>
        <view class="p-line p-line--2"></view>
        <view class="p-line p-line--3"></view>
        <view class="p-line p-line--4"></view>
        <view class="p-line p-line--5"></view>
      </view>

      <!-- ===== 顶点 1：心·火（上） ===== -->
      <view class="star-point star-point--top" @click="onPointClick('mind')" hover-class="point-hover">
        <view class="point-glow point-glow--fire"></view>
        <view class="point-dot point-dot--fire">
          <text class="point-icon">🔥</text>
        </view>
        <text class="point-label">心·火</text>
        <text class="point-status" v-if="mode === 'preview'">点此登录</text>
      </view>

      <!-- ===== 顶点 2：富·水（右上） ===== -->
      <view class="star-point star-point--ur" @click="onPointClick('wealth')" hover-class="point-hover">
        <view class="point-glow point-glow--water"></view>
        <view class="point-dot point-dot--water">
          <text class="point-icon">💧</text>
        </view>
        <text class="point-label">富·水</text>
        <text class="point-status" v-if="mode === 'preview'">点此登录</text>
      </view>

      <!-- ===== 顶点 3：身·土（右下） ===== -->
      <view class="star-point star-point--lr" @click="onPointClick('body')" hover-class="point-hover">
        <view class="point-glow point-glow--earth"></view>
        <view class="point-dot point-dot--earth">
          <text class="point-icon">🌏</text>
        </view>
        <text class="point-label">身·土</text>
        <text class="point-status" v-if="mode === 'preview'">点此登录</text>
      </view>

      <!-- ===== 顶点 4：智·金（左下） ===== -->
      <view class="star-point star-point--ll" @click="onPointClick('wisdom')" hover-class="point-hover">
        <view class="point-glow point-glow--metal"></view>
        <view class="point-dot point-dot--metal">
          <text class="point-icon">⚔️</text>
        </view>
        <text class="point-label">智·金</text>
        <text class="point-status" v-if="mode === 'preview'">点此登录</text>
      </view>

      <!-- ===== 顶点 5：行·木（左上） ===== -->
      <view class="star-point star-point--ul" @click="onPointClick('action')" hover-class="point-hover">
        <view class="point-glow point-glow--wood"></view>
        <view class="point-dot point-dot--wood">
          <text class="point-icon">🌿</text>
        </view>
        <text class="point-label">行·木</text>
        <text class="point-status" v-if="mode === 'preview'">点此登录</text>
      </view>

      <!-- ===== 中心 ===== -->
      <view class="star-center">
        <view class="center-icon-wrap">
          <text class="center-icon">☯</text>
        </view>
        <text class="center-text">五行平衡</text>
        <text class="center-sub">共同成长</text>
      </view>
    </view>

    <view class="shenke-hint" v-if="mode === 'preview'">
      <text class="hint-text">🌱 完成测评，点亮「身·土」</text>
    </view>

    <view class="dimension-bar" v-if="mode !== 'preview'">
      <view class="dim-item dim-item--wood">🌿行</view>
      <text class="dim-arrow">→</text>
      <view class="dim-item dim-item--fire">🔥心</view>
      <text class="dim-arrow">→</text>
      <view class="dim-item dim-item--earth">🌏身</view>
      <text class="dim-arrow">→</text>
      <view class="dim-item dim-item--metal">⚔️智</view>
      <text class="dim-arrow">→</text>
      <view class="dim-item dim-item--water">💧富</view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    mode: { type: String, default: 'preview' },
    badgeText: { type: String, default: '综合成长力 0%' }
  },
  methods: {
    onPointClick(domain) {
      this.$emit('point-click', domain)
    }
  }
}
</script>

<style scoped>
/* ============================================================
   容器 — 暗色渐变背景
   ============================================================ */
.wuxing-sandbox {
  margin: 20rpx 30rpx;
  padding: 24rpx 24rpx 20rpx;
  background: linear-gradient(135deg, #0f0f23, #1a1a3e, #16213e);
  border-radius: 28rpx;
  position: relative;
  overflow: hidden;
}
.wuxing-sandbox::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(ellipse at 30% 20%, rgba(255, 215, 0, 0.03), transparent 60%),
              radial-gradient(ellipse at 70% 80%, rgba(66, 165, 245, 0.03), transparent 60%);
  pointer-events: none;
}

/* ============================================================
   标题栏
   ============================================================ */
.sandbox-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  position: relative;
  z-index: 2;
}
.sandbox-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #FFD700;
}
.sandbox-badge {
  font-size: 20rpx;
  color: rgba(255, 215, 0, 0.7);
  background: rgba(255, 215, 0, 0.1);
  padding: 4rpx 14rpx;
  border-radius: 20rpx;
}

/* ============================================================
   五角星区域
   ============================================================ */
.sandbox-star {
  position: relative;
  height: 460rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ---- 背景光晕 ---- */
.star-glow-bg {
  position: absolute;
  width: 360rpx;
  height: 360rpx;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 215, 0, 0.08), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* ---- 五角星形状（clip-path） ---- */
.star-shape {
  position: absolute;
  width: 320rpx;
  height: 304rpx;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.star-shape__fill {
  position: absolute;
  inset: 0;
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%,
    79% 91%, 50% 70%, 21% 91%, 32% 57%,
    2% 35%, 39% 35%
  );
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.12), rgba(255, 180, 50, 0.04));
  animation: starPulse 4s ease-in-out infinite;
}
.star-shape__outline {
  position: absolute;
  inset: -2rpx;
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%,
    79% 91%, 50% 70%, 21% 91%, 32% 57%,
    2% 35%, 39% 35%
  );
  background: transparent;
  border: 1rpx solid rgba(255, 215, 0, 0.15);
  /* fake border via slightly larger duplicate */
}
/* Real outline using pseudo element trick */
.star-shape__outline::before {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%,
    79% 91%, 50% 70%, 21% 91%, 32% 57%,
    2% 35%, 39% 35%
  );
  background: transparent;
  box-shadow: 0 0 20rpx rgba(255, 215, 0, 0.06);
}

@keyframes starPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ---- 五角星连线（五条边） ---- */
.pentagram-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.p-line {
  position: absolute;
  height: 2rpx;
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.05));
  transform-origin: left center;
  top: 0;
  left: 0;
}

/* Line 1: Fire → Earth (top → lower-right) */
.p-line--1 { top: 46rpx; left: 250rpx; width: 290rpx; transform: rotate(68deg); }
/* Line 2: Earth → Wood (lower-right → upper-left) */
.p-line--2 { top: 340rpx; left: 340rpx; width: 290rpx; transform: rotate(-106deg); }
/* Line 3: Wood → Water (upper-left → upper-right) */
.p-line--3 { top: 156rpx; left: 72rpx; width: 364rpx; transform: rotate(0deg); }
/* Line 4: Water → Metal (upper-right → lower-left) */
.p-line--4 { top: 156rpx; left: 400rpx; width: 290rpx; transform: rotate(106deg); }
/* Line 5: Metal → Fire (lower-left → top) */
.p-line--5 { top: 340rpx; left: 100rpx; width: 290rpx; transform: rotate(-68deg); }

/* ============================================================
   顶点
   ============================================================ */
.star-point {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -50%);
  z-index: 3;
  cursor: pointer;
}
.point-hover {
  opacity: 0.8;
}

/* 顶点定位 */
.star-point--top  { top: 8%;   left: 50%; }
.star-point--ur   { top: 32%;  left: 84%; }
.star-point--lr   { top: 76%;  left: 72%; }
.star-point--ll   { top: 76%;  left: 28%; }
.star-point--ul   { top: 32%;  left: 16%; }

/* ---- 顶点光晕 ---- */
.point-glow {
  position: absolute;
  width: 90rpx;
  height: 90rpx;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  opacity: 0.25;
  pointer-events: none;
}
.point-glow--fire  { background: radial-gradient(circle, #FF6B35, transparent 70%); }
.point-glow--water { background: radial-gradient(circle, #42A5F5, transparent 70%); }
.point-glow--earth { background: radial-gradient(circle, #8D6E63, transparent 70%); }
.point-glow--metal { background: radial-gradient(circle, #FFD700, transparent 70%); }
.point-glow--wood  { background: radial-gradient(circle, #4CAF50, transparent 70%); }

/* ---- 顶点圆点 ---- */
.point-dot {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.point-dot--fire  { background: linear-gradient(135deg, #FF6B35, #E65100); box-shadow: 0 0 16rpx rgba(255, 107, 53, 0.4); }
.point-dot--water { background: linear-gradient(135deg, #42A5F5, #1565C0); box-shadow: 0 0 16rpx rgba(66, 165, 245, 0.4); }
.point-dot--earth { background: linear-gradient(135deg, #8D6E63, #5D4037); box-shadow: 0 0 16rpx rgba(141, 110, 99, 0.4); }
.point-dot--metal { background: linear-gradient(135deg, #FFD700, #FF8F00); box-shadow: 0 0 16rpx rgba(255, 215, 0, 0.4); }
.point-dot--wood  { background: linear-gradient(135deg, #4CAF50, #2E7D32); box-shadow: 0 0 16rpx rgba(76, 175, 80, 0.4); }

.point-icon {
  font-size: 28rpx;
  line-height: 1;
}

/* ---- 顶点标签 ---- */
.point-label {
  font-size: 20rpx;
  color: rgba(255, 255, 255, 0.9);
  font-weight: bold;
  margin-top: 8rpx;
  white-space: nowrap;
}
.point-status {
  font-size: 16rpx;
  color: #F97316;
  margin-top: 2rpx;
  white-space: nowrap;
}

/* ============================================================
   中心圆
   ============================================================ */
.star-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110rpx;
  height: 110rpx;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 4;
  background: radial-gradient(circle at 40% 35%, rgba(255, 215, 0, 0.15), rgba(255, 215, 0, 0.03));
  border: 1rpx solid rgba(255, 215, 0, 0.2);
  box-shadow: 0 0 30rpx rgba(255, 215, 0, 0.08), inset 0 0 20rpx rgba(255, 215, 0, 0.04);
  animation: centerPulse 3s ease-in-out infinite;
}

@keyframes centerPulse {
  0%, 100% { box-shadow: 0 0 30rpx rgba(255, 215, 0, 0.08), inset 0 0 20rpx rgba(255, 215, 0, 0.04); }
  50% { box-shadow: 0 0 40rpx rgba(255, 215, 0, 0.15), inset 0 0 30rpx rgba(255, 215, 0, 0.08); }
}

.center-icon-wrap {
  width: 36rpx;
  height: 36rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rpx;
}
.center-icon {
  font-size: 28rpx;
  color: #FFD700;
}
.center-text {
  font-size: 20rpx;
  color: #FFD700;
  font-weight: bold;
  line-height: 1.3;
}
.center-sub {
  font-size: 16rpx;
  color: rgba(255, 215, 0, 0.5);
  line-height: 1.2;
}

/* ============================================================
   提示 & 维度条
   ============================================================ */
.shenke-hint {
  text-align: center;
  margin-top: 8rpx;
  position: relative;
  z-index: 2;
}
.hint-text {
  font-size: 22rpx;
  color: rgba(255, 215, 0, 0.7);
}

.dimension-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 16rpx;
  gap: 6rpx;
  position: relative;
  z-index: 2;
}
.dim-item {
  font-size: 20rpx;
  padding: 4rpx 12rpx;
  border-radius: 10rpx;
}
.dim-item--wood  { color: #4CAF50;  background: rgba(76, 175, 80, 0.1); }
.dim-item--fire  { color: #FF6B35;  background: rgba(255, 107, 53, 0.1); }
.dim-item--earth { color: #8D6E63;  background: rgba(141, 110, 99, 0.1); }
.dim-item--metal { color: #FFD700;  background: rgba(255, 215, 0, 0.1); }
.dim-item--water { color: #42A5F5;  background: rgba(66, 165, 245, 0.1); }
.dim-arrow {
  font-size: 18rpx;
  color: rgba(255, 255, 255, 0.2);
}
</style>