// 说说页评论
  .vh-friends {
    min-height: 56vh;

    &>main {
      margin: 1.25rem 0;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      gap: 1.25rem;

      &>article {
        box-sizing: border-box;
        padding: 1rem;
        width: 100%;
        height: max-content;
        border-radius: 0.5rem;
        box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
        background: #fff linear-gradient(90deg, #EDEEF388, #fff) no-repeat 100% 100% / 0 1px;
        background-position: 0 100%;
        background-size: 0 100%;
        transition: .7s cubic-bezier(.6, .1, 0, 1), background-position 0s;
        overflow: hidden;

        &:hover {
          background-size: 100% 100%;
        }

        &>a {
          display: flex;
          flex-direction: column;
          gap: 0.5rem;
          width: 100%;
          height: max-content;

          &>header {
            &>h2 {
              font-size: 1.08rem;
            }
          }

          &>p {
            color: #26262680;
            font-size: 0.875rem;
            line-height: 1.8;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            word-break: break-all;
            overflow: hidden;
          }

          &>footer {
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: max-content;
            overflow: hidden;

            &>span,
            &>time {
              box-sizing: border-box;
              display: flex;
              align-items: center;
              gap: 0.5rem;
              height: 1.56rem;
              font-size: 0.8rem;
              overflow: hidden;

              &>em {
                font-style: normal;
                flex: 1;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }

              &>img {
                flex-shrink: 0;
                width: 1.56rem;
                height: 1.56rem;
                border-radius: 50%;
              }
            }

            &>span {
              flex: 1;
            }

            &>time {
              flex-shrink: 0;
              width: max-content;
              padding: 0.5rem;
              background: #F7F7F7;
              border-radius: 0.8rem;
            }
          }
        }
      }
    }
  }

  @media screen and (max-width: 888px) {}