MindOxyCabin/MindOCApp/src/app/mood/mood.page.scss

/* mood.page.scss */
.mood-journal-v2 {
    --primary: #8A7BEC;
    --secondary: #64C3D3;
    --text: #4A4A6A;
    --bg: #c06c840f;
  
    background: var(--bg);
    padding-bottom: 80px;


    .mood-journal {
      --primary-color: #ff9a9e;
      --secondary-color: #a8edea;
      --text-color: #6c5b7b;
      // 情绪状态指示样式
      .mood-header {
        padding: 20px;
        background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
        border-radius: 0 0 30px 30px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    
        .current-status {
          text-align: center;
          color: white;
          
          ion-icon {
            font-size: 48px;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
          }
    
          .score {
            font-size: 42px;
            font-weight: bold;
            span {
              font-size: 16px;
              opacity: 0.8;
            }
          }
        }
    
        .emotion-cloud {
          margin-top: 15px;
          display: flex;
          justify-content: center;
          gap: 8px;
          flex-wrap: wrap;
    
          .tag {
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 14px;
            background: rgba(255,255,255,0.2);
            backdrop-filter: blur(4px);
            
            &.happy { background: rgba(255,234,167,0.3); }
            &.calm { background: rgba(168,237,234,0.3); }
            &.anxious { background: rgba(255,154,158,0.3); }
          }
        }
      }
      @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.1); }
        100% { transform: scale(1); }
      }
    }

    // 新型情绪仪表盘
    .emotion-dashboard {
      padding: 20px;
      background: #c06c840f;
      border-radius: 0 0 40px 40px;
      box-shadow: 0 8px 32px rgba(138,123,236,0.1);
  
      /* 环形波浪进度条 */
      .circular-progress {
        position: relative;
        width: 180px;
        height: 180px;
        margin: 0 auto 30px;
  
        .wave-container {
          position: absolute;
          width: 100%;
          height: 100%;
          border-radius: 50%;
          overflow: hidden;
          background: linear-gradient(145deg, #F0F1FF, #FFFFFF);
          box-shadow: 8px 8px 16px #D9DAF0, 
                     -8px -8px 16px #FFFFFF;
  
          .liquid {
            position: absolute;
            bottom: 0;
            width: 100%;
            background: var(--primary);
            animation: wave 8s infinite linear;
            height: calc(var(--progress) * 100%);
            opacity: 0.8;
          }
  
          .glow {
            position: absolute;
            width: 120%;
            height: 120%;
            background: radial-gradient(circle at 50% 0%, 
              rgba(138,123,236,0.3) 0%, 
              transparent 60%);
            filter: blur(20px);
          }
        }
  
        .progress-text {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          text-align: center;
  
          .score {
            font-size: 42px;
            font-weight: 700;
            color: var(--text);
            line-height: 1;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
          }
  
          .label {
            font-size: 14px;
            color: #888;
            margin-top: 4px;
          }
        }
      }
      /* 仪表盘增强样式 */
      .vital-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
        margin-top: 30px;

        .stat-item {
          background: rgba(255,255,255,0.9);
          padding: 15px;
          border-radius: 16px;
          transition: transform 0.3s ease;

          &:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 20px rgba(138,123,236,0.15);
          }
        }

        .heart-beat {
          width: 30px;
          height: 30px;
          background: url('data:image/svg+xml,<svg ...>心跳SVG代码</svg>');
          animation: beat 1.2s ease-in-out infinite;
        }
      }

      @keyframes beat {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.15); }
      }

      .ripple-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;

        .ripple {
          position: absolute;
          border: 2px solid rgba(138,123,236,0.3);
          border-radius: 50%;
          animation: ripple 2s ease-out;
        }
      }

      @keyframes ripple {
        from { transform: scale(0); opacity: 0.6; }
        to { transform: scale(3); opacity: 0; }
      }
  
      /* 时间轴可视化 */
      .emotion-timeline {
        display: flex;
        justify-content: space-between;
        padding: 15px 0;
  
        .time-block {
          flex: 1;
          position: relative;
          height: 120px;
  
          .bar {
            position: absolute;
            bottom: 0;
            width: 70%;
            left: 15%;
            background: linear-gradient(to top, var(--primary), var(--secondary));
            height: calc(var(--intensity) * 100%);
            border-radius: 8px 8px 0 0;
            transition: height 0.6s ease;
          }
  
          .time {
            position: absolute;
            bottom: -25px;
            width: 100%;
            text-align: center;
            font-size: 12px;
            color: var(--text);
          }
        }
      }
      /* 时间轴滑动样式 */
      .timeline-scroller {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 20px 0;
        mask: linear-gradient(
          to right, 
          transparent 0%, 
          #000 10% 90%, 
          transparent 100%
        );

        &::-webkit-scrollbar { display: none; }

        .timeline-track {
          display: inline-flex;
          gap: 15px;
          padding: 0 30px;
          transition: transform 0.3s cubic-bezier(0.2, 0, 0.2, 1);
        }

        .time-block {
          flex-shrink: 0;
          width: 80px;
          height: 120px;
          opacity: 0.8;
          transition: opacity 0.3s;

          &:hover {
            opacity: 1;
            transform: scale(1.05);
          }
        }
      }
    }
  
    /* 蜂窝日历 */
    .honeycomb-calendar {
      padding: 10px;
      margin-right: 15px;
      --hex-size: 50px;

      .hex-row {
        display: flex;
        justify-content: center;
        margin-bottom: -3px;

        &:nth-child(even) {
          margin-left: calc(var(--hex-size) * 0.4);
          margin-right: calc(var(--hex-size) * -0.4);
        }
      }

      .hex-cell {
        width: var(--hex-size);
        height: calc(var(--hex-size) * 1.2);
        clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
        margin: 0 2px;
        background: rgba(255,255,255,0.9);
        transition: all 0.3s ease;
        cursor: pointer;
        position: relative;

        .hex-content {
          position: absolute;
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;

          .date {
            font-size: 16px;
            font-weight: 500;
            color: var(--text);
            z-index: 1;
          }

          .particles {
            position: absolute;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at center, 
              rgba(138,123,236,0.1) 0%, 
              transparent 60%);
            opacity: 0;
            transition: opacity 0.3s ease;
          }
        }

        &:hover {
          transform: scale(1.15) rotate(15deg);
          z-index: 2;

          .particles {
            opacity: 1;
          }
        }

        /* 情绪状态颜色 */
        &.excellent { background: rgba(100,195,211,0.3); }
        &.good { background: rgba(138,123,236,0.2); }
        &.normal { background: rgba(255,255,255,0.8); }
        &.poor { background: rgba(255,182,193,0.3); }
      }
    }
  
    /* 智能分析卡片 */
    .analysis-card {
      margin: 20px;
      padding: 16px;
      background: rgba(255,255,255,0.95);
      border-radius: 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  
      .insight {
        display: flex;
        align-items: center;
        color: var(--text);
        margin-bottom: 8px;
  
        ion-icon {
          color: var(--primary);
          margin-right: 8px;
          font-size: 20px;
        }
      }
  
      .suggestion {
        font-size: 14px;
        color: #666;
        padding-left: 28px;
      }
    }

    // 语音输入按钮
    .voice-btn {
      --background: #ff9a9da2;
      --box-shadow: 0 4px 16px rgba(255,154,158,0.3);
      
      &[class*="recording"] {
        animation: pulse 1.5s infinite;
      }
    }
  

  }
  
  @keyframes wave {
    0% { clip-path: polygon(0 20%, 100% 15%, 100% 80%, 0 85%); }
    50% { clip-path: polygon(0 25%, 100% 20%, 100% 75%, 0 80%); }
    100% { clip-path: polygon(0 20%, 100% 15%, 100% 80%, 0 85%); }
  }