.cache-box-view {
  background: var(--bg-lv1);
  padding: 16px 24px;
  overflow: auto;
  .cache-node-box {
    .node-header {
      width: 100%;
      height: 68px;
      display: flex;
      .node-item {
        width: 68px;
        height: 68px;
        border-radius: 50%;
        border: 2px solid var(--primary);
        background: #fff;
        padding: 1px;
        margin-right: 6px;
        .node-item-img-box {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          img {
            width: 100% !important;
            height: 100% !important;
            border-radius: 50%;
          }
        }
      }
      .node-header-content {
        overflow: hidden;
        margin-top: 17px;
        padding: 0 16px;
        flex: 1;
        height: 34px;
        border: 1px solid var(--bg-lv2);
        border-left-color: var(--bg-lv1);
        background: #fff;
        line-height: 34px;
        position: relative;
        display: flex;
        justify-content: space-between;
        .ext-node {
          position: absolute;
          width: 68px;
          height: 68px;
          top: -18px;
          left: -64px;
          background: var(--bg-lv1);
          border-radius: 50%;
          border: 1px solid var(--bg-lv2);
        }
        .node-name {
          font-weight: 700;
          font-size: var(--fs-default);
          color: var(--text);
        }
        .relation-count-box {
          display: flex;
          font-size: var(--fs-small);;
          .relation-count-box-title {
            color: var(--text);
          }
          .relation-count {
            font-weight: 900;
            color: var(--force-place);
            margin-right: 16px;
          }
          .relation-count-box-icon {
            transition: all 0.3s;
            &.active {
              transform: rotate(180deg);
            }
            font-size: 16px;
            cursor: pointer;
          }
        }
      }
    }
    .relation-list {
      height: 0px;
      margin-bottom: 12px;
      overflow: hidden;
      &.active {
        height: auto;
      }
      .relation-list-item {
        display: flex;
        padding-bottom: 4px;
        margin-bottom: 10px;
        border-bottom: 1px solid var(--bd-color);
        &:nth-last-child(1) {
          border-bottom: none;
          margin-bottom: 0;
        }
        .relation-title {
          width: 76px;
          padding-right: 14px;
          display: inline-block;
          text-align: right;
          font-size: var(--fs-small);;
          font-weight: 700;
          display: flex;
          align-items: center;
          flex-direction: row-reverse;
        }
        .relation-node-list {
          flex: 1;
          .relation-node-item {
            width: 100%;
            height: 60px;
            margin-bottom: 4px;
            display: flex;
            .relation-node-box {
              width: 60px;
              height: 60px;
              border-radius: 50%;
              border: 2px solid #000;
              padding: 1px;
              background: #fff;
              margin-right: 6px;
              .relation-node-icon {
                width: 54px;
                height: 54px;
                border-radius: 50%;
                text-align: center;
                line-height: 54px;
                color: #fff;
                font-size: 32px;
                display: flex;
                align-items: center;
                overflow: hidden;
                justify-content: center;
                img {
                  width: 100% !important;
                  height: 100% !important;
                }
              }
            }
            .relation-node-content {
              line-height: 17px;
              font-size: var(--fs-small);;
              display: flex;
              flex: 1;
              flex-direction: column;
              justify-content: center;
              .relation-recovery {
                cursor: pointer;
                color: var(--force-person);
              }
            }
          }
        }
      }
    }
  }
}
