mini-programs/src/other_pages/message/index.scss

@use '~@/scss/images.scss' as img;

.message-container {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  // 导航栏
  .navbar {
    height: 100px;
    background: #FFFFFF;
    padding-top: 44px;
    position: sticky;
    top: 0;
    z-index: 100;

    .navbar-content {
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 15px;

      .navbar-left {
        display: flex;
        align-items: center;
        gap: 8px;

        .navbar-avatar {
          width: 28px;
          height: 28px;
        }

        .navbar-title {
          font-family: 'PingFang SC';
          font-weight: 600;
          font-size: 20px;
          line-height: 1.4;
          color: #000000;
        }
      }
    }
  }


  // 消息列表
  .message-list {
    flex: 1;
    overflow: hidden;
    box-sizing: border-box;
    margin-bottom:100px;
    background-color: none !important;

    .message-list-content {
      display: flex;
      flex-direction: column;
      padding: 0 12px;
      gap: 8px;
    }

    // 系统消息样式
    .system-message {
      background: #FFFFFF;
      border: 0.5px solid rgba(0, 0, 0, 0.08);
      border-radius: 20px;
      padding: 0 0 12px;
      box-shadow: 0px 4px 36px 0px rgba(0, 0, 0, 0.06);
      box-sizing: border-box;

      .message-header {
        display: flex;
        align-items: center;
        padding: 12px 15px 0;

        .message-title {
          font-family: 'PingFang SC';
          font-weight: 600;
          font-size: 16px;
          line-height: 1.5;
          color: #000000;
          flex: 1;
        }

        .message-time {
          font-family: 'PingFang SC';
          font-weight: 400;
          font-size: 12px;
          line-height: 1.5;
          color: rgba(60, 60, 67, 0.6);
        }
      }

      .message-content {
        padding: 8px 15px 0;

        .message-text {
          font-family: 'PingFang SC';
          font-weight: 400;
          font-size: 14px;
          line-height: 1.43;
          color: rgba(0, 0, 0, 0.7);
        }
      }

      .message-action {
        padding: 12px 15px 0;

        .action-divider {
          height: 0.5px;
          background: rgba(0, 0, 0, 0.08);
          margin-bottom: 12px;
        }

        .action-button {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .action-text {
            font-family: 'PingFang SC';
            font-weight: 600;
            font-size: 14px;
            line-height: 1.43;
            color: rgba(0, 0, 0, 0.85);
          }

          .action-arrow {
            width: 16px;
            height: 16px;
          }
        }
      }
    }

    // 用户消息样式
    .user-message {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 15px;
      background: #FFFFFF;
      border: 0.5px solid rgba(0, 0, 0, 0.08);
      border-radius: 20px;
      box-shadow: 0px 4px 36px 0px rgba(0, 0, 0, 0.06);
      box-sizing: border-box;

      .message-avatar {
        position: relative;
        flex-shrink: 0;

        .unread-dot {
          position: absolute;
          top: -2px;
          right: -2px;
          width: 10px;
          height: 10px;
          background: #FF4848;
          border-radius: 50%;
        }
      }

      .message-info {
        flex: 1;
        min-width: 0;

        .message-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 4px;

          .message-title {
            font-family: 'PingFang SC';
            font-weight: 600;
            font-size: 16px;
            line-height: 1.5;
            color: #000000;
          }

          .message-time {
            font-family: 'PingFang SC';
            font-weight: 400;
            font-size: 14px;
            line-height: 1.71;
            color: rgba(0, 0, 0, 0.35);
          }
        }

        .message-content {
          display: flex;
          align-items: center;
          gap: 4px;
          min-width: 0;

          .message-text {
            font-family: 'PingFang SC';
            font-weight: 400;
            font-size: 14px;
            line-height: 1.29;
            color: rgba(0, 0, 0, 0.35);
            flex: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .unread-indicator {
            width: 10px;
            height: 10px;
            background: #FF4848;
            border-radius: 50%;
            flex-shrink: 0;
          }
        }
      }
    }
  }

  // 空状态
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 124px 16px;
    height: 746px;

    .empty-icon {
      width: 300px;
      height: 225px;
      margin-bottom: 12px;
      position: relative;

      .empty-message-icon {
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
        border-radius: 12px;
        position: relative;

        &::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 60px;
          height: 60px;
          background: #d0d0d0;
          border-radius: 50%;
        }

        &::after {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 30px;
          height: 30px;
          background: #a0a0a0;
          border-radius: 50%;
        }
      }
    }

    .empty-text {
      font-family: 'PingFang SC';
      font-weight: 500;
      font-size: 14px;
      line-height: 1.71;
      color: rgba(0, 0, 0, 0.85);
    }
  }
}